/* =========================================================
   HOME ADVANTAGES
========================================================= */


/* =========================================================
   INTRO
========================================================= */

.advantages-intro{

    position:relative;

    display:grid;

    grid-template-columns:0.8fr 1.6fr;

    column-gap:100px;

    align-items:center;

    min-height:600px;

    padding:180px 250px 180px 320px;

    overflow:hidden;

    color:white;

    /*
     * Create an isolated stacking context
     */
    isolation:isolate;

    /*
     * Important:
     * Clip the fixed video inside this section.
     */
    clip-path:inset(0);

}


/* =========================================================
   FIXED VIDEO BACKGROUND
========================================================= */

.advantages-video{

    position:fixed;

    z-index:-2;

    top:0;

    left:0;

    width:100vw;

    height:100vh;

    object-fit:cover;

    object-position:center center;

    pointer-events:none;

    will-change:transform;

}


/* =========================================================
   VIDEO OVERLAY
========================================================= */

.advantages-video-overlay{

    position:absolute;

    z-index:-1;

    top:0;

    left:0;

    width:100%;

    height:100%;

    pointer-events:none;

    background:

        linear-gradient(
            90deg,
            rgba(4,17,32,0.88) 0%,
            rgba(4,17,32,0.65) 42%,
            rgba(4,17,32,0.38) 72%,
            rgba(4,17,32,0.28) 100%
        );

}


/* =========================================================
   CONTENT LAYER
========================================================= */

.advantages-intro-label,
.advantages-intro h2,
.advantages-intro p{

    position:relative;

    z-index:2;
   text-shadow:
        0 2px 8px rgba(0,0,0,0.55),
        0 0 18px rgba(0,0,0,0.25);
}


/* =========================================================
   WHY US
========================================================= */

.advantages-intro-label{

    align-self:center;

    color:#ffffff;

    font-size:50px;

    line-height:1;

    font-weight:900;

    letter-spacing:2px;

    /*text-transform:uppercase;*/

    white-space:nowrap;

}


/* Blue accent line */

.advantages-intro-label::after{

    content:"";

    display:block;

    width:120px;

    height:6px;

    margin-top:20px;

    background:#0066cc;

    box-shadow:
        0 0 12px rgba(0,102,204,0.55);

}


/* =========================================================
   MAIN HEADING
========================================================= */

.advantages-intro h2{

    grid-column:2;

    margin:0 0 24px;

    font-size:46px;

    line-height:1.16;

    letter-spacing:-0.8px;

    font-weight:700;

    color:#ffffff;
    text-shadow:
        0 3px 10px rgba(0,0,0,0.60),
        0 0 20px rgba(0,0,0,0.25);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.advantages-intro p{

    grid-column:2;

    max-width:780px;

    margin:0;

    color:rgba(255,255,255,0.82);

    font-size:17px;

    line-height:1.85;

    font-weight:400;

}


/* =========================================================
   REMOVE OLD BACKGROUND POSITION TRANSITION
========================================================= */

.advantages-intro{

    transition:none;

}


/* =========================================================
   ADVANTAGE LIST
========================================================= */

.advantages-list{

    max-width:1500px;

    border-top:1px solid #d9e0e8;

    margin:auto;

    padding:0 20px;

}


/* =========================================================
   ADVANTAGE ITEM
========================================================= */

.advantage-item{

    position:relative;

    display:grid;

    grid-template-columns:100px 1fr;

    gap:50px;

    padding:38px 0;

    border-bottom:1px solid #d9e0e8;

    overflow:hidden;

    transition:
        padding-left .45s ease,
        background-color .45s ease;

}


/* =========================================================
   ADVANTAGE HOVER BACKGROUND
========================================================= */

.advantage-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;

    pointer-events:none;

    opacity:0;

    background:

        radial-gradient(
            circle at 15% 50%,
            rgba(0,102,204,0.10),
            transparent 42%
        );

    transform:translateX(-30px);

    transition:
        opacity .5s ease,
        transform .6s ease;

}


.advantage-item:hover::before{

    opacity:1;

    transform:translateX(0);

}


/* =========================================================
   ADVANTAGE HOVER
========================================================= */

.advantage-item:hover{

    padding-left:15px;

}


/* =========================================================
   BLUE BOTTOM LINE
========================================================= */

.advantage-item::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:#0066cc;

    box-shadow:
        0 0 12px rgba(0,102,204,0.45);

    transition:
        width .55s cubic-bezier(.22,.61,.36,1);

}


.advantage-item:hover::after{

    width:100%;

}


/* =========================================================
   NUMBER
========================================================= */

.advantage-index{

    position:relative;

    z-index:2;

    font-size:60px;

    font-weight:900;

    line-height:1;

    color:#0066cc;

    padding-top:5px;

    transition:
        transform .4s ease,
        letter-spacing .4s ease;

}


.advantage-item:hover .advantage-index{

    transform:translateX(6px);

    letter-spacing:1px;

}


/* =========================================================
   ADVANTAGE CONTENT
========================================================= */

.advantage-content{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:60px;

    align-items:center;

}


/* =========================================================
   ADVANTAGE TITLE
========================================================= */

.advantage-content h3{

    margin:0;

    font-size:25px;

    line-height:1.3;

    color:#111820;

    transition:
        transform .4s ease,
        color .4s ease;

}


.advantage-item:hover .advantage-content h3{

    transform:translateX(8px);

    color:#0066cc;

}


/* =========================================================
   ADVANTAGE DESCRIPTION
========================================================= */

.advantage-content p{

    max-width:650px;

    margin:0;

    color:#607084;

    font-size:15px;

    line-height:1.8;

    transition:
        color .4s ease;

}


.advantage-item:hover .advantage-content p{

    color:#43566b;

}


/* =========================================================
   BOTTOM HIGHLIGHTS
========================================================= */

.advantages-highlights{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    margin-top:70px;

    border-top:1px solid #d9e0e8;

    border-bottom:1px solid #d9e0e8;

}


.highlight-item{

    padding:28px 25px;

    border-right:1px solid #d9e0e8;

}


.highlight-item:last-child{

    border-right:none;

}


.highlight-item strong{

    display:block;

    color:#0066cc;

    font-size:18px;

    letter-spacing:1px;

}


.highlight-item span{

    display:block;

    margin-top:5px;

    color:#7a8796;

    font-size:12px;

    letter-spacing:1.5px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1200px){

    .advantages-intro{

        grid-template-columns:0.75fr 1.5fr;

        column-gap:60px;

        padding:150px 100px;

    }


    .advantages-intro-label{

        font-size:44px;

    }


    .advantages-intro h2{

        font-size:40px;
        text-shadow:
        0 3px 10px rgba(0,0,0,0.60),
        0 0 20px rgba(0,0,0,0.25);

    }


    .advantage-content{

        grid-template-columns:280px 1fr;

        gap:40px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

    /* -----------------------------------------
       Intro
    ----------------------------------------- */

    .advantages-intro{

        display:block;

        min-height:560px;

        padding:100px 25px;

        clip-path:inset(0);

    }


    /* -----------------------------------------
       Fixed Video
    ----------------------------------------- */

    .advantages-video{

        position:fixed;

        top:0;

        left:0;

        width:100vw;

        height:100vh;

        object-fit:cover;

        object-position:center center;

    }


    /* -----------------------------------------
       Mobile Overlay
    ----------------------------------------- */

    .advantages-video-overlay{

        background:

            linear-gradient(
                180deg,
                rgba(4,17,32,0.82) 0%,
                rgba(4,17,32,0.55) 45%,
                rgba(4,17,32,0.88) 100%
            );

    }


    /* -----------------------------------------
       WHY US
    ----------------------------------------- */

    .advantages-intro-label{

        margin-bottom:35px;

        font-size:60px;

        line-height:1;

        letter-spacing:1px;

    }


    .advantages-intro-label::after{

        width:40px;

        height:2px;

        margin-top:15px;

    }


    /* -----------------------------------------
       Heading
    ----------------------------------------- */

    .advantages-intro h2{

        margin:0 0 25px;

        font-size:34px;

        line-height:1.15;

        letter-spacing:-0.5px;
        text-shadow:
        0 3px 10px rgba(0,0,0,0.60),
        0 0 20px rgba(0,0,0,0.25);
    }


    /* -----------------------------------------
       Description
    ----------------------------------------- */

    .advantages-intro p{

        max-width:none;

        font-size:15px;

        line-height:1.75;

    }


    /* -----------------------------------------
       Advantages List
    ----------------------------------------- */

    .advantages-list{

        max-width:none;

        padding:0 20px;

    }


    /* -----------------------------------------
       Advantage Item
    ----------------------------------------- */

    .advantage-item{

        grid-template-columns:45px 1fr;

        gap:20px;

        padding:30px 0;

    }


    .advantage-item:hover{

        padding-left:0;

    }


    /* -----------------------------------------
       Number
    ----------------------------------------- */

    .advantage-index{

        font-size:38px;

        padding-top:4px;

    }


    .advantage-item:hover .advantage-index{

        transform:translateX(3px);

    }


    /* -----------------------------------------
       Content
    ----------------------------------------- */

    .advantage-content{

        display:block;

    }


    .advantage-content h3{

        margin-bottom:12px;

        font-size:21px;

    }


    .advantage-content p{

        font-size:14px;

        line-height:1.75;

    }


    /* -----------------------------------------
       Disable hover background on touch
    ----------------------------------------- */

    .advantage-item::before{

        display:none;

    }

}