/* GLOBAL RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

body {
    background: #f8fafa;
    color: #1a1a1a;
    .container {
    width: 100%;
    max-width: 800px;   /* Yeh width content ko perfect center me rakhega */
    margin: 0 auto;      /* Center alignment */
    padding: 0 20px;     /* Side gap for mobile */
}

}

/* NAVBAR */
.navbar {
    width: 100%;
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 999;
    
}

.logo {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.logo .icon {
    background: #1abc9c;
    color: #fff;
    padding: 7px 10px;
    border-radius: 50%;
    font-size: 14px;
    margin-right: 6px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    transition: 0.3s ease;
    font-size: 15px;
}

.nav-links a.active,
.nav-links a:hover {
    color: #05b3a4;
}

.nav-buttons a {
    padding: 6px 12px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
    transition: 0.3s;
}

.login {
    margin-right: 10px;
    color: #333;
}

.get-started {
    background: #1abc9c;
    color: #fff;
}

/* HERO */
.hero {
    text-align: center;
    padding: 80px 20px;
    background: linear-gradient(to bottom right, #000268, #000a9c);
}

.hero h1 {
    font-size: 42px;
    font-weight: 700;
}

.hero h1 span {
    color: #48d4c9;
}

.hero p {
    margin-top: 12px;
    font-size: 16px;
    color: #555;
}

/* STORY SECTION */
.story-section {
    display: flex;
    justify-content: space-between;
    padding: 80px 50px;
    align-items: center;
    gap: 40px;
}

.story-text {
    width: 50%;
}

.story-text h2 {
    font-size: 28px;
}

.story-text h2 span {
    color: #05b3a4;
}

.story-text p {
    margin-top: 10px;
    color: #666;
    line-height: 1.5;
}

.stats {
    display: flex;
    gap: 40px;
    margin-top: 25px;
}

.stat-box {
    text-align: center;
}

.stat-box i {
    font-size: 28px;
    color: #05b3a4;
}

.stat-box p {
    margin-top: 6px;
    font-size: 14px;
    color: #333;
}

/* YEARS BOX */
.years-box {
    width: 320px;
    height: 350px;
    border: 2px solid #05b3a4;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.years-box h1 {
    font-size: 65px;
    color: #05b3a4;
}

.years-box p {
    font-size: 15px;
    margin-top: 8px;
}

/* CORE VALUES */
.values-section {
    text-align: center;
    padding: 60px 50px;
}

.values-section h2 {
    font-size: 28px;
}

.values-section h2 span {
    color: #05b3a4;
}

.values-section p {
    margin-top: 10px;
    color: #555;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
    max-width: 1200px;
    margin-left: 18rem;
}

.value-card {
    background: #fff;
    padding: 35px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
}

.value-card i {
    font-size: 32px;
    color: #05b3a4;
}

.value-card h3 {
    margin-top: 12px;
    font-size: 18px;
    color: #333;
}

.value-card p {
    margin-top: 6px;
    font-size: 14px;
    color: #666;
}

/* TEAM SECTION */
.team-section {
    text-align: center;
    padding: 70px 50px;
}

.team-section h2 {
    font-size: 28px;
}

.team-section h2 span {
    color: #05b3a4;
}

.team-section p {
    color: #555;
    margin-top: 8px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
    max-width: 1200px;
    margin-left: 18rem;
}

.team-card {
    background: #fff;
    padding: 35px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07);
}

.avatar {
    width: 65px;
    height: 65px;
    background: #05b3a4;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 600;
}

.team-card h4 {
    margin-top: 10px;
    font-size: 16px;
}

.team-card p {
    margin-top: 4px;
    color: #666;
    font-size: 13px;
}

/* CTA */
.cta {
    background: linear-gradient(90deg, #00d2c6, #06b1d7);
    text-align: center;
    padding: 60px 20px;
    color: #fff;
}

.cta h2 {
    font-size: 28px;
}

.cta p {
    font-size: 15px;
    margin-top: 10px;
}

.cta-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 22px;
    background: #fff;
    color: #06b1d7;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
}

/* FOOTER */
footer {
    background: #0a2b33;
    color: white;
    padding: 60px;
    margin-top: 50px;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    margin: 6px 0;
}
/* RESPONSIVE */
@media (max-width: 992px) {

    .nav-links {
        display: none;
    }

    .story-section {
        flex-direction: column;
        text-align: center;
    }

    .story-text,
    .years-box {
        width: 100%;
    }

    .values-grid,
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .story-section,
    .values-section,
    .team-section {
        padding: 40px 20px;
    }

    .values-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }

    .navbar {
        padding: 15px 20px;
    }
}

.header-right a {
  padding: 8px 12px;
  border-radius: 6px;
  margin-left: 10px;
  font-size: 14px;
  text-decoration: none !important;
  color: #333;
  border: 1px solid #ccc;
  transition: 0.3s ease;
}

.header-right a:hover {
  background: #f7f7f7;
}

/* WhatsApp Button */
.header-right .whatsapp {
  color: white;
  background: #25D366 !important;
  border: none !important;
}

.header-right .whatsapp:hover {
  opacity: 0.85;
}

/* Get Free Audit — Gradient button (Same as homepage) */
.header-right .cta {
  color: white !important;
  border: none !important;
  background: linear-gradient(to right, #557bff, #9c4bff) !important;
}

.header-right .cta:hover {
  opacity: 0.9;
}

header{
  width:100%;
  padding:18px 45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  border-bottom:1px solid #eee;
}

.logo{
  font-size:22px;
  font-weight:700;
}
.logo span{ color:#ff6a00; }

nav a{
  margin:0 7px;
  color:#555;
  text-decoration:none;
  font-weight:500;
}
nav a.active{ color:#2f6be0; }

/* ===============================
   HARD RESPONSIVE OVERRIDE FIX
   (HTML unchanged)
================================ */

/* GLOBAL SAFETY */
* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

/* ================= HEADER FIX ================= */
@media (max-width: 992px) {

  header {
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
  }

  .logo1 {
    margin-left: 0 !important;
  }

  nav {
    margin-left: 0 !important;
    width: 100%;
  }

  .navbar {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem !important;
    
  }

  .header-right {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
  }
}

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

  header {
    flex-direction: column;
    align-items: center;
    height: 7rem;
  }

  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .hero {
    padding: 3rem 1.5rem;
    text-align: center;
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  /* STORY SECTION */
  .story-section {
    flex-direction: column;
    gap: 2.5rem;
    text-align: center;
  }

  .stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  /* GRIDS */
  .values-grid,
  .team-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
}

/* ================= FOOTER FIX ================= */
@media (max-width: 900px) {

  footer p {
    margin-left: 0 !important;
    text-align: center;
    padding: 0 1rem;
  }
}

/* ================= SMALL PHONES ================= */
@media (max-width: 480px) {

  .hero h1 {
    font-size: 1.8rem;
  }

  .values-section h2,
  .team-section h2,
  .cta h2 {
    font-size: 1.9rem;
  }

  .years-box h1 {
    font-size: 2.8rem;
  }
}

/* =====================================
   FIX: VALUES & TEAM CENTER ALIGNMENT
===================================== */

@media (max-width: 1024px) {

  .values-section,
  .team-section {
    text-align: center;
  }

  .values-grid,
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    margin: 0 auto;
    max-width: 90%;
  }

  .value-card,
  .team-card {
    margin: 0 auto;
  }
}


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

  .values-grid,
  .team-grid {
    grid-template-columns: 1fr !important;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
  }

  .value-card,
  .team-card {
    width: 100%;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }
}


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

  .value-card,
  .team-card {
    max-width: 20rem;
  }
}

/* ===============================
   FOOTER FULL RESPONSIVE FIX
================================ */

@media (max-width: 1024px) {

  footer {
    overflow-x: hidden;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    gap: 2rem;
    margin: 0 auto;
  }

  footer p {
    margin-left: 0 !important;
    margin-top: 0 !important;
    text-align: center;
    padding: 0 1rem;
  }
}


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

  .footer-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 2.5rem;
  }

  .footer-grid div {
    margin: 0 auto;
  }

  footer p {
    margin: 0.8rem 0 !important;
    text-align: center;
    line-height: 1.6;
  }

  hr {
    margin: 1.5rem 0;
  }
}


/* VERY SMALL DEVICES */
@media (max-width: 480px) {

  footer p {
    font-size: 0.9rem;
  }
}



/* ===== HAMBURGER DEFAULT (DESKTOP HIDE) ===== */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  z-index: 1001;
  margin-left: 17rem;
  margin-top: -5rem;
  margin-bottom: 1.6rem;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: #333;
  margin: 4px 0;
  border-radius: 3px;
}

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

  header {
    display: flex;
    align-items: left;
    justify-content: space-between;
    padding: 0 16px;
  }

  /* LOGO LEFT (mobile) */
  .logo1 {
    margin-left: 0 !important;
    margin-right: 10rem;
  }

  /* NAV HIDE */
  .main-nav {
    display: none !important;
    position: absolute;
    top: 90px;
    right: 16px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    z-index: 1000;
  }

  .main-nav.show {
    display: block !important;
  }

  .main-nav ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  /* HAMBURGER SHOW */
  .hamburger {
    display: flex;
  }

  /* HEADER RIGHT HIDE */
  .header-right {
    display: none;
  }
}



@media (max-width: 768px) {

  footer {
    text-align: center;
  }

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

  footer p {
    margin: 10px 0 !important;
  }

  footer hr {
    margin: 20px 0;
  }
}



/* ===== NAVBAR HOVER EFFECT (NO SIZE CHANGE) ===== */

.navbar a,
.header-right a {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Text color on hover */
.navbar a:hover {
  color: rgb(0, 184, 197);
}

/* Underline animation */
.navbar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background-color: rgb(0, 184, 197);
  transition: width 0.3s ease;
}

/* Animate underline */
.navbar a:hover::after {
  width: 100%;
}

/* Active page underline */
.navbar a.active::after {
  width: 100%;
}

/* ===== Header Right Buttons ===== */

.header-right a {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Login hover */
.header-right a:hover {
  color: rgb(0, 184, 197);
}

/* Get Started button hover (no size jump) */
.header-right a.yeah:hover {
  background-color: rgb(0, 150, 160);
  color: #fff;
}






/* SERVICES DROPDOWN */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 150%;
  left: 0;

  background: #ffffff;
  min-width: 260px;   /* 👈 thoda width bada */

  display: flex;
  flex-direction: column;

  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);

  opacity: 0;
  visibility: hidden;
  transform: translateY(25px);
  transition: all 0.35s ease;

  z-index: 999;
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu li a {
  padding: 18px 26px;     /* 👈 height / spacing increase */
  font-size: 1.15rem;    /* 👈 text thoda bada */
  font-weight: 500;
  text-decoration: none;
  color: #000;
  border-bottom: 1px solid #eee;
}

.dropdown-menu li:last-child a {
  border-bottom: none;
}

.dropdown-menu li a:hover {
  background-color: rgb(0, 184, 197);
  color: #fff;
}

/* Hover slide-down */
.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}