/*=====================================================
 HERO HOME
======================================================*/

.hero-home{
    position:relative;
    height:100vh;
    min-height:760px;
    overflow:hidden;
    background:#fff;
}

.hero-home .container-fluid,
.hero-home .row{
    height:100%;
}

.hero-side{
    position:relative;
    overflow:hidden;
}

.hero-side::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:1px;
    height:100%;
    background:rgba(255,255,255,.25);
    z-index:3;
}

.hero-right::after{
    display:none;
}

.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.hero-side:hover .hero-bg{
    transform:scale(1.05);
}

.hero-mask{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.15) 30%,
        rgba(0,0,0,.70) 100%
    );
    transition:.4s;
}

.hero-side:hover .hero-mask{
    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.02) 0%,
        rgba(0,0,0,.12) 30%,
        rgba(0,0,0,.60) 100%
    );
}

.hero-title{

    position:absolute;

    top:160px;

    left:50%;

    transform:translateX(-50%);

    width:900px;

    max-width:90%;

    text-align:center;

    z-index:50;

}

.hero-title small{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

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

    color:#2B2E71;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

}

.hero-title h1{

    margin-top:28px;

    color:#000000;

    font-size:43px;

    font-weight:800;

    line-height:1.05;

    text-shadow:0 10px 30px rgba(0,0,0,.25);

}

.hero-title p{

    margin-top:18px;

    color:#000000;

    font-size:22px;

    line-height:1.6;

    text-shadow:0 5px 18px rgba(0,0,0,.30);

}

.hero-box{

    position:absolute;

    left:70px;

    right:70px;

    bottom:70px;

    z-index:30;

    max-width:430px;

}

.hero-number{

    width:64px;

    height:64px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

    margin-bottom:28px;

}

.hero-category{

    display:block;

    color:#47B2E4;

    font-size:20px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:20px;
    background-color: #000000;
    
     max-width: 330px;
   
}


.hero-box h2{

    color:#fff;

    font-size:50px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:24px;

}

.hero-box p{

    color:#fff;

    opacity:.92;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}

.hero-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border-radius:40px;

    background:#47B2E4;

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.hero-button:hover{

    background:#2B2E71;

    color:#fff;

    transform:translateY(-3px);

}

@media(max-width:991px){

.hero-home{

height:auto;

min-height:auto;

}

.hero-side{

height:430px;

}

.hero-title{

position:relative;

top:auto;

left:auto;

transform:none;

width:100%;

padding:30px 30px 50px;

background:#2B2E71;

max-width:100%;

}

.hero-title h1{

font-size:31px;

}

.hero-title p{

font-size:18px;

}

.hero-box{

left:30px;

right:30px;

bottom:30px;

}

.hero-box h2{

font-size:34px;

}

.hero-box p{

font-size:16px;

}

.hero-side::after{

display:none;

}

}