/* =========================================================
   DHE Studio - Responsive Stylesheet
========================================================= */

/* =========================================================
   LARGE DEVICES
========================================================= */

@media (max-width: 1400px){

    .container{
        max-width:1200px;
    }

    .hero-content h1{
        font-size:64px;
    }

}

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

@media (max-width: 1200px){

    .container{
        width:92%;
    }

    .hero-grid{
        gap:40px;
    }

    .hero-content h1{
        font-size:56px;
    }

    .section-title h2{
        font-size:44px;
    }

    .mega-dropdown{
        width:680px;
    }

}

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

@media (max-width: 991px){

    /* HEADER */

    .main-navbar,
    .header-contact,
    .navbar-btn{
        display:none;
    }

    .mobile-menu-btn{
        display:flex;
    }

    .main-header{
        padding:16px 0;
    }

    .main-logo{
        width:160px;
    }

    /* HERO */

    .hero-section{
        padding:140px 0 80px;
        min-height:auto;
    }

    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        order:2;
    }

    .hero-image{
        order:1;
    }

    .hero-content h1{
        font-size:48px;
    }

    .hero-content p{
        margin:auto auto 30px;
    }

    .hero-buttons{
        justify-content:center;
    }

    /* SECTION */

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

    .section-title{
        margin-bottom:55px;
    }

    .section-title h2{
        font-size:38px;
    }

    /* GRID */

    .card-grid,
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* CONTACT */

    .contact-wrapper{
        grid-template-columns:1fr;
    }

    /* FOOTER */

    .footer-bottom-wrapper{
        flex-direction:column;
        text-align:center;
    }

}

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

@media (max-width: 768px){

    /* GLOBAL */

    .container{
        width:94%;
    }

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

    /* HERO */

    .hero-content h1{
        font-size:42px;
        line-height:1.2;
    }

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

    /* TITLES */

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

    .section-title p{
        font-size:15px;
    }

    /* BUTTONS */

    .btn{
        padding:15px 28px;
        font-size:14px;
    }

    /* CARDS */

    .card-grid{
        grid-template-columns:1fr;
    }

    .card-content{
        padding:25px;
    }

    .card-content h3{
        font-size:24px;
    }

    /* FORMS */

    .contact-form{
        padding:35px 25px;
    }

    .form-control{
        padding:15px;
    }

    /* FOOTER */

    .footer-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer-widget{
        text-align:center;
    }

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

    .footer-policy-links{
        flex-wrap:wrap;
        justify-content:center;
    }

    /* FLOATING */

    .floating-whatsapp{
        width:58px;
        height:58px;
        font-size:24px;
    }

    .scroll-top-btn{
        width:48px;
        height:48px;
    }

}

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

@media (max-width: 576px){

    /* HEADER */

    .main-logo{
        width:140px;
    }

    .mobile-menu{
        width:100%;
        padding:25px;
    }

    /* HERO */

    .hero-section{
        padding-top:130px;
    }

    .hero-content h1{
        font-size:34px;
    }

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

    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons .btn{
        width:100%;
    }

    /* TITLES */

    .section-title span{
        font-size:13px;
    }

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

    .section-title p{
        font-size:14px;
    }

    /* BUTTON */

    .btn{
        width:100%;
        justify-content:center;
    }

    /* CARDS */

    .card{
        border-radius:20px;
    }

    .card-image img{
        height:220px;
    }

    .card-content h3{
        font-size:22px;
    }

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

    /* CONTACT */

    .contact-form{
        padding:25px 20px;
        border-radius:22px;
    }

    textarea.form-control{
        height:130px;
    }

    /* FOOTER */

    .footer-top{
        padding:70px 0 40px;
    }

    .footer-widget h3{
        font-size:20px;
    }

    .footer-text{
        font-size:14px;
    }

    .footer-links li a{
        font-size:14px;
    }

    .footer-bottom{
        padding:18px 0;
    }

    .copyright{
        font-size:14px;
    }

    /* FLOATING */

    .floating-whatsapp{
        right:18px;
        bottom:18px;
    }

    .scroll-top-btn{
        right:18px;
        bottom:88px;
    }

}

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

@media (max-width: 420px){

    .hero-content h1{
        font-size:30px;
    }

    .section-title h2{
        font-size:24px;
    }

    .btn{
        padding:14px 22px;
    }

    .card-content{
        padding:22px;
    }

    .contact-form{
        padding:22px 18px;
    }

}

/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 360px){

    .hero-content h1{
        font-size:26px;
    }

    .section-title h2{
        font-size:22px;
    }

    .main-logo{
        width:125px;
    }

    .mobile-menu{
        padding:20px;
    }

}