/* CSS Reset & Variables */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors from Figma */
  --primary-orange: #FF6B4A;
  --primary-purple: #6B4AFF;
  --dark-blue: #1A1A3E;
  --cream: #FFF5E6;
  --white: #FFFFFF;
  --gradient-yellow-pink: linear-gradient(180deg, #FFD54F 0%, #FF8A80 50%, #E91E63 100%);
  --gradient-orange: linear-gradient(135deg, #FFD54F 0%, #FF8A80 100%);

  /* Typography */
  --font-heading: sans-serif;
  --font-body: sans-serif;

  /* Font Sizes */
  --fs-large: 3.5rem;
  /* Main page title */
  --fs-medium: 1.5rem;
  /* Card titles */
  --fs-small: 1rem;
  /* Content text */

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Breakpoints */
  --mobile: 480px;
  --tablet: 768px;
  --desktop: 1024px;
  --wide: 1440px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--dark-blue);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: bold;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* Container & Grid System */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-lg) 0;
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

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

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* Responsive Grid */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Responsive */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-sm);
  }

  .section {
    padding: var(--spacing-md) 0;
  }
}

/* =========================================
   H&M STYLE FOOTER STYLES
   ========================================= */

/* =========================================
   FOOTER STYLES (3-Column Layout)
   ========================================= */

.site-footer {
  background-color: #262626;
  /* Dark Gray Background */
  color: #e5e5e5;
  /* Light Gray Text */
  padding: 5rem 0 3rem;
  font-family: var(--font-body);
}

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

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr 2fr;
  gap: 2rem;
  align-items: start;
  width: 100%;
}

/* Column 1: Brand & Vision */
.footer-logo {
  font-family: "Playfair Display", serif;
  /* Or Script font if available */
  font-size: 2.5rem;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 2rem;
  letter-spacing: 1px;
}

.footer-vision {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #a3a3a3;
  max-width: 300px;
  margin-bottom: 4rem;
}

.footer-bottom-info {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e5e5e5;
  font-weight: 600;
}

/* Column 2: Navigation */
.footer-heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e5e5e5;
  margin-bottom: 2.5rem;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-nav-list li a {
  color: #e5e5e5;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav-list li a:hover {
  color: #ffffff;
}

/* Column 3: Subscribe & Contact */
.footer-subscribe-form {
  margin-bottom: 3rem;
}

.form-row {
  display: flex;
  gap: 0;
}

.footer-input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #404040;
  color: #fff;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  width: 100%;
}

.footer-input::placeholder {
  color: #737373;
}

.footer-input:focus {
  border-color: #737373;
}

.footer-btn {
  background: transparent;
  border: 1px solid #404040;
  color: #e5e5e5;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: none;
}

.footer-btn:hover {
  background: #404040;
  color: #fff;
}

.footer-contact-info {
  margin-bottom: 2rem;
}

.footer-contact-info p {
  font-size: 0.95rem;
  color: #e5e5e5;
  margin-bottom: 0.5rem;
}

.footer-socials {
  display: flex;
  gap: 1.5rem;
}

.social-icon {
  color: #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.social-icon:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer-vision {
    max-width: 100%;
  }

  .footer-input {
    width: 100%;
  }
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  padding: 1rem;
  z-index: 1000;
  transition: background 0.2s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(255, 181, 251, 0.1);
}

/* Floating Feedback Button */
.feedback-floating-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* Changed to right as per user feedback/issue */
  background-color: #222;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 2147483647;
  /* Max z-index to ensure visibility */
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 120px;
  width: auto;
  object-fit: contain;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav-toggle span {
  width: 25px;
  height: 3px;
  background: var(--dark-blue);
  transition: all 0.3s ease;
}

.nav-menu {
  display: flex;
  gap: 1.5rem;
  /* Reduced spacing */
  list-style: none;
}

.nav-menu a {
  text-decoration: none;
  color: #000000 !important;
  font-size: 16px;
  /* Adjusted font size to fit nav */
  font-weight: 400;
  transition: all 0.5s ease-in-out;
  position: relative;
  text-transform: uppercase;
  display: inline-flex;
  /* Maintain layout */
  padding: 4px 8px;
  /* Maintain layout */
  gap: 4px;
}

/* Navbar Animation Styles (JS-based) */
.nav-menu {
  position: relative;
}

.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #e4ae0b;
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

/* Ensure active/focus states are cleaner */
.nav-menu a:focus-visible {
  outline: 2px solid var(--primary-orange);
  outline-offset: 4px;
  border-radius: 4px;
}



.nav-menu a:hover {
  color: var(--primary-purple);
  /* Simple color change fallback */
}

/* Ensure active state works with new style */
.nav-menu a:active {
  background-color: transparent;
  color: #8f8f8f;
}

/* Arrow Icon - hiding it as per user design implication or keeping? User didn't specify to remove, but the new design doesn't use it. I'll comment it out or remove it to match the 'clean' text look.*/
.nav-menu a::after {
  content: none;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--white);
  color: var(--primary-purple);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
  background: var(--primary-orange);
  color: var(--white);
}

.btn-secondary:hover {
  background: #ff5530;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 107, 74, 0.4);
}

.btn-outline {
  border: 2px solid var(--primary-orange);
  color: var(--primary-orange);
  background: transparent;
}

/* Cards */
.card {
  background: var(--white);
  border-radius: 20px;
  padding: var(--spacing-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Tabs */
.tabs {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.tab {
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  background: var(--white);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.tab:hover {
  background: var(--cream);
}

.tab.active {
  background: var(--primary-orange);
  color: var(--white);
}

/* Forms */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 50px;
  background: var(--white);
  font-family: inherit;
  font-size: 1rem;
}

.form-textarea {
  border-radius: 20px;
  min-height: 150px;
  resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
  outline: 2px solid var(--primary-orange);
}

/* Responsive Navigation */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: auto;
    min-width: 250px;
    max-width: 80%;
    height: 100vh;
    background: var(--white);
    flex-direction: column;
    padding: var(--spacing-xl) var(--spacing-md);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
  }

  .nav-menu.active {
    right: 0;
  }
}

/* Footer styles moved to layout.css */
/* Hero Section */
.hero {
  min-height: 100vh;
  background: var(--white);
  /* Light background */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: var(--spacing-xl) var(--spacing-md);
}

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

.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow-slide.active {
  opacity: 0.3;
  /* Semi-transparent for lighter feel */
}



.hero-title,
.btn,
.slideshow-arrow,
.slideshow-pagination,
.scroll-indicator {
  position: relative;
  z-index: 10;
}

.slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.05);
  /* Lighter background for arrows */
  border: none;
  color: var(--dark-blue);
  /* Dark arrow color */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.slideshow-arrow:hover {
  background: rgba(0, 0, 0, 0.1);
}

.slideshow-arrow.prev {
  left: 20px;
}

.slideshow-arrow.next {
  right: 20px;
}

.slideshow-pagination {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.slideshow-pagination .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  /* Darker dots for light bg */
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.slideshow-pagination .dot.active {
  background: var(--dark-blue);
  transform: scale(1.2);
}


.hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: bold;
  color: var(--dark-blue);
  /* Dark text for readability */
  max-width: 900px;
  margin: 0 auto var(--spacing-lg);
  line-height: 1.2;

}

.hero-subtitle {
  font-size: 1em;
  display: block;
  font-weight: 300;
  margin: 0.2em 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dark-blue);
  /* Ensure subtitle is also dark */
}

/* Text Rotation Animation */
.rotating-text {
  display: inline-block;
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

.rotating-text.fade-out {
  opacity: 0;
}

.scroll-indicator {
  position: absolute;
  bottom: 10px;
  /* Moved down */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  color: black;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 1px;
  animation: bounce 2s infinite;
}

@keyframes bounce {

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

  50% {
    transform: translateY(-10px);
  }
}

/* About Section */
.about-section {
  padding: 1rem 0 2rem;
  background: var(--white);
  text-align: center;
}

.about-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--dark-blue);
  margin-bottom: 2rem;
  letter-spacing: 2px;
  position: relative;
  display: inline-block;
}

.about-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background-color: #ccc;
}

.about-content {
  max-width: 1200px;
  /* Further increased to reduce side spacing */
  margin: 0 auto;
  padding: 0 2rem;
  /* Ensure content doesn't touch edge on small screens */
}

.about-content p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
  /* Reduced from 3rem to bring button closer */
}

.btn-secondary {
  display: inline-block;
  padding: 12px 30px;
  background-color: #444;
  color: var(--white);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: background-color 0.3s ease;
  border-radius: 0;
  /* Rectangle */
  border: none;
}

.btn-secondary:hover {
  background-color: #222;
}


/* Services Section */
.services {
  padding: 0 0 var(--spacing-md);
  background: var(--white);
}

.services-title {
  /* Match About Title */
  text-align: center;
  font-family: var(--font-heading);
  font-size: 2rem;
  /* Matches About Aykyam */
  color: var(--dark-blue);
  margin-bottom: var(--spacing-md);
  font-weight: bold;
}

.services-container {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  text-align: center;
  /* Centers the inline-block title */
}

/* 3-Column Grid - Flexbox for Centering */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 0;
  margin-bottom: 0;
  max-width: 1200px;
  /* Increased width for 3 columns */
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  /* Flexbox handles responsiveness via card width */
}

@media (max-width: 640px) {
  /* Mobile */
}

/* Service Cards - Static Design */
.service-card {
  position: relative;
  width: calc((100% - 4rem) / 3);
  /* 3 cards per row */
  height: auto;
  background: transparent;
  /* No card background as per screenshot style seems clean */
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  /* Light gray border */
  padding-bottom: 1.5rem;
  /* Add padding for looks inside border */
}

@media (max-width: 1024px) {
  .service-card {
    width: calc((100% - 2rem) / 2);
    /* 2 cards per row */
  }
}

@media (max-width: 640px) {
  .service-card {
    width: 100%;
    /* 1 card per row */
  }
}

.service-card:hover {
  box-shadow: none;
}

.card-thumb {
  width: 100%;
  height: 250px;
  background-color: #f8f9fa;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .card-thumb img {
  transform: scale(1.05);
}

.card-content {
  position: static;
  width: 100%;
  height: auto;
  padding: 0 1.5rem;
  /* Added Horizontal Padding for the border look */
  background: transparent;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Title Match: Bold Uppercase similar to About */
.card-title {
  font-family: sans-serif;
  font-size: 1.1rem;
  /* Slightly larger for emphasis */
  color: #555;
  /* Dark grey for "Steakhouse" look */
  margin: 0 0 1rem 0;
  padding: 0;
  line-height: 1.4;
  font-weight: 400;
  /* Regular weight often looks bolder in uppercase */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-text {
  font-family: sans-serif;
  font-size: 0.95rem;
  color: #777;
  line-height: 1.6;
  margin-bottom: 2rem;
  flex-grow: 1;
}

/* List Styling within Cards */
.card-list {
  padding-left: 1.2rem;
  margin: 0;
  text-align: left;
  flex-grow: 1;
}

.card-list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #777;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  list-style-type: disc;
}

/* Card Button */
.btn-card {
  display: inline-block;
  padding: 12px 24px;
  background-color: #444;
  /* Dark grey button */
  color: var(--white);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-align: center;
  align-self: flex-start;
  /* Left align button */
  transition: background-color 0.3s ease;
  font-weight: 500;
  border: none;
  border-radius: 0;
}

.btn-card:hover {
  background-color: #222;
}

/* Remove old styles */
.card-reveal,
.card-link {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .hero {
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  .hero-title {
    font-size: 2.5rem;
  }
}


/* Values Section Styles moved to line 2362 */

/* Shared Section Card Style */
.home-card {
  background: var(--white);
  border: none;
  border-radius: 12px;
  /* Consistent radius */
  padding: 3rem;
  margin: 0 auto;
  max-width: 1200px;
  box-shadow: none;
  /* No hover effects requested implies flat or static */
}

/* Our Experience Section */
.experience-section {
  padding: 4rem 0;
  /* Adjusted padding */
  background: var(--white);
}

.experience-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--dark-blue);
  text-align: center;
  margin-bottom: 1.5rem;
  /* Reduced from 3rem */
  position: relative;
  display: inline-block;
  /* Required for centered underline */
  left: 50%;
  transform: translateX(-50%);
}

.experience-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: #ccc;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Left Content, Right Image */
  gap: 4rem;
  align-items: center;
}

.experience-content-col p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
  text-align: left;
}

.experience-image-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.experience-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* New Expertise Grid Styles */
.expertise-section {
  padding-bottom: 15rem;
  /* Reduced padding as we will use margin on container */
  overflow: hidden;
  /* Ensure it contains everything */
  clear: both;
}

.expertise-container-fluid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  margin-bottom: 12rem;
  /* Increased to significantly push footer down */
}

.expertise-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 350px;
  /* Reduced from 450px to fit in one view */
  gap: 4px;
  /* Very tight gap as seen in screenshot */
}

.expertise-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}

.expertise-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: #000;
  border: 1px solid #e0e0e0;
  /* Light gray border */
  /* Fallback */
}

.expertise-card img,
.expertise-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.expertise-card:hover img,
.expertise-card:hover video {
  transform: scale(1.1);
  opacity: 0.6;
  /* Darken image slightly on hover to help text */
}

.expertise-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Full height overlay for gradient */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 30%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  transition: all 0.4s ease;
}

.expertise-card:hover .expertise-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.expertise-content-wrapper {
  position: relative;
  z-index: 2;
  transform: translateY(20px);
  /* Initial offset */
  transition: transform 0.4s ease;
}

.expertise-card:hover .expertise-content-wrapper {
  transform: translateY(0);
}

.expertise-card-title {
  font-family: sans-serif;
  font-size: 1.35rem;
  /* Increased from 1.25rem */
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.25rem;
  text-transform: capitalize;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s ease;
}

/* On hover, maybe move title up slightly? Handled by wrapper translate */

.expertise-hover-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.expertise-card:hover .expertise-hover-content {
  max-height: 160px;
  /* Increased to fit larger text */
  /* Enough space for text */
  opacity: 1;
}

.expertise-subtitle {
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  color: #fff;
}

.expertise-text {
  font-family: sans-serif;
  font-size: 0.95rem;
  /* Increased from 0.8rem */
  line-height: 1.3;
  color: #ddd;
  margin: 0;
}

/* Responsive Expertise */
@media (max-width: 900px) {
  .expertise-grid-container {
    grid-template-columns: 1fr;
    height: auto;
    /* Allow stacking */
    gap: 1rem;
  }

  .expertise-sub-grid {
    height: 450px;
    /* Keep subgrid square-ish or just stack */
  }

  .feature-card {
    height: 300px;
  }
}

@media (max-width: 600px) {
  .expertise-sub-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .expertise-card {
    height: 300px;
  }
}

/* =========================================
   Guiding Principles Section Styles
   ========================================= */

.principles-section {
  padding: 4rem 0 6rem;
  background: #f4f6f8;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2rem;
}

.principle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  border-right: 1px solid #ccc;
  text-align: center;
}

.principle-card:last-child {
  border-right: none;
}

.principle-icon-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.principle-icon-wrapper svg {
  width: 60px;
  height: 60px;
}

.principle-content {
  flex-grow: 1;
}

.principle-title {
  font-family: sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark-blue);
  margin-bottom: 0.75rem;
}

.principle-text {
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

/* Responsive Principles */
@media (max-width: 900px) {
  .principles-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .principle-card {
    border-right: none;
    padding: 1rem 0;
    border-bottom: 1px solid #ccc;
  }

  .principle-card:last-child {
    border-bottom: none;
  }
}

/* Interactive Question Section */
.interactive-question-section {
  padding: 4rem 0;
  background-color: var(--white);
  text-align: center;
}

.interactive-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
}

.interactive-question {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--dark-blue);
  margin-bottom: 3rem;
  min-height: 3rem;
  transition: opacity 0.3s ease;
}

.interactive-options {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.option-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: transform 0.2s ease;
  padding: 1rem;
  border-radius: 12px;
}

.option-btn:hover {
  transform: translateY(-5px);
}

.option-btn.selected {
  background-color: rgba(0, 0, 0, 0.03);
  transform: scale(1.05);
}

.option-image-wrapper {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.option-label {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  color: #888;
  padding: 0.5rem 1.5rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  transition: all 0.3s ease;
  background: #fff;
}

.option-btn[data-value="bad"].selected .option-label {
  color: #e57373;
  border-color: #e57373;
}

.option-btn[data-value="ok"].selected .option-label {
  color: #fbc02d;
  border-color: #fbc02d;
}

.option-btn[data-value="good"].selected .option-label {
  color: #26a69a;
  border-color: #26a69a;
}

.interactive-submit-btn {
  background-color: #444;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 40px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.interactive-submit-btn:not(:disabled) {
  opacity: 1;
  pointer-events: auto;
}

.interactive-submit-btn:hover {
  background-color: #222;
}

/* Thank You View Styles */
.thank-you-view {
  animation: fadeIn 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.thank-you-shapes {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.ty-shape {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  animation: bounce 2s infinite ease-in-out;
}

/* Stagger animations */
.ty-shape:nth-child(1) {
  animation-delay: 0s;
}

.ty-shape:nth-child(2) {
  animation-delay: 0.2s;
}

.ty-shape:nth-child(3) {
  animation-delay: 0.4s;
}

.ty-shape:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes bounce {

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

  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* About Us - Founder Led Page Styles */

body {
  background: #ffffff;
}

/* Founder Profile Section */
.founder-profile-section {
  padding-top: 8rem;
  padding-bottom: var(--spacing-xl);
}

.founder-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 4rem;
  align-items: flex-start;
}

/* Left Column: Image & Contact */
.founder-image-col {
  position: sticky;
  top: 100px;
}

.founder-image-container {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--spacing-md);
}

.founder-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.founder-contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dark-blue);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.founder-contact-link:hover {
  color: var(--primary-orange);
}

.founder-contact-link svg {
  color: var(--primary-orange);
  opacity: 0.8;
}

/* Right Column: Content */
.founder-name {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--dark-blue);
  margin: var(--spacing-xs) 0 var(--spacing-md);
  line-height: 1.1;
}

.founder-bio p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--dark-blue);
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.founder-cta-note {
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(26, 26, 62, 0.1);
  font-style: italic;
  font-size: 1rem !important;
}

.text-link {
  color: var(--primary-orange);
  font-weight: 600;
  text-decoration: underline;
}

/* CTA Section */
.cta-section {
  text-align: center;
  padding: var(--spacing-xl) 0;
  background: var(--white);
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .founder-grid {
    gap: 2.5rem;
  }
}

/* Shared Card Styles */
.about-card-section {
  padding: 0;
  margin-bottom: 2rem;
  background: transparent;
  /* Card itself is the container */
}

.about-card-container {
  background: var(--white);
  border-radius: 0;
  /* Reference image seems sharp or slightly rounded, usually 0 for this design */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 3rem;
  /* Gap between cards */
}

/* Page Header Section */
.about-header {
  padding-top: 10rem;
  padding-bottom: 4rem;
  text-align: center;
  background: #ffffff;
}

.page-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--dark-blue);
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: #ccc;
}

.page-subtitle.single-line {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--dark-blue);
  font-weight: 400;
  max-width: 900px;
  margin: 1.5rem auto 3rem;
  /* Added top margin for spacing from line */
  line-height: 1.6;
}

.about-header-card {
  background: var(--white);
  border-radius: 0;
  padding: 3rem 2rem;
  box-shadow: none;
  /* Removed shadow/border effect as requested */
  border: 1px solid #e0e0e0;
  max-width: 1200px;
  margin: 0 auto;
}

.header-image-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  /* Slight radius for image inside card looks better, or 0 if preferred strict strict. Keeping slight for aesthetics inside card. */
  overflow: hidden;
  box-shadow: none;
  /* Removed shadow as it's inside the card now */
}

.header-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Typography Update for Shared Classes */
.founder-name,
.experience-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: bold;
  color: var(--dark-blue);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.experience-title {
  position: relative;
  display: inline-block;
  margin-bottom: 2.5rem;
  /* More space for line */
}

.experience-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  /* Left aligned */
  width: 60px;
  height: 2px;
  background-color: #ccc;
}

/* Our Experience Section */
.experience-section {
  padding: 4rem 0;
  background: #ffffff;
}

.experience-card {
  background: var(--white);
  box-shadow: none;
  border-radius: 0;
  border: none;
  overflow: visible;
  padding-bottom: 2rem;
}

.experience-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--dark-blue);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  display: block;
  /* Ensure block for centering */
}

.experience-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: #000;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 0;
}

/* Principle Card Separators */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}

.principle-card {
  padding: 0 1rem;
  position: relative;
}

.principle-card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1rem;
  /* Adjust based on gap */
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: #000;
}

/* Logic to hide existing gray borders if any, assuming they are borders */
.principle-card {
  border-right: none !important;
}

.experience-content-col {
  padding: 0;
}

.experience-content-col p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
  text-align: left;
}

.experience-image-col {
  /* Reset float/flex issues */
  float: none;
  width: 100%;
  margin: 0;
  display: block;
}

.experience-image-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

.experience-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Founder Profile Section (About Aparna Amte) */
.founder-profile-section {
  padding-top: 10rem;
  padding-bottom: 4rem;
}

.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Split equally or use 350px 1fr */
  gap: 4rem;
  /* Restore gap */
  align-items: center;
  background: transparent;
  box-shadow: none;
  border: none;
  overflow: visible;
}

.founder-image-col {
  background: transparent;
  display: block;
  position: static;
  /* Remove sticky if causing overlap */
}

.founder-image-container {
  width: 100%;
  aspect-ratio: auto;
  border-radius: 20px;
  /* Restore radius */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  /* Restore shadow */
  overflow: hidden;
}

.founder-content-col {
  padding: 0;
  display: block;
}

.section-tag {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #444;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.founder-name {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--dark-blue);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.founder-bio p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1.5rem;
}



/* Responsive */
@media (max-width: 900px) {

  .experience-grid,
  .founder-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .experience-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .experience-content-col p,
  .founder-bio p {
    text-align: left;
  }
}

/* Services Page Styles */

/* Header Section - Adapted from Resources Page */
/* Header Section - Adapted from Resources Page */
.services-header {
  padding: 9rem 0 5rem;
  text-align: left;
  color: var(--dark-blue);
  /* Using Resources page background image as placeholder since layout is similar */
  /* Stronger white overlay on the left for better text readability */
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0.1) 100%),
    url('../../../img/sections/Services Page Image/Services Page Title Image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.scroll-indicator {
  position: absolute;
  bottom: 1.5rem;
  /* Shifted downwards from 4rem */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--dark-blue);
  cursor: pointer;
  z-index: 10;
  animation: bounce 2s infinite;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
  opacity: 1;
}

@keyframes bounce {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -10px);
  }
}

.header-content-wrapper {
  max-width: 650px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
}

.services-page-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  /* Increased margin */
  color: var(--dark-blue);
  text-transform: uppercase;
  letter-spacing: -0.5px;
  /* Removed heavy text-shadow for cleaner look */
}

.services-page-subtitle {
  font-size: 1.25rem;
  opacity: 1;
  line-height: 1.6;
  color: var(--dark-blue);
  font-weight: 500;
  /* Removed text-shadow */
}

/* Services Main Section */
.services-main {
  padding: 100px 0;
  background: #ffffff;
}

/* Services Grid - From Home Page */
/* Services Grid - Refactored to Flexbox for Centering */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 0;
  margin-bottom: 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Service Cards - Adjusted for Flexbox */
.service-card {
  position: relative;
  /* 3 cards per row: (100% - (2 * 2rem gap)) / 3 */
  width: calc((100% - 4rem) / 3);
  height: auto;
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  padding-bottom: 2rem;
}

@media (max-width: 1024px) {
  .service-card {
    /* 2 cards per row: (100% - (1 * 2rem gap)) / 2 */
    width: calc((100% - 2rem) / 2);
  }
}

@media (max-width: 800px) {
  .service-card {
    /* 2 cards per row - ensuring tablet view holds 2 columns until mobile */
    width: calc((100% - 2rem) / 2);
  }
}

@media (max-width: 640px) {
  .service-card {
    width: 100%;
  }
}

.service-card:hover {
  box-shadow: none;
}

.card-thumb {
  width: 100%;
  height: 250px;
  background-color: #f8f9fa;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .card-thumb img {
  transform: scale(1.05);
}

.card-content {
  position: static;
  width: 100%;
  height: auto;
  padding: 0 1.5rem;
  background: transparent;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-title {
  font-family: sans-serif;
  font-size: 1.1rem;
  color: #333;
  margin: 0 0 1rem 0;
  padding: 0;
  line-height: 1.4;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-text {
  font-family: sans-serif;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 2rem;
  flex-grow: 1;
}



/* Services CTA Button */
.services-cta-container {
  text-align: center;
  margin-top: 4rem;
}

.services-cta-btn {
  background-color: #333 !important;
  /* Force override */
  color: #fff !important;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 15px 40px;
  border: none !important;
  border-radius: 0 !important;
  /* Force rectangular */
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.services-cta-btn:hover {
  background-color: #222 !important;
}

/* READ MORE Button Style */
.card-meta {
  margin-top: auto;
  padding-bottom: 0.5rem;
}

.btn-availability {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #333;
  /* Dark background */
  color: #fff;
  /* White text */
  padding: 10px 20px;
  font-family: sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  /* Rectangle */
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  pointer-events: auto;
}

/* ========================================= */
/* Imported Offerings Section Styles (from Home) */
/* ========================================= */

.values-section {
  position: relative;
  background-image: url('../../../img/sections/Services Page Image/Card background Image.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 6rem 0;
  color: #fff;
  text-align: center;
}

.about-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--primary-orange);
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
}

.about-content p {
  margin-bottom: 2rem;
  color: #555;
  line-height: 1.8;
}

/* Values/Expertise Section */
.values-section {
  padding: 4rem 0;
  background-color: #f9f9f9;
  position: relative;
}

.values-title {
  text-align: center;
  font-size: 2.5rem;
  color: var(--dark-blue);
  margin-bottom: 3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.value-card {
  background: var(--white);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.value-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 1.5rem;
  /* Orange circle bg for icon */
  /* background: rgba(255, 107, 74, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center; */
}

.value-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.value-heading {
  font-size: 1.25rem;
  color: var(--dark-blue);
  margin-bottom: 1rem;
}

.value-text {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
}

/* Principles Section */
.principles-section {
  padding: 4rem 0;
  color: var(--dark-blue);
  /* Text color inherited or overridden by internal elements */
}

.principles-grid {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.principle-card {
  flex: 1;
  min-width: 250px;
  text-align: center;
  padding: 1rem;
}

.principle-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
}

.principle-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #1A1A3E;
  /* Ensure dark text for readability against purple bg */
}

.principle-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a4a4a;
}

.experience-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: #1A1A3E;
  position: relative;
}

.experience-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #333;
  margin: 10px auto 0;
}

/* Mobile Navigation for Principles */
.principles-nav {
  display: none;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.principles-nav .nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--dark-blue);
}

.principles-nav .nav-btn:hover {
  background: var(--white);
  transform: scale(1.1);
}

.principles-nav .nav-btn:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .principles-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 1rem;
    /* Hide scrollbar visually but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .principles-grid::-webkit-scrollbar {
    display: none;
  }

  .principle-card {
    min-width: 85%;
    scroll-snap-align: center;
    flex: 0 0 85%;
  }

  .principles-nav {
    display: flex;
  }

  /* Mobile Spacing Adjustments */
  .principles-section {
    padding: 1rem 0;
  }

  .experience-title {
    margin-bottom: 1.5rem;
  }

  .experience-title::after {
    display: none;
  }

  .principle-icon-wrapper {
    margin: 0 auto 0.5rem;
  }

  .principle-card {
    padding: 0.5rem;
    border: none !important;
    /* Force remove any potential borders */
  }

  .principle-card::after {
    display: none !important;
  }
}

.values-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.values-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.values-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 4rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.value-card {
  background: var(--white);
  color: var(--text-color);
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.value-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1.5rem;
  color: var(--dark-blue);
}

.value-heading {
  font-family: sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--dark-blue);
  margin-bottom: 1rem;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-text {
  font-family: sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}


@media (min-width: 901px) {
  .values-grid {
    align-items: start;
  }

  .value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  .value-card:hover .value-text {
    opacity: 1;
    max-height: 300px;
    margin-top: 1rem;
  }
}

@media (max-width: 900px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 500px;
    margin: 0 auto;
  }

  .value-text {
    opacity: 1;
    max-height: 300px;
    margin-top: 1rem;
  }
}

/* Resources Page Styles */

.resources-header {
  padding: 16rem 0 10rem;
  /* Increased height */
  text-align: left;
  color: var(--dark-blue);
  /* Reduced overlay opacity to make image more visible, shifted position right */
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.4) 100%),
    url('../../../img/sections/Rsources-page image/Resources-Page-Title-IMG.jpg');
  background-size: cover;
  background-position: 70% center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.scroll-indicator {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--dark-blue);
  cursor: pointer;
  z-index: 10;
  animation: bounce 2s infinite;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
  opacity: 1;
}

@keyframes bounce {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -10px);
  }
}

.header-content-wrapper {
  max-width: 650px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
}

.resources-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--dark-blue);
  text-transform: uppercase;
  letter-spacing: -1px;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.resources-subtitle {
  font-size: 1.25rem;
  opacity: 1;
  line-height: 1.6;
  color: var(--dark-blue);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Resources Grid Layout */
.resources-main {
  padding: 100px 0;
  background: #ffffff;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
  margin-bottom: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

/* Simplified Card Redesign */
.resource-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  max-width: 280px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  border: 1px solid #e0e0e0;
}

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

.card__image {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-overlay {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(35, 155, 155, 0);
  transition: all 0.15s;
  z-index: 1;
}

.resource-card:hover .image-overlay {
  background-color: rgba(35, 155, 155, 0.7);
}

.card__image::after {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -100%;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  content: "Download \A \2193";
  white-space: pre;
  text-align: center;
  color: #fff;
  transition: all 0.25s ease;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

.resource-card:hover .card__image::after {
  bottom: 0;
}

.card__content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--dark-blue);
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.card__text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.card__footer {
  margin-top: auto;
  font-size: 0.8rem;
  color: black;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  /* Ensure no underline for link */
}

.card__footer:hover {
  text-decoration: underline;
  /* Optional: underline on hover */
}

.resource-note {
  text-align: center;
  font-size: 1.1rem;
  color: var(--dark-blue);
  font-weight: 500;
  margin-top: 80px;
}

/* Mobile Adjustments */
@media (max-width: 1100px) {
  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 600px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    max-width: 100%;
  }
}

/* Contact Page Styles - Redesign */
body.contact-page .navbar:not(.scrolled) .nav-menu a {
  color: #ffffff !important;
}

/* Navbar Text Override for Dark Hero */


/* Ensure Logo/Toggle are visible if needed, strictly asking for text change */

/* Hero Section */
.contact-hero {
  position: relative;
  width: 100%;
  height: 500px;
  background: url('../../../img/sections/Contact Us Page Images/Contact Us page Title Image.jpg') no-repeat center center/cover;
  background-color: var(--dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: -100px;
  /* Overlap effect */
  z-index: 1;
}

.contact-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  /* Dark overlay for readability */
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  max-width: 800px;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* Main Content Wrapper */
.contact-main {
  position: relative;
  z-index: 10;
  padding-bottom: var(--spacing-xl);
}

.contact-card-wrapper {
  display: flex;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: 600px;
}

/* Left Column: Info */
.contact-info {
  flex: 2;
  padding: 3rem;
  background: #FDFDFD;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #f0f0f0;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--dark-blue);
  margin-bottom: 1rem;
}

.section-desc {
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.icon-circle {
  width: 50px;
  height: 50px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  color: var(--primary-purple);
  /* Or Brand Blue */
}

.icon-circle svg {
  stroke: var(--primary-purple);
  /* Or Brand color */
}

.info-text h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-blue);
  margin-bottom: 0.25rem;
}

.info-text p,
.info-text a {
  font-size: 0.95rem;
  color: #555;
  text-decoration: none;
  transition: color 0.2s;
}

.info-text a:hover {
  color: var(--primary-orange);
}

/* Social Links in Info */
.social-links {
  margin-top: auto;
}

.social-label {
  font-weight: 600;
  color: var(--dark-blue);
  margin-bottom: 1rem;
}

.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons a {
  color: var(--primary-purple);
  transition: transform 0.2s, color 0.2s;
}

.social-icons a:hover {
  color: var(--primary-orange);
  transform: translateY(-3px);
}


/* Right Column: Form */
.contact-form-section {
  flex: 3;
  padding: 3rem;
  background: var(--white);
}

.main-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: flex;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.half {
  width: 50%;
}

.main-form label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dark-blue);
  margin-bottom: 0.5rem;
}

.main-form input,
.main-form textarea {
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 1px solid #E0E0E0;
  background: #FAFAFA;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.main-form input:focus,
.main-form textarea:focus {
  outline: none;
  border-color: var(--primary-purple);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(107, 74, 255, 0.1);
}

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

.submit-btn {
  background: #2e2c63;
  /* User requested hex */
  color: var(--white);
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 1rem;
  align-self: flex-start;
  box-shadow: 0 4px 15px rgba(46, 44, 99, 0.2);
  transition: all 0.3s ease;
  width: 100%;
  /* Mobile friendly default, can be auto on desktop */
}

.submit-btn:hover {
  background: #23214b;
  /* Darker shade of #2e2c63 */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 44, 99, 0.3);
}

/* Map Section */
.map-section {
  width: 100%;
  height: 450px;
  margin-top: var(--spacing-lg);
}

.map-section iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsiveness */
@media (max-width: 992px) {
  .contact-card-wrapper {
    flex-direction: column;
  }

  .contact-info,
  .contact-form-section {
    flex: auto;
    width: 100%;
    padding: 2rem;
  }

  /* Requirement: "Show 'Get in Touch' section first" -> This is default in column layout since Info is first in HTML. */

  .contact-hero {
    margin-bottom: 0;
    height: 300px;
  }

  .contact-main {
    padding-top: var(--spacing-md);
  }

  .form-row {
    flex-direction: column;
    gap: 1rem;
  }

  .half {
    width: 100%;
  }
}

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

  .contact-info,
  .contact-form-section {
    padding: 1.5rem;
  }
}

/* Work Page Styles */
body {
  background: #ffffff;
}

/* Header Section */
.work-header {
  padding: 12rem 0 8rem;
  text-align: left;
  color: var(--dark-blue);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.6) 100%),
    url('../../../img/sections/Program page image/Program Page Title background Image.jpg');
  background-size: cover;
  background-position: center;
  /* Focus on hands */
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.scroll-indicator {
  position: absolute;
  bottom: 1.5rem;
  /* Shifted downwards */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--dark-blue);
  cursor: pointer;
  z-index: 10;
  animation: bounce 2s infinite;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
  opacity: 1;
}

@keyframes bounce {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -10px);
  }
}

.work-header-content {
  max-width: 650px;
  position: relative;
  z-index: 2;
}

.work-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--dark-blue);
  text-transform: uppercase;
  letter-spacing: -1px;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.work-subtitle {
  font-size: 1.25rem;
  opacity: 1;
  line-height: 1.6;
  color: var(--dark-blue);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Snapshot Section */
.snapshot-section {
  padding: var(--spacing-xl) 0;
  background: #ffffff;
}

.snapshot-title {
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--spacing-lg);
  color: var(--dark-blue);
  font-family: var(--font-heading);
  text-align: center;
  /* Centered */
  position: relative;
  display: block;
  /* Ensure it takes full width for centering */
}

/* UNDERLINE to match Home Page "Our Services" */
.snapshot-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background-color: #ccc;
  margin: 15px auto 0;
}

.snapshot-note {
  text-align: center;
  font-size: 1rem;
  color: var(--dark-blue);
  opacity: 0.7;
  font-weight: 500;
  max-width: 700px;
  margin: var(--spacing-lg) auto 0;
  line-height: 1.6;
  padding-top: var(--spacing-md);
}

/* Program Cards */
.program-card {
  background: var(--white);
  border-radius: 0;
  /* Updated: No border radius */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  /* Keeping shadow for now, can remove if requested "cleaner" means flat */
  margin-bottom: 2rem;
  /* Reduced spacing (was var(--spacing-xl)) */
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid #e0e0e0;
  /* Added border */
  height: auto;
  min-height: 350px;
  /* Flexible height */
}

.program-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Card layout variants */
.program-card-right {
  flex-direction: row;
}

.program-card-left {
  flex-direction: row-reverse;
}

.program-card-content {
  flex: 1.2;
  padding: 2rem 3rem;
  /* Slightly reduced padding */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
}

.program-card-title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--dark-blue);
  line-height: 1.3;
}

.program-card-description {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1.5rem;
  /* Reduced spacing */
  opacity: 0.9;
}

.program-card-image {
  flex: 1;
  max-width: 45%;
  height: 350px;
  /* Fixed height for image area */
  position: relative;
  overflow: hidden;
}

.program-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  border-radius: 0;
  /* Removed border radius */
}

/* Removed Corner Rounding "Zig-Zag" specific effect for cleaner look */
.program-card-left .program-card-image img {
  border-top-left-radius: 0;
}

.program-card-right .program-card-image img {
  border-bottom-right-radius: 0;
}

.program-card:hover .program-card-image img {
  transform: scale(1.1);
}

/* Read More Button - Matches Home "Find Out More" */
.read-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  background: #444;
  /* Dark Grey match */
  color: var(--white);
  border-radius: 0;
  /* Rectangle */
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: none;
  width: fit-content;
  border: none;
}

.read-more-btn:hover {
  background: #222;
  transform: translateY(-2px);
  box-shadow: none;
}

.read-more-btn svg {
  transition: transform 0.3s ease;
}

.read-more-btn:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 992px) {

  .program-card,
  .program-card-right,
  .program-card-left {
    flex-direction: column;
  }

  .program-card-image {
    max-width: 100%;
    width: 100%;
    height: 300px;
  }

  .program-card-content {
    padding: var(--spacing-lg);
  }

  .program-card-title {
    font-size: 1.5rem;
  }

  .program-card-description {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .work-header {
    padding: 10rem 0 6rem;
    background-position: center center;
    /* Ensure heart is centered */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.6) 100%),
      url('../../../img/sections/Resources page image/Resources page.jpg');
    background-size: cover;
    background-position: center center;
    text-align: center;
  }

  .work-header-content {
    max-width: 100%;
    margin: 0 auto;
  }

  .work-title {
    font-size: 3rem;
  }
}

/* =========================================
   Download Modal Styles
   ========================================= */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  text-align: center;
}

.modal-content h3.modal-title {
  color: var(--dark-blue);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.modal-subtitle {
  color: #666;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: var(--dark-blue);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.modal-form .form-group {
  margin-bottom: 0;
}

.modal-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--dark-blue);
  font-size: 0.9rem;
}

.modal-form input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.modal-form input:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(107, 74, 255, 0.1);
}

.error-msg {
  display: none;
  color: #d32f2f;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  font-weight: 500;
}

.modal-form input.invalid {
  border-color: #d32f2f;
}

.spam-notice {
  font-size: 0.85rem;
  color: #888;
  margin: 0.5rem 0 1rem;
  text-align: center;
  font-style: italic;
}

.modal-submit-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 1rem;
}

/* Custom Button Style for About Us Page */
.btn-dark-rect {
  background: #262626;
  color: #fff;
  border-radius: 0;
  text-transform: uppercase;
  padding: 1rem 3rem;
  font-weight: 700;
  letter-spacing: 1px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-dark-rect:hover {
  background: #000;
  transform: translateY(-2px);
  color: #fff;
}

/* Services Page Grid Layout */
.services-grid-layout {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.services-grid-layout .value-card {
  width: 100%;
  max-width: 450px;
  flex: 0 0 auto;
}

.services-grid-layout .value-card .value-text {
  opacity: 1;
  max-height: none;
  overflow: visible;
  margin-top: 1rem;
}

/* Hover effect removed - text always visible */
/* .services-grid-layout .value-card:hover .value-text { ... } */

.services-grid-layout .value-card:last-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .services-grid-layout .value-card {
    width: 100%;
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  position: relative;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.close-modal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
}

.modal-title {
  margin-bottom: 1.5rem;
  color: var(--dark-blue);
  text-align: center;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.checkbox-item input[type='checkbox'] {
  accent-color: #000;
  width: 16px;
  height: 16px;
}

/* Modal Form Specifics */
.apply-form .form-input {
  border: 1px solid #d1d5db !important;
  border-radius: 4px 0 0 4px;
  /* Default for inputs, but user asked for no radius on top-right and bottom-right */
  /* Actually user said: 'the top right and bottom right radius donot have border' - wait, 'radius donot have border'? title says 'no border radius' */
  /* Interpretation: border-radius: X X 0 0? or X 0 X 0? */
  /* Re-reading request: 'top right and bottom right radius donot have border' -> likely means 0 radius on right side. */
  border-radius: 4px 0 0 4px !important;
  background: #fff;
  color: #000;
}

.apply-form .form-input:focus {
  outline: none !important;
  border-color: #999 !important;
  /* Keep gray or slightly darker, but not orange */
}

/* Footer Button Fix */
.footer-btn {
  border-left: 1px solid #ccc !important;
  /* Ensure left border is visible */
  border: 1px solid #ccc;
  /* Ensure all borders are visible, as requested 'no border on left' implying it was missing */
}

/* Contact Page Hero Text Color */
.contact-hero .hero-title,
.contact-hero .hero-subtitle {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /* Optional: improves readability on images */
}

/* Form Select Style */
.main-form select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  color: #333;
  appearance: none;
  /* Remove default arrow */
  background-image: url('data:image/svg+xml;utf8,<svg fill=%22black%22 height=%2224%22 viewBox=%220 0 24 24%22 width=%2224%22 xmlns=%22http://www.w3.org/2000/svg%22><path d=%22M7 10l5 5 5-5z%22/><path d=%22M0 0h24v24H0z%22 fill=%22none%22/></svg>');
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
}

.main-form select:focus {
  outline: none;
  border-color: #000;
}

/* Survey Mobile Layout Fix */
.interactive-options {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  gap: 20px;
  align-items: center;
}

@media (max-width: 768px) {
  .interactive-options {
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 15px;
  }

  .interactive-options .option-btn {
    width: auto;
  }
}

/* Contact Page Mobile Fixes */
@media (max-width: 768px) {
  .contact-hero .hero-content {
    padding-top: 6rem;
    /* Push title down to avoid mismatch with logo */
  }
}

/* Turn text/toggle white ONLY when navbar is transparent AND menu is closed */
html body.contact-page .navbar:not(.scrolled) .nav-menu:not(.active) a {
  color: #fff !important;
}

html body.contact-page .navbar:not(.scrolled) .nav-toggle:not(.active) span {
  background-color: #fff !important;
}

/* Ensure text is black when scrolled OR when mobile menu is open */
html body.contact-page .navbar.scrolled .nav-menu a,
html body.contact-page .navbar .nav-menu.active a {
  color: #000 !important;
}

html body.contact-page .navbar.scrolled .nav-toggle span {
  background-color: #000 !important;
}

/* Footer Mobile Form Fix */
@media (max-width: 600px) {
  .form-row {
    flex-direction: column;
    gap: 1rem;
  }

  .footer-btn {
    width: 100%;
    border-left: 1px solid #404040 !important;
    /* Restore left border */
    padding: 12px 16px;
    /* Match input padding */
    margin: 0;
  }
}

/* Mobile Logo Size */
@media (max-width: 768px) {
  .logo-img {
    height: 80px;
    /* Reduced from 120px */
  }
}

/* Home Page About Section Fix */
.about-section {
  padding: 4rem 0;
  background-color: var(--white);
  text-align: center;
}

.home-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.about-title {
  font-size: 2.5rem;
  color: var(--dark-blue);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .home-card {
    padding: 0;
    /* Remove extra card padding on mobile to use full width */
    width: 100%;
  }

  .about-content p {
    padding: 0 0.5rem;
    /* Slight padding for readability but maximizing width */
    font-size: 1rem;
  }
}

/* Services Page Mobile Responsiveness */
@media (max-width: 768px) {
  .services-header {
    padding: 8rem 0 4rem;
    /* Reduced padding for mobile */
    background-position: center center;
    /* Center the image */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.75) 100%),
      url('../../../img/sections/Services Page Image/Services Page Title Image.jpg');
    background-size: cover;
    background-position: center;
  }

  .header-content-wrapper {
    max-width: 100%;
    /* Use full width on mobile */
    padding: 0 1rem;
    /* Add horizontal padding */
  }

  .services-page-title {
    font-size: 1.8rem;
    /* Smaller title on mobile */
    margin-bottom: 1rem;
  }

  .services-page-subtitle {
    font-size: 1rem;
    /* Smaller subtitle on mobile */
    line-height: 1.6;
  }
}

/* Resources Page Mobile Responsiveness */
@media (max-width: 768px) {
  .resources-header {
    padding: 8rem 0 4rem;
    /* Reduced padding for mobile */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.75) 100%),
      url('../../../img/sections/Rsources-page image/Resources-Page-Title-IMG.jpg');
    background-size: cover;
    background-position: center;
  }

  .resources-title {
    font-size: 1.8rem;
    /* Smaller title on mobile */
    margin-bottom: 1rem;
  }

  .resources-subtitle {
    font-size: 1rem;
    /* Smaller subtitle on mobile */
    line-height: 1.6;
  }
}

/* Hide survey elements when complete */
.interactive-card.survey-complete .interactive-options,
.interactive-card.survey-complete #interactive-response-container,
.interactive-card.survey-complete #interactive-submit-btn,
.interactive-card.survey-complete>.interactive-question {
  display: none !important;
}

/* Survey Navigation Arrows */
.survey-nav-btn {
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
}

.survey-nav-btn:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #333;
  transform: scale(1.1);
}

.survey-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.interactive-card.survey-complete .survey-navigation {
  display: none !important;
}

/* Survey Option Buttons - Larger Size */
.interactive-options .option-btn {
  min-width: 200px;
  min-height: 80px;
  padding: 1.5rem 3rem;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.interactive-options .option-label {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Speech bubble arrow pointing to selected option */
#interactive-response-text::before {
  content: '';
  position: absolute;
  top: -10px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #e8e8e8;
}

/* Arrow positioned under "No" (left option) */
#interactive-response-text.arrow-left::before {
  left: 30%;
  transform: translateX(-50%);
}

/* Arrow positioned under "Yes" (right option) */
#interactive-response-text.arrow-right::before {
  left: 70%;
  transform: translateX(-50%);
}

#interactive-question-text {
  font-size: 1.5rem;
  /* Reduced font size for survey questions */
  line-height: 1.4;
}