/* =============================================
   MIRPUR PROPERTY CONSULTANT — PREMIUM CSS
   ============================================= */

/* ---- CSS VARIABLES ---- */
:root {
  --navy:    #0A1F5C;
  --navy-d:  #071542;
  --blue:    #1A56DB;
  --sky:     #0EA5E9;
  --cyan:    #38BDF8;
  --wa:      #25D366;
  --wa-d:    #1EAA52;
  --white:   #FFFFFF;
  --off-w:   #F8FAFF;
  --gray-50: #F9FAFB;
  --gray-100:#F3F4F6;
  --gray-200:#E5E7EB;
  --gray-400:#9CA3AF;
  --gray-600:#4B5563;
  --gray-800:#1F2937;
  --text:    #1E2D4A;
  --text-light:#6B7280;
  --radius:  12px;
  --radius-lg:20px;
  --shadow:  0 4px 24px rgba(10,31,92,0.08);
  --shadow-md:0 8px 40px rgba(10,31,92,0.12);
  --shadow-lg:0 20px 60px rgba(10,31,92,0.16);
  --transition: 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-x: hidden;
}

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  padding: 0;
  margin: 0;
 
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 96px 0; }

h1,h2,h3,h4 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.2;
  color: var(--navy);
}

h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }

.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header p {
  color: var(--text-light);
  max-width: 520px;
  margin: 12px auto 0;
  font-size: 1rem;
}

.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(26,86,219,0.08);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 12px;
}

.mt-2 { margin-top: 24px; }
.w-full { width: 100%; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 24px;
  border-radius: 50px;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(26,86,219,0.3);
}
.btn-primary:hover {
  background: var(--navy-d);
  box-shadow: 0 8px 32px rgba(26,86,219,0.4);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--blue);
  padding: 12px 0;
  font-weight: 600;
}
.btn-ghost:hover { color: var(--navy); }

.btn-wa-hero {
  background: var(--wa);
  color: var(--white);
  font-size: 1rem;
  padding: 16px 32px;
  border-radius: 50px;
  box-shadow: 0 6px 30px rgba(37,211,102,0.4);
  font-weight: 700;
}
.btn-wa-hero:hover {
  background: var(--wa-d);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(37,211,102,0.5);
}

.btn-call-hero {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  font-size: 1rem;
  padding: 16px 32px;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,0.5);
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.btn-call-hero:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-3px);
  border-color: white;
}

.btn-wa-lg {
  background: var(--wa);
  color: var(--white);
  font-size: 1.05rem;
  padding: 18px 36px;
  border-radius: 50px;
  box-shadow: 0 6px 30px rgba(37,211,102,0.35);
  font-weight: 700;
}
.btn-wa-lg:hover {
  background: var(--wa-d);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(37,211,102,0.45);
}

.btn-call-lg {
  background: var(--white);
  color: var(--navy);
  font-size: 1.05rem;
  padding: 18px 36px;
  border-radius: 50px;
  font-weight: 700;
  border: 2px solid var(--gray-200);
  box-shadow: var(--shadow);
}
.btn-call-lg:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  transform: translateY(-3px);
}

.btn-wa-sm {
  background: var(--wa);
  color: white;
  padding: 8px 18px;
  font-size: 0.8rem;
  border-radius: 50px;
}
.btn-call-sm {
  background: transparent;
  color: white;
  padding: 8px 18px;
  font-size: 0.8rem;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.35);
}

.btn-lg { font-size: 1rem; padding: 16px 36px; }

/* =============================================
   FLOATING BUTTONS
   ============================================= */
.floating-btns {
  position: fixed;
  bottom: 32px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.float-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 14px 16px;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  white-space: nowrap;
  position: relative;
}

.float-btn i {
  font-size: 1.1rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-btn.whatsapp {
  background: var(--wa);
  color: var(--white);
}
.float-btn.whatsapp:hover {
  background: var(--wa-d);
  transform: translateX(-6px) scale(1.04);
  box-shadow: 0 12px 40px rgba(37,211,102,0.45);
}

.float-btn.call {
  background: var(--navy);
  color: var(--white);
}
.float-btn.call:hover {
  background: var(--navy-d);
  transform: translateX(-6px) scale(1.04);
  box-shadow: 0 12px 40px rgba(10,31,92,0.35);
}

.float-btn.whatsapp::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50px;
  border: 3px solid var(--wa);
  opacity: 0;
  animation: pulse-ring 2.5s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* =============================================
   HEADER
   ============================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 20px 0;
  transition: all var(--transition);
  background: transparent;
}

.header.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  padding: 12px 0;
  box-shadow: 0 4px 30px rgba(10,31,92,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo img {
  height: 54px;
  transition: all var(--transition);
  filter: brightness(0) invert(1);
  margin-left: -30px;
}
.header.scrolled .logo img { filter: none; }

/* ---- DESKTOP NAV ---- */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav > a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.9);
  padding: 8px 14px;
  border-radius: 8px;
  transition: all var(--transition);
  display: block;
}
.nav > a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.12);
}
.header.scrolled .nav > a { color: var(--gray-600); }
.header.scrolled .nav > a:hover { color: var(--navy); background: var(--gray-50); }

/* ---- DESKTOP HEADER CTA ---- */
.header-cta {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.header-cta .btn-primary { padding: 10px 20px; font-size: 0.82rem; }
.header-cta .btn-outline {
  padding: 10px 20px;
  font-size: 0.82rem;
  border-color: rgba(255,255,255,0.6);
  color: white;
}
.header.scrolled .header-cta .btn-outline { border-color: var(--navy); color: var(--navy); }
.header.scrolled .header-cta .btn-outline:hover { background: var(--navy); color: white; }

/* ---- NAV-ITEM + DESKTOP DROPDOWN ---- */
.nav-item {
  position: relative;
}

.nav-item > a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.9);
  padding: 8px 14px;
  border-radius: 8px;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.nav-item > a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.12);
}
.header.scrolled .nav-item > a { color: var(--gray-600); }
.header.scrolled .nav-item > a:hover { color: var(--navy); background: var(--gray-50); }

.nav-item > a::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.65rem;
  transition: transform var(--transition);
}
.nav-item:hover > a::after { transform: rotate(-180deg); }

/* Desktop dropdown — hover only */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(10px);
  background: white;
  border-radius: var(--radius);
  padding: 8px;
  min-width: 220px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 999;
}
.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--gray-600) !important;
  font-weight: 500;
  background: transparent !important;
  width: 100%;
}

.dropdown a i { color: var(--blue); width: 16px; font-size: 0.85rem; }
.dropdown a:hover { color: var(--navy) !important; background: var(--off-w) !important; }

/* ---- HAMBURGER — hidden on desktop ---- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
  z-index: 1100;
  position: relative;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.header.scrolled .hamburger span,
body.inner-page .header .hamburger span { background: var(--navy); }

/* Hamburger → X animation */
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ---- NAV BACKDROP ---- */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7,21,66,0.55);
  z-index: 998;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nav-backdrop.visible { opacity: 1; }

/* ---- INNER PAGE ---- */
body.inner-page .header {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  padding: 12px 0;
  box-shadow: 0 4px 30px rgba(10,31,92,0.08);
}
body.inner-page .header .logo img { filter: none; }
body.inner-page .header .nav > a { color: var(--gray-600); }
body.inner-page .header .nav > a:hover { color: var(--navy); background: var(--gray-50); }
body.inner-page .header .nav-item > a { color: var(--gray-600); }
body.inner-page .header .nav-item > a:hover { color: var(--navy); background: var(--gray-50); }
body.inner-page .header .header-cta .btn-outline { border-color: var(--navy); color: var(--navy); }
body.inner-page .header .header-cta .btn-outline:hover { background: var(--navy); color: white; }

/* =============================================
   HERO SLIDER
   ============================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
}

.slider { position: relative; width: 100%; height: 100%; }

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  align-items: center;
}
.slide.active { opacity: 1; z-index: 2; }

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(7,21,66,0.82) 0%,rgba(10,31,92,0.55) 60%,rgba(14,165,233,0.25) 100%);
}

.slide-content {
  position: relative;
  z-index: 3;
  max-width: 700px;
  padding: 0 60px;
  color: white;
}

.slide-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 6px 18px;
  border-radius: 50px;
  color: var(--cyan);
  backdrop-filter: blur(6px);
  margin-bottom: 20px;
}

.slide-content h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 4vw, 4rem);
  font-weight: 900;
  color: white;
  line-height: 1.1;
  margin-bottom: 18px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.slide-content h1 em { font-style: normal; color: var(--cyan); }
.slide-content p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 36px;
  max-width: 500px;
  line-height: 1.7;
}

.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

.slide.active .animate-tag  { animation: fadeDown 0.7s 0.1s both; }
.slide.active .animate-title { animation: fadeUp 0.8s 0.25s both; }
.slide.active .animate-sub  { animation: fadeUp 0.8s 0.4s both; }
.slide.active .animate-btns { animation: fadeUp 0.8s 0.55s both; }

@keyframes fadeUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

.slider-prev, .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: white;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  backdrop-filter: blur(6px);
}
.slider-prev { left: 28px; }
.slider-next { right: 28px; }
.slider-prev:hover, .slider-next:hover {
  background: white;
  color: var(--navy);
  border-color: white;
  transform: translateY(-50%) scale(1.08);
}

.slider-dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.slider-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.slider-dot.active { background: white; width: 28px; border-radius: 5px; }

.scroll-hint {
  position: absolute;
  bottom: 40px; right: 48px;
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 10;
  animation: bounce 2s infinite;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* =============================================
   TRUST STRIP
   ============================================= */
.trust-strip { background: var(--white); box-shadow: var(--shadow-md); position: relative; z-index: 5; }
.trust-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; }
.trust-item {
  display: flex; align-items: center; gap: 16px;
  padding: 28px 20px;
  border-right: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.trust-item:last-child { border-right: none; }
.trust-item:hover {
  background: linear-gradient(135deg, #25D366, #128C7E);
}
.trust-item i { font-size: 2rem; color: var(--blue); flex-shrink: 0; }
.trust-item strong { display: block; font-family: 'Montserrat',sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--navy); line-height: 1; }
.trust-item span { font-size: 0.78rem; color: var(--text-light); margin-top: 3px; }

/* =============================================
   ABOUT SECTION
   ============================================= */
.about { background: var(--off-w); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about-img-wrap { position: relative; border-radius: var(--radius-lg); overflow: visible; }
.about-img-wrap img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; object-fit: cover; }
.exp-badge {
  position: absolute; bottom: -24px; right: -24px;
  background: var(--navy); color: white;
  padding: 20px 24px; border-radius: var(--radius);
  text-align: center; box-shadow: var(--shadow-md);
}
.exp-badge span { display: block; font-family:'Montserrat',sans-serif; font-size: 2.5rem; font-weight: 900; line-height: 1; color: var(--cyan); }
.exp-badge small { font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.8); margin-top: 4px; display: block; }
.about-content { padding-left: 16px; }
.about-content h2 { margin: 12px 0 20px; font-size: clamp(1.8rem,2.5vw,2.3rem); }
.about-content h2 strong { color: var(--blue); }
.about-content .lead { font-size: 1.05rem; color: var(--text); font-weight: 500; margin-bottom: 16px; }
.about-content p { color: var(--text-light); margin-bottom: 24px; }
.about-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.about-list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--gray-600); }
.about-list li i { color: var(--wa); font-size: 0.95rem; flex-shrink: 0; }
.about-btns { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* =============================================
   SERVICES SECTION
   ============================================= */
.services { background: var(--white); }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.service-card {
  background: var(--off-w); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 36px 28px;
  transition: all var(--transition); cursor: default;
  text-align: center;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: transparent; background: white; }
.service-card:hover .service-icon { background: var(--blue); color: white; }
.service-icon {
  width: 60px; height: 60px;
  background: rgba(26,86,219,0.1); color: var(--blue);
  border-radius: 16px;
  margin-left: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 20px;
  transition: all var(--transition);
}
.service-card h3 { margin-bottom: 10px; font-size: 1.05rem; }
.service-card p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 20px; }
.service-link {
  font-size: 0.85rem; font-weight: 600; color: var(--blue);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--transition);
}
.service-link:hover { gap: 10px; }

/* =============================================
   PROJECTS SECTION
   ============================================= */
.projects { background: var(--off-w); }
.projects-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-bottom: 48px; }
.project-card { background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all var(--transition); }
.project-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.project-img { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.project-card:hover .project-img img { transform: scale(1.08); }
.project-badge { position: absolute; top: 14px; left: 14px; background: var(--blue); color: white; font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; letter-spacing: 0.05em; text-transform: uppercase; }
.project-badge.hot { background: #EF4444; }
.project-badge.off-plan { background: var(--navy); }
.project-overlay { position: absolute; inset: 0; background: rgba(7,21,66,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all var(--transition); }
.project-card:hover .project-overlay { opacity: 1; }
.project-info { padding: 22px; }
.project-type { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.project-info h3 { font-size: 1.05rem; margin-bottom: 8px; }
.project-loc { font-size: 0.83rem; color: var(--text-light); display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
.project-loc i { color: var(--blue); font-size: 0.75rem; }
.project-price { font-size: 0.85rem; color: var(--text-light); margin-bottom: 12px; }
.project-price strong { color: var(--navy); font-size: 1rem; font-weight: 800; font-family: 'Montserrat',sans-serif; }
.project-meta { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.project-meta span { font-size: 0.78rem; color: var(--text-light); display: flex; align-items: center; gap: 5px; }
.project-meta i { color: var(--blue); font-size: 0.72rem; }
.projects-cta { text-align: center; }

/* =============================================
   WHY CHOOSE US
   ============================================= */
.why-us { background: white; overflow: hidden; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.why-content h2 { margin: 0 0 16px; font-size: clamp(1.8rem,2.5vw,2.3rem); }
.why-content h2 strong { color: var(--blue); }
.why-content > p { color: var(--text-light); margin-bottom: 32px; }
.why-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.why-list li { display: flex; align-items: flex-start; gap: 14px; }
.why-list li > i { width: 28px; height: 28px; background: rgba(37,211,102,0.1); color: var(--wa); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; margin-top: 2px; }
.why-list li div strong { display: block; font-size: 0.95rem; color: var(--navy); font-weight: 700; margin-bottom: 2px; }
.why-list li div span { font-size: 0.85rem; color: var(--text-light); }
.why-img-stack { position: relative; padding-bottom: 60px; }
.img-main { width: 85%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 4/5; object-fit: cover; }
.img-secondary { position: absolute; bottom: 0; right: 0; width: 55%; border-radius: var(--radius-lg); border: 4px solid white; box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; }
.why-stat-card { position: absolute; top: 48px; right: -20px; background: var(--navy); color: white; padding: 18px 22px; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow-md); min-width: 180px; }
.why-stat-card i { font-size: 1.5rem; color: var(--cyan); margin-bottom: 8px; display: block; }
.why-stat-card strong { display: block; font-family:'Montserrat',sans-serif; font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.why-stat-card span { font-size: 0.75rem; color: rgba(255,255,255,0.7); }

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonials { background: var(--off-w); }
.testimonials-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.testi-card { background: white; border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow); border: 1px solid var(--gray-100); transition: all var(--transition); }
.testi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.testi-stars { color: #FBBF24; font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 16px; }
.testi-card > p { color: var(--text-light); font-size: 0.93rem; line-height: 1.8; margin-bottom: 24px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar { width: 44px; height: 44px; background: linear-gradient(135deg,var(--blue),var(--navy)); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family:'Montserrat',sans-serif; font-weight: 800; font-size: 0.8rem; flex-shrink: 0; }
.testi-author strong { display: block; font-size: 0.92rem; color: var(--navy); }
.testi-author span { font-size: 0.78rem; color: var(--text-light); }
.testi-avatar-wrap { flex-shrink: 0; position: relative; }
.testi-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid rgba(255,255,255,0.9); box-shadow: 0 2px 8px rgba(10,31,92,0.15),0 0 0 2px rgba(26,86,219,0.12); transition: transform 0.3s ease,box-shadow 0.3s ease; }
.testi-card:hover .testi-photo { transform: scale(1.06); box-shadow: 0 4px 16px rgba(10,31,92,0.2),0 0 0 3px rgba(26,86,219,0.2); }

/* =============================================
   CTA SECTION
   ============================================= */
.cta-section { background: linear-gradient(135deg,var(--navy) 0%,#1a3a8f 50%,#0e5f9e 100%); position: relative; overflow: hidden; }
.cta-section::before { content:''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.cta-inner { position: relative; z-index: 2; text-align: center; padding: 20px 0; }
.cta-content .section-tag { background: rgba(255,255,255,0.12); color: var(--cyan); }
.cta-content h2 { color: white; margin: 16px 0; font-size: clamp(1.9rem,3vw,2.7rem); }
.cta-content h2 strong { color: var(--cyan); }
.cta-content p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto 40px; font-size: 1.05rem; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =============================================
   CONTACT SECTION
   ============================================= */
.contact { background: white; }
.contact-grid { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 0; }
.contact-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gray-100); }
.contact-card:last-of-type { border-bottom: none; }
.contact-card i { font-size: 1.2rem; color: var(--blue); width: 44px; height: 44px; background: rgba(26,86,219,0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-card i.fab.fa-whatsapp { color: var(--wa); background: rgba(37,211,102,0.1); }
.contact-card strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.contact-card a, .contact-card span { font-size: 0.9rem; color: var(--text-light); transition: color var(--transition); }
.contact-card a:hover { color: var(--blue); }
.contact-wa-cta { margin-top: 24px; }
.contact-form { background: var(--off-w); border-radius: var(--radius-lg); padding: 36px; border: 1px solid var(--gray-200); }
.contact-form h3 { font-size: 1.25rem; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--blue); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: var(--gray-600); letter-spacing: 0.03em; }
.form-group input, .form-group select, .form-group textarea { padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: 10px; font-family:'Poppins',sans-serif; font-size: 0.88rem; color: var(--text); background: white; transition: border-color var(--transition),box-shadow var(--transition); outline: none; resize: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,86,219,0.08); }

/* =============================================
   FOOTER
   ============================================= */
.footer { background: var(--navy-d); color: rgba(255,255,255,0.75); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding: 64px 0 48px; }
.footer-logo { height: 50%;width: 50%; margin-bottom: 16px;border-radius: 20px; }
.footer-brand p { font-size: 0.88rem; line-height: 1.7; margin-bottom: 24px; max-width: 280px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 38px; height: 38px; background: rgba(255,255,255,0.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: rgba(255,255,255,0.7); transition: all var(--transition); }
.footer-social a:hover { background: var(--blue); color: white; transform: translateY(-2px); }
.footer-col h4 { font-family:'Montserrat',sans-serif; font-size: 0.88rem; font-weight: 700; color: white; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a, .footer-col ul li span { font-size: 0.85rem; color: rgba(255,255,255,0.6); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--cyan); }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact-list li i { color: var(--cyan); margin-top: 3px; flex-shrink: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.82rem; color: rgba(255,255,255,0.4); }
.footer-bottom-btns { display: flex; gap: 10px; }

/* =============================================
   SCROLL REVEAL
   ============================================= */
.reveal, .reveal-right { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease,transform 0.7s ease; }
.reveal-right { transform: translateX(40px); }
.reveal.visible, .reveal-right.visible { opacity: 1; transform: none; }

.trust-item:nth-child(1){transition-delay:0.05s} .trust-item:nth-child(2){transition-delay:0.1s} .trust-item:nth-child(3){transition-delay:0.15s} .trust-item:nth-child(4){transition-delay:0.2s} .trust-item:nth-child(5){transition-delay:0.25s}
.service-card:nth-child(1){transition-delay:0.05s} .service-card:nth-child(2){transition-delay:0.1s} .service-card:nth-child(3){transition-delay:0.15s} .service-card:nth-child(4){transition-delay:0.2s} .service-card:nth-child(5){transition-delay:0.25s} .service-card:nth-child(6){transition-delay:0.3s}
.project-card:nth-child(1){transition-delay:0.05s} .project-card:nth-child(2){transition-delay:0.1s} .project-card:nth-child(3){transition-delay:0.15s} .project-card:nth-child(4){transition-delay:0.2s} .project-card:nth-child(5){transition-delay:0.25s} .project-card:nth-child(6){transition-delay:0.3s}
.testi-card:nth-child(1){transition-delay:0.05s} .testi-card:nth-child(2){transition-delay:0.1s} .testi-card:nth-child(3){transition-delay:0.15s} .testi-card:nth-child(4){transition-delay:0.2s}
.why-list li:nth-child(1){transition-delay:0.05s} .why-list li:nth-child(2){transition-delay:0.1s} .why-list li:nth-child(3){transition-delay:0.15s} .why-list li:nth-child(4){transition-delay:0.2s} .why-list li:nth-child(5){transition-delay:0.25s} .why-list li:nth-child(6){transition-delay:0.3s}

/* =============================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ============================================= */
@media (max-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(3,1fr); }
  .trust-item:nth-child(4) { border-top: 1px solid var(--gray-100); }
  .trust-item:nth-child(3) { border-right: none; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-img { order: -1; max-width: 480px; margin: 0 auto; }
  .about-content { padding-left: 0; }
  .exp-badge { bottom: -16px; right: 16px; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .projects-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .why-visual { order: -1; max-width: 480px; margin: 0 auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .logo img {
    height: 54px;
    transition: all var(--transition);
    filter: brightness(0) invert(1);
    margin-left: 0px; 
}
}

/* =============================================
   MOBILE NAV — max-width: 992px
   ============================================= */
@media (max-width: 992px) {

  /* Show hamburger */
  .hamburger { display: flex; }

  /* Hide desktop CTA */
  .header-cta { display: none; }

  /* Show backdrop element */
  

  /* Nav panel slides in from right */
  .nav {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--navy);
    padding: 80px 16px 40px;
    margin-left: 0;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.3);
  }

  .nav.open { right: 0; }

  /* All direct links */
  .nav > a {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.88) !important;
    padding: 12px 16px;
    width: 100%;
    border-radius: 8px;
    font-weight: 500;
    display: block;
    background: transparent;
  }
  .nav > a:hover { background: rgba(255,255,255,0.1) !important; color: white !important; }

  /* Nav-item (Services parent) */
 .nav-item{
  width:100%;
  position:relative;
}

/* Main service button */
.nav-item > a{
  font-size:0.95rem;
  color:rgba(255,255,255,0.88) !important;
  padding:12px 16px;
  width:100%;
  border-radius:8px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
}

.nav-item > a:hover{
  background:rgba(255,255,255,0.1) !important;
  color:#fff !important;
}

/* Arrow */
.nav-item > a::after{
  content:"▼";
  font-size:10px;
  transition:0.3s;
}

.nav-item.open > a::after{
  transform:rotate(180deg);
}

/* Mobile dropdown hidden first */
.dropdown{
  display:none;
  position:relative;
  background:rgba(255,255,255,0.07);
  border-radius:10px;
  padding:6px 8px;
  margin-top:6px;
}

/* OPEN */
.nav-item.open .dropdown{
  display:block !important;
}

/* Dropdown links */
.dropdown a{
  display:block;
  padding:10px 14px;
  color:#fff !important;
  border-radius:8px;
  font-size:0.88rem;
}

.dropdown a:hover{
  background:rgba(255,255,255,0.1);
}

  /* Mobile dropdown */
  .dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    top: 100%;
    display: none;
    background: rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 6px 8px;
    margin: 4px 0 6px 8px;
    width: calc(100% - 8px);
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.08);
    min-width: unset;
    z-index: auto;
  }
  /* .nav-item.open .dropdown { 
    display: none;
  top: 100%; } */

  .dropdown a {
    color: rgba(255,255,255,0.82) !important;
    font-size: 0.88rem !important;
    padding: 10px 14px !important;
    background: transparent !important;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    
  }
  .dropdown a::after { display: none !important; }
  .dropdown a i { color: var(--cyan); }
  .dropdown a:hover { background: rgba(255,255,255,0.1) !important; color: white !important; }
}

/* =============================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================= */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .slide-content { padding: 0 28px; }
  .slide-content h1 { font-size: 2rem; }
  .slide-content p { font-size: 0.92rem; }
  .hero-btns {
     /* flex-direction: column;  */
    gap: 12px; 
  display: inline-table;}
  .btn-wa-hero, .btn-call-hero { width: 50%; text-align: center; padding: 14px 24px; }
  .slider-prev { left: 12px; }
  .slider-next { right: 12px; }
  .scroll-hint { display: none; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .trust-item:nth-child(3) { border-right: 1px solid var(--gray-100); }
  .trust-item:nth-child(5) { grid-column: span 2; justify-content: center; border: none; border-top: 1px solid var(--gray-100); }
  .services-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .cta-btns { 
    /* flex-direction: column;  */
    display: inline-table;
    
    align-items: stretch; 
  }

  .service-card:nth-child(1) {
    transition-delay: 0.05s;
    text-align: center;
    justify-content: center;
}
  .btn-wa-lg, .btn-call-lg { width: 50%;
    font-size: 10px;
     justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
  .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .floating-btns { bottom: 20px; right: 16px; }
  .float-btn span { display: none; }
  .float-btn { padding: 14px; border-radius: 50%; width: 54px; height: 54px; justify-content: center; }
  .img-secondary { display: none; }
  .why-stat-card { right: 0; top: auto; bottom: -20px; }
  .why-img-stack { padding-bottom: 80px; }
  .about-btns { flex-direction: column; }
  .testi-photo { width: 42px; height: 42px; }
}

@media (max-width: 480px) {
  .trust-item { border-right: none; border-bottom: 1px solid var(--gray-100); }
  .trust-item:nth-child(5) { grid-column: auto; }
  h2 { font-size: 1.7rem; }
  .slide-content h1 { font-size: 1.8rem; }
}



/* =============================================
   INNER PAGES
   ============================================= */
body.inner-page .header { background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); padding: 12px 0; box-shadow: 0 4px 30px rgba(10,31,92,0.08); }
body.inner-page .header .logo img { filter: none; }
body.inner-page .header .nav > a { color: var(--gray-600); }
body.inner-page .header .nav > a:hover { color: var(--navy); background: var(--gray-50); }
body.inner-page .header .nav-item > a { color: var(--gray-600); }
body.inner-page .header .nav-item > a:hover { color: var(--navy); background: var(--gray-50); }
body.inner-page .header .header-cta .btn-outline { border-color: var(--navy); color: var(--navy); }
body.inner-page .header .header-cta .btn-outline:hover { background: var(--navy); color: white; }
body.inner-page .header .hamburger span { background: var(--navy); }

/* ---- PAGE HERO BANNER ---- */
.page-hero { background: linear-gradient(135deg,var(--navy-d) 0%,#1a3a8f 60%,#0e5f9e 100%); padding: 148px 0 64px; position: relative; overflow: hidden; }
.page-hero::before { content:''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Ccircle cx='40' cy='40' r='30' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); }
.page-hero::after { content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(56,189,248,0.4),transparent); }
.page-hero-content { position: relative; z-index: 2; }
.page-hero-content .section-tag { background: rgba(255,255,255,0.12); color: var(--cyan); margin-bottom: 14px; }
.page-hero-content h1 { font-family:'Montserrat',sans-serif; font-size: clamp(2rem,4vw,3rem); font-weight: 900; color: white; margin-bottom: 14px; }
.page-hero-content h1 em { font-style: normal; color: var(--cyan); }
.page-hero-content p { color: rgba(255,255,255,0.75); font-size: 1.05rem; max-width: 560px; margin-bottom: 28px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.breadcrumb a { color: rgba(255,255,255,0.7); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb i { font-size: 0.6rem; }
.breadcrumb span { color: var(--cyan); }

/* (All remaining inner-page styles kept as-is from original) */
.about-story{background:var(--white)} .about-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .about-mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px} .mission-card{background:var(--off-w);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:36px 28px;text-align:center;transition:all var(--transition)} .mission-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent;background:white} .mission-icon{width:64px;height:64px;background:rgba(26,86,219,0.1);color:var(--blue);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 18px;transition:all var(--transition)} .mission-card:hover .mission-icon{background:var(--blue);color:white} .mission-card h3{margin-bottom:10px} .mission-card p{color:var(--text-light);font-size:0.9rem}
.founder-section{background:var(--off-w)} .founder-grid{display:grid;grid-template-columns:420px 1fr;gap:72px;align-items:center} .founder-img-wrap{position:relative} .founder-img-wrap img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:3/4;object-fit:cover;object-position:top} .founder-badge{position:absolute;bottom:-20px;right:-20px;background:var(--blue);color:white;padding:18px 22px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow-md)} .founder-badge strong{display:block;font-family:'Montserrat',sans-serif;font-size:0.85rem;font-weight:800} .founder-badge span{font-size:0.72rem;opacity:0.85;margin-top:3px;display:block} .founder-content .section-tag{margin-bottom:8px} .founder-content h2{margin:8px 0 6px} .founder-content h2 strong{color:var(--blue)} .founder-name{font-family:'Montserrat',sans-serif;font-size:1.4rem;font-weight:800;color:var(--navy);margin-bottom:4px} .founder-title{font-size:0.85rem;color:var(--blue);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:20px} .founder-content p{color:var(--text-light);margin-bottom:16px;line-height:1.8} .founder-stats{display:flex;gap:28px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);margin:24px 0} .f-stat strong{display:block;font-family:'Montserrat',sans-serif;font-size:1.8rem;font-weight:900;color:var(--navy);line-height:1} .f-stat span{font-size:0.78rem;color:var(--text-light);margin-top:4px;display:block}
.team-section{background:var(--white)} .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .team-card{background:var(--off-w);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gray-200);transition:all var(--transition);text-align:center} .team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:transparent} .team-card-img{aspect-ratio:1;overflow:hidden} .team-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease} .team-card:hover .team-card-img img{transform:scale(1.08)} .team-card-info{padding:20px 16px} .team-card-info h4{font-size:0.95rem;color:var(--navy);margin-bottom:4px} .team-card-info span{font-size:0.78rem;color:var(--blue);font-weight:600;display:block;margin-bottom:12px} .team-social{display:flex;justify-content:center;gap:8px} .team-social a{width:32px;height:32px;background:rgba(26,86,219,0.08);color:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.78rem;transition:all var(--transition)} .team-social a:hover{background:var(--blue);color:white}
.services-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:64px} .service-main-card{background:white;border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition);cursor:pointer;text-decoration:none;display:block;color:inherit} .service-main-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:transparent} .smc-img{aspect-ratio:16/9;overflow:hidden;position:relative} .smc-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease} .service-main-card:hover .smc-img img{transform:scale(1.07)} .smc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,21,66,0.7) 0%,transparent 60%)} .smc-body{padding:32px 28px} .smc-icon{width:56px;height:56px;background:rgba(26,86,219,0.1);color:var(--blue);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px;transition:all var(--transition)} .service-main-card:hover .smc-icon{background:var(--blue);color:white} .smc-body h3{font-size:1.3rem;margin-bottom:10px} .smc-body p{color:var(--text-light);font-size:0.92rem;margin-bottom:20px} .smc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px} .smc-list li{display:flex;align-items:center;gap:9px;font-size:0.85rem;color:var(--gray-600)} .smc-list li i{color:var(--wa);font-size:0.8rem;flex-shrink:0} .smc-arrow{display:inline-flex;align-items:center;gap:8px;font-size:0.88rem;font-weight:700;color:var(--blue);transition:gap var(--transition)} .service-main-card:hover .smc-arrow{gap:14px}
.services-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .service-mini-card{background:var(--off-w);border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:all var(--transition)} .service-mini-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;background:white} .service-mini-card i{font-size:1.8rem;color:var(--blue);margin-bottom:12px;display:block} .service-mini-card h4{font-size:0.88rem;color:var(--navy);font-weight:700}
.sub-service-section{background:var(--white)} .sub-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .sub-service-grid.reverse{direction:rtl} .sub-service-grid.reverse>*{direction:ltr} .sub-service-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3} .sub-service-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease} .sub-service-img:hover img{transform:scale(1.04)} .sub-service-content h2{margin-bottom:16px} .sub-service-content h2 strong{color:var(--blue)} .sub-service-content p{color:var(--text-light);margin-bottom:16px;line-height:1.8} .sub-feature-list{display:flex;flex-direction:column;gap:12px;margin-bottom:28px} .sub-feature-list li{display:flex;align-items:flex-start;gap:12px;font-size:0.9rem} .sub-feature-list li i{width:28px;height:28px;background:rgba(26,86,219,0.1);color:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:0.8rem;flex-shrink:0;margin-top:1px} .sub-feature-list li div strong{display:block;font-weight:700;color:var(--navy);font-size:0.9rem} .sub-feature-list li div span{color:var(--text-light);font-size:0.83rem} .sub-service-cta{gap:14px;flex-wrap:wrap}
.process-section{background:var(--off-w)} .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative} .process-steps::before{content:'';position:absolute;top:36px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));opacity:0.25} .process-step{text-align:center;position:relative} .step-num{width:72px;height:72px;background:white;border:3px solid var(--blue);color:var(--blue);font-family:'Montserrat',sans-serif;font-size:1.4rem;font-weight:900;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:var(--shadow);transition:all var(--transition)} .process-step:hover .step-num{background:var(--blue);color:white} .process-step h4{font-size:0.95rem;color:var(--navy);margin-bottom:8px} .process-step p{font-size:0.82rem;color:var(--text-light)}
.projects-filter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:48px} .filter-btn{padding:9px 22px;border-radius:50px;border:1.5px solid var(--gray-200);background:white;color:var(--gray-600);font-family:'Poppins',sans-serif;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all var(--transition)} .filter-btn:hover,.filter-btn.active{background:var(--navy);color:white;border-color:var(--navy)} .projects-full-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .proj-card{background:white;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all var(--transition)} .proj-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)} .proj-img{position:relative;aspect-ratio:16/10;overflow:hidden} .proj-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease} .proj-card:hover .proj-img img{transform:scale(1.08)} .proj-overlay{position:absolute;inset:0;background:rgba(7,21,66,0.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transition:all var(--transition)} .proj-card:hover .proj-overlay{opacity:1} .proj-cat-tag{position:absolute;top:14px;left:14px;background:var(--blue);color:white;font-size:0.7rem;font-weight:700;padding:4px 12px;border-radius:50px;letter-spacing:0.07em;text-transform:uppercase} .proj-body{padding:22px} .proj-body h3{font-size:1rem;margin-bottom:8px} .proj-loc{font-size:0.8rem;color:var(--text-light);display:flex;align-items:center;gap:5px;margin-bottom:12px} .proj-loc i{color:var(--blue);font-size:0.72rem} .proj-meta{display:flex;gap:16px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--gray-100)} .proj-meta span{font-size:0.75rem;color:var(--text-light);display:flex;align-items:center;gap:5px} .proj-meta i{color:var(--blue);font-size:0.7rem}
.why-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px} .why-stat-box{background:white;border-radius:var(--radius-lg);padding:32px 24px;text-align:center;border:1px solid var(--gray-200);box-shadow:var(--shadow);transition:all var(--transition)} .why-stat-box:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .why-stat-box i{font-size:2rem;color:var(--blue);margin-bottom:14px;display:block} .why-stat-box strong{display:block;font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--navy);line-height:1} .why-stat-box span{font-size:0.8rem;color:var(--text-light);margin-top:6px;display:block}
.why-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .why-feature-card{background:var(--off-w);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:32px 28px;display:flex;gap:20px;align-items:flex-start;transition:all var(--transition)} .why-feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;background:white} .why-feature-icon{width:52px;height:52px;flex-shrink:0;background:rgba(26,86,219,0.1);color:var(--blue);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all var(--transition)} .why-feature-card:hover .why-feature-icon{background:var(--blue);color:white} .why-feature-card h3{font-size:1rem;margin-bottom:8px} .why-feature-card p{font-size:0.87rem;color:var(--text-light);line-height:1.75}
.comparison-table{background:var(--off-w)} .compare-wrap{background:white;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--gray-200)} .compare-header{display:grid;grid-template-columns:2fr 1fr 1fr;background:var(--navy);color:white} .compare-header div{padding:18px 24px;font-weight:700;font-size:0.9rem} .compare-header div:first-child{color:rgba(255,255,255,0.7);font-size:0.82rem} .compare-header .highlight{color:var(--cyan)} .compare-row{display:grid;grid-template-columns:2fr 1fr 1fr;border-bottom:1px solid var(--gray-100);transition:background var(--transition)} .compare-row:last-child{border-bottom:none} .compare-row:hover{background:var(--off-w)} .compare-row div{padding:16px 24px;font-size:0.88rem;display:flex;align-items:center} .compare-row div:first-child{color:var(--text);font-weight:500} .compare-row .yes{color:var(--wa);font-size:1.1rem;font-weight:800} .compare-row .no{color:var(--gray-400);font-size:1.1rem} .compare-row .highlight{background:rgba(26,86,219,0.03)}
.reviews-summary{display:grid;grid-template-columns:280px 1fr;gap:48px;background:var(--navy);border-radius:var(--radius-lg);padding:48px;margin-bottom:64px;color:white} .reviews-score{text-align:center} .score-number{font-family:'Montserrat',sans-serif;font-size:5rem;font-weight:900;color:var(--cyan);line-height:1} .score-stars{font-size:1.4rem;color:#FBBF24;letter-spacing:3px;margin:8px 0} .score-total{font-size:0.85rem;color:rgba(255,255,255,0.6)} .score-bars{flex:1} .score-bars h3{color:white;margin-bottom:20px;font-size:1.1rem} .bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px} .bar-label{font-size:0.8rem;color:rgba(255,255,255,0.7);width:40px;flex-shrink:0} .bar-track{flex:1;height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden} .bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width 1s ease 0.3s} .bar-pct{font-size:0.78rem;color:rgba(255,255,255,0.6);width:36px;text-align:right}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .review-card{background:white;border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);transition:all var(--transition)} .review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .review-card .testi-stars{margin-bottom:14px} .review-card p{color:var(--text-light);font-size:0.88rem;line-height:1.8;font-style:italic;margin-bottom:20px} .review-footer{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--gray-100)} .review-avatar{width:42px;height:42px;background:linear-gradient(135deg,var(--blue),var(--navy));color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.78rem;flex-shrink:0} .review-footer strong{display:block;font-size:0.88rem;color:var(--navy)} .review-footer span{font-size:0.75rem;color:var(--text-light)} .review-footer .verified{display:flex;align-items:center;gap:4px;font-size:0.7rem;color:var(--wa);font-weight:600;margin-top:2px}
.contact-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px} .contact-page-info{display:flex;flex-direction:column;gap:24px} .cp-info-card{display:flex;align-items:flex-start;gap:18px;background:var(--off-w);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:24px;transition:all var(--transition)} .cp-info-card:hover{transform:translateX(6px);box-shadow:var(--shadow-md);border-color:transparent} .cp-icon{width:52px;height:52px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.2rem} .cp-icon.wa{background:rgba(37,211,102,0.1);color:var(--wa)} .cp-icon.phone{background:rgba(26,86,219,0.1);color:var(--blue)} .cp-icon.loc{background:rgba(239,68,68,0.1);color:#EF4444} .cp-icon.mail{background:rgba(249,115,22,0.1);color:#F97316} .cp-icon.clock{background:rgba(168,85,247,0.1);color:#A855F7} .cp-info-card strong{display:block;font-size:0.85rem;font-weight:700;color:var(--navy);margin-bottom:4px} .cp-info-card a,.cp-info-card span{font-size:0.9rem;color:var(--text-light);transition:color var(--transition)} .cp-info-card a:hover{color:var(--blue)} .cp-wa-btn{margin-top:8px;display:inline-flex;align-items:center;gap:7px;font-size:0.82rem;font-weight:700;color:var(--wa)} .cp-wa-btn i{font-size:0.9rem} .contact-map-box{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:3px solid var(--gray-200);margin-top:24px} .contact-map-box iframe{width:100%;height:260px;border:none;display:block} .contact-page-form-wrap{background:var(--off-w);border-radius:var(--radius-lg);padding:40px;border:1px solid var(--gray-200)} .contact-page-form-wrap h3{margin-bottom:6px} .contact-page-form-wrap>p{font-size:0.88rem;color:var(--text-light);margin-bottom:28px}

@media (max-width: 1024px) {
   body{
    font-size:14px;
    overflow-x: hidden !important;
  }
  .about-story-grid,.founder-grid,.sub-service-grid{grid-template-columns:1fr;gap:48px}
  .sub-service-grid.reverse{direction:ltr}
  .services-main-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .about-mission-grid{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .process-steps::before{display:none}
  .why-features-grid{grid-template-columns:1fr}
  .why-hero-stats{grid-template-columns:repeat(2,1fr)}
  .reviews-summary{grid-template-columns:1fr;gap:32px}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .compare-wrap{overflow-x:auto}
  .contact-page-grid{grid-template-columns:1fr}
  .services-mini-grid{grid-template-columns:repeat(2,1fr)}
  .projects-full-grid{grid-template-columns:repeat(2,1fr)}
  .service-icon {
    width: 60px;
    height: 60px;
    background: rgba(26, 86, 219, 0.1);
    color: var(--blue);
    border-radius: 16px;
    margin-left: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    transition: all var(--transition);
}

.btn-primary {
    font-size: 12px;
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(26, 86, 219, 0.3);
    width: 50%;
}
}

@media (max-width: 768px) {
   body{
    font-size:14px;
    overflow-x: hidden !important;
  }
  .page-hero{padding:120px 0 48px}
  .page-hero-content h1{font-size:2rem}
  .about-mission-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .why-hero-stats{grid-template-columns:1fr 1fr}
  .reviews-grid{grid-template-columns:1fr}
  .process-steps{grid-template-columns:1fr}
  .projects-full-grid{grid-template-columns:1fr}
  .services-mini-grid{grid-template-columns:1fr 1fr}
  .contact-page-form-wrap{padding:24px}
  .reviews-summary{padding:28px}
  .score-number{font-size:3.5rem}
  .compare-header,.compare-row{grid-template-columns:1fr 60px 168px}
  .compare-header div,.compare-row div{padding:12px 16px;font-size:0.78rem}
  .footer {
    background: var(--navy-d);
    color: rgba(255, 255, 255, 0.75);
    padding: 20px 18px;
}



.hero {
    position: relative;
    height: 60vh;
    min-height: 680px;
    overflow: hidden;
}
}


/* ===== BRAND MARQUEE ===== */
.brand-strip{
  padding:70px 0;
  background:linear-gradient(135deg,#f8fbff,#eef6ff);
  overflow:hidden;
}

.brand-head{
  text-align:center;
  margin-bottom:35px;
}

.brand-head h2{
  font-size:2rem;
  color:#0f172a;
  margin-top:10px;
}

.brand-head strong{
  color:#0ea5e9;
}

.brand-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
}

.brand-track{
  display:flex;
  align-items:center;
  gap:24px;
  width:max-content;
  animation:brandMove 18s linear infinite;
}

.brand-marquee:hover .brand-track{
  animation-play-state:paused;
}

.brand-card{
  min-width:220px;
  height:110px;
  background:#ffffff;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  border:1px solid rgba(14,165,233,0.08);
  transition:0.35s ease;
}

.brand-card img{
  max-width:100%;
  max-height:70px;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:0.8;
  transition:0.35s ease;
}

.brand-card:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 20px 40px rgba(14,165,233,0.15);
}

.brand-card:hover img{
  filter:grayscale(0%);
  opacity:1;
}

@keyframes brandMove{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

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


  .brand-strip{
    padding:55px 0;
  }

  .brand-head h2{
    font-size:1.45rem;
  }

  .brand-card{
    min-width:170px;
    height:90px;
    border-radius:14px;
    padding:16px;
  }

  .brand-card img{
    max-height:55px;
  }

  .brand-track{
    gap:16px;
    animation-duration:14s;
  }
}


@media(max-width:430px){
  body{
    font-size:14px;
    overflow-x: hidden !important;
  }

.btn-wrapper{
    flex-direction: column;
}

.btn-wa-hero,
.btn-call-hero{
    width: 100%;
            margin-bottom: 20px
}



}