:root{
  --primary:#1647d8;
  --primary-dark:#0d2e91;
  --accent:#ff3b30;
  --ink:#101828;
  --muted:#667085;
  --line:#e6eaf0;
  --surface:#f6f8fc;
  --white:#fff;
  --shadow:0 18px 50px rgba(16,24,40,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6
}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,92%);margin:auto}

/* =========================
   TOP BAR
========================= */
.topbar{
  background:#0c1d4d;
  color:#dce6ff;
  font-size:12px
}
.topbar-inner{
  min-height:34px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

/* =========================
   HEADER
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)
}
.header-inner{
  height:82px;
  display:flex;
  align-items:center;
  gap:24px
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:300px
}
.brand img{
  width:62px;
  height:62px;
  object-fit:contain
}
.brand-text{
  display:flex;
  flex-direction:column
}
.brand-text strong{font-size:18px}
.brand-text small{
  font-size:10px;
  color:var(--muted)
}
.main-nav{
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:flex-end;
  flex:1
}
.main-nav a{
  font-size:13px;
  font-weight:600;
  color:#344054
}
.main-nav a:hover,
.main-nav a.active{
  color:var(--primary)
}
.header-whatsapp{
  background:#128c4b;
  color:#fff;
  padding:10px 16px;
  border-radius:9px;
  font-size:13px;
  font-weight:700
}
.menu-toggle{
  display:none;
  border:0;
  background:none;
  font-size:26px
}

/* =========================
   HERO
========================= */
.hero{
  background:linear-gradient(135deg,#07163f 0%,#12358e 58%,#1a5de1 100%);
  color:#fff;
  overflow:hidden
}
.hero-grid{
  min-height:590px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:60px
}
.eyebrow{
  font-size:11px;
  letter-spacing:2px;
  font-weight:800;
  color:#3867df
}
.hero .eyebrow{color:#a9c2ff}
.hero h1{
  font-size:clamp(40px,5vw,67px);
  line-height:1.05;
  margin:15px 0 22px;
  letter-spacing:-2.5px
}
.hero h1 span{color:#ffd84d}
.hero p{
  max-width:610px;
  color:#dce6ff;
  font-size:17px
}
.hero-actions,
.contact-actions{
  display:flex;
  gap:12px;
  margin:28px 0
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:9px;
  font-weight:700;
  font-size:13px;
  border:1px solid transparent;
  cursor:pointer
}
.btn-primary{
  background:var(--accent);
  color:#fff
}
.btn-light{
  background:#fff;
  color:#14388f
}
.btn-whatsapp{
  background:#128c4b;
  color:#fff
}
.btn-outline-light{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55)
}
.btn-outline-light:hover{
  background:#fff;
  color:#14388f
}
.hero-points{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  color:#c8d6fa;
  font-size:12px
}
.hero-card{
  position:relative;
  min-height:390px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);
  border-radius:26px;
  padding:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 30px 80px rgba(0,0,0,.2)
}
.hero-card-glow{
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  background:rgba(72,132,255,.35);
  filter:blur(40px)
}
.hero-device{
  position:relative;
  width:330px
}
.device-screen{
  height:205px;
  border:13px solid #202a3a;
  border-radius:14px;
  background:linear-gradient(145deg,#58dcff,#1d55dc 70%);
  box-shadow:0 16px 35px rgba(0,0,0,.3)
}
.device-base{
  width:125px;
  height:22px;
  background:#cbd5e1;
  margin:auto;
  border-radius:0 0 12px 12px;
  box-shadow:0 12px 18px rgba(0,0,0,.2)
}
.hero-card-content{
  position:absolute;
  bottom:22px;
  left:28px;
  display:flex;
  flex-direction:column
}
.hero-card-content small{
  color:#ffd84d;
  font-weight:800;
  font-size:10px;
  letter-spacing:1.5px
}
.hero-card-content strong{font-size:16px}
.hero-card-content span{
  font-size:11px;
  color:#d4def8
}

/* =========================
   COMMON SECTIONS
========================= */
.section{padding:90px 0}
.section-heading{margin-bottom:38px}
.section-heading h2,
.why-section h2,
.about-section h2,
.training-section h2,
.contact-section h2{
  font-size:36px;
  line-height:1.15;
  letter-spacing:-1.2px;
  margin:9px 0 12px
}
.section-heading p,
.about-section p,
.contact-section p{
  color:var(--muted);
  margin:0
}
.centered{
  text-align:center;
  max-width:760px;
  margin-left:auto;
  margin-right:auto
}

/* =========================
   CATEGORIES
========================= */
.category-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px
}
.category-card{
  border:1px solid var(--line);
  padding:24px 15px;
  border-radius:14px;
  text-align:center;
  background:#fff;
  transition:.2s
}
.category-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:#c9d6fb
}
.cat-icon{font-size:30px}
.category-card h3{
  font-size:14px;
  margin:10px 0 4px
}
.category-card p{
  font-size:11px;
  color:var(--muted);
  margin:0
}

/* =========================
   PRODUCTS
========================= */
.products-section{background:var(--surface)}
.split-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px
}
.text-link{
  color:var(--primary);
  font-size:13px;
  font-weight:700
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.product-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 5px 18px rgba(16,24,40,.04)
}
.product-image{
  height:180px;
  background:linear-gradient(135deg,#eaf0ff,#f7f9fc);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px
}
.product-body{padding:18px}
.product-tag{
  font-size:10px;
  color:#3867df;
  font-weight:800
}
.product-body h3{
  font-size:16px;
  margin:5px 0
}
.specs{
  font-size:11px;
  color:var(--muted);
  min-height:42px
}
.price{
  font-size:20px;
  font-weight:800;
  margin-top:12px
}
.availability{
  font-size:10px;
  color:#128c4b;
  font-weight:700
}

/* =========================
   ACCESSORIES
========================= */
.accessories-section{background:#fff}
.accessory-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px
}
.accessory-card{
  background:#f8faff;
  border:1px solid #e3eaff;
  padding:20px 14px;
  border-radius:13px;
  text-align:center
}
.accessory-card span{font-size:28px}
.accessory-card h3{
  font-size:13px;
  margin:7px 0 3px
}
.accessory-card p{
  font-size:10px;
  color:var(--muted);
  margin:0
}

/* =========================
   SERVICES
========================= */
.services-section{background:var(--surface)}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  padding:24px;
  transition:.2s
}
.service-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-3px)
}
.service-icon{font-size:27px}
.service-card h3{
  font-size:15px;
  margin:10px 0 5px
}
.service-card p{
  font-size:12px;
  color:var(--muted);
  margin:0
}

/* =========================
   WHY CHOOSE US
========================= */
.why-section{
  padding:80px 0;
  background:#eef3ff
}
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}
.why-list{
  display:grid;
  gap:12px
}
.why-list>div{
  display:flex;
  gap:16px;
  background:#fff;
  border:1px solid #dce5fa;
  padding:17px;
  border-radius:12px
}
.why-list b{
  color:var(--primary);
  font-size:12px
}
.why-list span{
  display:flex;
  flex-direction:column
}
.why-list strong{font-size:13px}
.why-list small{
  color:var(--muted);
  font-size:11px
}

/* =========================
   ABOUT
========================= */
.about-grid{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:70px;
  align-items:center
}
.about-logo{
  background:#fafafa;
  border-radius:20px;
  padding:25px;
  text-align:center
}
.about-logo img{
  width:100%;
  max-width:280px
}

/* =========================
   TRAINING
========================= */
.training-section{
  padding:75px 0;
  background:linear-gradient(110deg,#101f50,#153e9c);
  color:#fff
}
.training-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:50px;
  align-items:center
}
.training-section .eyebrow{color:#a9c2ff}
.training-section h2{margin-top:8px}
.training-section p{
  color:#dce6ff;
  max-width:650px
}
.training-badges{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.training-badges span{
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  padding:18px;
  border-radius:11px;
  font-size:12px
}
/* =========================
   CONTACT SECTION
========================= */

.contact-section {
  padding: 80px 0;
  background: #ffffff;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* Contact Information */

.contact-info h2 {
  margin: 10px 0 12px;
  font-size: 34px;
  line-height: 1.2;
}

.contact-info > p {
  margin-bottom: 12px;
  color: #5d6b82;
  line-height: 1.6;
}

.contact-details strong {
  display: block;
  margin-top: 8px;
  margin-bottom: 3px;
  color: #16213e;
}

.contact-details p {
  margin: 0 0 6px;
  color: #5d6b82;
  line-height: 1.5;
}

.contact-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.contact-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


/* Our Location */

.contact-location h3 {
  margin: 10px 0 18px;
  font-size: 20px;
  color: #16213e;
}

.map-card {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e1e6ef;
  box-shadow: 0 8px 24px rgba(20, 35, 70, 0.08);
  background: #ffffff;
}

.map-card iframe {
  display: block;
  width: 100%;
  height: 210px;
  border: 0;
}


/* Quick Enquiry */

.enquiry-form {
  padding: 26px;
  background: #ffffff;
  border: 1px solid #e1e6ef;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(20, 35, 70, 0.08);
}

.enquiry-form h3 {
  margin: 0 0 22px;
  font-size: 20px;
  color: #16213e;
}

.enquiry-form label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #16213e;
}

.enquiry-form input,
.enquiry-form textarea {
  width: 100%;
  margin-top: 7px;
  padding: 12px 13px;
  border: 1px solid #d6deea;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.enquiry-form input:focus,
.enquiry-form textarea:focus {
  border-color: #315efb;
}

.enquiry-form textarea {
  resize: vertical;
  min-height: 100px;
}

.enquiry-form .btn {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.form-note {
  margin: 10px 0 0;
  font-size: 13px;
}


/* Tablet */

@media (max-width: 900px) {

  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .contact-info {
    grid-column: 1 / -1;
  }

  .contact-location,
  .enquiry-form {
    width: 100%;
  }
}


/* Mobile */

@media (max-width: 700px) {

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

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-info {
    grid-column: auto;
  }

  .contact-info h2 {
    font-size: 28px;
  }

  .map-card iframe {
    height: 210px;
  }

  .contact-actions {
    flex-wrap: wrap;
  }

  .enquiry-form {
    padding: 22px;
  }
}


/* Small Mobile */

@media (max-width: 430px) {

  .map-card iframe {
    height: 200px;
  }

  .contact-actions .btn {
    flex: 1;
    min-width: 120px;
  }
}

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-info {
    grid-column: auto;
  }

  .contact-info h2 {
    font-size: 28px;
  }

  .map-card iframe {
    height: 220px;
  }

  .contact-actions {
    flex-wrap: wrap;
  }
}
/* =========================
   COURSE DETAILS BUTTON
========================= */
.course-details-btn{
  background:#ff3b30;
  color:#ffffff;
  border:1px solid #ff3b30;
  margin-left:8px;
  box-shadow:0 6px 18px rgba(255,59,48,.25);
  transition:all .25s ease
}

.course-details-btn span{
  margin-left:8px;
  font-size:16px;
  line-height:1;
  transition:transform .25s ease
}

.course-details-btn:hover{
  background:#ffffff;
  color:#1647d8;
  border-color:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.18)
}

.course-details-btn:hover span{
  transform:translate(3px,-2px)
}

/* =========================
   FOOTER
========================= */
.site-footer{
  background:#09132d;
  color:#dbe4fa;
  padding-top:55px
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:50px;
  padding-bottom:40px
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:12px
}
.footer-brand img{
  width:55px;
  height:55px;
  object-fit:contain
}
.site-footer p{
  font-size:11px;
  color:#9eaccb;
  max-width:450px
}
.site-footer h4{
  font-size:13px;
  color:#fff
}
.site-footer a{
  display:block;
  font-size:11px;
  color:#aebbd5;
  margin:8px 0
}
.copyright{
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  padding:18px;
  font-size:10px;
  color:#8998b9
}

/* =========================
   TABLET
========================= */
@media(max-width:1000px){

  .main-nav{gap:12px}

  .brand{min-width:240px}

  .category-grid,
  .accessory-grid{
    grid-template-columns:repeat(3,1fr)
  }

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

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

  }

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

  .topbar-inner span:last-child{
    display:none
  }

  .header-inner{
    height:70px
  }

  .brand img{
    width:50px;
    height:50px
  }

  .brand-text strong{
    font-size:15px
  }

  .brand-text small{
    font-size:8px
  }

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

  .main-nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:70px;
    background:#fff;
    padding:15px 4%;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start
  }

  .main-nav.open{
    display:flex
  }

  .header-whatsapp{
    display:none
  }

  .hero-grid,
  .why-grid,
  .training-grid,
  .contact-grid,
  .about-grid{
    grid-template-columns:1fr;
    gap:35px
  }

  .hero-grid{
    padding:60px 0
  }

  .hero-card{
    min-height:320px
  }

  .hero h1{
    letter-spacing:-1.5px
  }

  .section{
    padding:65px 0
  }

  .section-heading h2,
  .why-section h2,
  .about-section h2,
  .training-section h2,
  .contact-section h2{
    font-size:29px
  }

  .category-grid,
  .accessory-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .split-heading{
    display:block
  }

  .text-link{
    display:inline-block;
    margin-top:15px
  }

  .product-grid,
  .service-grid{
    grid-template-columns:1fr
  }

  /* Contact mobile */
  .contact-section{
    padding:60px 0 70px
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:30px
  }

  .contact-details{
    padding:18px
  }

  .contact-map{
    padding:14px;
    margin-top:18px
  }

  .contact-map h3{
    font-size:17px
  }

  .contact-map iframe{
    height:220px
  }

  .enquiry-form{
    padding:22px
  }

  .course-details-btn{
    margin-left:0;
    margin-top:10px
  }

  .contact-actions{
    flex-wrap:wrap;
    margin:18px 0 22px
  }

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

  .footer-grid>div:first-child{
    grid-column:1/-1
  }
}

/* =========================
   SMALL MOBILE
========================= */
@media(max-width:430px){

  .category-grid,
  .accessory-grid{
    grid-template-columns:1fr 1fr
  }

  .hero-points{
    display:grid;
    gap:6px
  }

  .hero-actions{
    flex-direction:column
  }

  .hero-actions .btn{
    width:100%
  }

  .hero-card{
    padding:15px
  }

  .hero-device{
    width:280px
  }

  .contact-map iframe{
    height:205px
  }

  .contact-actions .btn{
    flex:1;
    min-width:120px
  }
}

/* =========================================
   CONTACT SECTION - 3 COLUMN PROFESSIONAL LAYOUT
   ========================================= */

.contact-section {
  padding: 80px 0;
}

.contact-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}

/* Left: Contact Information */
.contact-info {
  min-width: 0;
}

.contact-info h2 {
  margin-bottom: 12px;
}

.contact-info > p {
  margin-bottom: 12px;
}

.contact-details {
  margin-top: 10px;
}

.contact-details strong {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
}

.contact-details p {
  margin: 0 0 6px;
  line-height: 1.6;
}

/* Middle: Location */
.contact-location {
  min-width: 0;
}

.contact-location h3 {
  margin: 0 0 14px;
}

.map-card {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e1e6ef;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  background: #fff;
}

.map-card iframe {
  display: block;
  width: 100% !important;
  height: 260px !important;
  border: 0;
}

/* Right: Quick Enquiry */
.enquiry-form {
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 24px !important;
  border-radius: 14px;
  border: 1px solid #e1e6ef;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.enquiry-form h3 {
  margin-top: 0;
  margin-bottom: 22px;
}

.enquiry-form label {
  display: block;
  margin-bottom: 14px;
}

.enquiry-form input,
.enquiry-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.enquiry-form textarea {
  min-height: 100px;
  resize: vertical;
}

.enquiry-form button {
  width: 100%;
  margin-top: 4px;
}

/* Contact buttons */
.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1000px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .contact-info {
    grid-column: 1 / -1;
  }

  .contact-location {
    grid-column: 1;
  }

  .enquiry-form {
    grid-column: 2;
  }
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {
  .contact-section {
    padding: 55px 0;
  }

  .contact-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }

  .contact-info,
  .contact-location,
  .enquiry-form {
    width: 100% !important;
    grid-column: auto !important;
  }

  .map-card iframe {
    height: 240px !important;
  }

  .enquiry-form {
    padding: 20px !important;
  }
}

/* =========================================
   FINAL CONTACT SECTION DESIGN
   ========================================= */

.contact-section {
  padding: 55px 0 50px !important;
}

.contact-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) 320px minmax(340px, 1fr) !important;
  gap: 30px !important;
  align-items: start !important;
}

/* ---------- Contact Information ---------- */

.contact-info {
  min-width: 0;
}

.contact-info h2 {
  font-size: 30px;
  line-height: 1.2;
  margin-top: 8px;
  margin-bottom: 12px;
}

.contact-info > p {
  margin-bottom: 12px;
  line-height: 1.6;
}

.contact-details {
  margin-top: 8px;
}

.contact-details strong {
  display: block;
  margin-top: 9px;
  margin-bottom: 3px;
}

.contact-details p {
  margin: 0 0 5px;
  line-height: 1.55;
}

.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* ---------- Our Location ---------- */

.contact-location {
  min-width: 0;
}

.contact-location h3 {
  margin: 8px 0 14px;
  font-size: 20px;
}

.map-card {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #e1e6ef;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.map-card iframe {
  display: block;
  width: 100% !important;
  height: 255px !important;
  border: 0;
}

/* ---------- Quick Enquiry ---------- */

.enquiry-form {
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 26px 24px !important;
  border-radius: 14px;
  border: 1px solid #e1e6ef;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.enquiry-form h3 {
  margin: 0 0 20px;
  font-size: 21px;
}

.enquiry-form label {
  display: block;
  margin-bottom: 13px;
}

.enquiry-form input,
.enquiry-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.enquiry-form textarea {
  min-height: 100px;
  resize: vertical;
}

.enquiry-form button {
  width: 100%;
  margin-top: 3px;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1050px) {
  .contact-grid {
    grid-template-columns: 1fr 320px !important;
  }

  .contact-info {
    grid-column: 1 / -1;
  }

  .contact-location {
    grid-column: 1;
  }

  .enquiry-form {
    grid-column: 2;
  }
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {
  .contact-section {
    padding: 45px 0 40px !important;
  }

  .contact-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .contact-info,
  .contact-location,
  .enquiry-form {
    width: 100% !important;
    grid-column: auto !important;
  }

  .contact-info h2 {
    font-size: 27px;
  }

  .map-card iframe {
    height: 240px !important;
  }

  .enquiry-form {
    padding: 22px 20px !important;
  }
}

/* ===== Final Contact Section Refinement ===== */

.contact-section {
  padding-top: 55px;
  padding-bottom: 60px;
}

.contact-grid {
  align-items: start;
  gap: 42px;
}

/* Left Contact / Address */
.contact-info {
  padding-top: 5px;
}

.contact-info h2 {
  margin-bottom: 14px;
}

.contact-info p {
  line-height: 1.65;
}

.contact-info strong {
  display: inline-block;
  margin-top: 4px;
}

/* Center Map */
.contact-map {
  padding-top: 0;
}

.contact-map h3 {
  margin: 0 0 14px;
}

.contact-map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 12px;
  display: block;
}

/* Quick Enquiry */
.enquiry-form {
  margin-top: 0;
  padding: 28px 24px;
  border-radius: 14px;
}

.enquiry-form h3 {
  margin-top: 0;
  margin-bottom: 22px;
}

.enquiry-form input,
.enquiry-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.enquiry-form textarea {
  min-height: 105px;
}

/* Mobile */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-map {
    order: 2;
  }

  .enquiry-form {
    order: 3;
  }
}

/* =====================================================
   FINAL CONTACT SECTION
   ===================================================== */

.contact-section {
  padding: 55px 0 60px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.95fr;
  gap: 32px;
  align-items: start;
}


/* ---------- Contact Information ---------- */

.contact-info {
  min-width: 0;
}

.contact-info .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #2457e6;
  margin-bottom: 14px;
}

.contact-info h2 {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 14px;
}

.contact-intro {
  margin: 0 0 18px;
  line-height: 1.65;
}

.address-block {
  margin-bottom: 18px;
}

.address-block strong {
  display: block;
  margin-bottom: 7px;
  color: #111827;
}

.address-block p {
  margin: 0;
  line-height: 1.65;
}


/* ---------- Contact Details + Buttons ---------- */

.contact-actions-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-detail strong {
  font-size: 14px;
  color: #111827;
}

.contact-detail a {
  color: #526987;
  text-decoration: none;
  font-size: 15px;
}

.contact-detail a:hover {
  text-decoration: underline;
}

.contact-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}


/* ---------- Buttons ---------- */

.contact-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.btn-call {
  background: #ff3b35;
  color: #ffffff;
}

.btn-whatsapp {
  background: #129447;
  color: #ffffff;
}


/* ---------- Location ---------- */

.contact-map {
  min-width: 0;
}

.contact-map h3 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.3;
}

.map-card {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}

.map-card iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}


/* ---------- Quick Enquiry ---------- */

.enquiry-form {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 24px;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.enquiry-form h3 {
  margin: 0 0 22px;
  font-size: 21px;
  color: #17213b;
}

.enquiry-form label {
  display: block;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 700;
  color: #17213b;
}

.enquiry-form input,
.enquiry-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 7px;
  padding: 12px 13px;
  border: 1px solid #d4dce8;
  border-radius: 8px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.enquiry-form input {
  height: 44px;
}

.enquiry-form textarea {
  min-height: 100px;
  resize: vertical;
}

.enquiry-form input:focus,
.enquiry-form textarea:focus {
  border-color: #2457e6;
}

.enquiry-form .btn-primary {
  width: 100%;
  min-height: 44px;
  margin-top: 3px;
  border: 0;
  border-radius: 8px;
  background: #ff3b35;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.enquiry-form .form-note {
  margin: 8px 0 0;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 1050px) {

  .contact-grid {
    grid-template-columns: 1fr 0.9fr;
    gap: 28px;
  }

  .contact-info {
    grid-column: 1;
  }

  .contact-map {
    grid-column: 2;
    grid-row: 1;
  }

  .enquiry-form {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 700px;
  }

  .contact-actions-row {
    gap: 18px;
  }

  .contact-buttons {
    margin-left: 0;
  }
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 700px) {

  .contact-section {
    padding: 40px 0 50px;
  }

  .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .contact-info,
  .contact-map,
  .enquiry-form {
    width: 100%;
  }

  .contact-info h2 {
    font-size: 27px;
  }

  .contact-actions-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .contact-buttons {
    width: 100%;
    margin-left: 0;
  }

  .contact-buttons .btn {
    flex: 1;
  }

  .map-card iframe {
    height: 240px;
  }

  .enquiry-form {
    padding: 24px 20px;
  }
}