/*==================================================
    AL-HAYMANA
    Responsive Styles
==================================================*/


/*=========================================
    Large Desktop
=========================================*/

@media (max-width:1400px){

    .container{

        max-width:1200px;

    }

}


/*=========================================
    Laptop
=========================================*/

@media (max-width:1200px){

    h1{

        font-size:60px;

    }

    h2{

        font-size:46px;

    }

    .hero{

        min-height:90vh;

    }

    .hero-image img{

        max-width:540px;

    }

}


/*=========================================
    Tablet
=========================================*/

@media (max-width:992px){

    section{

        padding:90px 0;

    }

    .custom-navbar{

        padding:15px 0;

    }

    .custom-navbar .container{

        background:#fff;

        border-radius:20px;

        padding:15px 20px;

        box-shadow:0 20px 50px rgba(15,23,42,.08);

    }

    .navbar-collapse{

        padding-top:20px;

    }

    .navbar-nav{

        gap:8px;

    }

    .hero{

        text-align:center;

        padding-top:170px;

    }

    .hero-content{

        margin-bottom:70px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-features{

        justify-content:center;

    }

    .about-content{

        margin-top:50px;

        padding-left:0;

    }

    .about-list{

        grid-template-columns:1fr;

    }

    .experience-box{

        right:20px;

        bottom:20px;

    }

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .gallery-item,

    .gallery-item.large{

        grid-column:span 1;

    }

    .gallery-grid{

        grid-auto-rows:260px;

    }

    .contact-box{

        margin-top:40px;

    }

    .footer{

        text-align:center;

    }

    .footer-description{

        margin:auto;

    }

    .footer-social{

        justify-content:center;

    }

}


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

@media (max-width:768px){

    h1{

        font-size:46px;

    }

    h2{

        font-size:36px;

    }

    p{

        font-size:16px;

    }

    .hero{

        padding-top:150px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-main,

    .btn-outline-custom{

        width:100%;

    }

    .hero-features{

        flex-direction:column;

        align-items:center;

    }

    .service-content{

        padding:28px;

    }

    .contact-box{

        padding:35px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        justify-content:center;

        text-align:center;

    }

}


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

@media (max-width:576px){

    .container{

        padding-left:20px;

        padding-right:20px;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    .hero{

        padding-top:135px;

    }

    .hero-image img{

        border-radius:24px;

    }

    .experience-box{

        position:relative;

        right:auto;

        bottom:auto;

        margin-top:20px;

        width:100%;

    }

    .contact-box{

        padding:25px;

    }

    .contact-card{

        flex-direction:column;

        text-align:center;

    }

    .footer{

        padding:70px 0 20px;

    }

}


/*=========================================
    Extra Small
=========================================*/

@media (max-width:400px){

    h1{

        font-size:32px;

    }

    h2{

        font-size:28px;

    }

    .section-title{

        font-size:30px;

    }

}