/* ===================================
   SCROLL ANIMATION
=================================== */

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
    will-change:transform, opacity;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* LEFT ANIMATION */
.reveal-left{
    opacity:0;
    transform:translateX(-100px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-left.active{
    opacity:1;
    transform:translateX(0);
}

/* RIGHT ANIMATION */
.reveal-right{
    opacity:0;
    transform:translateX(100px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-right.active{
    opacity:1;
    transform:translateX(0);
}

/* ZOOM */
.reveal-zoom{
    opacity:0;
    transform:scale(.8);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-zoom.active{
    opacity:1;
    transform:scale(1);
}

/* STAGGER EFFECT */
.delay-1{ transition-delay:.1s; }
.delay-2{ transition-delay:.2s; }
.delay-3{ transition-delay:.3s; }
.delay-4{ transition-delay:.4s; }
.delay-5{ transition-delay:.5s; }

/* =========================
   GLOBAL IMAGE
========================= */

img,
svg{
    vertical-align:middle;
}

.img-fluid{
    max-width:100%;
    height:auto;
}

/* =========================
   LEFT HERO PATTERN
========================= */

.hero-left-pattern{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.left-gradient-hero{
    position:absolute;
    left:0;
    top:70px;
    height:100%;
    max-width:330px;
}
 
.hero-section{
    background:#191919;
    min-height:100vh;
    position:relative;
    overflow:hidden;
    padding-top:0;
    display:flex;
    align-items:center;
}

.banner-secondary-btn{
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/corner/background-hero.webp");
    z-index: 0;
 background-position: right center;
background-repeat: no-repeat;
background-size: contain;
}

/* =========================
   WRAPPER
========================= */

.hero-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;
}

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

.hero-content{
    position:relative;
    z-index:2;
}

.hero-content p{
    padding-top:23px;
    width:470px !important;
    color:#FFFFFFCC !important;
    width:546px;
}

/* all  section title */
    .all-sesction-title{
        font-weight:400;
        line-height:155%;
        font-size:14px;
        letter-spacing:8%;
        color:#FFFFFFCC;
        padding-bottom:12px;
    }

    .all-sesction-title-stats{
        font-weight:400;
        line-height:155%;
        font-size:12px;
        letter-spacing:8%;
        color:#FFFFFFCC;
    }

    .hero-content h1{
        padding-top:17px;
    }

    .hero-content h1 span{
        color:#E22A27;
    }

    .hero-content h5{
        color:#FFFFFFCC !important;
        padding:17px 0;
        font-size:18px;
    }

    /* =========================
    BUTTONS
    ========================= */
    .hero-buttons{
        display:flex;
        align-items:center;
        gap:18px;
        padding:24px 0px;
    }


.hero-buttons .animate-btn-trans-fill.banner-button{
 	color:#fff !important;
	text-decoration:none;
}
        .arow-btn{
            position: relative !important;
            z-index: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
        }

            .btn-arow{
            height: 15px;
            width: auto;
            }

        .animate-btn-banner{
            all: unset;
            padding: 14px;
            background: transparent !important;
            display: block;
            width: fit-content;
            cursor: pointer;
            text:underline;
            color: #fff !important;
            font-weight: 600 !important;
            line-height: normal;
            position: relative !important;
            overflow: hidden !important;
            z-index: 1;
        }

        .animate-btn-tran u{
            
        }

/* =========================
   STATS
========================= */

.hero-stats{
    display:flex;
    align-items:center;
    margin-top:20px;
    padding-top:34px;
}

.stat-box {
    position: relative;
    padding: 0 15px 0 22px;
}

.stat-box:first-child{
    padding-left:17px;
}

.stat-box:last-child{
    padding-right:17px;
}

/* =========================
   CENTER DIVIDERS
========================= */

.stat-box.midle-box::before,
.stat-box.midle-box::after{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:40px;
    background:#FFFFFF12;
}

.stat-box.last-box::before{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:40px;
    background:#FFFFFF12;
}

.stat-box.midle-box::before{
    left:0;
}

.stat-box.midle-box::after{
    right:0;
}

.stat-box.last-box::after{
    right:0;
}

.stat-box.last-box::before{
    left:0;
}

/* =========================
   TEXT
========================= */

.stat-box h4{
    font-weight:700;
    margin-top:6px;
}



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

/* =========================
   990px RESPONSIVE
========================= */

@media(max-width:990px){

    .hero-section{
        padding-bottom: 32px;
        padding-top: 120px;
    }

    .hero-section::before {
        background-image: url("/assets/images/corner/background-hero-mobile.webp");
    }

    /* Left Background */

    .left-gradient-hero{
        max-width: 60% !important;
        top:80px;
        height:30%;
    }

    /* Layout */
  

    .hero-wrapper{
        display: flex;
        flex-direction: column-reverse;
        gap: 40px;
        align-items: normal;
    }



    .hero-content h1{
        max-width:100%;
        padding-top:14px;
        font-size: 32px !important;
    }

    .hero-content h1 br{
        display: none;
    }

    .hero-content p{
        padding-bottom:20px;
        margin:0 auto;
        font-size:14px;
        width:100% !important;
    }
    .btn-arow{
            height: 15px;
            width: 15px;
    }

    .animate-btn-banner{
            all: unset;
            padding: 7px 10px !important;
            z-index: 1;
    }

    .hero-buttons{
                justify-content: space-evenly;
                padding:0px;
     }
     
    /* Stats */
    .all-sesction-title-stats{
        font-size:9px;
    }

    .hero-stats{
        justify-content: space-between;
        margin:20px auto 0;
        padding-top: 15px;
    }

   .hero-section .hero-stats{
        padding-bottom:36px;
    }
}

.future-section{
	display:none;
}