@font-face {
    font-family: "TiemposHeadline";
    src: url("../../public/assets/fonts/Tiempos-Font/TiemposHeadline-LightItalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

.enterprise-section {
    background: #000;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 140px 0;
}

.enterprise-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    /* controls all vertical spacing */
}

.enterprise-container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    position: relative;
    text-align: center;
}

.enterprise-label-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    /* center section */
    gap: 10px;
    margin-bottom: 20px;
}

.enterprise-label-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.enterprise-label {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FFFFFF;
}

.enterprise-heading {
    font-family: "TiemposHeadline", serif;
    font-size: 48px;
    line-height: 55px;
    text-align: center;
    letter-spacing: 0;
}

/* Default words */
.enterprise-heading span {
    font-style: italic;
    font-weight: 500;
}

/* Only measurable changes weight */
.measurable-text {
    font-family: "TiemposHeadline", serif;
    font-weight: 300;
    font-style: italic;
    /* VERY IMPORTANT */
}

.blue-text {
    background: linear-gradient(71deg, #40C9FF, #1EA5DB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.purple-text {
    background: linear-gradient(71deg, #B012E6, #E81CFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.enterprise-description {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 300;
    /* Light */
    font-style: normal;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
    color: #FFFFFF;
    padding: 0 60px;
}

.enterprise-sub {
    font-family: "TiemposHeadline", serif;
    font-weight: 500;
    /* Medium */
    font-style: italic;
    /* Medium Italic */
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    text-align: center;
}

.enterprise-center {
    position: relative;
    margin-top: 80px;

    display: flex;
    /* add */
    justify-content: center;
    /* horizontal center */
    align-items: center;
    /* vertical center */

    width: 100%;
}

.enterprise-center video {
    width: 800px;
    /* adjust if needed */
    max-width: 100%;
    border-radius: 24px;
}

.enterprise-logo {
    position: absolute;

    width: 283px;
    height: 104px;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* perfectly center on video */

    z-index: 2;
    object-fit: contain;
}

.enterprise-card {
    position: absolute;

    width: 190px;
    height: 123px;

    padding: 10px 15px;
    border-radius: 16px;
    border: 0.5px solid rgba(120, 170, 220, 0.3);

    display: flex;
    flex-direction: column;
    gap: 10px;

    background:
        radial-gradient(circle at bottom right,
            rgba(130, 170, 210, 0.35),
            rgba(0, 0, 0, 0) 55%),
        radial-gradient(circle at top left,
            rgba(130, 170, 210, 0.25),
            rgba(0, 0, 0, 0) 50%),
        linear-gradient(145deg,
            #0b0f15,
            #0f1722);

    /* backdrop-filter: blur(8px); */

    color: white;
    text-align: left;
}

.enterprise-card img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.enterprise-card p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    text-transform: capitalize;

    margin-top: auto;
    /* pushes text to bottom */
    margin-bottom: 0;

    text-align: left;
    color: #A7B5BE;
}

/* LEFT SIDE */

.card-left-1 {
    top: 350px;
    left: 203px;
}

.card-left-2 {
    top: 504px;
    left: 26px;
}

.card-left-3 {
    bottom: 18px;
    left: 200px;
}


/* RIGHT SIDE */

.card-right-1 {
    top: 350px;
    right: 223px;
}

.card-right-2 {
    top: 504px;
    right: 58px;
}

.card-right-3 {
    bottom: 18px;
    right: 222px;
}

.enterprise-card:hover {
    background: rgba(130, 170, 210, 0.35);

    border: 0.5px solid rgba(200, 200, 200, 0.4);

    transition: all 0.3s ease;
}

.enterprise-card:hover .icon-left-1 {
    content: url("../../public/assets/icons/left-card-hover-1.png");
}

.enterprise-card:hover .icon-left-2 {
    content: url("../../public/assets/icons/left-card-hover-2.png");
}

.enterprise-card:hover .icon-left-3 {
    content: url("../../public/assets/icons/left-card-hover-3.png");
}

.enterprise-card:hover .icon-right-1 {
    content: url("../../public/assets/icons/right-card-hover-1.png");
}

.enterprise-card:hover .icon-right-2 {
    content: url("../../public/assets/icons/right-card-hover-2.png");
}

.enterprise-card:hover .icon-right-3 {
    content: url("../../public/assets/icons/right-card-hover-3.png");
}

/* ===============================
   Enterprise Reveal Animation
=================================*/

/* Initial hidden state */
.enterprise-label-wrapper,
.enterprise-heading,
.enterprise-description,
.enterprise-sub,
.enterprise-center,
.enterprise-card {
    opacity: 0;
    filter: blur(20px);
    transition: all 1s ease;
}

/* Movement directions */

.enterprise-label-wrapper {
    transform: translateY(40px);
}

.enterprise-heading {
    transform: translateY(50px);
}

.enterprise-description {
    transform: translateY(60px);
}

.enterprise-sub {
    transform: translateY(70px);
}

/* Video reveal */
.enterprise-center {
    transform: scale(0.9);
}

/* Cards reveal */
.enterprise-card {
    transform: translateY(60px);
}

/* Reveal state */
.enterprise-section.reveal-active .enterprise-label-wrapper,
.enterprise-section.reveal-active .enterprise-heading,
.enterprise-section.reveal-active .enterprise-description,
.enterprise-section.reveal-active .enterprise-sub,
.enterprise-section.reveal-active .enterprise-center,
.enterprise-section.reveal-active .enterprise-card {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

.enterprise-card:nth-child(1) {
    transition-delay: 0.1s;
}

.enterprise-card:nth-child(2) {
    transition-delay: 0.2s;
}

.enterprise-card:nth-child(3) {
    transition-delay: 0.3s;
}

.enterprise-card:nth-child(4) {
    transition-delay: 0.4s;
}

.enterprise-card:nth-child(5) {
    transition-delay: 0.5s;
}

.enterprise-card:nth-child(6) {
    transition-delay: 0.6s;
}

/* =================================
   TABLET (iPad landscape)
=================================*/

@media (max-width: 1024px) {

    .enterprise-section {
        padding: 120px 20px;
    }

    .enterprise-label {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .enterprise-heading {
        font-family: "TiemposHeadline", serif;
        font-weight: 500;
        font-style: italic;
        font-size: 36px;
        line-height: 44px;
        text-align: center;
    }

    .enterprise-description {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 300;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0;
        text-align: center;
        padding: 0 40px;
    }

    .enterprise-sub {
        font-family: "TiemposHeadline", serif;
        font-weight: 500;
        font-style: italic;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0;
        text-align: center;
    }

     .enterprise-center{
        position:relative;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .enterprise-center video{
        width:650px;
        max-width:100%;
    }

    /* LOGO FIX FOR IPAD */

    .enterprise-logo{

        width:212px;      /* slightly smaller */

        height:auto;

        top:52%;          /* move logo slightly upward */

        left:50%;

        transform:translate(-50%, -50%);

    }

    /* Move cards closer to video */

    .card-left-1 {
        left: 47px;
    }

    .card-left-2 {
        left: 20px;
    }

    .card-left-3 {
        left: 47px;
        bottom: -96px;
    }

    .card-right-1 {
        right: 47px;
    }

    .card-right-2 {
        right: 20px;
    }

    .card-right-3 {
               right: 47px;
        bottom: -96px;
    }

}


/* =================================
   TABLET PORTRAIT / LARGE PHONES
=================================*/

@media (max-width: 768px) {

    .enterprise-label {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 12px;
        line-height: 24px;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .enterprise-heading {
        font-family: "TiemposHeadline", serif;
        font-weight: 500;
        font-style: italic;
        font-size: 28px;
        line-height: 40px;
        letter-spacing: 0;
        text-align: center;
    }

    .enterprise-description {
        font-family: "Space Grotesk", sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0;
        text-align: center;
        padding: 0 20px;
    }

    .enterprise-sub {
        font-family: "TiemposHeadline", serif;
        font-weight: 500;
        font-style: italic;
        font-size: 16px;
        line-height: 28px;
        letter-spacing: 0;
        text-align: center;
    }

    .enterprise-center video {
        width: 520px;

    }

    .enterprise-logo {
        width: 220px;
    }

    /* cards closer */

    .card-left-1 {
        left: 20px;
        top: 300px;
    }

    .card-left-2 {
        left: 10px;
        top: 490px;
    }

    .card-left-3 {
                left: 20px;
        bottom: -183px;
    }

    .card-right-1 {
        right: 20px;
        top: 300px;
    }

    .card-right-2 {
        right: 10px;
        top: 490px;
    }

    .card-right-3 {
        right: 20px;
        bottom: -183px;
    }

}


@media (max-width:480px){

    .enterprise-section{
        padding:90px 20px;
    }

    /* TYPOGRAPHY */

    .enterprise-label{
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight:400;
        font-size:12px;
        line-height:24px;
        text-transform:uppercase;
    }

    .enterprise-heading{
        font-family:"TiemposHeadline", serif;
        font-weight:500;
        font-style:italic;
        font-size:28px;
        line-height:40px;
        text-align:center;
    }

    .enterprise-description{
        font-family:"Space Grotesk", sans-serif;
        font-weight:300;
        font-size:12px;
        line-height:20px;
        text-align:center;
        padding:0 10px;
    }

    .enterprise-sub{
        font-family:"TiemposHeadline", serif;
        font-weight:500;
        font-style:italic;
        font-size:16px;
        line-height:28px;
        text-align:center;
    }

    /* GRID LAYOUT */

    .enterprise-container{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:16px;
        justify-items:center;
    }

    /* HEADER FULL WIDTH */

    .enterprise-header{
        grid-column:1 / -1;
        order:1;
    }

    /* CARDS */

    .enterprise-card{
        position:relative;

        width:158px;
        height:101px;

        padding:8px 12px;

        border-radius:13.15px;
        border:0.41px solid rgba(120,170,220,0.3);

        display:flex;
        flex-direction:column;
        gap:10px;

        order:2;
    }

    /* RESET DESKTOP POSITIONS */

    .card-left-1,
    .card-left-2,
    .card-left-3,
    .card-right-1,
    .card-right-2,
    .card-right-3{
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }

    /* ICON */

    .enterprise-card img{
        width:28px;
        height:28px;
        object-fit:contain;
    }

    /* CARD TEXT */

    .enterprise-card p{
        font-family:"Space Grotesk", sans-serif;
        font-weight:400;
        font-size:11.5px;
        line-height:17.26px;
        text-transform:capitalize;
        color:#A7B5BE;
        margin:0;
    }
/* VIDEO AFTER CARDS */

.enterprise-center{

    grid-column:1 / -1;
    order:3;

    position:relative;

    width:100%;
    max-width:360px;   /* keeps circle nicely sized */

    margin:50px auto 0;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* VIDEO */

.enterprise-center video{

    width:100%;
    height:auto;

    border-radius:24px;
}

/* LOGO */

.enterprise-logo{

    position:absolute;

    width:120px;   /* reduced so it sits nicely in circle */

    height:auto;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    object-fit:contain;
}
}