/* Global Styles */
:root {
  --primary-color: #9736ff;
  --secondary-color: #4e00c9;
  --accent-color: #ffaf36;
  --text-color: white;
  --background-gradient: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  --font-family: 'League Spartan', sans-serif;
}

body {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  background: var(--background-gradient);
  color: var(--text-color);
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Ensure No Horizontal Overflow */
* {
  box-sizing: border-box;
  max-width: 100%; /* Prevent elements from exceeding the viewport width */
}

/* Header */
header {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
}

.logo-placeholder img {
  width: 120px;
  height: auto;
}

/* Hero Section */
.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 50px 10%;
  margin: 0 auto;
  height: auto;
  box-sizing: border-box;
  gap: 40px;
  flex-wrap: nowrap; /* Default for larger screens */
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden; /* Prevent content overflow */
}

.hero-content {
  flex: 2;
  max-width: 65%;
}

.hero-content h1 {
  font-size: 66px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.05;
}

.hero-content p {
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 30px;
  color: #f5f5f5;
}

.hero-content img {
  max-width: 600px;
  max-height: 300px;
  width: 100%;
  height: auto;
  display: block;
  margin: 5px auto;
}

.hero-form {
  flex: 1;
  max-width: 30%;
  padding: 25px;
  margin-top: 100px;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: none;
  box-sizing: border-box;
}


/* Form Styles */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-direction: column;
}

.form-row input,
.form-row textarea {
  font-size: 16px;
  font-family: var(--font-family);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: none;
  color: var(--text-color);
  box-sizing: border-box;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--text-color);
  opacity: 0.8;
}

textarea {
  resize: none;
  height: 80px;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  font-size: 13px;
  margin-bottom: 20px;
}

.checkbox-container input {
  margin-right: 10px;
}

button {
  padding: 12px;
  font-size: 16px;
font-weight: bold;
  background: var(--accent-color);
  color: var(--text-color);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

button:hover {
  background: #fca65d;
  transform: scale(1.05);
}



/* Mobile Responsiveness */
@media (max-width: 768px) {
  /* Hero Section */
  .hero {
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center align content */
    padding: 30px 5%; /* Maintain consistent padding */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    max-width: 100%; /* Ensure it fits within the viewport */
  }

  .hero-content {
    max-width: 100%; /* Ensure full width within the container */
    text-align: center; /* Center-align text for better readability */
    overflow-x: hidden; /* Ensure no content overflows horizontally */
  }

  .hero-form {
    max-width: 100%; /* Make form span full width */
    margin-top: 20px; /* Maintain spacing below the hero content */
    overflow-x: hidden; /* Ensure no overflow from form elements */
  }

  .hero-content h1 {
    font-size: 50px; /* Keep a readable font size for headings */
    line-height: 1.2; /* Maintain spacing between lines for readability */
    word-wrap: break-word; /* Ensure long words don't cause overflow */
margin-top: 80px; /* Add space at the top to lower the title */
  }
}

/* Key Benefits Section */
.key-benefits {
  position: relative;
  padding: 30px 10%; /* Match Hero Section padding */
  margin: 0 auto;
  color: #333;
  text-align: right;
  background: url('../assets/images/benefits-background.png') no-repeat center center;
  background-size: cover;
  height: auto;
  overflow: hidden;
}

.key-benefits-heading {
  font-size: 52px; /* Consistent font size */
  margin-bottom: 30px;
  text-align: left;
  font-weight: bold;
  color: var(--secondary-color);
  max-width: 70%;
  position: relative;
}

.key-benefits-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--accent-color);
  margin: 10px 0 0;
  position: absolute;
  left: 0;
}

.secondary-title {
  font-size: 52px; /* Consistent font size */
  margin-top: 30px;
  text-align: right;
  font-weight: bold;
  color: var(--secondary-color);
  max-width: 60%;
  margin-left: auto;
  position: relative;
}

.secondary-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--accent-color);
  margin: 10px 0 0 auto;
  position: absolute;
  right: 0;
}

.benefit-item-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
  gap: 30px; /* Spacing between items */
  margin-top: 20px;

}

/* Individual Benefit Item Styling */
.benefit-item {
  position: relative;
  padding: 20px; /* Unified padding */
  border-radius: 0;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  transition: opacity 1.5s ease, transform 1.5s ease;
  color: white;
  display: flex;
  flex-direction: column; /* Stack content vertically */
  align-items: flex-start; /* Align all content to the top */
  justify-content: flex-start; /* Align content inside to the top */
  min-height: 300px; /* Maintain consistent height */
  background-size: cover;
  background-position: center;
  opacity: 0; /* Start hidden */
  transform: translateY(50%); /* Start slightly moved down */
}

.benefit-item.visible {
  opacity: 1;
  transform: translateY(0); /* Reset position when visible */
}

.benefit-item:hover {
  transform: translateY(-10px) scale(1.05); /* Slight lift and scale on hover */
  box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.benefit-item-content {
  flex-grow: 1; /* Allow the content to stretch */
  display: flex;
  flex-direction: column; /* Stack content vertically */
  justify-content: flex-start; /* Ensure alignment at the top */
  text-align: left; /* Keep text aligned to the left */
  gap: 10px; /* Add consistent spacing between content */
}


.benefit-item h3 {
  font-size: 34px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #ffffff;
}

.benefit-item p {
  font-size: 20px;
  line-height: 1.5;
  color: #ffffff;
}

/* Highlighted Text */
.highlight-yellow {
  color: var(--accent-color);
  font-weight: bold;
  font-size: 28px; /* Increase font size for emphasis */
  line-height: 1.3; /* Optional: Improve readability */
}


/* Background Images for Benefit Items */
.benefit-item-person1 {
  background-image: url('../assets/images/Person1.png');
}

.benefit-item-person2 {
  background-image: url('../assets/images/Person2.png');
}

/* Discover Benefits Button */
.discover-benefits-container {
  text-align: center;
  margin-top: 30px; /* Add spacing above the button */
}

.discover-benefits-btn {
  display: inline-block;
  padding: 15px 30px; /* Button padding */
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background-color: var(--accent-color); /* Yellow button background */
  border: none;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.discover-benefits-btn:hover {
  transform: translateY(-3px); /* Lift effect on hover */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
}


/* Mobile Styles */
@media (max-width: 800px) {
  .key-benefits {
    padding: 20px 5%; /* Adjust padding for smaller screens */
  }

  .key-benefits-heading,
  .secondary-title {
    font-size: 35px; /* Adjust font size for mobile */
    max-width: 90%; /* Prevent overflow */
  }

  .benefit-item-container {
    grid-template-columns: 1fr; /* Stack items vertically */
    gap: 20px;
  }

  .benefit-item {
    min-height: 500px; /* Taller items for mobile */
  }

  .company-logos img {
    width: 90px; /* Adjust logo size for smaller screens */
  }
}




/* Our Story Section */
.our-story {
  padding: 20px 9%;
  background: var(--background-gradient);
  color: var(--text-color);
  text-align: left;
}

.our-story h2 {
  font-size: 52px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
  color: var(--text-color);
  opacity: 0;
  transform: translateY(-50%);
  transition: all 1.5s ease;
}

.our-story p {
  font-size: 26px;
  line-height: 1.3;
  max-width: 1100px;
  margin: 0 0 15px 0;
  opacity: 0;
  transform: translateY(50%);
  transition: all 1.5s ease;
}

.our-story-container {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  max-width: 1100px;
  margin-bottom: 50px;
  opacity: 0;
  transform: translateY(50%);
  transition: all 1.5s ease;
}

/* Default Style for Desktop */
.our-story-highlight {
  font-size: 28px; /* Slightly smaller than the benefits section */
  line-height: 1.3; /* Maintain good readability */
  font-weight: bold; /* Keep the emphasis */
  color: var(--accent-color); /* Use the same yellow color */
}

/* Mobile Style */
@media (max-width: 768px) {
  .our-story-highlight {
    font-size: 20px; /* Smaller for mobile */
    line-height: 1.3; /* Adjust line height for readability */
  }

.our-story p {
    font-size: 20px; /* Smaller font size for mobile */
    line-height: 1.4; /* Adjust line height for better readability */
  }
}


/* Quote Section */
.quote-section {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px; /* Spacing below the section */
  text-align: left;
  max-width: 50%; /* Restrict width to half the page */
}

.quote-image {
  width: 150px;
  height: 150px;
  object-fit: cover; /* Ensures the image maintains its aspect ratio */
  border-radius: 0; /* Optional: Keep sharp edges */
}

.quote-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-color); /* Matches site color scheme */
  margin: 0;
  position: relative; /* For positioning the line underneath */
}


.quote-author {
  font-size: 18px;
  font-weight: bold;
  color: var(--accent-color); /* Yellow color for name and title */
  display: block;
  margin-top: 10px; /* Spacing above the author details */
}

/* Mobile Styles */
@media (max-width: 768px) {
  .quote-section {
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center-align for mobile */
    max-width: 100%; /* Allow full width on mobile */
  }

  .quote-image {
    margin-bottom: 15px; /* Add spacing below the image */
  }

  .quote-text {
    text-align: center; /* Center-align text on mobile */
  }
}

/* Decorative Line */
.decorative-line {
  width: 80px; /* Match the benefits section line width */
  height: 3px;
  background: var(--accent-color); /* Yellow color */
  margin: 20px auto; /* Center the line horizontally */
}


/* Logo Section */
.company-logos-container {
  margin-top: 20px;
  text-align: center;
  overflow: hidden; /* Hide overflowing content */
  position: relative;
}

.company-logos-wrapper {
  display: flex;
  justify-content: start;
  position: relative;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  white-space: nowrap; /* Prevent logos from wrapping */
  animation: scroll-logos 80s linear infinite; /* Continuous scroll */
}

.company-logos {
  display: flex;
  gap: 35px;
  flex-wrap: nowrap; /* Prevent wrapping, ensures all logos stay in one row */
}

.company-logos img {
  width: 100px;
  height: auto;
  object-fit: contain; /* Preserve aspect ratio */
}

.small-text {
  font-size: 16px !important; /* Ensure it is applied */
  line-height: 1.5; /* Optional for better readability */
  text-align: center; /* Aligns the text, optional */
  color: var(--text-color); /* Matches the text color scheme */
}



/* Logo Section */
.company-logos-wrapper {
  overflow: hidden; /* Hide overflowing logos */
  position: relative;
  width: 100%; /* Full width */
  display: flex; /* Flexbox for horizontal alignment */
}

.company-logos {
  display: flex;
  gap: 35px;
  width: max-content; /* Ensure logos fit horizontally */
  animation: none; /* Disable CSS-based scrolling */
}

.company-logos img {
  width: 100px;
  height: auto;
  object-fit: contain; /* Maintain aspect ratio */
}

/* Prevent container from moving */
.company-logos-wrapper:hover {
  animation: none; /* Disable animation on hover */
}

/* Features Section */
.features {
  position: relative;
  padding: 50px 10%;
  margin: 0 auto;
  color: #333;
  text-align: center;
  background: url('../assets/images/benefits-background.png') no-repeat center center;
  background-size: cover;
  height: 100vh; /* Full screen height */
  overflow: hidden;
}

.features-heading {
  font-size: 48px;
  margin-bottom: 30px; /* Reduced margin to bring boxes closer */
  font-weight: bold;
  color: var(--secondary-color);
  position: relative;
}

.features-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--accent-color);
  margin: 10px auto 0;
}

.feature-item-container {
  position: relative;
  height: calc(100% - 120px); /* Adjusted height to account for the title */
  perspective: 1000px; /* Enable 3D perspective for scrolling effect */
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: flex-start; /* Align closer to the top */
  overflow: hidden;
  margin-top: 10px; /* Optional: Fine-tune spacing */
}

.feature-item {
  position: absolute;
  width: 85%; /* Wider for better content presentation */
  height: 500px; /* Increased height for feature box */
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateY(30%) scale(0.7); /* Start below with slight scale */
  transition: transform 0.7s ease, opacity 0.7s ease; /* Smooth slide */
}

.feature-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1); /* Bring into view and scale to normal */
  z-index: 1;
}

.feature-item-content {
  display: flex; /* Flexbox for horizontal alignment */
  justify-content: space-between; /* Space between text and image */
  align-items: flex-start; /* Align content to the top */
  padding-top: 40px; /* Padding inside the box */
  padding-left: 40px;
  color: #ffffff;
  width: 100%; /* Full width for the container */
}

.feature-item-left {
  flex: 1; /* Take up remaining space */
  text-align: left; /* Align all text to the left */
}

.feature-item h3,
.feature-item p {
  margin: 0 0 10px 0; /* Add spacing between title and text */
}

.feature-item h3 {
  font-size: 35px; /* Larger font for the title */
  font-weight: bold;
  color: #ffffff;
}

.feature-item p {
  font-size: 18px; /* Standard font size for paragraphs */
  line-height: 1.5; /* Improve readability */
  color: #ffffff;
}

.feature-image {
  flex-shrink: 0; /* Prevent the image from shrinking */
  width: 40%; /* Set width as a percentage of the box */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure the image scales properly */
  margin-left: 20px; /* Add spacing between text and image */
}

.discover-btn {
  position: absolute; /* Positioning for features section */
  bottom: 30px; /* Lower in the feature box */
  left: 30px; /* Align to the bottom-right corner */
  padding: 14px 25px; /* Slightly larger for emphasis */
  font-size: 20px; /* Larger text for prominence */
font-weight: bold;
  background: var(--accent-color);
  color: var(--text-color);
  border: none;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
}

.discover-btn:hover {
  background: #fca65d;
  transform: scale(1.05);
}

/* Background Images for Feature Items */
.feature-item-1 {
  background-image: url('../assets/images/feature1.png');
}

.feature-item-2 {
  background-image: url('../assets/images/feature2.png');
}

.feature-item-3 {
  background-image: url('../assets/images/feature3.png');
}

.feature-item-4 {
  background-image: url('../assets/images/feature4.png');
}

@media (max-width: 800px) {
  /* Feature Item Container for Feature Boxes */
  .feature-item-container {
    width: 95%; /* Keep the feature boxes wider */
    margin: 0 auto; /* Center the container */
  }

.features {
  padding-bottom: 50px; /* Add extra spacing at the bottom to avoid overlap */
}

  /* Feature Item for Feature Boxes */
  .feature-item {
    height: 500px; /* Increased box height for better content placement */
    width: 100%; /* Full width */
    padding: 10px 15px; /* Add padding for consistent spacing */
    box-sizing: border-box; /* Include padding in width calculations */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Ensure spacing between content */
  }

  /* Feature Item Content for Feature Boxes */
  .feature-item-content {
    flex-direction: column; /* Stack text and image vertically */
    align-items: flex-start; /* Align content to the left */
    text-align: left; /* Keep text aligned to the left */
    padding-top: 10px; /* Slight spacing from the top */
    padding-left: 10px; /* Align text further left */
    padding-right: 15px; /* Slight spacing on the right */
    gap: 10px; /* Add spacing between text and image */
  }

  /* Feature Box Headings */
  .feature-item h3 {
    font-size: 26px; /* Adjust title size for mobile */
    margin-bottom: 5px; /* Reduce spacing below the title */
  }

  /* Feature Box Paragraphs */
  .feature-item p {
    font-size: 16px; /* Adjust paragraph text size */
    line-height: 1.4; /* Maintain readability */
    margin: 0; /* Remove default margin */
  }

  /* Feature Box Image */
  .feature-image {
    width: 100%; /* Allow image to span full width */
    max-height: 50%; /* Adjust height to fit proportionally */
    object-fit: contain; /* Prevent cropping of the image */
    margin: 0; /* Remove unwanted margins */
    align-self: flex-end; /* Push the image to the right of the box */
    margin-top: -10px; /* Move the image slightly higher in the box */
    margin-right: -42px;
  }

  /* Benefit Item for Mobile */
  .benefit-item {
    min-height: 500px; /* Increase height for mobile */
    position: relative; /* Required for proper positioning of child elements */
  }




  /* Discover All Features Button for Feature Boxes */
  .feature-item .discover-btn {
    position: absolute;
    bottom: 20px; /* Slightly lower for better separation */
    right: 15px; /* Align to the bottom-right corner */
    font-size: 16px; /* Slightly larger than "Learn More" */
    padding: 12px 20px;
    background: var(--accent-color);
    color: var(--text-color);
    text-decoration: none;
  }

  /* Shared Hover Effect for Buttons */
 
  .discover-btn:hover {
    background: #fca65d;
    transform: scale(1.05);
  }
}

.end-section {
  background: linear-gradient(90deg, #9736ff, #4e00c9); /* Soft gradient */
  color: white;
  padding: 30px 10%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  box-sizing: border-box; /* Prevents padding from affecting the overall width */
  margin: 0 auto; /* Ensures it is centered */
  overflow: hidden; /* Prevents overflow */
}

.end-info {
  font-size: 12px;
  opacity: 0.7;
}

.end-info .privacy-link {
  color: white;
  text-decoration: none;
  font-weight: normal;
}

.end-info .privacy-link:hover {
  text-decoration: underline;
  opacity: 1;
}

.end-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px; /* Added space between links and text */
}

.end-links a {
  width: 130px; /* Set the same width for all buttons */
  text-align: center; /* Ensure text is centered */
  font-size: 14px;
  text-decoration: none;
  padding: 8px 0; /* Reduce height by decreasing vertical padding */
  border-radius: 0; /* Square edges */
  transition: background-color 0.3s, transform 0.3s;
  color: white;
  font-weight: normal;
  letter-spacing: 1px;
  border: 1px solid #fff; /* Uniform border style */
  background-color: transparent; /* Uniform background */
}

.end-links a:hover {
  background-color: #fff;
  color: #4e00c9;
  transform: scale(1.05); /* Uniform hover effect */
}

/* Menu Styles */
.menu {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

.menu-icon {
  cursor: pointer;
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-icon div {
  width: 100%;
  height: 4px;
  background-color: var(--accent-color); /* Yellow lines */
  transition: transform 0.3s, background-color 0.3s;
}

.menu-links {
  position: fixed;
  top: 0;
  left: 0;
 background-color: rgba(255, 255, 255, 0.8); /* White background with 90% opacity */
  color: #6b1cd7;
  width: 50%; /* Make the menu take a comfortable portion of the screen */
  max-width: 400px; /* Limit the maximum width */
  height: 70%; /* Full height of the viewport */
  display: none; /* Initially hidden */
  flex-direction: column; /* Arrange items vertically */
  gap: 10px; /* Increased spacing between items for better readability */
  padding: 20px; /* Add padding for spacing */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow for depth */
  z-index: 1000; /* Ensure it appears above other elements */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
  font-size: 18px; /* Slightly larger font for better readability */
  font-weight: bold; /* Make text bolder */
}
 



.menu-links.active {
  display: flex;
}

.menu-links a {
  text-decoration: none;
  font-size: 18px;
  color: var(--secondary-color);
  padding: 10px;
  transition: background-color 0.3s;
}

.menu-links a:hover {
  background-color: var(--secondary-color);
  color: white;
}


.close-menu {
  font-size: 24px;
  color: var(--secondary-color);
  background: none;
  border: none;
  text-align: right;
  cursor: pointer;
  align-self: flex-end;
}


/* Adjust for desktop screens */
@media (min-width: 768px) {
  .menu-links {
    width: 15%; /* Use 30% of the viewport width for larger screens */
  }
}


/* Popup Banner */
.popup-banner {
  position: fixed;
  bottom: 20px; /* Position above the bottom */
 left: 20px; /* Align to the right */
  width: 300px; /* Set width */
  background: linear-gradient(90deg, #9736ff, #4e00c9); /* Gradient background */
  color: white;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 9999; /* Make sure it's above everything else */
  transform: translateY(100px); /* Initially hidden */
  opacity: 0; /* Initially hidden */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.popup-banner.show {
  transform: translateY(0); /* Slide up */
  opacity: 1; /* Show banner */
}

.popup-content {
  padding: 20px;
  text-align: center;
}

.popup-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.popup-text {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 20px;
}

.popup-btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: bold;
  color: #4e00c9; /* Purple text */
  background: #ffaf36; /* Yellow button */
  border: none;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
}

.popup-btn:hover {
  background: #fca65d;
  transform: scale(1.05);
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  outline: none;
  transition: transform 0.3s;
}

.popup-close:hover {
  transform: scale(1.2);
}








/* Featurepage Hero Section */
.featurepage-hero {
  display: flex;
  align-items: flex-start; /* Align content to the top */
  justify-content: space-between; /* Space between title and image */
  height: 100vh; /* Full page height */
  padding: 50px 10%; /* Add padding for spacing */
  background: url('../assets/images/benefits-background.png') no-repeat center center; /* Background image */
  background-size: cover; /* Ensure the image covers the entire section */
  color: var(--secondary-color); /* Purple text for contrast */
  text-align: left;
}


.featurepage-hero h1 {
   font-size: 72px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.05;
}

/* Hero Image */
.featurepage-hero .hero-image img {
  width: 600px; /* Larger square dimensions for desktop */
  height: 600px; /* Maintain square dimensions */
  object-fit: cover; /* Ensure image stays square and scales well */
  border-radius: 0; /* No rounded corners */
margin-top: 100px;

}

/* Mobile Layout Adjustments */
@media (max-width: 768px) {
  .featurepage-hero {
    display: flex;
    flex-direction: column; /* Stack title and image vertically */
    text-align: center; /* Center-align content horizontally */
    align-items: center; /* Ensure elements are centered */
    padding: 20px; /* Add some padding for spacing */
    height: auto; /* Remove fixed height */
  }

  .featurepage-hero h1 {
    font-size: 43px; /* Adjust title size for mobile */
    margin-bottom: 10px; /* Minimal spacing below the title */
    line-height: 1.1; /* Slightly increase for better readability */
  }

  .featurepage-hero .hero-image img {
    width: 200px; /* Reduce width for better fit */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Reduce spacing between image and other elements */
  }
}




/* Features Section */
.featurepage-section {
  padding: 40px 10%; /* Reduced padding to bring categories closer */
  background: var(--background-gradient); /* Purple gradient */
  color: var(--text-color); /* White text for contrast */
  text-align: left;
  margin-bottom: 10px; /* Reduced margin between sections */
  box-sizing: border-box;
}

.featurepage-group-title {
  font-size: 48px;
  font-weight: bold;
  color: var(--text-color); /* White text for section titles */
  margin-bottom: 10px; /* Adjusted spacing for subtitle */
  text-align: left;
}

.featurepage-subtitle {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent-color); /* Yellow subtitle */
  margin-bottom: 20px; /* Space below subtitle */
}

.featurepage-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-top: 20px; /* Reduced space between title and content */
}

.featurepage-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2 Grid */
  gap: 20px;
  flex: 1; /* Ensure tiles take equal space */
}

.featurepage-tile {
  background: url('../assets/images/benefits-background.png') no-repeat center center; /* Tile background image */
  background-size: cover; /* Ensure the image fills the tile */
  padding: 20px 20px; /* Reduced top padding for higher placement */
  text-align: left;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack content vertically */
  align-items: flex-start; /* Align content to the left */
  justify-content: flex-start; /* Align content to the top */
  height: 200px; /* Fixed height to ensure all tiles are the same size */
  min-height: 200px; /* Ensure consistent minimum size */
}

.featurepage-tile:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

.featurepage-tile h3 {
  font-size: 22px;
  font-weight: bold;
  color: var(--secondary-color); /* Yellow for tile titles */
  margin-bottom: 10px; /* Slightly increase spacing below title */
  margin-top: 5px; /* Add slight space at the top */
}

.featurepage-tile p {
  font-size: 16px;
  line-height: 1.4;
  color: var(--secondary-color); /* Dark purple for tile descriptions */
}

/* Images */
.featurepage-image img {
  width: 400px; /* Fixed width */
  height: 400px; /* Fixed height */
  object-fit: cover; /* Ensure the image scales properly */
  border-radius: 0; /* No rounded edges */
}

/* Decorative Line Centered and Adjusted */
.featurepage-decorative-line {
  width: 80px; /* Length of the line */
  height: 3px; /* Thickness of the line */
  background: var(--accent-color); /* Yellow color */
  margin: 20px auto 0px;
  display: block; /* Ensure line centers properly */
}

/* Mobile Layout */
@media (max-width: 768px) {
  .featurepage-content {
    flex-direction: column; /* Stack tiles and image vertically */
    align-items: center; /* Center-align content */
  }

  .featurepage-image img {
    width: 100%; /* Full width for smaller screens */
    height: auto; /* Maintain aspect ratio */
  }

  .featurepage-tiles {
    grid-template-columns: 1fr; /* Stack tiles vertically */
  }

  .featurepage-tile {
    height: 200px; /* Adjusted height for smaller screens */
    min-height: 200px;
  }

  .featurepage-tile h3 {
    margin-top: 2px; /* Reduce space at the top for smaller tiles */
  }

  .decorative-line {
    margin: 20px auto; /* Adjust spacing for smaller screens */
  }
}

/* Plans Section */
.plans-section {
  padding: 50px 10%;
  background: url('../assets/images/benefits-background.png') no-repeat center center;
  background-size: cover;
  color: var(--secondary-color); /* Dark purple text */
  text-align: center;
}

.plans-title {
  font-size: 48px;
  font-weight: bold;
  color: var(--secondary-color); /* Dark purple text */
  margin-bottom: 10px;
}

.plans-subtitle {
  font-size: 20px;
  color: var(--secondary-color); /* Dark purple text */
  margin-bottom: 40px;
}

.plans-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Columns for the plans */
  gap: 30px;
  justify-content: center;
  align-items: stretch;
}

.plan-card {
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle border */
  padding: 20px;
  border-radius: 0;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: auto; /* Change from fixed height to auto */
  display: flex; /* Keep Flexbox for alignment */
  flex-direction: column; /* Keep stacked layout */
  justify-content: space-between; /* Ensures even distribution */
  min-height: 400px; /* Add consistent minimum height */
}



.plan-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.plan-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--secondary-color); /* Dark purple text */
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 auto 0; /* Add auto margin at bottom */
  color: var(--secondary-color); /* Dark purple text */
  text-align: left;
  flex-grow: 1; /* Allow features to stretch within the card */
}


.plan-features li {
  font-size: 16px;
  margin-bottom: 10px;
}

.plan-cta {
  padding: 12px 20px;
  font-size: 16px;
font-weight: bold;
  background: var(--accent-color); /* Yellow button */
  color: var(--text-color); /* White text */
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
  width: auto; /* Keep button width flexible */
  margin-top: auto; /* Add this line to push the button to the bottom */
}


.plan-cta:hover {
  background: #fca65d; /* Slightly darker yellow */
  transform: scale(1.05);
}

/* Mobile Layout */
@media (max-width: 768px) {
  .plans-container {
    grid-template-columns: 1fr; /* Stack plans vertically */
  }

  .plan-card {
  margin-bottom: 20px;
  min-height: 450px; /* Add this line to ensure taller boxes on mobile */
}

}




/* Benefits Page Hero Section */
.benefits-page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 100vh;
  padding: 50px 10%;
  background: url('../assets/images/benefits-background.png') no-repeat center center;
  background-size: cover;
  color: var(--secondary-color);
  text-align: left;
}

.benefits-page-hero h1 {
  font-size: 72px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.05;
}

/* Hero Image */
.benefits-page-hero .hero-image img {
  width: 600px;
  height: 600px;
  object-fit: cover;
  border-radius: 0;
  margin-top: 100px;
}

/* Mobile Layout Adjustments */
@media (max-width: 768px) {
  .benefits-page-hero {
    display: flex;
    flex-direction: column; /* Stack title and image vertically */
    text-align: center; /* Center-align content horizontally */
    align-items: center; /* Ensure elements are centered */
    padding: 20px 20px; /* Add padding for spacing */
    height: auto; /* Remove fixed height for dynamic resizing */
    gap: 10px; /* Reduce spacing between title and image */
  }

  .benefits-page-hero h1 {
    font-size: 48px; /* Adjust title size for mobile */
    margin-bottom: 5px; /* Reduce margin below title */
    line-height: 1.1; /* Adjust line height for better readability */
  }

  .benefits-page-hero .hero-image img {
    width: 200px; /* Adjust image width for better fit */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Reduce space below the image */
  }
}


/* Benefitspage Section */
.benefitspage-section {
  display: flex; /* Enable flexbox */
  flex-direction: column; /* Ensure the title is above the grid */
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally */
  min-height: 100vh; /* Allow content to define height */
  padding: 60px 5%; /* Balanced padding */
  text-align: center;
  background: var(--background-gradient); /* Overall gradient */
  color: white;
  box-sizing: border-box; /* Include padding in height calculation */
}

/* Section Title */
.benefitspage-title h2 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 60px;
  text-align: center; /* Center-align title */
}

/* Benefits Grid */
.benefitspage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 30px; /* Equal spacing between boxes */
  max-width: 1200px; /* Restrict grid width */
  width: 100%; /* Responsive to section width */
  margin: 0 auto; /* Center grid horizontally */
}

/* Individual Benefitspage Boxes */
.benefitspage-box {
  position: relative;
padding: 10px 30px;
  text-align: left;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Space content from top to bottom */
  box-sizing: border-box;
  aspect-ratio: 1 / 1; /* Ensure square shape */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.benefitspage-box:hover {
  transform: scale(1.05); /* Subtle zoom effect */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

/* Background Images */
.feature1-background {
  background: url('../assets/images/feature1.png') no-repeat center;
  background-size: cover; /* Keep full background image coverage */
}

.benefits-background {
  background: url('../assets/images/benefits-background.png') no-repeat center;
  background-size: cover;
  color: var(--secondary-color); /* Purple text */
}

/* Titles */
.benefitspage-box h3 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
  align-self: flex-start; /* Align title to top of box */
  color: white; /* Default title color */
}

.benefits-background h3 {
  color: var(--secondary-color); /* Purple title for benefits-background */
}

/* Subtitle */
.benefitspage-subtitle {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent-color); /* Yellow for subtitle */
  margin: 0px 0; /* Space between title and subtitle */
}

/* Center Content (Image Placeholders or Quotes) */
.benefitspage-quote {
  font-size: 22px;
  font-style: italic;
  color: white; /* Match white text for clarity */
  text-align: center;
  margin: auto 0; /* Center vertically */
}

.benefitspage-hero {
  width: 100%; /* Scale image width relative to the box */
  height: auto; /* Maintain aspect ratio */
  max-height: 400px; /* Ensure image does not become too tall */
  min-width: 300px; /* Set a minimum width */
  min-height: 300px; /* Set a minimum height */
  background-size: contain; /* Ensure full image visibility */
  background-position: center; /* Center image */
  margin: auto; /* Center horizontally */
background-repeat: no-repeat;
}

/* Hero Placeholder Backgrounds */
.benefitspage-hero-1 {
  background-image: url('../assets/images/benefitspage-1.png');
}

.benefitspage-hero-2 {
  background-image: url('../assets/images/benefitspage-2.png');
}

/* Bottom Text */
.benefitspage-small-text {
  font-size: 16px;
  line-height: 1.4;
  color: white; /* Default color */
  text-align: left;
  margin-top: auto; /* Push to the bottom of the box */
}

.benefits-background .benefitspage-small-text {
  color: var(--secondary-color); /* Purple text for small text */
}

/* Highlight Text */
.highlight-yellow {
  color: var(--accent-color);
  font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
  .benefitspage-section {
    min-height: auto; /* Allow the section height to adjust to content on mobile */
    padding: 20px 5%; /* Add padding for mobile layout */
  }

  .benefitspage-title h2 {
    font-size: 28px; /* Smaller title size for mobile */
    margin-bottom: 30px; /* Less space below the title */
  }

  .benefitspage-grid {
    grid-template-columns: 1fr; /* Stack boxes vertically */
    gap: 15px; /* Reduce gap between boxes */
  }

  .benefitspage-box {
    padding: 5px 15px; /* Adjust padding for mobile */
    max-width: 90%; /* Allow full width on mobile */
    aspect-ratio: 1 / 1; /* Maintain square shape */
    font-size: 14px; /* Reduce font size for mobile */
  }

  .benefitspage-box h3 {
    font-size: 20px; /* Smaller title font size */
    margin-bottom: 8px; /* Reduce space below title */
  }

  .benefitspage-subtitle {
    font-size: 14px; /* Smaller subtitle font size */
    margin: 8px 0; /* Adjust spacing for subtitle */
  }

.benefitspage-hero {
  width: 80%; /* Scale image width relative to the box */
  height: auto; /* Maintain aspect ratio */
  max-height: 200px; /* Ensure image does not become too tall */
  min-width: 150px; /* Set a minimum width */
  min-height: 150px; /* Set a minimum height */
  background-size: contain; /* Ensure full image visibility */
  background-position: center; /* Center image */
  margin: auto; /* Center horizontally */
}


  .benefitspage-small-text {
    font-size: 12px; /* Smaller font for bottom text */
    line-height: 1.2; /* Adjust line height */
    margin-top: 8px; /* Adjust spacing at the bottom */
  }
}




/* Call-to-Action Section */
.cta-section {
  background: url('../assets/images/benefits-background.png') no-repeat center center;
  background-size: cover;
  padding: 50px 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-container {
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
  padding: 30px 40px;
  max-width: 700px;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #333;
  font-family: 'League Spartan', sans-serif;
  border-radius: 0; /* Square edges */
}

.cta-container h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--secondary-color); /* Purple */
}

.cta-container p {
  font-size: 16px;
  margin-bottom: 30px;
}

.cta-form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.cta-form-row input,
.cta-form-row textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: 'League Spartan', sans-serif;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: none;
  color: #333;
  border-radius: 0; /* Square edges */
}

.cta-form-row input::placeholder,
.cta-form-row textarea::placeholder {
  color: #666;
  font-weight: normal;
}

.cta-textarea {
  resize: none;
  height: 80px;
}

.cta-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #333;
  text-align: left;
}

.cta-checkbox-container input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  cursor: pointer;
}

.cta-container button {
  padding: 12px 40px; /* Narrow button */
  font-size: 16px;
  font-family: 'League Spartan', sans-serif;
  font-weight: bold;
  background: var(--accent-color);
  color: white;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s, transform 0.2s;
}

.cta-container button:hover {
  background: #fca65d;
  transform: scale(1.05);
}

/* Mobile Styles */
@media (max-width: 768px) {
  .cta-section {
    padding: 30px 5%;
  }

  .cta-container {
    padding: 20px 30px; /* Reduce padding for smaller screens */
  }

  .cta-container h2 {
    font-size: 28px;
  }

  .cta-container p {
    font-size: 14px;
  }

  .cta-form-row input,
  .cta-form-row textarea {
    padding: 8px;
    font-size: 14px;
  }

  .cta-container button {
    padding: 10px 30px;
    font-size: 14px;
  }
}






/* Sustainability Section */
.sustainability-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh; /* Use min-height to prevent content from being cut off */
  padding: 100px 10%;
  background: linear-gradient(90deg, #76c893, #4e8f6c); /* Softer green gradient */
  color: white;
  box-sizing: border-box; /* Ensure padding doesn't cause overflow */
}

.sustainability-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Text on left, boxes on right */
  gap: 40px;
  max-width: 1400px;
  width: 100%;
  box-sizing: border-box; /* Include padding in layout calculations */
}

.sustainability-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sustainability-text h1 {
  font-size: 62px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
}

.sustainability-text h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: left;
}

.sustainability-text p {
  font-size: 20px;
  line-height: 1.8;
  text-align: left;
}

.highlight {
  color: #f2c94c; /* Gold highlight */
  font-weight: bold;
}

/* Box Styling */
.sustainability-box-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three large boxes in a row */
  gap: 10px;
}

.sustainability-box {
  height: 600px; /* Reduced height for better balance */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sustainability-box.ocean {
  background: url('../assets/images/ocean.png') no-repeat center center;
}

.sustainability-box.deforestation {
  background: url('../assets/images/forest.png') no-repeat center center;
}

.sustainability-box.education {
  background: url('../assets/images/education.png') no-repeat center center;
}

.sustainability-box:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .sustainability-hero {
    padding: 60px 5%; /* Adjust padding for smaller screens */
  }

  .sustainability-container {
    grid-template-columns: 1fr; /* Stack text and boxes vertically */
  }

  .sustainability-box-container {
    grid-template-columns: 1fr; /* Boxes stacked vertically */
  }

  .sustainability-box {
    height: 300px; /* Smaller box height for mobile */
  }

  .sustainability-text h1 {
    font-size: 40px; /* Adjusted size for mobile */
  }

  .sustainability-text h2 {
    font-size: 28px; /* Adjusted size for mobile */
  }

  .sustainability-text p {
    font-size: 18px; /* Adjusted size for mobile */
  }
}


/* Sustainability End Section Styles */
.end-section-custom {
  background-color: white; /* White background */
  color: var(--accent-color); /* Yellow text */
  padding: 30px 10%; /* Padding around the section */
  text-align: center; /* Center-align content */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Space between links and footer */
  font-size: 14px;
  box-sizing: border-box; /* Ensure padding doesn't affect dimensions */
  margin: 0 auto;
  overflow: hidden;
}

.end-links-custom {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* Allow links to wrap on smaller screens */
  margin-bottom: 20px;
}

.end-links-custom a {
  width: 130px; /* Uniform button size */
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  padding: 10px 15px; /* Padding for buttons */
  border-radius: 0; /* Square edges */
  transition: background-color 0.3s, transform 0.3s;
  color: var(--accent-color); /* Yellow text */
  font-weight: bold;
  letter-spacing: 1px;
  border: 2px solid var(--accent-color); /* Yellow border */
  background-color: transparent; /* Transparent background */
}

.end-links-custom a:hover {
  background-color: var(--accent-color); /* Yellow background on hover */
  color: white; /* White text on hover */
  transform: scale(1.05); /* Slight hover effect */
}

.end-info-custom {
  font-size: 12px;
  color: var(--accent-color); /* Yellow text */
  opacity: 0.9;
}

.end-info-custom .privacy-link-custom {
  color: var(--accent-color); /* Yellow link */
  text-decoration: none;
}

.end-info-custom .privacy-link-custom:hover {
  text-decoration: underline; /* Underline on hover */
  opacity: 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .end-links-custom {
    gap: 10px; /* Reduce gap for smaller screens */
  }

  .end-links-custom a {
    width: auto; /* Adjust button size for small screens */
    padding: 8px 10px;
    font-size: 12px; /* Smaller font size */
  }
}


/* Yellow Menu Container */
.menu-yellow {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1000;
}

/* Yellow Menu Icon */
.menu-icon-yellow {
  cursor: pointer;
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-icon-yellow div {
  width: 100%;
  height: 4px;
  background-color: var(--accent-color); /* Yellow lines */
  transition: transform 0.3s, background-color 0.3s;
}

/* Yellow Menu Links */
.menu-links-yellow {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9); /* White background with opacity */
  color: var(--accent-color); /* Yellow text */
  width: 50%; /* Comfortable portion of the screen */
  max-width: 200px; /* Limit maximum width */
  height: 75%; /* Full height of the viewport */
  display: none; /* Initially hidden */
  flex-direction: column; /* Arrange items vertically */
  gap: 15px; /* Increased spacing between items */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  z-index: 1001; /* Ensure it appears above other elements */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
  font-size: 18px; /* Slightly larger font */
  font-weight: bold; /* Make text bolder */
}

.menu-links-yellow.active {
  display: flex;
}

.menu-links-yellow a {
  text-decoration: none;
  font-size: 18px;
  color: var(--accent-color); /* Yellow links */
  padding: 10px;
  transition: background-color 0.3s;
}

.menu-links-yellow a:hover {
  background-color: var(--accent-color); /* Yellow background on hover */
  color: white; /* White text on hover */
}

/* Yellow Close Menu Button */
.close-menu-yellow {
  font-size: 24px;
  color: var(--accent-color);
  background: none;
  border: none;
  text-align: right;
  cursor: pointer;
  align-self: flex-end;
  transition: transform 0.3s ease;
}

.close-menu-yellow:hover {
  transform: scale(1.2); /* Subtle enlarge effect on hover */
}

/* Adjust for Larger Screens */
@media (min-width: 768px) {
  .menu-links-yellow {
    width: 30%; /* Use 30% of the viewport width for larger screens */
  }
}

/* Responsive Yellow Menu */
@media (max-width: 768px) {
  .menu-links-yellow {
    width: 80%; /* Adjust width for smaller screens */
    gap: 10px; /* Reduced spacing */
  }

  .menu-links-yellow a {
    font-size: 16px; /* Smaller font size for mobile */
  }
}


/* Partnership section */

.partnerships-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 100vh;
  padding: 50px 10%;
  background: url('../assets/images/benefits-background.png') no-repeat center center; /* Match Benefits Page */
  background-size: cover;
  color: var(--secondary-color); /* Dark purple text */
  text-align: left;
}

.partnerships-hero .hero-content {
  max-width: 60%; /* Adjust width for text */
}

.partnerships-hero h1 {
  font-size: 72px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.1;
  color: var(--secondary-color); /* Dark purple */
}

.partnerships-hero p {
  font-size: 24px;
  line-height: 1.4;
  color: var(--secondary-color); /* Dark purple */
}

.partnerships-hero .hero-image img {
  width: 600px; /* Image dimensions */
  height: 600px;
  object-fit: cover;
  border-radius: 0; /* No rounded edges */
  margin-top: 100px; /* Lower the image */
}

@media (max-width: 768px) {
  .partnerships-hero {
    flex-direction: column; /* Stack text and image vertically */
    text-align: center;
    align-items: center;
    padding: 20px;
    min-height: auto; /* Ensure height adjusts with content */
    height: auto; /* Let content dictate height */
  }
.partnerships-hero .hero-content {
    max-width: 90%; /* Allow text content to take up more width */
    text-align: center; /* Center-align text for better readability */
  }

  .partnerships-hero h1 {
    font-size: 48px; /* Adjust heading size */
    margin-bottom: 10px;
  }

  .partnerships-hero p {
    font-size: 18px; /* Smaller font for better spacing */
    line-height: 1.4; /* Adjust line height for readability */
  }

  .partnerships-hero .hero-image img {
 width: 250px;
    height: 250px;
    margin-bottom: 40px;
  }
  
}

/* Pepster Innovation Section */
.pepster-innovation-section {
  padding: 60px 10%;
  background: linear-gradient(90deg, #9736ff, #4e00c9); /* Purple gradient */
  color: white; /* White text */
}

.pepster-innovation-container {
  display: flex;
  flex-direction: row; /* Text and form side by side */
  gap: 40px; /* Space between text and form */
  align-items: flex-start; /* Align content to the top */
}

.pepster-innovation-content {
  flex: 1;
  text-align: left;
}

.pepster-innovation-content h2 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.pepster-innovation-content p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.pepster-innovation-content .highlight {
  color: #fca65d; /* Yellow highlight */
  font-weight: bold;
}

.innovation-bullets {
  list-style-type: none; /* Remove default bullet points */
  padding: 0;
  margin: 0;
}

.innovation-bullets li {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 10px;
  position: relative;
  padding-left: 25px;
}

.innovation-bullets li::before {
  content: '✔';
  color: #fca65d;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 0;
}

/* Form Styling */
.pepster-innovation-form {
  flex: 1;
  max-width: 500px; /* Restrict form width */
  text-align: left;
}

.pepster-innovation-form h3 {
  font-size: 32px;
  margin-bottom: 20px;
}

.pepster-innovation-form .form-row {
  margin-bottom: 15px;
}

.pepster-innovation-form input,
.pepster-innovation-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.pepster-innovation-form input::placeholder,
.pepster-innovation-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.pepster-innovation-form textarea {
  resize: none;
  height: 80px;
}

.pepster-innovation-form .checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: white;
}

.pepster-innovation-form .checkbox-container input {
  width: 20px;
  height: 20px;
}

.pepster-innovation-form button {
  padding: 10px 20px;
  font-size: 14px;
  background: #fca65d;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-align: center;
}

.pepster-innovation-form button:hover {
  background: #f4a33b;
  transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 768px) {
  .pepster-innovation-container {
    flex-direction: column; /* Stack text and form vertically */
    align-items: center;
  }

  .pepster-innovation-content {
    text-align: center;
  }

  .pepster-innovation-form {
    max-width: 100%;
  }
}

/* Careers Hero Section */
.careers-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 100vh;
  padding: 50px 10%;
  background: url('../assets/images/benefits-background.png') no-repeat center center;
  background-size: cover;
  color: var(--secondary-color);
  text-align: left;
}

.careers-hero .hero-content {
  max-width: 60%;
}

.careers-hero h1 {
  font-size: 72px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.1;
  color: var(--secondary-color);
}

.careers-hero p {
  font-size: 24px;
  line-height: 1.4;
}

.careers-hero .hero-image img {
  width: 600px;
  height: 600px;
  object-fit: cover;
  border-radius: 0;
  margin-top: 100px;
}

/* No Vacancies Section */
.no-vacancies {
  text-align: center;
  padding: 60px 10%;
  background: var(--background-gradient);
  color: var(--text-color);
}

.no-vacancies h2 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.no-vacancies p {
  font-size: 20px;
  line-height: 1.6;
}

.no-vacancies a {
  color: var(--accent-color);
  text-decoration: underline;
  font-weight: bold;
}

.no-vacancies a:hover {
  color: white;
}

/* Mobile Layout Adjustments */
@media (max-width: 768px) {
  /* Hero Section */
  .careers-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    height: auto; /* Let content define height */
  }

  .careers-hero .hero-content {
    max-width: 100%;
  }

  .careers-hero h1 {
    font-size: 48px; /* Adjusted for mobile */
  }

  .careers-hero p {
    font-size: 18px; /* Smaller text size */
  }

  .careers-hero .hero-image img {
    width: 250px; /* Adjust for smaller screens */
    height: 250px;
    margin-top: 20px;
  }

  /* No Vacancies Section */
  .no-vacancies {
    padding: 40px 5%; /* Adjust padding for smaller screens */
  }

  .no-vacancies h2 {
    font-size: 28px; /* Adjusted font size */
  }

  .no-vacancies p {
    font-size: 16px; /* Smaller text size */
  }
}

/* Styling for LinkedIn link in No Vacancies section */
.linkedin-link {
  color: var(--accent-color); /* Use yellow accent color */
  text-decoration: underline; /* Add underline for visibility */
  font-weight: bold; /* Emphasize the link */
}

.linkedin-link:hover {
  color: white; /* Change color on hover */
  text-decoration: none; /* Remove underline on hover */
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  color: white; /* White text */
  text-align: center;
  padding: 10px;
  z-index: 9999; /* Ensure it's always on top */
  display: flex;
  justify-content: center;
  align-items: center;
}

.cookie-banner p {
  margin: 0;
  font-size: 10px;
  line-height: 1.0;
}

.cookie-banner a {
  color: white;
  text-decoration: underline;
}

.cookie-banner a:hover {
  color: white;
}

.cookie-btn {
  background-color: white;
  color: black;
  border: none;
  padding: 8px 8px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 10px;
}

.cookie-btn:hover {
  background-color: var(--accent-color);
}