:root{
      --bg:#ffffff;            /* page background */
      --ink:#0f172a;           /* primary text */
      --muted:#64748b;         /* secondary text */
      --line:#e2e8f0;          /* hairlines */
      --brand:#0ea5e9;         /* accent */
      --brand-ink:#0b84ba;
      --cream:#f8fafc;         /* soft section bg */
      --card:#ffffff;          /* cards */
      --shadow:0 8px 30px rgba(2,8,23,.08);
      --radius:18px;
      --radius-sm:12px;
      --max:1200px;
    }
    *{box-sizing:border-box}

    body{margin:0; font-size:17px; color: #000; line-height:1.6 !important}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--max);margin-inline:auto;padding-inline:24px}
.bac{background:#1d3083;}
p{font-size:17px; color: #000;}

    .top-bar {
      background: #ff6f61;
      color: #fff;
      padding: 6px 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .top-bar input {
      border-radius: 20px;
      border: none;
      padding: 5px 12px;
    }
    .navbar-nav .nav-link {
      font-weight: 500;
      padding: 10px 25px; font-size:17px;
    }
    .dropdown-menu.mega-menu {
      width: 100%;
      left: 0;
      right: 0;
      padding: 30px;
      border-radius: 0;
      border: none;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    .mega-menu .col h6 {
      color: #ff6f61;
      margin-bottom: 12px;
      font-size: 1rem;
    }
    .mega-menu a {
      display: block;
      color: #000;
      text-decoration: none;
      margin-bottom: 6px;
      transition: 0.3s;
    }
    .mega-menu a:hover {
      color: #ff6f61;
      transform: translateX(4px);
    }


 /* Tagline */
    .top-tagline {
      background: #f8f9fa;
      font-size: 16px;
      padding: 6px 0;
      text-align: center;
      color: #000;
    }
    /* Navbar */
    .navbar {
      padding: 0.8rem 0;
    }
    .navbar-nav .nav-link {
      font-weight: 500;
      padding: 8px 25px;
    }
   
    .mega-menu .col-md-3 h6 {
      font-weight: 600;
      margin-bottom: 10px;
      color: #d9534f;
    }
    .mega-menu .col-md-3 a {
      display: block;
      padding: 4px 0;
      color: #000;
      text-decoration: none;
    }
    .mega-menu .col-md-3 a:hover {
      text-decoration: underline;
    }
    /* Hover effect on desktop */
    @media (min-width: 992px) {
      .dropdown:hover .dropdown-menu {
        display: block;
      }
    }

      /* Topbar style */
       .topbar {
      background-color: #1b317a; /* Blue */
    
      padding: 8px 0;
      color: #ffad00; /* Yellow text */
    }
     .topbar h3{color:#fff;   font-size: 18px;}
    .navbar {
      padding: 0.8rem 0;
    }
    .navbar-nav {
      align-items: center;
    }
    .navbar-brand img {
      max-height:37px;
    }
    /* Mega menu */
    .dropdown-menu.mega-menu {
      width: 1000px;
      padding: 20px;
      left: -70%;
      transform: translateX(-50%);
      border-radius: 8px;
      border: none;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    /* Mega menu styling */
.mega-menu {
  padding: 20px;
  width: 100%;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Show dropdown properly */
.dropdown-menu.show {
  display: block;
}


/* Mobile view fix */
@media (max-width: 991px) {
  .dropdown-menu.mega-menu {
    position: static !important; /* Remove absolute */
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding: 10px;
  }

  .mega-menu .row {
    flex-direction: column;
  }

  .mega-menu .col-md-3 {
    width: 100% !important;
    margin-bottom: 15px;
  }
}

    /* Hero */
    .hero{padding:64px 0 32px}
    .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.85rem;background:#fff}
    .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand)}
    .hero h1{font-family:"Playfair Display",serif;font-weight:700;font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.1;margin:16px 0}
    .hero p{color:var(--muted);font-size:1.05rem;max-width:50ch}
    .hero-actions{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
    .btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:12px 18px;font-weight:600;border:1px solid var(--ink)}
    .btn.primary{background:var(--ink);color:#fff;border-color:transparent}
    .btn.primary:hover{background:#111827}
    .btn.ghost{color:var(--ink);background:#fff}
    .hero-media{position:relative}
    .hero-card{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
    .float-badge{position:absolute;bottom:14px;left:14px;background:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow)}
    .float-badge .mini{width:42px;height:42px;border-radius:10px;overflow:hidden}

 

    /* Collections */
    .section{padding:72px 0}
    .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}
    .kicker{color:var(--muted);font-weight:600;letter-spacing:.15em;text-transform:uppercase;font-size:.78rem}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}

    .card-body{padding:18px}
    .card h3{margin:0 0 6px;font-size:1.2rem}
    .card p{margin:0;color:var(--muted)}
    .card:hover{transform:translateY(-4px);transition:transform .25s}

    /* Product Grid */
    .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
    .product{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff;position:relative}
    .product .thumb{position:relative}
    .product .thumb img{aspect-ratio:1/1;object-fit:cover}
    .product .price{position:absolute;bottom:10px;left:10px;background:#fff;border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-weight:600;box-shadow:var(--shadow)}
    .product .meta{padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
    .quick{position:absolute;inset:auto 10px 10px auto;background:var(--ink);color:#fff;padding:8px 12px;border-radius:999px;font-size:.9rem;opacity:0;transform:translateY(6px);transition:.25s}
    .product:hover .quick{opacity:1;transform:translateY(0)}

    /* Banner Split */
    .split{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
    .split .panel{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
    .split .content{padding:28px}

    /* Testimonials (slider) */
    .slider{position:relative;overflow:hidden}
    .slides{display:flex;gap:20px;transition:transform .6s ease}
    .t-card{min-width:calc(50% - 10px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px}
    .t-quote{font-size:1.05rem;line-height:1.6}
    .t-author{margin-top:12px;color:var(--muted);font-weight:600}
    .slider-nav{display:flex;justify-content:center;gap:10px;margin-top:14px}
    .dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;cursor:pointer}
    .dot.active{background:var(--ink)}

 

    /* Responsive */
    @media (max-width: 1000px){
      .hero-grid,.split,.newsletter{grid-template-columns:1fr}
      .grid-3{grid-template-columns:1fr 1fr}
      .grid-4{grid-template-columns:1fr 1fr}
      .t-card{min-width:100%}
      .slides{gap:16px}
    }
    @media (max-width: 640px){
      .grid-3,.grid-4,.features{grid-template-columns:1fr}
      .section{padding:56px 0}
      .foot{grid-template-columns:1fr}
    }

  .carousel-caption {
  z-index: 2;
}


  .hero-slide {
    position: relative;
  }

  .hero-slide img {
    height: 100vh; /* Full screen */
    object-fit: cover;
  }

  /* Overlay dark shade */
  .hero-slide .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    z-index: 1;
  }

  .carousel-caption {
    z-index: 2;
    max-width: 700px;
  }

  /* Colorful transparent gradient background */
  .caption-box.colorful-bg {
    background: linear-gradient(135deg, rgba(221,53,86,0.85), rgba(118,75,162,0.85), rgba(72,219,251,0.85));
    padding: 25px 30px;
    border-radius: 18px;
    display: inline-block;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }

  .caption-box h1 {
    font-size: 2.2rem;
    font-weight: 600;
    color: #fff;
  }

  .caption-box p {
    font-size: 1.25rem;
    margin-top: 10px;
    color: #f9f9f9;
  }

  .caption-box .btn {
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 600;
  }

  /* Custom left-right buttons always visible */
  .custom-control {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    z-index: 5;
  }


  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: invert(1);
    width: 28px;
    height: 28px;
  }




.content-shape {
  padding: 30px;
  color: #fff;
  border-radius: 30px;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: fadeInUp 1s ease-in-out;
}

.yellow-shape {
  background: linear-gradient(135deg, #ffad00, #2c3876, #009840);
  background-size: 300% 300%;
  clip-path: ellipse(70% 50% at 50% 50%);
  animation: gradientMove 6s ease infinite, bounceShape 4s ease-in-out infinite;
  padding: 40px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Gradient Movement Animation */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Bouncy Shape Animation */
@keyframes bounceShape {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.carousel-item img {
  height: 600px;   /* 👈 apni marzi se 400px / 450px / 500px set kar sakte ho */
  width: 100%;
  object-fit: cover; /* image ko stretch na ho, nicely crop ho */
}
.about-modern {
  background: url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&w=1600&q=80') no-repeat center center/cover;
  position: relative;
  color: #fff;
}
.about-modern .overlay {
  background: rgba(0, 0, 0, 0.6); /* dark effect */
  padding: 80px 20px;
}
      .products-section {
      padding: 80px 20px;
         }

    .products-section h2 {
      text-align: center;
      font-size: 2.5rem;
      font-weight: 400;

      color: #000;
    }

    .product-card {
      background: #fff;
      color: #333;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
      transition: all 0.4s ease;
      transform: translateY(30px);
      opacity: 0;
      animation: fadeUp 1s forwards;
    }
    .product-card p{line-height:1.1 !important;}

    @keyframes fadeUp {
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .product-card:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }

    .product-img {
      height: 220px;
      object-fit: cover;
      width: 100%;
      transition: 0.4s ease;
    }

    .product-card:hover .product-img {
      transform: scale(1.1);
    }

    .product-body {
      padding: 25px;
    }

    .product-body h3 {
      font-size: 1.6rem;
      font-weight: 400;
      margin-bottom: 15px;
      color: #000;
    }

    .product-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .product-list li {
      padding: 6px 0;
      font-size: 16px;
      border-bottom: 1px dashed #ddd; color:#000;
    }

    .product-list li:last-child {
      border-bottom: none;
    }

    /* Button */
    .explore-btn {
      display: inline-block;
      margin-top: 15px;
      padding: 10px 20px;
      background: linear-gradient(135deg, #e51f25, #ffad00);
      color: #fff;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      transition: 0.3s;
    }

    .explore-btn:hover {
      background: linear-gradient(135deg, #ffad00, #e51f25);
      transform: scale(1.05);
    }

     .about-us-section {
      position: relative;
      padding: 100px 0;
background: linear-gradient(135deg, #dd3556, #764ba2, #48dbfb);
      overflow: hidden;
    }

    /* floating shapes */
    .shape {
      position: absolute;
      border-radius: 50%;
      opacity: 0.15;
      animation: float 8s ease-in-out infinite alternate;
    }

    .shape.shape1 {
      width: 220px;
      height: 220px;
      background: #c8296a;
      top: -60px;
      left: -80px;
      animation-duration: 6s;
    }

    .shape.shape2 {
      width: 300px;
      height: 300px;
      background: #8e36ad;
      bottom: -120px;
      right: -100px;
      animation-duration: 10s;
    }

    .shape.shape3 {
      width: 180px;
      height: 180px;
      background: #ffcc00;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-duration: 12s;
    }

    @keyframes float {
      0% { transform: translateY(0); }
      50% { transform: translateY(-30px); }
      100% { transform: translateY(0); }
    }

    .about-title {
      font-size: 2.8rem;
      font-weight: 400;
      color: #fff;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
    }

    .about-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: #fff;
      margin-top: 10px;
      border-radius: 2px;
    }

    .about-text {
      font-size: 1.1rem;
      line-height: 1.8;
      color: #fff;
      z-index: 1;
      position: relative;
    }

    .about-img {
      border-radius: 20px;
      box-shadow: 0px 10px 25px rgba(0,0,0,0.15);
      overflow: hidden;
      transition: transform 0.3s ease;
      z-index: 1;
      position: relative;
    }

    .about-img img {
      width: 100%;
      display: block;
    }

    .about-img:hover {
      transform: scale(1.05);
    }

    @keyframes float {
  from { transform: translateY(0px); }
  to { transform: translateY(-20px); }
}

/* Background & shapes */
.qa-section{
  background: linear-gradient(135deg,#f7f9fc 0%, #eef6ff 100%);
}
.qa-bubble{
  position:absolute; border-radius:50%; opacity:.18; filter: blur(0.5px);
  animation: qa-float 9s ease-in-out infinite;
}
.qa-b1{ width:240px;height:240px;background:#90caf9; top:-60px; left:-80px; animation-duration:8s;}
.qa-b2{ width:180px;height:180px;background:#ffd54f; bottom:-70px; right:-40px; animation-duration:10s; animation-direction: alternate-reverse;}
.qa-b3{ width:120px;height:120px;background:#a5d6a7; top:55%; left:45%; transform:translate(-50%,-50%); animation-duration:12s;}
@keyframes qa-float{ 0%{transform:translateY(0)} 50%{transform:translateY(-14px)} 100%{transform:translateY(0)} }

/* Minor tweaks */
.qa-icon{ line-height:1; margin-top:2px; }
.object-fit-cover{ object-fit: cover; }

@media (max-width: 991px){
  .qa-b1{left:-120px}
  .qa-b2{right:-90px}
}








 .team-section {
      padding: 60px 0;
      text-align: center;
    }
    .team-section h2 {
      font-weight: 400;
      margin-bottom: 10px;
    }
    .team-section p {
      color: #000;
      margin-bottom: 50px;
    }
    .team-card {
      transition: transform 0.3s, box-shadow 0.3s;
      border: none;
      border-radius: 15px;
      overflow: hidden;
    }
    .team-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    }
    .team-card img {
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;

      object-fit: cover;
    }
    .team-card-body {
      padding: 20px;
    }
    .team-card-body h5 {
      font-weight: 600;
    }
    .team-card-body p {
      font-size: 16px;
      color: #000;
    }

     .team-section {
      padding: 60px 0;
      text-align: center;
    }
    .team-section h2 {
      font-weight: 400;
      margin-bottom: 20px;
      color: #343a40;
    }
    .team-section p.description {
      color: #000;
      max-width: 800px;
      margin: 0 auto 50px auto;
      line-height: 1.6;
    }
    .team-card {
      border: none;
      border-radius: 15px;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      background: #fff;
    }
    .team-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    }
    .team-card img {
      width: 100%;

      object-fit: cover;
    }
    .team-card-body {
      padding: 20px;
    }
    .team-card-body h5 {
      font-weight: 600;
      margin-bottom: 10px;
      color: #343a40;
    }
    .team-card-body p {
      font-size: 16px;
      color: #000;
    }

     .why-us-section {
      padding: 60px 0;
      text-align: center;
    }
    .why-us-section h2 {
      font-weight: 700;
      margin-bottom: 20px;
      color: #343a40;
    }
    .why-us-section p {
      color: #000;
      max-width: 800px;
      margin: 0 auto 40px auto;
      line-height: 1.6;
      font-size: 16px;
    }
    .why-us-list {
      max-width: 700px;
      margin: 0 auto;
      text-align: left;
      padding-left: 0;
      list-style: none;
    }
    .why-us-list li {
      background: #fff;
      margin-bottom: 15px;
      padding: 15px 20px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      font-size: 16px;
      color: #000;
      position: relative;
      padding-left: 40px;
    }
    .why-us-list li::before {
      content: "✔";
      position: absolute;
      left: 15px;
      color: #1d3083; /* Bootstrap primary color */
      font-weight: 400;
    }


     .testimonial-section {
      padding: 80px 0;
      background: linear-gradient(135deg, #deffeb, #fff,  #a0f4c2);
    }
    .testimonial-card {
      max-width: 700px;
      margin: auto;
      background: #fff;
      padding: 40px 30px;
      border-radius: 20px;
      text-align: center;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .testimonial-card img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-bottom: 20px;
      border: 4px solid #007bff;
    }
    .testimonial-card p {
      font-style: italic;
      color: #444;
      font-size: 1.05rem;
      margin-bottom: 20px;
    }
    .testimonial-card h5 {
      font-weight: bold;
      margin-bottom: 5px;
      color: #222;
    }
    .testimonial-card span {
      font-size: 0.9rem;
      color: #777;
    }
    .carousel-indicators [data-bs-target] {
      background-color: #007bff;
    }

    .cta-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    background: linear-gradient(135deg, #242e7b,  #048d43);
    border-radius: 20px;
    margin: 50px auto;
    max-width: 1100px;
    color: #fff;
    position: relative;
    overflow: hidden;
  }

  /* Animated shapes */
  .cta-section::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    top: -50px;
    left: -50px;
    animation: float 6s ease-in-out infinite alternate;
  }

  .cta-section::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    bottom: -30px;
    right: -30px;
    animation: float 8s ease-in-out infinite alternate-reverse;
  }

  @keyframes float {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(20px) translateX(20px); }
  }

  .cta-content {
    flex: 1;
    padding-right: 20px;
    z-index: 1;
  }

  .cta-content h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .cta-content p {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .cta-button {
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    background: #fff;
    color: #ff6b6b;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  }

  .cta-button:hover {
    background: #ff4757;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 12px 25px rgba(0,0,0,0.3);
  }

  @media (max-width: 768px) {
    .cta-section {
      flex-direction: column;
      text-align: center;
    }
    .cta-content {
      padding-right: 0;
      margin-bottom: 20px;
    }
    
  .carousel-caption {
display: none !important;
}
.carousel-item img {
 height:100% !important;
    width: 100%;
    object-fit: cover;
}

  }

  .pre-footer {
    background: linear-gradient(135deg, #1d3083, #dd231d);
    color: #fff;
    padding: 80px 20px;
    border-radius: 20px 20px 0 0;
    position: relative;
    overflow: hidden;
  }

  .pre-footer::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    top: -50px;
    left: -50px;
    animation: float 6s ease-in-out infinite alternate;
  }

  .pre-footer::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    bottom: -30px;
    right: -30px;
    animation: float 8s ease-in-out infinite alternate-reverse;
  }

  @keyframes float {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(20px) translateX(20px); }
  }

  .pre-footer h2 {
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 20px;
  }

  .pre-footer p {
    font-size: 18px;
    margin-bottom: 30px; color:#fff;
  }

  .pre-footer .btn-contact {
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    border: none;
    background-color: #fff;
    color: #000;
    transition: all 0.3s ease;
  }

  .pre-footer .btn-contact:hover {
    background-color: #1b317a;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  }

  @media(max-width: 768px) {
    .pre-footer h2 { font-size: 32px; }
    .pre-footer p { font-size: 16px; }
    .pre-footer .btn-contact { font-size: 16px; padding: 12px 30px; }
  }


  footer {
    background-color: #223484;
    color: #fff;
    padding: 60px 20px;
  }

  footer h6 {
    font-weight: 700;
    margin-bottom: 20px;
  }

  footer a {

    color: #fff;
    text-decoration: none;

    transition: 0.3s; line-height:1.6;
  }
  footer p {
   line-height:1.6;     color: #fff;
  }
  footer a:hover {
    color: #ffd700;
  }

  hr {
    border-color: rgba(255,255,255,0.2);
    margin: 40px 0 20px;
  }

  .footer-bottom {
    text-align: center;
    font-size: 16px;
    color: #fff; background:#162c74; padding:20px; border-radius:10px;
  }

  @media(max-width:768px){
    footer .row {
      text-align: center;
    }
  }










  .footer {
  position: relative;
  background: #0057a5; /* Blue */
  color: white;
  padding: 50px 20px 0;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-content div {
  flex: 1 1 250px;
  margin: 15px;
}

.footer h3 {
  margin-bottom: 15px;
  color: #fff; font-size:20px; font-weight:bold;
}

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

.footer ul li {
  margin: 6px 0; border-bottom:1px solid #033d8c;
}

.footer ul li a {
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

.footer ul li a:hover {
  color: #22c55e;
}

.footer .wave {
  width: 100%;
  height: 100px;
  overflow: hidden;
  line-height: 0;
}



.footer-bottom {
  text-align: center;
  padding: 5px 0;
  background: #3474ba; /* Darker Blue */
}



  /* Floating Social Icons */
  .social-floating {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
  }

  .social-floating a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    text-decoration: none;
    border-radius: 0 25px 25px 0;
    font-size: 20px;
    transition: all 0.3s ease;
  }

  /* Official Brand Colors */
  .social-floating a.facebook { background-color: #1877F2; }
  .social-floating a.instagram { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  .social-floating a.linkedin { background-color: #0A66C2; }
  .social-floating a.youtube { background-color: #FF0000; }

  .social-floating a:hover {
    opacity: 0.8;
    transform: scale(1.1);
  }

  @media(max-width:768px){
    .social-floating {
      display: none; /* Hide on mobile */
    }
  }


  /* Floating Social Icons - Left */
  .social-floating-left {
    position: fixed;
    top: 40%;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
  }
  .social-floating-left a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #0d6efd;
    color: #fff;
    text-decoration: none;
    border-radius: 0 25px 25px 0;
    font-size: 20px;
    transition: all 0.3s ease;
  }
  .social-floating-left a:hover {
    background-color: #6610f2;
    transform: scale(1.1);
  }

  /* Floating Contact Icons - Right */
  .contact-floating-right {
    position: fixed;
    top: 40%;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
  }
  .contact-floating-right a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #25D366; /* WhatsApp green default, will change for call */
    color: #fff;
    text-decoration: none;
    border-radius: 25px 0 0 25px;
    font-size: 20px;
    transition: all 0.3s ease;
  }
  .contact-floating-right a.call {
    background-color: #0d6efd; /* Call icon blue */
  }
  .contact-floating-right a:hover {
    transform: scale(1.1);
  }

  @media(max-width:768px){
    .social-floating-left, .contact-floating-right {
      display: none; /* Hide on mobile for UX */
    }
  }


   .why-choose-section {
      padding: 80px 0;
      background: #f8fafc;
    }
    .why-choose-title {
      font-weight: 700;
      color: #222;
    }
    .timeline {
      position: relative;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .timeline::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background: #007bff;
      transform: translateX(-50%);
    }
    .timeline-item {
      position: relative;
      margin: 40px 0;
      width: 50%;
      padding: 20px 30px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
    }
    .timeline-item:hover {
      transform: translateY(-6px);
    }
    .timeline-item.left {
      left: 0;
    }
    .timeline-item.right {
      left: 50%;
    }
    .timeline-icon {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #007bff;
      color: #fff;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      z-index: 10;
    }
    .timeline-item h4 {
      font-weight: 600;
      color: #007bff;
      margin-bottom: 12px;
    }
    .timeline-item p {
      color: #444;
      margin: 0;
      line-height: 1.6;
    }
    .timeline-item span {
      font-weight: bold;
      color: #000;
    }

    /* Responsive */
    @media (max-width: 767px) {
      .timeline::before {
        left: 8px;
      }
      .timeline-item {
        width: 100%;
        margin-left: 30px;
      }
      .timeline-item.right {
        left: 0;
      }
      .timeline-icon {
        left: 0;
        transform: none;
      }
    }


     .marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background: linear-gradient(90deg, #eef4ff, #ffffff);
    padding: 30px 0;
  }

  .marquee {
    display: inline-flex;
    animation: scroll-left 20s linear infinite;
  }

  .marquee img {
    height: 70px;
    margin: 0 20px;
    filter: grayscale(100%);
    opacity: .8;
    transition: all .3s ease; border:1px solid #efefef; padding:10px;
  }

  .marquee img:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
  }

  /* Duplicate content makes loop seamless */
  @keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .marquee-content {
    display: flex;
  }

    /* Base Gradient */
  .about-gradient {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    position: relative;
    overflow: hidden;
  }

  /* Decorative Floating Shapes */
  .bg-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.25;
    filter: blur(60px);
  }
  .bg-shape-1 {
    width: 300px; height: 300px;
    background: #3b82f6;  /* blue */
    top: -80px; left: -100px;
  }
  .bg-shape-2 {
    width: 250px; height: 250px;
    background: #facc15; /* yellow */
    bottom: -60px; right: -80px;
  }
  .bg-shape-3 {
    width: 200px; height: 200px;
    background: #34d399; /* green */
    top: 50%; left: 60%;
    transform: translate(-50%, -50%);
  }

  /* Card hover */
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }

   /* Gradient Background */
    .custom-gradient {
      position: relative;
      background: linear-gradient(135deg, #dd3556, #764ba2, #48dbfb);
      color: #fff;
      overflow: hidden;
      z-index: 1;
    }

    /* Decorative soft shapes */
    .custom-gradient::before,
    .custom-gradient::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      opacity: 0.25;
      filter: blur(80px);
      z-index: 0;
    }

    .custom-gradient::before {
      width: 350px;
      height: 350px;
      background: #dd3556;
      top: -120px;
      left: -140px;
    }

    .custom-gradient::after {
      width: 280px;
      height: 280px;
      background: #48dbfb;
      bottom: -100px;
      right: -120px;
    }

    /* Card hover effect */
    .hover-lift {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hover-lift:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }

    /* Attractive icon style */
    .feature-icon {
      font-size: 2rem;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-bottom: 12px;
      background: linear-gradient(135deg, #dd3556, #764ba2, #48dbfb);
      color: #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }



      .about-banner {
      background: linear-gradient(135deg, #dd3556, #764ba2, #48dbfb);
      color: #fff;
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }

    /* Image collage style */
    .about-images {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 15px;
      height: 100%; /* 🔥 height equal karne ke liye */
    }

    .about-images img {
      width: 100%;
      height: 100%;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .about-images img:hover {
      transform: scale(1.05);
    }

    /* Decorative blur shapes */
    .about-banner::before,
    .about-banner::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      opacity: 0.2;
      filter: blur(120px);
    }

    .about-banner::before {
      width: 350px;
      height: 350px;
      background: #dd3556;
      top: -120px;
      left: -100px;
    }

    .about-banner::after {
      width: 300px;
      height: 300px;
      background: #48dbfb;
      bottom: -120px;
      right: -80px;
    }

    /* Animated CTA Button */
  .btn-cta {
    position: relative;
    display: inline-block;
    padding: 8px 36px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;

    color: #fff;
    background: linear-gradient(135deg, #000, #242424, #000);
    border: none;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  }
  .btn-cta a{text-decoration: none;}
  /* Shine Effect */
  .btn-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75px;
    width: 50px;
    height: 100%;
    background: rgba(255,255,255,0.6);
    transform: skewX(-25deg);
    animation: shine 3s infinite;
    z-index: 2;
  }

  @keyframes shine {
    0% { left: -75px; }
    50% { left: 120%; }
    100% { left: 120%; }
  }

  /* Glow Hover Effect */
  .btn-cta:hover {
    transform: scale(1.07);
    box-shadow: 0 10px 25px rgba(221,53,86,0.5), 
                0 10px 25px rgba(118,75,162,0.5),
                0 10px 25px rgba(72,219,251,0.5);
  }


  .why-section {
      background: linear-gradient(135deg, #f0f4ff, #ffffff);
      padding: 80px 0;
    }
    .why-card {
      border: none;
      border-radius: 18px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
      background: #fff;
    }
    .why-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 30px rgba(0,0,0,0.12);
    }
    .why-icon {
      font-size: 48px;
      margin-bottom: 20px;
    }
    .bad-text {
      background: #fff5f5;
      color: #e03131;
      padding: 12px;
      border-radius: 10px;
      margin-bottom: 12px;
      font-weight: 500;
    }
    .good-text {
      background: #f2fff6;
      color: #2f9e44;
      padding: 12px;
      border-radius: 10px;
      font-weight: 500;
    }


    /*******About us page*******/


       .about-section {
      background: #f8f9fa;
      padding: 60px 0;
    }
    .about-section h2 {
      font-weight: 700;
      font-size: 32px;
      margin-bottom: 20px;
      color: #2c3e50;
      text-transform: uppercase;
      border-left: 6px solid #ff6600;
      padding-left: 10px;
    }
    .about-text {
      background: #fff;
      border-radius: 10px;
      padding: 25px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }
    .about-text h4 {
      margin-top: 25px;
      color: #ff6600;
      font-weight: 600;
    }
    ul.custom-list {
      list-style: none;
      padding: 0;
    }
    ul.custom-list li {
      margin-bottom: 8px;
      position: relative;
      padding-left: 25px; color: #000;
    }
    ul.custom-list li::before {
      content: "✔";
      position: absolute;
      left: 0;
      color: #ff6600;
      font-weight: bold;
    }


    /*****Contact us page***/

.breadcrumb-section {
  background: linear-gradient(135deg, #1a73e8, #34a853); /* Blue + Green Gradient */
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}

.breadcrumb-section::after {

  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 60px;
  background: white;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  justify-content: center; /* center aligned */
  flex-wrap: wrap;
}

.breadcrumb-item a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb-item.active {
  color: #d4f1d4; /* light green */
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #fff;
}

    .contact-section {
      padding: 70px 0;
    }
    .section-title {
      font-weight: bold;
      color: #333;
      margin-bottom: 30px;
    }
    .contact-info {
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      transition: 0.3s;
    }
    .contact-info:hover {
      transform: translateY(-5px);
    }
    .contact-info i {
      font-size: 28px;
      color: #ff6b6b;
      margin-right: 15px;
    }
    .contact-info p, 
    .contact-info a {
      margin: 0;
      color: #444;
    }
    .contact-form {
      background: #fff;
      padding: 35px;
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    .form-control {
      border-radius: 10px;
      border: 1px solid #ddd;
    }
    .btn-custom {
      background: linear-gradient(135deg, #0057a5, #ed1c24);
      color: #fff !important;
      border-radius: 50px;
      padding: 12px 35px;
      font-weight: bold;
      transition: 0.3s;
      box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4);
    }
    .btn-custom:hover {
      background: linear-gradient(135deg, #038e46, #ed1c24);
      transform: scale(1.07);
      box-shadow: 0 6px 15px rgba(255, 107, 107, 0.6);
    }
    .contact-img {
      border-radius: 12px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }


    /******Product section********/

    .product-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    padding: 15px;
    transition: 0.3s;
  }

  .product-card:hover {
    transform: translateY(-5px);
  }

  .zoomable-img {
    width: 100%;
    border-radius: 12px;
    cursor: zoom-in;
    transition: transform 0.4s ease;
  }

  .zoomable-img:hover {
    transform: scale(1.1);
  }

  /* Overlay Style */
  .overlay {
    position: fixed;
    display: none;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
  }

  .overlay img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
  }


 /* Basic reset for safety */
  #backToTop { all: unset; box-sizing: border-box; }

  /* Button style */
  #backToTop {
    position: fixed !important;
    right: 20px;
    bottom: 22px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg,#0b63d6,#2ed199);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(11,99,214,0.18);
    cursor: pointer;
    z-index: 99999 !important;        /* very high z-index */
    transform: translateY(20px);
    opacity: 0;
    transition: transform .32s cubic-bezier(.2,.9,.3,1), opacity .28s;
    pointer-events: none;
  }

  /* visible state */
  #backToTop.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* hover */
  #backToTop:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(11,99,214,0.25);
  }

  /* mobile tweak so it doesn't clash with floating action buttons */
  @media (max-width: 576px) {
    #backToTop { right: 16px; bottom: 18px; width:48px; height:48px; }
  }