/*
Theme Name: Thalsamaya
Author: Merin Antony
Description: A custom theme based on my HTML and CSS design.
Version: 1.0
*/
:root {
  --default-font: "Instrument Sans", Sans-serif;
  --nav-font: "Instrument Sans", Sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #4a4b64;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #000;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #15AAAA;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #4a4b64;
  /* The default color of the main navmenu links */
  --nav-hover-color: #000;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff;
  /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #4a4b64;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #000;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
:root {
            --primary-dark: #0a2540;
            --primary-teal: #00d4aa;
            --text-gray: #6b7280;
        }
.light-background {
  --background-color: #f5f6ff;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #0e1030;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #0f302f;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: "Instrument Sans", Sans-serif;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #000;

  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
}
.first-hero-section-hide{
    display:none;
}
.container {
  /* max-width: 1400px; */
  margin: auto;
}

.containers {
  /* max-width: 1400px; */
  margin: auto;
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.margin-section {
  margin-top: 50px;
  margin-bottom: 50px;
}

.margin-zero {
  margin-top: 0px !important;
  margin-bottom: 0px;
}

.mg-bottom-20 {
  margin-bottom: 20px;
}

.mg-bottom-15 {
  margin-bottom: 15px;
}

.mg-bottom-50 {
  margin-bottom: 50px;
}

.mg-up-20 {
  margin-top: 20px;
}

p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #000;
}

.text-center {
  text-align: center !important;
  margin-top: 0px;
  margin-bottom: 0px;
}

.justify-content-left {
  text-align: left !important;
  margin-top: 0px;
  margin-bottom: 0px;
}

.mg-2 {
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
}

#hero {
    background-size: cover;
    background-position: center left;
    padding-top: 12%;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.typewrite {
  font-size: 3em;
  font-weight: bold;
  color: #111;
  /* adjust to match your design */
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  height: 100%;
}

.wrap {
  display: inline-block;
  border-right: 3px solid #111;
  /* cursor */
  animation: blinkCursor 0.7s step-end infinite;
}

.typing {
  font-size: 201px;
  font-weight: bold;
  color: #111;
  /* adjust to match your design */
  border-right: 3px solid #111;
  /* cursor */
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: typing 2.2s steps(11) forwards,
    /* typing Kerala's (11 chars) */
    blinkCursor 0.7s step-end infinite;
}

@keyframes blinkCursor {
  50% {
    border-color: transparent;
  }
}

.typing::after {
  content: "Kerala's";
  /* starting word */
  animation: changeWords 14s steps(1) forwards;
  /* play once */
}

@keyframes changeWords {

  0%,
  20% {
    content: "Kerala's";
  }

  21%,
  40% {
    content: "Pune's";
  }

  41%,
  60% {
    content: "Mumbai's";
  }

  61%,
  80% {
    content: "Kochi's";
  }

  81%,
  100% {
    content: "India's";
  }

  /* stop here */
}

.hero-title-paragraph {
  font-size: 17px;
  text-align: left;
}

.difference-head-text {
  margin-top: 30px;
}

.banner-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.banner-image-hero {
  width: 70%;
  /* max-width: 1400px; */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Removed media queries for main.css non-media section only */

/* Events */
.events {
  background-image: url("../img/services/Background-events.png");
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
}

.event-solutions {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  max-width: 1200px;
  margin: 60px auto;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Title and description */
.event-solutions h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: #111;
}

.event-solutions .description {
  font-size: 18px;
  color: #555;
  max-width: 600px;
  line-height: 1rem;
}

/* Tabs */
.tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
}
.wpcf7-form p {
    margin-bottom: 0px !important;
}
.tab {
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  padding: 10px 0;
  background: none;
  color: #555;
  cursor: pointer;
  border-bottom: 1px solid #b2b2b2;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: all 0.3s ease;
}

.tab.active {
  color: #000;
  font-weight: 600;
  border-bottom: 1px solid #000;
}

.tab:hover {
  color: #111;
}

/* Tab panels layout */
.tab-panels {
  flex: 1;
}

.panel {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.panel.active {
  display: grid;
}

/* Cards */
.card {
  background: #f8f8f8;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  width: 300px;
  height: 400px;
}

.card h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #111;
}

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

.card:hover {
  background: #000;
  color: #fff !important;
  transform: translateY(-4px);
}

/* Explore button */
.explore-btn {
  align-self: flex-start;
  background: #000;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background 0.3s ease;
}

.explore-btn:hover {
  background: #000;
  color: #fff;
}

/* Layout adjustments */
.container_event {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  align-items: start;
}

/*--------------------------------------------------------------
#Thalsamaya Difference
--------------------------------------------------------------*/
.center-image-container {
  display: flex;
  justify-content: center;
  /* horizontal center */
  align-items: center;
  /* vertical center */
  height: 100%;
  /* or set a specific height */
}

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

.difference-head-text {
  font-size: 30px;
  font-weight: 500;
  color: #000;
}

/*--------Matrix Card Section-------*/
.matrix-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.matrix-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.metric-value {
  color: #B3F8FB;
  font-size: 40px;
  font-weight: 700;
}

.metric-label {
  font-size: 20px;
  color: #B3F8FB;
  font-weight: 700;
}

.metrics-section {
  background-color: #000;
  padding: 40px 30px;
  border-radius: 26px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 60px;
}


/*case study section*/
.casestudy-solutions {

  /* max-width: 1200px; */
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.events-casestudy {
  margin-top: 30px;
  background-color: #06585B;
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
}

/* Case Study Carousel Section */
/* Main Section Wrapper */
.rewinds-section {
  width: 100%;
  margin-top: 30px;
  padding: 2rem;
  background-color: #06585B;
}

.rewinds-container {
  align-items: center;
  display: flex;
  gap: 2rem;
  align-items: center;

}


/* --- Left Column: Info and Navigation --- */
.rewinds-info {
  flex: 1;
  /* Takes up 1 part of the available space */
  min-width: 300px;
}

.rewinds-info h2 {
  font-size: 3.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #fff;
}

.rewinds-info p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 350px;
  margin-bottom: 2rem;
  color: #fff
}

.carousel-nav {
  display: flex;
  gap: 1rem;
}

.nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: #fff;
  color: #000;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s, border-color 0.3s;
}

.nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #000;
}

.nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: #fff;
  color: #000;
}

.feature-card {
  border-radius: 26px;
  border: 1px solid #FFFFFF;
}

/* --- Right Column: Carousel --- */
.carousel-viewport {
  flex: 2;
  /* Takes up 2 parts of the available space, making it wider */
  overflow: hidden;
  /* This is crucial for the carousel effect */
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  /* Space between slides */
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  position: relative;
  /* Each slide takes up 1/3 of the container width, minus space for the gap */
  flex: 0 0 calc((100% / 3) - 1rem);
  border-radius: 16px;
  overflow: hidden;
  height: 450px;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image covers the slide area without distortion */
  display: block;
}

/* Content over the slide image */
.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  /* Gradient makes the text readable against any image */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

.slide-content p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  text-align: left;
  color: #fff;
}

.play-btn {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  cursor: pointer;
  text-transform: lowercase;
  transition: background-color 0.3s;
}

.play-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}


.events-casestudy {
  background: linear-gradient(135deg, #2c7a7b, #319795);
  padding: 80px 0;
  color: white;
  position: relative;
  overflow: hidden;
}

.events-casestudy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.casestudy-solutions {
  /* max-width: 1400px; */
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.casestudy-header {
  text-align: left;
  margin-bottom: 60px;
}

.casestudy-header h2 {
  font-size: 3.5rem;
  font-weight: 300;
  margin-bottom: 20px;
  letter-spacing: -2px;
  color: #fff;

}

.casestudy-header p {
  font-size: 1.3rem;
  opacity: 0.9;
  font-weight: 300;
  margin: 0 auto;
  line-height: 1.6;
  color: #fff;
  text-align: left;
}

.carousel-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.carousel-track {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  gap: 20px;
}

.carousel-slide {
  min-width: calc(33.333% - 14px);
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(45deg, #1a365d, #2d3748);
  cursor: pointer;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 30px;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.slide-text {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 15px;
  font-weight: 300;
  color: #fff;
}

.play-button {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.play-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.carousel-slide:hover .slide-image {
  transform: scale(1.05);
}

.carousel-slide:hover .slide-overlay {
  transform: translateY(0);
}

.carousel-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.carousel-controls.left {
  left: 20px;
}

.carousel-controls.right {
  right: 20px;
}

.control-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(76, 154, 157, 0.9);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 300;
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.control-btn:hover {
  background: rgba(76, 154, 157, 1);
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

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




/* Demo styles for context */
.demo-section {
  padding: 60px 20px;
  text-align: center;
  background: white;
}

.demo-section h3 {
  color: #2c7a7b;
  margin-bottom: 20px;
}

.testimonial-card {
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  text-align: center;
  word-break: break-all;
  /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
  /* Ensures some space on smaller screens */
}

.testimonial-card-above {
  background-color: rgba(246, 246, 246, 1);
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 10px;
  padding-top: 5%;
  padding-right: 5%;
  padding-left: 5%;
  padding-bottom: 5%;
  border-radius: 25px;
  transition: background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s;
}

.testimonial-card-1 {
  margin-top: 0;
  margin-bottom: 0;
}

.testimonial-header {
  display: flex;
  /* Aligns image and text side-by-side */
  align-items: center;
  /* Vertically centers the image with the text */
  gap: 1rem;
  /* Space between the image and the author info */
  margin-bottom: 10px;
}

.profile-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* Makes the image a perfect circle */
  object-fit: cover;
  /* Prevents the image from being distorted */
  border: 2px solid #ffffff;
  /* Optional: adds a white border like in some designs */
}

.author-info {
  display: flex;
  flex-direction: column;
}
.author-destination {
  font-size: 16px;
  font-weight: 600;
  /* Bold text for the name */
  color: #000;
  /* Bright white for the author's name */
  line-height: 1.2em;
  text-align: left;
  margin-bottom: 5px;
  color:#555e72;
}
.testimonial-author {
  font-size: 10px;
  font-weight: 600;
  /* Bold text for the name */
  color: #000;
  /* Bright white for the author's name */
  line-height: 1.2em;
  text-align: left;
}

.author-title {
  font-size: 10px;
  margin: 0;
  line-height: 1.2em;
  color: #828282;
  text-align:left
}

.testimonial-quote p {
  margin: 0;
  font-family: "Work Sans ", sans-serif;
  line-height: 1.2em;
  font-size: 13px;
  text-align: left;
  word-break: break-word;

}

/* Removes default blockquote margins */
.testimonial-quote {
  margin: 0;
}

#testimonial {
  background-color: #fff
}

/*----------blogs section---------*/
.insights-section {
  padding: 80px 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.blog-title a{
    color:#1a1a1a;
}
.insights-sectionss {
  padding: 20px 20px !important;
  max-width: 1400px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  gap: 20px;
}

.section-headers {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  gap: 20px;
  margin-top: 0px;
}

.section-title {
  flex: 1;
}

.section-title h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 15px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #666;
  max-width: 500px;
}

.view-more-btn {
  background: #000;
  color: #fff;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
}

.explore-btns {
  display: flex;
  justify-content: right;
  text-align: left;
}

.view-more-btn:hover {
  background: var(--accent-color);
  color: #fff;
  transform: translateX(5px);
}

.view-more-btn:hover::after {
  transform: translateX(3px);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.blog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  width: 100%;
}

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

.blog-image {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.blog-content {
  padding: 30px;
}

.blog-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 15px;
  line-height: 1.4;
}

.blog-excerpt {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.read-more {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.read-more:hover {
  color: #333;
  gap: 8px;
}

.read-more::after {
  content: '→';
  transition: transform 0.3s ease;
}

.read-more:hover::after {
  transform: translateX(2px);
}


/* Loading state for images */
.blog-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

.blog-image img {
  position: relative;
  z-index: 1;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Hide loading animation when image is loaded */
.blog-image img[src]:not([src=""])~ ::before,
.blog-image img[src]:not([src=""])::before {
  display: none;
}

/* Animation on scroll */
.card {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.6s ease-out forwards;
}

.card:nth-child(1) {
  animation-delay: 0.1s;
}

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

.card:nth-child(3) {
  animation-delay: 0.3s;
}

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

.pulse-animation {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
}


/*
--- Blog Archive / Listing Page ---
*/

/* Section Header */
.page-header-section {
    padding: 60px 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 60px;
}
.page-header-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.page-header-section .lead {
    font-size: 1.15rem;
    color: #6c757d;
}

/* Main Blog Grid */
.blog-grid-service {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* Individual Blog Card */
.blog-card-service {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.blog-card__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-card__content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows content to fill space */
}

.blog-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 15px 0;
    line-height: 1.4;
}
.blog-card__title a {
    color: #212529;
    text-decoration: none;
    transition: color 0.2s ease;
}
.blog-card__title a:hover {
    color: #007bff; /* Or your theme's primary color */
}

.blog-card__excerpt {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1; /* Pushes meta/read-more to the bottom */
    margin-bottom: 20px;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 20px;
}
.blog-card__author {
    display: flex;
    align-items: center;
    gap: 6px;
}
.blog-card__author img { /* Styles for the avatar */
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.blog-card__read-more {
    font-weight: 600;
    color: #333;
    text-decoration: none;
    align-self: flex-start;
    transition: color 0.2s ease;
}
.blog-card__read-more:hover {
    color: #007bff; /* Or your theme's primary color */
}


/* --- Pagination --- */
.pagination-container-service .pagination {
    justify-content: center;
    gap: 8px;
}
.pagination-container-service .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dee2e6;
    color: #6c757d;
    background-color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
}
.pagination-container-service .page-numbers:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}
.pagination-container-service .page-numbers.current {
    background-color: #212529;
    color: #fff;
    border-color: #212529;
    font-weight: 600;
}
.pagination-container-service .prev,
.pagination-container-service .next {
    font-size: 1.2rem;
}


/* --- Responsive Breakpoints --- */
@media (max-width: 992px) {
    .blog-grid-service {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
}

@media (max-width: 768px) {
    .blog-grid-service {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .page-header-section {
        padding: 40px 0;
        margin-bottom: 40px;
    }
    .page-header-section h1 {
        font-size: 2rem;
    }
}


/*
--- Single Blog Post Detail Page ---
*/
/* Post Header */
.single-post__header {
    padding: 60px 0 30px;
    text-align: center;
}
.single-post__title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-align:left;
}
.single-post__meta {
    display: inline-flex;
    align-items: left;
    gap: 8px;
    color: #6c757d;
}
.single-post__meta .bi { /* Icon style */
    font-size: 1.2rem;
}
/* --- Single Post Header Styling --- */

/* This is the main header block from your image */
.single-post__header {
 
  color: #000; /* White text */
  padding: 40px;
  border-radius: 8px; /* Optional: gives it soft edges */
  margin-bottom: 30px; /* Space below the header */
}

/* Style for the main H1 title */
.single-post__title {
  color: #000;
  font-size: 2.5rem; /* Large title */
  font-weight: 700;
  margin-bottom: 20px; /* Space between title and meta */
}

/* This is the container for the meta items (avatar, name, date) */
.single-post__meta-bar {
  display: flex;
  align-items: center;
  gap: 12px; /* Space between items */
  font-size: 0.9rem;
  color: #637273; /* Light grey text */
}

/* Makes the avatar image round */
.meta-avatar img {
  border-radius: 50%;
  display: block; /* Fixes alignment issues */
}

.author-name {
  font-weight: 600;
  color: #637273;
}
/* Featured Image */
.single-post__featured-image {
    margin-bottom: 40px;
}
.single-post__featured-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Main Post Content */
.single-post__content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #343a40;
}
.single-post__content p {
    margin-bottom: 1.5em;
}
.single-post__content h2,
.single-post__content h3 {
    font-weight: 700;
    margin-top: 2.5em;
    margin-bottom: 1em;
    line-height: 1.3;
}
.single-post__content h2 { font-size: 1.8rem; }
.single-post__content h3 { font-size: 1.5rem; }

.single-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 40px 0;
}

/* Key Takeaway Box */
.key-takeaway-box {
    margin: 60px 0;
    padding: 30px;
    background-color: #f8f9fa;
    border-left: 5px solid #007bff; /* Or your theme's primary color */
    border-radius: 0 8px 8px 0;
}
.key-takeaway__content {
    font-style: italic;
    font-size: 1.1rem;
    color: #495057;
    margin-bottom: 25px;
}
.key-takeaway__author {
    display: flex;
    align-items: center;
    gap: 15px;
}
.key-takeaway__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.key-takeaway__author-info {
    display: flex;
    flex-direction: column;
}
.key-takeaway__author-name {
    font-weight: 600;
    color: #212529;
}
.key-takeaway__author-title {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Other Blogs Section */
.other-blogs-section {
    padding: 80px 0;
    background-color: #f8f9fa; /* Light grey background */
    margin-top: 60px;
}
.other-blogs-section .section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}
.other-blogs-section .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #007bff; /* Or your theme's primary color */
}

/* Using the same grid as the blog archive */
.other-blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
/* Simplify the card meta for this section */
.other-blogs-grid .blog-card__meta {
    margin-bottom: 15px;
}


/* --- Responsive Breakpoints --- */
@media (max-width: 992px) {
    .other-blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .single-post__title {
        font-size: 2.2rem;
    }
    .single-post__content {
        font-size: 1rem;
    }
    .other-blogs-grid {
        grid-template-columns: 1fr;
    }
}
/*--------------------------------------------for service page -------------------*/

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------
                                                   # Service Page
--------------------------------------------------------------*/

#service-hero {
  background-size: cover;
  background-position: center left;
  padding-top: 12%;
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.width-auto {
  width: 50%;
  text-align: center;
}

.planning {
  width: 80%
}

.header {
  --background-color: rgba(255, 255, 255, 0);
  color: var(--default-color);
  background-color: #fff;
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: #fff;
  background: #000;
  font-size: 14px;
  padding: 10px 20px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.btn-getstarted,
.btn-getstarted:focus {
  color: #fff;
  background: #000;
  font-size: 14px;
  padding: 8px 20px;
  margin-top: 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: #fff;
  background: #000;
}

.btn-getstarted:hover,
.btn-getstarted:focus:hover {
  color: #fff;
  background: #000;
}

.spacer {
  height: 20px;
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: #ffffff;
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: #ffffff;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */



/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  background: #041a1a;
  color: var(--default-color);
  font-size: 15px;
  padding: 100px 0 0;
 
  background-position: 48% 75%;
  background-size: cover;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.footer .footer-main {
  margin-bottom: 40px;
}

.footer .brand-section .logo {
  text-decoration: none;
}

.footer-catalog {
  font-size: 18px;
}

.footer-menu-link p {
  line-height: 1em;
  color: #c5eeee !important;
}
.find-us-paragraph{
  line-height: 1.3em !important;
  color: #c5eeee !important;
}
.footer-menu-link a {
  color: #c5eeee !important;
  text-decoration: none !important;
}
.footer .brand-section .logo .sitename {
  font-family: "Instrument Sans", Sans-serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--heading-color);
  letter-spacing: -0.5px;
}

.footer .brand-section .brand-description {
  font-size: 15px;
  line-height: 1.6;
  color: #c5eeee;
  font-weight: 400;
  max-width: 380px;

}

.footer .brand-section .brand-description-title {
  font-size: 18px;
  line-height: 1.7;
  color: #fff;
  font-weight: 300;
  max-width: 380px;
  margin: 0;
}

.footer-menu-link a {
  color: #c5eeee !important;
}

.footer-menu-link a:hover {
  color: #c5eeee !important;
}

.border-footer-up {
  position: relative;
  padding-top: 40px;
}

.border-footer-up::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 1px;
  background-color: #22d3ee;
}

.border-footer-up::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 1px;
  background-color: rgba(34, 211, 238, 0.3);
}

.footer .brand-section .contact-info .contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.footer .contact-item i {
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 12px;
  margin-top: 3px;
  flex-shrink: 0;
}

.footer .brand-section .contact-info .contact-item span {
  line-height: 1.6;
}




.footer .nav-column {
  margin-bottom: 40px;
}

.footer .nav-column h6 {
  font-family: "Instrument Sans", Sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}

.footer .nav-column .footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer .nav-column .footer-nav a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  transition: all 0.3s ease;
  line-height: 1.4;
}

.footer .nav-column .footer-nav a:hover {
  color: var(--accent-color);
  transform: translateX(4px);
}

.footer .footer-social {
  padding: 50px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
}

.footer .footer-social .newsletter-section h5 {
  font-family: "Instrument Sans", Sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #000;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.footer .footer-social .newsletter-section p {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  margin: 0;
  line-height: 1.6;
  max-width: 340px;
}


.footer-social .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  color: #222;
  font-size: 1.3rem;
  transition: background 0.2s, color 0.2s;
  margin: 4px 2px;
}

.footer-social .social-link:hover {
  background: #222;
  color: #fff;
}



.footer .footer-social .social-links .social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #000;
  background-color: #c5eeee;
  border: 1px solid #ddd;
  font-size: 14px;
  padding: 10px;
  border-radius:50%;
  font-weight: 400;
  transition: all 0.3s ease;
}

.footer .footer-social .social-links .social-link i {
  font-size: 18px;
  transition: all 0.3s ease;
}

.footer .footer-social .social-links .social-link span {
  transition: all 0.3s ease;
}

.footer .footer-social .social-links .social-link:hover {
  color: var(--accent-color);
  transform: translateY(-2px);
}

.footer .footer-social .social-links .social-link:hover i {
  transform: scale(1.1);
}

.footer .footer-bottom {
  padding: 30px 0;
}

.footer .footer-bottom .copyright p {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 45%);
  font-weight: 300;
}

.footer .footer-bottom .copyright p .sitename {
  font-size: 14px;
  font-weight: 400;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.footer .footer-bottom .legal-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}



.footer .footer-bottom .legal-links a {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  text-decoration: none;
  font-weight: 300;
  transition: color 0.3s ease;
}

.footer .footer-bottom .legal-links a:hover {
  color: var(--accent-color);
}

.footer .footer-bottom .legal-links .credits {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-left: 8px;
  padding-left: 24px;
  border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}


.footer .footer-bottom .legal-links .credits a {
  color: var(--accent-color);
  font-size: 12px;
}

.footer .footer-bottom .legal-links .credits a:hover {
  text-decoration: underline;
}


/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: #EEF9FA !important;
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: #000;
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: #000;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}


/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title-difference {
  text-align: center;
  font-weight: 500;
  font-size: 50px;
  color: #000
}

.section-title h2 {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  position: relative;
}

.section-title h2::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--accent-color);
}

.section-title p {
  font-size: 1rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 900px;
  margin: 0 auto;
  text-wrap: balance;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding-top: 140px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-color), transparent 96%) 0%, var(--background-color) 70%);
  position: relative;
  overflow: hidden;
  padding-bottom: 40px;
}

.hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 80%;
  height: 200%;
  background: linear-gradient(45deg, color-mix(in srgb, var(--accent-color), transparent 98%) 0%, transparent 40%);
  border-radius: 50%;
  pointer-events: none;
}

.hero .hero-content {
  position: relative;
  z-index: 2;
}

.hero .hero-content .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-color);
  padding: 8px 20px;
  border-radius: 50px;
  margin-bottom: 32px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .hero-content .hero-badge i {
  color: #FFD700;
  font-size: 0.875rem;
}

.hero .hero-content .hero-badge span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--heading-color);
}

.hero .hero-title {
  font-size: 57px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #909898 !important;
  letter-spacing: -0.02em;
}

.hero .hero-content .hero-description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 40px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}



.hero .hero-content .hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}


.hero .hero-content .hero-actions .btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 16px 36px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.hero .hero-content .hero-actions .btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--contrast-color), transparent 80%), transparent);
  transition: left 0.6s;
}

.hero .hero-content .hero-actions .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.hero .hero-content .hero-actions .btn-primary:hover::before {
  left: 100%;
}

.hero .hero-content .hero-actions .btn-outline {
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 70%);
  color: var(--heading-color);
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
}

.hero .hero-content .hero-actions .btn-outline:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  transform: translateY(-3px);
}

.hero .hero-content .hero-metrics {
  display: flex;
  justify-content: center;
  gap: 48px;
}

.hero .hero-content .hero-metrics .metric-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--surface-color);
  border-radius: 12px;
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.3s ease;
}

.hero .hero-content .hero-metrics .metric-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 88%);
}

.hero .hero-content .hero-metrics .metric-item .metric-icon {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .hero-content .hero-metrics .metric-item .metric-icon i {
  font-size: 1.25rem;
  color: var(--accent-color);
}

.hero .hero-content .hero-metrics .metric-item .metric-content {
  text-align: left;
}

.hero .hero-content .hero-metrics .metric-item .metric-content .metric-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1;
}

.hero .hero-content .hero-metrics .metric-item .metric-content .metric-label {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 400;
}

.service-comprehensive {
     background-color: transparent;
    background-image: radial-gradient(at top left, #000000 44%, #3EA8F4 100%);
  padding: 100px 20px;
  position: relative;
}


.container-service {
  max-width: 1400px;
  margin: 0 auto;
}

.section-header-comprehensive {
  text-align: center;
  margin-bottom: 80px;
  color: #FFFFFF;
}

.section-title-comprehensive {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.section-subtitle-comprehensive {
  font-size: 18px;
  color: #FFFFFF;
  max-width: 80%;
  margin: 0 auto;
  line-height: 1.6;
}

.tabs-container-comprehensive {
  margin-bottom: 60px;
}

.tabs-comprehensive {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.tab-comprehensive {
  background: none;
  border: none;
  color: #64748b;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  font-family: inherit;
}

.tab-comprehensive:hover {
  color: #94a3b8;
}

.tab-comprehensive.active {
  color: white;
}

.tab-comprehensive.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #06b6d4);
  border-radius: 2px;
}

.carousel-container-comprehensive {
  position: relative;
}

.cards-grid-comprehensive {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 768px) {
  .cards-grid-comprehensive {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .cards-grid-comprehensive {
    grid-template-columns: repeat(3, 1fr);
  
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  }
}

.solution-card-comprehensive {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}

.solution-card-comprehensive:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(34, 211, 238, 0.3);
}

.card-image-comprehensive {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}

.card-content-comprehensive {
  padding: 32px;
  position: relative;
}

.card-header-comprehensive {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-title-comprehensive {
  font-size: 24px;
  font-weight: 600;
  color: white;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card-arrow-comprehensive {
  width: 24px;
  height: 24px;
  color: #22d3ee;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

.solution-card-comprehensive:hover .card-arrow {
  transform: translate(4px, -4px);
}

.card-description-comprehensive {
  font-size: 16px;
  color: #94a3b8;
  line-height: 1.6;
}

.navigation-buttons-comprehensive {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 12px;
}

.nav-btn-comprehensive {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-btn-comprehensive:hover {
  background: rgba(34, 211, 238, 0.2);
  border-color: rgba(34, 211, 238, 0.3);
  transform: scale(1.05);
}

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

.nav-btn-comprehensive:disabled:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-btn-comprehensive svg {
  width: 20px;
  height: 20px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .navigation-buttons-comprehensive {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .event-solutions-comprehensive {
    padding: 60px 20px;
  }

  .cards-grid-comprehensive {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0;
  }

  .tabs-comprehensive {
    gap: 24px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .tab-comprehensive {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .section-header-comprehensive {
    margin-bottom: 50px;
  }

  .card-content-comprehensive {
    padding: 24px;
  }

  .card-title-comprehensive {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .solution-card-comprehensive {
    border-radius: 16px;
  }

  .card-image-comprehensive {
    height: 240px;
    border-radius: 16px 16px 0 0;
  }

  .card-content-comprehensive {
    padding: 20px;
  }
}

/* Animation for card entrance */
.solution-card-comprehensive {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 0.8s ease forwards;
}

.solution-card-comprehensive:nth-child(1) {
  animation-delay: 0.1s;
}

.solution-card-comprehensive:nth-child(2) {
  animation-delay: 0.2s;
}

.solution-card-comprehensive:nth-child(3) {
  animation-delay: 0.3s;
}

.solution-card-comprehensive:nth-child(4) {
  animation-delay: 0.4s;
}

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

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .image-section {
  position: relative;
}

.about .image-section .primary-image {
  position: relative;
  margin-bottom: 2rem;
}

.about .image-section .primary-image img {
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.about .image-section .primary-image .experience-badge {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background-color: var(--surface-color);
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}


.about .image-section .primary-image .experience-badge .years {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.about .image-section .primary-image .experience-badge .text {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about .image-section .image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.about .image-section .image-grid .grid-img {
  border-radius: 6px;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.about .image-section .image-grid .grid-img:hover {
  transform: translateY(-3px);
}

.about .content-section {
  padding-left: 2rem;
}



.about .section-intro {
  margin-bottom: 3rem;
}

.about .section-intro .company-badge {
  display: inline-block;
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.about .section-intro h2 {
  font-size: 2.125rem;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  font-weight: 600;
  color: var(--heading-color);
}


.about .section-intro .intro-text {
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.about .achievement-list {
  margin-bottom: 3rem;
}

.about .achievement-list .achievement-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.about .achievement-list .achievement-item:last-child {
  margin-bottom: 0;
}

.about .achievement-list .achievement-item .achievement-icon {
  width: 50px;
  height: 50px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.about .achievement-list .achievement-item .achievement-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.about .achievement-list .achievement-item .achievement-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
  margin: 0;
  font-size: 0.9rem;
}

.about .action-section {
  display: flex;
  align-items: center;
  gap: 2rem;
}


.about .action-section .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 2rem;
  font-weight: 600;
  border-radius:  4px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.about .action-section .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-1px);
}

.about .action-section .contact-info .contact-label {
  display: block;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0.25rem;
}

.about .action-section .contact-info .phone-number {
  font-size: 1.125rem;
  color: var(--heading-color);
  font-weight: 600;
}

.about .metrics-section {
  margin-top: 5rem;
  padding: 3rem 0;
  background-color: color-mix(in srgb, var(--surface-color), var(--background-color) 70%);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
}

.about .metrics-section .metric-card {
  padding: 1.5rem 1rem;
}

.about .metrics-section .metric-card .metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 0.75rem;
}



.about .metrics-section .metric-card .metric-label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
  margin: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .services-grid {
  margin-bottom: 5rem;
}

.services .services-grid .featured-service-card {
  background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--accent-color), transparent 97%) 100%);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  position: relative;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
  transition: all 0.4s ease;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 93%);
}

.services .services-grid .featured-service-card .service-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #ff6b6b 20%));
  color: var(--contrast-color);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.services .services-grid .featured-service-card .service-icon-large {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #4facfe 30%));
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto 1.5rem;
  transition: transform 0.4s ease;
}

.services .services-grid .featured-service-card .service-icon-large i {
  font-size: 2rem;
  color: var(--contrast-color);
}

.services .services-grid .featured-service-card h3 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.services .services-grid .featured-service-card p {
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 2rem;
}

.services .services-grid .featured-service-card .feature-highlights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.services .services-grid .featured-service-card .feature-highlights .highlight-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
}

.services .services-grid .featured-service-card .feature-highlights .highlight-item i {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.services .services-grid .featured-service-card .feature-highlights .highlight-item span {
  font-size: 0.95rem;
  color: var(--default-color);
  font-weight: 500;
}

.services .services-grid .featured-service-card .btn-primary {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #667eea 30%));
  border: none;
  color: var(--contrast-color);
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.services .services-grid .featured-service-card .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 60%);
  color: var(--contrast-color);
}

.services .services-grid .featured-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 88%);
}

.services .services-grid .featured-service-card:hover .service-icon-large {
  transform: scale(1.1);
}

.services .services-grid .service-card {
  background: var(--surface-color);
  border-radius: 16px;
  padding: 2rem;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .services-grid .service-card .service-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 85%), color-mix(in srgb, var(--accent-color), transparent 90%));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.services .services-grid .service-card .service-icon i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.services .services-grid .service-card h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.services .services-grid .service-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 1.5rem;
}

.services .services-grid .service-card .service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.services .services-grid .service-card .service-link i {
  transition: transform 0.3s ease;
}

.services .services-grid .service-card .service-link:hover {
  color: var(--heading-color);
}

.services .services-grid .service-card .service-link:hover i {
  transform: translateX(4px);
}

.services .services-tabs .nav-pills {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 50px;
  padding: 8px;
  display: inline-flex;
  margin: 0 auto;
}

.services .services-tabs .nav-pills .nav-item .nav-link {
  background: transparent;
  border: none;
  color: var(--default-color);
  padding: 12px 28px;
  border-radius: 40px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin: 0;
}

.services .services-tabs .nav-pills .nav-item .nav-link.active {
  background: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.services .services-tabs .nav-pills .nav-item .nav-link:hover:not(.active) {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

.services .services-tabs .tab-service-card {
  background: var(--surface-color);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .services-tabs .tab-service-card .service-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 85%), color-mix(in srgb, var(--accent-color), transparent 90%));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: transform 0.3s ease;
}

.services .services-tabs .tab-service-card .service-icon i {
  font-size: 1.6rem;
  color: var(--accent-color);
}

.services .services-tabs .tab-service-card h5 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.services .services-tabs .tab-service-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 2rem;
}

.services .services-tabs .tab-service-card .tab-service-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  padding: 10px 20px;
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  display: inline-block;
  transition: all 0.3s ease;
}

.services .services-tabs .tab-service-card .tab-service-link:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.services .services-tabs .tab-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--default-color), transparent 88%);
}

.services .services-tabs .tab-service-card:hover .service-icon {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-content h2 {
  font-size: 36px;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 30px;
  line-height: 1.3;
}

.features .features-content .lead {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 0;
}

.features .features-image {
  position: relative;
}

.features .features-image img {
  border-radius: 8px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.features .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  margin-top: 20px;
}

.features .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0;
  transition: all 0.3s ease;
}

.features .feature-item:hover {
  transform: translateY(-5px);
}

.features .feature-item:hover .feature-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #6c5ce7 30%));
}


.features .feature-icon i {
  font-size: 24px;
  color: var(--contrast-color);
}

.features .feature-content h4 {
  font-size: 20px;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 12px;
  line-height: 1.4;
}

.features .feature-content p {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 0;
}




/*--------------------------------------------------------------
# Features 2 Section
--------------------------------------------------------------*/
.features-2 .features-list {
  margin-bottom: 30px;
}

.features-2 .features-list .feature-item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  padding: 25px;
  background: var(--surface-color);
  border-radius: 16px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  text-align: left;
  height: 100%;
}

.features-2 .features-list .feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.features-2 .features-list .feature-item .feature-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.features-2 .features-list .feature-item .feature-icon i {
  font-size: 22px;
  color: var(--accent-color);
}

.features-2 .features-list .feature-item .feature-content {
  flex: 1;
}

.features-2 .features-list .feature-item .feature-content h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.features-2 .features-list .feature-item .feature-content p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 12px;
  line-height: 1.5;
}

.features-2 .features-list .feature-item .feature-content .feature-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.features-2 .features-list .feature-item .feature-content .feature-tags span {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.features-2 .cta-section {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
  justify-content: center;
}

.features-2 .cta-section .btn-primary,
.features-2 .cta-section .btn-secondary {
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.features-2 .cta-section .btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.features-2 .cta-section .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.features-2 .cta-section .btn-secondary {
  background: transparent;
  color: var(--heading-color);
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.features-2 .cta-section .btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 97%) 0%, var(--background-color) 100%);
}

.testimonials .testimonials-slider-wrapper {
  position: relative;
  /* max-width: 1200px; */
  margin: 0 auto;
}

.testimonials .testimonials-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem 0;
}

.testimonials .testimonial-card {
  background: var(--surface-color);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  transition: all 0.4s ease;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--default-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 94%);
}

.testimonials .testimonial-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.testimonials .testimonial-card.featured {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 94%) 0%, var(--surface-color) 100%);
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  transform: scale(1.05);
}

.testimonials .testimonial-card.featured .featured-badge {
  position: absolute;
  top: -12px;
  right: 2rem;
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #007bff 20%) 100%);
  color: var(--contrast-color);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.testimonials .testimonial-card.featured .featured-badge i {
  font-size: 0.875rem;
}

.testimonials .rating {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}

.testimonials .rating i {
  color: #ffc107;
  font-size: 1rem;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, #ffc107, transparent 60%));
}

.testimonials blockquote {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--default-color);
  margin: 0 0 2rem 0;
  position: relative;
  font-style: italic;
}

.testimonials blockquote::before {
  content: '"';
  position: absolute;
  top: -1rem;
  left: -0.5rem;
  font-size: 4rem;
  color: color-mix(in srgb, var(--accent-color), transparent 80%);
  font-family: "Instrument Sans", Sans-serif;
  line-height: 1;
}

.testimonials .user-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent-color);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.testimonials .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials .user-info {
  flex: 1;
}

.testimonials .user-info h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--heading-color);
}

.testimonials .user-info .title {
  font-size: 0.9rem;
  color: var(--accent-color);
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

.testimonials .user-info .company {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.testimonials .navigation-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}

.testimonials .nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  background: var(--surface-color);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.25rem;
}

.testimonials .nav-btn:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: scale(1.1);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.testimonials .dots-indicator {
  display: flex;
  gap: 0.75rem;
}

.testimonials .dots-indicator .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color), transparent 70%);
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonials .dots-indicator .dot.active {
  background: var(--accent-color);
  transform: scale(1.2);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  --card-border-radius: 20px;
}

.pricing .row {
  justify-content: center;
}

.pricing .pricing-card {
  height: 100%;
  background: var(--surface-color);
  border-radius: var(--card-border-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
  transition: all 0.4s;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

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

.pricing .pricing-card.popular {
  border: 2px solid var(--accent-color);
}

.pricing .pricing-card.popular .plan-cta .btn-plan {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .plan-cta .btn-plan:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.pricing .pricing-card .popular-tag {
  position: absolute;
  top: 20px;
  right: -35px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 40px;
  transform: rotate(45deg);
}

.pricing .plan-header {
  padding: 30px 30px 20px;
  text-align: center;
}

.pricing .plan-header .plan-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.pricing .plan-header .plan-icon i {
  font-size: 28px;
  color: var(--accent-color);
}

.pricing .plan-header h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.pricing .plan-header p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.pricing .plan-pricing {
  text-align: center;
  padding: 10px 30px 20px;
  position: relative;
}

.pricing .plan-pricing .currency {
  font-size: 24px;
  vertical-align: top;
  line-height: 1;
  color: var(--heading-color);
  font-weight: 600;
}

.pricing .plan-pricing .amount {
  font-size: 60px;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1;
}

.pricing .plan-pricing .period {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pricing .plan-features {
  padding: 20px 30px;
  flex: 1;
}

.pricing .plan-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing .plan-features ul li {
  padding: 12px 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.pricing .plan-features ul li.disabled {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing .plan-features ul li i {
  font-size: 18px;
}

.pricing .plan-features ul li i.bi-check-circle-fill {
  color: var(--accent-color);
}

.pricing .plan-features ul li i.bi-x-circle-fill {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing .plan-cta {
  padding: 10px 30px 30px;
  text-align: center;
}

.pricing .plan-cta .btn-plan {
  display: inline-block;
  width: 100%;
  padding: 14px 32px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  color: var(--default-color);
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
}

.pricing .plan-cta .btn-plan:hover {
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .contact-info-panel {
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), #000 20%) 100%);
  height: 100%;
  min-height: 650px;
  position: relative;
  overflow: hidden;
}

.contact .contact-info-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../Landio/assets/img/misc/misc-1.webp") center/cover;
  opacity: 0.1;
  z-index: 1;
}

.contact .contact-info-panel .panel-content {
  position: relative;
  z-index: 2;
  padding: 80px 60px;
  height: 100%;
  display: flex;
  flex-direction: column;
}


.contact .contact-info-panel .info-header {
  margin-bottom: 50px;
}

.contact .contact-info-panel .info-header h2 {
  font-size: 42px;
  font-weight: 600;
  color: var(--contrast-color);
  margin-bottom: 20px;
  line-height: 1.2;
}

.contact .contact-info-panel .info-header p {
  font-size: 18px;
  color: color-mix(in srgb, var(--contrast-color), transparent 15%);
  line-height: 1.6;
  margin-bottom: 0;
}

.contact .contact-info-panel .info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 50px;
  flex: 1;
}

.contact .contact-info-panel .info-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 25px;
  background: color-mix(in srgb, var(--contrast-color), transparent 90%);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.contact .contact-info-panel .info-card:hover {
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  transform: translateX(10px);
}

.contact .contact-info-panel .info-card .card-icon {
  width: 50px;
  height: 50px;
  background: var(--contrast-color);
  color: var(--accent-color);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact .contact-info-panel .info-card .card-icon i {
  font-size: 22px;
}

.contact .contact-info-panel .info-card .card-content {
  flex: 1;
}

.contact .contact-info-panel .info-card .card-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--contrast-color);
  margin-bottom: 8px;
}

.contact .contact-info-panel .info-card .card-content p {
  font-size: 14px;
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  margin-bottom: 0;
  line-height: 1.5;
}

.contact .contact-info-panel .social-section {
  border-top: 1px solid color-mix(in srgb, var(--contrast-color), transparent 80%);
  padding-top: 30px;
}

.contact .contact-info-panel .social-section h5 {
  font-size: 16px;
  color: var(--contrast-color);
  margin-bottom: 20px;
  font-weight: 500;
}

.contact .contact-info-panel .social-section .social-icons {
  display: flex;
  gap: 15px;
}

.contact .contact-info-panel .social-section .social-icons .social-icon {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  color: var(--contrast-color);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact .contact-info-panel .social-section .social-icons .social-icon i {
  font-size: 18px;
}

.contact .contact-info-panel .social-section .social-icons .social-icon:hover {
  background: var(--contrast-color);
  color: var(--accent-color);
  transform: translateY(-3px);
}

.contact .contact-form-wrapper {
  background: var(--surface-color);
  padding: 80px 60px;
  height: 100%;
  min-height: 650px;
}



.contact .contact-form-wrapper .form-header {
  margin-bottom: 50px;
}

.contact .contact-form-wrapper .form-header h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 15px;
}

.contact .contact-form-wrapper .form-header .header-line {
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

.contact .contact-form-wrapper .modern-form .form-group {
  margin-bottom: 25px;
}

.contact .contact-form-wrapper .modern-form .form-group .form-control {
  width: 100%;
  padding: 18px 25px;
  font-size: 16px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px;
  background: var(--surface-color);
  color: var(--default-color);
  transition: all 0.3s ease;
}

.contact .contact-form-wrapper .modern-form .form-group .form-control:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.contact .contact-form-wrapper .modern-form .form-group .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.contact .contact-form-wrapper .modern-form .form-group textarea.form-control {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
}

.contact .contact-form-wrapper .modern-form .submit-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 18px 35px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.contact .contact-form-wrapper .modern-form .submit-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--contrast-color), transparent 80%), transparent);
  transition: left 0.5s ease;
}

.contact .contact-form-wrapper .modern-form .submit-btn:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.contact .contact-form-wrapper .modern-form .submit-btn:hover::before {
  left: 100%;
}

.contact .contact-form-wrapper .modern-form .submit-btn:hover .btn-icon {
  transform: translateX(5px);
}

.contact .contact-form-wrapper .modern-form .submit-btn .btn-text,
.contact .contact-form-wrapper .modern-form .submit-btn .btn-icon {
  position: relative;
  z-index: 2;
}

.contact .contact-form-wrapper .modern-form .submit-btn .btn-icon {
  transition: transform 0.3s ease;
}

.contact .contact-form-wrapper .modern-form .submit-btn .btn-icon i {
  font-size: 16px;
}



/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-hero {
  margin-bottom: 4rem;
}

.service-details .service-hero .service-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.service-details .service-hero .service-meta .service-category {
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.service-details .service-hero .service-meta .reading-time {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 0.9rem;
  font-weight: 300;
}

.service-details .service-hero h1 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
  letter-spacing: -0.02em;
}

.service-details .service-hero .service-description {
  font-size: 1.25rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-weight: 300;
  margin: 0;
}

.service-details .service-visual {
  margin-bottom: 4rem;
  overflow: hidden;
  border-radius: 4px;
}

.service-details .service-visual img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-details .service-visual img:hover {
  transform: scale(1.02);
}

.service-details .service-narrative {
  margin-bottom: 5rem;
}

.service-details .service-narrative h3 {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 2rem;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

.service-details .service-narrative p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: var(--default-color);
  font-weight: 300;
}

.service-details .benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.service-details .benefits-grid .benefit-card {
  text-align: center;
  padding: 0;
}

.service-details .benefits-grid .benefit-card .benefit-icon {
  width: 60px;
  height: 60px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

.service-details .benefits-grid .benefit-card .benefit-icon i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.service-details .benefits-grid .benefit-card:hover .benefit-icon {
  background: var(--accent-color);
  transform: translateY(-2px);
}

.service-details .benefits-grid .benefit-card:hover .benefit-icon i {
  color: var(--contrast-color);
}

.service-details .benefits-grid .benefit-card h4 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.service-details .benefits-grid .benefit-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.service-details .timeline-section {
  margin-bottom: 4rem;
}

.service-details .timeline-section h3 {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 3rem;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

.service-details .timeline-section .timeline {
  position: relative;
}

.service-details .timeline-section .timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
}

.service-details .timeline-section .timeline .timeline-item {
  position: relative;
  padding-left: 80px;
  margin-bottom: 3rem;
}

.service-details .timeline-section .timeline .timeline-item:last-child {
  margin-bottom: 0;
}

.service-details .timeline-section .timeline .timeline-item .timeline-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  background: var(--surface-color);
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.service-details .timeline-section .timeline .timeline-item .timeline-marker span {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--accent-color);
}

.service-details .timeline-section .timeline .timeline-item .timeline-content h4 {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.service-details .timeline-section .timeline .timeline-item .timeline-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  color: var(--default-color);
}

.service-details .timeline-section .timeline .timeline-item .timeline-content small {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 0.9rem;
  font-weight: 500;
}

.service-details .service-sidebar {
  padding-left: 2rem;
}



.service-details .overview-card,
.service-details .success-story,
.service-details .consultation-form {
  background: var(--surface-color);
  border-radius: 8px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 93%);
  transition: all 0.3s ease;
}

.service-details .overview-card:hover,
.service-details .success-story:hover,
.service-details .consultation-form:hover {
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.service-details .overview-card .overview-header h4 {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 2rem;
  color: var(--heading-color);
}

.service-details .overview-card .overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.service-details .overview-card .overview-stats .stat-item {
  text-align: center;
}

.service-details .overview-card .overview-stats .stat-item .stat-number {
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.service-details .overview-card .overview-stats .stat-item .stat-label {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-details .overview-card .overview-details {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-top: 1.5rem;
}

.service-details .overview-card .overview-details .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.service-details .overview-card .overview-details .detail-row:last-child {
  margin-bottom: 0;
}

.service-details .overview-card .overview-details .detail-row .detail-label {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 400;
}

.service-details .overview-card .overview-details .detail-row .detail-value {
  font-size: 0.95rem;
  color: var(--heading-color);
  font-weight: 500;
}

.service-details .success-story .story-quote p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-style: italic;
  margin-bottom: 2rem;
}

.service-details .success-story .story-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.service-details .success-story .story-author .author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.service-details .success-story .story-author .author-details h5 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--heading-color);
}

.service-details .success-story .story-author .author-details span {
  display: block;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0.25rem;
}

.service-details .success-story .story-author .author-details small {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.service-details .success-story .story-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .success-story .story-metrics .metric {
  text-align: center;
}

.service-details .success-story .story-metrics .metric .metric-value {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--accent-color);
  display: block;
  margin-bottom: 0.25rem;
}

.service-details .success-story .story-metrics .metric .metric-label {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-details .consultation-form .form-header {
  margin-bottom: 2rem;
}

.service-details .consultation-form .form-header h4 {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.service-details .consultation-form .form-header p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.service-details .consultation-form .form-group {
  margin-bottom: 1.5rem;
}

.service-details .consultation-form .form-input {
  width: 100%;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 4px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  background: transparent;
}

.service-details .consultation-form .form-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.service-details .consultation-form input[type=text],
.service-details .consultation-form input[type=email],
.service-details .consultation-form input[type=tel],
.service-details .consultation-form select,
.service-details .consultation-form textarea {
  color: var(--default-color);
  background-color: var(--surface-color);
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.service-details .consultation-form input[type=text]:focus,
.service-details .consultation-form input[type=email]:focus,
.service-details .consultation-form input[type=tel]:focus,
.service-details .consultation-form select:focus,
.service-details .consultation-form textarea:focus {
  border-color: var(--accent-color);
}

.service-details .consultation-form input[type=text]::placeholder,
.service-details .consultation-form input[type=email]::placeholder,
.service-details .consultation-form input[type=tel]::placeholder,
.service-details .consultation-form select::placeholder,
.service-details .consultation-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.service-details .consultation-form .btn-consultation {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  text-transform: none;
}

.service-details .consultation-form .btn-consultation:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 10%);
  transform: translateY(-1px);
}

.service-details .consultation-form .btn-consultation i {
  font-size: 0.9rem;
}


/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/

/* Swiper client carousel custom styles */
.client-logos.swiper-container {
  padding: 20px 0;
}

.client-logos .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: filter 0.3s, opacity 0.3s;
}

.client-logos .img-fluid {
  max-width: 120px;
  height: auto;
  transition: filter 0.3s, opacity 0.3s;
}

/* Only blur the first and last visible slides */
.client-logos .swiper-slide.swiper-slide-visible {
  filter: none;
  opacity: 1;
}

.client-logos .swiper-slide.swiper-slide-visible:first-child,
.client-logos .swiper-slide.swiper-slide-visible:last-child {
  filter: blur(2px);
  opacity: 0.5;
}




/* Submenu hover background color */
.navmenu .dropdown ul li:hover {
  background-color: #eef9fa;
  color: #000 !important;
}

.events .event-solutions .row {
  display: flex;
  flex-wrap: wrap;
}

.events .event-solutions .col-lg-6 {
  flex: 1 1 50%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}
/*
--- What's Included Section ---
*/

.whats-included-section {
    padding: 80px 0;
    background-color: #fff; /* Or a light grey like #f8f9fa */
}

.whats-included-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 50px;
}

.whats-included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Standard Card Style */
.included-card {
    background-color: #f2f6f6; /* Very light grey */
    padding: 35px 30px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.included-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.5rem; /* Adjust if using icon fonts */
}

.included-card__title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #212529;
}

.included-card__description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6c757d;
    margin: 0;
}

/* Special CTA Card Style */
.included-card--cta {
    grid-column: span 2; /* This makes it span two columns */
    background: linear-gradient(to bottom, #D9E1E1 100%, #fff 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-card__title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 10px 0;
    line-height: 1.3;
}
.cta-card__description {
    font-size: 1rem;
    color: #495057;
    margin: 0 0 25px 0;
    max-width: 80%; /* Keeps text from stretching too wide */
}

.cta-card__button {
    background-color: #212529;
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start; /* Aligns button to the left */
    transition: background-color 0.2s ease;
}

.cta-card__button:hover {
    background-color: var(--accent-color);
}


/* --- Responsive Breakpoints --- */

@media (max-width: 992px) {
    .whats-included-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Make the CTA span full width */
    .included-card--cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .whats-included-grid {
        grid-template-columns: 1fr;
    }
    .cta-card__description {
        max-width: 100%;
    }
}
.solution-title{
    margin-bottom: 20px !important;
    padding-bottom:20px !important
}
.service-banner-bg{
  background-color:#F2F6F6;
}
.services .paragraph-description{
  margin-bottom:30px !important;
}
.footer-logo-image{
  max-width: 50% !important;
}
.blog-details{
  padding-top: 10% !important;
}
.blog-details .single-post__header{
 
  padding: 0px 0px 30px 0px!important;
}
.blog-details .post-section{
  padding:10px 0px 10px 0px !important;
}
.blog-details .post-section h2{
  margin: 10px 0px !important;
   padding:10px 0px 10px 0px !important;
}
/* --- Case Study Page --- */
.case-study-hero { text-align: center; padding: 80px 0; }
.case-study-hero .hero-title { font-size: 3rem; font-weight: 700; }
.case-study-hero .hero-subtitle { font-size: 1.1rem; color: #6c757d; max-width: 600px; margin: 15px auto 0; }
.case-study-archive { padding-bottom: 80px; }
.filter-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; }
.tab-filter { background: none; border: 1px solid #dee2e6; padding: 8px 20px; border-radius: 50px; cursor: pointer; transition: all 0.2s ease; }
.tab-filter:hover { background-color: #f8f9fa; }
.tab-filter.active { background-color: #212529; color: #fff; border-color: #212529; }
.case-study-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.case-study-card { position: relative; display: block; height: 350px; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; text-decoration: none; transition: transform 0.3s ease; }
.case-study-card:hover { transform: scale(1.03); }
.case-study-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); }
.case-study-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 25px; color: #fff; }
.case-study-card__category { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; }
.case-study-card__title 
{
    font-size: 1.3rem; 
    font-weight: 600;
    line-height: 1.4; 
    margin: 0; 
    color:#fff;
}
.main-blog-heading{
    font-weight:600;
}
.pagination-container { margin-top: 50px; text-align: center; } /* Styles for pagination are in the blog css */
@media (max-width: 992px) { .case-study-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .case-study-grid { grid-template-columns: 1fr; } }

/*
--- New Case Study Detail Page ---
*/

.case-study-detail .container { max-width: 1140px; }

/* Header & Project Details */
.case-study-detail__header { padding: 40px 0; }
.case-study-detail__title { font-size: 3rem; font-weight: 700; text-align: left; margin-bottom: 30px; }
.project-details-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 40px; padding: 20px 0; width:fit-content}
.project-details-list .detail-item strong { color: #6c757d; margin-right: 8px;}
.project-details-list .detail-item{border-left: 2px solid #6c757d; padding-left:5px}
/* Two-Column Layout */
.case-study-wrapper { display: flex; gap: 60px; margin-top: 0px; }
.case-study-main-content { flex: 2; min-width: 0; }
.case-study-sidebar { flex: 1; }

/* Sidebar */
.case-study-sidebar .sidebar-box { background-color: #1a2c3a; color: #fff; border-radius: 12px; padding: 30px; position: sticky; top: 120px; }
.sidebar-box h4 
{
    font-weight: 600;
    margin: 0 0 15px 0; 
    color: var(--accent-color);
    
}
.sidebar-box .toc-list { list-style: none; padding: 0; margin: 0; }
.sidebar-box .toc-list li a { color: #adb5bd; text-decoration: none; display: block; padding: 8px 0; border-bottom: 1px solid #34495e; transition: color 0.2s; }
.sidebar-box .toc-list li:last-child a { border-bottom: none; }
.sidebar-box .toc-list li a:hover { color: #fff; }

/* Main Content Styling */
.case-study-main-content .post-section h2 { font-size: 1.8rem; font-weight: 700; margin: 0 0 1em 0; }
.case-study-main-content .post-section:not(:first-child) { margin-top: 0px; }
.case-study-main-content p { line-height: 1.8; color: #343a40; }

/* Gallery Section */
.event-gallery-section { padding: 80px 0; text-align: center; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 40px; }
.gallery-grid .gallery-item img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; transition: transform 0.3s; }
.gallery-grid .gallery-item img:hover { transform: scale(1.05); }

/* Other Case Studies Section */
.other-case-studies-section { padding: 80px 0; background-color: #f8f9fa; }
.other-case-studies-section .section-title, .other-case-studies-section .section-subtitle { text-align: center; }
.other-case-studies-section .section-subtitle { color: #6c757d; margin-top: -10px; margin-bottom: 40px; }
.other-studies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.related-study-card { display: block; background-color: #fff; padding: 30px; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.3s; }
.related-study-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.related-study-card__title { font-size: 1.2rem; font-weight: 600; color: #212529; margin: 0 0 15px 0; }
.related-study-card__link { font-weight: 600; color: #007bff; }

/* Responsive Adjustments */
@media (max-width: 992px) {
    .case-study-wrapper { flex-direction: column; }
    .case-study-sidebar .sidebar-box { position: static; }
    .other-studies-grid { grid-template-columns: 1fr; }
}
.case-study-detail {
    padding-top: 10% !important;
}
.card-description-comprehensive p {
  font-size: 16px;
  color: #94a3b8;
  line-height: 1.6;
}
.case-study-main-content .post-section{
    padding:20px 0px;
}
/*
--- Popup Modal Styles ---
*/

.modal-wrapper {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

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

.modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: relative;
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    width: 100%;
    max-width: 25%;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    height: auto;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.4s ease;
}
.modal-wrapper.active .modal-content {
    transform: scale(1);
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
}

.modal-header {
    text-align: center;
    margin-bottom: 25px;
    display: contents;
}

.modal-header h2 {
    font-weight: 700;
    margin-bottom: 10px;
}

/* Make the form fields stack vertically */
.modal-body .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between form fields */
}
.modal-body .wpcf7-form-control-wrap {
    width: 100%; /* Ensure full width */
}
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="tel"] { /* Add tel for phone number */
    width: 100%;
    padding: 8px 18px;
    border: 1px solid #ddd;
    border-radius: 8px; /* More rounded input fields */
    font-size: 1rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.modal-body input[type="text"]:focus,
.modal-body input[type="email"]:focus,
.modal-body input[type="tel"]:focus {
    border-color: #a0a0a0;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 5px rgba(138, 43, 226, 0.2); /* Light purple focus glow */
}
.modal-body .wpcf7-submit {
    display: block; /* Make it a block element to control its width */
    width: 100%; /* Full width button */
    padding: 14px 25px;
    border: none;
    border-radius: 8px; /* Rounded button */
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    
    /* Gradient background for the button */
    background: linear-gradient(to right, #06585B, #06585B); /* Teal */
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4); /* Shadow for depth */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.modal-body .wpcf7-submit:hover {
    background: linear-gradient(to right, #06585B, #06585B); /* Slightly darker on hover */
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.5);
}

.modal-body .wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}
.popup-subtitle {
    font-weight: 500;
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 15px;
}
.modal-body .wpcf7-submit {
    justify-self: center; /* Center the button */
    align-self: center;
}
.wpcf7-form label{
  display:block
}
.wpcf7-form p{
  margin-bottom:15px !important
}
.modal-body .wpcf7{
  justify-items: center;
}
.modal-header h2 {
    font-size: 36px;
    color: #e53b2b;
    font-weight: 600;
    line-height: 42px;
    padding-bottom: 5px;
    background: linear-gradient(to right, #06585B 0%, #06585B 50%, #06585B 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wpcf7 form .wpcf7-response-output {
    margin: 1em 0.5em 1em;
    padding: 0.1em 1em;
    border: 2px solid #00a0d2;
}
.solutions-list-wrapper {
    position: relative;
    max-width: 600px; /* Controls the width of the list */
    margin: 40px auto; /* Centers the list */
}

.solutions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between list items */
}

.solution-item {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Space between icon and text */
}

.solution-item__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0; /* Prevents the icon from shrinking */
}

.solution-item__text {
    flex-grow: 1;
}

.solution-item__title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.solution-item__description {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
}
/*
--- Core Values Section (Bootstrap Version) ---
*/

.core-values-section {
    background-color: #fff;
    padding: 60px 0 30px 0px;
   
    color: #fff;
    text-align: center;
}

.core-values-section .section-subtitle {
    font-size: 1.1rem;
    color: #adb5bd;
    margin-bottom: 60px;
}

.values-column {
    display: flex;
    flex-direction: column;
    gap: 30px; /* This creates the space between the two cards in a column */
}

/* All the styles for .value-card, .value-card__icon, etc. remain exactly the same */
.value-card {
    background-color: #f0f4f4;
    color: #212529;
    padding: 35px;
    border-radius: 24px;
}

.value-card__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-sizing: border-box;
}
.value-card__icon img {
    width: 100%;
    height: 100%;
}

.value-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: left;
}

.value-card__description {
    color: #6c757d;
    line-height: 1.6;
    text-align: left;
}

.values-center-image {
    max-width: 100%; /* Image will scale within its column */
    height: auto;
    border-radius: 24px;
}
/*
--- Callback Popup Modal Styles ---
*/

.modal-wrapper {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

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

.modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-wrapper.active .modal-content {
    transform: scale(1);
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.05);
    transition: background-color 0.3s ease;
}
.modal-close-btn:hover {
    background-color: rgba(0,0,0,0.1);
}

.modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.popup-title {
    font-weight: 800;
    font-size: 2.2rem;
    margin-bottom: 10px;
    background: linear-gradient(to right, #ff007f, #8a2be2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.popup-subtitle {
    font-weight: 500;
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 15px;
}

.popup-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Styling for Contact Form 7 fields */
.modal-body .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-body .wpcf7-form-control-wrap {
    width: 100%;
}



.modal-body .wpcf7-submit {
    display: block;
    width: 100%;
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
    transition: all 0.3s ease;
}

.modal-body .wpcf7-submit:hover {
   
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.5);
}
/* Add .cookie-policy-page to existing rules */
.privacy-policy-page .page-header-section,
.terms-of-service-page .page-header-section,
.cookie-policy-page .page-header-section {
    /* ... styles ... */
}

.policy-content { /* New shared class for content area */
    max-width: 800px;
    margin: 0 auto;
    
}

/* 404 Section */
        ..error-section {
            min-height: 80vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .error-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
           
            height: 800px;
            background: radial-gradient(circle, rgba(0,212,170,0.1) 0%, transparent 70%);
            border-radius: 50%;
        }

        .error-section::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(10,37,64,0.05) 0%, transparent 70%);
            border-radius: 50%;
        }

        .error-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .error-number {
            font-size: 10rem;
            font-weight: 900;
            color: var(--primary-dark);
            line-height: 1;
            margin-bottom: 1rem;
            animation: float 3s ease-in-out infinite;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-teal) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

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

        .error-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .error-description {
            font-size: 1.2rem;
            color: var(--text-gray);
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

       .error-section .btn-home {
            background: var(--primary-dark);
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            display: inline-block;
            transition: all 0.3s;
            border: none;
            font-size: 1.1rem;
        }

       .error-section .btn-home:hover {
            background: #051a2e;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }

        .error-section .btn-secondary-link {
            color: var(--primary-teal);
            text-decoration: none;
            font-weight: 600;
            margin-left: 1.5rem;
            transition: all 0.3s;
            margin-left:20px;
        }

       .error-section .btn-secondary-link:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }

       .error-section .helpful-links {
            margin-top: 4rem;
        }

       .error-section .link-card {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            transition: all 0.3s;
            margin-bottom: 1.5rem;
            text-decoration: none;
            display: block;
            border: 2px solid transparent;
        }

        .error-section .link-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border-color: var(--primary-teal);
        }

        .error-section .link-card i {
            font-size: 2.5rem;
            color: var(--primary-teal);
            margin-bottom: 1rem;
        }

        .error-section .link-card h3 {
            font-size: 1.3rem;
            color: var(--primary-dark);
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .error-section .link-card p {
            color: var(--text-gray);
            margin: 0;
        }
        
        /* New Her section */


/* Add this to your theme's style.css file */

/* 1. Make the hero section the main container */
#hero.hero.section {
  position: relative; /* This is the anchor for positioning */
  overflow: hidden;    /* Keeps video from spilling out */
  
  /* Set a min-height so the section isn't flat */
  min-height: 70vh; 
  /* (Adjust 70vh - 70% of viewport height - as needed) */
}

/* 2. Style the video container to fill the section */
.hero-video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Puts it in the back (Layer 1) */
}

/* * 3. === THIS IS THE NEW OVERLAY RULE ===
 * We use ::after to create a "virtual" element inside .hero-video-background.
 * It sits on top of the <video> but is still inside the z-index: 1 container,
 * so it stays behind your text.
*/
.hero-video-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Your overlay styles: */
  background-color: #000000;
  opacity: 0.69;
  transition: background 0.3s, opacity 0.3s;
}

/* 4. Make the video itself cover the container */
.hero-video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the video fill the space */
  object-position: center;
}

/* 5. Make your text container sit ON TOP of the video + overlay */
#hero .container {
  position: relative; /* Must be relative to respect z-index */
  z-index: 2; /* Puts it on top (Layer 2) - This is already correct! */
}

/*
------------------------------------------------
--- Terms & Conditions Page ---
------------------------------------------------
*/

/* --- 1. Hero Section (Title) --- */
.terms-conditions-page .terms-hero {
  padding: 60px 20px 40px;
  text-align: center;
  /* Your background styles are already inline */
}

.terms-conditions-page .terms-hero .terms-title {
  font-size: 3.5rem;
  font-weight: 700;
  
}

.terms-conditions-page .terms-hero .last-updated {
  font-size: 1rem;
  
  margin-top: 10px;
}

/* --- 2. Main Content Section --- */
.terms-conditions-page .terms-content {
  background-color: #ffffff;
  padding: 50px 0;
}

/* Set a max-width for readability, same as privacy */
.terms-conditions-page .terms-content .container {
  max-width: 800px; 
  margin-left: auto;
  margin-right: auto;
}

.terms-conditions-page .terms-content .intro {
  font-size: 1.15rem;
  color: #333;
  margin-bottom: 30px;
  font-weight: 500;
}

/* Using the same .policy-section class for consistency */
.terms-conditions-page .terms-content .policy-section {
  margin-bottom: 30px; /* Space between each numbered section */
}

.terms-conditions-page .terms-content h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #111;
  margin-top: 40px;
  margin-bottom: 15px;
}

.terms-conditions-page .terms-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 15px;
}

.terms-conditions-page .terms-content ul {
  padding-left: 25px;
  margin-bottom: 15px;
  list-style-type: disc;
}

.terms-conditions-page .terms-content li {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 10px;
}

.terms-conditions-page .terms-content .contact-details {
  font-style: normal;
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-left: 4px solid #eee;
}

.terms-conditions-page .terms-content .contact-details p {
  margin-bottom: 5px;
  line-height: 1.6;
}
/*
------------------------------------------------
--- Cookie Policy Page ---
------------------------------------------------
*/

/* --- 1. Hero Section (Title) --- */
.cookie-policy-page .cookie-hero {
  padding: 60px 20px 40px;
  text-align: center;
  /* Your background styles are already inline */
}

.cookie-policy-page .cookie-hero .cookie-title {
  font-size: 3.5rem;
  font-weight: 700;
 
}

.cookie-policy-page .cookie-hero .last-updated {
  font-size: 1rem;
  
  margin-top: 10px;
}

/* --- 2. Main Content Section --- */
.cookie-policy-page .cookie-content {
  background-color: #ffffff;
  padding: 50px 0;
}

/* Set a max-width for readability, same as privacy/terms */
.cookie-policy-page .cookie-content .container {
  max-width: 800px; 
  margin-left: auto;
  margin-right: auto;
}

.cookie-policy-page .cookie-content .intro {
  font-size: 1.15rem;
  color: #333;
  margin-bottom: 30px;
  font-weight: 500;
}

/* Using the same .policy-section class for consistency */
.cookie-policy-page .cookie-content .policy-section {
  margin-bottom: 30px; /* Space between each numbered section */
}

.cookie-policy-page .cookie-content h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #111;
  margin-top: 40px;
  margin-bottom: 15px;
  text-align:center;
}

.cookie-policy-page .cookie-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 15px;
}

.cookie-policy-page .cookie-content ul {
  padding-left: 25px;
  margin-bottom: 15px;
  list-style-type: disc;
}

.cookie-policy-page .cookie-content li {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 10px;
}

.cookie-policy-page .cookie-content .contact-details {
  font-style: normal;
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-left: 4px solid #eee;
}

.cookie-policy-page .cookie-content .contact-details p {
  margin-bottom: 5px;
  line-height: 1.6;
}
.about-page .banner-image-hero{
    width: 50% !important;
    border-radius:8px;
}
@media (max-width: 992px) {
    .about-page .banner-image-hero{
    width: 75% !important;
    border-radius:8px;
}}
/* ========================================
   FULL-SCREEN VIDEO HERO - Added 2025-11-06
   ======================================== */
/* ========================================
   FULL-SCREEN VIDEO HERO WITH OVERLAY HEADER
   ======================================== */

/* 1. Remove top spacing on homepage body */
body.home {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Make header transparent and overlay the video */
body.home .site-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

/* 3. Add subtle gradient background for header readability */
body.home .site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 70%, transparent 100%);
    z-index: -1;
    pointer-events: none;
}

/* 4. When scrolled, make header more solid */
body.home.scrolled .site-header {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

body.home.scrolled .site-header::before {
    display: none;
}

/* 5. Make logo and menu text white (and visible against video) */
body.home .site-header .nav-menu a,
body.home .site-header .desktop-nav a {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 600;
}

/* 6. When scrolled, change text back to dark */
body.home.scrolled .site-header .nav-menu a,
body.home.scrolled .site-header .desktop-nav a {
    color: #000000 !important;
    text-shadow: none;
}

/* 7. Style the CTA button in header for video background */
body.home .site-header .cta-button {
    background: rgba(21, 170, 170, 0.9) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(21, 170, 170, 0.4);
    backdrop-filter: blur(10px);
}

body.home .site-header .cta-button:hover {
    background: rgba(21, 170, 170, 1) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21, 170, 170, 0.6);
}

/* 8. When scrolled, normal CTA styling */
body.home.scrolled .site-header .cta-button {
    background: #15AAAA !important;
    border: none;
    box-shadow: none;
}

/* 9. Make hero section full viewport height */
body.home #hero.hero.section {
    min-height: 85vh !important;
    height: 85vh;
    display: flex;
    align-items: center;
    padding-top: 0;
    margin-top: 0;
}

/* 10. Video background should cover entire viewport */
body.home .hero-video-background {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 85vh;
    z-index: 1;
}

/* 11. Make video cover properly */
body.home .hero-video-background video {
    width: 100%;
    height: 85vh;
    object-fit: cover;
}

/* 12. Ensure hero content is above video */
body.home #hero.hero.section .container {
    position: relative;
    z-index: 10;
}

/* 13. Improve dropdown visibility on transparent header */
body.home .site-header .sub-menu {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

body.home .site-header .sub-menu a {
    color: #000000 !important;
    text-shadow: none !important;
}

body.home .site-header .sub-menu a:hover {
    background: rgba(21, 170, 170, 0.1);
    color: #15AAAA !important;
}

/* 14. Hamburger icon for mobile - make it white */
body.home .hamburger-menu .hamburger-line {
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.home.scrolled .hamburger-menu .hamburger-line {
    background: #000000 !important;
    box-shadow: none;
}

/* 15. Mobile menu styling for home page */
body.home .mobile-nav-overlay {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* 16. Responsive adjustments */
@media (max-width: 768px) {
    body.home #hero.hero.section {
        min-height: 100vh;
        height: auto;
    }
    
    body.home .site-header::before {
        background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
    }
}

/* 17. Ensure smooth scroll behavior when clicking anchor links */
html {
    scroll-behavior: smooth;
}

/* 18. Add padding to next section so it's not cut off by fixed video */
body.home #hero.hero.section + section {
    position: relative;
    z-index: 100;
    background: #ffffff;
}

/* 19. Make logo visible against video background */
body.home .site-header .site-logo img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* 20. When scrolled, show normal logo */
body.home.scrolled .site-header .site-logo img {
    filter: none;
}

/* 21. Add drop shadow to logo for better visibility */
body.home .site-header .site-logo {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

body.home.scrolled .site-header .site-logo {
    filter: none;
}


/* 26. CRITICAL FIX: Ensure other sections are visible and positioned correctly */
body.home main.main {
    position: relative;
    z-index: 1;
}

body.home #hero.hero.section {
    position: relative;
    z-index: 10;
}

/* 27. Ensure all sections after hero have proper background and positioning */
body.home section:not(#hero) {
    position: relative;
    z-index: 100;
    background: #ffffff;
}

/* 28. Fix header to stay at top but not block content */
body.home .site-header {
    position: fixed !important;
}


/* 29. Add top padding to hero content to prevent header overlap */
body.home #hero.hero.section .container {
    padding-top: 130px !important;
}

/* 30. Responsive padding adjustments */
@media (max-width: 992px) {
    body.home #hero.hero.section .container {
        padding-top: 120px !important;
    }
}

@media (max-width: 768px) {
    body.home #hero.hero.section .container {
        padding-top: 110px !important;
    }
    
    body.home #hero.hero.section h1.hero-main-title {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 576px) {
    body.home #hero.hero.section .container {
        padding-top: 100px !important;
    }
    
    body.home #hero.hero.section h1.hero-main-title {
        font-size: 2rem !important;
    }
}


/* 31. Reduce hero section bottom spacing */
body.home #hero.hero.section {
    margin-bottom: 0 !important;
    padding-bottom: 3rem !important;
}

/* 32. Tighten up hero content spacing */
body.home #hero.hero.section h1.hero-main-title {
    margin-bottom: 1.5rem !important;
}

body.home #hero.hero.section .hero-stats {
    margin-bottom: 1.5rem !important;
}

body.home #hero.hero.section h2.hero-title-paragraph {
    margin-bottom: 1.5rem !important;
}

body.home #hero.hero.section .hero-urgency {
    margin-top: 1rem !important;
}

/* 33. Ensure next section starts immediately after hero */
body.home #hero.hero.section + section {
    margin-top: 0 !important;
    padding-top: 3rem !important;
}


/* 34. Override excessive bottom margin in hero section */
body.home #hero.hero.section .mg-bottom-50 {
    margin-bottom: 0 !important;
}

/* 35. Adjust container padding in hero */
body.home #hero.hero.section .container {
    padding-bottom: 2rem !important;
}


/* 36. Hide old hero section completely */
.first-hero-section-hide {
    display: none !important;
}

/* 37. Fix white space issues - reduce section padding */
body.home section {
    padding: 3rem 0 !important;
}

body.home #hero.hero.section {
    padding: 0 !important;
}

/* 38. Reduce excessive spacing in client section */
body.home #clients {
    padding: 2rem 0 !important;
    margin-top: 0 !important;
}

/* 39. Fix statistics section styling */
body.home .metrics-section {
    padding: 3rem 0 !important;
    margin: 0 !important;
}

/* ========================================
   CLIENTS SECTION IMPROVEMENTS
   ======================================== */

/* 40. Client section styling */
#clients.client {
    background: #f8f9fa !important;
    padding: 2.5rem 0 !important;
}

/* 41. Client logos sizing and spacing */
#clients .client-logos .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#clients .client-logos img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

#clients .client-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* 42. Section heading improvements */
#clients h2.section-title-difference {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.5rem !important;
    text-align: center !important;
}

#clients p {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
}

/* 43. Mobile responsive for clients */
@media (max-width: 768px) {
    #clients h2.section-title-difference {
        font-size: 2rem !important;
    }
    
    #clients .client-logos img {
        max-height: 60px;
    }
}



/* ========================================
   FOOTER IMPROVEMENTS - Lighter & Modern
   Added: 2025-11-06
   ======================================== */

/* 44. Footer modern redesign - lighter colors */
#footer.footer {
    background: linear-gradient(135deg, #1a2332 0%, #2d3e50 100%) !important;
    position: relative;
    overflow: hidden;
    padding: 4rem 0 0 0;
}

/* 45. Interactive grid canvas background */
#footer-grid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 46. Ensure footer content is above canvas */
#footer .container {
    position: relative;
    z-index: 10;
}

/* 47. Lighter text colors for better readability */
#footer.footer .brand-description-title {
    color: #15AAAA !important;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

#footer.footer .brand-description {
    color: #b8c5d6 !important;
    line-height: 1.8;
    font-size: 0.95rem;
}

#footer.footer .footer-catalog {
    color: #15AAAA !important;
    font-weight: 600;
    font-size: 1rem;
}

#footer.footer .footer-menu-link a {
    color: #b8c5d6 !important;
    transition: all 0.3s ease;
    text-decoration: none;
}

#footer.footer .footer-menu-link a:hover {
    color: #15AAAA !important;
    padding-left: 5px;
}

#footer.footer strong {
    color: #fff !important;
}

#footer.footer p {
    color: #b8c5d6 !important;
    line-height: 1.6;
}

/* 48. Social icons improvement */
#footer .social-link {
    background: rgba(255, 255, 255, 0.1) !important;
    width: 45px;
    height: 45px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #b8c5d6 !important;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#footer .social-link:hover {
    background: #15AAAA !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(21, 170, 170, 0.4);
}

/* 49. Footer bottom bar */
.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem 0;
    margin-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom .copyright p {
    color: #b8c5d6 !important;
    margin: 0;
    font-size: 0.9rem;
}

.footer-bottom .legal-links a {
    color: #b8c5d6 !important;
    margin: 0 1rem;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-bottom .legal-links a:hover {
    color: #15AAAA !important;
}

.footer-bottom .sitename a {
    color: #15AAAA !important;
    font-weight: 600;
}

/* 50. Reduce clutter - better spacing */
#footer .contact-info {
    margin-top: 2rem !important;
}

#footer .footer-menu-link p {
    margin-bottom: 0.5rem;
}

#footer .mg-bottom-15 {
    margin-bottom: 1rem !important;
}

/* 51. Scroll to top button enhancement */
.scroll-top {
    background: #15AAAA !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(21, 170, 170, 0.4);
}

.scroll-top:hover {
    background: #128e8e !important;
    transform: translateY(-5px);
}

/* 52. Mobile responsive footer */
@media (max-width: 992px) {
    #footer.footer {
        padding: 3rem 0 0 0;
    }
    
    #footer .footer-main .row {
        text-align: center;
    }
    
    #footer .social-links {
        justify-content: center !important;
        margin-top: 2rem;
    }
}


/* 53. Declutter footer - reduce visual noise */
#footer .bi-circle-fill {
    font-size: 0.5rem;
    color: #15AAAA;
    margin-right: 0.5rem;
}

/* 54. Better grouping and spacing */
#footer .footer-main .row {
    gap: 2rem;
}

#footer .contact-item {
    margin-bottom: 1.5rem;
}

/* 55. Logo sizing in footer */
#footer .footer-logo-image {
    max-width: 200px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* 56. Simplify footer text hierarchy */
#footer .find-us-paragraph {
    font-size: 0.9rem;
    color: #a8b5c6 !important;
    line-height: 1.6;
}

/* 57. Add subtle glow effect to footer sections */
#footer .brand-section,
#footer .footer-nav-wrapper,
#footer .footer-social {
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}



/* ========================================
   FOOTER COMPLETE REDESIGN - Clean & Modern
   ======================================== */

/* Reset old footer styles */
.footer-redesigned {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
    position: relative;
    overflow: hidden;
    padding: 5rem 0 0 0 !important;
    color: #fff;
}

.footer-redesigned::before {
    display: none !important;
}

/* Grid canvas */
#footer-grid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
}

.footer-redesigned .container {
    position: relative;
    z-index: 10;
}

/* Footer Content Section */
.footer-content {
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer Widgets */
.footer-widget {
    margin-bottom: 2rem;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 1.5rem;
}

.footer-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
    max-width: 180px;
}

.footer-tagline {
    color: #15AAAA !important;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.footer-desc {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Footer Titles */
.footer-title {
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: #15AAAA;
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #15AAAA !important;
    padding-left: 8px;
}

/* Footer Contact Info */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-contact i {
    color: #15AAAA;
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: #15AAAA !important;
}

/* Social Icons */
.footer-social {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer-social .social-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social .social-icon:hover {
    background: #15AAAA;
    border-color: #15AAAA;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(21, 170, 170, 0.4);
}

/* Footer Bottom */
.footer-bottom {
    padding: 2rem 0;
    margin-top: 0;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.9rem;
    margin: 0;
}

.footer-bottom .evobe-link {
    color: #15AAAA !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-bottom .evobe-link:hover {
    color: #17c1c1 !important;
}

.footer-legal {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #15AAAA !important;
}

.footer-legal .separator {
    color: rgba(255, 255, 255, 0.3);
}

/* Scroll to Top */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: #15AAAA !important;
    color: #fff !important;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(21, 170, 170, 0.4);
}

.scroll-top.active {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: #128e8e !important;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(21, 170, 170, 0.6);
}

/* Responsive */
@media (max-width: 992px) {
    .footer-redesigned {
        padding: 4rem 0 0 0 !important;
    }
    
    .footer-widget {
        margin-bottom: 2.5rem;
    }
    
    .footer-bottom .row > div {
        text-align: center !important;
        margin-bottom: 1rem;
    }
    
    .footer-legal {
        justify-content: center !important;
    }
}

@media (max-width: 576px) {
    .footer-redesigned {
        padding: 3rem 0 0 0 !important;
    }
    
    .footer-bottom p {
        font-size: 0.85rem;
    }
    
    .footer-legal a {
        font-size: 0.85rem;
    }
}



/* CRITICAL: Override all previous footer backgrounds */
footer#footer.footer-redesigned {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
    background-color: #0f2027 !important;
}

footer#footer {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
}

/* Make sure the grid canvas is properly positioned */
footer#footer #footer-grid-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    opacity: 0.8 !important;
}

/* ========================================
   WHY CHOOSE SECTION - Benefit Cards
   ======================================== */

/* Benefit Cards */
.benefit-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 2.5rem 2rem;
    height: 100%;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(21, 170, 170, 0.1);
}

.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(21, 170, 170, 0.15);
    border-color: rgba(21, 170, 170, 0.3);
}

.benefit-icon {
    text-align: center;
    margin-bottom: 1.5rem;
}

.benefit-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.benefit-desc {
    color: #666;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-list li {
    margin-bottom: 0.75rem;
    color: #444;
    font-size: 0.95rem;
    padding-left: 1.5rem;
    position: relative;
}

.benefit-list li::before {
    content: '✓';
    color: #15AAAA;
    font-weight: 700;
    font-size: 1.1rem;
    position: absolute;
    left: 0;
}

/* CTA Box Hover Effects */
.btn-white-cta:hover {
    background: #f0f0f0 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

.btn-outline-cta:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: #fff !important;
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 992px) {
    .benefit-card {
        margin-bottom: 1.5rem;
    }
    
    .why-choose-cta {
        padding: 2rem !important;
    }
    
    .why-choose-cta h3 {
        font-size: 1.5rem !important;
    }
}


/* ========================================
   METRICS SECTION - Modern Redesign
   ======================================== */

/* Section styling */
.metrics-section-redesigned {
    position: relative;
    overflow: hidden;
}

/* Metric Cards */
.metric-card-new {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Animated gradient border effect */
.metric-card-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #15AAAA, #17c1c1, #15AAAA);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.metric-card-new:hover::before {
    opacity: 1;
}

.metric-card-new:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 20px 60px rgba(21, 170, 170, 0.2);
}

/* Icon styling */
.metric-icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #15AAAA 0%, #17c1c1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(21, 170, 170, 0.3);
    transition: all 0.4s ease;
}

.metric-card-new:hover .metric-icon-wrapper {
    transform: rotateY(360deg) scale(1.1);
    box-shadow: 0 8px 30px rgba(21, 170, 170, 0.5);
}

.metric-icon-wrapper i {
    font-size: 2rem;
    color: #ffffff;
}

/* Metric Value */
.metric-card-new .metric-value {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    line-height: 1;
    background: linear-gradient(135deg, #1a1a1a 0%, #15AAAA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Labels */
.metric-card-new .metric-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2d3e50;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.metric-card-new .metric-sublabel {
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
}

/* Pulse animation for metric values */
@keyframes pulse-glow {
    0%, 100% { 
        text-shadow: 0 0 0px rgba(21, 170, 170, 0);
    }
    50% { 
        text-shadow: 0 0 20px rgba(21, 170, 170, 0.3);
    }
}

.metric-card-new:hover .metric-value {
    animation: pulse-glow 2s infinite;
}

/* Responsive */
@media (max-width: 992px) {
    .metric-card-new {
        margin-bottom: 2rem;
    }
    
    .metric-value {
        font-size: 3rem !important;
    }
}

@media (max-width: 576px) {
    .metric-value {
        font-size: 2.5rem !important;
    }
    
    .metric-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .metric-icon-wrapper i {
        font-size: 2rem;
    }
}



/* ========================================
   MOBILE HERO OPTIMIZATION - Less Text Heavy
   ======================================== */

/* Mobile Hero Adjustments */
@media (max-width: 768px) {
    /* Shorter headline on mobile */
    body.home #hero.hero.section h1.hero-main-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Hide third social proof badge on mobile */
    body.home #hero.hero.section .hero-stats .stat-badge:nth-child(3) {
        display: none !important;
    }
    
    /* Make badges horizontal and smaller */
    body.home #hero.hero.section .hero-stats {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
        flex-wrap: wrap !important;
    }
    
    body.home #hero.hero.section .hero-stats .stat-badge {
        font-size: 0.75rem !important;
    }
    
    body.home #hero.hero.section .hero-stats .stat-badge i {
        font-size: 0.9rem !important;
    }
    
    /* Shorten paragraph on mobile */
    body.home #hero.hero.section h2.hero-title-paragraph {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Hide secondary CTA on mobile */
    body.home #hero.hero.section .btn-secondary-hero {
        display: none !important;
    }
    
    /* Make primary CTA full width and more prominent */
    body.home #hero.hero.section .hero-cta-buttons {
        display: block !important;
    }
    
    body.home #hero.hero.section .btn-primary-hero {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 1.25rem 2rem !important;
        font-size: 1.1rem !important;
    }
    
    /* Reduce hero container padding */
    body.home #hero.hero.section .container {
        padding-top: 90px !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Make hero section shorter on mobile */
    body.home #hero.hero.section {
        min-height: 75vh !important;
        height: 75vh !important;
    }
    
    body.home .hero-video-background {
        height: 75vh !important;
    }
    
    body.home .hero-video-background video {
        height: 75vh !important;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 576px) {
    body.home #hero.hero.section h1.hero-main-title {
        font-size: 1.5rem !important;
    }
    
    body.home #hero.hero.section .container {
        padding-top: 80px !important;
    }
    
    /* Stack badges vertically on very small screens */
    body.home #hero.hero.section .hero-stats {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    body.home #hero.hero.section .hero-stats .stat-badge {
        font-size: 0.7rem !important;
    }
}


/* Show/hide paragraph versions based on screen size */
@media (min-width: 769px) {
        display: none !important;
    }
        display: inline !important;
    }
}

@media (max-width: 768px) {
        display: none !important;
    }
        display: inline !important;
    }
}



/* ========================================
   AGGRESSIVE MOBILE HERO OPTIMIZATION
   ======================================== */

/* Hide social proof badges completely on mobile to reduce clutter */
@media (max-width: 768px) {
    body.home #hero.hero.section .hero-stats {
        display: none !important;
    }
    
    /* Hide long paragraph, show short one */
        display: none !important;
    }
    
        display: block !important;
        font-size: 0.95rem !important;
    }
    
    /* Make headline much more compact */
    body.home #hero.hero.section h1.hero-main-title {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Reduce paragraph font size */
    body.home #hero.hero.section h2.hero-title-paragraph {
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Hero section much shorter */
    body.home #hero.hero.section {
        min-height: 65vh !important;
        height: 65vh !important;
        display: flex !important;
        align-items: flex-start !important;
        padding-top: 0 !important;
    }
    
    body.home .hero-video-background {
        height: 65vh !important;
    }
    
    body.home .hero-video-background video {
        height: 65vh !important;
    }
    
    /* Reduce top padding dramatically */
    body.home #hero.hero.section .container {
        padding-top: 70px !important;
        padding-bottom: 1rem !important;
    }
    
    /* Make CTA visible without scroll */
    body.home #hero.hero.section .hero-cta-buttons {
        margin-top: 1.5rem !important;
    }
    
    body.home #hero.hero.section .btn-primary-hero {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
        padding: 1rem 1.5rem !important;
    }
    
    /* Hide secondary CTA */
    body.home #hero.hero.section .btn-secondary-hero {
        display: none !important;
    }
}

/* Extra small phones */
@media (max-width: 576px) {
    body.home #hero.hero.section h1.hero-main-title {
        font-size: 1.4rem !important;
    }
    
    body.home #hero.hero.section .container {
        padding-top: 65px !important;
    }
}



/* Default: Show desktop, hide mobile */
    display: inline !important;
}

    display: none !important;
}

/* On mobile: Hide desktop, show mobile */
@media (max-width: 768px) {
        display: none !important;
    }
    
        display: inline !important;
    }
}


/* CRITICAL: Use !important to override inline styles on mobile */
@media (max-width: 768px) {
    /* Hide ALL social proof badges on mobile */
    body.home #hero.hero.section .hero-stats {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Ensure badges div takes no space */
    body.home #hero.hero.section .hero-stats * {
        display: none !important;
    }
}

/* Ensure paragraph spans work correctly */
    display: inline;
}

@media (min-width: 769px) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 768px) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
    
        display: inline !important;
        visibility: visible !important;
    }
}

/* ========================================
   METRICS SECTION - Desktop & Mobile FIX
   ======================================== */

/* Override previous metrics styling - SIMPLIFIED */
.metric-card-new {
    background: #ffffff !important;
    border-radius: 15px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    position: relative;
}

.metric-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(21, 170, 170, 0.2);
    border-color: #15AAAA;
}

/* Icon - Simpler, always works */
.metric-icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.25rem;
    background: #15AAAA;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(21, 170, 170, 0.25);
}

.metric-icon-wrapper i {
    font-size: 2rem;
    color: #ffffff;
}

/* Metric Value - SOLID color, no gradient (more reliable) */
.metric-card-new .metric-value {
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: #15AAAA !important;
    margin-bottom: 0.75rem !important;
    line-height: 1 !important;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Labels - Clear hierarchy */
.metric-card-new .metric-label {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 0.25rem !important;
}

.metric-card-new .metric-sublabel {
    font-size: 0.85rem !important;
    color: #666 !important;
    font-weight: 400 !important;
}

/* Section background */
.metrics-section-redesigned {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    padding: 4rem 0 !important;
    margin: 3rem 0 !important;
}

/* ===== MOBILE OPTIMIZATION ===== */
@media (max-width: 992px) {
    .metrics-section-redesigned {
        padding: 3rem 0 !important;
        margin: 2rem 0 !important;
    }
    
    .metric-card-new {
        padding: 2rem 1.25rem !important;
        margin-bottom: 1.5rem;
    }
    
    .metric-icon-wrapper {
        width: 60px;
        height: 60px;
    }
    
    .metric-icon-wrapper i {
        font-size: 1.75rem;
    }
    
    .metric-card-new .metric-value {
        font-size: 2.5rem !important;
    }
    
    .metric-card-new .metric-label {
        font-size: 0.95rem !important;
    }
    
    .metric-card-new .metric-sublabel {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 576px) {
    .metric-card-new .metric-value {
        font-size: 2.25rem !important;
    }
    
    .metric-icon-wrapper {
        width: 55px;
        height: 55px;
    }
    
    .metric-icon-wrapper i {
        font-size: 1.5rem;
    }
}


/* ========================================
   FOOTER MOBILE OPTIMIZATION
   ======================================== */

/* Mobile Footer Improvements */
@media (max-width: 992px) {
    /* Increase padding for better spacing */
    .footer-redesigned {
        padding: 3rem 0 0 0 !important;
    }
    
    /* Better text visibility */
    .footer-redesigned .footer-desc,
    .footer-redesigned .footer-contact li,
    .footer-redesigned .footer-links a {
        font-size: 1rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Larger headings on mobile */
    .footer-title {
        font-size: 1.2rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Center align all footer content on mobile */
    .footer-redesigned .footer-widget {
        text-align: center;
        margin-bottom: 3rem;
    }
    
    /* Center logo */
    .footer-logo {
        text-align: center;
        display: block;
    }
    
    .footer-logo img {
        max-width: 160px !important;
    }
    
    /* Center social icons */
    .footer-social {
        justify-content: center !important;
        margin-top: 1.5rem !important;
    }
    
    .footer-social .social-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.3rem !important;
    }
    
    /* Better link visibility */
    .footer-links,
    .footer-contact {
        text-align: center;
    }
    
    /* Footer bottom - stack vertically */
    .footer-bottom {
        padding: 1.5rem 0 !important;
        text-align: center !important;
    }
    
    .footer-bottom p {
        font-size: 0.85rem !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-legal {
        justify-content: center !important;
        margin-top: 0.5rem;
    }
    
    .footer-legal a {
        font-size: 0.85rem !important;
    }
    
    /* Reduce grid canvas opacity on mobile for better text visibility */
    #footer-grid-canvas {
        opacity: 0.3 !important;
    }
}

/* Extra small mobile */
@media (max-width: 576px) {
    .footer-redesigned {
        padding: 2.5rem 0 0 0 !important;
    }
    
    .footer-widget {
        margin-bottom: 2.5rem !important;
    }
    
    .footer-title {
        font-size: 1.1rem !important;
    }
    
    .footer-desc,
    .footer-contact li {
        font-size: 0.9rem !important;
    }
    
    .footer-tagline {
        font-size: 0.95rem !important;
    }
    
    /* Make grid even lighter on small screens */
    #footer-grid-canvas {
        opacity: 0.2 !important;
    }
}



/* ========================================
   FINAL HERO PARAGRAPH VISIBILITY RULES
   (Overrides all previous rules)
   ======================================== */

/* Default: Desktop view */
.hero-para-desktop {
    display: inline !important;
    visibility: visible !important;
}

.hero-para-mobile {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Mobile view: Hide desktop, show mobile */
@media (max-width: 768px) {
    .hero-para-desktop {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    .hero-para-mobile {
        display: inline !important;
        visibility: visible !important;
        position: static !important;
        left: auto !important;
    }
}


/* ========================================
   TYPEWRITER ANIMATION STYLING
   ======================================== */

/* Typewriter location prefix */
.hero-location-prefix {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
}

.typewrite {
    text-decoration: none;
    cursor: default;
    display: inline-block;
    min-width: 250px;
}

.typewrite .wrap {
    display: inline-block;
    min-width: 200px;
    border-right: 0.08em solid #15AAAA;
    animation: blink-cursor 0.75s step-end infinite;
}

@keyframes blink-cursor {
    from, to { border-color: transparent; }
    50% { border-color: #15AAAA; }
}

/* Mobile adjustments for typewriter */
@media (max-width: 768px) {
    .hero-location-prefix {
        min-height: 2.5rem;
        margin-bottom: 0.5rem !important;
    }
    
    .typewrite {
        font-size: 1.75rem !important;
        min-width: 180px;
    }
    
    body.home #hero.hero.section h1.hero-main-title {
        font-size: 1.6rem !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 576px) {
    .typewrite {
        font-size: 1.5rem !important;
    }
    
    body.home #hero.hero.section h1.hero-main-title {
        font-size: 1.4rem !important;
    }
}


/* ========================================
   SUCCESS STORIES / CASE STUDIES SECTION FIX
   ======================================== */

/* Ensure card text is visible */
.case-study-card h3 {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.case-study-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%) !important;
    padding: 2rem !important;
    color: #fff !important;
}

.play-video-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border: 2px solid #ffffff !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 50px !important;
    transition: all 0.3s !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

.play-video-btn:hover {
    background: #15AAAA !important;
    border-color: #15AAAA !important;
    transform: scale(1.05);
}

.play-video-btn i {
    font-size: 1.2rem;
}

/* Card hover effect */
.case-study-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.case-study-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}

/* Carousel track */
.carousel-track {
    display: flex !important;
    gap: 2rem !important;
    overflow: hidden !important;
}

.case-study-card {
    flex: 0 0 calc(50% - 1rem) !important;
}

/* Navigation buttons - centered below */
.carousel-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-top: 2.5rem !important;
}

.carousel-nav-btn {
    background: rgba(255,255,255,0.1) !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

.carousel-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.2) !important;
    border-color: #fff !important;
    transform: scale(1.1) !important;
}

.carousel-nav-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Section heading visibility */
.case-studies-section h2 {
    color: #ffffff !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

.case-studies-section p {
    color: rgba(255,255,255,0.9) !important;
}

/* Mobile adjustments */
@media (max-width: 992px) {
    .case-study-card {
        flex: 0 0 100% !important;
    }
    
    .case-study-overlay {
        padding: 1.5rem !important;
    }
    
    .case-study-card h3 {
        font-size: 1.1rem !important;
    }
}