/* style.css */

/* -------------------------------------------------------------------------- */
/*                                 VARIABLES                                  */
/* -------------------------------------------------------------------------- */
:root {
  /* Fonts */
  --font-family-headings: 'Oswald', sans-serif;
  --font-family-body: 'Nunito', sans-serif;

  /* Bright Retro Color Palette */
  --color-primary: #FF6B6B;      /* Coral Red */
  --color-primary-rgb: 255, 107, 107; /* For box-shadow */
  --color-primary-darker: #E05252;
  --color-secondary: #FFD700;    /* Bright Yellow/Gold */
  --color-secondary-darker: #E6C200;
  --color-accent1: #4ECDC4;      /* Teal */
  --color-accent1-darker: #3CAEA3;
  --color-accent2: #5E60CE;      /* Vibrant Blue/Purple */
  --color-accent2-darker: #4B4DAB;

  /* Text & Neutral Colors */
  --color-text-light: #FFFFFF;
  --color-text-dark: #333333;
  --color-text-medium: #555555;
  --color-text-headings: #222222;
  --color-background-body: #FDFDFD; /* Off-white for body */
  --color-background-light-section: #F8F9FA; /* Light grey for alternating sections */
  --color-background-dark-section: #2C3E50; /* Dark blue/grey for footer & header */
  --color-card-background: #FFFFFF;
  --color-border: #DEE2E6;
  --color-form-background: rgba(255, 255, 255, 0.95); /* Semi-transparent for hero form */
  --color-input-border: #CED4DA;
  --color-input-focus-border: var(--color-primary);
  --color-input-focus-shadow: rgba(var(--color-primary-rgb), 0.25);

  /* Gradients & Overlays */
  --gradient-hero-overlay: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
  --gradient-button-primary: linear-gradient(45deg, var(--color-primary), var(--color-accent2));
  --gradient-button-secondary: linear-gradient(45deg, var(--color-accent1), var(--color-secondary));


  /* UI Elements */
  --border-radius: 0.5rem; /* Standard border radius */
  --border-radius-large: 1rem; /* For larger elements like cards */
  --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
  --box-shadow-light: 0 2px 8px rgba(0,0,0,0.07);
  --header-height: 75px;
  --footer-height-approx: 300px; /* Approximate footer height for calculations */
  --transition-speed: 0.3s;
  --transition-timing-cubic: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Example non-linear "bouncy" */
  --transition-timing-ease: ease-in-out;
}

/* -------------------------------------------------------------------------- */
/*                               GLOBAL STYLES                                */
/* -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base font size for rem calculations */
}

body {
  font-family: var(--font-family-body);
  color: var(--color-text-dark);
  background-color: var(--color-background-body);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Adaptive Typography Base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-headings);
  color: var(--color-text-headings);
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1); /* Slightly more pronounced for retro */
}

h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); } /* Section titles */
h3 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h4 { font-size: clamp(1.5rem, 3vw, 2rem); }
h5 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); } /* Card titles, Footer headings */
h6 { font-size: clamp(1rem, 2vw, 1.5rem); }

p {
  margin-bottom: 1rem;
  font-size: clamp(1rem, 1.5vw, 1.1rem); /* Responsive body text */
  color: var(--color-text-medium);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-timing-ease);
}
a:hover {
  color: var(--color-primary-darker);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* General Section Styling */
section {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (min-width: 992px) {
  section {
    
    padding-bottom: 80px;
  }
}

.section-title {
  margin-bottom: 3rem; /* Default section title is h2 */
}

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

[style*="background-image"] { /* For inline background images */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Dark overlay for text on images - applied via HTML class */
.text-on-image-overlay {
    position: relative;
    color: var(--color-text-light); /* Default for text on overlay */
}
.text-on-image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-hero-overlay); /* Default overlay */
    z-index: 1;
}
.text-on-image-overlay > * { /* Content above overlay */
    position: relative;
    z-index: 2;
}


/* -------------------------------------------------------------------------- */
/*                                  HEADER                                    */
/* -------------------------------------------------------------------------- */
.header { /* Bootstrap .sticky-top is used in HTML */
  background-color: var(--color-background-dark-section) !important; /* Force dark bg */
  box-shadow: var(--box-shadow);
  height: var(--header-height);
  display: flex;
  align-items: center;
  z-index: 1030; /* Ensure it's above other content, Bootstrap's default for sticky */
}

.navbar-brand {
  font-size: 1.8rem !important; /* Ensure size */
  color: var(--color-text-light) !important;
}
.navbar-brand span {
  color: var(--color-secondary) !important;
}

.navbar-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0;
}

.navbar-nav .nav-link {
  font-family: var(--font-family-body);
  font-weight: 700;
  color: var(--color-text-light) !important;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem;
  border-radius: var(--border-radius);

  transition: background-color var(--transition-speed) var(--transition-timing-ease), color var(--transition-speed) var(--transition-timing-ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { /* Bootstrap uses .active for current page */
  color: var(--color-secondary) !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.navbar-toggler-icon { /* Custom SVG for better color control */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* -------------------------------------------------------------------------- */
/*                                HERO SECTION                                */
/* -------------------------------------------------------------------------- */
.hero-section {
  padding: 4rem 0; /* Let content define height */
  position: relative; /* For overlay if applied via CSS */
  /* Background image/overlay handled by inline style in HTML */
}
.hero-section .container { /* Content within hero */
  position: relative;
  z-index: 2;
}

.hero-title { /* Already color: #FFFFFF from HTML */
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.hero-subtitle { /* Already color: #FFFFFF from HTML */
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin-bottom: 2rem;
  line-height: 1.8;
}

.form-container-hero {
  background-color: var(--color-form-background);
  padding: 2rem;
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow-hover); /* More prominent shadow for hero form */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.form-container-hero .form-title { /* color: #333 from HTML */
  margin-bottom: 1.5rem;
}


/* -------------------------------------------------------------------------- */
/*                           BUTTON STYLES (GLOBAL)                           */
/* -------------------------------------------------------------------------- */
.btn { /* Base Bootstrap .btn overridden for consistency */
  font-family: var(--font-family-headings);
  font-weight: 700;
  padding: 0.8rem 1.8rem; /* Slightly larger padding */
  border-radius: var(--border-radius);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: all var(--transition-speed) var(--transition-timing-cubic); /* Non-linear */
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: var(--box-shadow-light);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.5; /* Ensure text is centered vertically */
}
.btn:hover {
  transform: translateY(-4px) scale(1.03); /* More pronounced retro hover */
  box-shadow: var(--box-shadow-hover);
}
.btn:focus, .btn:active {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--color-input-focus-shadow), var(--box-shadow-hover); /* Maintain hover shadow on active/focus */
}

/* Custom button variants */
.custom-btn, .btn-primary { /* Assuming .custom-btn is the primary CTA */
  background-image: var(--gradient-button-primary);
  background-color: var(--color-primary); /* Fallback */
  color: var(--color-text-light);
  border-color: transparent; /* Override Bootstrap's border for btn-primary */
}
.custom-btn:hover, .btn-primary:hover {
  background-image: none;
  background-color: var(--color-primary-darker);
  color: var(--color-text-light);
  border-color: transparent;
}

.custom-btn-secondary, .btn-secondary {
  background-image: var(--gradient-button-secondary);
  background-color: var(--color-secondary); /* Fallback */
  color: var(--color-text-dark); /* Good contrast with yellow */
  border-color: transparent; /* Override Bootstrap's border for btn-secondary */
}
.custom-btn-secondary:hover, .btn-secondary:hover {
  background-image: none;
  background-color: var(--color-secondary-darker);
  color: var(--color-text-dark);
  border-color: transparent;
}


/* -------------------------------------------------------------------------- */
/*                                 FORM STYLES                                */
/* -------------------------------------------------------------------------- */
.form-control {
  border-radius: var(--border-radius);
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-input-border);
  transition: border-color var(--transition-speed) var(--transition-timing-ease),
              box-shadow var(--transition-speed) var(--transition-timing-ease),
              transform var(--transition-speed) var(--transition-timing-cubic); /* Non-linear for focus */
  font-family: var(--font-family-body);
  background-color: #fff; /* Ensure forms are not transparent unless specified */
}
.form-control:focus {
  border-color: var(--color-input-focus-border);
  box-shadow: 0 0 0 0.2rem var(--color-input-focus-shadow);
  outline: none;
  transform: scale(1.02);
}
.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-text-medium);
}
textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* -------------------------------------------------------------------------- */
/*                                CARD STYLES                                 */
/* -------------------------------------------------------------------------- */
.card {
  border: none;
  border-radius: var(--border-radius-large); /* More rounded for retro */
  box-shadow: var(--box-shadow);
  transition: transform var(--transition-speed) var(--transition-timing-cubic), box-shadow var(--transition-speed) var(--transition-timing-ease);
  overflow: hidden;
  background-color: var(--color-card-background);
  display: flex;
  flex-direction: column;
  align-items: center; /* Center image horizontally in card */
  height: 100%; /* For Bootstrap .h-100 to work on parent col */
}
.card:hover {
  transform: translateY(-6px) scale(1.03) rotate(-1deg); /* Retro hover */
  box-shadow: var(--box-shadow-hover);
}

.card .card-image { /* Wrapper for image in card */
  width: 100%;
  height: 230px; /* Fixed height for consistent card image appearance */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .card-image img, .card img.card-img-top { /* Target image directly or BS class */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s var(--transition-timing-ease);
}
.card:hover .card-image img, .card:hover img.card-img-top {
  transform: scale(1.1) rotate(2deg); /* Zoom and slight rotate on image hover */
}

.card-body {
  padding: 1.5rem;
  text-align: center; /* Center text content in card */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow body to take available space */
}
.card-title { /* Font family and color from global h5 */
  margin-bottom: 0.75rem;
  font-size: 1.6rem; /* Slightly larger card titles */
}
.card-text { /* Color from global p */
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1; /* Pushes button (if any) to bottom */
  margin-bottom: 1rem;
}
.card .btn { /* Button inside card */
  margin-top: auto; /* Aligns button to the bottom */
}

/* Testimonial Card Specifics */
.testimonial-card {
  background-color: var(--color-background-light-section);
  padding: 2rem;
}
.testimonial-card img.rounded-circle { /* Profile image */
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-left: auto; /* Center image if text-align:center on parent */
  margin-right: auto;
  margin-bottom: 1.5rem;
  border: 5px solid var(--color-secondary); /* Bright border */
  box-shadow: var(--box-shadow);
}
.testimonial-card .card-text {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text-dark);
}

/* Resource Card Specifics */
.resource-card .card-body { /* Override general card text-align if needed */
    text-align: left;
}
.resource-card .card-title {
    font-size: 1.3rem; /* Slightly smaller for resource titles */
}
.resource-card .card-title a.resource-link {
  color: var(--color-accent2);
  font-weight: 700;
}
.resource-card .card-title a.resource-link:hover {
  color: var(--color-accent2-darker);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/*                             SPECIFIC SECTIONS                              */
/* -------------------------------------------------------------------------- */

/* Images in History, Sustainability, Contact sections */
#history img, #sustainability img, #contact .image-container img {
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow);
    transition: transform var(--transition-speed) var(--transition-timing-cubic), box-shadow var(--transition-speed) var(--transition-timing-ease);
}
#history img:hover, #sustainability img:hover, #contact .image-container img:hover {
    transform: scale(1.05) rotate(1deg);
    box-shadow: var(--box-shadow-hover);
}

/* Testimonials Carousel (Bootstrap overrides) */
#testimonialSlider .carousel-indicators button {
  background-color: var(--color-secondary);
  opacity: 0.6;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 6px;
  border: none;
  transition: opacity var(--transition-speed) var(--transition-timing-ease);
}
#testimonialSlider .carousel-indicators button.active {
  background-color: var(--color-primary);
  opacity: 1;
}
#testimonialSlider .carousel-control-prev-icon,
#testimonialSlider .carousel-control-next-icon {
  background-color: rgba(0,0,0,0.5); /* Darker, more visible controls */
  border-radius: 50%;
  padding: 1.5rem; /* Larger hit area */
  background-size: 50% 50%; /* Ensure icon inside is not too large */
}
#testimonialSlider .carousel-control-prev,
#testimonialSlider .carousel-control-next {
    width: auto; /* Let padding define width */
    opacity: 0.8;
    transition: opacity var(--transition-speed) var(--transition-timing-ease);
}
#testimonialSlider .carousel-control-prev:hover,
#testimonialSlider .carousel-control-next:hover {
    opacity: 1;
}

/* "Read More" Link Style */
.read-more-link {
    font-weight: 700;
    color: var(--color-accent1);
    display: inline-block;
    margin-top: 0.5rem;
    transition: letter-spacing var(--transition-speed) var(--transition-timing-ease), color var(--transition-speed) var(--transition-timing-ease);
    font-family: var(--font-family-headings);
}
.read-more-link:hover {
    color: var(--color-accent1-darker);
    text-decoration: none; /* No underline, rely on color and arrow */
    letter-spacing: 0.8px;
}
.read-more-link::after {
    content: " \00BB"; /* Right-pointing double angle quotation mark */
    display: inline-block;
    transition: transform var(--transition-speed) var(--transition-timing-cubic);
}
.read-more-link:hover::after {
    transform: translateX(4px);
}

/* -------------------------------------------------------------------------- */
/*                                   FOOTER                                   */
/* -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-background-dark-section);
  color: var(--color-text-light);
  padding: 4rem 0 2rem;
}
.footer h5 { /* Font family, color already from global h5 */
  margin-bottom: 1.5rem;
  font-size: 1.5rem; /* Ensure size */
}
.footer h5 span { /* For the brand highlight in footer */
  color: var(--color-secondary);
}
.footer p {
  color: rgba(255, 255, 255, 0.75); /* Lighter than body text on dark */
  font-size: 0.95rem;
}
.footer .footer-links li a,
.footer .footer-social-links li a {
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition-speed) var(--transition-timing-ease), padding-left var(--transition-speed) var(--transition-timing-ease);
  display: inline-block;
  padding: 0.35rem 0; /* More vertical space for links */
  font-family: var(--font-family-body);
  font-weight: 500;
}
.footer .footer-links li a:hover,
.footer .footer-social-links li a:hover {
  color: var(--color-secondary); /* Bright hover for links */
  padding-left: 8px; /* Fun retro movement */
}
.footer .footer-social-links li { /* For text-based social links */
    margin-bottom: 0.6rem;
}
.footer .footer-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Subtler divider */
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}
.footer .list-unstyled {
  padding-left: 0;
  list-style: none;
}
.footer .text-center p { /* Copyright text */
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

/* -------------------------------------------------------------------------- */
/*                     SUCCESS, PRIVACY, TERMS PAGES                        */
/* -------------------------------------------------------------------------- */
.success-page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
  background-color: var(--color-background-light-section);
}
.success-page-container h1 {
  color: var(--color-accent1);
  margin-bottom: 1.5rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
}
.success-page-container p {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  margin-bottom: 2.5rem;
  max-width: 600px; /* Constrain paragraph width */
}

/* For Privacy and Terms pages */
.text-content-page-container { /* Common wrapper for privacy/terms */

  padding-bottom: 60px;
  min-height: calc(100vh - var(--header-height) - var(--footer-height-approx)); /* Fill space */
}

.text-content-page-container h1.page-main-title { /* A dedicated class for the main page title */
  margin-bottom: 2.5rem;
  color: var(--color-primary);
  text-align: center;
}
.text-content-page-container h2 { /* Subheadings within content */
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-accent2);
  font-size: clamp(1.8rem, 3vw, 2.2rem);
}
.text-content-page-container h3 {
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  color: var(--color-text-headings);
  font-size: clamp(1.5rem, 2.5vw, 1.8rem);
}
.text-content-page-container p,
.text-content-page-container li {
    color: var(--color-text-dark); /* Ensure good contrast */
    line-height: 1.8;
    font-size: clamp(1rem, 1.5vw, 1.05rem);
}
.text-content-page-container ul,
.text-content-page-container ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.text-content-page-container a {
    font-weight: 600; /* Make links in text stand out */
}

/* -------------------------------------------------------------------------- */
/*                                 ANIMATIONS                                 */
/* -------------------------------------------------------------------------- */
/* AOS default override for non-linear feel if desired */
[data-aos] {
  /* Example: Add a slight rotation or skew to AOS animations */
  /* transition-timing-function: var(--transition-timing-cubic) !important; */
}
/* Example: Customizing a specific AOS animation */
[data-aos="zoom-in-up"] {
    transition-property: transform, opacity;
    /* transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* easeOutBack */
}

/* Microinteractions for non-AOS elements (like general links or icons if any) */
.icon-hover-effect {
    display: inline-block;
    transition: transform var(--transition-speed) var(--transition-timing-cubic);
}
.icon-hover-effect:hover {
    transform: scale(1.2) rotate(10deg);
}

/* -------------------------------------------------------------------------- */
/*                              RESPONSIVE DESIGN                             */
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) { /* Tablets and smaller */
  .hero-section {
    text-align: center; /* Center hero content */
  }
  .hero-section .text-lg-start { /* Override Bootstrap's text-lg-start */
    text-align: center !important;
  }
  .form-container-hero {
    margin-top: 3rem; /* More space on smaller screens */
  }
  .navbar-collapse { /* Mobile menu background */
    background-color: var(--color-background-dark-section);
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
  }
  .navbar-nav .nav-link {
    margin: 0.5rem 0;
    padding: 0.8rem 1rem !important; /* Larger touch targets */
    display: block;
    text-align: center;
  }
}

@media (max-width: 767.98px) { /* Small devices (landscape phones) */
  h1 { font-size: clamp(2.2rem, 6vw, 2.8rem); }
  h2 { font-size: clamp(1.8rem, 5vw, 2.2rem); }
  .section-title { margin-bottom: 2.5rem; }
  section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .footer { text-align: center; } /* Center footer content */
  .footer .col-md-4 { margin-bottom: 2.5rem; } /* Space between footer columns */

  /* Stack columns in certain sections if not handled by Bootstrap's col-* classes */
  #history .row, #sustainability .row, #contact .row {
    flex-direction: column;
  }
  #history .row > div, #sustainability .row > div, #contact .row > div {
    margin-bottom: 2rem; /* Space between stacked elements */
    text-align: center; /* Center stacked content */
  }
  #history .row > div:last-child, #sustainability .row > div:last-child, #contact .row > div:last-child {
    margin-bottom: 0;
  }
  #contact .image-container img {
    margin-left: auto;
    margin-right: auto;
  }
  .navbar {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 575.98px) { /* Extra small devices (portrait phones) */
  .hero-title { font-size: clamp(2rem, 7vw, 2.5rem); }
  .hero-subtitle { font-size: clamp(1rem, 4vw, 1.1rem); }
  .btn { padding: 0.7rem 1.4rem; font-size: 0.9rem; }
  .form-container-hero { padding: 1.5rem; }
  .card .card-image { height: 200px; } /* Slightly smaller card images */
  .card-title { font-size: 1.4rem; }
}