/* =========================================================== VISION FIX — TV Repair Chennai Recoloured to match the live visionfixchennai.in palette =========================================================== */
 :root{
     --bg: #ffffff;
     --bg-alt: #f6f7f5;
     --dark: #1c1c1c;
     --line: #e7e7e7;
     --red: #d60000;
     --red-2: #dd3333;
     --red-3: #cc2e2e;
     --green: #74dd33;
     --green-2: #5fc21f;
     --green-bg: #81d742;
     --text: #000000;
     --muted: #5a5a5a;
     --radius: 8px;
     --wrap: 1180px;
}
 *{
     box-sizing: border-box;
}
 html{
     scroll-behavior: smooth;
}
 #about, #services, #contact{
     scroll-margin-top: 90px;
}
 body{
     margin:0;
     background: var(--bg);
     color: var(--text);
     font-family: 'Open Sans', system-ui, sans-serif;
     -webkit-font-smoothing: antialiased;
}
 img{
     max-width:100%;
     display:block;
}
 a{
     color: inherit;
     text-decoration:none;
}
 ul{
     list-style:none;
     margin:0;
     padding:0;
}
 h1,h2,h3{
     font-family: 'Bitter', serif;
     font-weight: 700;
     margin: 0 0 .5em;
     line-height: 1.15;
}
 .wrap{
     max-width: var(--wrap);
     margin: 0 auto;
     padding: 0 24px;
}
 .section{
     padding: 80px 0;
}
 .section-kicker{
     color: var(--red);
     font-weight: 700;
     letter-spacing: .1em;
     text-transform: uppercase;
     font-size: 13px;
     margin: 0 0 12px;
}
 .center{
     text-align:center;
}
 .section-kicker.center{
     text-align:center;
}
 .btn{
     display:inline-flex;
     align-items:center;
     gap:10px;
     padding: 13px 28px;
     border-radius: 30px;
     font-weight: 700;
     font-size: 14px;
     letter-spacing:.02em;
     text-transform: uppercase;
     border: 2px solid transparent;
     cursor:pointer;
     transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
 .btn:hover{
     transform: translateY(-2px);
}
 .btn-primary{
     background: var(--green);
     color: #1c3d00;
}
 .btn-primary:hover{
     background: var(--green-2);
}
 .btn-ghost{
     background: transparent;
     border-color: var(--red);
     color: var(--red);
}
 .btn-ghost:hover{
     background: var(--red);
     color: #fff;
}
 .btn-outline-light{
     background: transparent;
     border-color: rgba(0,0,0,.35);
     color: #1c3d00;
}
 .btn-outline-light:hover{
     border-color:#1c3d00;
     background: rgba(255,255,255,.35);
}
/* ===== TOP BAR ===== */
 .topbar{
     background: var(--dark);
     font-size: 13px;
}
 .topbar-inner{
     display:flex;
     align-items:center;
     justify-content:space-between;
     height: 40px;
}
 .topbar-call{
     color: #ffffff;
     display:flex;
     align-items:center;
     gap:8px;
}
 .topbar-call i{
     color: var(--red-2);
}
 .topbar-call:hover{
     color: var(--green);
}
 .topbar-right{
     display:flex;
     align-items:center;
     gap:24px;
}
 .topbar-links{
     display:flex;
     gap:18px;
}
 .topbar-links a{
     color: #cfcfcf;
     text-transform: uppercase;
     font-size:12px;
     letter-spacing:.04em;
}
 .topbar-links a:hover{
     color: var(--green);
}
 .topbar-socials{
     display:flex;
     gap:10px;
}
 .topbar-socials a{
     width:26px;
     height:26px;
     border-radius:50%;
     display:flex;
     align-items:center;
     justify-content:center;
     color: #fff;
     background: rgba(255,255,255,.08);
     font-size: 12px;
}
 .topbar-socials a:hover{
     background: var(--red);
}
/* ===== HEADER ===== */
 .site-header{
     position: sticky;
     top:0;
     z-index: 50;
     background: #ffffff;
     border-bottom: 1px solid var(--line);
}
 .header-inner{
     display:flex;
     align-items:center;
     justify-content:space-between;
     height: 82px;
     gap: 24px;
}
 .logo{
     display:flex;
     align-items:center;
     gap:10px;
     flex-shrink:0;
}
 .logo-img{
     display:block;
     height:56px;
     width:auto;
     max-width:none;
}
 .header-tagline{
     margin:0;
     color: var(--red);
     font-size: 20px;
     font-family: 'Bitter', serif;
     font-weight: 700;
     text-align:center;
     display:none;
}
 .main-nav{
     background: #5fb015;
}
 .main-nav ul{
     display:flex;
     gap: 6px;
     justify-content:center;
}
 .main-nav a{
     display:block;
     font-weight: 700;
     font-size: 13px;
     letter-spacing:.06em;
     text-transform:uppercase;
     color: #ffffff;
     padding: 16px 20px;
     border-bottom: 3px solid transparent;
}
 .main-nav a:hover, .main-nav a.active{
     color: #ffffff;
     border-color: #ffffff;
}
 .nav-toggle{
     display:none;
     background:none;
     border:0;
     cursor:pointer;
     width:32px;
     height:24px;
     flex-direction:column;
     justify-content:space-between;
     padding:0;
}
 .nav-toggle span{
     display:block;
     height:2px;
     background: var(--text);
     border-radius:2px;
}
/* ===== BANNER CAROUSEL (4 slides) ===== */
 .banner{
     position:relative;
     overflow:hidden;
     border-bottom: 4px solid var(--green);
}
 .banner-track{
     position:relative;
     min-height: 560px;
}
 .banner-slide{
     position:absolute;
     inset:0;
     display:flex;
     align-items:flex-end;
     opacity:0;
     visibility:hidden;
     transition: opacity .6s ease;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
}
 .banner-slide.is-active{
     opacity:1;
     visibility:visible;
     z-index:1;
}
 .banner-slide-1{ background-image: url('assets/img/banner/banner_01.jpg'); }
 .banner-slide-2{ background-image: url('assets/img/banner/banner_02.jpg'); }
 .banner-slide-3{ background-image: url('assets/img/banner/banner_03.jpg'); }
 .banner-slide-4{ background-image: url('assets/img/banner/banner_04.jpg'); }
 .banner-overlay{
     position:absolute;
     inset:0;
     z-index:1;
     background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
}
 .banner-inner{
     position:relative;
     z-index:2;
     padding: 40px 24px;
     width:100%;
}
 .hero-cta{
     display:flex;
     flex-wrap:wrap;
     gap:14px;
}
 .btn-white{
     background:#ffffff;
     color: var(--text);
}
 .btn-white:hover{
     background: var(--bg-alt);
}
 .banner-arrow{
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     z-index:5;
     width:44px;
     height:44px;
     border-radius:50%;
     background:rgba(255,255,255,.92);
     border:1px solid var(--line);
     display:flex;
     align-items:center;
     justify-content:center;
     cursor:pointer;
     color:var(--text);
     box-shadow:0 6px 16px rgba(0,0,0,.1);
}
 .banner-arrow:hover{
     background:var(--red);
     color:#fff;
     border-color:var(--red);
}
 .banner-arrow-prev{
     left:20px;
}
 .banner-arrow-next{
     right:20px;
}
 .banner-dots{
     position:absolute;
     bottom:22px;
     left:50%;
     transform:translateX(-50%);
     z-index:5;
     display:flex;
     gap:10px;
     background: rgba(255,255,255,.65);
     padding:9px 14px;
     border-radius:30px;
     backdrop-filter: blur(4px);
}
 .banner-dot{
     width:9px;
     height:9px;
     border-radius:50%;
     background:rgba(0,0,0,.25);
     border:0;
     cursor:pointer;
     padding:0;
     transition: all .2s ease;
}
 .banner-dot.is-active{
     background: var(--red);
     width:24px;
     border-radius:6px;
}
/* ===== SERVICE AREAS ===== */
 .areas{
     background: var(--red);
     padding: 24px 0;
}
 .areas-list{
     display:flex;
     flex-wrap:wrap;
     gap: 14px 32px;
     justify-content:center;
}
 .areas-list li{
     display:flex;
     align-items:center;
     gap:8px;
     color: #ffffff;
     font-weight:700;
     font-size: 15px;
     font-family: 'Bitter', serif;
     letter-spacing:.01em;
}
 .areas-list i{
     color: var(--green);
     font-size:13px;
}
/* ===== TWO COL / REPAIR SECTION ===== */
 .two-col{
     display:grid;
     grid-template-columns: 1.15fr .85fr;
     gap: 64px;
     align-items:start;
}
 .repair-section{
     background: var(--bg);
}
 .repair-section h2{
     font-size: clamp(26px,3.2vw,34px);
     max-width: 480px;
     color: var(--red-3);
}
 .repair-section > .wrap > .col > p{
     color: var(--muted);
     line-height:1.75;
     font-size: 15.5px;
}
 .issues-title{
     font-size: 16px;
     text-transform:uppercase;
     letter-spacing:.03em;
     font-family:'Bitter',serif;
     font-weight:700;
     display:flex;
     align-items:center;
     gap:8px;
     color: var(--text);
     margin: 32px 0 16px;
}
 .issues-title i{
     color: var(--red);
}
 .issues-list{
     display:grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px 20px;
}
 .issues-list li{
     color: var(--muted);
     font-size: 14.5px;
     padding-left: 20px;
     position:relative;
     line-height:1.5;
}
 .issues-list li::before{
     content:"";
     position:absolute;
     left:0;
     top:8px;
     width:8px;
     height:2px;
     background: var(--red);
}
 .ticket-card{
     background: var(--bg-alt);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 28px;
     position: relative;
}
 .ticket-card::before{
     content:"";
     position:absolute;
     left:0;
     top:24px;
     bottom:24px;
     width:4px;
     background: var(--green);
     border-radius: 3px;
}
 .ticket-head{
     display:flex;
     align-items:center;
     gap:10px;
     font-family:'Bitter', serif;
     text-transform:uppercase;
     letter-spacing:.04em;
     font-weight:700;
     font-size: 15px;
     color: var(--red-3);
     margin-bottom: 20px;
     padding-bottom:16px;
     border-bottom: 1px dashed var(--line);
}
 .ticket-head i{
     color: var(--red);
}
 .ticket-row{
     display:flex;
     justify-content:space-between;
     font-size: 14px;
     color: var(--text);
     padding: 8px 0;
     border-bottom: 1px solid var(--line);
}
 .ticket-row span:first-child{
     color: var(--muted);
}
 .badge{
     background: rgba(116,221,51,.18);
     color: var(--green-2);
     padding: 2px 10px;
     border-radius: 999px;
     font-size: 12px;
     font-weight:700;
}
 .ticket-note{
     margin: 18px 0 0;
     color: var(--muted);
     font-size: 13px;
     line-height:1.6;
}
/* ===== WHY SECTION ===== */
 .why-section{
     background: var(--bg-alt);
     border-top:1px solid var(--line);
     border-bottom:1px solid var(--line);
}
 .why-section h2{
     font-size: clamp(26px,3.2vw,34px);
     color: var(--red);
}
 .why-grid{
     display:grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 18px;
     margin-top: 44px;
}
 .why-card{
     background: #ffffff;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 30px 16px;
     text-align:center;
     box-shadow: 0 6px 16px rgba(0,0,0,.03);
     transition: box-shadow .2s ease, transform .2s ease;
}
 .why-card:hover{
     box-shadow: 0 12px 24px rgba(0,0,0,.08);
     transform: translateY(-4px);
}
 .why-card i{
     font-size: 22px;
     color: #fff;
     width: 52px;
     height: 52px;
     line-height:52px;
     border-radius: 50%;
     background: var(--red);
     margin: 0 auto 14px;
     display:block;
}
 .why-card span{
     font-size: 13.5px;
     font-weight:700;
     color: var(--text);
}
/* ===== SERVICES ===== */
 .services-section{
     background: var(--bg);
}
 .services-section h2{
     font-size: clamp(26px,3.2vw,34px);
     color: var(--red-3);
}
 .services-intro{
     color: var(--muted);
     max-width: 640px;
     margin: 0 auto 48px;
     text-align:center;
     line-height:1.75;
     font-size: 15.5px;
}
 .services-grid{
     display:grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
}
 .service-card{
     background: #ffffff;
     border: 1px solid var(--line);
     border-top: 3px solid var(--green);
     border-radius: var(--radius);
     padding: 30px 26px;
     transition: border-color .2s ease, box-shadow .2s ease;
     box-shadow: 0 6px 16px rgba(0,0,0,.03);
}
 .service-card:hover{
     border-top-color: var(--red);
     box-shadow: 0 12px 24px rgba(0,0,0,.08);
}
 .service-card i{
     color: var(--red);
     font-size: 24px;
     margin-bottom: 16px;
     display:block;
}
 .service-card h3{
     font-family:'Bitter', serif;
     font-size: 17px;
     font-weight: 700;
     margin-bottom: 10px;
     color: var(--text);
}
 .service-card p{
     color: var(--muted);
     font-size: 14px;
     line-height:1.65;
     margin:0;
}
/* ===== CTA STRIP ===== */
 .cta-strip{
     background: var(--green-bg);
     padding: 44px 0;
}
 .cta-strip-inner{
     display:flex;
     align-items:center;
     justify-content:space-between;
     flex-wrap:wrap;
     gap: 24px;
}
 .cta-strip-inner p{
     font-family:'Bitter', serif;
     font-size: 26px;
     font-weight:700;
     color:#1c3d00;
     margin:0;
}
 .cta-strip .btn-primary{
     background:#1c1c1c;
     color:#fff;
}
 .cta-strip .btn-primary:hover{
     background:#000;
}
/* ===== FOOTER ===== */
 .site-footer{
     background: var(--dark);
     padding-top: 60px;
}
 .footer-grid{
     display:grid;
     grid-template-columns: 1.4fr 1fr 1.2fr;
     gap: 48px;
     padding-bottom: 40px;
}
 .footer-logo{
     margin-bottom: 16px;
}
 .footer-logo-img{
     height:56px;
     background:#fff;
     padding:8px 14px;
     border-radius: var(--radius);
}
 .footer-col p{
     color: #b9b9b9;
     font-size: 14px;
     line-height:1.75;
     margin: 0 0 10px;
}
 .footer-col h4{
     font-family:'Bitter', serif;
     text-transform:uppercase;
     letter-spacing:.04em;
     font-size: 16px;
     margin-bottom: 18px;
     color: var(--green);
}
 .footer-col p i{
     color: var(--red-2);
     width:16px;
     margin-right:8px;
}
 .footer-col p a:hover{
     color: var(--green);
}
 .footer-socials{
     display:flex;
     gap:12px;
}
 .footer-socials a{
     width:36px;
     height:36px;
     border-radius:50%;
     background: rgba(255,255,255,.08);
     display:flex;
     align-items:center;
     justify-content:center;
     color: #fff;
}
 .footer-socials a:hover{
     background: var(--red);
}
 .footer-bottom{
     border-top: 1px solid #333;
     padding: 20px 0;
     color: #999;
     font-size: 13px;
}
/* ===== WHATSAPP FLOAT ===== */
 .whatsapp-float{
     position: fixed;
     bottom: 22px;
     left: 22px;
     z-index: 60;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #25D366;
     color:#fff;
     font-size: 26px;
     display:flex;
     align-items:center;
     justify-content:center;
     box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
/* ===== RESPONSIVE ===== */
 @media (min-width: 860px){
     .header-tagline{
         display:block;
    }
}
 @media (max-width: 900px){
     .why-grid{
         grid-template-columns: repeat(3, 1fr);
    }
     .services-grid{
         grid-template-columns: repeat(2, 1fr);
    }
     .two-col{
         grid-template-columns: 1fr;
    }
     .banner-track{
         min-height: 480px;
    }
     .footer-grid{
         grid-template-columns: 1fr 1fr;
    }
}
 @media (max-width: 720px){
     .topbar-links{
         display:none;
    }
     .main-nav{
         position:absolute;
         top:82px;
         left:0;
         right:0;
         max-height:0;
         overflow:hidden;
         transition: max-height .25s ease;
         z-index:40;
    }
     .main-nav.open{
         max-height: 260px;
    }
     .main-nav ul{
         flex-direction:column;
         gap:0;
         padding: 6px 24px 18px;
    }
     .main-nav a{
         padding: 12px 0;
         border-bottom:1px solid rgba(255,255,255,.25);
    }
     .nav-toggle{
         display:flex;
    }
     .why-grid{
         grid-template-columns: repeat(2, 1fr);
    }
     .services-grid{
         grid-template-columns: 1fr;
    }
     .issues-list{
         grid-template-columns: 1fr;
    }
     .cta-strip-inner{
         justify-content:center;
         text-align:center;
    }
     .footer-grid{
         grid-template-columns: 1fr;
         gap: 32px;
         text-align:center;
    }
     .footer-socials{
         justify-content:center;
    }
     .footer-logo{
         justify-content:center;
         display:flex;
    }
     .banner-track{
         min-height: 440px;
    }
     .banner-inner{
         text-align:center;
         margin:0 auto;
         padding: 30px 20px;
    }
     .hero-cta{
         justify-content:center;
    }
     .banner-arrow{
         width:36px;
         height:36px;
    }
     .banner-arrow-prev{
         left:8px;
    }
     .banner-arrow-next{
         right:8px;
    }
}
 @media (max-width: 480px){
     .section{
         padding: 56px 0;
    }
     .topbar-inner{
         height:auto;
         padding: 8px 0;
         flex-wrap:wrap;
         gap:8px;
         justify-content:center;
    }
     .topbar-call{
         font-size:12px;
    }
     .header-inner{
         height: 70px;
    }
     .logo-img{
         height: 42px;
    }
     .banner-track{
         min-height: 400px;
    }
     .btn{
         width:100%;
         justify-content:center;
         padding: 13px 20px;
    }
     .hero-cta{
         flex-direction:column;
         width:100%;
    }
     .areas-list{
         gap: 10px 18px;
         justify-content:flex-start;
    }
     .areas-list li{
         font-size:13.5px;
    }
     .why-card{
         padding: 22px 12px;
    }
     .service-card{
         padding: 24px 20px;
    }
     .cta-strip-inner p{
         font-size: 21px;
    }
     .whatsapp-float{
         width:48px;
         height:48px;
         font-size:22px;
         bottom:16px;
         left:16px;
    }
     .banner-dots{
         bottom:14px;
         padding:7px 10px;
    }
}
/* =========================================================== INNER PAGES — About / Services / Contact =========================================================== */
/* ===== PAGE HERO (small banner for inner pages) ===== */
 .page-hero{
     background: linear-gradient(120deg, #1c1c1c 0%, #262626 60%, #303030 100%);
     padding: 64px 0 48px;
     border-bottom: 4px solid var(--green);
     text-align: center;
}
 .page-hero h1{
     color:#fff;
     font-size: clamp(28px, 4.2vw, 42px);
     margin-bottom: 12px;
}
 .page-hero .breadcrumb{
     color:#cfcfcf;
     font-size:14px;
     letter-spacing:.03em;
}
 .page-hero .breadcrumb a{
     color: var(--green);
}
 .page-hero .breadcrumb a:hover{
     color:#fff;
}
 .page-hero .breadcrumb span{
     color:#777;
     margin: 0 8px;
}
/* ===== ABOUT PAGE ===== */
 .story-block p{
     color: var(--muted);
     font-size: 15.5px;
     line-height: 1.8;
     margin: 0 0 18px;
}
 .story-block p:last-child{
     margin-bottom:0;
}
 .vm-grid{
     display:grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
     margin-top: 40px;
     align-items:start;
}
 .vm-card{
     background: var(--bg-alt);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 34px 30px;
}
 .vm-card i{
     font-size: 24px;
     color:#fff;
     width: 54px;
     height: 54px;
     line-height: 54px;
     border-radius: 50%;
     background: var(--red);
     display:block;
     text-align:center;
     margin-bottom: 18px;
}
 .vm-card h3{
     font-family:'Bitter', serif;
     font-size: 20px;
     color: var(--red-3);
     margin-bottom: 12px;
}
 .vm-card p{
     color: var(--muted);
     font-size: 14.5px;
     line-height: 1.75;
     margin:0;
}
 .mission-list{
     margin-top: 10px;
}
 .mission-list li{
     display:flex;
     gap: 16px;
     margin-bottom: 22px;
     align-items:flex-start;
}
 .mission-list li:last-child{
     margin-bottom:0;
}
 .mission-list .num{
     flex-shrink:0;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--green);
     color: #1c3d00;
     font-weight: 700;
     display:flex;
     align-items:center;
     justify-content:center;
     font-family:'Bitter', serif;
     font-size: 15px;
}
 .mission-list p{
     margin:0;
     color: var(--muted);
     font-size: 14.5px;
     line-height: 1.75;
}
 .mission-list strong{
     color: var(--text);
}
/* ===== MEDIA + CONTENT SPLIT (image beside text) ===== */
 .media-grid{
     display:grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 56px;
     align-items:center;
}
 .media-image{
     border-radius: var(--radius);
     overflow:hidden;
     box-shadow: 0 20px 40px rgba(0,0,0,.12);
     height: 100%;
     min-height: 320px;
}
 .media-image img{
     width:100%;
     height:100%;
     object-fit:cover;
     display:block;
}
 .media-content h3{
     font-family:'Bitter', serif;
     font-size: clamp(22px,3vw,28px);
     color: var(--red-3);
     margin-bottom: 22px;
}
/* icon + title + content list (used on Service page) */
 .feature-list{
     margin-top:10px;
}
 .feature-list li{
     display:flex;
     gap:16px;
     margin-bottom:26px;
     align-items:flex-start;
}
 .feature-list li:last-child{
     margin-bottom:0;
}
 .feature-list i{
     flex-shrink:0;
     width:48px;
     height:48px;
     border-radius:50%;
     background: var(--red);
     color:#fff;
     display:flex;
     align-items:center;
     justify-content:center;
     font-size:18px;
}
 .feature-list h4{
     font-family:'Bitter', serif;
     font-size:16px;
     color:var(--text);
     margin:0 0 6px;
}
 .feature-list p{
     margin:0;
     color:var(--muted);
     font-size:14.5px;
     line-height:1.7;
}
/* ===== SERVICE PAGE — LOCATIONS ===== */
 .locations-section{
     background: var(--bg-alt);
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
}
 .location-badges{
     display:flex;
     flex-wrap:wrap;
     gap: 14px;
     justify-content:center;
     margin-top: 36px;
}
 .location-badges span{
     background:#fff;
     border: 1px solid var(--line);
     border-radius: 30px;
     padding: 12px 26px;
     font-weight:700;
     font-family:'Bitter', serif;
     color: var(--red-3);
     display:flex;
     align-items:center;
     gap:10px;
     box-shadow: 0 6px 16px rgba(0,0,0,.03);
     font-size: 14.5px;
}
 .location-badges i{
     color: var(--green-2);
}
/* ===== CONTACT PAGE ===== */
 .contact-grid{
     display:grid;
     grid-template-columns: 1.2fr .8fr;
     gap: 56px;
     align-items:start;
}
 .form-header{
     margin-bottom: 28px;
}
 .form-header p{
     color: var(--red);
     font-weight:700;
     letter-spacing:.1em;
     text-transform:uppercase;
     font-size:13px;
     margin: 0 0 6px;
}
 .form-header h2{
     font-size: clamp(22px,3vw,28px);
     margin:0;
}
 .contact-form .form-row{
     margin-bottom: 20px;
}
 .contact-form label{
     display:block;
     font-size: 13px;
     font-weight:700;
     text-transform:uppercase;
     letter-spacing:.04em;
     color: var(--text);
     margin-bottom: 8px;
}
 .contact-form input, .contact-form select, .contact-form textarea{
     width:100%;
     padding: 13px 16px;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     font-family:'Open Sans', sans-serif;
     font-size: 14.5px;
     color: var(--text);
     background:#fff;
}
 .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
     outline:none;
     border-color: var(--green-2);
}
 .contact-form textarea{
     resize:vertical;
     min-height: 130px;
}
 .contact-form .btn{
     border:0;
}
 .contact-info-card{
     background: var(--bg-alt);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 34px 30px;
}
 .contact-info-row{
     display:flex;
     gap: 16px;
     margin-bottom: 28px;
     align-items:flex-start;
}
 .contact-info-row:last-child{
     margin-bottom:0;
}
 .contact-info-row i{
     width: 44px;
     height: 44px;
     flex-shrink:0;
     border-radius: 50%;
     background: var(--red);
     color:#fff;
     display:flex;
     align-items:center;
     justify-content:center;
     font-size: 16px;
}
 .contact-info-row h5{
     margin: 0 0 6px;
     font-family:'Bitter', serif;
     font-size: 15px;
     color: var(--red-3);
     text-transform:uppercase;
     letter-spacing:.03em;
}
 .contact-info-row p{
     margin:0;
     color: var(--muted);
     font-size: 14.5px;
     line-height: 1.6;
}
 .contact-info-row a:hover{
     color: var(--green-2);
}
 .map-section{
     padding: 0 0 80px;
}
 .map-embed{
     width:100%;
     height: 420px;
     border-radius: var(--radius);
     border: 1px solid var(--line);
}
/* ===== INNER PAGE RESPONSIVE ===== */
 @media (max-width: 900px){
     .vm-grid{
         grid-template-columns: 1fr;
    }
     .contact-grid{
         grid-template-columns: 1fr;
    }
     .media-grid{
         grid-template-columns: 1fr;
         gap: 32px;
    }
     .media-image{
         min-height: 260px;
    }
}
 @media (max-width: 720px){
     .page-hero{
         padding: 46px 0 36px;
    }
     .map-embed{
         height: 320px;
    }
}
 @media (max-width: 480px){
     .vm-card, .contact-info-card{
         padding: 26px 20px;
    }
     .map-section{
         padding-bottom: 56px;
    }
}