body {
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;  /* Sets the font for the entire page */
}

h1, h2, h3 {
    font-weight: bold;
    letter-spacing: -0.5px; /* Gives modern fonts a crisp, clean look */
}

/* Remove automatic underline from all anchor tags */
a {
text-decoration: none;
}

/* ---------------------------------------Header--------------------------------------- */

/* 1. Base style for header area */
header {
    background-color: #8cb6e0;  /* Light blue background color */
    color: #000000;
    padding: 0;  /* Adds padding to the top and bottom, and a small padding to the sides */
    width: 100%;  /* Ensures the header spans the full width of the viewport */   
    box-sizing: border-box;  /* Ensures padding is included in the total width */
}

/* 2. The Flexbox engine that creates the side-by-side layout */
header .header-container {
    display: grid;                         /* Uses CSS Grid for layout */
    grid-template-columns: 1fr 2fr 1fr;  /* Creates three columns: left, center, right */
    align-items: center;              /* Center vertically */
    max-width: 1200px;                /* Limits the width of the header content */
    margin: 0 auto;                   /* Centers the header content */
}

/* 3. Position the phone link in the first column of the grid */
header .header-container .call-btn {
    justify-self: start;  /* Aligns the phone link to the start of its grid cell */
    font-size: 16px;       /* Sets the font size for the phone link */
    color: #2600fd;        /* Sets the text color for the phone link */
}

/* 4. Change header logo size */
header .logo {
    max-width: 200px;  /* Adjust the size of the logo */
    height: auto;      /* Maintain aspect ratio */
    display: block;    /* Displays the logo as a block element */
    grid-column: 2;      /* Places the logo in the second column of the grid */
    justify-self: center;    /* Centers the logo vertically within its grid cell */
}

/* --------------------------------------Navigation--------------------------------------- */

/* 1. Navigation Bar */
nav.main-nav {
    background-color: #85d39f;  /* Light green background color */
    padding: 10px 20px;             /* Adds padding to the top and bottom */
}

/* 2. Make the navigation bar a horizontal list */
nav.main-nav > ul {
    list-style: none;               /* Removes default list styling */
    display: flex;                  /* Displays list items in a row */
    justify-content: center;        /* Centers the navigation items */
    gap: 10px;                      /* Adds space between the navigation items */
    margin: 0;                      /* Removes default margin */
    padding: 0;                     /* Removes default padding */
}

/*--------------------------------Navigation Links--------------------------------------- */
/* Anchor point for the sub-menu */
.main-nav li.dropdown {
  position: relative;
}

/* Base dropdown box */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  min-width: 260px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  list-style: none; /* Strips bullets */
  padding: 10px 0;
  margin: 0;
  z-index: 1000;
}

.dropdown-menu li {
  width: 100%;
  margin: 0;       /* Clears any inherited margins */
  padding: 0;      /* Clears any inherited padding */
}

.dropdown-menu a {
  color: #194e83; /* Dark Blue */
  padding: 10px 20px;
  display: block;
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap; /* Prevents long link text from awkwardly breaking into 2 lines */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-menu a:hover {
  background-color: #f4f1ea;
  color: #6a8d53; /* Brand Accent Green */
}

/* Reveal dropdown on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* ---------------------------------------Hero Banner------------------------------------- */

/* 1. Hero section syles */
.hero-section {
    position: relative; /* Tells the text overlay to anchor inside this container */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 2. Hero image positioning */
.hero-image {
    width: 100%;
    display: block; /*Removes the small gap below the image */
    height: 600px;
    object-fit: cover; /* Ensures the image covers the entire area without distortion */
    object-position: 50% 20%;
    grid-column: 1; 
    border-bottom: 4px solid #85d39f;
}

/* 3. Hero overlay positioning */
.hero-overlay {
    position: absolute; /* Positions the overlay on top of the image */
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%); /* Centers the overlay */

    /* Translucent Background Box */
    background-color: rgba(133, 211, 159, 0.65); /* Pastel Green box with 65% opacity */
    color: #000000;                        /* Sets header and slogan text to white */
    padding: 25px 35px;                    /* Space inside the box around text */
    border-radius: 8px;                    /* Softens corners */
    text-align: center;                    /* Centers text and button inside box */
    max-width: 85%;                        /* Keeps box responsive on smaller screens */
    box-sizing: border-box;
}

/* 4. Hero overlay & call button syles */
.hero-overlay .call-btn {
    font-size: 16px;       /* Sets the font size for the phone link */
    color: #2600fd;        /* Sets the text color for the phone link */
}

/*---------------------------------Hero Banner Secondary---------------------------------- */

/* 1. Hero section syles */
.hero-section-secondary {
    position: relative; /* Tells the text overlay to anchor inside this container */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 2. Hero image positioning */
.hero-image-secondary {
    width: 100%;
    display: block; /*Removes the small gap below the image */
    height: 325px;
    object-fit: cover; /* Ensures the image covers the entire area without distortion */
    object-position: 50% 40%; /* Moves the focal point down (X-axis %, Y-axis %) */
    grid-column: 1; 
}

/* 3. Hero overlay positioning */
.hero-overlay-secondary {
    position: absolute; /* Positions the overlay on top of the image */
    top: 50%;
    left: 14%;
    transform: translateY(-50%); /* Centers the overlay */
    text-align: left; /* Ensures text starts from the left */
    max-width: 600px; /* Gives long text room to extend before wrapping */
}

.hero-overlay-secondary h2 {
    color: white;
}

.hero-overlay-secondary p {
    color: #2600fd;
}

/* 1. Default state: normal text color, no underline */
a.hero-link,
a.hero-link:visited {
    color: white;
    text-decoration: none;
}

/* 2. Hover state: adds the underline when hovered */
a.hero-link:hover {
    text-decoration: underline;
}

/* ---------------------------------Welcome Section---------------------------------------- */

/* 1. Welcome Section Styles */
.welcome-section {
    padding: 60px 0;
    background-color: #ffffff;
}

/* 2. Welcome Section Grid Layout */
.welcome-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
    gap: 40px;                     /* Space between image and text */
    align-items: center;            /* Vertically aligns image with text */
    margin: 0 auto;
    padding: 0 20px;
    justify-content: space-between; /* Ensures the image and text are spaced apart */
}

/* 3. Welcome Image Styling */
.welcome-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;            /* Optional: gives image soft rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle drop shadow */
    display: block;
    justify-self: start;           /* Places the image furthest left in it's grid cell */
}

/* 4. Welcome Text heading Styling */
.welcome-text h2 {
    color: #000000;
    font-size: 2rem;
    margin-bottom: 10px;
}

/* 5. Welcome Text Subheading Styling */
.welcome-text h3 {
    color: #4a7bb0;                 /* Darker shade of your header blue for contrast */
    font-size: 1.25rem;
    margin-bottom: 20px;
}

/* 6. Welcome Text Paragraph Styling */
.welcome-text p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333333;
}

/* 7. Welcome Highlights List Styling */
.welcome-highlights {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

/* 8. Welcome Highlights List Items Styling */
.welcome-highlights li {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* 9. Welcome text positioning */
.welcome-text {
    justify-self: end;              /* Places the text furthest right in it's grid cell */
    text-align: left;               /* Aligns text to the left */
}

/* ----------------------------------Services Section--------------------------------------- */

/* 1. Services Section Container Layout */
.services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
    gap: 30px;                              /* Even space between the 3 cards */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Card Box Styling */
.service-card {
    background-color: #ffffff;
    border-radius: 10px;                     /* Soft rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle floating shadow */
    padding: 25px;                           /* Space inside the card around content */
    display: flex;
    flex-direction: column;                  /* Stacks image, h3, and p vertically */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover transition */
}

/* Optional: Slight lift effect when hovering over a card */
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 3. Card Image Styling */
.service-card img {
    width: 100%;
    height: 200px;                           /* Standardizes all 3 images to the same height */
    object-fit: cover;                       /* Prevents images from stretching/distorting */
    border-radius: 6px;                      /* Matches inner image to box style */
    margin-bottom: 20px;
}

/* 4. Card Heading Styling */
.service-card h3 {
    color: #4a7bb0;                          /* Matches your header accent blue */
    font-size: 1.25rem;
    margin-bottom: 12px;
}

/* 5. Card Text Styling */
.service-card p {
    color: #555555;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ----------------------------------Our Office--------------------------------------- */

/* 1. Container layout */
.office-container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Text gets 3 parts, Image gets 1 part */
    gap: 40px; 
    align-items: center;
    max-width: 1200px;             /* Constrains the total width of the section */
    margin: 0 auto;                /* Centers the bounded grid on the page */
    padding: 60px 20px;
    line-height: 1.6; /* Standard readable spacing for body text */
}

/* 2. Office Image parent */
.office-image {
    max-width: 300px;     /* Forces the image container to stop growing */
    justify-self: end;    /* Pushes the container to the right side of the grid cell */
    width: 100%;
}

/* 3. Office Image Child */
.office-image img {
    width: 100%;          /* Fills 100% of the 300px container */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
}

/* ----------------------------------Meet Dr. Ruhnke Quote Styling--------------------------------------- */

/* 1. Quote styling */
.doctor-quote {
    font-style: italic;
    border-left: 4px solid #4a7bb0;
    padding-left: 15px;
    margin: 20px 0;
    color: #444;
}

/* 2. Doctor Quote Span */
.doctor-quote span {
    display: block;
    font-style: normal;
    font-weight: bold;
    margin-top: 5px;
    color: #4a7bb0;
}

/* ----------------------------------Gallery Image Styling--------------------------------------- */

/* 1. Gallery Image parent */
.gallery-image{
    float: left;
    margin:25px 15px 15px 25px; /* Adds 25px spacing to the RIGHT of the image to push text away */
    max-width: 350px;     /* Forces the image container to stop growing */
    width: 100%;
}

/* 2. Tour Image Child */
.gallery-image img {
    width: 100%;          /* Fills 100% of the 350px container */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 1. Modal background overlay */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.85); /* Darkens background */
    text-align: center;
}

/* 2. Enlarged image inside modal */
.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80vh;
    margin-top: 5%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* 3. "Back" button styling */
.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 16px;
    border-radius: 5px;
    border: 1px solid #ffffff;
}

.close-btn:hover {
    background: #ffffff;
    color: #000000;
}

/* Make gallery images look clickable */
.gallery-image img {
    cursor: pointer;
}

.gallery-set {
    display: flex;
    gap: 20px; /* Adjust spacing between the before and after images */
    margin-bottom: 20px;
}

hr {
    clear: both;
    margin: 30px 0;
}

/* ----------------------------------Secondary Sections with images--------------------------------------- */

/* 1. Container layout */
.secondary-container-three-col {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Adjust proportions for Text, Image, and Widget/Logo */
    gap: 30px; 
    align-items: start;
    max-width: 1200px;             /* Constrains the total width of the section */
    margin: 30px auto;                /* Centers the bounded grid on the page */
    padding: 0px 20px;
}


/* 4. Doctor Image parent */
.secondary-image-three-col {
    float: right;          /* Ensures the image container floats to the right of the text */
    margin: 0 0 20px 25px; /* Adds space between the image and text */
    max-width: 300px;     /* Forces the image container to stop growing */
    width: 100%;
}

/* 5. Doctor Image Child */
.secondary-image-three-col img {
    width: 100%;          /* Fills 100% of the 300px container */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
}

.secondary-text-three-col {
    padding-right: 20px;
    line-height: 1.6; /* Standard readable spacing for body text */
}

/* ----------------------------------Secondary Sections--------------------------------------- */


/* 1. Container layout */
.secondary-container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Text gets 3 parts, Image gets 1 part */
    gap: 30px; 
    align-items: start;
    max-width: 1200px;             /* Constrains the total width of the section */
    margin: 30px auto;                /* Centers the bounded grid on the page */
    padding: 0px 20px;
}

/* 2. Secondary text styling */
.secondary-text{
    padding-right: 20px;
    line-height: 1.6; /* Standard readable spacing for body text */
}

/* ----------------------------------VA Benefits Image--------------------------------------- */

/* 4. Doctor Image parent */
.secondary-image-va-benefits {
    float: right;          /* Ensures the image container floats to the right of the text */
    margin: 0 0 20px 25px; /* Adds space between the image and text */
    max-width: 500px;     /* Forces the image container to stop growing */
    width: 100%;
}

/* 5. Doctor Image Child */
.secondary-image-va-benefits img {
    width: 100%;          /* Fills 100% of the 300px container */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
}

/* ----------------------------------Sidebar Logo & Buttons--------------------------------------- */

/* 1. Sidebar Layout */
.sidebar-widget {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-left: 20px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(0, 0, 0, 0.3);
}

/* 2. Sidebar logo */
.sidebar-brand img {
  max-width: 150px;
  height: auto;
  margin-bottom: 10px;
}

/* 3. Logo Fade-In Effect */
.fade-in-logo {
  animation: fadeIn 1.2s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 4. Sidebar Office Name */
.sidebar-brand h3 {
  font-size: 1.5rem;
  color: #4a7bb0; /* Practice brown color */
  margin-bottom: 25px;
}


/* 5. Rounded Pill Button Containers */
.pill-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 280px;
}

/* 6. Rounded Pill Buttons */
.pill-btn {
  background-color: #4a7bb0; /* Pill background color */
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 50px; /* Fully rounded capsule/pill shape */
  text-decoration: none;
  font-weight: 600;
  display: block;
  text-align: center;
  
  /* Keeps zooming text strictly inside the pill boundaries */
  overflow: hidden; 
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* 7. Hover effect for Rounded Pill Buttons */
.pill-btn:hover {
  background-color: #85d39f;
  transform: translateY(-2px); /* Subtle rise effect on hover */
}

/* 8. Text Zoom-In Effect inside Pills */
.zoom-text {
  display: inline-block;
  animation: zoomIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.3); /* Starts small inside the button */
  }
  to {
    opacity: 1;
    transform: scale(1);   /* Zooms up and stops smoothly */
  }
}

/* --------------------------------Sidebar Secondary Links--------------------------------------- */

/* Sidebar Horizontal Divider */
.sidebar-divider {
  width: 80%;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.3); /* Subtle black line */
  margin: 25px 0 20px 0;
}

/* Secondary Links Styling */
.sidebar-links {
  text-align: left;
  width: 100%;
  max-width: 240px;
}

.sidebar-links h4 {
  font-size: 1.1rem;
  color: #4a7bb0;
  margin-bottom: 12px;
  font-weight: 700;
}

.sidebar-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-links li {
  margin-bottom: 8px;
}

.sidebar-links a {
  color: #6a8d53; /* Accent green color */
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.sidebar-links a:hover {
  color: #5c3a21; /* Shifts to brown on hover */
  padding-left: 4px; /* Subtle slide effect */
}

/* ----------------------------------Footer-------------------------------------- */

/* 1. Base style for footer area */
footer {
    background-color: #8cb6e0;  /* Light blue background color */
    color: #000000;
    padding: 20px 0;               
}

/* 2. The Flexbox engine that creates the side-by-side layout */
footer .footer-container {
    display: flex;
    justify-content: space-around;  /* Distributes space around the columns */
    max-width: 1200px;                /* Limits the width of the footer content */
    margin: 0 auto;                   /* Centers the footer content */
    gap: 20px;                        /* Adds space between the columns */
}

/* 3. Instructing each column how to behave */
footer .footer-column {
    flex: 1;  /* Forces all 3 columns to share width equally */
}

/* 4. Fine-tuning typography & lists inside the columns */
footer .footer-column h3 {
    color: #2219a1;  /* Navy blue for headings */
    margin-bottom: 15px;
}

/* 5. Styling the lists inside the columns */
footer .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 6. Styling the list items inside the columns */
footer .footer-column li {
    margin-bottom: 8px;
}

/* 7. Styling the links inside the columns */
footer .footer-column a {
    color: #000000;  /* Black text for links */
}

/* --------------------------------Mobile Compatibility-------------------------- */

@media (max-width: 768px) {

    /* 1. Viewport & General Spacing */
    body {
        overflow-x: hidden; /* Prevents awkward horizontal scrolling */
    }

    /* 2. Header Mobile Stack */
    header .header-container {
        grid-template-columns: 1fr; /* Stacks phone link, logo, and items vertically */
        text-align: center;
        gap: 10px;
        padding: 15px 10px;
    }

    header .header-container .call-btn {
        justify-self: center; /* Centers call button on mobile header */
    }

    header .logo {
        grid-column: 1; /* Reset grid positioning to single column */
        margin: 0 auto;
    }

    /* 3. Navigation Bar Mobile Touch Friendly */
    nav.main-nav > ul {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .dropdown-menu {
        position: static; /* Allows submenus to drop naturally inline on mobile */
        width: 100%;
        box-shadow: none;
    }

    /* 4. Hero Banner Adjustment */
    .hero-image {
        height: 350px;
    }

    .hero-overlay {
        left: 50% !important;   /* Centers overlay box on mobile screen */
        width: 90%;
        padding: 15px;
    }

    .hero-overlay-secondary {
        left: 5% !important;
        transform: translateY(-50%);
        max-width: 90%;
    }

    /* 5. Welcome Section Mobile Stack */
    .welcome-container {
        grid-template-columns: 1fr; /* Stacks image above text */
        gap: 20px;
    }

    .welcome-text {
        justify-self: start;
    }

    /* 6. Services Grid Mobile Stack */
    .services-container {
        grid-template-columns: 1fr; /* Stacks service cards 1-per-row */
        gap: 20px;
    }

    /* 7. Secondary / Office / Sidebar Grids Mobile Stack */
    .office-container,
    .secondary-container,
    .secondary-container-three-col {
        grid-template-columns: 1fr; /* Stacks main text and sidebar content vertically */
        gap: 25px;
        padding: 20px 15px;
    }

    .secondary-image-three-col,
    .secondary-image-va-benefits,
    .office-image {
        float: none; /* Disables right-floats that push text out of bounds on mobile */
        margin: 15px auto;
        max-width: 100%;
    }

    .sidebar-widget {
        padding-left: 0;
        border-left: none; /* Removes desktop vertical divider line */
        border-top: 1px solid rgba(0, 0, 0, 0.2); /* Replaces with horizontal top divider */
        padding-top: 25px;
    }

    /* 8. Gallery Stacking */
    .gallery-set {
        display: flex;
        flex-wrap: wrap;             /* Allows images to wrap neatly to the next row */
        justify-content: center;     /* Centers images side-by-side */
        gap: 20px;                   /* Even spacing between images (no float clearing bugs) */
        margin-bottom: 30px;
    }

    .gallery-image {
        float: none;
        margin: 0;                   /* Gap property handles spacing now */
        max-width: 350px;
        width: 100%;
    }

    /* 9. Footer Stacking */
    footer .footer-container {
        flex-direction: column; /* Stacks footer columns vertically */
        text-align: center;
        gap: 25px;
    }

}