/*=============================================================
    eSec Solutions
    Responsive Stylesheet
==============================================================*/
/*=============================================================
    Large Tablets / Small Laptops
==============================================================*/

@media(max-width:1199px){

    .carousel-caption{
        width:560px;
        bottom:15%;
    }

    .carousel-caption h1{
        font-size:56px;
    }

    .slider-image{
        height:650px;
    }

}


/*=============================================================
    Tablets
==============================================================*/

@media(max-width:991px){

    .section-padding{
        padding:70px 0;
    }

    .section-title{
        font-size:36px;
    }

    .navbar-collapse{
        background:#ffffff;
        padding:20px;
        margin-top:15px;
        border-radius:16px;
        box-shadow:var(--shadow);
    }

    .nav-link{
        margin-left:0;
        margin-bottom:12px;
    }

    .slider-image{
        height:620px;
    }

    .carousel-caption{
        width:80%;
        left:7%;
        bottom:14%;
    }

    .carousel-caption h1{
        font-size:48px;
    }

    .carousel-caption p{
        font-size:18px;
    }

    .about-preview img,
    .why-us img{
        margin-bottom:35px;
    }

    .counter-box{
        margin-bottom:25px;
    }

    .testimonial-card{
        margin-bottom:25px;
    }

}


/*=============================================================
    Mobile Landscape
==============================================================*/

@media(max-width:767px){

    .navbar-brand{
        font-size:26px;
    }

    .hero-slider{
        margin-top:76px;
    }

    .slider-image{
        height:560px;
    }

    .carousel-caption{
        width:88%;
        left:6%;
        bottom:12%;
    }

    .hero-badge{
        font-size:13px;
        padding:8px 18px;
    }

    .carousel-caption h1{
        font-size:38px;
    }

    .carousel-caption p{
        font-size:16px;
        line-height:1.6;
    }

    .hero-feature{
        gap:15px;
    }

    .hero-feature div{
        font-size:15px;
    }

    .section-title{
        font-size:31px;
    }

    .section-description{
        font-size:16px;
    }

    .cta-section h2{
        font-size:34px;
    }

}


/*=============================================================
    Small Mobile
==============================================================*/

@media(max-width:575px){

    .slider-image{
        height:520px;
    }

    .carousel-caption h1{
        font-size:32px;
    }

    .carousel-caption p{
        font-size:15px;
    }

    .hero-feature{
        display:none;
    }

    .btn-primary,
    .btn-outline-primary{
        padding:12px 26px;
        font-size:15px;
    }

    .section-padding{
        padding:60px 0;
    }

    .section-title{
        font-size:28px;
    }

    .service-card,
    .industry-card,
    .testimonial-card{
        padding:30px 22px;
    }

    .counter{
        font-size:44px;
    }

    .footer{
        text-align:center;
    }

    .social-icons{
        justify-content:center;
    }

}
/*=============================================================
    MOBILE MEGA MENU
==============================================================*/

@media(max-width:991px){

    .mega-dropdown{
        position:relative;
    }

    .mega-menu{
        position:static;
        display:none;
        width:100%;
        max-height:none;
        opacity:1;
        visibility:visible;
        transform:none;
        padding:20px 15px;
        box-shadow:none;
        border-radius:18px;
    }

    .mega-dropdown.mobile-open .mega-menu{
        display:block;
    }

    .mega-title{
        font-size:20px;
        margin-bottom:20px;
    }

    .mega-title i{
        font-size:24px;
    }

    .mega-item{
        gap:14px;
        padding:12px;
        margin-bottom:10px;
    }

    .mega-item > i{
        width:48px;
        height:48px;
        min-width:48px;
        font-size:20px;
        border-radius:14px;
    }

    .mega-item h6{
        font-size:16px;
    }

    .mega-item span{
        font-size:13px;
    }

}