:root {
      --primary-color: #4361ee;
      --primary-dark: #3f37c9;
      --text-color: #2d3436;
      --light-color: #f8f9fa;
  }

  html {
      scroll-behavior: smooth;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
  }

  body {
      font-family: 'Poppins', sans-serif;
      background-color: #f8f9fa;
  }

  /* Business Travel Popup Styles */
  .business-travel-swal {
      border-radius: 12px !important;
      max-width: 400px !important;
      width: 90% !important;
      padding: 1rem 2rem;
  }

  .business-travel-swal .swal-title {
      color: #333;
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 1rem;
      margin-top: 1rem;
  }

  .business-travel-popup {
      text-align: center;
      padding: 0 1rem;
  }

  .popup-message {
      color: #666;
      margin-bottom: 1.5rem;
      font-size: 1rem;
  }

  .popup-links {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1.5rem;
  }

  .popup-link {
      color: #fff !important;
      text-decoration: none !important;
      font-weight: 500;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      transition: all 0.3s ease;
      background-color: #3f51b5;
      font-size: 0.8rem;
  }

  .popup-link:hover {
      transform: translateY(-2px);
  }

  .popup-link:active {
      transform: translateY(0);
  }

  .swal-close-button {
      color: #999 !important;
      font-size: 1.5rem !important;
      transition: color 0.2s ease;
      border: 2px solid;
      border-radius: 50%;
  }

  .swal-close-button:hover {
      color: #666 !important;
  }

  /* Updated Responsive Navbar Styles with Wider Breakpoint */
  header {
      background-color: #333;
      color: rgb(0, 0, 0);
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
  }

  .logo {
      height: 40px;
  }

  nav {
      display: flex;
      align-items: center;
  }

  nav ul {
      list-style: none;
      display: flex;
      gap: 2rem;
  }

  nav ul li a {
      position: relative;
      color: rgb(0, 0, 0);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.3s ease;
  }

  nav ul li a::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -4px;
      width: 0%;
      height: 2px;
      background-color: #3f51b5;
      transition: width 0.3s ease;
      transform: translateX(-50%);
  }

  nav ul li a:hover::after {
      width: 100%;
  }


  nav ul li a:hover {
      color: #3f51b5;
  }

  .hamburger {
      display: none;
      font-size: 1.8rem;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      padding: 0.5rem;
  }

  /* Changed breakpoint from 800px to 1024px */
  @media (max-width: 1024px) {
      nav ul {
          display: none;
          flex-direction: column;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background-color: #3f51b5;
          padding: 1rem;
          gap: 1rem;
          z-index: 1000;
      }

      nav ul.active {
          display: flex;
      }

      nav ul li {
          text-align: center;
      }

      nav ul li a {
          font-size: 1rem;
          padding: 0.5rem;
          display: block;
      }

      .hamburger {
          display: block;
      }
  }

  @media (max-width: 480px) {
      header {
          padding: 0.5rem;
      }

      .logo {
          height: 35px;
      }

      .hamburger {
          font-size: 1.5rem;
      }

      nav ul li a {
          font-size: 0.95rem;
      }
  }

  .hero {
      position: relative;
      overflow: hidden;
      min-height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding-top: calc(4rem + 70px);
      margin-top: -8rem;
      color: white;
      z-index: 0;
  }

  .hero-bg-layer {
      position: absolute;
      top: 90px;
      left: 0;
      height: 100%;
      width: 100%;
      background-size: 100%;
      background-position: top;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      z-index: 0;
  }

  .hero-bg-layer.active {
      opacity: 1;
  }

  .hero *:not(.hero-bg-layer) {
      position: relative;
      z-index: 2;
  }



  .hero .hero-heading {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: var(--text-color);
      margin-top: -1rem;
      margin-bottom: -2rem;
  }

  .hero p {
      font-size: 1.5rem;
      margin-bottom: 2.5rem;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  }

  .button-container {
      display: flex;
      gap: 1rem;
  }

  .hero button {
      padding: 0.8rem 2rem;
      font-size: 1.1rem;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s ease, transform 0.1s ease;
  }

  .hero button.btn-primary {
      background-color: #ffd700;
      color: #2d3436;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  .hero button.btn-primary:hover {
      background-color: #e6c200;
      transform: translateY(-2px);
  }

  .hero button.btn-secondary {
      background-color: transparent;
      color: #ffd700;
      border: 2px solid #ffd700;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  .hero button.btn-secondary:hover {
      background-color: #ffd700;
      color: #2d3436;
      transform: translateY(-2px);
  }

  @media (max-width: 768px) {
      .hero {
          padding: 4rem 1rem;
          min-height: 350px;
      }

      .hero .hero-heading {
          font-size: 2.5rem;
          margin-bottom: 1rem;
      }

      .hero p {
          font-size: 1.2rem;
          margin-bottom: 2rem;
      }

      .hero button {
          padding: 0.6rem 1.5rem;
          font-size: 1rem;
      }
  }

  @media (max-width: 480px) {
      .hero {
          padding: 3rem 1rem;
          min-height: 300px;
      }

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

      .hero p {
          font-size: 1rem;
      }

      .button-container {
          flex-direction: column;
          gap: 0.8rem;
      }

      .hero button {
          padding: 0.5rem 1.2rem;
          font-size: 0.9rem;
      }
  }

  .section {
      padding: 2rem 1rem;
      text-align: center;
      margin-top: 30px;
  }

  .section h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
  }

  .cards {
      display: flex;
      justify-content: center;
      gap: 8rem;
      flex-wrap: wrap;
  }

  .card {
      width: 300px;
      padding: 1.5rem;
      border-radius: 12px;
      position: relative;
      min-height: 650px;
  }

  /* .card:hover {
      border: 4px solid #fff;
  } */

  .card.business-travel {
      width: 300px;
      /* background: url('../images/business.jpg') no-repeat center; */
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: white;
      min-height: 350px;
      padding-bottom: 2rem;
  }

  .card.custom-travel {
      /* background: url('../Custom-Travel-1.jpg') no-repeat center; */
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: white;
      min-height: 350px;
      padding-bottom: 2rem;
  }


  .card-switcher {
      display: flex;
      justify-content: center;
      margin-top: 1rem;
  }

  .switcher-track {
      position: relative;
      display: inline-flex;
      border: 1px solid gray;
      background-color: #ffffff;
      border-radius: 40px;
      padding: 6px;
      gap: 6px;
      overflow: hidden;
  }

  .switcher-slider {
      position: absolute;
      top: 6px;
      left: 6px;
      width: calc(50% - 9px);
      height: calc(100% - 12px);
      background-color: #3f51b5;
      border-radius: 30px;
      transition: left 0.3s ease;
      z-index: 0;
  }


  .switch-btn {
      position: relative;
      z-index: 1;
      border: none;
      background: transparent;
      padding: 10px 18px;
      border-radius: 30px;
      font-weight: 600;
      font-size: 1rem;
      color: #000;
      cursor: pointer;
      transition: color 0.3s ease;
  }

  .switch-btn.active {
      color: #fff;
  }

  .cards-switch-container {
      position: relative;
      height: 450px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
  }

  .cards-switch-container .card {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scale(0.95);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s ease;
      z-index: 0;
  }

  .cards-switch-container .active-card {
      opacity: 1;
      transform: translateX(-50%) scale(1);
      pointer-events: all;
      z-index: 1;
  }

  .card.business-travel h3,
  .card.custom-travel h3 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
  }

  .card.business-travel p,
  .card.custom-travel p {
      font-size: 0.85rem;
      margin-bottom: 0.3rem;
  }

  .card.business-travel a,
  .card.custom-travel a {
      font-size: 0.85rem;
      background-color: #3f51b5;
      border-radius: 6px;
      border: 1px solid #fff;
      padding: 0.5rem 1rem;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
  }

  .card h3 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
  }

  .card p {
      font-size: 1rem;
      margin-bottom: 1rem;
  }

  .card a {
      display: inline-block;
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      background-color: #3f51b5;
      color: white;
      text-decoration: none;
      box-shadow: 0 4px 8px rgba(0, 122, 167, 0.3);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .card.active-card a {
      opacity: 1;
      transform: translateY(0);
  }



  .card a:hover {
      transform: scale(1.05);
      background-color: #33439b;

      background-size: 300% 300%;
      animation: gradientFlow 8s linear infinite;
      box-shadow: 0 0 12px 4px rgba(0, 122, 167, 0.7);
      transition: box-shadow 0.4s ease, transform 0.25s ease;
  }

  @keyframes gradientFlow {
      0% {
          background-position: 0% 50%;
      }

      100% {
          background-position: 300% 50%;
      }
  }


  .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(1);
  }

  .carousel {
      position: relative;
      max-width: 400px;
      margin: 0 auto;
      padding: 1rem;
  }

  .carousel .cards {
      position: relative;
      width: 100%;
      min-height: 200px;
  }

  .carousel .card {
      display: none;
      width: 100%;
      opacity: 0;
      transition: opacity 0.5s ease;
  }

  .carousel .card.active {
      display: block;
      opacity: 1;
  }

  .carousel button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #333;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
      font-size: 1.2rem;
      border-radius: 5px;
      transition: background-color 0.3s ease, transform 0.1s ease;
  }

  .carousel button:hover {
      background: #555;
      transform: translateY(-2px);
  }

  .carousel button.prev {
      left: -3rem;
  }

  .carousel button.next {
      right: -3rem;
  }

  @media (max-width: 768px) {
      .carousel {
          max-width: 350px;
      }

      .carousel button.prev {
          left: -2.5rem;
      }

      .carousel button.next {
          right: -2.5rem;
      }
  }

  @media (max-width: 480px) {
      .carousel {
          max-width: 300px;
      }

      .carousel button.prev {
          left: -2rem;
      }

      .carousel button.next {
          right: -2rem;
      }
  }

  .about,
  .services {
      max-width: 1200px;
      margin: 0 auto;
  }

  .services {
      max-width: 1000px;
  }



  /* FAQ Grid Layout */
  .faq-section {
      padding: 5rem 2rem;
      background-color: #f8f9fa;
      text-align: center;
  }


  .faq-heading {
      font-size: 2.5rem;
      color: #3f51b5;
      margin-bottom: 3rem;
  }


  .accordion-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      max-width: 1200px;
      margin: 0 auto;
      padding: 5px;
  }


  .accordion-item {
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid #e0e0e0;
      margin-bottom: 20px;
  }

  .accordion-item:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
      transform: translateY(-5px);
      transition: ease-in-out;
  }

  .accordion-header {
      padding: 1.5rem 2rem;
      font-size: 1.1rem;
      font-weight: 600;
      color: #5f7f87;
      background: #fff;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;
  }

  .accordion-icon {
      font-size: 1rem;
      color: #3f51b5;
      transition: transform 0.5s ease-in-out;
  }

  .accordion-item.active .accordion-icon {
      transform: rotate(180deg);
  }

  .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      border-top: 1px solid grey;
      background: #ffffff;
  }

  .accordion-item.active .accordion-content {
      max-height: 300px;
      padding: 0.5rem 1.5rem 1rem;
  }

  .accordion-content p {
      margin: 0;
      line-height: 1.6;
      color: #555;
  }

  /* Responsive adjustments */
  @media (max-width: 992px) {
      .accordion-grid {
          grid-template-columns: repeat(2, 1fr);
          margin: 5px;
      }
  }

  @media (max-width: 768px) {
      .accordion-grid {
          grid-template-columns: 1fr;

      }

      .faq-section {
          padding: 3rem 1rem;
      }

      .faq-heading {
          font-size: 2rem;
          color: #3f51b5;
      }
  }

  /* --- Footer Section Styles --- */
  .footer {
      background-color: #3f51b5;
      /* Darker background */
      color: #fbae17;
      /* Light text color */
      padding: 4rem 5%;
      /* Increased padding */
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      /* Evenly space columns */
      gap: 2.5rem;
      /* Increased gap */
      border-top: 4px solid #3f51b5;
      /* Accent border */
  }

  .footer-column {
      flex: 1;
      min-width: 220px;
      /* Increased min-width */
      padding: 0 1rem;
  }

  .footer-column h3 {
      font-size: 1.4rem;
      /* Larger font size */
      color: #fff;
      /* Accent color for headings */
      margin-bottom: 1.5rem;
      position: relative;
      padding-bottom: 0.75rem;
      /* Increased padding */
  }

  .footer-column h3::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 40px;
      height: 3px;
      /* Thicker line */
      background-color: #3f51b5;
  }

  .footer-column p,
  .footer-column a {
      font-size: 1rem;
      line-height: 1.7;
      color: #f1f3f5;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .footer-column .quick-links a {
      display: block;
      margin-bottom: 0.8rem;
      /* Spacing between links */
  }

  .footer-column a:hover {
      color: #fbae17;
      padding-left: 8px;
      /* Indent on hover */
  }

  .footer .social-links {
      display: flex;
      flex-wrap: wrap;
      /* Ensure icons wrap on smaller screens */
      gap: 1.2rem;
      /* Increased gap */
      margin-top: 1rem;
  }

  .footer .social-links a {
      font-size: 1.6rem;
      /* Larger icons */
      color: #f1f3f5;
      padding: 0;
      /* Reset padding for icon alignment */
  }

  .footer .social-links a:hover {
      color: #3f51b5;
      transform: scale(1.1);
      /* Scale effect on hover */
      padding-left: 0;
      /* Override indent on hover */
  }

  .footer-column.copyright p {
      font-size: 0.9rem;
      color: #f1f3f5;
      /* Lighter color for copyright */
  }

  /* --- Responsive Footer Styles --- */
  @media (max-width: 1200px) {
      .footer {
          flex-direction: column;
          text-align: left;
          /* Align left on smaller screens */
          gap: 2.5rem;
          /* Adjust gap for stacked layout */
      }

      .footer-column h3::after {
          left: 0;
          /* Keep underline on the left */
          transform: none;
      }

      .footer .quick-links {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          /* Two columns for links */
          gap: 1rem;
      }
  }

  @media (max-width: 480px) {
      .footer {
          padding: 3rem 5%;
          text-align: center;
          /* Center align for very small screens */
      }

      .footer-column h3::after {
          left: 50%;
          transform: translateX(-50%);
          /* Center the underline */
      }

      .footer .quick-links {
          grid-template-columns: 1fr;
          /* Single column for links */
      }

      .footer .social-links {
          justify-content: center;
          /* Center social links */
      }
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
      /* padding: 0 2rem; */
  }

  /* --- About Us Section Styles --- */
  .about-us-section {
      padding: 80px 0;
      background-color: #ffffff;
      /* White background for the section */
  }

  /* Flex container for about content and image */
  .about-content-wrapper {
      display: flex;
      flex-wrap: wrap;
      /* Allows wrapping on smaller screens */
      gap: 40px;
      /* Space between text and image */
      align-items: flex-start;
      /* Align items to the top */
      margin-bottom: 60px;
      /* Space before mission/vision cards */
  }

  .about-text-content {
      flex: 2;
      /* Takes more space for text */
      min-width: 300px;
      /* Minimum width before wrapping */
      text-align: left;
      /* Keep text content left-aligned */
  }

  .about-image-wrapper {
      flex: 1;
      /* Takes less space for image */
      display: flex;
      justify-content: center;
      /* Center the image within its flex item */
      align-items: flex-start;
      /* Align image to the top */
      min-width: 280px;
      /* Minimum width before wrapping */
  }

  .main-about-image {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
      /* Rounded corners for the image */
      box-shadow: 0 8px 20px #3f51b5;
      /* Subtle blue shadow */
  }

  /* Section Titles (retaining original left-alignment) */
  .section-title {
      font-size: 2rem;
      color: #3f51b5;
      /* Main blue color */
      text-align: center;
      margin-bottom: 10px;
      font-weight: 700;
      position: relative;
      padding-bottom: 10px;
  }

  .section-title.about {
      text-align: left;
  }


  /* Section Description (retaining original left-alignment) */
  .section-description {
      font-size: 1em;
      color: #555;
      margin-bottom: 10px;
      line-height: 1.8;
      text-align: left;
  }

  /* Our Story Subsection (retaining original left-alignment) */
  .our-story-section {
      margin-top: 20px;
      text-align: left;
  }

  h3.subsection-title {
      font-size: 1.8em;
      color: #3f51b5;
      /* A slightly darker shade of blue */
      margin-bottom: 15px;
      font-weight: 700;
      text-align: left;
  }

  h3.subsection-title+p {
      color: #555;
  }



  /* --- Responsive Design for About Us section --- */
  @media (max-width: 992px) {
      .about-content-wrapper {
          flex-direction: column;
          /* Stack image and text on smaller screens */
          align-items: center;
          /* Center items when stacked */
      }

      .about-text-content {
          /* When stacked, center the text content for better mobile readability */
          text-align: center;
          max-width: 100%;
          /* Ensure text content takes full width */
          margin-bottom: -40px;
      }

      h3.subsection-title {
          text-align: center;
      }

      /* Center specific text elements when stacked */
      .section-title,
      .section-description,
      .subsection-title,
      .our-story-section p {
          text-align: center;
          font-size: 1.1rem;
      }

      .section-title.about {
          text-align: center;
      }

      /* Adjust the underline for the centered title */
      .section-title::after {
          left: 50%;
          transform: translateX(-50%);
      }

      .about-image-wrapper {
          margin-top: 30px;
          /* Add space above image when it moves below text */
          max-width: 80%;
          /* Constrain image width for better appearance on medium screens */
      }

      .section-title,
      h3.subsection-title {
          font-size: 2rem;
      }
  }

  @media (max-width: 768px) {
      .about-image-wrapper {
          max-width: 100%;
          /* Allow image to take full width on smaller phones */
      }
  }

  .subsection-title {
      font-size: 1.1em;
      color: #3f51b5;
      /* A slightly darker shade of blue */
      margin-bottom: 15px;
      font-weight: 600;
  }

  /* Mission and Vision Cards Wrapper */
  .cards-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      /* Space between cards */
      margin-top: 40px;
  }

  /* Detail Card Styles (Mission/Vision) */
  .detail-card {
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(0, 175, 239, 0.1);
      /* Subtle blue shadow */
      padding: 30px;
      flex: 1;
      max-width: 600px;
      /* Ensures cards don't get too small */
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid #e0f2ff;
      /* Light blue border */
  }

  .detail-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 25px rgba(0, 175, 239, 0.25);
      /* More prominent shadow on hover */
  }

  .detail-icon {
      font-size: 3em;
      color: #3f51b5;
      /* Blue icon color */
      margin-bottom: 15px;
  }

  .detail-card h3 {
      font-size: 1.6em;
      color: #3f51b5;
      /* Darker blue for card titles */
      margin-bottom: 10px;
      font-weight: 600;
  }

  .detail-card p {
      font-size: 1em;
      color: #666;
      line-height: 1.7;
  }

  /* --- Teams Section Styles --- */
  .teams-section {
      padding: 80px 0;
      background-color: #ffffff;
      /* Lighter blue background for teams section */
      text-align: center;
  }

  .teams-section .section-title {
      text-align: center;
      /* Center the title for this section */
      margin-bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      /* Center the pseudo-element underline */
  }

  /* Carousel Container */
  .carousel-container {
      position: relative;
      overflow: hidden;
      /* Hide overflowing cards */
      margin: 0 auto;
  }

  .carousel-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
      /* Smooth transition for sliding */
  }

  /* Team Member Card */
  .team-member-card {
      flex: 0 0 calc(33.333% - 40px);
      /* 3 cards per view, accounting for gap */
      margin: 0 20px;
      /* Space between cards */
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 175, 239, 0.1);
      padding: 30px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      /* For centering content within card */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px solid #d9edf7;
  }

  .team-member-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 175, 239, 0.2);
  }

  .team-member-card img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      /* Circular images */
      object-fit: cover;
      margin-bottom: 15px;
      border: 4px solid #3f51b5;
      /* Blue border around image */
  }

  .team-member-card h4 {
      font-size: 1.4em;
      color: #3f51b5;
      margin-bottom: 5px;
      font-weight: 600;
  }

  .team-member-card p {
      font-size: 0.95em;
      color: #777;
  }

  /* Carousel Buttons */
  .carousel-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 175, 239, 0.7);
      color: white;
      border: none;
      padding: 8px 16px;
      cursor: pointer;
      font-size: 1.5em;
      border-radius: 50%;
      z-index: 10;
      transition: background-color 0.3s ease;
  }

  .carousel-button:hover {
      background-color: #3f51b5;
  }

  .carousel-button.prev {
      left: 1px;
  }

  .carousel-button.next {
      right: 1px;
  }

  /* Carousel Dots */
  .carousel-dots {
      display: flex;
      justify-content: center;
      margin-top: 40px;
      gap: 10px;
  }

  .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #b3e0ff;
      /* Light blue for inactive dots */
      cursor: pointer;
      transition: background-color 0.3s ease;
  }

  .dot.active {
      background-color: #3f51b5;
      /* Main blue for active dot */
  }

  /* --- Responsive Design --- */
  @media (max-width: 992px) {
      .about-content-wrapper {
          flex-direction: column;
          align-items: center;
      }

      .about-image-wrapper {
          margin-top: 30px;
      }

      .main-about-image {
          max-width: 80%;
          /* Adjust image size on medium screens */
      }

      .team-member-card {
          flex: 0 0 calc(50% - 30px);
          /* 2 cards per view on medium screens */
      }
  }

  @media (max-width: 768px) {
      .section-title {
          font-size: 2.2rem;
      }

      h3.subsection-title {
          font-size: 2.2rem;
      }

      .detail-card {
          min-width: unset;
          /* Allow cards to shrink more */
          flex: 1 1 100%;
          /* Stack cards vertically on small screens */
      }

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

      .team-member-card {
          flex: 0 0 calc(100% - 20px);
          /* 1 card per view on small screens */
          margin: 0 10px;
      }

      .carousel-button {
          padding: 10px 12px;
          font-size: 1.2em;
      }
  }

  @media (max-width: 480px) {
      .section-title {
          font-size: 1.8rem;
      }

      h3.subsection-title {
          font-size: 1.8rem;
      }

      .section-description {
          font-size: 1em;
      }

      .detail-card h3 {
          font-size: 1.4em;
      }
  }

  .services {
      padding: 4rem 0;
      background-color: white;
      position: relative;
  }

  .section-header {
      text-align: center;
      margin-bottom: 4rem;
  }

  .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 0.5rem;
      max-width: 1200px;
      margin: 0 auto;
      margin-block-start: -2rem;
  }

  .service-card {
      background: #fdd78b;
      border-radius: 12px;
      padding: 2.5rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      height: 100%;
      max-width: 450px;
      margin: auto;
      padding-bottom: 3rem;
  }

  .service-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  }

  .service-card.corporate {
      background: #80d7f7;
      border: 1px solid rgba(67, 97, 238, 0.1);
  }

  .service-icon {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.8rem;
  }

  .service-card h3 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.8rem;
      color: var(--text-color);
      margin-bottom: 1rem;
  }

  .service-card p {
      color: #002330;
      margin-bottom: 1.5rem;
      font-weight: 500;
      line-height: 1.7;
  }

  .service-features {
      margin: 1.3rem 0;
      padding-left: 1.2rem;
      flex-grow: 1;
  }

  .service-features li {
      margin-bottom: 0.8rem;
      position: relative;
      list-style-type: none;
      padding-left: 1.8rem;
      color: #002330;
      font-weight: 500;
  }

  .service-features li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.6em;
      width: 10px;
      height: 10px;
      background-color: #002330;
      border-radius: 50%;
      opacity: 0.6;
  }


  .cta-button.outline {
      background-color: #002330;
      border: 2px solid #0099cc;
      color: #fff;
      border-radius: 12px;
      padding: 0.6rem 1.5rem;
      font-size: 1.1rem;
      font-weight: 500;
      cursor: pointer;
      display: inline-block;
      position: relative;
      overflow: hidden;
      text-align: center;
      transition: color 0.3s ease, border-color 0.3s ease;
  }

  .cta-button.outline a {
      text-decoration: none;
      color: inherit;
      position: relative;
      z-index: 1;
      display: inline-block;
  }

  .cta-button.outline::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 300%;
      height: 100%;
      background: linear-gradient(90deg, #a3d5ff, #007aa7, #004f6b, #007aa7, #a3d5ff);
      background-size: 300% 300%;
      animation: gradientFlow 8s linear infinite;
      transition: opacity 0.4s ease;
      opacity: 0;
      z-index: 0;
  }

  .cta-button.outline:hover::before {
      left: 0;
      opacity: 1;
  }

  .cta-button.outline:hover {
      color: white;
      border-color: transparent;
  }

  @keyframes gradientFlow {
      0% {
          background-position: 0% 50%;
      }

      100% {
          background-position: 300% 50%;
      }
  }



  @media (max-width: 768px) {
      .services {
          padding: 4rem 0;
      }

      .section-header {
          margin-bottom: 2rem;
      }

      .services-grid {
          grid-template-columns: 1fr;
          gap: 1.5rem;
          margin-block-start: -1rem;
          width: 95%;
          margin-left: auto;
          margin-right: auto;
      }

      .service-card {
          padding: 2rem;
          width: 100%;
          margin: 0 auto;
          max-width: 95%;
      }
  }

  @media (max-width: 480px) {
      .service-card {
          padding: 1.5rem;
      }

      .services-grid {
          margin-block-start: -0.5rem;
      }

      .service-icon {
          width: 60px;
          height: 60px;
      }

      .service-card h3 {
          font-size: 1.5rem;
      }

      .cta-button.outline {
          align-self: center;
          margin-left: auto;
          margin-right: auto;
      }
  }

  .contact-section {
      padding: 4rem 1rem;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      text-align: center;
      font-family: 'Poppins', sans-serif;
  }



  .contact-container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      /* Align items to the top to prevent stretching */
      gap: 2rem;
      flex-wrap: wrap;
      /* Allows stacking on smaller screens */
      max-width: 1200px;
      margin: 1rem auto;
  }

  /* This new wrapper ensures the info card and image stay together */
  .info-and-image-wrapper {
      display: flex;
      flex-direction: column;
      /* Stacks the contact card and image vertically */
      gap: 2rem;
      /* Space between the info card and the image */
      flex: 1;
      /* Allows this wrapper to take up available space */
      min-width: 300px;
      /* Minimum width before wrapping */
      max-width: 500px;
      /* Max width for the left column (info + image) */
      align-items: center;
      /* Center content within this wrapper */
  }

  .contact-section {
      background-color: #f8f9fa;
      padding: 4rem 1.5rem;
  }

  .section-title {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 3rem;
      color: #333;
  }

  .contact-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
      max-width: 1200px;
      margin: 0 auto;
  }

  /* Cards */
  .contact-card {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      width: 100%;
      max-width: 600px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .contact-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  }

  /* Titles & Text */
  .contact-card h3 {
      font-size: 1.5rem;
      color: #3f51b5;
      margin-bottom: 1.5rem;
  }

  .contact-card p {
      font-size: 1rem;
      color: #819A91;
      line-height: 1.6;
      margin-bottom: 0.8rem;
      font-weight: 500;
  }

  /* Form */
  .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
  }

  .contact-form input,
  .contact-form textarea {
      padding: 0.8rem 1rem;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 1rem;
      color: #2d3436;
      background-color: #f8f9fa;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .contact-form input:focus,
  .contact-form textarea:focus {
      outline: none;
      border-color: #3f51b5;
      /* Changed to Bonhomiee's blue */
      box-shadow: 0 0 0 3px rgba(0, 175, 239, 0.1);
      /* Changed to Bonhomiee's blue */
  }

  .contact-form textarea {
      resize: vertical;
      min-height: 120px;
  }

  .contact-form button {
      padding: 0.8rem 2rem;
      font-size: 1rem;
      color: white;
      background: linear-gradient(90deg, #3f51b5 0%, #3f51b5 100%);
      /* Changed to shades of Bonhomiee's blue */
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.1s ease;
  }

  .contact-form button:hover {
      background: linear-gradient(90deg, #3f51b5 0%, #3f51b5 100%);
      /* Changed to shades of Bonhomiee's blue */
      transform: translateY(-2px);
  }

  .contact-form-wrapper {
      flex: 1;
      min-width: 300px;
  }

  .contact-info-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 1.5rem;
      min-width: 300px;
  }

  /* Map */
  .contact-map iframe {
      width: 100%;
      height: 250px;
      border: 0;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  }

  /* --- Responsive Adjustments --- */
  @media (max-width: 992px) {
      .contact-container {
          flex-direction: column;
          /* Stack both wrappers vertically */
          align-items: center;
          /* Center items when stacked */
      }

      .info-and-image-wrapper,
      .contact-form-card {
          max-width: 600px;
          /* Ensure they don't stretch too wide when stacked */
          width: 100%;
          /* Take full width within the container */
      }
  }

  @media (max-width: 576px) {
      .contact-section {
          padding: 3rem 1rem;
      }

      .contact-section h2 {
          font-size: 2rem;
      }

      .contact-card {
          padding: 1.5rem;
      }

      .contact-card h3 {
          font-size: 1.3rem;
          margin-bottom: 1rem;
      }

      .contact-card p {
          font-size: 0.95rem;
      }

      .contact-form input,
      .contact-form textarea {
          padding: 0.6rem 0.8rem;
          font-size: 0.95rem;
      }

      .contact-form button {
          padding: 0.6rem 1.5rem;
          font-size: 0.95rem;
      }
  }

  /* Testimonials Section */
  #testimonials {
      position: relative;
      padding: 80px 20px;
      background-color: #f9f9ff;
      overflow: hidden;
  }

  #testimonials .container {
      max-width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
  }

  #testimonials .subtitle {
      text-align: center;
      color: #3f51b5;
      font-size: 1.1rem;
      margin-bottom: 10px;
  }

  #testimonials .carousel {
      position: relative;
      max-width: 600px;
      margin: 0 auto;
      padding: 40px 0;
  }

  #testimonials .cards {
      display: flex;
      overflow: hidden;
      margin-bottom: 30px;
      height: 300px;
      max-width: 1000px;
      box-shadow: 0 6px 18px rgba(0, 175, 239, 0.1);
      border-radius: 8px;
  }

  #testimonials .card {
      min-width: 100%;
      padding: 40px;
      background: white;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: transform 0.5s ease, opacity 0.5s ease;
      opacity: 0;
      transform: scale(0.9);
      position: relative;
  }

  #testimonials .card.active {
      opacity: 1;
      transform: scale(1);
  }

  #testimonials .quote-icon {
      font-size: 5rem;
      color: #f0f0f0;
      position: absolute;
      top: 10px;
      left: 20px;
      line-height: 1;
      z-index: 1;
  }

  #testimonials .testimonial-text {
      position: relative;
      z-index: 2;
      font-size: 1.2rem;
      line-height: 1.6;
      color: #555;
      margin-bottom: 30px;
  }

  #testimonials .client-info {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
  }

  #testimonials .client-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      margin-right: 15px;
      border: 3px solid #4e8cff;
  }

  #testimonials .client-name {
      font-weight: bold;
      margin: 0;
      color: #333;
  }

  #testimonials .client-title {
      margin: 0;
      color: #777;
      font-size: 0.9rem;
  }

  #testimonials .rating {
      color: #ffc107;
      font-size: 1.2rem;
  }

  #testimonials button.prev,
  #testimonials button.next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #4e8cff;
      color: white;
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      z-index: 3;
  }

  #testimonials button.prev:hover,
  #testimonials button.next:hover {
      background: #3a7bf0;
      transform: translateY(-50%) scale(1.1);
  }

  #testimonials button.prev {
      left: -25px;
  }

  #testimonials button.next {
      right: -25px;
  }

  #testimonials .carousel-dots {
      display: flex;
      justify-content: center;
      margin-top: 20px;
  }

  #testimonials .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ddd;
      margin: 0 5px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  #testimonials .dot.active {
      background: #4e8cff;
      transform: scale(1.2);
  }

  #testimonials .decorative-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
  }

  #testimonials .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(78, 140, 255, 0.05);
  }

  #testimonials .circle-1 {
      width: 300px;
      height: 300px;
      top: -100px;
      right: -100px;
  }

  #testimonials .circle-2 {
      width: 200px;
      height: 200px;
      bottom: -50px;
      left: -50px;
  }

  #testimonials .plane-icon {
      position: absolute;
      font-size: 3rem;
      color: rgba(78, 140, 255, 0.1);
      top: 50%;
      right: 10%;
      transform: rotate(45deg);
      animation: float 6s ease-in-out infinite;
  }

  @keyframes float {

      0%,
      100% {
          transform: rotate(45deg) translateY(0);
      }

      50% {
          transform: rotate(45deg) translateY(-20px);
      }
  }

  @media (max-width: 768px) {
      #testimonials .card {
          padding: 30px 20px;
      }

      #testimonials button.prev,
      #testimonials button.next {
          width: 40px;
          height: 40px;
      }

      #testimonials button.prev {
          left: -15px;
      }

      #testimonials button.next {
          right: -15px;
      }
  }

  /* Blogs Section */
  #blogs {
      position: relative;
      padding: 70px 20px;
      background-color: #f9f9ff;

  }

  #blogs .container {
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
  }

  #blogs .subtitle {
      text-align: center;
      color: #666;
      font-size: 1.1rem;
      margin-bottom: 50px;
  }

  #blogs .carousel {
      position: relative;
      max-width: 800px;
      height: 300px;
      margin: 0 auto;
      padding: 40px 0;
      box-shadow: 3px 3px 8px #3f51b5;
      border: 2px solid black;
      border-radius: 8px;
  }

  #blogs .cards {
      display: flex;
      overflow: hidden;
      margin-bottom: 30px;
  }

  #blogs .card {
      min-width: 100%;
      padding: 40px;
      background: white;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      transition: transform 0.5s ease, opacity 0.5s ease;
      opacity: 0;
      transform: scale(0.9);
      position: relative;
  }

  #blogs .card.active {
      opacity: 1;
      transform: scale(1);
  }

  #blogs .blog-title {
      font-size: 1.8rem;
      color: #333;
      margin-bottom: 15px;
      font-weight: 600;
  }

  #blogs .blog-text {
      font-size: 1.2rem;
      line-height: 1.6;
      color: #555;
      margin-bottom: 20px;
  }

  #blogs .blog-link {
      color: #4e8cff;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;
  }

  #blogs .blog-link:hover {
      color: #3a7bf0;
      text-decoration: underline;
  }

  #blogs button.prev,
  #blogs button.next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #4e8cff;
      color: white;
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      z-index: 3;
  }

  #blogs button.prev:hover,
  #blogs button.next:hover {
      background: #3a7bf0;
      transform: translateY(-50%) scale(1.1);
  }

  #blogs button.prev {
      left: -25px;
  }

  #blogs button.next {
      right: -25px;
  }

  #blogs .carousel-dots {
      display: flex;
      justify-content: center;
      margin-top: 20px;
  }

  #blogs .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ddd;
      margin: 0 5px;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  #blogs .dot.active {
      background: #4e8cff;
      transform: scale(1.2);
  }

  #blogs .decorative-elements {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
  }

  #blogs .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(78, 140, 255, 0.05);
  }

  #blogs .circle-1 {
      width: 300px;
      height: 300px;
      top: -100px;
      right: -100px;
  }

  #blogs .circle-2 {
      width: 200px;
      height: 200px;
      bottom: -50px;
      left: -50px;
  }

  #blogs .plane-icon {
      position: absolute;
      font-size: 3rem;
      color: rgba(78, 140, 255, 0.1);
      top: 50%;
      right: 10%;
      transform: rotate(45deg);
      animation: float 6s ease-in-out infinite;
  }

  @media (max-width: 768px) {
      #blogs .card {
          padding: 80px 20px;
      }

      #blogs button.prev,
      #blogs button.next {
          width: 40px;
          height: 40px;
      }

      #blogs button.prev {
          left: -15px;
      }

      #blogs button.next {
          right: -15px;
      }
  }

  .business-travel,
  .custom-holidays {
      width: 80px;
  }

  .testimonials.title {
      color: #3f51b5;
  }

  h2.faq-heading {
      color: #3f51b5;
  }

  .fa-linkedin:hover {
      color: #0A66C2;
  }

  i.fa-facebook-f:hover {
      color: blue;
  }

  .fa-instagram:hover {
      color: #E1306C;
      ;
  }

  .cta-button a {
      text-decoration: none;
      color: #fff;
  }

  h2.discover {
      text-transform: uppercase;
      text-align: center;
  }

  @media screen and (max-width: 768px) {
      h2.discover {
          font-size: 40px;
      }
  }

  @media screen and (max-width: 375px) {
      h2.discover {
          font-size: 30px;
      }
  }

  h2.change {
      font-size: 30px;
  }

  .team-member-card h4 a {
      text-decoration: none;
      color: #3f51b5;
  }

  .header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: white;
      color: #000000;
      padding: 0.75rem 1.5rem;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s ease;
  }


  .quick-links {
      display: flex;
      gap: 20px;
      justify-content: flex-start;
  }

  @media screen and (max-width: 480px) {
      footer.footer div.quick-links {
          flex-direction: column;
          font-size: 10px;
          gap: 10px;
      }
  }

  /* Responsive Carousel Fix */
  @media (max-width: 768px) {

      #testimonials .carousel,
      #blogs .carousel {
          width: 100%;
          /* Use full width of the container */
          padding: 0 10px;
          /* Add some padding on the sides */
      }

      #testimonials .card,
      #blogs .card {
          padding: 25px;
          /* Adjust padding for smaller screens */
      }

      #testimonials button.prev,
      #blogs button.prev {
          left: -10px;
          /* Adjust button position */
      }

      #testimonials button.next,
      #blogs button.next {
          right: -10px;
          /* Adjust button position */
      }
  }

  .team-member-card a {
      text-decoration: none;
      background-color: #3f51b5;
      color: #fff;
      padding: 4px 10px;
      border-radius: 50%;
      margin-top: 10px;
  }

  .team-member-card a .fa-linkedin-n {
      font-size: 1.8rem;
      border-radius: 20px;
  }

  .team-member-card a:hover {
      box-shadow: 0 0 10px #3f51b5;
      transform: scale(1.1);
  }


  /* NEW CSS */
  .auto-scroll-carousel-section {
      background: #ffffff;
      padding: 40px 0;
      overflow: hidden;
  }

  .auto-scroll-title {
      text-align: center;
      font-size: 2rem;
      color: #3f51b5;
      margin-bottom: 30px;
  }

  .auto-scroll-wrapper {
      position: relative;
      overflow: hidden;
      width: 100%;
  }

  .auto-scroll-track {
      display: flex;
      width: max-content;
      animation: scroll-left 40s linear infinite;
  }

  .auto-scroll-wrapper:hover .auto-scroll-track {
      animation-play-state: paused;
  }

  .auto-scroll-card {
      min-width: 180px;
      max-width: 180px;
      margin: 0 15px;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
      box-shadow: 0 4px 12px rgba(193, 193, 193, 0.1);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      flex-shrink: 0;
  }

  .auto-scroll-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }

  .auto-scroll-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      display: block;
  }

  .auto-scroll-card p {
      padding: 10px;
      margin: 0;
      font-size: 16px;
  }

  .auto-scroll-card small {
      color: #3f51b5;
      font-size: 13px;
  }

  @keyframes scroll-left {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translateX(-50%);
      }
  }

  /* NEW CSS for ABOUT US */
  .about-us-clean-section {
      background: #fff;
      padding: 80px 20px;
      font-family: 'Poppins', sans-serif;
      color: #222;
      max-width: 900px;
      margin: 0 auto;
      border-radius: 10px;
      /* box-shadow: 0 8px 30px rgb(0 0 0 / 0.1); */
  }

  .about-us-container {
      display: flex;
      flex-direction: column;
      gap: 32px;
  }

  .about-us-content-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      align-items: center;
  }

  .about-us-text {
      flex: 1 1 350px;
      min-width: 280px;
  }

  .about-us-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 0;
      color: #3f51b5;
  }

  .about-us-description {
      font-size: 1.1rem;
      line-height: 1.5;
      color: #444;
      margin-bottom: 24px;
  }

  .about-us-story {
      max-width: 460px;
  }

  .about-us-subtitle {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 3px;
      color: #3f51b5;
  }

  .about-us-image-wrapper {
      flex: 1 1 280px;
      min-width: 280px;
      max-width: 320px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
      transition: transform 0.3s ease;
      cursor: pointer;
  }

  .about-us-image-wrapper:hover {
      transform: scale(1.05);
  }

  .about-us-image {
      width: 100%;
      display: block;
      object-fit: cover;
  }

  .about-us-cards-wrapper {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
  }

  .about-us-card {
      background: #ffffff;
      padding: 24px 20px;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
      flex: 1 1 320px;
      max-width: 440px;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      cursor: default;
  }

  .about-us-card:hover {
      box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
      transform: translateY(-6px);
  }

  .about-us-card h3 {
      font-weight: 600;
      margin-bottom: 4px;
      color: #3f51b5;
      font-size: 1.4rem;
  }

  .about-us-card p {
      font-size: 1rem;
      line-height: 1.5;
      color: #555;
  }


  .animate-item {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .animate-item.visible {
      opacity: 1;
      transform: translateY(0);
  }

  @media (max-width: 720px) {
      .about-us-content-wrapper {
          flex-direction: column;
          align-items: center;
      }

      .about-us-text,
      .about-us-image-wrapper {
          max-width: 100%;
      }

      .about-us-cards-wrapper {
          flex-direction: column;
          gap: 24px;
      }
  }

  /* NEW Styles for Services */

  .services-clean-section {
      padding: 60px 20px;
      background-color: #ffffff;
      font-family: 'Poppins', sans-serif;
  }

  .section-header {
      text-align: center;
      margin-bottom: 40px;
  }

  .section-title {
      font-size: 2.2rem;
      font-weight: 700;
      color: #3f51b5;
  }

  .services-card-grid {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      justify-content: center;
  }

  .service-card-clean {
      background-color: #fff;
      padding: 28px 24px;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
      max-width: 420px;
      flex: 1 1 320px;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }

  .service-card-clean:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  }

  .icon-box {
      background-color: #eaf2ff;
      padding: 16px;
      border-radius: 12px;
      display: inline-flex;
      margin-bottom: 20px;
  }

  .icon-box img {
      width: 40px;
      height: 40px;
      object-fit: contain;
  }

  .card-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 12px;
      color: #1f1f1f;
  }

  .card-description {
      font-size: 1rem;
      line-height: 1.5;
      color: #444;
      margin-bottom: 18px;
  }

  .card-feature-list {
      list-style: none;
      padding: 0;
      margin: 0 0 24px;
  }

  .card-feature-list li {
      position: relative;
      padding-left: 20px;
      margin-bottom: 8px;
      color: #333;
  }

  .card-feature-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: #3f51b5;
      font-weight: bold;
      font-size: 1rem;
  }

  .card-button {
      padding: 10px 18px;
      background-color: #3f51b5;
      color: white;
      font-weight: 600;
      border-radius: 8px;
      text-decoration: none;
      transition: background-color 0.3s ease;
      align-self: flex-start;
  }

  .card-button:hover {
      background-color: #3243a3;
  }

  @media (max-width: 768px) {
      .services-card-grid {
          flex-direction: column;
          gap: 24px;
      }
  }

  /* NEW Testimonials Styles */
  .testimonials-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2.5rem;
      margin-top: 2rem;
  }

  .testimonials-row {
      display: flex;
      justify-content: center;
      gap: 2rem;
      width: 100%;
      max-width: 100%;
  }

  .testimonial-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 1.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      text-align: left;
      width: 600px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 150px;

      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .testimonial-card {
      opacity: 0;
      transform: translateY(40px) scale(0.95);
      transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
          transform 1s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: opacity, transform;
  }

  .testimonial-card.animate-in {
      opacity: 1;
      transform: translateY(0) scale(1);
  }

  .testimonial-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
      cursor: pointer;
  }


  .testimonial-text {
      font-style: italic;
      margin-bottom: 1rem;
      flex-grow: 1;
  }

  .client-name {
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: #222;
  }

  .rating {
      color: #f5a623;
      font-size: 1.1rem;
  }

  @media (max-width: 700px) {
      .testimonials-row {
          flex-wrap: wrap;
          justify-content: center;
      }

      .testimonial-card {
          width: 90vw;
          max-width: 320px;
      }
  }

  /* NEW Faq css */
  .faq-section {
      max-width: 1000px;
      margin: 2rem auto;
      font-family: Arial, sans-serif;
  }

  .section-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: #3f51b5;

      text-align: center;
  }

  .accordion-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
  }

  .faq-row {
      display: flex;
      flex-direction: column;
      gap: 0;
  }

  .accordion-item {
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;
      background: #fff;
  }

  .accordion-header {
      margin: 0;
      background: #ffffff;
      padding: 1rem 1.25rem;
      cursor: pointer;
      user-select: none;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #111;
      font-size: 1.1rem;
  }

  .accordion-icon {
      transition: transform 0.3s ease;
      font-size: 1.2rem;
  }

  .accordion-header.active .accordion-icon {
      transform: rotate(180deg);
  }

  .accordion-content {
      max-height: 0;
      overflow: hidden;
      color: #333;
      font-size: 1rem;
      line-height: 1.5;
      transition: max-height 0.4s ease, padding 0.4s ease;
      text-align: left;
  }

  .accordion-content.open {
      max-height: 300px;
  }

  .accordion-item {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .accordion-item.visible {
      opacity: 1;
      transform: translateY(0);
  }

  .accordion-item.hidden {
      opacity: 0;
      transform: translateY(20px);
  }

  /* BLOGS */
  .blog-section {
      padding: 60px 20px;
      margin-top: 6rem;
      background: #f9f9f9;
      font-family: Arial, sans-serif;
  }

  .blog-title {
      font-size: 2.5rem;
      margin-bottom: 10px;
      text-align: center;
  }

  .blog-subtitle {
      font-size: 1.2rem;
      color: #777;
      margin-bottom: 40px;
      text-align: center;
  }

  .blog-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
  }

  @media (max-width: 768px) {
      .blog-cards {
          grid-template-columns: 1fr;
      }
  }

  .blog-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      padding: 20px;
  }

  .blog-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  .blog-card-title {
      font-size: 1.3rem;
      color: #333;
      margin-bottom: 10px;
  }

  .blog-card-excerpt {
      font-size: 1rem;
      color: #555;
      margin-bottom: auto;
  }

  .read-more-btn {
      background: #3f51b5;
      color: #fff;
      border: none;
      padding: 10px 18px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s ease;
      margin-top: 15px;
  }

  .read-more-btn:hover {
      background: #3243a3;
  }

  .blog-modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
  }

  .blog-modal.show {
      display: flex;
  }

  .blog-modal-content {
      background-color: #fff;
      width: 90%;
      max-width: 700px;
      max-height: 80%;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: slideDown 0.4s ease;
  }

  .blog-modal-header {
      background-color: #f1f1f1;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;
  }

  .blog-modal-header h3 {
      margin: 0;
      font-size: 1.2rem;
      color: #333;
  }

  .blog-close-btn {
      color: #333;
      font-size: 1.8rem;
      font-weight: bold;
      cursor: pointer;
  }

  .blog-close-btn:hover {
      color: #ff0000;
  }

  .blog-modal-body {
      padding: 20px;
      overflow-y: auto;
      flex: 1;
      text-align: left;
      line-height: 1.6;
  }

  .blog-modal-body p {
      margin-bottom: 1em;
      color: #444;
  }

  .blog-modal-body h3 {
      margin-top: 1.2em;
      margin-bottom: 0.6em;
      font-size: 1.2rem;
      color: #222;
  }

  .blog-modal-body ul,
  .blog-modal-body ol {
      padding-left: 20px;
  }

  .blog-modal-body li {
      margin-bottom: 0.5em;
  }

  body.modal-open {
      overflow: hidden;
  }

  @keyframes slideDown {
      from {
          transform: translateY(-30px);
          opacity: 0;
      }

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