/* ================= GLOBAL ================= */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Roboto",sans-serif;background:#ffffff;overflow-x:hidden;color:#222}
a{color:inherit;text-decoration:none}

/* BRAND THEME VARS */
:root{
  --brand-color:#00b89c;
  --color-minaz:#c2185b;
  --color-blackmamba:#111111;
  --color-dhaatu:#b26a00;
  --color-imprints:#0066cc;
}

/* ================ HERO (PARALLAX CAROUSEL) ================ */
#hero{height:100vh;position:relative;overflow:hidden}
.carousel,.slide{position:absolute;left:0;top:0;right:0;bottom:0}
.slide{background-size:cover;background-position:center;background-attachment:fixed;opacity:0;transform:scale(1.12);transition:opacity 1.2s,transform 1.2s}
.slide.active{opacity:1;transform:scale(1)}
.nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.35);border:none;padding:6px 14px;border-radius:10px;cursor:pointer;font-size:34px;z-index:60}
.prev{left:18px}.next{right:18px}

/* Hero glass */
.hero-glass{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);padding:28px 36px;border-radius:22px;background:rgba(255,255,255,0.12);backdrop-filter:blur(10px);color:#fff;text-align:center;max-width:720px}
.hero-title{font-size:46px;font-weight:700;line-height:1.05}
.hero-sub{font-size:18px;margin:14px 0 18px;font-weight:300}
.hero-btn{background:var(--brand-color);color:#fff;border:none;padding:12px 28px;border-radius:30px;cursor:pointer;font-size:16px;transition:0.25s}
.hero-btn:hover{transform:translateY(-3px);background:#009f83}

/* ================ HEADER ================ */
#header{position:sticky;top:0;z-index:999;padding:14px 36px;background:transparent;transition:background .35s,box-shadow .35s;backdrop-filter:blur(4px)}
#header.scrolled{background:#fff;box-shadow:0 4px 24px rgba(0,0,0,0.12)}
.header-inner{display:flex;align-items:center;gap:24px;max-width:1400px;margin:0 auto}
.logo-img{height:48px}

/* NAV */
nav{margin-left:auto}
nav ul{display:flex;gap:22px;list-style:none;align-items:center}
nav ul li{cursor:pointer;font-weight:500}
nav ul li.active{color:var(--brand-color);font-weight:700}
nav ul li:hover{color: orange !important;}



/* Dropdown - click toggled */
.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;left:0;top:36px;background:#fff;border-radius:10px;padding:8px 0;box-shadow:0 8px 25px rgba(0,0,0,0.12);min-width:200px;z-index:60}
.dropdown.open .dropdown-menu{display:block}
.dropdown-menu li{padding:10px 16px;white-space:nowrap}
.dropdown-menu li:hover{background:#f6f6f6}

/* LANG SWITCH */
.lang-switch select{padding:7px 10px;border-radius:6px;border:1px solid #ddd;background:#fff}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;margin-left:12px}
.hamburger span{width:28px;height:3px;background:var(--brand-color);display:block;transition:0.28s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* MOBILE NAV */
@media (max-width: 768px){
  .hamburger{display:flex}
  nav{position:absolute;right:0;top:68px;width:100%;background:#fff;padding:18px;transform:translateY(-200%);opacity:0;transition:0.35s}
  nav.active{transform:translateY(0);opacity:1}
  nav ul{flex-direction:column;align-items:flex-start;gap:12px;padding:0 8px}
  nav ul li{font-size:16px}
}

/* ================ CONTENT / LAYOUT ================ */
#content-section{padding:150px 40px 100px;max-width:1200px;margin:0 auto}
#content{max-width:920px;margin:0 auto;line-height:1.75;font-size:18px;color:#1f2933}
#content h2{font-size:36px;margin-bottom:14px;color:var(--brand-color)}
#content h3{font-size:26px;margin-top:18px;margin-bottom:10px}
#content p{margin-bottom:16px}
.section-transition{animation:fadeSlide .55s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ================= BRAND LAYOUTS (grid to mimic screenshots) ================= */
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.brand-grid .brand-image{width:100%;border-radius:10px;object-fit:contain}
.tag-list{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.tag{background:#eef7fb;padding:10px 16px;border-radius:10px;color:#1f3b4a;font-weight:600;box-shadow:inset 0 -2px 0 rgba(0,0,0,0.03)}

/* center large brand image right (alternate layout handled in templates) */
.alt-image-right{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.alt-image-right .brand-image{width:100%;border-radius:10px;object-fit:contain}

/* CORE VALUES / CARDS */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}
.value-card{background:#fff;padding:30px;border-radius:14px;box-shadow:0 6px 26px rgba(14,22,35,0.03);text-align:center}
.value-card h4{margin-top:12px;margin-bottom:10px;color:#2b6cb0}

/* MOBILE FIX FOR CORE VALUES */
@media (max-width: 768px) {

  .values {
      grid-template-columns: 1fr; /* stack cards vertically */
      gap: 18px;
      margin-top: 20px;
  }

  .value-card {
      padding: 22px;
      border-radius: 12px;
  }

  .value-card h4 {
      font-size: 20px;
  }

  .value-card p {
      font-size: 15px;
      line-height: 1.55;
  }
}

/* EXTRA SMALL SCREENS (≤480px) */
@media (max-width: 480px) {

  .value-card {
      padding: 18px;
  }

  .value-card h4 {
      font-size: 18px;
  }

  .value-card p {
      font-size: 14px;
  }
}


/* BRAND CARD TILT */
.brand-card{background:#fff;padding:20px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,0.06);transition:0.25s;text-align:center}
.brand-card img{max-width:180px}

/* STATS */
#stats{display:flex;gap:30px;justify-content:center;background:transparent}
.stat h2{font-size:36px;color:var(--brand-color);text-align:center}

/* FLOATING ACTION BUTTONS */
.float-btn, .call {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    z-index: 9999;
}

/* WhatsApp button (RIGHT side) */
.float-btn {
    right: 20px;
    bottom: 80px;
    background: #25D366;
}

/* Call button (LEFT side) */
.call {
    left: 20px;        /* ← moved to LEFT */
    bottom: 80px;      /* aligned horizontally */
    background: #007aff;
}

.float-btn img, .call img {
    width: 32px;
}


/* FOOTER */
footer{position:fixed;left:0;right:0;bottom:0;background:var(--brand-color);color:#fff;padding:14px;text-align:center;z-index:50}

/* RESPONSIVE */
@media (max-width: 992px){
  .brand-grid,.alt-image-right{grid-template-columns:1fr}
  #content h2{font-size:32px}
  #content{font-size:17px}
}
@media (max-width: 768px){
  #content-section{padding:120px 18px 220px}
  #content h2{font-size:26px}
  .hero-title{font-size:28px}
  .hero-glass{padding:20px}
}
/* =========================
   CONTACT PAGE STYLING
   ========================= */
#contact-section{padding:50px 20px 100px;max-width:1200px;margin:0 auto}

 /* Contact Section Equal Height Layout */
.contact-modern-wrapper {
  display: flex;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  min-height: 480px;
}

/* LEFT PANEL */
.contact-left-panel {
  flex: 1;
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Full-height Image */
.contact-bg-img {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.contact-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* Ensures full screen fit */
  object-position: center; /* Best crop handling */
  filter: brightness(0.62);
}

/* Text on Image */
.contact-left-title {
  position: absolute;
  top: 24px;
  left: 28px;
  font-size: 32px;
  font-weight: 700;
  color: white;
  z-index: 10;
}

/* Floating Info Card */
.contact-info-box {
  position: relative;
  z-index: 10;
  background: #fff;
  padding: 28px;
  width: calc(100% - 50px);
  margin: 0 auto 25px auto;
  border-radius: 18px;
}
.contact-info-box .info-item {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  color: #333;
  font-size: 15px;
}

.contact-info-box .info-item:last-child {
  margin-bottom: 0;
}

.contact-info-box i {
  font-size: 20px;
  color: #0EA2BD;
  margin-right: 12px;
}
/* Right Panel */
.contact-form-panel {
  flex: 1;
  padding: 50px 45px;
  background: #f9fafc;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Inputs */
.contact-form-panel .form-control {
  padding: 14px 20px;
  border: 1px solid #ddd;
  background: #fff;
  transition: 0.3s;
}

/* Equal height fix for mobile */
/* Equal height fix + responsive image for mobile */
@media (max-width: 992px) {

  .contact-modern-wrapper {
    flex-direction: column;
  }

  .contact-left-panel {
    height: auto;
    min-height: 300px;
  }

  .contact-bg-img {
    position: relative;    /* Instead of absolute */
    height: 260px;          /* Auto-resize height */
  }

  .contact-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* Maintain quality crop */
    object-position: center;
  }

  .contact-info-box {
    margin: -40px auto 20px auto;  /* Lift card upward beautifully */
    width: 90%;                    /* Better fit on mobile */
  }

  .contact-form-panel {
    padding: 30px 25px;            /* Better spacing on mobile */
  }
}


/* Equal height contact panels */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;   /* makes both columns equal height */
    gap: 40px;
    max-width:1200px;
    margin:0 auto
}

/* Ensure left and right panels fill the same height */
.contact-left,
.contact-right {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contact-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

/* Force left image container to match panel height */
.contact-left {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.contact-right {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* Floating white info card — stays inside equal height panel */
.contact-info-card {
    background: white;
    padding: 22px 26px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

/* =======================
   MAP full width section
   ======================= */
.contact-map-wrapper {
    padding: 50px 20px 100px;
    margin-top: 40px;
    width: 100%;
    margin:0 auto
}

.contact-map-wrapper iframe {
    width: 100%;
    height: 380px;
    border: 0;
    border-radius: 14px;
}

/* Mobile responsive fix */
@media (max-width: 900px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    .contact-right, .contact-left {
        height: auto;
    }
    .contact-img {
        height: auto;
    }
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px 20px;
  border:1px solid #e2e2e2;
  border-radius:14px;
  font-size:16px;
  background:#fafafa;
}

.pref-label{
  margin-top:5px;
  font-size:15px;
  color:#444;
}

.pref-row{
  display:flex;
  gap:30px;
  margin-top:-6px;
  margin-bottom:10px;
}

.send-btn{
  width:120px;
  padding:12px 22px;
  background:#4b7bd9;
  color:white;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-size:17px;
  transition:0.25s;
}

.send-btn:hover{
  background:#3a63b2;
}

/* Responsive */
@media(max-width:900px){
  .contact-wrapper{
    grid-template-columns:1fr;
  }
  .contact-right{
    margin-top:20px;
  }
}
/* ===========================================
   🚀 MOBILE-OPTIMIZED CONTACT LAYOUT
   =========================================== */
@media (max-width: 900px) {

    /* 1️⃣ Stack columns vertically */
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        width: 100%;
    }

    /* 2️⃣ Left image panel auto-height & cleaner layout */
    .contact-left {
        height: auto !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .contact-img {
        height: auto !important;
        max-height: 330px !important;
        width: 100%;
        object-fit: cover;
        border-radius: 14px;
    }

    /* 3️⃣ Info card becomes compact and readable */
    .contact-info-card {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 18px;
        padding: 18px 20px !important;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        font-size: 15px;
    }

    .ci-icon {
        font-size: 18px !important;
        margin-right: 8px;
    }

    /* 4️⃣ Right form panel scaling */
    .contact-right {
        padding: 26px 20px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 28px rgba(0,0,0,0.07) !important;
        width: 100% !important;
    }

    .contact-right h3 {
        font-size: 22px !important;
        text-align: left;
        margin-bottom: 16px;
    }

    /* 5️⃣ Inputs scale nicely */
    .contact-form input,
    .contact-form textarea {
        padding: 12px 14px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }

    .pref-label {
        font-size: 14px !important;
        margin-top: 4px;
    }

    .pref-row {
        gap: 20px !important;
        margin-bottom: 8px;
    }

    .send-btn {
        width: 100% !important;
        padding: 12px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        margin-top: 5px;
    }

    /* 6️⃣ Map Section Responsive */
    .contact-map-wrapper iframe {
        height: 300px !important;
        border-radius: 14px !important;
    }
}

/* EXTRA-SMALL DEVICES (Mobile ≤ 480px) */
@media (max-width: 480px) {

    .contact-img {
        max-height: 260px !important;
    }

    .contact-info-card {
        font-size: 14px !important;
        padding: 16px !important;
    }

    .contact-right {
        padding: 22px 18px !important;
    }

    .send-btn {
        font-size: 15px !important;
    }
}

/* ===========================================
   MOBILE HEADER FIX — ENSURES FULL-WIDTH + PROPER ALIGNMENT
   =========================================== */
@media (max-width: 600px) {

    header {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        padding: 10px 18px !important;
        box-sizing: border-box !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background: #ffffffee; /* slightly transparent white */
        backdrop-filter: blur(12px);
        z-index: 9999;
    }

    /* Logo */
    header .logo-img {
        width: 160px !important;
        height: auto;
    }

    /* Hamburger */
    .hamburger {
        margin-left: 5px;
        margin-right: 10px;
    }

    /* Language dropdown */
    header .lang-switch select {
        font-size: 14px;
        padding: 6px 8px;
    }

    /* NAV DROPDOWN full width on mobile */
    nav {
        position: absolute;
        top: 65px;
        left: 0;
        right: 0;
        background: white;
        padding: 20px;
        border-radius: 0 0 14px 14px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        display: none;
    }

    nav.active {
        display: block;
    }
}
.about-feature-list {
  list-style: none;
  padding: 0;
  margin: 25px 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 22px;
}

.about-feature-list li {
  font-size: 17px;
  display: flex;
  align-items: center;
  color: #1f2933;
  font-weight: 500;
}

.af-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  background: var(--brand-color);
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  margin-right: 10px;
}
/* ABOUT SECTION IMPROVED UI */

.about-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.about-header {
  text-align: center;
  margin-bottom: 30px;
}

.about-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: var(--brand-color);
}

.underline {
  width: 90px;
  height: 4px;
  background: var(--brand-color);
  margin: 12px auto;
  border-radius: 4px;
}

.subline {
  color: #444;
  font-size: 18px;
  margin-top: 8px;
}

.about-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}

.about-img-col {
  width: 100%;
}

.about-img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

.about-text-col p,
.about-para {
  font-size: 17px;
  line-height: 1.75;
  color: #1f2933;
  margin-bottom: 18px;
}

/* Pillar Cards */
.pillar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

.pillar-card {
  background: #eef7fb;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  color: #1f3b4a;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
  transition: 0.25s ease;
}

.pillar-card:hover {
  background: var(--brand-color);
  color: #fff;
  transform: translateY(-3px);
}

/* Responsive */
@media(max-width: 768px){
  .about-row {
    grid-template-columns: 1fr;
  }

  .about-header h2 {
    font-size: 28px;
  }
}
/* ================= HOME UI IMPROVED ================= */

.home-intro {
  max-width: 950px;
  margin: 0 auto;
}

.home-title {
  font-size: 38px;
  color: var(--brand-color);
  font-weight: 700;
  text-align: center;
}

.home-underline {
  width: 90px;
  height: 4px;
  background: var(--brand-color);
  margin: 12px auto 16px;
  border-radius: 4px;
}

.home-sub {
  text-align: center;
  font-size: 18px;
  margin-bottom: 22px;
  color: #444;
}

.home-highlight {
  background: #ffffff;
  padding: 24px 28px;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.06);
  line-height: 1.75;
  margin-bottom: 24px;
  border-left: 5px solid var(--brand-color);
}

.home-text {
  font-size: 17px;
  color: #1f2933;
  margin-bottom: 20px;
  line-height: 1.75;
}

/* Core Values Title */
.core-title {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--brand-color);
  text-align: center;
}

/* Value Cards Updated */
.value-card {
  background: #fff;
  padding: 30px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 6px 26px rgba(14,22,35,0.06);
}

.value-icon {
  font-size: 24px;
  color: var(--brand-color);
  margin-bottom: 6px;
}