/*---- General ----*/
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f4f7f9;
color:#2c3e50;
line-height:1.7;
}

/* =============================================
   CONTAINER  — fluid on every screen size
   ============================================= */
.container{
width:100%;
max-width:1500px;
margin:auto;
padding:0 20px;          /* ← side padding prevents edge-to-edge content */
}

/* =============================================
   ABOUT
   ============================================= */
.about{
    padding:50px 0;
    background:#ffffff;
}

.about-wrapper{
    max-width:1600px;
    width:100%;
}

.about p {
    font-size:15px;
    margin-bottom:12px;
    width:100%;
    max-width:100%;
}

/* =============================================
   SOCIAL CONTACT
   ============================================= */
.social-contact {
    display:flex;
    flex-wrap:wrap;          /* ← wrap on narrow screens */
    gap:16px;
    margin-top:20px;
}

.social-icon {
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    color:white;
    transition:0.3s ease;
    text-decoration:none;
    flex-shrink:0;
}

.whatsapp { background:#25D366; }
.email    { background:#EA4335; }
.linkedin { background:#0077B5; }

.social-icon:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

/* =============================================
   SECTION TITLE
   ============================================= */
.section-title{
    margin-bottom:35px;
}

.section-title h2{
    font-size:clamp(16px, 2vw, 20px);   /* scales with screen */
    color:Teal;
    position:relative;
    display:inline-block;
    padding-bottom:14px;
}

.section-title h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:4px;
    width:100%;
    height:4px;
    background:SlateGray;
}

.section-title h2::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1.5px;
    background:SlateGray;
}

/* =============================================
   HEADER / NAV
   ============================================= */
header{
    background:#ffffff;
    border-bottom:1px solid #e6edf2;
    padding:14px 0;
    position:sticky;
    top:0;
    z-index:1000;
}

.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
}

.nav-left{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo{ height:44px; }

.company-name {
    font-weight:700;
    font-size:clamp(15px, 2vw, 20px);
    color:#b0c4de;
    text-shadow:0 1px 0 #ffffff, 0 2px 3px rgba(0,0,0,0.2);
    animation:glowHold 3s ease-in-out forwards;
}

@keyframes glowHold {
    0%   { text-shadow:0 1px 0 #ffffff, 0 2px 3px rgba(0,0,0,0.2); color:#b0c4de; }
    20%  { text-shadow:0 0 8px #126cb5,0 0 18px #126cb5,0 0 30px #126cb5; color:#ffffff; }
    80%  { text-shadow:0 0 8px #126cb5,0 0 18px #126cb5,0 0 30px #126cb5; color:#ffffff; }
    100% { text-shadow:0 1px 0 #ffffff, 0 2px 3px rgba(0,0,0,0.2); color:#b0c4de; }
}

/* ---- Desktop menu ---- */
.nav > ul{
    display:flex;
    align-items:center;
    gap:clamp(14px, 2.2vw, 34px);   /* gap shrinks on laptops */
    list-style:none;
}

.nav > ul > li{ position:relative; }

.nav > ul > li > a{
    text-decoration:none;
    color:#2c3e50;
    font-weight:500;
    font-size:clamp(13px, 1.1vw, 15px);
    letter-spacing:.3px;
    transition:color .25s;
    white-space:nowrap;
}

.nav > ul > li > a:hover{ color:#0b5d7c; }

/* ---- Hamburger button (hidden on desktop) ---- */
.hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
    z-index:1100;
}

.hamburger span{
    display:block;
    width:24px;
    height:2px;
    background:#2c3e50;
    border-radius:2px;
    transition:.3s;
}

/* animated X when menu open */
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- Mobile overlay menu ---- */
.mobile-menu{
    display:none;
    position:fixed;
    inset:0;
    background:#fff;
    z-index:1050;
    padding:80px 24px 30px;
    overflow-y:auto;
    flex-direction:column;
    gap:10px;
}

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

.mobile-menu a{
    display:block;
    padding:12px 0;
    font-size:16px;
    font-weight:500;
    color:#2c3e50;
    text-decoration:none;
    border-bottom:1px solid #edf2f6;
}

.mobile-menu a:hover{ color:#0b5d7c; }

/* =============================================
   DROPDOWN
   ============================================= */
/* =========================
   SUB MENU FIX
   ========================= */

.sub-dropdown {
    position: relative;
}

/* hidden by default */
.sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 260px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: 0.25s ease;
    z-index: 999;
    padding: 10px 0;
}

/* show on hover */
.sub-dropdown:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* menu items */
.sub-menu li {
    list-style: none;
}

.sub-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: #2c3e50;
    text-decoration: none;
    border-bottom: 1px solid #edf2f6;
}

.sub-menu a:hover {
    background: #f1f6f9;
    color: #0b5d7c;
}
.mega-menu{
    position:absolute;
    top:100%;
    left:0;
    width:240px;
    background:#fff;
    padding:18px;
    border-radius:8px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:.25s;
}

.mega-menu ul{ list-style:none; }

.mega-menu li{
    opacity:0;
    transform:translateY(-6px);
}

.mega-menu a{
    display:block;
    padding:10px 0;
    text-decoration:none;
    color:#2c3e50;
    transition:all .25s ease;
}

.mega-menu a:hover{
    color:#0b5d7c;
    background:#f1f6f9;
    padding-left:8px;
    border-radius:4px;
}

.mega-dropdown:hover .mega-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.mega-dropdown:hover .mega-menu li{
    animation:fadeDown .35s forwards;
}

@keyframes fadeDown{ to{ opacity:1; transform:translateY(0); } }

.mega-menu li:not(:last-child){ border-bottom:1px solid #edf2f6; }

/* =============================================
   BANNER (inner pages)
   ============================================= */
.banner{
    position:relative;
    height:clamp(200px, 35vw, 400px);   /* fluid height */
    overflow:hidden;
}

.banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:zoomIn 10s infinite alternate ease-in-out;
}

@keyframes zoomIn{
    0%  { transform:scale(1); }
    100%{ transform:scale(1.15); }
}

.banner-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
    background:rgba(0,0,0,0.4);
    padding:clamp(14px, 3vw, 30px);
    border-radius:8px;
    width:90%;
    max-width:600px;
}

.banner-content h1{
    font-size:clamp(22px, 4vw, 40px);
    margin-bottom:10px;
}

.banner-content p{
    font-size:clamp(14px, 2vw, 18px);
}

/* =============================================
   BUTTON
   ============================================= */
.btn{
    display:inline-block;
    padding:12px 28px;
    background:#0b5d7c;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    transition:.25s;
    font-size:clamp(13px, 1.2vw, 15px);
}

.btn:hover{ background:#083848; }

/* =============================================
   SERVICES / CARDS
   ============================================= */
.services {
    background:#0f0f2d;
    padding:clamp(40px, 6vw, 60px) 20px;
}

.services .section-title h3 { color:#ffffff; }

/* scrollable row removed — pure grid now */
.service-box {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap:25px;
    padding:20px;
}

.service-box .card {
    background:#ffffff;
    border-radius:16px;
    padding:20px 22px 26px;
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:all .4s ease;
    cursor:pointer;
}

.service-box .card::before {
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%; height:4px;
    background:linear-gradient(90deg,#0b5d7c,#16a085);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .4s ease;
}

.service-box .card::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top left, rgba(22,160,133,0.15), transparent 60%);
    opacity:0;
    transition:opacity .4s ease;
    pointer-events:none;
}

.service-box .card:hover {
    transform:translateY(-12px) scale(1.02);
    box-shadow:0 30px 70px rgba(0,0,0,.15);
}

.service-box .card:hover::before { transform:scaleX(1); }
.service-box .card:hover::after  { opacity:1; }

.service-box .card h3 {
    margin:0 0 14px;
    color:#0b5d7c;
    font-size:clamp(16px, 1.5vw, 20px);
    font-weight:600;
    border-bottom:2px solid #e6ecf0;
    padding-bottom:8px;
    transition:color .3s ease;
}

.service-box .card:hover h3 { color:#16a085; }

.service-box .card ul { list-style:none; padding:0; margin:10px 0 0; }

.service-box .card ul li {
    position:relative;
    padding-left:22px;
    margin-bottom:10px;
    font-size:14px;
    color:#5b6b76;
    line-height:1.5;
    transition:all .3s ease;
}

.service-box .card ul li::before {
    content:"✔";
    position:absolute;
    left:0; top:2px;
    font-size:12px;
    color:#16a085;
}

.service-box .card:hover ul li { transform:translateX(5px); color:#2c3e50; }

.service-box .card .icon { font-size:36px; color:#16a085; margin-bottom:10px; }

.service-box .card:hover ul li:nth-child(1) { transition-delay:0.1s; }
.service-box .card:hover ul li:nth-child(2) { transition-delay:0.2s; }
.service-box .card:hover ul li:nth-child(3) { transition-delay:0.3s; }
.service-box .card:hover ul li:nth-child(4) { transition-delay:0.4s; }
.service-box .card:hover ul li:nth-child(5) { transition-delay:0.5s; }
.service-box .card:hover ul li:nth-child(6) { transition-delay:0.6s; }

.card:hover{ transform:translateY(-8px); }

/* =============================================
   ADVANTAGES / KEY POINTS
   ============================================= */
.advantages{
    padding:clamp(50px, 8vw, 100px) 0;
    background:#ffffff;
}

.adv-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr));
    gap:20px;
}

.advantages ul{ list-style:none; }

.advantages ul li{
    margin-bottom:18px;
    padding-left:28px;
    position:relative;
    font-size:clamp(14px, 1.2vw, 16px);
}

.advantages ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#0b5d7c;
    font-weight:bold;
}

/* =============================================
   TOP LOADER
   ============================================= */
#top-loader{
    position:fixed;
    top:0; left:0;
    width:100%; height:2px;
    background:#e5edf2;
    z-index:9999;
    overflow:hidden;
}

.top-loader-bar{
    width:0%;
    height:100%;
    background:#0b5d7c;
    animation:topLoading 1.8s ease forwards;
}

@keyframes topLoading{
    0%  { width:0%; }
    50% { width:60%; }
    80% { width:85%; }
    100%{ width:100%; }
}

.top-loader-hide{ opacity:0; transition:opacity 0.4s ease; }

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-section{
    padding:clamp(40px, 6vw, 80px) clamp(16px, 8%, 80px);
    background:#f4f7f9;
}

.contact-main-wrapper{
    display:flex;
    flex-wrap:wrap;          /* ← wraps on smaller screens */
    gap:40px;
    align-items:flex-start;
}

.contact-left { flex:1 1 340px; }
.contact-right{ flex:1 1 300px; min-width:0; }

.contact-header{ margin-bottom:40px; }

.contact-header h2{
    font-size:clamp(17px, 2vw, 20px);
    color:#0b3c4c;
    margin-bottom:15px;
}

.contact-header p{ font-size:clamp(14px, 1.4vw, 16px); color:#6c7a86; }

.contact-form{
    background:#ffffff;
    padding:clamp(20px, 4vw, 40px);
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

.form-row{
    display:flex;
    flex-wrap:wrap;          /* ← wraps on mobile */
    gap:20px;
    margin-bottom:20px;
}

.form-group{
    flex:1 1 200px;
    display:flex;
    flex-direction:column;
}

.form-group label{ font-size:14px; margin-bottom:6px; }

.form-group input,
.form-group select,
.form-group textarea{
    padding:12px 14px;
    border:1px solid #d9e2ea;
    border-radius:6px;
    font-size:14px;
    outline:none;
    transition:0.3s;
    width:100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#0b5d7c;
    box-shadow:0 0 0 2px rgba(11,93,124,0.1);
}

.submit-wrapper{ text-align:center; margin-top:25px; }

.contact-btn{
    background:#16a085;
    color:#fff;
    padding:12px 35px;
    border:none;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.contact-btn:hover{
    background:#12876f;
    transform:translateY(-2px);
}

/* ---- MAP ---- */
.map-container{
    width:100%;              /* was fixed 700px / 300px — now fluid */
    max-width:700px;
    height:clamp(280px, 45vw, 500px);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,0.1);
    margin-bottom:30px;
}

#map{ height:100%; width:100%; }

.leaflet-control-attribution{
    font-size:10px;
    opacity:0.6;
    background:rgba(255,255,255,0.6);
    padding:2px 6px;
    border-radius:4px;
}

.contact-info h2{ font-size:clamp(18px, 2.2vw, 24px); margin-bottom:20px; color:#1e2a38; }
.contact-info p { margin-bottom:15px; font-size:14px; color:#555; }
.contact-info strong{ color:#1e2a38; }

/* =============================================
   FEATURE SECTION (Before/After)
   ============================================= */
.feature-section{
    padding:clamp(40px, 6vw, 70px) 20px;
    background:linear-gradient(135deg,#eef3f6,#e6edf2);
    max-width:100%;
    margin:auto;
    text-align:center;
}

.feature-section h2{ font-size:clamp(22px, 3vw, 32px); margin-bottom:10px; }
.feature-section p { color:#5b6b7a; margin-bottom:30px; }

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap:30px;
    max-width:1000px;
    margin:0 auto;
}

.feature-card{ text-align:center; max-width:380px; margin:auto; }
.feature-card h3{ margin-top:18px; font-size:clamp(16px, 1.8vw, 20px); }
.feature-card p { font-size:14px; color:#6b7c8f; line-height:1.6; }

.feature-box{
    position:relative;
    padding:24px 26px;
    border-radius:12px;
    background:#ffffff;
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    transition:all .3s ease;
    text-align:left;
}

.feature-box::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:60px; height:4px;
    border-radius:4px;
    background:#16a085;
}

.feature-box h3{ font-size:18px; margin-bottom:14px; color:#0b5d7c; font-weight:600; }

.feature-box ul{ list-style:none; padding:0; margin:0; }

.feature-box li{
    font-size:14px;
    margin-bottom:10px;
    color:#555;
    padding-left:20px;
    position:relative;
}

.feature-box li::before{ content:"✔"; position:absolute; left:0; color:#16a085; font-size:12px; }

.feature-box:hover{ transform:translateY(-6px); box-shadow:0 15px 35px rgba(0,0,0,0.12); }

/* =============================================
   HEADINGS (global h3 / h4)
   ============================================= */
h3{
    font-size:clamp(18px, 2.2vw, 26px);
    color:#1b3556;
    margin:40px 0 15px;
    padding-bottom:6px;
    border-bottom:2px solid #e5ecf7;
}

h4{
    font-size:clamp(14px, 1.4vw, 17px);
    color:#1f7ae0;
    margin:30px 0 10px;
    background:#f4f8ff;
    padding:10px 14px;
    border-left:4px solid #1f7ae0;
    border-radius:6px;
}

/* =============================================
   HERO (Home banner slider)
   ============================================= */
.hero{
    position:relative;
    height:clamp(260px, 60vh, 700px);
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    padding-left:clamp(16px, 8%, 120px);
    transition:background-image 1s ease-in-out;
}

.hero-overlay {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;
    width:90%;
    max-width:360px;
    background:rgba(15,20,40,0.85);
    backdrop-filter:blur(12px);
    padding:clamp(18px, 3vw, 35px);
    border-radius:7px;
    color:#fff;
}

.hero-content h1{
    font-size:clamp(17px, 2.2vw, 25px);
    margin-bottom:10px;
}

.hero-content p { color:#cfd8e3; margin-bottom:12px; font-size:clamp(13px, 1.2vw, 15px); }

.hero-content ul { padding-left:18px; margin-bottom:20px; }

.hero-content li { margin-bottom:6px; font-size:clamp(13px, 1.1vw, 15px); }

.hero-btn{
    display:inline-block;
    background:#16c784;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    transition:.3s;
    font-size:14px;
}

.hero-btn:hover{ background:#12a96e; }

.hero-dots{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:2;
}

.hero-dots span{
    width:10px; height:10px;
    border-radius:50%;
    background:#ffffff66;
    cursor:pointer;
}

.hero-dots .active{ background:#16c784; }

/* =============================================
   FOOTER
   ============================================= */
.footer{
    background:linear-gradient(180deg,#0b1c26,#08141c);
    color:#cfd9e0;
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%; height:2px;
    background:linear-gradient(90deg,transparent,#2aa7c9,transparent);
    opacity:.6;
}

.footer-container{
    max-width:1200px;
    margin:auto;
    padding:clamp(40px, 6vw, 70px) 20px clamp(30px, 4vw, 50px);
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap:clamp(24px, 4vw, 48px);
}

.footer h3{ color:white; margin-bottom:14px; letter-spacing:.5px; font-size:clamp(14px,1.4vw,17px); }

.footer h4{
    color:white;
    margin-bottom:18px;
    position:relative;
    padding-bottom:10px;
    font-size:clamp(13px,1.3vw,16px);
}

.footer h4::after{
    content:"";
    position:absolute;
    bottom:0; left:0;
    width:35px; height:2px;
    background:#2aa7c9;
    border-radius:2px;
}

.footer p{ font-size:14px; line-height:1.7; opacity:.85; }

.footer a{
    display:block;
    color:#cfd9e0;
    text-decoration:none;
    margin:10px 0;
    font-size:14px;
    transition:.25s;
    position:relative;
    width:max-content;
}

.footer a::after{
    content:"";
    position:absolute;
    bottom:-3px; left:0;
    width:0%; height:1px;
    background:#5fb6d1;
    transition:.25s;
}

.footer a:hover{ color:#5fb6d1; transform:translateX(6px); }
.footer a:hover::after{ width:100%; }

.footer-social{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }

.footer-social a{
    width:36px; height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    transition:.25s;
    font-size:15px;
}

.footer-social a:hover{
    background:#2aa7c9;
    color:white;
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(42,167,201,.35);
}

.footer-divider{ height:1px; background:rgba(255,255,255,.07); margin:20px 0; }

.footer-bottom{
    text-align:center;
    font-size:13px;
    padding:18px 16px;
    background:rgba(0,0,0,.25);
    letter-spacing:.4px;
    color:#9fb3bd;
}

/* =============================================
   DARK MODE TOGGLE
   ============================================= */
.dark-toggle{ background:none; border:none; font-size:20px; cursor:pointer; }

/* =============================================
   DARK MODE
   ============================================= */
.dark{ color:#d6e2ea; }

.dark .about,
.dark .advantages,
.dark .contact-section{ background:#0f1720; }

.dark .services,
.dark .feature-section{ background:#111c26; }

.dark .card,
.dark .feature-box,
.dark .contact-form{
    background:#16222d;
    color:#d6e2ea;              /* fixed: was #16222d (invisible text) */
    box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.dark p{ color:#b8c7d1; }
.dark h1,.dark h2,.dark h3{ color:#e6f1f7; }

.dark header{ background:#0b141c; border-bottom:1px solid #1f2e3a; }

.dark .nav > ul > li > a{ color:#c9d6de; }
.dark .nav > ul > li > a:hover{ color:#4fc3f7; }

.dark .mega-menu{ background:#16222d; }
.dark .mega-menu a{ color:#c9d6de; }
.dark .mega-menu a:hover{ background:#1f2e3a; }

.dark .map-container{ box-shadow:0 20px 50px rgba(0,0,0,.7); }

/* =============================================
   TOGGLE SWITCH
   ============================================= */
.switch{ position:relative; display:inline-block; width:52px; height:26px; }
.switch input{ opacity:0; width:0; height:0; }

.slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background:#cfd8dc;
    border-radius:50px;
    transition:.3s;
}

.slider::before{
    content:"";
    position:absolute;
    height:20px; width:20px;
    left:3px; top:3px;
    background:white;
    border-radius:50%;
    transition:.3s;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.switch input:checked + .slider{ background:#009688; }
.switch input:checked + .slider::before{ transform:translateX(26px); }


/* =============================================
   ──────── RESPONSIVE BREAKPOINTS ────────────
   ============================================= */

/* ---- Large laptop  1024px – 1280px ---- */
@media (max-width:1280px){
    .container{ max-width:100%; padding:0 24px; }
    .nav > ul{ gap:20px; }
    .hero-content{ max-width:320px; }
}

/* ---- Laptop / small desktop  769px – 1024px ---- */
@media (max-width:1024px){
    .nav > ul{ gap:14px; }
    .nav > ul > li > a{ font-size:13px; }

    .contact-main-wrapper{ flex-direction:column; }
    .contact-right{ margin-top:0; }

    .map-container{ max-width:100%; }

    .hero{ padding-left:20px; }
    .hero-content{ max-width:300px; }

    .advantages{ padding:60px 0; }
}

/* ---- Tablet & mobile ≤ 768px ---- */
@media (max-width:768px){

    /* Nav — hide desktop menu, show hamburger */
    .nav > ul{ display:none; }
    .hamburger{ display:flex; }

    /* Banner */
    .banner{ height:clamp(180px, 40vw, 260px); }
    .banner-content h1{ font-size:22px; }
    .banner-content p{ font-size:13px; }

    /* Hero */
    .hero{ padding-left:16px; padding-right:16px; align-items:flex-end; padding-bottom:50px; }
    .hero-content{ max-width:100%; width:100%; }

    /* Services grid → single column */
    .service-box{ grid-template-columns:1fr; padding:10px; }
    .service-box .card{ padding:18px; }

    /* Contact */
    .contact-section{ padding:40px 16px; }
    .form-row{ flex-direction:column; }
    .contact-form{ padding:20px; }
    .map-container{ height:280px; }

    /* Features */
    .feature-grid{ grid-template-columns:1fr; }

    /* Footer */
    .footer-container{ grid-template-columns:1fr; gap:28px; }
    .footer-bottom{ font-size:12px; }

    /* Advantages */
    .adv-grid{ grid-template-columns:1fr; }
    .advantages{ padding:40px 16px; }
}

/* ---- Small mobile ≤ 480px ---- */
@media (max-width:480px){
    .logo{ height:36px; }
    .company-name{ font-size:14px; }

    .hero{ height:auto; min-height:260px; }
    .hero-content{ padding:16px; }
    .hero-content h1{ font-size:16px; }

    .banner-content{ padding:12px 14px; }
    .banner-content h1{ font-size:18px; }

    .btn{ padding:10px 20px; font-size:13px; }

    .social-icon{ width:40px; height:40px; font-size:18px; }

    .contact-form{ padding:16px; }

    h3{ font-size:18px; margin:24px 0 10px; }
    h4{ font-size:14px; }
}

/* =============================================
   RESPONSIVE ENHANCEMENTS (Added)
   ============================================= */

/* --- THEME SWITCH layout --- */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.theme-switch span {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/* Hide Light/Dark text on small screens */
@media (max-width: 520px) {
    .theme-switch > span { display: none; }
}

/* --- SERVICE IMAGES: fully responsive --- */
img.popup-img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    margin: 20px auto;
}
img.popup-img:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}

/* --- BEFORE/AFTER SLIDER ROW: responsive wrapping --- */
.slider-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 30px auto;
    padding: 0 10px;
}
.slider-container {
    position: relative;
    width: min(420px, 100%);
    flex: 1 1 280px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    max-width: 100%;
}

/* --- ABOUT CARD: responsive padding & width --- */
@media (max-width: 960px) {
    .about {
        padding: 40px 32px !important;
        width: 96% !important;
        margin: 40px auto !important;
    }
}
@media (max-width: 600px) {
    .about {
        padding: 24px 16px !important;
        width: 98% !important;
        margin: 20px auto !important;
        border-radius: 10px !important;
    }
}

/* --- MINI HERO SLIDER: responsive --- */
.mini-hero-slider {
    height: clamp(160px, 28vw, 300px) !important;
    width: 96% !important;
}

/* --- SECTION TITLE h2: responsive size on inner pages --- */
.section-title h2 {
    font-size: clamp(22px, 3.5vw, 36px);
}

/* --- FEATURE GRID 3 (BIM types): responsive --- */
.feature-grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* --- CTA: responsive width --- */
.cta {
    width: 90% !important;
    max-width: 800px;
    padding: clamp(24px, 4vw, 40px) !important;
}

/* --- ADVANTAGES section: fix padding on mobile --- */
@media (max-width: 600px) {
    .advantages {
        padding: 30px 16px !important;
    }
}

/* --- CONTACT PAGE wrapper: fix column override from inline style --- */
@media (max-width: 900px) {
    .contact-main-wrapper {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
}

/* --- MOBILE MENU child indentation --- */
.mobile-menu-child {
    padding-left: 36px !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    border-bottom-color: #f3f4f6 !important;
}

/* --- DARK MODE: mobile menu --- */
.dark .mobile-menu {
    background: #0b141c;
    border-top: 1px solid #1f2e3a;
}
.dark .mobile-menu a {
    color: #c9d6de;
    border-bottom-color: #1f2e3a;
}
.dark .mobile-menu a:hover { color: #4fc3f7; }

/* --- POPUP image (lightbox): responsive --- */
.popup-content {
    max-width: 94vw !important;
    max-height: 88vh !important;
    width: auto;
    height: auto;
}

/* --- SERVICES.HTML Bann banner: responsive --- */
.Bann {
    height: clamp(140px, 22vw, 350px) !important;
    min-height: 120px !important;
}

/* --- Projects: table / grid responsive --- */
@media (max-width: 640px) {
    .slider-container {
        flex: 1 1 100%;
    }
    table {
        font-size: 13px;
    }
    th, td {
        padding: 8px 6px !important;
    }
}

/* ---- Very small phones ≤ 380px ---- */
@media (max-width: 380px) {
    .company-name { font-size: 13px !important; }
    .logo { height: 34px !important; }
    .nav { padding: 0 12px !important; }
}