/* ========================================
   GLOBAL VARIABLES & ROOT STYLES
   ======================================== */
:root {
  --c-primary: #bcc6b8;
  --c-secondary: #3D403A;
  --c-accent: #F2EFE9;
  --bg-light: #f7f7f7;
  --bg-dark: #283128;
  --c-logo: #425233;
}

/* ========================================
   GENERAL BODY & TYPOGRAPHY
   ======================================== */
body {
  font-family: "Manrope", sans-serif;
  background: var(--bg-light);
  color: var(--c-secondary);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ========================================
   DARK MODE
   ======================================== */
body.dark {
  background: var(--bg-dark);
  color: #f1f5f9;
}

body.dark .text-on-dark {
  color: #f1f5f9 !important;
}

body.dark .text-muted-on-dark {
  color: #cbd5e1 !important;
}

body.dark .panel-dark {
  background: rgba(61, 64, 58, 0.40) !important;
}

body.dark .footer-dark {
  background: rgba(25, 26, 24, 0.50) !important;
}

/* ========================================
   COLOR HELPERS & BACKGROUND UTILITIES
   ======================================== */
.bg-accent-30 {
  background: rgba(242, 239, 233, 0.30);
}

.bg-accent-40 {
  background: rgba(242, 239, 233, 0.40);
}

.bg-secondary-20 {
  background: rgba(61, 64, 58, 0.20);
}

.bg-secondary-40 {
  background: rgba(61, 64, 58, 0.40);
}

/* ========================================
   BUTTON STYLES
   ======================================== */
.btn-primary-soft {
  --bs-btn-bg: var(--c-primary);
  --bs-btn-border-color: var(--c-primary);
  --bs-btn-color: var(--c-secondary);
  --bs-btn-hover-bg: rgba(188, 198, 184, 0.85);
  --bs-btn-hover-border-color: rgba(188, 198, 184, 0.85);
  --bs-btn-hover-color: var(--c-secondary);
  --bs-btn-font-weight: 700;
}

.btn-ghost {
  --bs-btn-bg: rgba(255, 255, 255, 0.10);
  --bs-btn-border-color: rgba(255, 255, 255, 0.30);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.20);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.30);
  --bs-btn-font-weight: 700;
  backdrop-filter: blur(10px);
}

/* ========================================
   CHIP & CARD STYLES
   ======================================== */
.chip-outline {
  border: 1px solid rgba(188, 198, 184, 0.20);
  background: rgba(61, 64, 58, 0.05);
  font-weight: 700;
}

/* ========================================
   HERO SLIDER
   ======================================== */
.slider-container {
  position: relative;
  overflow: hidden;
}

.slider-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider-image.active {
  opacity: 1;
  position: relative;
}

/* ========================================
   ROUNDED CORNER UTILITIES
   ======================================== */
.rounded-2xl {
  border-radius: 1rem !important;
}

.rounded-3xl {
  border-radius: 1.5rem !important;
}

.rounded-4xl {
  border-radius: 2rem !important;
}

/* ========================================
   HERO INDICATORS/DOTS
   ======================================== */
.hero-dot {
  width: 3rem;
  height: 0.375rem;
  border-radius: 999px;
}

/* ========================================
   NAVBAR STYLES
   ======================================== */
.navbar .nav-link {
  font-size: 0.88rem;
}

/* Slightly smaller navbar buttons */
.navbar .btn {
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
}

/* Optional: make Book button a bit more compact */
.navbar .btn-primary-soft {
  min-width: 120px;
}

.navbar-toggler-icon {
  filter: contrast(1.1);
}

/* Navbar links hover effect */
.navbar .nav-link:hover {
  color: var(--c-primary) !important;
}

@media (min-width: 1400px) {
  .navbar .dropdown > .dropdown-menu {
    display: block;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown > .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}
/* ========================================
   CAROUSEL INDICATORS OVERRIDE
   ======================================== */
.carousel-indicators [data-bs-target] {
  width: 50px;
  border-top: 1px solid rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}

/* ========================================
   CERTIFICATION BADGE RESPONSIVE
   ======================================== */
@media (max-width: 991px) {
  .about-badge {
    bottom: -40px !important;
    right: 0px !important;
    width: 90px !important;
    height: 90px !important;
  }
}
/* ========================================
   SERVICES
   ======================================== */
@media (min-width: 991px) {
  .img-services-single{
  height: 780px;
}
}

/* ========================================
   LOGO
   ======================================== */
.navbar-brand {
  white-space: normal;
}
.logo-header{
    color: var(--c-logo);
}
.logo-subheader {
  display: block;
  white-space: normal;
  color: rgba(22, 24, 21, 0.7)!important; 
}

   @media (min-width:801px) {
   .logo-header{
    font-size:1.6rem!important; 
    letter-spacing:-0.02em!important;
   }
   .logo-subheader{
    font-size:1rem!important; 
    line-height:1.2!important; 
    font-weight:600!important;
   }
  }
   @media (max-width:800px) {
.logo-header{
    font-size:1.2rem!important; 
    letter-spacing:-0.02em!important;
   }
   .logo-subheader{
    font-size:0.9rem!important; 
    line-height:1.3!important; 
    font-weight:600!important;
    overflow-wrap: break-word;
    max-width:300px;
   }
   }