  body {
      overflow-x: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }

  .nav-container {
      max-width: 1140px;
  }

  .navbar {
      padding: 1rem 0;
      background: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .navbar-brand {
      font-size: 28px;
      font-weight: 600;
      color: #5dccbe !important;
      display: flex;
      align-items: center;
  }


  .logo-icon {
      width: 28px;
      height: 28px;
      margin-right: 8px;
  }

  .nav-link {
      color: #2c3e50 !important;
      font-size: 17px;
      padding: 0.5rem 1rem !important;
      font-weight: 400;
  }

  .nav-link:hover {
      color: #5dccbe !important;
  }

  .btn-buy {
      background-color: #5fc3c9;
      border: none;
      color: white;
      padding: 18px 31px;
      border-radius: 4px;
      font-size: 0.9rem;
      font-weight: 500;
  }

  /* Main Section - Desktop */
  .main-section {
      position: relative;
      padding-bottom: 200px;
  }

  .hero-content {
      padding: 3rem 0;
      position: relative;
      z-index: 1;
  }

  h1,
  h2,
  h3 {
      font-family: 'Arima Madurai', cursive;
      font-weight: 700;
  }

  .hero-title {
      font-weight: 700;
      font-size: 52px;
      line-height: 1.2;
      color: #2c3e50;
      margin-bottom: 1.5rem;
  }

  .hero-text {
      width: 74%;
      color: #7f8c8d;
      font-size: 0.95rem;
      margin-bottom: 2rem;
  }

  .btn-check {
      background-color: #5dccbe;
      border: none;
      color: white;
      padding: 14px 32px;
      font-size: 0.95rem;
      border-radius: 4px;
      font-weight: 500;
  }

  .hero-image-container {
      position: relative;
  }

  .hero-image {
      border-radius: 15px;
      width: 817px;
      height: auto;
      max-width: 830px;
      position: absolute;
      top: 0;
      right: -17px;
  }

  /* Experience Card */
  .experience-card {
      position: absolute;
      bottom: -195px;
      left: 30px;
      border-radius: 20px;
      padding: 2.5rem 2rem;
      width: 350px;
      z-index: 11;

  }

  .experience-card h2 {
      font-size: 32px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 1rem;
      line-height: 1.3;
  }

  .experience-card p {
      color: #7f8c8d;
      font-size: 0.95rem;
      line-height: 1.6;
      margin: 0;
  }

  /* Stats Cards */
  .stats-overlay {
      position: absolute;
      bottom: -243px;
      right: 0;
      width: 100%;
      z-index: 10;
  }

  .stats-cards-wrapper {
      justify-content: flex-end;
      padding-right: 87px;
  }

  .stats-card {
      border: none;
      border-radius: 15px;
      padding: 2rem;
      text-align: center;
      width: 243px;
      height: 367px;
      transition: transform 0.3s;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .stats-card:hover {
      transform: translateY(-5px);
  }

  .stats-card-pink {
      background-color: #FFB3C1;
  }

  .stats-card-orange {
      background-color: #FF9D7A;
  }

  .stats-card-teal {
      background-color: #5DCCB8;
  }

  .stats-card h3,
  .stats-card h5,
  .stats-card p {
      color: white;
  }

  .stats-card h3 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 0.3rem;
  }

  .stats-card h5 {
      font-size: 19px;
      font-weight: 600;
      margin-bottom: 1rem;
  }

  .stats-card p {
      font-size: 0.85rem;
      opacity: 0.95;
      line-height: 1.9;
  }

  /* Services Section */
  .services-section {
      padding-top: 300px;
      padding-bottom: 60px;
  }

  .section-subtitle {
      font-family: 'Arima Madurai', cursive;
      color: #5fc3c9;
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 15px;
  }

  .section-title {
      font-size: 42px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 20px;
  }

  .section-description {
      color: #6c757d;
      font-size: 16px;
      max-width: 700px;
      margin: 0 auto 95px;
      line-height: 1.6;
  }

  .service-card {
      background: #fff;
      border-radius: 20px;
      padding: 50px 35px;
      transition: all 0.3s ease;
      border: none;
      height: 100%;
      position: relative;
      margin-top: 100px;
  }

  .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .service-card.green {
      background: #e8f8f5;
  }

  .service-card.orange {
      background: #fff4ed;
  }

  .service-card.pink {
      background: #fff0f5;
  }

  .icon-wrapper {
      width: 168px;
      height: 168px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 30px;
      position: absolute;
      top: -92px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .icon-wrapper i {
      font-size: 60px;
  }

  .green .icon-wrapper i {
      color: #3fc1b3;
  }

  .orange .icon-wrapper i {
      color: #f79165;
  }

  .pink .icon-wrapper i {
      color: #f585a68c;
  }

  .service-title {
      text-align: center;
      margin-top: 70px;
      font-size: 26px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 25px;
      line-height: 1.4;
  }

  .title-underline {
      width: 75px;
      height: 5px;
      margin: 0 auto 30px;
      border-radius: 2px;
  }

  .green .title-underline {
      background: #3fc1b3;
  }

  .orange .title-underline {
      background: #ff7e47;
  }

  .pink .title-underline {
      background: #ff5c8d;
  }

  .service-description {
      color: #555;
      font-size: 15px;
      margin-bottom: 30px;
      line-height: 1.8;
  }

  .feature-list {
      list-style: none;
      padding: 0;
      text-align: left;
  }

  .feature-list li {
      padding: 10px 0;
      color: #444;
      font-size: 15px;
      display: flex;
      align-items: flex-start;
      line-height: 1.5;
  }

  .feature-list li i {
      margin-right: 15px;
      margin-top: 3px;
      font-size: 16px;
      flex-shrink: 0;
  }

  .green .feature-list li i {
      color: #3fc1b3;
  }

  .orange .feature-list li i {
      color: #ff7e47;
  }

  .pink .feature-list li i {
      color: #ff5c8d;
  }

  /* Contact Section */
  .contact-section {
      padding: 80px 0;
  }

  .contact-text {
      font-size: 32px;
      font-weight: 400;
      color: #2c3e50;
      margin-bottom: 40px;
      line-height: 1.6;
  }

  .contact-number {
      color: #5fc3c9;
      font-weight: 800;
  }

  .btn-send-request {
      background: #5fc3c9;
      color: #fff;
      border: none;
      padding: 16px 45px;
      font-size: 18px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      box-shadow: 0 4px 15px rgba(95, 195, 201, 0.3);
  }

  .btn-send-request:hover {
      background: #4fb0b6;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(95, 195, 201, 0.4);
  }

  /* About Section */
  .about-main {
      position: relative;
      margin: 80px 0;
  }

  .about-container {
      display: flex;
      max-width: 882px;
      background-color: #f0fafa;
      align-items: center;
  }

  .content-side {
      flex: 1;
      padding: 50px 80px;
  }

  .text-teal {
      color: #4dc2c2;
      font-size: 1.5rem;
      margin-bottom: 15px;
  }

  .main-name {
      font-family: 'Arima Madurai', sans-serif;
      font-size: 50px;
      color: #000;
      margin-bottom: 30px;
      font-weight: 700 !important;
  }

  .description p {
      color: #666;
      line-height: 1.6;
      margin-bottom: 20px;
      font-size: 0.95rem;
  }

  .wdt {
      width: 85% !important;
  }

  .contact-info {
      margin-top: 40px;
  }

  .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      color: #000;
  }

  .icon {
      color: #4dc2c2;
      margin-right: 15px;
      font-size: 1.2rem;
  }

  .image-side {
      position: absolute;
      right: 50px;
      top: 50%;
      transform: translateY(-50%);
  }

  .image-side img {
      width: 500px;
      height: 500px;
      border-radius: 12px;
      object-fit: cover;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  /* Pricing Section */
  .pricing-section {
      padding: 80px 0;
      background-color: #fff;
  }

  .pricing-card {
      background: #fff;
      border-radius: 15px;
      padding: 45px 35px;
      margin-bottom: 30px;
      box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.4s ease;
      position: relative;
      height: 100%;
  }

  .pricing-card:hover {
      background: #5fc3c9;
      transform: scale(1.05);
      box-shadow: 0 10px 40px rgba(95, 195, 201, 0.3);
  }

  .pricing-card:hover .plan-title,
  .pricing-card:hover .plan-price,
  .pricing-card:hover .plan-details p {
      color: #fff !important;
  }

  .pricing-card:hover .plan-icon {
      background: #fff;
  }

  .pricing-card:hover .plan-icon i {
      color: #5fc3c9 !important;
  }

  .pricing-card:hover .price-divider {
      background: #fff !important;
  }

  .pricing-card:hover .plan-features li {
      color: #fff;
  }

  .pricing-card:hover .plan-features li i {
      color: #fff !important;
  }

  .plan-icon {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      transition: all 0.3s ease;
  }

  .plan-icon i {
      font-size: 32px;
      transition: all 0.3s ease;
  }

  .orange-icon {
      background: #fff0e6;
  }

  .orange-icon i {
      color: #ff8c5f;
  }

  .green-icon {
      background: #e8f8f5;
  }

  .green-icon i {
      color: #3fc1b3;
  }

  .white-icon {
      background: aliceblue;
  }

  .white-icon i {
      color: #5fc3c9;
  }

  .plan-title {
      text-align: center;
      font-size: 32px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 20px;
      transition: all 0.3s ease;
  }

  .plan-price {
      text-align: center;
      margin-bottom: 25px;
      transition: all 0.3s ease;
  }

  .plan-price .currency {
      font-size: 24px;
      color: #6c757d;
      vertical-align: top;
      margin-top: 5px;
      display: inline-block;
  }

  .plan-price .amount {
      font-size: 56px;
      font-weight: 200;
      color: #343a40a8;
  }

  .plan-price .period {
      vertical-align: top;
      font-size: 16px;
      color: #6c757d;
      margin-left: 5px;
  }

  .price-divider {
      width: 201px;
      height: 3px;
      margin: 0 auto 30px;
      background: #5fc3c9;
      border-radius: 2px;
      transition: all 0.3s ease;
  }

  .plan-features {
      list-style: none;
      padding: 0;
      margin-bottom: 30px;
  }

  .plan-features li {
      padding: 10px 0;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #444;
      transition: all 0.3s ease;
  }

  .plan-features li i {
      margin-right: 10px;
      font-size: 18px;
      transition: all 0.3s ease;
  }

  .orange-check i {
      color: #ff8c5f;
  }

  .green-check i {
      color: #3fc1b3;
  }

  .white-check i {
      color: #5fc3c9;
  }

  .plan-details {
      margin-bottom: 30px;
      min-height: 90px;
  }

  .plan-details p {
      margin-bottom: 10px;
      font-size: 16px;
      color: #666;
      transition: all 0.3s ease;
  }

  .btn-plan-request {
      border: none;
      padding: 14px 35px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      background: #5fc3c9;
      color: #fff;
  }

  .btn-plan-request:hover {
      background: #4fb0b6;
  }

  .pricing-card:hover .btn-plan-request {
      background: #fff;
      color: #5fc3c9;
  }

  /* Testimonials */
  .testimonials-section {
      padding: 80px 0;
      background: linear-gradient(to bottom, #cae8e8 0%, #e9e1e1 100%);
      position: relative;
      overflow: hidden;
  }

  .testimonials-section::before {
      content: '';
      position: absolute;
      left: -401px;
      border-radius: 263px;
      top: 37%;
      width: 465px;
      height: 465px;
      background-image: url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=400&h=600&fit=crop');
      background-size: cover;
      background-position: center;
      opacity: 0.8;
      z-index: 0;
  }

  .testimonials-section::after {
      content: '';
      position: absolute;
      right: -401px;
      border-radius: 263px;
      top: 37%;
      width: 465px;
      height: 465px;
      background-image: url('https://images.unsplash.com/photo-1511688878353-3a2f5be94cd7?w=400&h=600&fit=crop');
      background-size: cover;
      background-position: center;
      opacity: 0.8;
      z-index: 0;
  }

  .testimonials-carousel {
      max-width: 900px;
      margin: 60px auto 0;
      position: relative;
      z-index: 1;
  }

  .client-image {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      margin: 0 auto 30px;
      display: block;
      border: 5px solid #fff;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  }

  .quote-box {
      background: #cbd6e40a;
      padding: 40px 50px;
      margin: 0 auto 0;
      max-width: 800px;
      position: relative;
      box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  }

  .quote-box::before {
      content: '"';
      font-size: 80px;
      color: #403f3f;
      position: absolute;
      top: 20px;
      left: 30px;
      font-family: Georgia, serif;
      line-height: 1;
  }

  .quote-text {
      font-size: 16px;
      color: #666;
      text-align: center;
      position: relative;
      z-index: 1;
  }

  .quote-text p {
      border-bottom: 1px solid #fff;
      padding-bottom: 10px;
      margin-bottom: 10px;
  }

  .decorative-dots {
      text-align: center;
      color: #5fc3c9;
      font-size: 40px;
      letter-spacing: 10px;
      line-height: 1;
  }

  .client-info {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      margin: 20px 0 30px;
  }

  .carousel-indicators {
      position: relative;
      margin-bottom: 0;
  }

  .carousel-indicators [data-bs-target] {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #d0d0d0;
      border: none;
      margin: 0 6px;
      transition: all 0.3s ease;
  }

  .carousel-indicators .active {
      background-color: #5fc3c9;
      width: 14px;
      height: 14px;
  }

  /* Useful Links */
  .useful-links {
      padding: 80px 0;
      background: white;
  }

  .article-box {
      padding: 0px;
  }

  .article-img-wrapper {
      overflow: hidden;
      border-radius: 6px;
      cursor: pointer;
      margin-bottom: 20px;
  }

  .article-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: transform 0.4s ease;
  }

  .article-box:hover .article-img {
      transform: scale(1.15);
  }

  .article-title {
      font-family: 'Arima Madurai', sans-serif;
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 1.4;
      color: #333;
      margin-bottom: 15px;
      cursor: pointer;
  }

  .article-divider {
      width: 68px;
      height: 6px;
      background-color: #d1f1f4;
      margin-bottom: 20px;
      border-radius: 2px;
  }

  .article-text {
      font-size: 0.9rem;
      color: black;
      line-height: 1.6;
      margin-bottom: 25px;
  }

  .article-link-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background-color: #d1f1f4;
      color: #5bc6d0;
      border-radius: 50%;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  /* Contact Form */
  .contact-wrapper {
      background-color: #d1f1f4b0;
      padding: 60px 140px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .btn-custom {
      background-color: #05b4c4b0;
      color: white;
      border: none;
      padding: 16px 40px;
      font-size: 18px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;
  }

  .btn-custom:hover {
      background-color: #049aa8;
  }

  /* Footer */
  .main-footer {
      padding: 50px 0 20px;
      background: #f8f9fa;
  }

  .brand-subname {
      color: #5bc6d0;
      font-family: 'Arima Madurai', sans-serif;
      font-size: 25px;
      font-weight: 500;
      margin-bottom: 8px;
  }

  .brand-address {
      font-family: 'Arima Madurai', sans-serif;
      font-weight: 600;
      font-size: 1.4rem;
      color: #333;
      line-height: 1.6;
  }

  .footer-socials {
      display: flex;
      gap: 12px;
      justify-content: center;
  }

  .social-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      background-color: #5bc6d0;
      color: white;
      border-radius: 50%;
      text-decoration: none;
      font-size: 18px;
      transition: background-color 0.3s ease;
  }

  .social-circle:hover {
      background-color: #4ab5bf;
  }

  .scroll-up-btn {
      color: #999;
      font-size: 28px;
      text-decoration: none;
  }

  .copyright-text {
      font-size: 14px;
      color: #bbb;
  }

  .teal {
      color: #5bc6d0;
      text-decoration: none;
  }

  /* RESPONSIVE STYLES */
  @media (max-width: 991px) {

      /* Navbar */
      .nav-item {
          margin-left: -8px !important;
          text-align: center;
          padding: 5px 0;
      }

      .navbar-collapse {
          position: absolute;
          height: 80vh;
          width: 100%;
          top: 85px;
          left: 0;
          background: #546e54bf;
          z-index: 20;
          flex-basis: 100%;
          flex-grow: 1;
          align-items: center;
      }

      .contact-section {
          padding: 0;
      }

      .pricing-section {
          padding: 0;
      }

      .pricing-card {
          height: auto;
      }

      /* Main Section - Mobile Hero */
      .main-section {
          padding-bottom: 0px;
      }

      .hero-image-container {
          position: relative;
          width: 100%;
          height: 80vh;
          margin-bottom: 30px;
      }

      .hero-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0;
          max-width: none;
      }

      /* Gradient overlay on mobile */
      .hero-image-container::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to left, #dddddd94 0%, #00904db3 50%, #006235 100%);
          z-index: 1;
      }

      .testimonials-section::before {
          display: none;
      }

      .testimonials-section::after {
          display: none;
      }

      .hero-content {
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          width: 90%;
          padding: 20px;
      }

      .border0 {
          border-bottom: none !important;
      }

      .hero-title {
          font-size: 36px;
          color: white;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }

      .hero-text {
          color: white;
          width: 100%;
          margin: 0 auto 20px;
          text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
      }

      /* Experience Card - Mobile */
      .experience-card {
          position: static;
          margin: 0px auto;
          padding: 18px 6px;
          width: 300px;
      }

      /* Stats Cards - Mobile */
      .stats-overlay {
          position: static;
          margin-top: 30px;
          padding: 0 0;
      }

      .stats-cards-wrapper {
          padding: 0;
      }

      .stats-cards-wrapper .d-flex {
          align-items: center;
          justify-self: flex-start !important;
          flex-wrap: nowrap !important;
      }


      .stats-card {
          width: 100%;
          max-width: 350px;
          margin-bottom: 20px;
      }

      .stats-card-orange {
          height: auto !important;
      }

      /* Services Section */
      .services-section {
          padding-top: 50px;
      }

      .service-card {
          height: auto;
      }

      .section-title {
          font-size: 32px;
      }

      .section-description {
          margin-bottom: 50px;
      }




      /* Contact Section */
      .contact-text {
          font-size: 24px;
      }

      /* About Section */
      .about-container {
          flex-direction: column;
      }

      .content-side {
          width: 100%;
          padding: 40px 30px;
      }

      .main-name {
          font-size: 36px;
      }

      .image-side {
          position: relative;
          width: 100%;
          padding: 30px;
          transform: none;
      }

      .image-side img {
          width: 100%;
          height: auto;
          margin: 0 auto;
          display: block;
      }

      .main-section .container {
          max-width: 100% !important;
      }

      .icon-wrapper {
          width: 130px;
          height: 130px;
          top: -69px;
      }

      .pad-r {
          padding: 0px !important;
      }

      .quote-box::before {
          display: none;
      }

      .image-side {
          position: relative !important;
          top: 22px !important;
      }

      .contact-wrapper {
          padding: 60px 100px;
          margin-bottom: 20px;
      }

      .nav-link {
          color: white !important;
      }

      .btn-send-request {
          margin-bottom: 19px;
      }

  }

  @media (max-width: 768px) {
      .services-section {
          max-width: 100% !important;
      }

      .stats-cards-wrapper .d-flex {
          align-items: center;
          justify-content: center !important;
          flex-wrap: wrap !important;
      }

      .icon-wrapper {
          width: 130px;
          height: 130px;
          top: -69px;
      }

      .stats-card {
          max-width: none;
      }

      .hero-content {
          position: absolute;
          top: 12%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          width: 90%;
          padding: 20px;
      }

      .border0 {
          border-bottom: none !important;
      }

      .contact-wrapper {
          padding: 60px 8px;
      }



  }

  @media (max-width: 491px) {
      .hero-title {
          font-size: 29px;
          color: white;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
  }

  @media (max-width: 320px) {
      .icon-wrapper {
          width: 100px;
          height: 100px;
          top: -49px;
      }

      .quote-box {
          padding: 0;
      }

      .border0 {
          border-bottom: none !important;
      }

      P {
          border-bottom: none;
      }

      .quote-box {
          padding: 36px 0;
          text-align: center;
      }

      .image-side {
          position: relative !important;
          top: 22px !important;
      }




  }


  @media (max-width: 1150px) {
      .about-container {
          max-width: none !important;
          flex-direction: column !important;
          padding-bottom: 25px;
      }

      .about-main {
          margin: 0 !important;
      }

      .image-side {
          position: relative;
          top: 0px;
          right: 0;
          transform: translateY(0);
      }

      .nav-link {
          font-size: 14px;

          padding: 0.5rem 14px !important;
      }

      .btn-buy {
          padding: 13px 15px;
      }
  }