@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  /* Colors */
  --color-primary: #00b894;
  --color-secondary: #181818;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-lt-gray: #f6f5ed;
  /* Font */
  /* --font-primary: "Poppins", sans-serif; */

  /* --font-primary: "Source Sans 3", sans-serif; */

  --font-primary: "Jost", sans-serif;
  /* Font Weights */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  /* Font Sizes */
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-25: 25px;
  --fs-30: 30px;
  --fs-37: 37px;
  --fs-42: 42px;
  --fs-50: 50px;

  /* Line Heights */
  --lh-21: 21px;
  --lh-23: 23px;
  --lh-25: 25px;
  --lh-30: 30px;
  --lh-35: 35px;
  --lh-39: 39px;
  --lh-43: 43px;
  --lh-50: 50px;
  --lh-55: 55px;

  /* Spacing Scale */
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-50: 50px;
  --space-120: 120px;
  --space-80: 80px;
  --space-60: 60px;
}

/* ROOT VARIABLES - END */

/* ======================================================
   UTILITY CLASSES - START
====================================================== */

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-white {
  color: var(--color-white);
}

.text-black {
  color: var(--color-black);
}

.text-dark {
  color: var(--color-dark);
}

.color-primary {
  color: var(--color-primary);
}
.color-lt-gray {
  background-color: var(--color-lt-gray);
}
.color-white {
  color: var(--color-white);
}

.fw-400 {
  font-weight: var(--font-weight-400);
}

.fw-500 {
  font-weight: var(--font-weight-500);
}

.fw-600 {
  font-weight: var(--font-weight-600);
}

.fw-700 {
  font-weight: var(--font-weight-700);
}

.fs-15 {
  font-size: var(--fs-15);
}

.fs-16 {
  font-size: var(--fs-16);
}

.fs-18 {
  font-size: var(--fs-18);
}

.fs-20 {
  font-size: var(--fs-20);
}

.fs-25 {
  font-size: var(--fs-25);
}

.fs-37 {
  font-size: var(--fs-37);
}

.fs-50 {
  font-size: var(--fs-50);
}

.lh-21 {
  line-height: var(--lh-21);
}

.lh-23 {
  line-height: var(--lh-23);
}

.lh-25 {
  line-height: var(--lh-25);
}

.lh-30 {
  line-height: var(--lh-30);
}

.lh-39 {
  line-height: var(--lh-39);
}

.lh-43 {
  line-height: var(--lh-43);
}

.lh-50 {
  line-height: var(--lh-50);
}

.lh-55 {
  line-height: var(--lh-55);
}

/* Margin Top */
.mt-10 {
  margin-top: var(--space-10);
}

.mt-20 {
  margin-top: var(--space-20);
}

.mt-30 {
  margin-top: var(--space-30);
}

.mt-40 {
  margin-top: var(--space-40);
}

.mt-50 {
  margin-top: var(--space-50);
}

/* Margin Bottom */
.mb-10 {
  margin-bottom: var(--space-10);
}

.mb-20 {
  margin-bottom: var(--space-20);
}

.mb-30 {
  margin-bottom: var(--space-30);
}

.mb-40 {
  margin-bottom: var(--space-40);
}

.mb-50 {
  margin-bottom: var(--space-50);
}

/* Margin Top & Bottom */
.mtb-10 {
  margin: var(--space-10) 0;
}

.mtb-20 {
  margin: var(--space-20) 0;
}

.mtb-30 {
  margin: var(--space-30) 0;
}

.mtb-40 {
  margin: var(--space-40) 0;
}

.mtb-50 {
  margin: var(--space-50) 0;
}

/* Padding Top */
.pt-10 {
  padding-top: var(--space-10);
}

.pt-20 {
  padding-top: var(--space-20);
}

.pt-30 {
  padding-top: var(--space-30);
}

.pt-40 {
  padding-top: var(--space-40);
}

.pt-50 {
  padding-top: var(--space-50);
}

.pt-80 {
  padding-top: var(--space-80);
}

/* Padding Bottom */
.pb-10 {
  padding-bottom: var(--space-10);
}

.pb-20 {
  padding-bottom: var(--space-20);
}

.pb-30 {
  padding-bottom: var(--space-30);
}

.pb-40 {
  padding-bottom: var(--space-40);
}

.pb-50 {
  padding-bottom: var(--space-50);
}

.pb-80 {
  padding-bottom: var(--space-80);
}

/* Padding Top & Bottom */
.ptb-10 {
  padding: var(--space-10) 0;
}

.ptb-20 {
  padding: var(--space-20) 0;
}

.ptb-30 {
  padding: var(--space-30) 0;
}

.ptb-40 {
  padding: var(--space-40) 0;
}

.ptb-50 {
  padding: var(--space-50) 0;
}

.ptb-80 {
  padding: var(--space-80) 0;
}

/* Padding Top */
.padd-t120 {
  padding-top: var(--space-120);
}

/* Padding Bottom */
.padd-b120 {
  padding-bottom: var(--space-120);
}

/* Padding Top & Bottom */
.padd-tb120 {
  padding-top: var(--space-120);
  padding-bottom: var(--space-120);
}

/* UTILITY CLASSES - END */

/* ======================================================
   BASE TYPOGRAPHY - START
====================================================== */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-400);
  font-size: var(--fs-16);
}

p,
span,
a,
li,
input,
button {
  /* font-family: var(--font-primary); */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: var(--font-primary); */
  font-weight: var(--font-weight-500);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  margin: 10px 0;
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn,
.btn:hover,
.btn:focus,
.btn:active {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* BASE TYPOGRAPHY - END */

/* ======================================================
   BACKGROUND UTILITIES - START
====================================================== */
.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white);
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-dark {
  background-color: var(--color-black) !important;
  color: var(--color-white);
}

.bg-white {
  background-color: var(--color-white);
}

/* BACKGROUND UTILITIES - END */

/* ======================================================
   TEXT STYLES - START
====================================================== */

.p-default,
p {
  font-size: var(--fs-16);
  line-height: var(--lh-21);
}

.p-small {
  font-size: var(--fs-15);
  line-height: var(--lh-23);
}

h1 {
  /* font-weight: var(--font-weight-700); */
  font-size: var(--fs-50);
  line-height: var(--lh-55);
}

.h-xl {
  /* font-weight: var(--font-weight-700); */
  font-size: var(--fs-50);
  line-height: var(--lh-55);
}

h2 {
  /* font-weight: var(--font-weight-700); */
  font-size: var(--fs-37);
  line-height: var(--lh-39);
}

.h-lg {
  /* font-weight: var(--font-weight-700); */
  font-size: var(--fs-37);
  line-height: var(--lh-39);
}

h3 {
  /* font-weight: var(--font-weight-700); */
  font-size: var(--fs-25);
  line-height: var(--lh-30);
}

.h-md {
  /* font-weight: var(--font-weight-700); */
  font-size: var(--fs-25);
  line-height: var(--lh-30);
}

h4 {
  /* font-weight: var(--font-weight-700); */
  font-size: var(--fs-20);
  line-height: var(--lh-25);
}

.h-sm {
  /* font-weight: var(--font-weight-700); */
  font-size: var(--fs-20);
  line-height: var(--lh-25);
}

.h-xs {
  font-size: var(--fs-18);
  line-height: var(--lh-21);
}

h5 {
  font-size: var(--fs-16);
  line-height: var(--lh-21);
}

.letter-space-heading16 {
  letter-spacing: -1.6px;
}
.topbar-metal {
  background: var(--color-primary);
  padding: 15px 0;
}
.topbar-metal {
  background-color: var(--color-primary);
}

/* Ensure social link containers don't have default list padding */
.topbar-social-links-metal ul {
  padding-left: 0;
}

/* Optional hover state transitions for links */
.topbar-metal a {
  transition: opacity 0.2s ease-in-out;
}

.topbar-metal a:hover {
  opacity: 0.8;
}
.srb-mobile-sub ul li a {
  color: var(--color-black);
  font-weight: var(--font-weight-600);
}

.srb-btn-teal {
  background-color: var(--color-primary);
  border: none;
  transition: 0.3s ease;
}

.srb-btn-teal:hover {
  background-color: #00a892;
  color: #fff;
}

/* --- Desktop Styles --- */
@media (min-width: 992px) {
  .srb-dropdown-hover {
    position: relative;
  }

  .srb-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    list-style: none;
    padding: 10px 0;
    z-index: 1000;
    border-radius: 4px;
    border-top: 3px solid var(--srb-teal);
  }

  .srb-dropdown-menu li a {
    display: block;
    padding: 8px 20px;
    color: #333;
    text-decoration: none;
    transition: 0.2s;
  }

  .srb-dropdown-menu li a:hover {
    background-color: #f8f9fa;
    color: var(--color-primary);
  }

  .srb-dropdown-hover:hover > .srb-dropdown-menu {
    display: block;
    animation: srbFadeUp 0.3s ease forwards;
  }

  /* Nested Dropend */
  .srb-dropend {
    position: relative;
  }

  .srb-dropend:hover > .srb-dropdown-menu {
    display: block;
    left: 100%;
    top: -10px;
  }
}

/* --- Mobile Offcanvas Styles --- */
.srb-offcanvas {
  max-width: 80%;
  width: 320px;
}

.srb-toggle-trigger {
  cursor: pointer;
  transition: 0.3s;
}

.srb-toggle-trigger[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.srb-mobile-nav .nav-link {
  display: block;
}

/* --- Animations --- */
@keyframes srbFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.primary-btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-16);
  border-radius: 8px;
  padding: 10px 18px;
}

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

.secondry-btn {
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: var(--fs-16);
  border-radius: 8px;
  padding: 10px 18px;
}

.secondry-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Custom Styles for this section */
.syn-hero-section {
  background-color: #f9f8f4;
  /* Matching the image background */
}

.syn-btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 12px 24px;
}

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

.syn-btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
  padding: 12px 24px;
}

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

.swiper-container {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  /* Rounded corners for the slider container */
  overflow: hidden;
}

.swiper-slide {
  position: relative;
}

.swiper-slide img {
  width: 100%;
  height: 400px;
  display: block;
  object-fit: cover;
}

/* Image overlay for better visibility */
.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  /* Subtle black tint */
  pointer-events: none;
}

.services-section {
  /* Setting the background to your secondary color for contrast, 
       or keep it white based on your preference */
  background-color: var(--color-white);
}

.text-primary-custom {
  color: var(--color-primary) !important;
}

.service-card {
  background-color: #f7f6f6;
  border-radius: 10px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-secondary);
  display: block;
}

/* Hover Effects: Lift up and Shadow */
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  color: var(--color-primary);
  /* Optional: changes text color on hover */
}

.icon-box {
  text-align: center;
  width: 100%;
}

.services-section .icon-box i {
  font-size: 3rem;
  /* Using rem instead of px to stay within Bootstrap standards */
}

/* Custom Button using your primary color */
.btn-primary-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transition: all 0.3s ease;
}

.btn-primary-custom:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* Image Darkening Overlay */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  /* Subtle black tint */
  z-index: 1;
  pointer-events: none;
}

/* Swiper Customization */
.swiper-button-next,
.swiper-button-prev {
  color: var(--color-white);
  transform: scale(0.7);
}

/* Card Styling */
.feature-card {
  transition: all 0.4s ease;
  border: none;
  background-color: #f8f9fa;
  /* Light default background */
}
.syn-contact-card a {
  color: var(--color-white);
}
/* Overlay for image visibility */
.img-overlay-container {
  position: relative;
  overflow: hidden;
}

.img-overlay-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  /* Light black overlay for contrast */
}

/* Hover States */
.feature-card:hover {
  background-color: var(--color-white) !important;
  /* Slightly darker light background */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.feature-card:hover .card-title,
.feature-card:hover .card-text {
  color: var(--color-primary) !important;
}

.btn-primary-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transition: 0.3s;
}

.btn-primary-custom:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* Card Styling */
.feature-card {
  transition: all 0.4s ease;
  border: none;
  background-color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.btn-synergetic {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 50px;
  padding: 12px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
}

.btn-synergetic:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
  transform: translateY(-2px);
}

.text-primary-custom {
  color: var(--color-primary);
}

.feature-icon {
  color: var(--color-primary);
  margin-right: 10px;
}
/* Hover Effect */
.feature-card:hover {
  background-color: var(--color-white) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

/* Default Content */
.default-content {
  transition: 0.3s;
}

/* Hover Content */
.hover-content {
  position: absolute;
  inset: 0;
  padding: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.3s;
}

/* Toggle on hover */
.feature-card:hover .default-content {
  opacity: 0;
  transform: translateY(-20px);
}

.feature-card:hover .hover-content {
  opacity: 1;
  transform: translateY(0);
}

/* Colors on hover */
.feature-card:hover h5,
.feature-card:hover p {
  color: var(--color-black);
}

/* Section Background */
.services-section {
  /* background-color: var(--color-secondary); */
  color: var(--color-white);
}

/* Card Styling & Hover Effect */
.service-card {
  background-color: #f1f1f1;
  border: none;
  border-radius: 1rem;
  transition: transform 0.3s ease-in-out;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-title {
  color: var(--color-secondary);
}

/* Icon & Button accents */
.badge-category {
  background-color: var(--color-primary);
  /* From image_8fb3fe.jpg */
  color: var(--color-black);
}

.btn-arrow {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.service-card .btn-arrow {
  color: var(--color-white);
}

.text-primary-custom {
  color: var(--color-primary);
}

.bg-primary-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.bg-primary-custom:hover {
  background-color: var(--color-black);
}
.step-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
}

/* The "Little Up" Hover Effect */
.step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.icon-check {
  color: var(--color-primary);
  flex-shrink: 0;
}

.maintenance-section {
  background-color: var(--bg-color);
  padding: 80px 0;
}

.text-accent {
  color: var(--accent-color);
}

.text-custom-muted {
  color: var(--text-color);
}

.btn-custom-accent {
  background-color: #a124a1;
  /* Match the purple button in image */
  color: var(--secondary-color);
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  transition: opacity 0.3s;
}

.btn-custom-accent:hover {
  opacity: 0.9;
  color: var(--secondary-color);
}

.rounded-image {
  border-radius: 20px;
}

.floating-contact-buttons {
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 9999;
}
/* Page Section Wrapper */

/* Left Content Styles */
.contact-us-content-box .section-title h2 {
  color: var(--color-secondary);
  margin-bottom: 1.5rem;
}

.contact-us-content-box .section-title p {
  color: #777777;
  margin-bottom: 2.5rem;
}

/* Contact Details Info Items & Hover State */
.work-contact-box {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  text-decoration: none; /* In case the whole box is wrapped in an anchor */
}

/* Base Icon Box (Green Circle) */
.work-contact-box .icon-box {
  width: 50px;
  height: 50px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.work-contact-box-content p {
  margin: 0;
  color: #888888;
}
.work-contact-box-content a {
  color: var(--color-black);
}
/* Base Link/Text Color (Dark Secondary) */
.work-contact-box-content h3 {
  margin: 0;

  color: var(--color-secondary);
  transition: color 0.3s ease;
}

.work-contact-box-content h3 a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

/* --- Hover Effects --- */
/* When hovering over the list item container, change child elements */
.contact-us-item-list:hover .icon-box {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.contact-us-item-list:hover .work-contact-box-content h3,
.contact-us-item-list:hover .work-contact-box-content h3 a {
  color: var(--color-primary);
}

/* Right Content Form Card Container */
.contact-box-form {
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.contact-box-form .section-title h2 {
  color: var(--color-secondary);
  margin-bottom: 1rem;
}

.contact-box-form .section-title p {
  color: #777777;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

/* Input Form Controls Overrides */
.contact-form .form-control {
  background-color: #f6f5ed;
  border: none;
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  color: var(--color-secondary);
}

.contact-form .form-control::placeholder {
  color: #a0a0a0;
}

.contact-form .form-control:focus {
  background-color: var(--bg-input);
  box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.2);
  outline: none;
}

.contact-form textarea.form-control {
  resize: none;
}

.contact-form p {
  margin: 0;
}

/* Submit Action Button styling */
.contact-form .wpcf7-submit {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 30px;
  padding: 0.75rem 2.5rem;
  font-weight: 600;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.contact-form .wpcf7-submit:hover {
  background-color: #00a383;
}
/* Common Style */
.floating-contact-buttons a {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

/* Accordion Wrapper */
.faq-accordion-metal {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between each FAQ item */
}

/* Base Item Card */
.faq-accordion-metal .accordion-item {
  border: none;
  border-radius: 12px !important;
  background-color: var(--color-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Active State Card Background (Turns Primary Green) */
.faq-accordion-metal .accordion-item:has(.accordion-button:not(.collapsed)) {
  background-color: var(--color-primary);
}

/* Core Accordion Header Button */
.faq-accordion-metal .accordion-item .accordion-button {
  position: relative;
  background-color: transparent !important;
  color: var(--color-secondary);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  padding: 24px 80px 24px 24px; /* Right padding keeps text clear of the absolute icon block */
  box-shadow: none !important;
  width: 100%;
}

/* Text color transitions to white when item expands */
.faq-accordion-metal
  .accordion-item:has(.accordion-button:not(.collapsed))
  .accordion-button {
  color: var(--color-white);
}

/* ----------------------------------------------------
   YOUR CUSTOM PSEUDO-ELEMENTS CSS (Plus & Minus)
---------------------------------------------------- */

/* 1. Default Style: COLLAPSED STATE (Plus Icon) */
.faq-accordion-metal .accordion-item .accordion-button.collapsed::after {
  content: "\2b"; /* Font Awesome Plus */
  font-family: "Font Awesome 6 Free"; /* Updated to match FA 6.7.2 */
  font-weight: 900;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
  height: 40px;
  width: 40px;
  background-color: var(--color-primary); /* Primary Green Box */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary); /* Dark text color inside badge */
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

/* 2. Expanded Style: OPEN STATE (Minus Icon) */
.faq-accordion-metal .accordion-item .accordion-button:not(.collapsed)::after {
  content: "\f068"; /* Font Awesome Minus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 24px;
  height: 40px;
  width: 40px;
  background-color: var(--color-white); /* White box matching screenshot */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

/* ----------------------------------------------------
   Body Text Config
---------------------------------------------------- */
.faq-accordion-metal .accordion-body {
  padding: 0 24px 24px 24px;
  background-color: transparent;
}

.faq-accordion-metal .accordion-body p {
  margin: 0;
  font-size: 16px;
  line-height: 21px;
  color: #555555;
}

/* Changes paragraph text to white when active background is green */
.faq-accordion-metal
  .accordion-item:has(.accordion-button:not(.collapsed))
  .accordion-body
  p {
  color: var(--color-white);
}
/* Hover Effect */
.floating-contact-buttons a:hover {
  transform: translateY(-4px) scale(1.05);
  color: #fff;
}

/* Call Button */
.call-float {
  background: #007bff;
}

.call-float:hover {
  background: #0069d9;
}

/* WhatsApp Button */
.whatsapp-float {
  background: #25d366;
}

.whatsapp-float:hover {
  background: #20ba5a;
}

.syn-footer {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: 80px 0 30px;
}

/* Heading - Now White */
.syn-footer-heading {
  color: var(--color-white) !important;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}

.syn-footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: var(--color-primary);
}

/* List Hover Animation */
.syn-footer-links {
  list-style: none;
  padding: 0;
}

.syn-footer-links li {
  margin-bottom: 12px;
  transition: transform 0.3s ease;
  /* Animation property */
}

.syn-footer-links li:hover {
  transform: translateY(-5px);
  /* Moves list item up */
}

.syn-footer-links a {
  color: #b0b0b0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.syn-footer-links a:hover {
  color: var(--color-primary);
}

/* Contact Info Card Animation & Border */
.syn-contact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Added border */
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  /* Smooth transition */
}

.syn-contact-card:hover {
  transform: translateY(-8px);
  /* Lift effect */
  border-color: var(--color-primary);
  /* Highlight border on hover */
  background: rgba(255, 255, 255, 0.07);
}

.syn-icon-box {
  width: 35px;
  height: 35px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.syn-social-icon {
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

.syn-social-icon:hover {
  background: var(--color-primary);
  transform: scale(1.1);
}

/* Base Styles */
.hero-section {
  background-color: var(--color-secondary);
  min-height: 80vh;
}

.text-primary-color {
  color: var(--color-primary) !important;
}

/* Button Customization */
.btn-primary-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.btn-primary-custom:hover {
  background-color: #00a383;
  border-color: #00a383;
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 184, 148, 0.3);
}

/* Floating Icons */
.btn-whatsapp,
.btn-phone {
  width: 60px;
  height: 60px;
  color: white;
  text-decoration: none;
  transition: transform 0.3s ease;
}

/* Layout Enhancement */
.hero-section h1 {
  line-height: 1.2;
}

.reviews-badge i {
  font-size: 0.85rem;
}

.custom-contact-btn {
  border-radius: 50px;

  /* Strict sizing to keep both buttons identical */
  width: 220px;
  height: 54px;
  padding: 0;
  /* Handled by height + flex centering */

  font-weight: 500;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
  border: none;
  text-decoration: none;
}

/* WhatsApp Button (Using your primary color) */
.btn-whatsapp {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-whatsapp:hover {
  /* Subtle darken effect for hover state */
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 184, 148, 0.35);
}

/* Call Us Button (Using your secondary color) */
.btn-call {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-call:hover {
  /* Subtle lighten effect for the dark hover state */
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(24, 24, 24, 0.35);
}
* Section Main Styling */ .mission-vision-section {
  background-color: var(--color-white);
  overflow: hidden;
}

/* Interactive Cards */
.mv-card {
  background-color: var(--color-card-bg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.3s ease;
}

.mv-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 184, 148, 0.2);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.08),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Icon Design */
.mv-icon-wrapper {
  color: var(--color-primary);
  background-color: var(--color-white);
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.15);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.mv-card:hover .mv-icon-wrapper {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Text & Typography Fallbacks (No explicit sizes/families) */
.mv-title {
  color: var(--color-secondary);
  font-weight: 700;
}

.mv-text {
  color: var(--color-secondary);
  opacity: 0.85;
  line-height: 1.6;
}

/* Illustration tweaks */
.mv-illustration-container img {
  max-height: 450px;
  width: auto;
}
/* Section Main Container */
.ceo-message-section {
  background-color: var(--color-white);
}

/* Profile Image Enhancements */
.ceo-image-wrapper img {
  width: 260px;
  height: 260px;
  object-fit: cover;
  border: 6px solid var(--color-white);
  outline: 2px solid var(--color-primary);
  transition:
    transform 0.3s ease,
    cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Typography Accent Styles */
.ceo-name {
  color: var(--color-secondary);
}

.ceo-title {
  color: var(--color-primary);
  letter-spacing: 1.5px;
}

.ceo-quote-icon {
  color: var(--color-primary);
  font-size: 1.25rem;
}

.ceo-preheading {
  color: var(--color-primary);
  letter-spacing: 2px;
  font-size: 0.85rem;
}

.ceo-mission {
  color: var(--color-secondary);
}

/* Modern Text Highlight instead of heavy solid colors */
.ceo-highlight {
  color: var(--color-primary);
  position: relative;
  display: inline-block;
}

/* Bio Feature Card Layout */
.ceo-bio-card {
  background-color: #f9f9f9;
  border-left: 4px solid var(--color-primary);
  color: var(--color-secondary);
}

/* Letter tracking utilities */
.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.15em;
}

/* ================================
   CARD IMAGE WRAPPER
   - Holds image and overlay layers
   ================================ */
.card-img-top-container {
  position: relative;
  overflow: hidden;
  /* Ensures zoomed image doesn't overflow */
}

/* Dark overlay layer on top of image */
.card-img-top-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Semi-transparent black overlay */
  background-color: rgba(0, 0, 0, 0.5);

  z-index: 1;
  /* Above image but below text */
  transition: background-color 0.3s ease;
}

/* ================================
   TEXT OVERLAY (BOTTOM GRADIENT)
   Improves readability of text
   ================================ */
.bg-dark-overlay {
  background: linear-gradient(
    to top,
    rgba(24, 24, 24, 0.9) 0%,
    rgba(24, 24, 24, 0) 100%
  );

  transition: all 0.3s ease;
  z-index: 2;
  /* Above image overlay */
}

/* ================================
   CARD BASE STYLE
   ================================ */
.custom-card {
  transition: transform 0.3s ease;
  background-color: var(--color-secondary);
}

/* Hover lift effect */
.custom-card:hover {
  transform: translateY(-10px);
}

/* ================================
   HOVER EFFECTS FOR IMAGE OVERLAY
   ================================ */

/* Lighter overlay on hover */
.custom-card:hover .card-img-top-container::before {
  background-color: rgba(0, 0, 0, 0.3);
}

/* ================================
   CARD IMAGE STYLING
   ================================ */
.card-img-top {
  height: 280px;
  object-fit: cover;
  /* Keeps image ratio clean */
  transition: transform 0.5s ease;
  position: relative;
  z-index: 0;
  /* Base layer */
}

/* Zoom effect on hover */
.custom-card:hover .card-img-top {
  transform: scale(1.1);
}
/* Map CSS variables to Bootstrap overrides */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

/* Card Interaction Styling */
.custom-stat-card {
  transition: transform 0.3s ease-in-out;
  background-color: #f1f1f1;
}

.custom-stat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  color: var(--color-primary);
  /* Subtle teal glow */
}

/* Letter tracking utility for badge labels */
.tracking-wider {
  letter-spacing: 0.075em;
}
/* Custom Text Color Helper */
.text-secondary-custom {
  color: var(--color-secondary);
}

/* Card 3D Flip Container */
.custom-card-wrapper {
  background-color: transparent;
  height: 280px;
  perspective: 1000px;
}

.custom-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

/* Hover Action: Flips the card */
.custom-card-wrapper:hover .custom-card-inner {
  transform: rotateY(180deg);
}

/* Front & Back Base Design */
.custom-card-front,
.custom-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Front Face (Default State) */
.custom-card-front {
  background-color: var(--color-lt-gray);
  color: var(--color-secondary);
}

/* Icon Box Design */
.custom-card-front .icon-box {
  width: 80px;
  height: 80px;
  background-color: rgba(0, 184, 148, 0.1);
  color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: transform 0.4s ease;
}

.custom-card-wrapper:hover .icon-box {
  transform: scale(1.1);
}

/* Back Face (Hover State) */
.custom-card-back {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: rotateY(180deg);
}

.custom-card-back p {
  opacity: 0.9;
}
.service-card {
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  cursor: pointer;
  border: none;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.bg-purple {
  background-color: #00b894;
}

.text-purple {
  color: #00b894;
}
.video-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background-color: #1a1e36;
  /* Dark navy overlay color from image */
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 30, 54, 0.7);
  /* Tinted overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.play-icon {
  border: 3px solid white;
  border-radius: 50%;
  padding: 10px 15px;
  margin: 0 15px;
}

.octopus-logo-mini {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  opacity: 0.8;
  font-weight: bold;
}
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

/* Decorative Divider styling */
.brand-divider {
  width: 40px;
  height: 2px;
  background-color: var(--color-primary);
  display: inline-block;
}

/* Premium Brand Cards & Smooth Lift Animation */
.brand-card {
  height: 100px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  cursor: pointer;
}

/* Logo Image Styling with Subtle Grayscale Filter */
.brand-img {
  max-height: 45px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

/* Interactive Hover States */
.brand-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
  border-color: var(--color-primary);
}

.brand-card:hover .brand-img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Section Background */
.areas-section {
  background-color: var(--color-lt-gray);
  color: var(--color-secondary);
}

/* Section Title Highlight */
.text-primary-custom {
  color: var(--color-primary);
}

/* Modern Location Cards */
.area-card {
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.area-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Icon Styling */
.area-icon {
  color: var(--color-primary);
}
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

/* Container background similar to your reference but using your primary color tint */
.process-wrapper {
  background-color: rgba(0, 184, 148, 0.05);
  /* Very light primary tint */
}

.icon-boxs {
  color: var(--color-primary);
  font-size: 1.5rem;
  /* Using rem to respect browser defaults */
}

/* Hover Effect: Moves card up slightly */
.process-card {
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  padding: 15px;
  border-radius: 10px;
}

.process-card:hover {
  transform: translateY(-5px);
  background-color: var(--color-white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.text-primary-custom {
  color: var(--color-primary);
}

.bg-secondary-custom {
  background-color: var(--color-secondary);
}

.service-cards {
  border-left: 4px solid var(--color-primary);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  background: var(--color-white);
}

.service-cards:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.icon-boxss {
  color: var(--color-primary);
  width: 40px;
  display: inline-block;
}

.cta-section {
  border-top: 1px solid #eee;
  margin-top: 3rem;
  padding-top: 2rem;
}

.btn-synergetic {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.3s;
}

.btn-synergetic:hover {
  opacity: 0.9;
  color: var(--color-white);
}

/* Feature Card Hover Effect */
.benefit-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  border-radius: 8px;
  background-color: var(--color-white);
}

.benefit-card:hover {
  transform: translateY(-5px); /* Smooth lift effect */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Icon sizing using Font Awesome classes or simple ems */
.benefit-card i {
  font-size: 1.25rem;
}

/* Ensure text colors use your variables */
h2,
h5 {
  color: var(--color-secondary);
}
/* RESPONSIVE */
@media (max-width: 992px) {
  .pb-80 {
    padding-bottom: var(--space-60);
  }

  .pt-80 {
    padding-top: var(--space-60);
  }

  .ptb-80 {
    padding-top: var(--space-50);
    padding-bottom: var(--space-50);
  }

  .padd-t120 {
    padding-top: var(--space-80);
  }

  .padd-b120 {
    padding-bottom: var(--space-80);
  }

  .padd-tb120 {
    padding-top: var(--space-80);
    padding-bottom: var(--space-80);
  }

  h1,
  .h-xl {
    font-size: var(--fs-42);
    line-height: var(--lh-43);
  }

  h2,
  .h-md {
    font-size: var(--fs-25);
    line-height: var(--lh-30);
  }
}

@media (max-width: 768px) {
  h1,
  .h-xl {
    font-size: var(--fs-30);
    line-height: var(--lh-35);
  }

  h3,
  .h-md {
    font-size: var(--fs-20);
    line-height: var(--lh-25);
  }

  .pb-80 {
    padding-bottom: var(--space-50);
  }

  .pt-80 {
    padding-top: var(--space-50);
  }

  .ptb-80 {
    padding-top: var(--space-35);
    padding-bottom: var(--space-35);
  }
}