@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Mulish:wght@400;500;600;700;800;900&display=swap);

@font-face {
    font-family: sfpro;
    src: url(../fonts/custom-animation/SFPRODISPLAYREGULAR.OTF)
}

.tap-future-section {
    padding: 140px 24px;
    background: #fff;
    text-align: center;
}

.tap-future-container {
    max-width: 960px;
    margin: 0 auto;
}

.tap-eyebrow {
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 24px;
}

.tap-heading {
    font-size: clamp(42px, 6vw, 84px);
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: 32px;
}

.tap-heading span {
    display: block;
    font-weight: 400;
}

.tap-description {
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    max-width: 640px;
    margin: 0 auto;
}



@media (min-width:992px) {
    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bc7"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bc8"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bc9"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bce"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bcf"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bd0"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bd5"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bd6"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="35f81ebe-8ba4-db1a-e499-1c6f71b62bd7"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="104b5f2f-2b6e-be82-a9cf-4b31f5035ed0"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="104b5f2f-2b6e-be82-a9cf-4b31f5035ed1"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="104b5f2f-2b6e-be82-a9cf-4b31f5035ed2"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="0337ce6d-2af7-52b2-44e4-896cad0be0c9"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="0337ce6d-2af7-52b2-44e4-896cad0be0ca"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="0337ce6d-2af7-52b2-44e4-896cad0be0cb"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="2635c85a-c05e-7b24-b163-eb7615a5594c"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="2635c85a-c05e-7b24-b163-eb7615a5594d"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="2635c85a-c05e-7b24-b163-eb7615a5594e"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="a2d6c88a-8e97-5cec-60a4-761141ce293f"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="a2d6c88a-8e97-5cec-60a4-761141ce2940"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="a2d6c88a-8e97-5cec-60a4-761141ce2941"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="f1d6499d-4704-74e4-8138-8c3207f0bfaf"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="f1d6499d-4704-74e4-8138-8c3207f0bfb0"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="f1d6499d-4704-74e4-8138-8c3207f0bfb1"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="d1b282d6-ff67-9319-0071-f9f18ebb2d80"] {
        opacity: 0;
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="d1b282d6-ff67-9319-0071-f9f18ebb2d81"] {
        opacity: 0;
        -webkit-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -moz-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        -ms-transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
        transform: translate3d(-2px, 2px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
    }

    html.w-mod-js:not(.w-mod-ix) [data-w-id="d1b282d6-ff67-9319-0071-f9f18ebb2d82"] {
        opacity: 0;
    }
}


@media screen and (max-width: 479px) {
    .desktopvideomobile {
        /* border-radius: 24px; */
        width: 88vw;
        /* height: 169vw; */
        display: flex
;
        /* box-shadow: inset 0 0 0 1px #00000014; */
    }
}


.horizontal-carousel {
    width: 100%;
    max-width: 780px;   /* desktop cap */
    margin: 0 auto;
}



.avatarlinkblock img {
    /* width: 74px; */
    height: auto;
}

@media (max-width: 480px) {
    .avatarlinkblock img {
        width: 56px;
    }
}



.foooter img {
    max-width: 100%;
    max-height: 50px;
}
.foooter-3d img {
    max-width: 100%;
    max-height: 50px;
}




.scroller {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}


.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* general styles */



.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: 1rem;
  background: var(--clr-primary-400);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
  background: red !important;
}

.desktopvideo img {
    border-radius: 44px !important;
}

.desktopvideomobile img {
    border-radius: 34px !important;
}




/* responsive */


/* Add these styles to your style.css file or create a new responsive section */

/* Tablet Breakpoint (768px - 992px) */
@media screen and (min-width: 768px) and (max-width: 992px) {
    
    /* General Layout Adjustments */
    .all-the-widgets {
        width: 100vw;
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .div-block-104 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }
    
    .column-2, .column-3, .column-4 {
        display: none;
    }
    
    .column-5 {
        display: flex !important;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Hero Section */
    .new-hero {
        min-height: 1400px;
    }
    
    .hero-content-container {
        min-height: 700px;
    }
    
    .heading-13 {
        font-size: 48px;
        line-height: 56px;
        padding: 0 32px;
    }
    
    .heading-14 {
        font-size: 20px;
        line-height: 32px;
        padding: 0 32px;
    }
    
    /* Video Section */
    .video-section {
        margin-top: -80vh;
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .desktopvideo,
    .desktopvideomobile {
        width: 100%;
        height: auto;
        max-height: 500px;
    }
    
    .desktopvideo img,
    .desktopvideomobile img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    /* Content Sections */
    .div-block-105 {
        max-width: 80%;
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .subheading-4 {
        font-size: 48px;
        line-height: 56px;
    }
    
    .subheading-6 {
        font-size: 24px;
        line-height: 36px;
        width: 100%;
        max-width: 600px;
    }
    
    /* Widget Images */
    .image-20,
    .image-26 {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }
    
    .link-block-1,
    .link-block-2,
    .link-block-3,
    .link-block-338 {
        width: 100%;
    }
    
    .div-block-37 {
        width: 100%;
    }
    
    .div-block-107,
    .div-block-108 {
        gap: 24px;
    }
    
    /* Scroller Sections */
    .scroller {
        max-width: 90vw;
    }
    
    .icon-container {
        width: 32px;
        height: 32px;
    }
    
    .icon-container img {
        width: 100%;
        height: auto;
    }
    
    /* Team Section */
    .familiar-faces {
        margin-top: 150px;
    }
    
    .avatarlinkblock {
        width: 56px;
        height: 56px;
    }
    
    .image-42 {
        width: 56px;
        height: 56px;
    }
    
    .heading-15 {
        font-size: 24px;
        line-height: 32px;
    }
    
    /* Footer */
    .foooter {
        padding-top: 160px;
        padding-bottom: 160px;
        margin-top: 100px;
    }
    
    .link-container-area {
        gap: 24px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .link-3 {
        font-size: 14px;
    }
    
    /* Hide unnecessary columns on tablet */
    .column-horizontal-1,
    .column-horizontal-2,
    .column-1,
    .column-2,
    .column-3,
    .column-4 {
        display: none !important;
    }
    
    /* Adjust grid for tablet */
    .div-block-104 .column-5 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        width: 100%;
    }
    
    .div-block-104 .column-5 > * {
        width: 100%;
    }
    
    /* Product images grid */
    .div-block-107 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    /* Navbar adjustments */
    .navbar {
        padding: 24px;
    }
    
    .image-104 {
        width: 32px;
    }
}

/* Additional adjustments for portrait tablets */
@media screen and (min-width: 768px) and (max-width: 992px) and (orientation: portrait) {
    .new-hero {
        min-height: 1200px;
    }
    
    .video-section {
        margin-top: -70vh;
    }
    
    .desktopvideo,
    .desktopvideomobile {
        height: 400px;
    }
    
    .div-block-104 .column-5 {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}

/* Additional adjustments for landscape tablets */
@media screen and (min-width: 768px) and (max-width: 992px) and (orientation: landscape) {
    .new-hero {
        min-height: 1600px;
    }
    
    .video-section {
        margin-top: -90vh;
    }
    
    .desktopvideo,
    .desktopvideomobile {
        height: 450px;
    }
    
    .div-block-104 .column-5 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}

/* Fix for Webflow responsive classes if needed */
@media screen and (max-width: 992px) {
    .w-container {
        max-width: 728px;
    }
    
    .w-col-medium-6 {
        width: 50%;
    }
    
    .w-col-medium-12 {
        width: 100%;
    }
}


/* ===================================== */
/* iPad Screen Section - Responsive Rules */
/* ===================================== */

/* Hide on iPad (768px-1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .ipad-screen {
        display: none !important;
    }

    .ipad-screen-show {
        display: block !important;
    }
}

/* Show on mobile (below 768px) */
@media screen and (max-width: 767px) {
    /* .ipad-screen {
        display: block !important;
        width: 100%;
    } */
    
    /* Mobile layout adjustments */
    /* .ipad-screen .div-block-107 {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;
        width: 100%;
    }
    
    .ipad-screen .div-block-107 > div {
        width: 100% !important;
    }
    
    .ipad-screen .div-block-39,
    .ipad-screen .div-block-36,
    .ipad-screen .div-block-78 {
        width: 100% !important;
        max-width: 100%;
    }
    
    .ipad-screen .image-26 {
        width: 100% !important;
        height: auto !important;
        border-radius: 20px;
        object-fit: cover;
    } */
    
    /* Set specific heights for mobile images */
    /* .ipad-screen .div-block-39 .image-26,
    .ipad-screen .div-block-78 .image-26 {
        height: 250px !important;
    }
    
    .ipad-screen .div-block-36 .image-26 {
        height: 150px !important;
    } */
}

/* Show on desktop (above 1024px) */
/* @media screen and (min-width: 1025px) {
    .ipad-screen {
        display: flex !important;
        gap: 40px;
    } */
    
    /* Restore original desktop layout */
    /* .ipad-screen .div-block-107 {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    
    .ipad-screen .div-block-39,
    .ipad-screen .div-block-36,
    .ipad-screen .div-block-78 {
        width: 175px !important;
    }
    
    .ipad-screen .image-26 {
        width: 175px !important;
        height: auto !important;
        border-radius: 28px;
    } */
    
    /* Specific heights for desktop */
    /* .ipad-screen .div-block-39 .image-26,
    .ipad-screen .div-block-78 .image-26 {
        height: 390px !important;
    }
    
    .ipad-screen .div-block-36 .image-26 {
        height: 175px !important;
    } */
}

/* Additional responsive adjustments */

/* For very small mobile devices (below 480px) */
/* @media screen and (max-width: 479px) {
    .ipad-screen .div-block-39 .image-26,
    .ipad-screen .div-block-78 .image-26 {
        height: 220px !important;
    }
    
    .ipad-screen .div-block-36 .image-26 {
        height: 130px !important;
    }
} */

/* For large desktop screens */
@media screen and (min-width: 1200px) {
    /* .ipad-screen {
        gap: 50px;
    }
    
    .ipad-screen .div-block-107 {
        gap: 50px;
    } */
}

/* Fix for portrait vs landscape iPad */
/* @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .ipad-screen {
        display: none !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .ipad-screen {
        display: none !important;
    }
} */