/*
 * AL-SEEF Import & Export
 * responsive.css
 * Mobile / Tablet responsive layer only.
 *
 * Load this file AFTER style.css so these rules are the final
 * responsive layer. It intentionally does not contain desktop styling.
 */

/* =========================================================
   Tablet / Medium screens
   ========================================================= */
@media (max-width:1100px){
    .nav-links{gap:17px!important}
    .services-grid{grid-template-columns:repeat(3,1fr)!important}
    .hero h1{font-size:54px!important}
    .about-grid{gap:42px!important}
    .footer-grid{grid-template-columns:1.5fr 1fr 1fr!important}
    .page-grid{grid-template-columns:1fr!important}
    .page-media{position:relative!important;top:auto!important}
    .contact-grid{grid-template-columns:1fr!important}
}

/* =========================================================
   Mobile base
   ========================================================= */
@media (max-width:760px){

    html,
    body{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }

    .container{
        width:min(1180px,92%)!important;
        max-width:92%!important;
    }

    /* Top bar */
    .topbar{
        height:30px!important;
        min-height:30px!important;
    }

    .topbar-inner{
        height:30px!important;
        min-height:30px!important;
        padding:0!important;
        gap:6px!important;
    }

    .top-contact,
    .top-actions{
        gap:7px!important;
        font-size:10px!important;
        line-height:1!important;
    }

    .top-contact a{font-size:10px!important}

    .top-contact span,
    .top-actions>a:not(.top-language){
        display:none!important;
    }

    .top-actions .top-language{
        display:inline-flex!important;
        border:0!important;
        padding:0!important;
    }

    /* Header */
    .header{
        top:30px!important;
        height:58px!important;
        background:rgba(3,20,33,.96)!important;
    }

    .nav{
        position:relative!important;
        height:58px!important;
        min-height:58px!important;
        padding:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:0!important;
    }

    .brand{
        position:absolute!important;
        top:50%!important;
        transform:translateY(-50%)!important;
        z-index:5!important;
        gap:6px!important;
        margin:0!important;
    }

    html[dir="rtl"] .brand{
        right:0!important;
        left:auto!important;
    }

    html[dir="ltr"] .brand{
        left:0!important;
        right:auto!important;
    }

    .brand img{
        width:112px!important;
        max-height:43px!important;
    }

    .brand-emblem{
        width:36px!important;
        height:36px!important;
    }

    .brand-emblem svg{
        width:36px!important;
        height:36px!important;
    }

    .brand b{font-size:20px!important}

    .brand small{
        font-size:8px!important;
        margin-top:3px!important;
    }

    .menu-toggle{
        position:absolute!important;
        top:50%!important;
        left:90%!important;
		right:80% !important;
        transform:translate(-50%,-50%)!important;
        display:grid!important;
        place-items:center!important;
        width:42px!important;
        height:42px!important;
        padding:0!important;
        margin:0!important;
        font-size:22px!important;
        z-index:10!important;
    }

    .nav-actions{
        position:absolute!important;
        top:50%!important;
        transform:translateY(-50%)!important;
        margin:0!important;
        gap:0!important;
        z-index:5!important;
    }

    html[dir="rtl"] .nav-actions{
        left:0!important;
        right:auto!important;
    }

    html[dir="ltr"] .nav-actions{
        right:0!important;
        left:auto!important;
    }

    .nav-actions .lang-switch,
    .nav-actions .nav-cta{
        display:none!important;
    }

    .nav-actions .top-language{
        display:none!important;
    }

    .nav-links{
        position:absolute!important;
        top:58px!important;
        left:4%!important;
        right:4%!important;
        padding:12px!important;
        gap:2px!important;
        border-radius:12px!important;
        display:none!important;
        flex-direction:column!important;
        background:#061a2d!important;
        box-shadow:0 20px 45px rgba(0,0,0,.3)!important;
    }

    .nav-links.open{
        display:flex!important;
    }

    .nav-links a{
        padding:9px 10px!important;
        font-size:14px!important;
    }

    /* Hero */
    .hero{
        margin:0!important;
        width:100%!important;
        min-height:540px!important;
        height:auto!important;
    }

    .hero-content{
        min-height:540px!important;
        height:auto!important;
        align-items:flex-start!important;
        padding-top:105px!important;
        padding-bottom:155px!important;
    }

    .hero-copy,
    .hero-en .hero-copy{
        width:100%!important;
        max-width:100%!important;
        padding:0!important;
        margin:0!important;
        text-align:center!important;
    }

    html[dir="rtl"] .hero-copy,
    html[dir="rtl"] .hero-buttons{
        direction:rtl!important;
    }

    html[dir="ltr"] .hero-copy,
    html[dir="ltr"] .hero-buttons{
        direction:ltr!important;
    }

.hero:before {
    width: 360px!important;
    height: auto;
    right: 0px!important;
    top: 0;
}

.hero:after {
    width: 360px!important;
    height: 310px!important;
    right: 50px!important;
    top: 0px!important;
}

    .hero h1{
        font-size:40px!important;
        line-height:1.14!important;
        max-width:100%!important;
        margin:0 0 14px!important;
    }

    .hero p{
        font-size:14px!important;
        line-height:1.75!important;
        max-width:94%!important;
        margin:0 auto!important;
    }

    /* Hero buttons: always one compact row */
    .hero-buttons,
    .hero-en .hero-buttons{
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        justify-content:center!important;
        align-items:center!important;
        width:max-content!important;
        max-width:100%!important;
        gap:8px!important;
        margin:18px auto 10px !important;
    }

    .hero-buttons a,
    .hero-btn{
        display:inline-flex!important;
        flex:0 0 auto!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        height:38px!important;
        min-height:38px!important;
        padding:0 12px!important;
        margin:0!important;
        font-size:12px!important;
        line-height:1!important;
        white-space:nowrap!important;
        border-radius:6px!important;
    }

    /* Hero statistics */
    .stats-glass{
        width:calc(100% - 24px)!important;
        max-width:none!important;
        left:50%!important;
        bottom:12px!important;
        transform:translateX(-50%)!important;
        grid-template-columns:repeat(2,1fr)!important;
        gap:10px!important;
        padding:12px!important;
    }

    .stat{
        border:0!important;
    }

    .stat:nth-child(odd){
        border-left:1px solid rgba(255,255,255,.25)!important;
    }

    [dir="rtl"] .stat:nth-child(odd){
        border-left:0!important;
        border-right:1px solid rgba(255,255,255,.25)!important;
    }

    .stat strong{font-size:27px!important}
    .stat span{font-size:10px!important}

    /* Sections */
    .section{padding:65px 0!important}

    .section-head{margin-bottom:30px!important}

    .section-head h2{
        font-size:29px!important;
    }

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

    .service-card{
        min-height:205px!important;
    }

    .service-card p{
        min-height:auto!important;
    }

    /* About */
    .about{
        padding:65px 0!important;
    }

    .about-grid{
        grid-template-columns:1fr!important;
        gap:45px!important;
    }

    .about-copy{
        grid-column:1!important;
        grid-row:1!important;
    }

    .about-visual{
        grid-column:1!important;
        grid-row:2!important;
    }

    .about-copy h2{
        font-size:34px!important;
    }

    .about-visual img{
        height:300px!important;
    }

    .about-points{
        grid-template-columns:1fr!important;
    }

    /* Markets */
    .markets{
        padding:45px 0!important;
    }

    .market-grid{
        gap:10px!important;
    }

    .market{
        padding:9px 12px!important;
        font-size:12px!important;
    }

    /* Process / How we work */
    .process{
        padding:65px 0!important;
    }

    .process-grid{
        grid-template-columns:1fr 1fr!important;
        gap:22px!important;
    }

    .step{
        padding:10px 10px 10px 55px!important;
    }

    [dir="rtl"] .step{
        padding:10px 55px 10px 10px!important;
    }

    /* CTA */
    .cta{padding:45px 0!important}

    .cta-inner{
        grid-template-columns:1fr!important;
    }

    .cta-inner>div{
        padding:38px!important;
    }

    .cta img{
        height:230px!important;
    }

    /* Internal page hero */
    .page-hero{
        min-height:330px!important;
        padding:155px 0 60px!important;
    }

    .page-hero h1{
        font-size:43px!important;
    }

    .page-hero p{
        font-size:15px!important;
    }

    /* Internal pages */
    .page-content,
    .service-page-section,
    .contact-section{
        padding:60px 0!important;
    }

    .page-grid{
        grid-template-columns:1fr!important;
        gap:35px!important;
    }

    .page-media{
        position:relative!important;
        top:auto!important;
    }

    .page-media img{
        height:300px!important;
    }

    /* Keep Arabic legal/content direction */
    html[lang="ar"] .rich-content,
    html[lang="ar"] .page-media,
    html[lang="ar"] .contact-info,
    html[lang="ar"] .contact-form{
        direction:rtl!important;
        text-align:right!important;
    }

    /* Keep English pages LTR */
    html[lang="en"] body,
    html[lang="en"] .hero-copy,
    html[lang="en"] .service-card,
    html[lang="en"] .about-copy,
    html[lang="en"] .market,
    html[lang="en"] .cta-inner>div,
    html[lang="en"] .rich-content,
    html[lang="en"] .page-media,
    html[lang="en"] .contact-info,
    html[lang="en"] .contact-form{
        direction:ltr!important;
    }

    html[lang="en"] .rich-content,
    html[lang="en"] .contact-info,
    html[lang="en"] .contact-form{
        text-align:left!important;
    }

    /* Contact */
    .contact-grid{
        grid-template-columns:1fr!important;
        gap:30px!important;
    }

    .contact-form .form-grid{
        grid-template-columns:1fr!important;
    }

    .contact-form .full{
        grid-column:auto!important;
    }

    /* Footer */
    .footer{
        padding-top:45px!important;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr!important;
        gap:30px!important;
    }

    .footer-grid>div:first-child,
    .footer-grid>div:last-child{
        grid-column:span 2!important;
    }

    .footer-legal{
        padding-bottom:18px!important;
    }

    .legal-links{
        flex-wrap:wrap!important;
        gap:8px!important;
    }

    /* Floating controls */
    .whatsapp-float{
        left:14px!important;
        bottom:18px!important;
        width:50px!important;
        height:50px!important;
    }

    .scroll-top{
        right:14px!important;
        bottom:18px!important;
        width:50px!important;
        height:50px!important;
    }
}

/* =========================================================
   Narrow phones
   ========================================================= */
@media (max-width:470px){

    .brand img{
        width:104px!important;
        max-height:40px!important;
    }

    .brand-emblem{
        width:34px!important;
        height:34px!important;
    }

    .brand-emblem svg{
        width:34px!important;
        height:34px!important;
    }

    .brand b{
        font-size:18px!important;
    }

    .brand small{
        font-size:7px!important;
    }

    .hero{
        min-height:500px!important;
    }

    .hero-content{
        min-height:500px!important;
        padding-top:95px!important;
        padding-bottom:145px!important;
    }

    .hero h1{
        font-size:36px!important;
        line-height:1.12!important;
    }

    .hero p{
        font-size:13px!important;
        max-width:96%!important;
    }

    .hero-buttons,
    .hero-en .hero-buttons{
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        gap:6px!important;
        width:max-content!important;
        max-width:96%!important;
    }

    .hero-buttons a,
    .hero-btn{
        height:36px!important;
        min-height:36px!important;
        padding:0 10px!important;
        font-size:11px!important;
    }

    .stats-glass{
        width:calc(100% - 24px)!important;
        bottom:10px!important;
        padding:10px!important;
        gap:6px!important;
    }

    .stat strong{
        font-size:24px!important;
    }

    .stat span{
        font-size:9px!important;
    }

    .services-grid,
    .services-grid.large{

    }

    .process-grid{
        grid-template-columns:1fr!important;
    }

    .footer-grid{
        grid-template-columns:1fr!important;
    }

    .footer-grid>div{
        grid-column:auto!important;
    }

    .top-contact a:last-child{
        display:none!important;
    }

    .top-actions .top-language{
        border:0!important;
        padding:0!important;
  
  }
  .cta h2 {
    font-size: 24px;
    line-height: 1.45;
    margin: 0 0 10px;
}
}