*{box-sizing:border-box}

html,body{height:100%}

body{
 font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 color: #102027;
 background: #fff;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}
        .hero-gradient-bg {
            background-image: linear-gradient(-135deg, #D9BEF5 0%, #FFFFFF 30%, #F5E5D3 70%, #F6CAF6 100%); 
            height :550px;
        }

       .button-gradient {
  background-image:linear-gradient(353deg, #E178EF, #FB9851);
  transition: all 0.3s ease;
  background-size: 200% auto;
  border: none;
  padding: 10px 20px !important; 
  font-size: 22px !important;  
}


        .button-gradient:hover {
            background-position: right center;
            box-shadow: 0 10px 15px -3px rgba(109, 40, 217, 0.4), 0 4px 6px -2px rgba(109, 40, 217, 0.2);
        }
        
        @keyframes float {
            0% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-8px) scale(1.005); }
            100% { transform: translateY(0px) scale(1); }
        }
        
        .animate-float {
            animation: float 4s ease-in-out infinite;
        }
        
       /* Initial zoom-out animation */
@keyframes zoomOut {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Continuous floating animation (after zoom-out) */
@keyframes floatContinuous {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Combine both animations for smooth entry + floating */
.main-mockup {
  animation: zoomOut 1.2s ease-out forwards, floatContinuous 2.5s ease-in-out 1.2s infinite;
  transition: transform 0.3s ease;
}

/* ===== Responsive Fixes for Hero Section ===== */
@media (max-width: 991px) {
  .hero-gradient-bg {
    height: auto;               
    padding: 80px 20px 60px;    
    text-align: center;         
  }

  .main-mockup {
    width: 80%;                 
    max-width: 320px;           
    margin: 20px auto 0;        
  }

  .button-gradient {
    font-size: 18px !important; 
    padding: 8px 18px !important;
    display: inline-block;
    margin-top: 15px;
  }
}

/* ===== Smaller screens (e.g. phones under 576px) ===== */
@media (max-width: 576px) {
  .hero-gradient-bg {
    padding: 60px 15px 40px;
  }

  .main-mockup {
    width: 90%;
    max-width: 280px;
  }

  .button-gradient {
    font-size: 16px !important;
    padding: 7px 15px !important;
  }
}




/* How We Do It Section */
.how-we-do {
  position: relative;
  width: 100%;
  height: auto;
  background-position: left center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1;
}

/* Decorative background image behind section */
.how-we-do::before {
  content: "";
  position: absolute;
  top: -60px; /* Adjusts image vertical position */
  left: 0;
  width: 100%;
  height: 480px; /* Adjust for best height look */
  background: url('images/whitebgltr.png') no-repeat left center;
  background-size: contain; /* Keeps proportions */
  z-index: -1;
  opacity: 1; /* adjust if you want it lighter (0.8 or 0.6) */
}

/* Basic Reset */
*, ::after, ::before {
  box-sizing: border-box;
}


.how-we-do h2 {
  font-size: 4rem;
  line-height: 1.1;
}

.how-we-do .text-primary {
font-weight: 700; 
font-size: 58px; 
margin-bottom: 18px; 
position: relative; 
background: linear-gradient(180deg, #dd18f8, #ff7b1c) ; 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;
    
}

.how-img {
  max-width: 220px;
}

.how-img:hover {
  transform: rotate(0deg) scale(1.05);
}

.how-text {
  color: #3b3b3b;
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 992px) {
  .how-we-do h2 {
    font-size: 3rem;
  }
  .how-img {
    max-width: 110px;
  }
  .how-text {
    max-width: 100%;
  }
}

/* Packages section */
.section-heading{
    font-size:32px;
    font-weight:700;
    color:#2F134C;
    }
.package-panel{
 margin-top:30px;
 background: linear-gradient(180deg, rgba(181, 81, 240, 0.92), rgba(191, 54, 245, 0.95));
 color:#fff; border-radius:24px; border: 1px solid rgba(255,255,255,0.06);
}

/* small text style inside panel */
.text-white-70{ color: rgba(255,255,255,0.8); }
.package-panel h5{ color:#fff; font-weight:700; margin-bottom:12px; }

/* pricing cards */
.price-card{
 background: rgba(255,255,255,0.04);
 border-radius:14px;
 border: 1px solid rgba(255,255,255,0.6);
 min-height:160px;
}

.price-card .badge{ 
    background:#bd4df9;
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    margin-top: -21px;
    box-shadow: -1px 1px 0px 1px #69009d;;
    border-radius: 50px;}
    
    
.price-value{ font-size:28px; font-weight:800; margin-top:10px; color:#fff; }
.price-sub{ color: rgba(255,255,255,0.7); margin-top:6px; }
.btn-outline-light{
     background-image:linear-gradient(176deg, #000000 3.53%, #bb56fc 100%);
     transition: all 0.3s ease;
     background-size: 200% auto;
     border: none;
     padding: 7px 20px !important;
     font-size: 16px !important;  
}

/* ===== Responsive Packages Section ===== */
@media (max-width: 991px) {
  .section-heading {
    text-align: center;          
    font-size: 26px;
  }

  .package-panel {
    margin: 20px auto;           
    width: 90%;                  
    padding: 25px 20px;
    text-align: center;          
  }

  .price-card {
    margin: 15px auto;           
    width: 100%;                 
    max-width: 340px;            
    text-align: center;
  }

  .price-card .badge {
    margin: 0 auto;              
    display: inline-block;
  }

  .price-value {
    font-size: 24px;             
  }

  .btn-outline-light {
    display: inline-block;
    margin: 15px auto 0;
    font-size: 15px !important;
    padding: 8px 18px !important;
  }
}

/* ===== Smaller screens (under 576px) ===== */
@media (max-width: 576px) {
  .section-heading {
    font-size: 22px;
  }

  .package-panel {
    width: 95%;
    padding: 20px 15px;
  }

  .price-card {
    max-width: 300px;
  }

  .price-value {
    font-size: 22px;
  }

  .btn-outline-light {
    font-size: 14px !important;
    padding: 7px 16px !important;
  }
}


    /* ===== Section ===== */
    .roadmap-section {
      background-color: #fff;
      position: relative;
      overflow: hidden;
      padding: 100px 0;
    }

    /* ===== Gradient Text ===== */
    .gradient-text {
      background: linear-gradient(180deg, #dd18f8, #ff7b1c);
      font-size: 180px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: glowText 3s infinite alternate;
    }

    @keyframes glowText {
      0% { text-shadow: 0 0 10px #dd18f8; }
      100% { text-shadow: 0 0 20px #ff7b1c; }
    }

    /* ===== Coins ===== */
    .coin-left {
  position: absolute;
  left: 0;                   /* ensures it stays on the left side */
  width: auto;               /* lets it use full image width naturally */
  height: auto;              /* lets height adjust automatically */
  max-width: 120px;          /* optional - control max size */
  opacity: 0.9;
  z-index: 1;
  object-fit: contain;       /* ensures no cropping */
}

    .coin-right {
      position: absolute;
      top: 38%;
      width: auto;               /* lets it use full image width naturally */
  height: auto;
    max-width: 120px;          /* optional - control max size */

      transform: translateY(-60%);
      opacity: 0.9;
      z-index: 1;
    }

    .coin-right { right: 45px; }

    /* ===== Steps Line ===== */
.steps-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;   /* ✅ align items at the top */
  gap: 20px;
  flex-wrap: nowrap;
  margin: 50px auto;
  position: relative;
  z-index: 2;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 20px 0;
  scrollbar-width: thin;
  width: fit-content;
}

.steps-wrapper::-webkit-scrollbar {
  height: 6px;
}
.steps-wrapper::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

.process-step {
  text-align: left;
  width: 150px;
  flex-shrink: 0;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* ✅ ensures image, heading, list are aligned left and top */
}

.process-step img {
  width: 55px;
  height: 55px;
  display: block;
  margin-bottom: 10px;
  object-fit: contain;
}


    .process-step h5 {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 8px;
    }

    .process-step ul {
      padding-left: 15px;
      margin: 0;
      list-style: disc;
      font-size: 13px;
      color: #333;
    }

    /* ===== Arrow Between Steps ===== */
   .arrow {
  width: 50px;
  height: 2px;
  background-color: #007bff;
  position: relative;
  align-self: center;        
  margin: 0 10px;            
  animation: moveArrow 2s infinite ease-in-out;
  flex-shrink: 0;
    top: -80px;

}

.arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #007bff;
  border-right: 2px solid #007bff;
  transform: rotate(45deg);
}


    @keyframes moveArrow {
      0% { transform: translateX(0); opacity: 1; }
      50% { transform: translateX(8px); opacity: 0.8; }
      100% { transform: translateX(0); opacity: 1; }
    }

    /* ===== Responsive ===== */
    @media (max-width: 992px) {
      .steps-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 40px;
      }
      .arrow {
        display: none;
      }
      .process-step {
        text-align: center;
        width: 100%;
      }
    }
    
    /* ===== Responsive Roadmap Section ===== */

/* Tablet view adjustments */
@media (max-width: 991px) {
  .roadmap-section {
    padding: 70px 20px;                /* ✅ reduce padding for smaller screens */
    text-align: center;
  }

  .gradient-text {
    font-size: 90px;                   /* ✅ smaller gradient heading */
    line-height: 1;
  }

  .coin-left,
  .coin-right {
    max-width: 80px;                   /* ✅ smaller coin images */
    opacity: 0.8;
  }

  .coin-left {
    top: 5%;
    left: 10px;                        /* ✅ shift slightly inward */
  }

  .coin-right {
    top: 20%;
    right: 10px;
    transform: none;
  }

  .steps-wrapper {
    flex-direction: column;            /* ✅ stack steps vertically */
    align-items: center;
    justify-content: center;
    overflow: visible;                 /* ✅ allow full height */
    gap: 40px;
    padding: 20px 0;
  }

  .process-step {
    width: 90%;
    max-width: 350px;
    text-align: center;
    align-items: center;
  }

  .process-step img {
    width: 60px;
    height: 60px;
  }

  .process-step h5 {
    font-size: 18px;
  }

  .process-step ul {
    font-size: 14px;
  }

  .arrow {
    display: none;                     /* ✅ hide arrows on mobile */
  }
}

/* ===== Small phones (under 576px) ===== */
@media (max-width: 576px) {
  .roadmap-section {
    padding: 60px 10px;
  }

  .gradient-text {
    font-size: 60px;                   /* ✅ smaller gradient title */
  }

  .coin-left,
  .coin-right {
    display: none;                     /* ✅ hide coins if they overlap content */
  }

  .process-step {
    width: 100%;
    max-width: 300px;
  }

  .process-step img {
    width: 50px;
    height: 50px;
  }

  .process-step h5 {
    font-size: 16px;
  }

  .process-step ul {
    font-size: 13px;
  }
}
/* ===== General Section Styling ===== */
.milestones-section {
  background-color: #fff;
  position: relative;
}

/* ===== Dot after heading ===== */
.milestones-section .dot {
  color: #bfbfbf;
  font-weight: 700;
}

/* ===== One Stop Solution Box ===== */
.solution-box {
  background: linear-gradient(to right, #e178ef 0%, #f9bca4 50%, #bd4df9 100%);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* desktop layout: image right */
  gap: 20px;
  flex-wrap: nowrap; /* desktop pe wrap nahi hoga */
}

.solution-box:hover {
  transform: translateY(-5px);
}

/* ===== Gears Image ===== */
.gears-image img {
  width: 340px;
  height: auto; /* maintain aspect ratio */
  margin-right: 380px; /* desktop margin preserved */
}

/* ===== Tablet Responsive ===== */
@media (max-width: 992px) {
  .solution-box {
    flex-direction: column; /* stack content vertically */
    text-align: center;
    flex-wrap: wrap; /* allow wrapping */
  }

  .gears-image img {
    margin: 20px 0 0 0; /* spacing above image */
    width: 220px;
  }
}

/* ===== Mobile Responsive ===== */
@media (max-width: 576px) {
  .solution-box {
    padding: 15px;
  }

  .gears-image img {
    width: 180px;
    margin: 15px 0 0 0;
  }
}


.contact-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url('images/whitebgltr.png') no-repeat center center; /* position set */
  background-size: cover; /* cover full section */
}


/* Left info box with image */
.info-box {
    position: relative;          
    width: 100%;            
    height: 100%;                 
    min-height: 400px;            
    border-radius: 1.563vw;       
    color: #fff;                  
    overflow: hidden;  
    
}


/* Right form box */
.form-box {
  background:linear-gradient(-135deg, #D9BEF5 0%, #FFFFFF 30%, #F5E5D3 70%, #F6CAF6 100%);
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Form elements */
.form-control {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 10px 15px;
}

.form-control:focus {
  background: #fff;
  border-color: #ff7b1c;
  color: #000;
  box-shadow: none;
}


.btn-primary {
background-image:linear-gradient(353deg, #E178EF, #FB9851);
  border: none;
  border-radius: 10px;
  transition: 0.3s;
}


.btn-primary:hover {
  background: #bd4df9;
}





.roadmap-section {
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  padding: 100px 0;
}

/* Track image */
/* ===== Track image fixed for desktop ===== */
.roadmap-track {
  width: 85%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  z-index: 1;
  pointer-events: none; /* so it doesn’t block clicks */
  opacity: 0.9; /* optional for better blending */
margin-top: -50px !important;
    height: 230px;}


/* Step container */
.steps-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: 30px; /* spacing between items in a row */
  row-gap: 40px;    /* ✅ reduced spacing between the two rows */
  max-width: 1000px;
  margin: 50px auto;
  position: relative;
  z-index: 2;
  margin-top:50px !important;
}


.step {
  flex: 1 1 calc(25% - 40px); /* ✅ 4 items per row */
  text-align: center;
  min-width: 200px;
}

.circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
  position: relative;
  overflow: hidden;
  
}

.circle img {
  width: 50%;
  height: 50%;
  object-fit: contain;
}

.circle.blue {
  background: linear-gradient(180deg, #dd18f8, #ff7b1c);
}

.circle.gray {
  background: #ccc;
}

.step-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .step {
    flex: 1 1 calc(50% - 30px); /* ✅ 2 per row on tablet */
  }
}

@media (max-width: 575px) {
  .step {
    flex: 1 1 100%; /* ✅ 1 per row on mobile */
  }
}


/* Responsive */
@media (max-width: 768px) {
  .steps-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .roadmap-track {
    display: none; /* hide track for mobile for clarity */
  }

  .circle {
    width: 80px;
    height: 80px;
  }

  .circle img {
    width: 20px;
    height: 20px;
  }
}


.services-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Tilted Header */
.services-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  background: linear-gradient(90deg, #292929, #000);
  color: #fff;
  padding: 10px 40px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.4rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  margin-bottom: 20px !important;
}

/* ===== Animated List ===== */
.service-list {
  padding-left: 0;
  list-style: none;
}

.service-list li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 30px;
  font-size: 1rem;
  color: #555;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #dd18f8, #ff7b1c);
  box-shadow: 0 0 10px #ff7b1c;
  animation: pulse 2.5s infinite ease-in-out;
}

/* Loader Animation */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Image & Circle Background ===== */
.image-wrapper {
  position: relative;
  display: inline-block;
}

.blue-circle {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 350px;
  height: 350px;
  background: linear-gradient(180deg, #dd18f8, #ff7b1c);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.service-img {
  position: relative;
  width: 100%;
  max-width: 350px;
  z-index: 2;
  filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.25));
}

/* ===== Responsive Fix ===== */
@media (max-width: 991px) {
  .services-title {
    font-size: 1.1rem;
    padding: 8px 25px;
  }

  .service-heading,
  .service-subheading {
    font-size: 1.5rem;
  }

  /* Fix: add spacing so image + circle stay below text */
  .col-lg-6.text-center.text-lg-end {
    margin-top: 60px !important;
  }

  .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
  }

  .blue-circle {
    width: 250px;
    height: 250px;
    position: absolute;
  }

  .service-img {
    max-width: 250px;
    position: relative;
    z-index: 2;
  }
}

.services-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* ===== Header ===== */
.service-heading {
  font-size: 2rem;
  font-weight: 800;
  color: #222;
}

.service-heading .highlight {
  color: #0072ee;
}

/* ===== Animated List ===== */
.service-list {
  padding-left: 0;
  list-style: none;
  margin-top: 25px;
}

.service-list li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 30px;
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #dd18f8, #ff7b1c);
  box-shadow: 0 0 10px #ff7b1c;
  animation: pulse 2.5s infinite ease-in-out;
}

/* Loader Animation */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Image & Circle Background ===== */
.image-wrapper {
  position: relative;
  display: inline-block;
}

.blue-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  background: linear-gradient(180deg, #dd18f8, #ff7b1c);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.service-img {
  position: relative;
  width: 100%;
  max-width: 350px;
  z-index: 2;
  filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.25));
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .service-heading {
    font-size: 1.5rem;
    text-align: center;
  }

  .service-list {
    text-align: left;
  }

  .col-lg-6.text-center.text-lg-start {
    margin-bottom: 50px;
  }

  .blue-circle {
    width: 250px;
    height: 250px;
  }

  .service-img {
    max-width: 250px;
  }

  .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}