/* custom.css: Google Fonts variables and base styles */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Lora:wght@400;700&display=swap');

:root {
  --font-sans: 'Montserrat', sans-serif;
  /* --font-serif: 'Lora', serif; */
  /* --color-accent: #17a2b8; */
  /* --color-bg: #f8f9fa; */
  /* --color-text: #343a40; */
  --primary-color: #0A5B4C;
  --secondary-color: #7A9A59;
  --accent-color: #84A9C0;
  --background-color: #F0F1E9;
  --text-dark-color: #0A5B4C;
  --highlight-color: #84A9C0;
  --button-color: var(--highlight-color);
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}
.text-accent {
  color: var(--accent-color) !important;
}
.text-background {
  color: var(--background-color) !important;
}
.text-text-dark {
  color: var(--text-dark-color) !important;
}
.text-highlight {
  color: var(--highlight-color) !important;
}
.text-button {
  color: var(--button-color) !important;
}
.bg-primary {
  background-color: var(--primary-color) !important;
}
.bg-secondary {
  background-color: var(--secondary-color) !important;
}
.bg-accent {
  background-color: var(--accent-color) !important;
}
.bg-background {
  background-color: var(--background-color) !important;
}
.bg-text-dark {
  background-color: var(--text-dark-color) !important;
}
.bg-highlight {
  background-color: var(--highlight-color) !important;
}
.bg-button {
  background-color: var(--button-color) !important;
}
/* =============================== */
/*         Gradient Utilities      */
/* =============================== */

/* 🌊 Soft Background Gradient */
.bg-soft-gradient {
  background: linear-gradient(135deg, #F0F1E9, #84A9C0);
}

/* 🌊 Cool Accent Gradient */
.bg-cool-accent-gradient {
  background: linear-gradient(90deg, #0A5B4C, #84A9C0);
}

/* 🌿 Earthy Green Gradient */
.bg-earthy-green-gradient {
  background: linear-gradient(120deg, #0A5B4C, #7A9A59);
}

/* 🎨 Elegant Dark Accent Gradient */
.bg-elegant-dark-gradient {
  background: linear-gradient(45deg, #0A5B4C, #0A5B4C 40%, #84A9C0);
}

/* ☀️ Highlight Glow Gradient */
.bg-highlight-glow-gradient {
  background: radial-gradient(circle, #84A9C0, #F0F1E9);
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--primary-color);
}

/* Hero section background + overlay */
#index-hero-div {
  position: relative;
  height: 100vh;             /* full viewport height */
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("../img/hero-bg.jpg") center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* Hero section typography & button */
#index-hero-div .hero-title {
  color: #fff;
}

#index-hero-div .hero-subtitle {
  color: #fff;
}

/* Default theme button */
.btn-default {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-default:hover {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

/* Features section styling */
#features-section {
  padding: 4rem 0;
  background: #fff;
}
#features-section .card {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 320px;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  background-color: #fff;
  padding: 1.5rem;
}
#features-section .card .card-title {
  font-size: 1.5rem;
  color: var(--primary-color);
}
#features-section .card .card-text {
  font-size: 1rem;
  color: var(--secondary-color);
}
#features-section .card:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 4px;
}
#features-section .card .bs-icon svg {
  font-size: 2.5rem;
  transition: color 0.3s ease;
}
@media (max-width: 576px) {
  #features-section .card .card-title {
    font-size: 1.25rem;
  }
  #features-section .card .card-text {
    font-size: 0.9rem;
  }
  #features-section .card .bs-icon svg {
    font-size: 2rem;
  }
}
#features-section .card:focus,
#features-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
#features-section .card:active {
  transform: translateY(-2px) scale(0.98);
}
#features-section .card .bs-icon,
#features-section .card .card-title,
#features-section .card .card-text {
  transition: color 0.3s ease;
}
#features-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
#features-section .card .bs-icon {
  background-color: transparent !important;
}
#features-section .bs-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
}
#features-section .bs-icon i {
  font-size: 3rem;
}
@media (max-width: 768px) {
  #features-section .bs-icon {
    width: 6rem;
    height: 6rem;
  }
  #features-section .bs-icon i {
    font-size: 4rem;
  }
}

/* Features section icon colors by card */
#features-section .row .col:nth-child(1) .bs-icon {
  color: var(--primary-color);
}
#features-section .row .col:nth-child(2) .bs-icon {
  color: var(--accent-color);
}
#features-section .row .col:nth-child(3) .bs-icon {
  color: var(--secondary-color);
}

/* Features section text colors */
#features-section h2,
#features-section .card-title {
  color: var(--primary-color);
}

#features-section p,
#features-section .card-text {
  color: var(--secondary-color);
}

/* Services section visuals from features */
#services-section {
  padding: 4rem 0;
  background: #fff;
}
#services-section .card {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 320px;
}
#services-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
#services-section .card .bs-icon {
  background-color: transparent !important;
  color: var(--color-accent);
}
#services-section .bs-icon {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  #services-section .bs-icon {
    width: 6rem;
    height: 6rem;
  }
}
#services-section .card-body i {
  display: block;
  font-size: 3rem;
  color: var(--color-accent);
  margin: 0 auto 1rem;
  line-height: 5rem;
}
@media (max-width: 768px) {
  #services-section .card-body i {
    font-size: 4rem;
    line-height: 6rem;
  }
}

/* Services-section icon colors by card content */
#services-section .row .col:nth-child(1) .bs-icon i,
#services-section .row .col:nth-child(1) .bs-icon svg,
#services-section .row .col:nth-child(4) .bs-icon i,
#services-section .row .col:nth-child(4) .bs-icon svg {
  color: red !important;
}
#services-section .row .col:nth-child(2) .bs-icon i,
#services-section .row .col:nth-child(2) .bs-icon svg {
  color: var(--primary-color) !important;
}
#services-section .row .col:nth-child(3) .bs-icon i,
#services-section .row .col:nth-child(3) .bs-icon svg {
  color: var(--secondary-color) !important;
}

/* Extend icon colors for remaining service cards */
#services-section .row .col:nth-child(5) .bs-icon i,
#services-section .row .col:nth-child(5) .bs-icon svg {
  color: var(--accent-color) !important;
}
#services-section .row .col:nth-child(6) .bs-icon i,
#services-section .row .col:nth-child(6) .bs-icon svg {
  color: var(--primary-color) !important;
}

/* Services-section text colors */
#services-section .card-title {
  color: var(--primary-color);
}
#services-section .card-text {
  color: var(--secondary-color);
}

/* Services-hero dark theme override */
/* #services-hero {
  background-color: var(--primary-color) !important;
  color: var(--background-color) !important;
}
#services-hero .display-4,
#services-hero .lead {
  color: var(--background-color) !important;
} */

/* About-hero dark theme override */
/* #about-hero {
  background-color: var(--primary-color) !important;
  color: var(--background-color) !important;
}
#about-hero .display-4,
#about-hero .lead,
#about-hero a,
#about-hero p {
  color: var(--background-color) !important;
} */

/* About page text colors */
#about-features h2 {
  color: var(--primary-color);
}
#about-features p {
  color: var(--secondary-color);
}
#about-features li {
  color: var(--text-dark-color);
}
#about-features .bi-check-circle-fill {
  color: var(--primary-color) !important;
}

/* Contact section styling */
/* Contact section now uses a light gray background */
#contact-section {
  background-image: none;
  background-color: #f8f9fa;
  color: var(--color-text);
  padding: 4rem 0;
}
#contact-section h2 {
  color: var(--primary-color);
}
#contact-section .contact-info {
  text-align: center;
  margin-bottom: 2rem;
}
#contact-section .contact-info .bs-icon-md {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
}
/* Contact section text colors */
#contact-section h2 {
  color: var(--primary-color);
}
#contact-section p {
  color: var(--secondary-color);
}
#contact-section .contact-info h6,
#contact-section .contact-info p {
  color: var(--text-dark-color);
}
#contact-section .contact-form .form-control {
  border-radius: 0.5rem;
}

/* Contact-hero section override to match theme */
/* #contact-hero {
  background-color: var(--primary-color) !important;
  color: var(--background-color) !important;
}
#contact-hero .overlay {
  background: rgba(0, 0, 0, 0.5) !important;
}
#contact-hero .display-4,
#contact-hero .lead {
  color: var(--background-color) !important;
} */

/* Contact-form theme styling */
#contact-form h3 {
  color: var(--primary-color);
}
#contact-form .form-control {
  color: var(--text-dark-color);
  border-color: var(--secondary-color);
}

/* Navbar styling */
.navbar {
  background-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar .navbar-brand {
  color: var(--text-dark-color);
  font-weight: bold;
}

.navbar .nav-link {
  color: var(--text-dark-color);
  font-weight: bold;
}

.navbar .nav-link:hover {
  color: var(--accent-color);
}


/* Footer theme override */
/* .footer-dark {
  background-color: var(--background-color) !important;
  color: var(--text-dark-color) !important;

}
.footer-dark a,
.footer-dark h3,
.footer-dark h5,
.footer-dark p,
.footer-dark small {
  color: var(--text-dark-color) !important;
} */