/* ==================================================
   MADA AL WATNIYAH
   RESPONSIVE STYLES
================================================== */

/* Large tablets and small laptops */

@media (max-width:1100px){

    .top-contact{
        gap:16px;
        flex-wrap:wrap;
    }

    .navigation-list{
        gap:22px;
    }

    .header-button{
        padding:0 20px;
    }

    .hero-section{
        min-height:700px;
    }

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

    .hero-highlights{
        grid-template-columns:1fr 1fr;
    }

    .about-layout,
    .why-layout{
        gap:45px;
    }

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

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

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

}

/* Tablets */

@media (max-width:900px){

    .top-bar-content{
        padding:10px 0;
        align-items:flex-start;
    }

    .top-contact{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .main-navigation{
        position:absolute;
        top:92px;
        left:0;
        width:100%;
        padding:22px;
        background:#071b34;
        border-top:1px solid rgba(255,255,255,.08);
        box-shadow:0 18px 35px rgba(0,0,0,.18);

        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:.3s ease;
    }

    .main-navigation.open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .navigation-list{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .navigation-list li{
        width:100%;
    }

    .navigation-list a{
        display:block;
        width:100%;
        padding:12px 0;
    }

    .header-button{
        display:none;
    }

    .mobile-menu-button{
        display:block;
        margin-left:auto;
    }

    .hero-section{
        min-height:680px;
        background-position:65% center;
    }

    .hero-section::before{
        content:"";
        position:absolute;
        inset:0;
        background:rgba(4,19,38,.18);
    }

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

    .about-layout,
    .why-layout{
        grid-template-columns:1fr;
    }

    .about-visual{
        max-width:650px;
        margin:auto;
    }

    .why-content{
        text-align:center;
    }

    .why-list{
        max-width:620px;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
    }

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

    .statistic-item:nth-child(2){
        border-right:0;
    }

    .statistic-item:nth-child(-n+2){
        border-bottom:1px solid rgba(7,27,52,.12);
    }

    .contact-cta-content{
        flex-direction:column;
        align-items:flex-start;
    }

}

/* Mobile devices */

@media (max-width:680px){

    .container{
        width:min(92%,100%);
    }

    .top-bar{
        display:none;
    }

    .navbar{
        min-height:76px;
    }

    .brand-logo img{
        width:92px;
    }

    .main-navigation{
        top:76px;
    }

    .hero-section{
        min-height:650px;
        background-position:70% center;
    }

    .hero-content{
        padding:60px 0;
    }

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

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

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .primary-button,
    .outline-button{
        width:100%;
    }

    .hero-highlights{
        grid-template-columns:1fr;
    }

    .hero-gold-shape{
        right:-320px;
        bottom:-210px;
    }

    .about-section,
    .services-section,
    .why-section,
    .projects-section{
        padding:78px 0;
    }

    .about-image-frame{
        min-height:380px;
    }

    .experience-badge{
        right:10px;
        bottom:18px;
        padding:15px 18px;
    }

    .experience-badge strong{
        font-size:30px;
    }

    .about-features{
        grid-template-columns:1fr;
    }

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

    .why-cards{
        grid-template-columns:1fr;
    }

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

    .statistic-item{
        border-right:0;
        border-bottom:1px solid rgba(7,27,52,.12);
    }

    .statistic-item:last-child{
        border-bottom:0;
    }

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

    .contact-cta h2{
        font-size:30px;
    }

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

    .footer-bottom-content{
        flex-direction:column;
        justify-content:center;
        text-align:center;
        padding:18px 0;
    }

    .footer-bottom-content div{
        flex-wrap:wrap;
        justify-content:center;
    }

    .whatsapp-button{
        right:18px;
        bottom:78px;
    }

    .back-to-top{
        right:23px;
        bottom:20px;
    }

}

/* Small phones */

@media (max-width:430px){

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

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

    .service-card{
        padding:28px 22px;
    }

    .project-information{
        padding:22px;
    }

    .contact-cta{
        padding:55px 0;
    }

}