/* Hero styles */
/* =========================
   HERO SECTION
========================= */

.hero{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
}

/* =========================
   SLIDER IMAGES
========================= */

.hero-img{
    width:100%;
    height:100vh;
    object-fit:cover;
}

.carousel-item{
    position:relative;
}

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

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:2;
}

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

.hero-content{
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    z-index:10;
    color:#fff;
    max-width:700px;
}

.hero-content h1{
    font-size:4.8rem;
    font-weight:700;
    line-height:1.1;
    margin-bottom:20px;
    animation:slideUp .8s ease;
}

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

.hero-content p{
    font-size:1.15rem;
    max-width:600px;
    margin-bottom:30px;
    animation:slideUp 1s ease;
}

/* =========================
   HERO BUTTONS
========================= */

.hero-content .btn{
    min-width:180px;
}

.hero-content .btn-success{
    background:#22c55e;
    border:none;
}

.hero-content .btn-success:hover{
    background:#16a34a;
}

.hero-content .btn-outline-light:hover{
    background:#fff;
    color:#111;
}

/* =========================
   SLIDER CONTROLS
========================= */

.carousel-control-prev,
.carousel-control-next{
    z-index:20;
    width:8%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    width:3rem;
    height:3rem;
}

/* =========================
   HERO ANIMATION
========================= */

@keyframes slideUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* =========================
   LARGE SCREEN
========================= */

@media(min-width:1400px){

    .hero-content{
        left:12%;
    }

    .hero-content h1{
        font-size:5.2rem;
    }
}

/* =========================
   LAPTOP
========================= */

@media(max-width:1200px){

    .hero-content h1{
        font-size:4rem;
    }
}

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

@media(max-width:992px){

    .hero-content{
        max-width:600px;
    }

    .hero-content h1{
        font-size:3.5rem;
    }

    .hero-content p{
        font-size:1rem;
    }
}

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

@media(max-width:768px){

    .hero{
        min-height:650px;
    }

    .hero-img{
        height:650px;
    }

    .hero-content{
        left:20px;
        right:20px;
        text-align:center;
        max-width:100%;
    }

    .hero-content h1{
        font-size:2.4rem;
    }

    .hero-content p{
        font-size:15px;
    }

    .hero-content .btn{
        width:auto;
    }
}

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

@media(max-width:480px){

    .hero-content h1{
        font-size:2rem;
    }

    .hero-content p{
        font-size:14px;
    }

    .hero-content .btn{
        width:100%;
        margin-bottom:10px;
    }
}