/* =========================================================
   HOME.CSS
========================================================= */

.hero{
    position:relative;
    width:100%;
    overflow:hidden;
}

.hero-slider{
    position:relative;
    width:100%;
    height:710px;
    overflow:hidden;
}

/* =========================================================
   SLIDES
========================================================= */

.hero-slide{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
    z-index:5;
}

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

.hero-slide::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.40) 0%,
            rgba(0,0,0,.15) 38%,
            rgba(0,0,0,.03) 100%
        );

    z-index:1;
}

/* =========================================================
   TEXTURE
========================================================= */

.hero-slide::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.03) 2px,
            transparent 2px,
            transparent 7px
        );

    z-index:2;

    pointer-events:none;
}

/* =========================================================
   SHAPES
========================================================= */

.hero-shapes{
    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:240px;

    z-index:3;

    pointer-events:none;
}

.hero-shape-dark{
    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:125px;

    background:rgba(0,0,0,.42);

    clip-path:polygon(0 0, 65% 0, 100% 100%, 0% 100%);
}

.hero-shape-gold{
    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:240px;

    background:rgba(197,141,34,.88);

    clip-path:polygon(0 0, 35% 0, 100% 100%, 0% 100%);
}

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

.hero-content{
    position:relative;
    z-index:5;

    width:100%;
}

.hero-inner{
    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding:0 62px;
}

.hero-text{
    max-width:560px;
}

.hero-title{
    color:#ffffff;

    font-size:48px;
    line-height:1;

    font-weight:700;

    letter-spacing:-1px;

    text-transform:uppercase;

    text-shadow:
        0 3px 10px rgba(0,0,0,.22);

    margin-bottom:6px;
}

.hero-subtitle{
    color:#ffffff;

    font-size:35px;
    line-height:1.05;

    font-weight:300;

    letter-spacing:-.5px;

    text-transform:uppercase;

    text-shadow:
        0 3px 10px rgba(0,0,0,.22);

    margin-bottom:26px;
}

/* =========================================================
   BUTTON
========================================================= */

.hero-btn{
    min-width:130px;
    height:44px;

    border-radius:3px;

    font-size:11px;
    font-weight:600;

    letter-spacing:0;
}

/* =========================================================
   DOTS
========================================================= */

.slider-dots{
    position:absolute;

    left:50%;
    bottom:22px;

    transform:translateX(-50%);

    display:flex;
    gap:10px;

    z-index:20;
}

.dot{
    width:11px;
    height:11px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    cursor:pointer;

    transition:
        background .3s ease,
        opacity .3s ease;
}

.dot.active{
    background:#ffffff;
}

/* =========================================================
   FEATURES
========================================================= */

.features{
    background:#F6F6F6;
    padding:90px 0 90px;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:44px;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:20px;
}

.feature-icon img{
    width:140px;
    height:140px;

    object-fit:contain;

    opacity:.80;

    transition:opacity .3s ease;
}

.feature-item:hover .feature-icon img{
    opacity:.9;
}

.feature-content h3{
    color:#333333;

    font-size:21px;
    font-weight:500;

    margin-bottom:10px;

    letter-spacing:0;
}

.feature-content p{
    color:#6c6c6c;

    font-size:15px;
    line-height:1.85;

    letter-spacing:0;
}

/* =========================================================
   PARTNERS
========================================================= */

.partners{
    background:#e9eaea;
    padding:80px 0 85px;
}

.partners-title{
    text-align:center;

    color:#b0b0b0;

    font-size:20px;
    font-weight:400;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:34px;
}

.partners .container{
    max-width:1480px;
}

.partners-grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;

    flex-wrap:wrap;
}

.partners-grid img{
    max-height:112px;

    filter:grayscale(88%);

    opacity:.60;

    transition:
        filter .35s ease,
        opacity .35s ease,
        transform .35s ease;
}

.partners-grid img:hover{
    filter:grayscale(0%);
    opacity:1;

    transform:translateY(-2px);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1400px){

    .hero-slider{
        height:620px;
    }

    .hero-title{
        font-size:44px;
    }

    .hero-subtitle{
        font-size:32px;
    }

}

@media(max-width:1201px){

    .hero-slider{
        height:520px;
    }

}

@media(max-width:991px){

    .hero-slider{
        height:420px;
    }

}

@media(max-width:891px){

    .hero-slider{
        height:390px;
    }

}

@media(max-width:768px){

    .features-grid{
        grid-template-columns:3fr;
    }

    .hero-slider{
        height:340px;
    }

    .hero-inner{
        padding:0 28px;
    }

    .hero-title{
        font-size:34px;
    }

    .hero-subtitle{
        font-size:25px;
    }

    .hero-shapes{
        width:170px;
    }

    .hero-shape-dark{
        width:90px;
    }

    .hero-shape-gold{
        width:170px;
    }

    .partners-grid{
        justify-content:center;
    }

    .partners-grid img{
        max-height:62px;
    }

}