/* style.css */

/*--------------------------------------------------------------
# Variables Definition
--------------------------------------------------------------*/
:root {
  /* Color Scheme - Neutral with Professional Accents */
  --primary-color: #0d6efd; /* Bootstrap Primary Blue - professional */
  --primary-color-dark: #0b5ed7; /* Darker shade for hover */
  --secondary-color: #6c757d; /* Bootstrap Secondary Grey - neutral */
  --accent-color: #ffc107; /* Bootstrap Warning Yellow - subtle accent */
  --neutral-light: #f8f9fa; /* Bootstrap Light Grey */
  --neutral-medium: #e9ecef; /* Lighter grey */
  --neutral-dark: #343a40; /* Bootstrap Dark Grey */
  --text-color: #495057; /* Dark grey for body text - Good contrast */
  --heading-color: #212529; /* Near black for headings - Strong contrast */
  --white-color: #ffffff;
  --black-color: #000000;
  --border-color: #dee2e6; /* Bootstrap border color */
  --success-color: #198754; /* Bootstrap Success Green */
  --info-color: #0dcaf0;    /* Bootstrap Info Cyan */
  --warning-color: #ffc107; /* Bootstrap Warning Yellow */
  --danger-color: #dc3545;  /* Bootstrap Danger Red */

  /* Backgrounds & Overlays */
  --background-light: var(--neutral-light);
  --background-dark: var(--neutral-dark);
  --background-overlay-dark: rgba(0, 0, 0, 0.5); /* Dark overlay for text on images */
  --background-overlay-gradient: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));

  /* Typography */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Merriweather', serif;
  --base-font-size: 1rem; /* 16px */
  --small-font-size: 0.9rem;
  --line-height-base: 1.7; /* Increased for readability */

  /* Styling */
  --border-radius: 0.375rem; /* Bootstrap default */
  --border-radius-lg: 0.5rem;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --transition-speed: 0.3s;
  --transition-easing: ease-in-out;
}

/*--------------------------------------------------------------
# Base Styles & Resets
--------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--base-font-size);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--white-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--heading-color);
  margin-top: 0;
  margin-bottom: 0.75rem; /* Consistent spacing */
  line-height: 1.3;
}

h1, .h1 { font-size: calc(1.375rem + 1.5vw); } /* Responsive h1 */
@media (min-width: 1200px) {
  h1, .h1 { font-size: 2.5rem; }
}
h2, .h2 { font-size: calc(1.3rem + 0.6vw); } /* Responsive h2 */
@media (min-width: 1200px) {
  h2, .h2 { font-size: 2rem; }
}
h3, .h3 { font-size: calc(1.275rem + 0.3vw); } /* Responsive h3 */
@media (min-width: 1200px) {
  h3, .h3 { font-size: 1.75rem; }
}
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

.section-title {
    color: var(--heading-color); /* Ensure high contrast */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

p {
  margin-bottom: 1rem;
  color: var(--text-color);
}

a {
  color: var(--primary-color);
  text-decoration: none; /* Remove default underline */
  transition: color var(--transition-speed) var(--transition-easing);
}

a:hover {
  color: var(--primary-color-dark);
  text-decoration: underline; /* Underline on hover for clarity */
}

/* Read More / Link styling */
.btn-link, .modern-link, .read-more-link {
    font-family: var(--font-primary);
    font-weight: 600;
    text-decoration: none;
    color: var(--primary-color);
    padding: 0.25rem 0; /* Minimal padding */
    transition: color var(--transition-speed) var(--transition-easing), background-color var(--transition-speed) var(--transition-easing);
    border-bottom: 2px solid transparent; /* Prepare for hover effect */
}

.btn-link:hover, .modern-link:hover, .read-more-link:hover {
    color: var(--primary-color-dark);
    text-decoration: none; /* No underline on hover if using border */
    border-bottom-color: var(--primary-color-dark); /* Underline effect */
}


/*--------------------------------------------------------------
# Layout & Containers
--------------------------------------------------------------*/
section {
  padding-top: 4rem; /* Reduced padding */
  padding-bottom: 4rem; /* Reduced padding */
  overflow: hidden; /* Contain elements */
}

.container, .container-fluid {
  padding-left: 1rem; /* Bootstrap default is 0.75rem, slightly more */
  padding-right: 1rem;
}

/* Asymmetrical Balance - Example using grid offset */
.asymmetric-row .col-lg-7 {
  /* Styles for the larger column */
}
.asymmetric-row .col-lg-5 {
  /* Styles for the smaller column, maybe pushed or offset */
}

/* Ensure columns have minimum width - handled by Bootstrap's col-* classes largely */
/* Add styles if specific overrides are needed */

/*--------------------------------------------------------------
# Header & Navigation
--------------------------------------------------------------*/
header {
  transition: background-color var(--transition-speed) var(--transition-easing);
  /* Assuming Bootstrap's 'sticky-top' handles positioning */
}

.navbar {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--heading-color) !important; /* Override Bootstrap */
}

.navbar-nav .nav-link {
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--secondary-color) !important; /* Neutral color */
  padding: 0.5rem 1rem;
  position: relative;
  transition: color var(--transition-speed) var(--transition-easing);
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    transition: width var(--transition-speed) var(--transition-easing);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { /* Assuming active class is added */
  color: var(--primary-color) !important;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 60%; /* Animate underline */
}

.navbar-toggler {
    border-color: rgba(0,0,0,0.1);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
  position: relative;
  color: var(--white-color);
  /* min-height is set inline, adjust if needed */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Parallax effect to be applied via JS using data-image-src */
}

.hero-section .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)); /* Darker gradient */
  z-index: 1;
}

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

.hero-section h1 {
  color: var(--white-color);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.hero-section p.lead {
  color: var(--white-color);
  opacity: 0.9;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
  max-width: 700px; /* Limit width */
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------------------------
# Global Button Styles
--------------------------------------------------------------*/
.btn, button, input[type='submit'], input[type='button'] {
  font-family: var(--font-primary);
  font-weight: 600;
  padding: 0.75rem 1.75rem; /* Generous padding */
  border-radius: var(--border-radius);
  transition: all var(--transition-speed) var(--transition-easing);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid transparent; /* Base border */
  box-shadow: var(--box-shadow-sm);
}

/* Primary Button */
.btn-primary, .modern-button {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}

.btn-primary:hover, .modern-button:hover {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
  color: var(--white-color);
  transform: translateY(-2px); /* Subtle lift */
  box-shadow: var(--box-shadow);
}

/* Outline Button */
.btn-outline-primary, .modern-button-outline {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-outline-primary:hover, .modern-button-outline:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Other Bootstrap Button Variants (Example) */
.btn-success { background-color: var(--success-color); border-color: var(--success-color); color: var(--white-color); }
.btn-success:hover { background-color: darken(var(--success-color), 10%); border-color: darken(var(--success-color), 10%); color: var(--white-color); transform: translateY(-2px); box-shadow: var(--box-shadow); }
/* Add similar styles for other button types as needed */

/* Button Sizes (Leverage Bootstrap classes .btn-lg, .btn-sm) */
.btn-lg {
    padding: 0.85rem 2rem;
    font-size: 1.1rem;
}

/*--------------------------------------------------------------
# Global Form Styles
--------------------------------------------------------------*/
.modern-form .form-label {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}

.modern-form .form-control, .modern-input {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
    font-family: var(--font-secondary);
    color: var(--text-color);
    background-color: var(--white-color); /* Ensure contrast */
}

.modern-form .form-control:focus, .modern-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25); /* Bootstrap focus style */
    outline: 0;
}

.modern-form textarea.form-control, .modern-input[type="textarea"] {
    min-height: 120px;
}

/*--------------------------------------------------------------
# Cards (Global & Modern)
--------------------------------------------------------------*/
.card, .modern-card {
  border: none; /* Remove default border */
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
  transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
  overflow: hidden; /* Ensure content stays within rounded corners */
  background-color: var(--white-color); /* Ensure contrast */
  display: flex;
  flex-direction: column;
  height: 100%; /* Make cards in a row equal height if using d-flex align-items-stretch */
}

.card:hover, .modern-card:hover {
  transform: translateY(-5px); /* Lift effect */
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

/* Card Image Container - STRICT Requirement */
.card .card-image,
.card .image-container {
    height: 220px; /* Fixed height */
    width: 100%;
    overflow: hidden; /* Hide parts of image that don't fit */
    display: flex; /* Use flex to center */
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    background-color: var(--neutral-medium); /* Placeholder bg */
}

/* Card Image - STRICT Requirement */
.card .card-image img,
.card .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, cropping as needed */
    object-position: center; /* Center the image within the container */
    display: block; /* Remove extra space below image */
    transition: transform var(--transition-speed) var(--transition-easing);
}

.card:hover .card-image img,
.card:hover .image-container img {
    transform: scale(1.05); /* Subtle zoom on hover */
}

/* Card Body/Content - STRICT Requirement */
.card .card-body,
.card .card-content { /* Added .card-content as per initial HTML structure request */
    padding: 1.5rem;
    flex-grow: 1; /* Allows body to fill remaining space */
    display: flex;
    flex-direction: column;
    text-align: center; /* Center text content */
}

.card .card-title {
    margin-bottom: 0.75rem;
    color: var(--heading-color);
}

.card .card-text {
    color: var(--text-color);
    margin-bottom: 1rem;
    flex-grow: 1; /* Pushes elements below it down */
    text-align: left; /* Override center align for paragraphs if needed */
}

.card .card-footer {
    background-color: var(--neutral-light);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1.5rem;
    text-align: center;
}

/* Testimonial Card Specifics */
.testimonial-card .card-image {
    height: 150px; /* Specific height for circular image */
    width: 150px;
    border-radius: 50%;
    margin: 1rem auto; /* Center horizontally */
    padding: 5px; /* Optional space around image */
    background-color: var(--white-color);
    box-shadow: var(--box-shadow-sm);
}

.testimonial-card .card-image img {
    border-radius: 50%; /* Ensure image inside is round */
}

.testimonial-card .blockquote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-color);
    text-align: center; /* Center the quote text */
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.testimonial-card .blockquote-footer {
    margin-top: 1rem;
    font-style: normal;
    text-align: center; /* Center the footer */
    color: var(--secondary-color);
}
.testimonial-card .blockquote-footer cite {
    font-weight: bold;
}

/* Media Card Specifics */
.media-card .card-body {
    text-align: left;
}
.media-card .card-title {
    margin-bottom: 0.5rem;
}
.media-card .card-text {
    margin-bottom: 1rem;
}

/*--------------------------------------------------------------
# Specific Sections
--------------------------------------------------------------*/

/* About Us Section */
#about .image-container img {
    border-radius: var(--border-radius-lg);
}

/* Services Section */
#services .progress {
    height: 10px;
    border-radius: 5px;
}

/* Research Section */
#research .image-container img {
    border-radius: var(--border-radius-lg);
}

/* Gallery Section - Carousel */
#gallery .carousel-inner {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
}
#gallery .carousel-item .image-container {
    position: relative;
    /* Height determined by image aspect ratio or fixed height if needed */
}
#gallery .carousel-item img {
  /* Ensure images fill the carousel */
  object-fit: cover;
}
#gallery .background-overlay-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 2rem 1rem 1rem 1rem; /* More padding at bottom */
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}
#gallery .carousel-caption h5 {
    font-family: var(--font-primary);
    color: var(--white-color);
    text-shadow: 1px 1px 3px var(--black-color);
}
#gallery .carousel-caption p {
    font-family: var(--font-secondary);
    color: var(--white-color);
    opacity: 0.9;
    margin-bottom: 0;
    text-shadow: 1px 1px 2px var(--black-color);
}
#gallery .carousel-control-prev-icon,
#gallery .carousel-control-next-icon {
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 1rem;
    background-size: 50% 50%;
}
#gallery .carousel-indicators button {
    background-color: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.2);
}
#gallery .carousel-indicators .active {
    background-color: var(--white-color);
}

/* Customer Stories Carousel */
#customer-stories .carousel-inner {
    /* Add padding if controls overlap content */
    padding-bottom: 40px; /* Space for controls */
}
#customer-stories .testimonial-card {
    box-shadow: none; /* Remove double shadow if inside carousel */
    border: 1px solid var(--border-color);
}
#customer-stories .carousel-control-prev,
#customer-stories .carousel-control-next {
    /* Position controls lower if needed */
    /* Example: */
    /* bottom: -10px; */
    /* top: auto; */
    width: auto; /* Adjust width */
}
#customer-stories .carousel-control-prev-icon,
#customer-stories .carousel-control-next-icon {
    filter: invert(1) grayscale(100) brightness(1.5); /* Make controls dark */
    background-color: transparent;
}


/* Community Section */
#community .image-container img {
    border-radius: var(--border-radius-lg);
}

/* External Resources */
#external-resources .list-group {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-sm);
}
.modern-list-item {
    border-color: var(--border-color);
    transition: background-color var(--transition-speed) var(--transition-easing), transform var(--transition-speed) var(--transition-easing);
    padding: 1.25rem 1.5rem; /* More padding */
}
.modern-list-item:hover {
    background-color: var(--neutral-medium);
    transform: translateX(5px);
    z-index: 2; /* Bring item above others */
}
.modern-list-item h5 {
    color: var(--primary-color); /* Make titles stand out */
    margin-bottom: 0.25rem;
}
.modern-list-item p {
    margin-bottom: 0;
    color: var(--text-color);
    font-size: var(--small-font-size);
}
.modern-list-item small {
    font-family: var(--font-primary);
    color: var(--secondary-color);
}


/* Contact Section */
#contact {
    background-color: var(--background-light); /* Light background */
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
  background-color: var(--background-dark);
  color: rgba(255, 255, 255, 0.7); /* Slightly muted white */
  padding-top: 3rem;
  padding-bottom: 1rem;
}

footer h5 {
  color: var(--white-color);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer ul li {
  margin-bottom: 0.5rem;
}

footer a.footer-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-easing);
  display: inline-block; /* Allows hover effect */
  position: relative;
}

footer a.footer-link:hover {
  color: var(--white-color);
  text-decoration: none;
}

/* Text-based Social Links */
footer .list-unstyled a.footer-link {
    /* Specific styles if needed, but defaults should work */
    font-weight: 500; /* Slightly bolder */
}

footer .text-muted {
  color: rgba(255, 255, 255, 0.5) !important; /* Override Bootstrap */
  font-size: var(--small-font-size);
}

/*--------------------------------------------------------------
# Page Specific Styles
--------------------------------------------------------------*/

/* Privacy & Terms Pages Content */
main.legal-page-content {
    padding-top: 100px; /* Add space below fixed header */
}
/* Adjust selector if using data-barba-namespace */
/* main[data-barba-namespace="privacy"] .container, */
/* main[data-barba-namespace="terms"] .container { */
/*   padding-top: 100px; */
/* } */

/* Success Page Content */
main.success-page-content .container {
    min-height: calc(100vh - 150px); /* Adjust based on header/footer height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/*--------------------------------------------------------------
# Animations & Transitions
--------------------------------------------------------------*/
/* Scroll Animation Hook */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px); /* Start slightly lower */
  transition: opacity 0.6s var(--transition-easing), transform 0.6s var(--transition-easing);
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Morphing examples (apply to specific elements) */
.morph-element {
  transition: all var(--transition-speed) cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Easing for bounce effect */
}
.morph-element:hover {
  border-radius: 50%; /* Morph shape */
  transform: scale(1.1); /* Morph size */
}

/* Parallax Hook (Basic placeholder - JS handles effect) */
[data-parallax="scroll"] {
  background-attachment: fixed; /* Basic fallback - JS should override */
}


/*--------------------------------------------------------------
# Utilities & Helpers
--------------------------------------------------------------*/
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background-overlay-dark);
  z-index: 1;
}

.background-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-overlay-gradient);
    z-index: 1;
}

/* Ensure high contrast for text */
.text-high-contrast {
    color: var(--heading-color); /* Use darkest text color */
}
.bg-dark .text-high-contrast,
footer .text-high-contrast {
    color: var(--white-color); /* Use lightest text color */
}

/*--------------------------------------------------------------
# Responsiveness
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--white-color); /* Background for mobile menu */
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
  }
  .navbar-nav .nav-link {
    padding: 0.75rem 0; /* Adjust padding for vertical layout */
    color: var(--heading-color) !important; /* Darker links in mobile menu */
  }
  .navbar-nav .nav-link::after {
      left: 0; /* Align underline to the left */
      transform: translateX(0);
      bottom: 5px; /* Adjust position */
  }
   .navbar-nav .nav-link:hover::after,
   .navbar-nav .nav-link.active::after {
      width: 30%; /* Shorter underline */
  }
  .hero-section h1 {
      font-size: calc(1.325rem + 0.9vw); /* Adjust size for mobile */
  }
  section {
      padding-top: 3rem;
      padding-bottom: 3rem;
  }
  .card .card-image, .card .image-container {
      height: 180px; /* Slightly smaller images on mobile */
  }
}

@media (max-width: 767.98px) {
    .testimonial-card .row > div[class^="col-"] {
        text-align: center; /* Center image column on mobile */
    }
    .testimonial-card .card-image {
        margin-bottom: 0; /* Remove bottom margin if needed */
    }
    footer .row > div[class^="col-"] {
        text-align: center; /* Center footer columns on mobile */
        margin-bottom: 1.5rem;
    }
    footer ul li {
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.8rem; }
  h2, .h2 { font-size: 1.6rem; }
  .btn, button, input[type='submit'], input[type='button'] {
      padding: 0.6rem 1.2rem; /* Smaller padding on smallest screens */
      font-size: 0.9rem;
  }
  .btn-lg {
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
  }
  .hero-section { min-height: 60vh; } /* Adjust hero height */
}


/* Cookie Popup Styles (Minimal) */
/* Styles moved to inline HTML as requested by prompt */