/* Author: Ricardo
Date: November 17, 2025
File: styles.css */

/* -------------------- RESET Removes outer margin -------------------- */
body, header, nav, main, footer, img, h1, h2, h3 {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;/* -Includes border and padding in total size- */
}

/* -------------------- BASE fondo background -------------------- */
body {
  background-color: #f6eee4;       /* Light beige background */
  font-family: Verdana, Arial, sans-serif; /* Clean, readable fonts */
  line-height: 1.6;                /* Comfortable text spacing */
  color: #2a1f14;                  /* Dark brown text */
  scroll-behavior: smooth;         /* Smooth scrolling effect */
}

img {
  max-width: 100%;                 /* Responsive images */
  display: block;                  /* Removes inline spacing below images */
}


/* -------------------- NAV, menu nav -------------------- */

/* Styles for the <nav> container */
nav {
  background-color: #2a1f14;       /* Dark brown background for branding */
  position: sticky;                /* Keeps the nav bar fixed at the top while scrolling */
  top: 0;                          /* Anchors the sticky nav to the top edge */
  z-index: 100;                    /* Ensures the nav stays above other elements */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds subtle shadow for depth */
}

/* Styles for the unordered list inside <nav> */
nav ul {
  list-style-type: none;          /* Removes default bullet points */
  margin: 0;                      /* Eliminates default margin */
  text-align: center;             /* Centers the list items horizontally */
  display: flex;                  /* Uses Flexbox for horizontal layout */
  justify-content: center;       /* Centers the items within the flex container */
  flex-wrap: wrap;               /* Allows items to wrap on smaller screens */
  align-items: center;           /* Vertically aligns items in the nav bar */
}

/* Styles for each list item <li> inside the nav */
nav li {
  display: inline-block;         /* Makes each item appear side-by-side */
  font-size: 1.2em;              /* Slightly larger text for readability */
  font-family: Geneva, Arial, sans-serif; /* Clean, professional fonts */
  font-weight: bold;            /* Emphasizes the menu text */
  margin: 0 10px;               /* Adds spacing between items */
}

/* Styles for each link <a> inside the list items */
nav li a {
  display: block;               /* Makes the entire link area clickable */
  color: #f6eee4;               /* Light beige text color for contrast */
  padding: 0.5em 2em;           /* Adds space around the text */
  text-decoration: none;        /* Removes underline from links */
  transition: all 0.3s ease;    /* Smooth transition for hover effects */
}

/* Styles for hover and active states of the links  (cambia el color del menu al deslizarse en la pag.*/
nav li a:hover,
nav li a.active {
  background-color: #f6eee4;    /* Light background when hovered or active */
  color: #2a1f14;               /* Dark text for contrast */
}



/* -------------------- NAV LOGO  logo of menu bar -------------------- */

/* Styles for the logo image inside a container with class .nav-logo */
.nav-logo img {
  height: 50px;                   /* Sets the logo height to 50 pixels */
  width: auto;                    /* Maintains the image’s original aspect ratio */
  display: block;                 /* Removes bottom spacing caused by inline images */
  border-radius: 8px;             /* Rounds the corners of the logo */
  cursor: pointer;               /* Changes cursor to pointer on hover (indicates it's clickable) */
  transition: transform 0.3s ease; /* Smooth animation when scaling the logo */
}

/* Hover effect for the logo image */
.nav-logo img:hover {
  transform: scale(1.05);         /* Slightly enlarges the logo on hover */
}




/* -------------------- HERO SECTION, (main page) -------------------- */

/* Container for the hero image and text overlay */
.hero-container {
  position: relative;           /* Allows absolute positioning of the text inside */
  text-align: center;           /* Centers the text horizontally */
}

/* Hero image: full width and responsive */
.hero-container img {
  width: 100%;                  /* Makes the image span the full container width */
  height: auto;                 /* Maintains the image’s aspect ratio */
}

/* Text overlay positioned over the image  text (palabra Santa anita pallets en HOME)*/
.hero-text {
  position: absolute;           /* Allows precise placement over the image */
  top: 30%;                     /* Pushes the text down from the top */
  left: 50%;                    /* Centers horizontally */
  transform: translate(-50%, -50%); /* Perfect centering using transform */
  font-family: Geneva, Arial, sans-serif; /* Clean, modern font */
  font-size: 2.8em;             /* Large, bold text */
  font-weight: bold;
  color: #f6eee4;               /* Light beige text for contrast */
  background: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */
  padding: 20px 40px;           /* Adds space around the text */
  border-radius: 15px;          /* Rounded corners for a soft look */
  backdrop-filter: blur(6px);   /* Adds a frosted glass effect */
  text-shadow: 0 0 10px #2a1f14, 0 0 20px #2a1f14; /* Glowing text shadow */
  transition: all 0.3s ease;    /* Smooth hover animation */
}

/* Hover effect: darkens background and slightly enlarges text (palabra Santa anita pallets en HOME) */
.hero-text:hover {
  background: rgba(0, 0, 0, 0.6); /* Darker background on hover */
  transform: translate(-50%, -50%) scale(1.05); /* Slight zoom effect */
}



/* -------------------- HEADINGS ( 3 diferents head)-------------------- */

/* Main title (usually page or section title) */
h1 {
  font-size: 2.2em;              /* Large font size for prominence */
  text-align: center;            /* Centers the heading horizontally */
  margin-bottom: 3.5em;          /* Adds space below to separate from content */
}

/* Section title */
h2 {
  font-size: 1.6em;              /* Medium font size for subheadings */
  color: #2a1f14;                /* Dark brown text for contrast */
  font-weight: bold;            /* Emphasizes the heading */
  margin: 3em 0 1em;             /* Top and bottom spacing for clarity */
  transition: all 0.3s ease;     /* Smooth animation on hover */
}

/* Hover effect for h2 */
h2:hover {
  color: #b36b2c;                /* Changes text color to warm brown */
  transform: scale(1.05);        /* Slight zoom effect for interactivity */
}

/* Subsection title */
h3 {
  font-size: 1.4em;              /* Slightly smaller than h2 */
  color: #2a1f14;                /* Consistent dark brown color */
  font-weight: normal;           /* Less emphasis than h2 */
  margin: 0;                     /* No extra spacing by default */
  transition: all 0.3s ease;     /* Smooth hover animation */
}

/* Hover effect for h3 */
h3:hover {
  color: #b36b2c;                /* Same warm brown hover color */
  transform: scale(1.05);        /* Same zoom effect for consistency */
}


/* -------------------- MAIN CONTENT -------------------- */

/* Styles for the main content container */
main {
  padding: 3% 10%;               /* Adds vertical and horizontal spacing inside the main area */
}

/* Paragraph styling inside <main> */
main p {
  font-size: 1.1em;              /* Slightly larger text for readability */
  margin-bottom: 2em;            /* Space below each paragraph */
}

/* Unordered list styling inside <main> */
main ul {
  list-style-type: disc;         /* Uses bullet points */
  margin-left: 40px;             /* Indents the list */
  margin-top: 10px;
  margin-bottom: 35px;
}

/* List item styling inside <main> */
main li {
  font-size: 1.05em;             /* Slightly larger than default text */
  margin-bottom: 0.8em;          /* Space between list items */
}

/* Custom link style */
.link {
  color: #4d3319;                /* Dark brown text */
  text-decoration: none;         /* Removes underline */
  font-weight: bold;             /* Emphasizes the link */
  font-style: italic;            /* Adds italic style */
}

/* Hover effect for custom links */
.link:hover {
  color: #b36b2c;                /* Changes color on hover */
  text-decoration: underline;    /* Adds underline on hover */
}

/* Call-to-action text block */
.action {
  font-size: 1.3em;              /* Larger text for emphasis */
  text-align: center;            /* Centers the text */
  font-weight: bold;             /* Makes it stand out */
  margin-top: 3em;               /* Adds space above */
}



/* -------------------- FOOTER -------------------- */
footer {
    text-align: center;
    font-size: 0.9em;
    background-color: #2a1f14;
    color: #f6eee4;
    padding: 1.5% 0;
    margin-top: 60px;
}

footer a {
    color: #f6eee4;
    text-decoration: none;
}

/* -------------------- SECTIONS (color de fondo) -------------------- */

section {
    padding: 120px 10% 160px; /* Adds top, side, and bottom spacing — creates breathing room around each section */
    opacity: 0; /* Starts hidden — used for scroll-triggered fade-in effect */
    transform: translateY(50px); /* Pushes section downward slightly — sets up entrance animation */
    transition: all 0.6s ease-out; /* Smooth animation when section becomes visible */
    margin-bottom: 80px; /* Adds space between sections — prevents stacking too tightly */
}

section.visible {
    opacity: 1; /* Makes section fully visible when triggered */
    transform: translateY(0); /* Returns section to its original position — completes entrance animation */
}

section:nth-of-type(odd) {
    background-color: #f6eee4; /* Light beige background for odd-numbered sections — improves visual rhythm */
}

section:nth-of-type(even) {
    background-color: #ffffff; /* White background for even-numbered sections — alternates for contrast */
}

header {
    margin-bottom: 120px; /* Separates header from the first section — avoids visual crowding */
}


/* -- MEDIA QUERIES (responsive for cellphones tablets, etc)-----*/

/* Tablet and small desktop screens (≤ 1024px wide) */
@media (max-width: 1024px) {
    nav li {
        font-size: 1.1em; /* Slightly reduce nav item size for better fit on medium screens */
    }
    main {
        padding: 3% 5%; /* Reduce horizontal padding to allow more content space */
    }
    .hero-text {
        font-size: 2em; /* Scale down hero text for better proportion */
        padding: 15px 25px; /* Adjust padding to keep layout balanced */
    }
}

/* Mobile screens (≤ 768px wide) */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Stack nav items vertically for mobile layout */
    }
    nav li {
        display: block; /* Ensure each nav item takes full width */
        margin-bottom: 5px; /* Add spacing between stacked items */
    }
    .hero-text {
        font-size: 1.5em; /* Further reduce hero text size for small screens */
        padding: 10px 15px; /* Tighter padding for compact layout */
    }
    main p, main li {
        font-size: 1em; /* Normalize text size for readability on mobile */
    }
    h2 {
        font-size: 1.4em; /* Slightly smaller section headings */
    }
    h3 {
        font-size: 1.2em; /* Slightly smaller subheadings */
    }
}


/* -------------------- ABOUT US -------------------- */

/* Styles for the entire About Us section */
#about-us {
    max-width: 700px;           /* Limits the width for better readability on large screens */
    margin: 0 auto;             /* Horizontally centers the section */
    text-align: center;         /* Centers all text inside the section */
    padding: 50px 20px;         /* Adds vertical and horizontal spacing inside the section */
}

/* Styles for the heading inside the About Us section */
#about-us h2 {
    text-align: center;         /* Centers the heading */
    font-size: 1.8em;           /* Slightly larger font for emphasis */
    margin-bottom: 1em;         /* Adds space below the heading */
}

/* Styles for the paragraph(s) inside the About Us section */
#about-us p {
    margin-bottom: 0em;         /* No extra space below the paragraph (can be adjusted if needed) */
    line-height: 1.6;           /* Improves readability with comfortable line spacing */
    font-size: 1.1em;           /* Slightly larger text for better legibility */
}


/* -------------------- MODERN IMAGES -------------------- */

/* Base style for images inside the About section */
.about-img {
    width: 100%; /* Makes image responsive — fills container width */
    max-width: 500px; /* Limits image size to avoid being too large on wide screens */
    margin: 30px auto 0 auto; /* Adds top margin and centers image horizontally */
    display: block; /* Removes inline spacing and allows margin auto to work */
    border-radius: 20px; /* Rounds corners for a modern, soft look */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* Adds depth with a soft shadow */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Smooth animation on hover */
    
    /* Personal note: Image starts hidden and slightly lowered to enable scroll-triggered animation.
       Without this, the image would appear immediately without any entrance effect. */
    opacity: 0;
    transform: translateY(50px);
}

/* Hover effect for the image */
.about-img:hover {
    /* Personal note: Adds interactivity — image zooms in slightly and tilts for a modern, dynamic feel.
       Without this, the image would feel static and less engaging. */
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover for emphasis */
}

/* When section becomes visible (via JS), animate image into view */
section.visible .about-img {
    /* Personal note: This is triggered by JavaScript when the section scrolls into view.
       It fades in the image and moves it into place with a smooth animation.
       Without this, the image would remain invisible or jump into place abruptly. */
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

/* -------------------- CLIENTS TITLE -------------------- */
/* Styles for the <h3> heading used in the Clients section */
h3.clients-title {
    text-align: center; /* Centers the heading horizontally */
    font-family: 'Poppins', sans-serif; /* Uses a clean, modern sans-serif font */
    font-weight: bold; /* Makes the title stand out */
    font-size: 1.8em; /* Slightly larger than default for emphasis */
    margin: 30px 0 20px 0; /* Adds space above and below the title */
    color: #2a1f14; /* Dark brown color for visual consistency with brand */
    transition: all 0.3s ease; /* Enables smooth hover animation */

    /* Personal note: This heading introduces the Clients section with a modern, bold look.
       Without this styling, the title would appear plain and unbalanced.
       The margin ensures spacing from surrounding elements, and the font adds brand personality. */
}

h3.clients-title:hover {
    color: #b36b2c; /* Changes to warm brown on hover for interactivity */
    transform: scale(1.05); /* Slight zoom effect to draw attention */

    /* Personal note: This hover effect adds a subtle interaction cue.
       Without it, the title feels static and less engaging. */
}



/* -------------------- CONTACT SECTION -------------------- */
#contact {
    line-height: 1.2; 
    margin-top: 40px; 
    margin-bottom: 40px;
}

#contact p {
    margin-bottom: 0.8em; 
}


/* -------------------- TIMELINE -------------------- */

/* Main container for the timeline section */
#timeline {
  padding: 100px 10%; /* Adds vertical and horizontal spacing around the timeline */
  background-color: #ffffff; /* White background for clean visual separation */
  position: relative; /* Needed for positioning the central line */
}

/* Section heading */
#timeline h2 {
  text-align: center; /* Centers the title */
  font-size: 1.8em; /* Makes the heading prominent */
  margin-bottom: 2em; /* Adds space below the heading */
  color: #2a1f14; /* Dark brown for brand consistency */
}

/* Central vertical line */
.timeline {
  position: relative; /* Allows absolute positioning of the line */
  max-width: 900px; /* Limits width for readability */
  margin: auto; /* Centers the timeline horizontally */
}

/* Decorative vertical line in the center */
.timeline::after {
  content: ''; /* Empty content to render the line */
  position: absolute;
  width: 4px; /* Thickness of the line */
  background-color: #b36b2c; /* Brand accent color */
  top: 0;
  bottom: 0;
  left: 50%; /* Centers the line */
  margin-left: -2px; /* Adjusts for half the line width */
  z-index: 1; /* Places it behind timeline items */

  /* Personal note: This line visually anchors the timeline.
     Without it, items would float without structure. */
}

/* Individual timeline items */
.timeline-item {
  padding: 20px 40px; /* Inner spacing for content */
  position: relative;
  width: 50%; /* Each item takes half the timeline width */
  opacity: 0; /* Starts hidden for scroll animation */
  transform: translateY(50px); /* Starts slightly lowered */
  transition: all 0.6s ease-out; /* Smooth entrance animation */
  margin-bottom: 60px; /* Space between items */

  /* Personal note: Items fade in and slide up when visible.
     Without this, they appear abruptly and lose visual impact. */
}

/* Decorative circle for each item */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: #f6eee4; /* Light beige for contrast */
  border: 4px solid #b36b2c; /* Accent border */
  border-radius: 50%; /* Makes it a perfect circle */
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  /* Personal note: These circles mark each timeline point.
     Without them, the timeline would feel incomplete. */
}

/* Positioning for left-side items */
.timeline-item.left {
  left: 0; /* Anchors to the left side */
}

/* Positioning for right-side items */
.timeline-item.right {
  left: 50%; /* Anchors to the right side */
}

/* Circle alignment for right-side items */
.timeline-item.right::after {
  left: -13px; /* Positions circle to the left of content */
}

/* Circle alignment for left-side items */
.timeline-item.left::after {
  right: -13px; /* Positions circle to the right of content */
}

/* Content box inside each item */
.content {
  background-color: #f6eee4; /* Light beige background */
  padding: 15px 20px; /* Inner spacing */
  border-radius: 10px; /* Rounded corners */
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Soft shadow for depth */
  transition: all 0.3s ease; /* Smooth hover effect */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: auto;

  /* Personal note: Content boxes hold the actual timeline info.
     Without styling, they would look flat and disconnected. */
}

/* Year or title inside content box */
.content h3 {
  color: #b36b2c; /* Accent color */
  margin-bottom: 0.5em;
  font-size: 1.6em;
  transition: color 0.3s ease;

  /* Personal note: This heading highlights the year or milestone.
     Without transition, hover feels abrupt. */
}

/* Hover effect on content box */
.timeline-item .content:hover {
  transform: scale(1.03); /* Slight zoom for interactivity */
  box-shadow: 0 8px 25px rgba(0,0,0,0.25); /* Stronger shadow on hover */

  /* Personal note: Adds visual feedback when user hovers.
     Without it, the timeline feels static. */
}

/* Hover effect on title inside content box */
.timeline-item .content:hover h3 {
  color: #2a1f14; /* Changes to dark brown for contrast */
}

/* Paragraph text inside content box */
.content p {
  margin: 0;
  font-size: 1em;
  line-height: 1.5;

  /* Personal note: Ensures readable, well-spaced text.
     Without line-height, text may feel cramped. */
}

/* Margin adjustments for alignment */
.timeline-item.left .content {
  margin-right: 30px; /* Separates from central line */
}

.timeline-item.right .content {
  margin-left: 30px; /* Separates from central line */
}

/* Animation trigger when section becomes visible */
section.visible .timeline-item {
  opacity: 1; /* Makes item visible */
  transform: translateY(0); /* Moves item into place */

  /* Personal note: Triggered by scroll script.
     Without this, items stay hidden or jump into view. */
}


/* -------------------- RESPONSIVE part 2-------------------- */

/* Personal note: This media query is not duplicated — it complements the earlier one.
   The first @media block adjusts general layout (nav, hero, headings).
   This one specifically restructures the timeline section for mobile screens.
   Both use max-width: 768px but target different components. */

@media screen and (max-width: 768px) {

    .timeline::after {
        left: 31px; /* Moves the central line to the left to align with mobile layout */
    }

    .timeline-item {
        width: 100%; /* Makes each item span full width */
        padding-left: 70px; /* Adds space to the left for the circle */
        padding-right: 25px; /* Adds right padding for balance */
    }

    .timeline-item.right {
        left: 0; /* Overrides default 50% position — all items stack vertically */
    }

    .timeline-item::after {
        left: 15px; /* Positions the circle marker to the left edge */
        top: 50%;
        transform: translateY(-50%);
    }

    .timeline-item .content {
        padding: 20px; /* Adds consistent spacing inside content boxes */
        height: auto; /* Allows content to expand naturally */
    }
}

/* -------------------- CONTACT FORM -------------------- */

/* Title for the contact form section */
.form-title {
  font-size: 1.5em; /* Slightly larger for emphasis */
  margin-bottom: 30px; /* Adds space below the title */
  text-align: center; /* Centers the title */
  font-family: 'Poppins', sans-serif; /* Clean, modern font */
  color: #2a1f14; /* Dark brown for brand consistency */

  /* Personal note: This heading introduces the contact form clearly.
     Without styling, it would look plain and disconnected. */
}

/* Main container for the form */
.contact-form {
  max-width: 900px; /* Limits width for readability */
  margin: 0 auto; /* Centers the form horizontally */

  /* Personal note: Keeps the form visually balanced.
     Without this, it could stretch too wide or misalign. */
}

/* Grid layout for form fields */
.form-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
  gap: 20px; /* Space between fields */
  margin-bottom: 30px; /* Space below the grid */

  /* Personal note: This layout adapts to screen size.
     Without it, fields may stack awkwardly or overflow. */
}

/* Grouping for individual form fields */
.form-group {
  display: flex;
  flex-direction: column; /* Stacks label and input vertically */

  /* Personal note: Ensures label stays above input.
     Without this, layout may break or misalign. */
}

/* Utility class for full-width elements like textarea */
.full-width {
  margin-bottom: 30px; /* Adds spacing below */

  /* Personal note: Used for elements that span full width.
     Helps maintain consistent spacing. */
}

/* Label styling */
.contact-form label {
  font-weight: normal; /* Keeps label subtle */
  margin-bottom: 5px; /* Space between label and input */
  color: #2a1f14; /* Brand color */

  /* Personal note: Improves readability and visual hierarchy.
     Without spacing, labels may crowd inputs. */
}

/* Input and textarea styling */
.contact-form input,
.contact-form textarea {
  padding: 12px; /* Comfortable inner spacing */
  border: 1px solid #ccc; /* Light border for clarity */
  border-radius: 4px; /* Soft corners */
  font-size: 1em; /* Standard text size */
  font-family: inherit; /* Matches site font */
  background-color: #fff; /* Clean background */

  /* Personal note: Creates a clean, usable input field.
     Without styling, inputs may look inconsistent or hard to use. */
}

/* Textarea specific adjustments */
.contact-form textarea {
  resize: vertical; /* Allows vertical resizing only */
  min-height: 200px; /* Ensures enough space for messages */

  /* Personal note: Prevents tiny textareas.
     Without this, users may struggle to write comfortably. */
}

/* Submit button styling */
.contact-form button {
  display: block;
  margin: 0 auto; /* Centers the button */
  background-color: #2a1f14; /* Brand background */
  color: #f6eee4; /* Light text for contrast */
  padding: 14px 32px; /* Comfortable click area */
  border: none;
  border-radius: 4px; /* Soft corners */
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;

  /* Personal note: Creates a clear, inviting call-to-action.
     Without hover or spacing, button may feel flat or misaligned. */
}

/* Hover effect for the button */
.contact-form button:hover {
  background-color: #f6eee4; /* Inverts colors for feedback */
  color: #2a1f14;

  /* Personal note: Adds interactivity and visual response.
     Without this, button feels static. */
}

/* Optional spacing below contact info */
.contact-address {
  margin-bottom: 80px; /* You can increase this for more breathing room */

  /* Personal note: Adds space below address or contact details.
     Without it, layout may feel cramped. */
}

/* -------------------- NAV BRAND brand/logo with words-------------------- */

/* Personal note: This block styles the clickable brand/logo area in the nav.
   It includes the logo image and brand name text.
   Without this, the logo may appear misaligned or lack visual feedback. */

.nav-logo {
  display: flex; /* Aligns logo image and text horizontally */
  align-items: center; /* Vertically centers items */
  gap: 10px; /* Space between logo and text */
  padding: 0.5em 2em; /* Adds inner spacing for clickable area */
  text-decoration: none; /* Removes underline from link */
  transition: all 0.3s ease; /* Smooth hover animation */
  background-color: transparent; /* Keeps background clean by default */
  color: #f6eee4; /* Light beige text for contrast on dark nav background */
}

.nav-logo img {
  height: 50px; /* Sets consistent logo size */
  border-radius: 8px; /* Softens corners for a modern look */
  transition: filter 0.3s ease; /* Enables smooth hover effect */
}

.brand-text {
  font-family: 'Poppins', sans-serif; /* Clean, modern font */
  font-size: 1.0em; /* Standard readable size */
  font-weight: bold; /* Emphasizes brand name */
  color: #f6eee4; /* Matches nav text color */
  white-space: nowrap; /* Prevents text from wrapping */
  transition: color 0.3s ease; /* Smooth color change on hover */
}

.nav-logo:hover {
  background-color: #f6eee4; /* Light background on hover */
  color: #2a1f14; /* Dark text for contrast */
}

.nav-logo:hover .brand-text {
  color: #2a1f14; /* Matches hover color for consistency */
}

.nav-logo:hover img {
  filter: brightness(0.8); /* Slightly dims image for hover feedback */
}

.spacer {
  height: 30px; /* Personal note: Used to create vertical breathing room between sections.
                   Adjust to 80px or more if more space is needed */
}

/* -------------------- BACK TO TOP BUTTON -------------------- */

/* Styles for the floating "Back to Top" button */
.back-to-top {
  position: fixed; /* Keeps the button visible while scrolling */
  bottom: 30px; /* Distance from bottom edge */
  right: 30px; /* Distance from right edge */
  background-color: #b36b2c; /* Brand accent color */
  color: white; /* Text color */
  font-family: 'Poppins', sans-serif; /* Matches site typography */
  font-weight: 600; /* Semi-bold for visibility */
  font-size: 1em; /* Standard readable size */
  padding: 10px 20px; /* Comfortable click area */
  border-radius: 25px; /* Rounded pill shape */
  text-decoration: none; /* Removes underline */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Adds depth */
  opacity: 0; /* Starts hidden */
  pointer-events: none; /* Prevents interaction when hidden */
  transition: opacity 0.3s ease; /* Smooth fade-in/out */
  z-index: 1000; /* Ensures it stays above other elements */

  /* Personal note: This button allows users to quickly return to the top of the page.
     It stays fixed in the corner and appears only after scrolling.
     Without this, users would need to manually scroll up, which can be frustrating on long pages. */
}

/* When the button should be visible (e.g., after scrolling down) */
.back-to-top.show {
  opacity: 1; /* Makes the button visible */
  pointer-events: auto; /* Enables clicking */

  /* Personal note: This class is toggled via JavaScript when the user scrolls down.
     Without it, the button would always be hidden. */
}

/* Hover effect for the button */
.back-to-top:hover {
  background-color: #2a1f14; /* Darker tone on hover for feedback */

  /* Personal note: Adds interactivity and visual response.
     Without this, the button feels static and less intuitive. */
}