/* Hero Section Styles */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.video-container:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  max-width: 800px;
  padding: var(--space-4);
  z-index: 1;
  animation: fadeInUp 1.2s ease-out;
}

.hero-content h1 {
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-content p {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-content .cta-button {
  font-size: var(--font-size-lg);
  padding: var(--space-3) var(--space-8);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Styles */
@media (max-width: 768px) {
  .hero {
    min-height: 500px;
    height: 80vh;
    padding: var(--space-4);
  }
  
  .hero-content {
    max-width: 100%;
    padding: var(--space-3);
  }
  
  .hero-content h1 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
  }
  
  .hero-content p {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-6);
  }
  
  .hero-content .cta-button {
    font-size: var(--font-size-base);
    padding: var(--space-2) var(--space-6);
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 400px;
    height: 70vh;
    padding: var(--space-2);
  }
  
  .hero-content {
    padding: var(--space-2);
  }
  
  .hero-content h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
  }
  
  .hero-content p {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
  }
  
  .hero-content .cta-button {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-5);
    width: 100%;
    max-width: 280px;
  }
}

@media (max-width: 360px) {
  .hero {
    min-height: 350px;
    height: 60vh;
  }
  
  .hero-content h1 {
    font-size: var(--font-size-lg);
  }
  
  .hero-content p {
    font-size: var(--font-size-xs);
  }
}

/* navigation and Hero Section ends here */

 /* Reset and base styles for the widget */

        .get-services-widget * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

       .get-services-widget {
            position: relative;
            overflow: hidden;
            width: 100%;
            margin-top: 1rem;
        }
        /* Animated background particles */
        .get-services-widget .background-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .get-services-widget .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #DE5B7B;
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }


        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        .get-services-widget .container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .get-services-widget .main-heading {
            font-size: 2rem;
            font-weight: 700;
            background: linear-gradient(135deg, #DE5B7B 0%, #DE5B7B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 30px;
            margin-top: 30px;
            letter-spacing: -0.02em;
            position: relative;
            animation: slideInDown 0.8s ease-out;
        }

        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .get-services-widget .buttons-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 25px;
            margin-bottom: 80px;
            padding: 0 20px;
            animation: slideInUp 0.8s ease-out 0.2s both;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Enhanced Button-86 styling integrated with service buttons */
        .get-services-widget .service-button {
            all: unset;
            min-width: 160px;
            height: 50px;
            font-size: 16px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-weight: 600;
            background: transparent;
            border: none;
            position: relative;
            color: #000000;
            cursor: pointer;
            z-index: 1;
            padding: 15px 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            white-space: nowrap;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .get-services-widget .service-button::after,
        .get-services-widget .service-button::before {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: -1;
            transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .get-services-widget .service-button::before {
            transform: translate(0%, 0%);
            width: 100%;
            height: 100%;
            background: #E0F9B5;
            border-radius: 10px;
        }

        .get-services-widget .service-button::after {
            transform: translate(10px, 10px);
            width: 40px;
            height: 40px;
            background: rgba(255, 207, 223, 0.231);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 50px;
        }

        .get-services-widget .service-button:hover::before {
            transform: translate(5%, 20%);
            width: 110%;
            height: 110%;
            background: #E0F9B5;
        }

        .get-services-widget .service-button:hover::after {
            border-radius: 16px;
            transform: translate(0, 0);
            width: 100%;
            height: 100%;
            background: rgba(255, 207, 223, 0.409);
        }

        .get-services-widget .service-button:active::after {
            transition: 0s;
            transform: translate(0, 5%);
        }

        /* Active button styling */
        .get-services-widget .service-button.active {
            color: #ffffff;
            animation: activeGlow 2s infinite;
        }

        .get-services-widget .service-button.active::before {
            background: linear-gradient(135deg, #DE5B7B 0%, #DE5B7B 100%);
            transform: translate(5%, 20%);
            width: 110%;
            height: 110%;
        }

        .get-services-widget .service-button.active::after {
            border-radius: 16px;
            transform: translate(0, 0);
            width: 100%;
            height: 100%;
            background: rgba(224, 249, 181, 0.436)  ;
        }

        @keyframes activeGlow {
            0%, 100% { 
                filter: drop-shadow(0 0 10px rgb(255, 207, 223));
            }
            50% { 
                filter: drop-shadow(0 0 20px rgb(224, 249, 181));
            }
        }

        /* Icon and text styling */
        .get-services-widget .service-button .icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .get-services-widget .service-button .icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            /* filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(17%) hue-rotate(346deg) brightness(106%) contrast(106%); */
        }

        .get-services-widget .service-button.active .icon img {
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
        }

        .get-services-widget .service-button:hover .icon {
            transform: rotate(10deg) scale(1.1);
        }

        .get-services-widget .service-button .text {
            position: relative;
            z-index: 2;
            transition: transform 0.3s ease;
        }

        .get-services-widget .service-button:hover .text {
            transform: translateX(2px);
        }

        /* Ripple effect */
        .get-services-widget .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: scale(0);
            animation: ripple-animation 0.6s linear;
            pointer-events: none;
            z-index: 1;
        }
        
        @keyframes ripple-animation {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .get-services-widget .content-section {
            max-width: 900px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            /* background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2); */
        }

        .get-services-widget .content-section.show {
            opacity: 1;
            transform: translateY(0);
        }

        .get-services-widget .content-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            font-size: 2rem;
            font-weight: 700;
            background: linear-gradient(135deg, #DE5B7B 0%, #DE5B7B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            /* margin-bottom: 28px; */
            animation: fadeInScale 0.6s ease-out;
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .get-services-widget .content-emoji {
            width: 48px;
            height: 48px;
            animation: bounce 2s infinite;
        }

        .get-services-widget .content-emoji img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        .get-services-widget .content-description {
            font-size: 15px;
            line-height: 1.7;
            color: #000000;
            max-width: 750px;
            margin: 0 auto;
            animation: fadeInUp 0.6s ease-out 0.2s both;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .get-services-widget .loading-spinner {
            display: none;
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #DE5B7B;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .get-services-widget .main-heading {
                font-size: 3.5rem;
                margin-bottom: 40px;
            }

            .get-services-widget .buttons-container {
                gap: 20px;
                margin-bottom: 60px;
            }

            .get-services-widget .service-button {
                min-width: 140px;
                height: 45px;
                padding: 12px 20px;
                font-size: 15px;
            }

            .get-services-widget .service-button::after {
                width: 35px;
                height: 35px;
            }

            .get-services-widget .content-section {
                padding: 30px 20px;
                margin: 0 10px;
            }

            .get-services-widget .content-title {
                font-size: 2rem;
                margin-bottom: 24px;
            }

            .get-services-widget .content-emoji {
                width: 40px;
                height: 40px;
            }

            .get-services-widget .content-description {
                font-size: 16px;
            }
        }

        @media (max-width: 480px) {
            .get-services-widget .main-heading {
                font-size: 2.8rem;
            }

            .get-services-widget .service-button {
                min-width: 120px;
                height: 40px;
                padding: 10px 16px;
                font-size: 14px;
                gap: 8px;
            }

            .get-services-widget .service-button .icon {
                width: 20px;
                height: 20px;
            }

            .get-services-widget .service-button::after {
                width: 30px;
                height: 30px;
            }

            .get-services-widget .content-title {
                font-size: 2rem;
                flex-direction: column;
                gap: 12px;
            }

            .get-services-widget .content-section {
                padding: 25px 15px;
            }

            .get-services-widget .content-emoji {
                width: 36px;
                height: 36px;
            }
        }

/* Solution and Bookings Section starts from here */

.grab-solutions-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 10px;
}

.solutions-card {
    background: linear-gradient(rgba(0, 0, 0, 0.109), rgba(0, 0, 0, 0.4)),
              url('../Images/Main\ Redirection1.jpg') center/cover no-repeat;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 1200px; /* Expanded */
    width: 100%;
    position: relative;
    overflow: hidden;
}

.solutions-grid, .bookings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 32px;
    max-width: 100%;
    margin: 0 auto;
    
}

.section-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-title {
    font-size: 25px;
    font-weight: 600;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.header-icon img {
    width: 24px;
    height: 24px;
}

.solution-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 12px;
}

.solution-item:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.solution-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-icon img {
    width: 60px;
    height: 60px;
}

.solution-label {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
    .solutions-grid,
    .bookings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

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

    .solution-icon img {
        width: 35px;
        height: 35px;
    }
}

/* Solution and Bookings Section ends here */

/* 1st section starts from here */

 .First-section {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 60px 20px;
      max-width: 1200px;
      margin: auto;
    }

    .text-content {
      flex: 1;
      min-width: 300px;
      max-width: 500px;
      padding: 20px;
    }

    .text-content h2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: #000000;
      margin-bottom: 20px;
    }

    .text-content p {
      font-size: 15px;
      line-height: 1.6;
      color: #000000;
      margin-bottom: 30px;
      justify-content: center;
      
    }

    .image-content {
      flex: 1;
      min-width: 300px;
      max-width: 500px;
      padding: 20px;
    }

    .image-content img {
      width: 100%;
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    @media screen and (max-width: 768px) {
      .First-section {
        flex-direction: column;
        text-align: center;
      }
    }

    /* Button 86 styling */
    .button-86 {
      all: unset;
      width: 120px;
      height: 40px;
      font-size: 16px;
      background: transparent;
      border: none;
      position: relative;
      color: #f0f0f0;
      cursor: pointer;
      z-index: 1;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }

    .button-86::after,
    .button-86::before {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -99999;
      transition: all .4s;
    }

    .button-86::before {
      transform: translate(0%, 0%);
      width: 100%;
      height: 100%;
      background: #DE5B7B;
      border-radius: 10px;
    }

    .button-86::after {
      transform: translate(10px, 10px);
      width: 35px;
      height: 35px;
      background: #e0f9b56a;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border-radius: 50px;
    }

    .button-86:hover::before {
      transform: translate(5%, 20%);
      width: 110%;
      height: 110%;
    }

    .button-86:hover::after {
      border-radius: 10px;
      transform: translate(0, 0);
      width: 100%;
      height: 100%;
    }

    .button-86:active::after {
      transition: 0s;
      transform: translate(0, 5%);
    }
    
/* 1st section ends here */

/* 2nd section starts from here */

.quality-section {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      background-color: #DE5B7B;
      color: white;
      padding: 80px 20px;
     clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 90%, 60% 85%, 40% 95%, 20% 90%, 0 100%);

    }

    .quality-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 50px;
      max-width: 1200px;
      margin: auto;
      flex-wrap: wrap;
      margin-top: 50px;
      margin-bottom: 50px;
    }

    .quality-image img {
      width: 100%;
        max-width: 450px;
      border-radius: 25px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .quality-text {
      max-width: 500px;
    }

    .quality-text h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .quality-text p {
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 30px;
      color: #ffffff;
    }

    .button-861 {
      all: unset;
      width: 120px;
      height: 40px;
      font-size: 16px;
      background: transparent;
      border: none;
      position: relative;
      color: #000000;
      cursor: pointer;
      z-index: 1;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }

    .button-861::after,
    .button-861::before {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -99999;
      transition: all .4s;
      
    }

    .button-861::before {
      transform: translate(0%, 0%);
      width: 100%;
      height: 100%;
      background: #E0F9B5;
      border-radius: 10px;
     
    }

    .button-861::after {
      transform: translate(10px, 10px);
      width: 35px;
      height: 35px;
      background: #de5b7c56;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border-radius: 50px;
     
    }

    .button-861:hover::before {
      transform: translate(5%, 20%);
      width: 110%;
      height: 110%;
    }

    .button-861:hover::after {
      border-radius: 10px;
      transform: translate(0, 0);
      width: 100%;
      height: 100%;
    }

    .button-861:active::after {
      transition: 0s;
      transform: translate(0, 5%);
    }

    @media (max-width: 768px) {
      .quality-container {
        flex-direction: column;
        text-align: center;
      }

      .quality-text h2 {
        font-size: 1.8rem;
      }
    }
/* 2nd section ends here */

/* 3rd section starts from here */


    .Second-section {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 60px 20px;
      max-width: 1200px;
      margin: auto;
      flex-direction: row; /* Image on left, content on right */
    }

    .image-content2 {
      flex: 1;
      min-width: 300px;
      max-width: 500px;
      padding: 20px;
      order: 1; /* Ensure image is left */
    }

    .image-content2 img {
      width: 100%;
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .text-content2 {
      flex: 1;
      min-width: 300px;
      max-width: 500px;
      padding: 20px;
      order: 2; /* Ensure text is right */
    }

    .text-content2 h2 {
     font-size: 1.5rem;
      font-weight: 700;
      color: #000000;
      margin-bottom: 20px;
    }

    .text-content2 p {
      font-size: 15px;
      line-height: 1.6;
      color: #000000;
      margin-bottom: 30px;
    }

    @media screen and (max-width: 768px) {
      .Second-section {
        flex-direction: column;
        text-align: center;
      }

      .image-content2,
      .text-content2 {
        order: unset; /* Stack normally on mobile */
      }
    }

    

/* 3rd section ends here */

/* 4th section starts from here */



.Third-section {
      display: flex;
      flex-direction: row; /* Ensures left-to-right layout */
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: 60px 20px;
      max-width: 1200px;
      margin: auto;
    }

    .text-content1 {
      flex: 1;
      min-width: 300px;
      max-width: 500px;
      padding: 20px;
      order: 1; /* Left side */
    }

    .text-content1 h2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: #000000;
      margin-bottom: 20px;
    }

    .text-content1 p {
      font-size: 15px;
      line-height: 1.6;
      color: #000000;
      margin-bottom: 30px;
    }

    .image-content1 {
      flex: 1;
      min-width: 300px;
      max-width: 500px;
      padding: 20px;
      order: 2; /* Right side */
    }

    .image-content1 img {
      width: 100%;
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    @media screen and (max-width: 768px) {
      .Third-section {
        flex-direction: column;
        text-align: center;
      }

      .text-content1, .image-content1 {
        order: unset; /* Reset order on small screens */
      }
    }

/* 4th section ends here */
 
/* Logos section starts from here */

.brands-section {
  padding: 60px 20px;
  text-align: center;
  

}

.brands-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 40px;
}

.brands-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px;
}

.logo img {
  height: 100px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

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

/* Logos section ends here */