/* Resetting default margins and paddings for all elements 
   and applying consistent box-sizing to ensure predictable layout behavior across browsers. */
   * {
    margin: 0;
    /* Removes default margins set by the browser for all elements. */
    padding: 0;
    /* Removes default paddings for all elements. */
    box-sizing: border-box;
    /* Ensures padding and borders are included within an element's width and height, simplifying layout calculations. */
  }
  
  /* Base styling for the body element to maintain visual consistency 
       and establish a cohesive design theme across the page. */
  body {
    font-family: 'Lato', sans-serif;
    /* Sets the primary font for the page to Lato, falling back to sans-serif if unavailable. */
    background-color: #FFFFE0;
    /* Applies a soft ivory background color to create a warm, inviting aesthetic. */
    color: #0A0A5E;
    /* Uses navy blue text for strong contrast against the light background, enhancing readability. */
    line-height: 1.6;
    /* Adds vertical spacing between lines for better readability, especially for paragraphs. */
    scroll-behavior: smooth;
    /* Smoothens scrolling animations when navigating using anchor links. */
    overflow-x: hidden;
    /* Hides horizontal scrolling, ensuring content does not cause unwanted scrollbars. */
    padding: 0;
    /* Explicitly removes body padding (redundant due to global reset but added for clarity). */
  }
  
  /* Header Styling */
  /* Creates a visually appealing and functional header section that is always visible at the top of the page. */
  header {
    display: grid;
    /* Uses a grid layout for flexible and precise placement of header elements. */
    grid-template-areas:
      "brand nav menu";
    /* Defines three areas for branding, navigation, and additional menu items. */
    grid-template-columns: auto 1fr auto;
    /* Allocates space for the header: branding takes as much space as needed, navigation flexes, and menu items take up a fixed width. */
    align-items: center;
    /* Vertically aligns items within the header grid. */
    padding: 15px 30px;
    /* Adds spacing inside the header for a balanced layout. */
    background-color: #0A0A5E;
    /* Applies a navy blue background for contrast with the text and logo. */
    color: #FFFFE0;
    /* Ensures header text is white for optimal contrast against the background. */
    position: sticky;
    /* Makes the header stick to the top of the viewport during scrolling. */
    top: 0;
    /* Specifies the top position for the sticky header. */
    z-index: 1000;
    /* Ensures the header stays above other content elements on the page. */
    min-height: 70px;
    /* Sets a minimum height to ensure consistent appearance, regardless of content. */
  }
  
  /* Branding section inside the header. 
       Includes logo and potentially a title or tagline for the website. */
  .brand {
    grid-area: brand;
    /* Places the element in the 'brand' area defined in the header grid layout. */
    display: flex;
    /* Uses flexbox for horizontal alignment of logo and other elements (like text). */
    align-items: center;
    /* Vertically aligns items within the branding area. */
    gap: 10px;
    /* Adds spacing between the logo and other branding elements. */
  }
  
  /* Logo styling for the branding section. 
       Ensures the logo is well-sized and maintains its aspect ratio. */
  .logo {
    width: 100px;
    /* Defines the logo width to standardize its size across devices. */
    height: 100px;
    /* Sets the height to match the width, maintaining a square aspect ratio. */
    object-fit: contain;
    /* Ensures the logo fits within its container without distortion. */
  }
  
  /* ========== Header Title ========== */
  /* Styles the header title, typically used for branding or to highlight the page's main section. */
  .header-title {
    font-size: 1.5rem;
    /* Sets the font size for medium emphasis. Adjusts well for different screen sizes. */
    font-weight: bold;
    /* Makes the title text stand out by using a bold weight. */
    color: #FFFFE0;
    /* Ensures the text contrasts well against a darker header background. */
  }
  
  /* ========== Navigation Links ========== */
  /* Styles for the desktop navigation menu to provide clean alignment and interaction. */
  .desktop-nav {
    grid-area: nav;
    /* Places the navigation section in the grid area named 'nav' within the header. */
    display: flex;
    /* Aligns navigation links in a row for horizontal layout. */
    justify-content: flex-end;
    /* Aligns the navigation links to the right side. */
    gap: 20px;
    /* Adds space between each navigation link. */
  }
  
  .nav-link {
    text-decoration: none;
    /* Removes default underlines for links. */
    color: #FFFFE0;
    /* Sets the text color to white for visibility against the header background. */
    font-weight: bold;
    /* Makes the links visually distinct and easy to read. */
    padding: 8px 15px;
    /* Adds clickable padding around the links for better user experience. */
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* Smooth animations for hover and active states. */
  }
  
  /* Adds interactivity for hover and active states to improve user engagement. */
  .nav-link:hover,
  .nav-link.active {
    background-color: #FF0707;
    /* Changes the background to red for emphasis. */
    transform: scale(1.05);
    /* Slightly enlarges the link to signal interactivity. */
  }
  
  
  /* ========== Mobile Navigation ========== */
  /* Styles the hamburger button for mobile menu activation. */
  /* Default: Hide the mobile menu button */
  /* Styles the hamburger button for mobile menu activation. */
  /* Base styles for .mobile-menu-btn */
  .mobile-menu-btn {
    grid-area: menu;
    /* Places the button in the 'menu' grid area within the header. */
    display: none;
    /* Hides the button by default. */
    background: none;
    /* Removes default button background. */
    border: none;
    /* Removes border to keep the button minimalistic. */
    font-size: 1.5rem;
    /* Sets a large font size for visibility and touch accessibility. */
    color: #FFFFE0;
    /* Matches the header text color. */
    cursor: pointer;
    /* Changes the cursor to indicate a clickable element. */
  }
  
  
  /* Styles the full-screen overlay menu that appears for mobile navigation. */
  /* Optional: Add hover effect for better UX on mobile */
  .mobile-menu-btn:hover {
    color: #FFFFE0;
    /* Change color on hover for visual feedback */
  }
  
  
  /* Styles the full-screen overlay menu that appears for mobile navigation. */
  .overlay-menu {
    position: fixed;
    /* Fixes the menu to the viewport for consistent placement. */
    top: 0;
    /* Aligns the menu to the top of the viewport. */
    left: -100%;
    /* Positions the menu off-screen initially. */
    width: 100%;
    /* Ensures the menu spans the full width of the viewport. */
    height: 100%;
    /* Ensures the menu spans the full height of the viewport. */
    background-color: rgba(10, 10, 94, 0.9);
    /* Applies a semi-transparent navy background for focus. */
    color: #FFFFE0;
    /* Sets text color for readability. */
    display: flex;
    /* Uses flexbox for vertical and horizontal alignment of menu items. */
    flex-direction: column;
    /* Stacks menu items vertically. */
    align-items: center;
    /* Centers menu items horizontally. */
    justify-content: center;
    /* Centers menu items vertically. */
    gap: 20px;
    /* Adds space between each menu item. */
    opacity: 0;
    /* Makes the menu invisible initially. */
    transition: opacity 0.3s ease, left 0.3s ease;
    /* Smooth transition for showing and hiding the menu. */
    z-index: 999;
    /* Ensures the menu overlays other content. */
  }
  
  
  /* Styles applied when the overlay menu is open. */
  .overlay-menu.open {
    left: 0;
    /* Moves the menu into view. */
    opacity: 1;
    /* Makes the menu visible. */
  }
  
  /* Adjust navigation links alignment */
  .overlay-nav-link {
    text-align: right;
    /* Align text to the right */
    text-decoration: none;
    font-size: 1.2rem;
    color: #FFFFE0;
    padding: 15px 20px;
    transition: color 0.3s ease, transform 0.2s ease;
  }
  
  
  /* Responsive Design: Tablet-specific adjustments */
  @media (max-width: 768px) {
    .overlay-menu {
      padding-right: 40px;
      /* Increase padding for better spacing */
    }
  }
  
  /* Responsive Design: Smaller phones */
  @media (max-width: 480px) {
    .overlay-menu {
      padding-right: 20px;
      /* Adjust padding for smaller screens */
    }
  }
  
  /* Hover effect for overlay navigation links. */
  .overlay-nav-link:hover {
    color: #FF0707;
    /* Changes link color to red for emphasis. */
    transform: scale(1.1);
    /* Slightly enlarges the link to indicate interactivity. */
  }
  
  /* Styles for the close button inside the overlay menu. */
  .close-menu-btn {
    background: none;
    /* Removes default button background. */
    border: none;
    /* Removes border for a clean look. */
    font-size: 2rem;
    /* Sets a large size for visibility. */
    color: #FFFFE0;
    /* Matches overlay text color. */
    position: absolute;
    /* Positions the button relative to the viewport. */
    top: 20px;
    /* Places the button near the top of the menu. */
    right: 20px;
    /* Aligns the button to the right edge of the menu. */
    cursor: pointer;
    /* Changes the cursor to indicate a clickable element. */
  }
  
  
  /* ========== Responsive Design ========== */
  /* Adjustments for devices with a maximum width of 768px (tablets and smaller screens). */
  @media (max-width: 768px) {
    header {
      grid-template-areas:
        "brand menu"
        /* Brand and menu button are displayed in the first row. */
        "nav nav";
      /* Navigation spans the second row. */
      grid-template-columns: 1fr auto;
      /* Brand takes most of the space, menu button is fixed width. */
    }
  
    .desktop-nav {
      display: none;
      /* Hides desktop navigation on smaller screens. */
    }
  
    .mobile-menu-btn {
      display: block;
      /* Shows the mobile menu button. */
    }
  }
  
  /* Adjustments for devices with a maximum width of 480px (smaller phones). */
  @media (max-width: 480px) {
    .header-title {
      font-size: 1.2rem;
      /* Reduces font size for better fit on small screens. */
    }
  
    .overlay-nav-link {
      font-size: 1rem;
      /* Adjusts navigation link size for better readability on smaller devices. */
    }
  }
  
    /* General Footer Styles */
    footer {
      display: grid;
      grid-template-areas:
        "contact social legal"
        "footer-bottom footer-bottom footer-bottom";
      grid-template-columns: 1fr 1fr 1fr;
      /* Equal-width columns */
      gap: 2rem;
      /* Spacing between sections */
      background-color: #0A0A5E;
      color: #FFFFE0;
      padding: 40px 20px;
      font-family: 'Lato', sans-serif;
      text-align: left;
    }
    
    /* Contact Section */
    #contact {
      grid-area: contact;
      text-align: left;
      /* Align text to the left */
    }
    
    /* Social Media Section */
    #social-media {
      grid-area: social;
      text-align: center;
      /* Center-align content */
    }
    
    /* Legal Section */
    #legal {
      grid-area: legal;
      text-align: right;
      /* Align text to the right */
    }
    
    /* Footer Bottom Section */
    .footer-bottom {
      grid-area: footer-bottom;
      text-align: center;
      font-size: 0.8rem;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      padding-top: 10px;
      margin-top: 20px;
    }
    
    /* Section Headings */
    footer h3 {
      font-size: 1.2rem;
      color: #FFFFE0;
      margin-bottom: 10px;
    }
    
    /* Links and Text */
    footer p,
    footer a {
      font-size: 0.9rem;
      color: #FFFFE0;
      transition: color 0.3s ease;
    }
    
    footer a:hover {
      color: #FFFFFF;
      text-decoration: underline;
    }
    
    /* Social Media Icons */
    #social-media a img {
      width: 40px;
      /* Icon size */
      height: 40px;
      object-fit: cover;
      margin-right: 10px;
      transition: transform 0.3s ease;
    }
    
    #social-media a img:hover {
      transform: scale(1.1);
    }
    
    /* Responsive Footer Styles */
    @media (max-width: 768px) {
      footer {
        grid-template-areas:
          "contact"
          "social"
          "legal"
          "footer-bottom";
        grid-template-columns: 1fr;
        /* Single-column layout */
        gap: 1rem;
        /* Reduce spacing */
        padding: 20px;
      }
    
      #contact,
      #social-media,
      #legal {
        text-align: center;
      }
    
      footer h3 {
        font-size: 1.1rem;
        /* Consistent scaling for smaller screens */
      }
    
      footer p,
      footer a {
        font-size: 0.85rem;
      }
    
      #social-media a img {
        width: 30px;
        height: 30px;
        margin: 5px;
      }
    
      .footer-bottom {
        font-size: 0.7rem;
        margin-top: 10px;
      }
    }
    
    @media (max-width: 480px) {
      footer {
        gap: 0.5rem;
        padding: 10px;
      }
    
      footer h3 {
        font-size: 1rem;
        /* Adjust heading size */
      }
    
      footer p,
      footer a {
        font-size: 0.8rem;
      }
    
      #social-media a img {
        width: 25px;
        height: 25px;
      }
    
      .footer-bottom {
        font-size: 0.6rem;
      }
    }
    
  
  
  /*================= HOMEPAGE HERO SECTION =================*/
  #hero {
    display: block;
    /* Block layout for easy wrapping of text and elements */
    max-width: 1200px;
    /* Restricting width for optimal readability */
    margin: 0 auto;
    /* Center align the hero section */
    background-color: #FFFFE0;
    /* Light yellow background for a subtle design theme */
    padding: 2rem;
    /* Generous padding for balance */
    border-radius: 10px;
    /* Slightly rounded corners for modern styling */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
    overflow: hidden;
    /* Prevents overflow issues with floated content */
  }
  
  #hero-heading {
    font-size: 2.5rem;
    /* Prominent heading size */
    color: #0A0A5E;
    /* Navy blue text for branding */
    margin: 0 0 1.5rem;
    /* Spacing below the heading */
    text-align: center;
    /* Center align for a cohesive layout */
  }
  
  #hero-para {
    font-size: 1.1rem;
    /* Standard font size for readability */
    line-height: 1.8;
    /* Improved line spacing for legibility */
    color: #333;
    /* Darker gray for better contrast */
    text-align: justify;
    /* Justifies text for a professional look */
    margin: 0 0 1.5rem;
    /* Spacing below the paragraph */
  }
  
  .hero-image {
    float: left;
    /* Float image to the left */
    width: 45%;
    /* Responsive width */
    height: auto;
    /* Maintain aspect ratio */
    margin: 0 1.5rem 1.5rem 0;
    /* Spacing around the image */
    border-radius: 10px;
    /* Rounded corners for aesthetic appeal */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for emphasis */
    object-fit: cover;
    /* Ensures the image scales nicely */
  }
  
  .hero-buttons {
    display: flex;
    /* Flexbox for alignment */
    justify-content: center;
    /* Center align the buttons */
    gap: 15px;
    /* Spacing between buttons */
    text-align: center;
  }
  
  .hero-buttons .btn {
    padding: 12px 25px;
    /* Generous padding for better accessibility */
    background-color: #0A0A5E;
    /* Navy blue for consistency */
    color: #FFFFE0;
    /* White text for contrast */
    border: none;
    /* Remove default border */
    border-radius: 5px;
    /* Subtle rounded corners */
    text-decoration: none;
    /* Remove underline */
    font-size: 1rem;
    /* Standard button font size */
    cursor: pointer;
    /* Pointer cursor for interactive feel */
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* Smooth hover effect */
  }
  
  .hero-buttons .btn:hover {
    background-color: #0A0A5E;
    /* Darker blue on hover */
    transform: translateY(-3px);
    /* Lift button on hover */
  }
  
  /*================= RESPONSIVE ADJUSTMENTS =================*/
  @media (max-width: 768px) {
    #hero {
      padding: 1.5rem;
      /* Adjusted padding for smaller screens */
      width: 100%;
      /* Full-width for better responsiveness */
    }
  
    #hero-heading {
      font-size: 2rem;
      /* Slightly smaller heading size */
      text-align: center;
      /* Keep heading centered */
    }
  
    #hero-para {
      font-size: 1rem;
      /* Adjusted font size */
      line-height: 1.6;
      /* Reduce line spacing slightly */
    }
  
    .hero-image {
      float: none;
      /* Remove float for smaller screens */
      width: 100%;
      /* Full-width image */
      height: auto;
      /* Maintain aspect ratio */
      margin: 0 0 1rem;
      /* Adjust spacing */
    }
  
    .hero-buttons {
      flex-direction: column;
      /* Stack buttons vertically */
      gap: 10px;
      /* Adjust gap between buttons */
      align-items: center;
      /* Center align buttons */
    }
  
    .hero-buttons .btn {
      width: 100%;
      /* Full-width buttons for accessibility */
      padding: 10px;
      /* Adjusted padding for touch devices */
    }
  }
  
  /* ========== Services Section ========== */
  #services {
    display: grid;
    /* Uses grid layout for organizing the section. */
    grid-template-columns: 1fr;
    /* Single column layout for the heading. */
    grid-template-rows: auto 1fr;
    /* Heading at the top and list below. */
    grid-template-areas:
      "heading"
      /* Heading spans full width. */
      "list";
    /* List occupies the second row. */
    gap: 2rem;
    /* Adds spacing between the heading and the list. */
    text-align: center;
    /* Centers all content for a unified appearance. */
    padding: 2rem;
    /* Adds padding around the section for breathing room. */
    background-color: #FFFFE0;
    /* Light background color for contrast with the content. */
  }
  
  /* Services List Styling */
  #services ul {
    grid-area: list;
    /* Assigns the list to its grid area. */
    display: grid;
    /* Uses grid layout for list items. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Creates responsive columns for large screens. */
    gap: 2rem;
    /* Adds spacing between list items. */
    list-style: none;
    /* Removes default bullet points for a cleaner look. */
    padding: 0;
    /* Resets padding for consistency. */
    margin: 0;
    /* Removes default margin. */
  }
  
  /* Individual List Items */
  #services li {
    background: #FFFFFF;
    /* White background for a clean, professional appearance. */
    padding: 1.5rem;
    /* Adds inner padding for readability. */
    border-radius: 8px;
    /* Rounded corners for a modern design. */
    font-weight: bold;
    /* Highlights list item text. */
    font-size: 1rem;
    /* Standard text size for clarity. */
    color: #0A0A5E;
    /* Maintains branding with navy blue text. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Adds a subtle shadow for depth. */
    text-align: center;
    /* Centers text within the item. */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth hover effect transitions. */
  }
  
  #services li:hover {
    transform: scale(1.05);
    /* Slightly enlarges the item on hover for interactivity. */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    /* Intensifies shadow on hover for emphasis. */
  }
  
  /* Responsive Design for Mobile Devices */
  @media (max-width: 601px) {
    #services ul {
      grid-template-columns: 1fr;
      /* Stacks list items vertically on smaller screens. */
      gap: 1rem;
      /* Reduces spacing for better fit. */
    }
  }
  
  /* ========== Our Story Section ========== */
  /* Main section for presenting the story of the brand/company with text wrapping around the image. */
  #our-story {
    display: block;
    /* Changes layout to support text wrapping. */
    max-width: 1200px;
    /* Restricts section width for better readability. */
    margin: 0 auto;
    /* Centers the section horizontally. */
    background-color: #FFFFE0;
    /* Light gray background to maintain the design theme. */
    padding: 2rem;
    /* Adds padding around the section for visual balance. */
    border-radius: 8px;
    /* Adds rounded corners for a modern aesthetic. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Adds a subtle shadow for depth. */
  }
  
  /* Heading styling */
  #our-story-heading {
    font-size: 2.5rem;
    /* Sets a prominent font size for emphasis. */
    color: #0A0A5E;
    /* Navy blue text for branding consistency. */
    margin: 0 0 1rem;
    /* Adds space below the heading for visual separation. */
    text-align: center;
    /* Centers the heading text for visual balance. */
  }
  
  /* Image styling */
  .story-image {
    float: left;
    /* Floats the image to the left to allow text to wrap around it. */
    width: 40%;
    /* Sets the image width relative to the container. */
    height: auto;
    /* Maintains aspect ratio of the image. */
    margin: 0 1.5rem 1.5rem 0;
    /* Adds spacing around the image for better readability. */
    border-radius: 8px;
    /* Adds rounded corners for a polished look. */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Adds a subtle shadow for emphasis. */
    object-fit: cover;
    /* Ensures the image scales properly without distortion. */
  }
  
  /* Text styling */
  .story-text {
    font-size: 1rem;
    /* Sets a standard font size for readability. */
    line-height: 1.6;
    /* Improves spacing between lines for better legibility. */
    color: #0A0A5E;
    /* Dark gray text for better contrast and readability. */
    text-align: justify;
    /* Justifies text for a clean and professional appearance. */
    margin: 0;
    /* Removes default margins for a clean layout. */
    overflow: hidden;
    /* Ensures proper text alignment around floated elements. */
  }
  
  /* Responsive Adjustments for Tablets and Smaller Screens */
  @media (max-width: 768px) {
    .story-image {
      float: none;
      /* Removes floating for smaller screens. */
      width: 100%;
      /* Makes the image full-width for smaller screens. */
      margin: 0 0 1.5rem;
      /* Adjusts spacing below the image. */
    }
  
    #our-story {
      padding: 1rem;
      /* Ensures balanced padding for smaller devices. */
    }
  
    #our-story-heading {
      font-size: 2rem;
      /* Adjusts heading size for smaller screens. */
    }
  
    .story-text {
      font-size: 1rem;
      /* Maintains a readable font size. */
      text-align: justify;
      /* Keeps text justified for a professional look. */
    }
  }
  
  /* ========== Team Section ========== */
  /* Section dedicated to introducing the team with text wrapping around the image. */
  #team {
    display: block;
    /* Enables text wrapping around the image. */
    max-width: 1200px;
    /* Restricts the section width for better readability. */
    margin: 0 auto;
    /* Centers the section horizontally. */
    background-color: #FFFFE0;
    /* Light background for visual consistency. */
    padding: 2rem;
    /* Adds space around the section. */
    border-radius: 8px;
    /* Rounded corners for a modern design. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Adds subtle depth with a shadow effect. */
  }
  
  /* Team section heading styling */
  #team-heading {
    font-size: 2.5rem;
    /* Sets a large font size for emphasis. */
    color: #0A0A5E;
    /* Navy blue text for consistency with the branding. */
    margin: 0 0 1rem;
    /* Adds spacing below the heading for separation. */
    text-align: center;
    /* Centers the heading text. */
  }
  
  /* Image styling */
  .barista-image {
    float: left;
    /* Floats the image to the left to allow text to wrap around it. */
    width: 40%;
    /* Makes the image take up 40% of the container width. */
    height: auto;
    /* Maintains the aspect ratio of the image. */
    margin: 0 1.5rem 1.5rem 0;
    /* Adds spacing around the image for readability. */
    border-radius: 8px;
    /* Adds rounded corners for a polished look. */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Adds a subtle shadow for emphasis. */
    object-fit: cover;
    /* Ensures the image scales properly without distortion. */
  }
  
  /* Team description styling */
  .team-description {
    font-size: 1rem;
    /* Sets a standard font size for readability. */
    line-height: 1.6;
    /* Improves spacing between lines for better legibility. */
    color: #0A0A5E;
    /* Dark gray text for better readability. */
    text-align: justify;
    /* Justifies text for a professional appearance. */
    margin: 0;
    /* Removes default margins for a cleaner look. */
    overflow: hidden;
    /* Ensures proper text alignment around floated elements. */
  }
  
  /* Responsive Adjustments for Tablets and Smaller Screens */
  @media (max-width: 768px) {
    .barista-image {
      float: none;
      /* Removes floating for smaller screens. */
      width: 100%;
      /* Makes the image full-width for smaller screens. */
      margin: 0 0 1.5rem;
      /* Adjusts spacing below the image. */
    }
  
    #team {
      padding: 1rem;
      /* Adjusts padding for smaller devices. */
    }
  
    #team-heading {
      font-size: 2rem;
      /* Adjusts heading size for smaller screens. */
    }
  
    .team-description {
      font-size: 1rem;
      /* Maintains readable font size. */
      text-align: justify;
      /* Keeps text justified for a clean layout. */
    }
  }
  
  /* ========== Testimonials Section ========== */
  /* Section to display customer testimonials. */
  #testimonials {
    display: grid;
    /* Uses grid layout for an organized section. */
    grid-template-areas:
      "heading heading"
      /* Heading spans two columns. */
      "testimonial1 testimonial2";
    /* Two testimonials side by side. */
    grid-template-columns: 1fr 1fr;
    /* Creates two equal-width columns for testimonials. */
    grid-template-rows: auto auto;
    /* Automatically sizes rows based on content. */
    gap: 2rem;
    /* Adds spacing between grid items. */
    padding: 2rem;
    /* Adds padding around the section for balance. */
    max-width: 1200px;
    /* Restricts section width for better readability. */
    margin: 0 auto;
    /* Centers the section horizontally. */
    background-color: #FFFFE0;
    /* Light background color for a clean look. */
    border-radius: 8px;
    /* Adds rounded corners for a modern style. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Adds depth with a subtle shadow effect. */
    text-align: center;
    /* Centers text for visual balance. */
  }
  
  /* Testimonials heading styling */
  #testimonials-heading {
    grid-area: heading;
    /* Assigns the heading to its grid area. */
    font-size: 2.5rem;
    /* Sets a large font size for emphasis. */
    color: #0A0A5E;
    /* Navy blue text for branding consistency. */
    margin: 0;
    /* Removes default margins. */
    text-align: center;
    /* Centers the heading text. */
  }
  
  /* Individual testimonial styling */
  .testimonial {
    background: #FFFFE0;
    /* White background for contrast. */
    padding: 1.5rem;
    /* Adds inner spacing for better readability. */
    border-radius: 8px;
    /* Rounded corners for a polished look. */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth. */
    text-align: left;
    /* Left-aligns testimonial text for readability. */
  }
  
  /* Testimonial text styling */
  .testimonial p {
    font-size: 1.2rem;
    /* Slightly larger text for emphasis. */
    line-height: 1.6;
    /* Improves line spacing for better readability. */
    margin: 0 0 1rem;
    /* Adds space below text for separation. */
    color: #0A0A5E;
    /* Navy blue text for readability and branding. */
  }
  
  /* Attribution (footer) styling */
  .testimonial footer {
    font-size: 1rem;
    /* Sets a smaller font size for attribution text. */
    color: #0A0A5E;
    /* Navy blue text for consistency. */
    text-align: right;
    /* Aligns attribution text to the right. */
    margin: 0;
    /* Removes default margins. */
  }
  
  /* ========== Responsive Styles ========== */
  /* Tablets (768px and up) */
  @media (max-width: 1024px) {
    #testimonials {
      grid-template-areas:
        "heading"
        "testimonial1"
        "testimonial2";
      /* Stacks testimonials vertically. */
      grid-template-columns: 1fr;
      /* Single column layout for testimonials. */
    }
  
    #testimonials-heading {
      font-size: 2rem;
      /* Slightly smaller heading for tablets. */
    }
  
    .testimonial {
      text-align: center;
      /* Center-align text for smaller screens. */
    }
  
    .testimonial p {
      font-size: 1.1rem;
      /* Slightly smaller text for better fit. */
    }
  }
  
  /* Mobile Phones (480px and up) */
  @media (max-width: 768px) {
    #testimonials {
      padding: 1rem;
      /* Reduces padding for smaller screens. */
      gap: 1.5rem;
      /* Reduces spacing between items for compactness. */
    }
  
    #testimonials-heading {
      font-size: 1.8rem;
      /* Adjusts heading size for small screens. */
    }
  
    .testimonial p {
      font-size: 1rem;
      /* Adjusts text size for readability on smaller screens. */
    }
  
    .testimonial footer {
      font-size: 0.9rem;
      /* Adjusts attribution text size. */
    }
  }
  
  
  /* ========== Menu Page Intro Section ========== */
  /* The introduction section provides a welcoming start to the menu page. */
  #intro {
    display: grid;
    /* Uses a grid layout for a clean and structured layout. */
    grid-template-areas:
      "heading"
      /* Heading spans one row. */
      "tagline"
      /* Tagline spans one row below the heading. */
      "image";
    /* Image spans one row at the bottom. */
    grid-template-columns: 1fr;
    /* Single-column layout for the entire section. */
    grid-template-rows: auto auto auto;
    /* Rows adjust dynamically based on content height. */
    gap: 1rem;
    /* Adds space between grid items. */
    text-align: center;
    /* Centers text within the section. */
    padding: 2rem;
    /* Adds inner spacing for a balanced layout. */
    background-color: #FFFFE0;
    /* Optional: Adds a light background for better visuals. */
  }
  
  #intro h2 {
    grid-area: heading;
    /* Places the heading in the designated grid area. */
    font-size: 2rem;
    /* Sets a prominent font size for the heading. */
    color: #0A0A5E;
    /* Navy blue text for consistent branding. */
  }
  
  #intro p {
    grid-area: tagline;
    /* Places the tagline below the heading. */
    font-size: 1.25rem;
    /* Slightly smaller font size than the heading. */
    color: #0A0A5E;
    /* Navy blue text for readability and branding. */
  }
  
  #intro figure {
    grid-area: image;
    /* Assigns the image to the bottom of the section. */
    margin: 0 auto;
    /* Centers the image. */
  }
  
  #intro img {
    max-width: 100%;
    /* Ensures the image is responsive. */
    height: auto;
    /* Maintains the aspect ratio of the image. */
    border-radius: 8px;
    /* Adds rounded corners for a modern look. */
  }
  
  /* ========== Beverages Section ========== */
  /* Section to display different beverage categories. */
  #beverages {
    display: grid;
    /* Uses a grid layout for a structured presentation. */
    grid-template-areas:
      "title title title title"
      /* Title spans all columns. */
      "berry coffee chocolate iced";
    /* Beverage categories are arranged in a row. */
    grid-template-columns: repeat(4, 1fr);
    /* Divides the section into four equal columns. */
    grid-template-rows: auto 1fr;
    /* Rows adjust dynamically based on content. */
    gap: 20px;
    /* Adds space between grid items. */
    padding: 20px;
    /* Adds padding around the section for better spacing. */
  }
  
  #beverages h2 {
    grid-area: title;
    /* Assigns the title to span the top row. */
    text-align: center;
    /* Centers the title. */
    font-size: 2rem;
    /* Sets a prominent font size for the title. */
    margin-bottom: 20px;
    /* Adds spacing below the title. */
  }
  
  /* Assigns grid areas for specific beverage categories. */
  #beverages article:nth-child(2) {
    grid-area: berry;
  }
  
  #beverages article:nth-child(3) {
    grid-area: coffee;
  }
  
  #beverages article:nth-child(4) {
    grid-area: chocolate;
  }
  
  #beverages article:nth-child(5) {
    grid-area: iced;
  }
  
  #beverages article {
    display: flex;
    /* Uses flexbox for aligning content within each item. */
    flex-direction: column;
    /* Stacks content vertically. */
    align-items: center;
    /* Centers content horizontally. */
    text-align: center;
    /* Centers text inside the articles. */
    background: #ffffff;
    /* White background for contrast. */
    padding: 15px;
    /* Adds spacing within each item. */
    border-radius: 8px;
    /* Rounded corners for a polished look. */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth. */
  }
  
  #beverages article img {
    max-width: 100%;
    /* Ensures images are responsive. */
    border-radius: 8px;
    /* Adds rounded corners to images. */
  }
  
  #beverages article p {
    margin-top: 10px;
    /* Adds spacing above the text. */
    font-size: 0.9rem;
    /* Sets a standard font size for readability. */
    color: #0A0A5E;
    /* Navy blue text for branding consistency. */
  }
  
  /* Responsive adjustments for tablet and smaller devices */
  @media (max-width: 601px) {
    #beverages {
      grid-template-areas:
        "title"
        "berry"
        "coffee"
        "chocolate"
        "iced";
      /* Stack the categories vertically */
      grid-template-columns: 1fr;
      /* Single column layout */
    }
  
    #beverages h2 {
      font-size: 1.5rem;
      /* Adjust title size for smaller screens */
    }
  
    #beverages article {
      padding: 10px;
      /* Reduce padding within items for smaller screens */
    }
  
    #beverages article p {
      font-size: 0.8rem;
      /* Adjust font size for better readability on smaller screens */
    }
  }
  
  /* ========== Food Options Section ========== */
  /* Section to showcase various food options. */
  #food-options {
    display: grid;
    grid-template-areas:
      "title title title"
      /* Title spans all columns. */
      "pancakes wrap salad";
    /* Food items arranged in a row. */
    grid-template-columns: repeat(3, 1fr);
    /* Three equal columns. */
    grid-template-rows: auto 1fr;
    /* Rows adjust dynamically. */
    gap: 20px;
    /* Adds spacing between items. */
    padding: 20px;
    /* Adds padding around the section. */
  }
  
  #food-options h2 {
    grid-area: title;
    /* Title spans the top row. */
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  /* Assigns grid areas for specific food items. */
  #food-options article:nth-child(2) {
    grid-area: pancakes;
  }
  
  #food-options article:nth-child(3) {
    grid-area: wrap;
  }
  
  #food-options article:nth-child(4) {
    grid-area: salad;
  }
  
  #food-options article {
    /* Same styles as beverages section for consistency. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  #food-options article img {
    max-width: 100%;
    border-radius: 8px;
  }
  
  #food-options article p {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #0A0A5E;
  }
  
  /* Responsive adjustments for tablet and smaller devices */
  @media (max-width: 601px) {
    #food-options {
      grid-template-areas:
        "title"
        "pancakes"
        "wrap"
        "salad";
      /* Stack the items vertically */
      grid-template-columns: 1fr;
      /* Single column layout */
    }
  
    #food-options h2 {
      font-size: 1.5rem;
      /* Adjust title size for smaller screens */
    }
  
    #food-options article {
      padding: 10px;
      /* Reduce padding within items for smaller screens */
    }
  
    #food-options article p {
      font-size: 0.8rem;
      /* Adjust font size for better readability on smaller screens */
    }
  }
  
  /* ========== Kids' Menu Section ========== */
  /* Section dedicated to kid-friendly food options. */
  #kids-menu {
    display: grid;
    grid-template-areas:
      "title title title"
      "mini-pancakes grilled-cheese fruit-cup";
    /* Items arranged in a row. */
    grid-template-columns: repeat(3, 1fr);
    /* Three equal columns. */
    grid-template-rows: auto 1fr;
    /* Rows adjust dynamically. */
    gap: 20px;
    /* Adds spacing between items. */
    padding: 20px;
    /* Adds padding around the section. */
  }
  
  #kids-menu h2 {
    grid-area: title;
    /* Title spans the top row. */
    text-align: center;
    font-size: 2rem;
    /* Prominent font size for the title. */
    margin-bottom: 20px;
    /* Adds spacing below the title. */
  }
  
  /* Assigns grid areas for specific kid-friendly items. */
  #kids-menu article:nth-child(2) {
    grid-area: mini-pancakes;
  }
  
  #kids-menu article:nth-child(3) {
    grid-area: grilled-cheese;
  }
  
  #kids-menu article:nth-child(4) {
    grid-area: fruit-cup;
  }
  
  /* Same styles as food options for consistency. */
  #kids-menu article {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    /* White background for contrast. */
    padding: 15px;
    /* Adds padding within each item. */
    border-radius: 8px;
    /* Rounded corners for a polished look. */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth. */
  }
  
  #kids-menu article img {
    max-width: 100%;
    /* Ensures images are responsive. */
    border-radius: 8px;
    /* Adds rounded corners to images. */
  }
  
  #kids-menu article p {
    margin-top: 10px;
    /* Adds spacing above the text. */
    font-size: 0.9rem;
    /* Sets a standard font size for readability. */
    color: #0A0A5E;
    /* Navy blue text for branding consistency. */
  }
  
  /* Responsive adjustments for tablet and smaller devices */
  @media (max-width: 601px) {
    #kids-menu {
      grid-template-areas:
        "title"
        "mini-pancakes"
        "grilled-cheese"
        "fruit-cup";
      /* Stack the items vertically */
      grid-template-columns: 1fr;
      /* Single column layout */
    }
  
    #kids-menu h2 {
      font-size: 1.5rem;
      /* Adjust title size for smaller screens */
    }
  
    #kids-menu article {
      padding: 10px;
      /* Reduce padding within items for smaller screens */
    }
  
    #kids-menu article p {
      font-size: 0.8rem;
      /* Adjust font size for better readability on smaller screens */
    }
  }
  
  /* ========== Seasonal Specials Section ========== */
  /* Section for highlighting seasonal specials. */
  #seasonal-specials {
    display: grid;
    grid-template-areas:
      "title title"
      /* Title spans both columns. */
      "pumpkin-lemonade berry-lemonade";
    /* Seasonal items in two columns. */
    grid-template-columns: repeat(2, 1fr);
    /* Two equal columns. */
    grid-template-rows: auto 1fr;
    /* Rows adjust dynamically. */
    gap: 20px;
    /* Adds space between items. */
    padding: 20px;
    /* Adds padding around the section. */
  }
  
  #seasonal-specials h2 {
    grid-area: title;
    text-align: center;
    font-size: 2rem;
    /* Prominent font size for the title. */
    margin-bottom: 20px;
    /* Adds spacing below the title. */
  }
  
  /* Assigns grid areas for specific seasonal items. */
  #seasonal-specials article:nth-child(2) {
    grid-area: pumpkin-lemonade;
  }
  
  #seasonal-specials article:nth-child(3) {
    grid-area: berry-lemonade;
  }
  
  #seasonal-specials article {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    /* White background for contrast. */
    padding: 15px;
    /* Adds padding within each item. */
    border-radius: 8px;
    /* Rounded corners for a polished look. */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth. */
  }
  
  #seasonal-specials article img {
    max-width: 100%;
    /* Ensures images are responsive. */
    border-radius: 8px;
    /* Adds rounded corners to images. */
  }
  
  #seasonal-specials article p {
    margin-top: 10px;
    /* Adds spacing above the text. */
    font-size: 0.9rem;
    /* Standard font size for readability. */
    color: #0A0A5E;
    /* Navy blue text for branding consistency. */
  }
  
  /* Responsive adjustments for tablet and smaller devices */
  @media (max-width: 601px) {
    #seasonal-specials {
      grid-template-areas:
        "title"
        "pumpkin-lemonade"
        "berry-lemonade";
      /* Stack the items vertically */
      grid-template-columns: 1fr;
      /* Single column layout */
    }
  
    #seasonal-specials h2 {
      font-size: 1.5rem;
      /* Adjust title size for smaller screens */
    }
  
    #seasonal-specials article {
      padding: 10px;
      /* Reduce padding within items for smaller screens */
    }
  
    #seasonal-specials article p {
      font-size: 0.8rem;
      /* Adjust font size for better readability on smaller screens */
    }
  }
  
  /*===================BLOG PAGE===========*/
  
  /* The .intro class defines the styling and layout for the introduction section of the page */
  .intro {
    display: grid;
    /* Uses a grid layout for arranging child elements */
    grid-template-areas:
      "title"
      "description";
    /* Defines grid areas */
    grid-template-columns: 1fr;
    /* One column grid */
    grid-template-rows: auto auto;
    /* Automatically sizes rows */
    gap: 10px;
    /* Space between grid rows */
    padding: 20px;
    /* Padding inside the container */
    text-align: center;
    /* Center-align text */
    background: #FFFFE0;
    /* Light yellow background */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
  }
  
  /* Styles the h2 element inside the .intro class */
  .intro h2 {
    grid-area: title;
    /* Assigns this element to the 'title' grid area */
    font-size: 2rem;
    /* Font size for emphasis */
    margin-bottom: 10px;
    /* Spacing below the title */
  }
  
  /* Styles the paragraph element inside the .intro class */
  .intro p {
    grid-area: description;
    /* Assigns this element to the 'description' grid area */
    font-size: 1rem;
    /* Standard font size */
    color: #0A0A5E;
    /* Dark blue text color */
  }
  
  /* The .blog-articles class defines the layout and styling for a grid of blog articles */
  .blog-articles {
    display: grid;
    /* Grid layout */
    grid-template-areas:
      "section-title section-title section-title section-title"
      "card1 card2 card3 card4";
    /* Grid areas for the layout */
    grid-template-columns: repeat(4, 1fr);
    /* Four equal columns */
    grid-template-rows: auto 1fr;
    /* Flexible row heights */
    gap: 20px;
    /* Spacing between grid items */
    padding: 20px;
    /* Padding inside the container */
    background: #ffffff;
    /* White background */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
  }
  
  /* Styles the title element inside the .blog-articles class */
  .blog-articles .section-title {
    grid-area: section-title;
    /* Full-width title */
    text-align: center;
    /* Center text */
    font-size: 2rem;
    /* Emphasized font size */
    margin-bottom: 20px;
    /* Spacing below the title */
  }
  
  .blog-articles .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    background: #FFFFE0;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  
  /* Styles for images inside the cards */
  .blog-articles .card img {
    max-width: 100%;
    /* Full-width images */
    border-radius: 8px;
    /* Rounded corners */
    margin-top: 10px;
    /* Spacing above the image */
  }
  
  /* Styles for the title (h4) inside the cards */
  .blog-articles .card h4 {
    font-size: 1.25rem;
    /* Slightly larger font size */
    margin-bottom: 10px;
    /* Spacing below the title */
    color: #FF0707;
    /* Red color for emphasis */
  }
  
  /* Styles for paragraphs inside the cards */
  .blog-articles .card p {
    font-size: 1rem;
    /* Standard font size */
    margin-bottom: 15px;
    /* Spacing below the paragraph */
    color: #0A0A5E;
    /* Dark blue text color */
  }
  
  /* Styles for the button inside the cards */
  .blog-articles .card .button {
    display: inline-block;
    /* Inline block for flexibility */
    margin-top: 10px;
    /* Spacing above the button */
    padding: 10px 20px;
    /* Padding for a clickable area */
    font-size: 0.9rem;
    /* Slightly smaller font size */
    text-decoration: none;
    /* No underline */
    color: #FFFFE0;
    /* White text */
    background: #0A0A5E;
    /* Dark blue background */
    border-radius: 5px;
    /* Rounded corners */
    transition: background 0.3s ease;
    /* Smooth transition effect */
  }
  
  /* Hover effect for the button */
  .blog-articles .card .button:hover {
    background: #FF0707;
    /* Red on hover */
  }
  
  /* Assigns specific cards to grid areas */
  .blog-articles .card1 {
    grid-area: card1;
  }
  
  .blog-articles .card2 {
    grid-area: card2;
  }
  
  .blog-articles .card3 {
    grid-area: card3;
  }
  
  .blog-articles .card4 {
    grid-area: card4;
  }
  
  /*===================Newsletter Section===========*/
  .newsletter-section {
    display: grid;
    /* Use grid layout to structure the newsletter form */
    grid-template-areas:
      /* Define named grid areas for layout clarity */
      "title"
      "description"
      "email"
      "terms"
      "button"
      "footer";
    grid-template-columns: 1fr;
    /* Single-column layout */
    gap: 1rem;
    /* Add spacing between grid items */
    max-width: 600px;
    /* Limit the maximum width for a compact layout */
    margin: 2rem auto;
    /* Center the section horizontally */
    padding: 1.5rem;
    /* Add padding inside the section */
    border: 1px solid #ddd;
    /* Add a light gray border */
    border-radius: 8px;
    /* Round the corners of the section */
    background-color: #FFFFE0;
    /* Use a light yellow background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Add a subtle shadow for depth */
    text-align: center;
    /* Center-align all text */
  }
  
  .newsletter-section h2 {
    grid-area: title;
    /* Assign the title to the "title" grid area */
    font-size: 1.5rem;
    /* Set a prominent font size for the title */
  }
  
  .newsletter-section p {
    grid-area: description;
    /* Assign description text to the "description" grid area */
    margin: 0.5rem 0;
    /* Add vertical spacing */
  }
  
  .newsletter-section label {
    grid-area: email;
    /* Assign email input label to the "email" grid area */
    display: block;
    /* Ensure the label spans the full width */
    margin: 0.5rem 0;
    /* Add spacing around the label */
    font-size: 1rem;
    /* Set a readable font size */
  }
  
  .newsletter-section input[type="email"] {
    width: 100%;
    /* Make the email input take up full width */
    padding: 0.75rem;
    /* Add padding inside the input */
    margin: 0.5rem 0;
    /* Add spacing around the input */
    border: 1px solid #ccc;
    /* Use a light gray border */
    border-radius: 4px;
    /* Slightly round the corners */
    font-size: 1rem;
    /* Set a consistent font size */
    box-sizing: border-box;
    /* Include padding and border in width calculation */
  }
  
  .newsletter-section label input[type="checkbox"] {
    margin-right: 0.5rem;
    /* Add spacing to the right of the checkbox */
    vertical-align: middle;
    /* Align the checkbox with the text */
  }
  
  .newsletter-section button {
    grid-area: button;
    /* Assign the button to the "button" grid area */
    padding: 0.75rem 1.5rem;
    /* Add padding for a clickable size */
    font-size: 1rem;
    /* Set a readable font size */
    background-color: #0A0A5E;
    /* Use a dark blue background color */
    color: #FFFFE0;
    /* Use white text for contrast */
    border: none;
    /* Remove the border */
    border-radius: 4px;
    /* Slightly round the corners */
    cursor: pointer;
    /* Change cursor to pointer on hover */
    transition: background-color 0.3s;
    /* Smooth transition for hover effect */
  }
  
  .newsletter-section button:hover {
    background-color: #FF0707;
    /* Change button color to red on hover */
  }
  
  .newsletter-section .footer-text {
    grid-area: footer;
    /* Assign footer text to the "footer" grid area */
    font-size: 0.875rem;
    /* Use a smaller font size for less emphasis */
    color: #0A0A5E;
    /* Use dark blue for text */
  }
  
  .newsletter-section .footer-text a {
    color: #0A0A5E;
    /* Match link color with text */
    text-decoration: none;
    /* Remove underline from links */
  }
  
  .newsletter-section .footer-text a:hover {
    text-decoration: underline;
    /* Underline links on hover */
  }
  
  /* Mobile and Tablet Responsiveness */
  @media (max-width: 768px) {
  
    /* Intro Section */
    .intro {
      padding: 10px;
      /* Reduce padding for smaller screens */
      font-size: 1rem;
      /* Adjust font size for readability */
    }
  
    .intro h2 {
      font-size: 1.5rem;
      /* Slightly reduce heading size */
    }
  
    .intro p {
      font-size: 0.9rem;
      /* Reduce paragraph text size */
    }
  
    /* Blog Articles Section */
    .blog-articles {
      grid-template-columns: 1fr;
      /* Switch to single-column layout */
      grid-template-areas:
        /* Define single-column grid structure */
        "section-title"
        "card1"
        "card2"
        "card3"
        "card4";
    }
  
    .blog-articles .card {
      padding: 10px;
      /* Adjust padding for smaller cards */
      margin-bottom: 15px;
      /* Add spacing between cards */
    }
  
    .blog-articles .card h4 {
      font-size: 1.1rem;
      /* Adjust heading size in cards */
    }
  
    .blog-articles .card p {
      font-size: 0.9rem;
      /* Adjust paragraph size in cards */
    }
  
    /* Newsletter Section */
    .newsletter-section {
      padding: 10px;
      /* Reduce padding for compact layout */
      gap: 0.5rem;
      /* Reduce spacing between elements */
    }
  
    .newsletter-section h2 {
      font-size: 1.2rem;
      /* Adjust heading size */
    }
  
    .newsletter-section input[type="email"] {
      padding: 0.5rem;
      /* Reduce input padding */
    }
  
    .newsletter-section button {
      padding: 0.5rem 1rem;
      /* Adjust button padding */
    }
  }
  
  @media (max-width: 480px) {
  
    /* Intro Section */
    .intro h2 {
      font-size: 1.2rem;
      /* Further reduce heading size */
    }
  
    .intro p {
      font-size: 0.8rem;
      /* Adjust paragraph text size */
    }
  
    /* Blog Articles Section */
    .blog-articles {
      gap: 15px;
      /* Increase spacing between elements */
    }
  
    .blog-articles .card {
      font-size: 0.9rem;
      /* Adjust font size for cards */
    }
  
    /* Newsletter Section */
    .newsletter-section h2 {
      font-size: 1rem;
      /* Adjust heading size for smaller screens */
    }
  
    .newsletter-section button {
      font-size: 0.9rem;
      /* Adjust button font size */
    }
  }
  
  
  /* Main Layout */
  #contact-page {
    display: grid;
    /* Grid layout for the contact page */
    grid-template-areas:
      "contact-info contact-form";
    /* Two-column layout for contact info and form */
    grid-template-columns: 1fr 1fr;
    /* Equal-width columns */
    gap: 40px;
    /* Adds space between columns */
    padding: 40px;
    /* Padding around the entire layout */
    max-width: 1200px;
    /* Centers the layout and limits its width */
    margin: 0 auto;
    /* Centers the layout horizontally */
    background-color: #FFFFE0;
    /* Soft yellow background for a friendly appearance */
    border-radius: 16px;
    /* Rounds corners for aesthetics */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    /* Shadow for depth */
  }
  
  /* Contact Information Section */
  .contact-info {
    grid-area: contact-info;
    /* Assigns this section to 'contact-info' grid area */
    display: flex;
    /* Flexbox layout for flexible alignment */
    justify-content: space-between;
    /* Spreads items evenly across the row */
    align-items: flex-start;
    /* Aligns items to the top */
    gap: 30px;
    /* Adds spacing between items */
    background-color: #ffffff;
    /* White background for cards */
    padding: 40px;
    /* Adds inner spacing */
    border-radius: 12px;
    /* Rounds corners for a modern look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for depth */
    overflow: hidden;
    /* Prevents content from spilling out of the container */
    box-sizing: border-box;
    /* Ensures padding is included in the total width */
  }
  
  
  .contact-info h2 {
    color: #0A0A5E;
    /* Dark blue for headings */
    font-size: 2rem;
    /* Prominent font size */
    text-align: center;
    /* Centers the title */
    flex-basis: 100%;
    /* Full width for title */
    margin-bottom: 30px;
    /* Adds spacing below the title */
    font-family: 'Lato', sans-serif;
    /* Modern, readable font */
    letter-spacing: 1px;
    /* Adds spacing between letters for emphasis */
    font-weight: 700;
    /* Bold font for prominence */
    text-transform: uppercase;
    /* Capitalizes all letters for a bold appearance */
  }
  
  /* Individual contact items within the contact info section */
  .contact-info .contact-item {
    display: flex;
    /* Flexbox for icon and text alignment */
    flex-direction: column;
    /* Stacks icon and text vertically */
    align-items: center;
    /* Centers content horizontally */
    text-align: center;
    /* Centers text */
    gap: 15px;
    /* Adds spacing between elements */
    flex: 1;
    /* Ensures equal spacing for all items */
    max-width: 250px;
    /* Limits the width for a clean layout */
    padding: 20px;
    /* Adds padding inside each card */
    border-radius: 8px;
    /* Rounds the corners */
    background-color: #ffffff;
    /* White background for contrast */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transitions on hover */
    word-wrap: break-word;
    /* Ensures long text or links wrap properly */
    box-sizing: border-box;
    /* Includes padding in the total width */
  }
  
  .contact-info .contact-item:hover {
    transform: translateY(-5px);
    /* Moves the card up slightly on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    /* Adds shadow effect on hover */
  }
  
  .contact-info img {
    width: 50px;
    /* Fixed width for icons */
    height: 50px;
    /* Fixed height for icons */
  }
  
  .contact-info address,
  .contact-info p,
  .contact-info dl {
    margin: 0;
    /* Removes default margin */
    color: #0A0A5E;
    /* Dark blue for text */
    font-size: 1rem;
    /* Standard font size for readability */
    line-height: 1.5;
    /* Improves readability with proper spacing */
    font-family: 'Lato', sans-serif;
    /* Ensures consistent typography */
    text-align: center;
    /* Centers the text */
  }
  
  .contact-info a {
    color: #0A0A5E;
    /* Dark blue for links */
    font-weight: bold;
    /* Makes links stand out */
    text-decoration: none;
    /* Removes underline for a cleaner look */
    transition: color 0.3s ease;
    /* Smooth transition for hover effects */
    word-wrap: break-word;
    /* Breaks long links to fit within the layout */
  }
  
  .contact-info a:hover {
    color: #FF0707;
    /* Bright red on hover for emphasis */
  }
  
  .contact-info .hours dt {
    font-weight: bold;
    /* Emphasizes the term (day or time category) */
    color: #0A0A5E;
    /* Dark blue for consistency */
  }
  
  .contact-info .hours dd {
    margin: 0 0 10px 0;
    /* Adds spacing below each definition */
    color: #0A0A5E;
    /* Matches the rest of the text */
  }
  
  /* Responsive Layout */
  @media (max-width: 768px) {
    #contact-page {
      grid-template-areas:
        "contact-info"
        /* Stacks contact info above the form */
        "contact-form";
      /* Moves the form below the contact info */
      grid-template-columns: 1fr;
      /* Single-column layout for small screens */
    }
  
    .contact-info {
      flex-direction: column;
      /* Changes layout to vertical stacking */
      align-items: center;
      /* Centers the content horizontally */
      gap: 20px;
      /* Reduces the gap for better spacing on smaller screens */
    }
  
  
    .contact-info .contact-item {
      max-width: 100%;
      /* Remove width constraint for stacking */
      text-align: center;
      /* Center text for smaller screens */
    }
  }
  
  /* Contact Form Section */
  .contact-form {
    grid-area: contact-form;
    /* Places the form in the defined grid area */
    background-color: #FFFFE0;
    /* Matches the overall theme with a light yellow background */
    padding: 20px;
    /* Adds inner spacing for a clean look */
    border-radius: 8px;
    /* Rounds corners for modern aesthetics */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
  }
  
  .contact-form h2 {
    font-size: 1.8em;
    /* Slightly larger font size for the form heading */
    margin-bottom: 20px;
    /* Adds spacing below the heading */
    color: #0A0A5E;
    /* Dark blue for contrast and readability */
    text-align: center;
    /* Centers the heading */
  }
  
  .contact-form form {
    display: flex;
    /* Uses flexbox for alignment */
    flex-direction: column;
    /* Stacks form fields vertically */
    gap: 15px;
    /* Adds space between form elements */
  }
  
  .contact-form label {
    font-weight: bold;
    /* Highlights labels for clarity */
    margin-bottom: 5px;
    /* Adds spacing between label and input */
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    width: 100%;
    /* Ensures full width for form elements */
    padding: 10px;
    /* Adds spacing inside the elements */
    border: 1px solid #ccc;
    /* Light border for form fields */
    border-radius: 5px;
    /* Rounds corners for better design */
    font-size: 1em;
    /* Standard font size for readability */
  }
  
  .contact-form input:focus,
  .contact-form textarea:focus {
    border-color: #0A0A5E;
    /* Changes border color to blue on focus */
    outline: none;
    /* Removes default browser outline for focus */
    box-shadow: 0 0 5px rgba(10, 10, 94, 0.5);
    /* Adds glow effect for focus */
  }
  
  .contact-form textarea {
    resize: vertical;
    /* Allows users to adjust the height of the text area */
  }
  
  /* Contact Form Button Styling */
  .contact-form button {
    background-color: #0A0A5E;
    /* Dark blue background to match the theme */
    color: #FFFFE0;
    /* White text for contrast and readability */
    border: none;
    /* Removes default button borders */
    cursor: pointer;
    /* Changes cursor to pointer to indicate interactivity */
    font-size: 1.1em;
    /* Slightly larger font size for emphasis */
    font-weight: bold;
    /* Bold text for better visibility */
    transition: background-color 0.3s ease;
    /* Smooth transition effect on hover */
  }
  
  .contact-form button:hover {
    background-color: #0A0A5E;
    /* Same background color; you might want to modify for a noticeable hover effect */
  }
  
  
  /* Terms and Conditions Checkbox */
  input[type="checkbox"] {
    margin-right: 10px;
    /* Adds spacing between checkbox and label */
    width: 18px;
    /* Defines the width of the checkbox */
    height: 18px;
    /* Defines the height of the checkbox */
    accent-color: #0A0A5E;
    /* Changes the checkbox color to match the theme */
  }
  
  /* Label Styling */
  label {
    font-size: 1em;
    /* Standard font size for readability */
    color: #0A0A5E;
    /* Dark blue color to maintain theme consistency */
    line-height: 1.4;
    /* Ensures proper spacing for multiline text */
    cursor: pointer;
    /* Makes the label clickable for better user experience */
  }
  
  label a {
    color: #0A0A5E;
    /* Dark blue color for links */
    text-decoration: none;
    /* Removes underline for cleaner design */
    font-weight: bold;
    /* Bold text to emphasize the link */
    transition: color 0.3s ease;
    /* Smooth transition effect on hover */
  }
  
  label a:hover {
    color: #FF0707;
    /* Changes link color to bright red on hover for emphasis */
  }
  
  /* Responsive Design Adjustments */
  @media (max-width: 768px) {
    #contact-page {
      grid-template-areas:
        "contact-info"
        /* Stacks contact info above the form */
        "contact-form";
      /* Moves the form below the contact info */
      grid-template-columns: 1fr;
      /* Changes to a single-column layout */
      gap: 20px;
      /* Reduces gap for smaller screens */
    }
  }
  
  
  /* ========== General Breakpoints ========== */
  /* Styling adjustments for larger screens (min width: 1024px). */
  @media (min-width: 1024px) {
    body {
      font-size: 16px;
      /* Standard font size for desktops. */
    }
  
    header {
      padding: 15px 30px;
      /* Adds padding for a balanced layout. */
    }
  
    #hero-heading {
      font-size: 2.5rem;
      /* Larger heading size for desktops. */
    }
  
    footer h3 {
      font-size: 1.5rem;
      /* Increases footer heading size. */
    }
  
    .contact-form {
      padding: 30px;
      /* Adds extra padding for larger screens. */
    }
  }
  
  /* Adjustments for tablets (max width: 1024px). */
  @media (max-width: 601px) {
    body {
      font-size: 15px;
      /* Slightly smaller font size for tablets. */
    }
  
    header {
      grid-template-areas:
        "brand menu"
        "nav nav";
      /* Adapts the header layout for smaller screens. */
      grid-template-columns: auto 1fr;
      /* Adjusts column widths. */
    }
  
    .desktop-nav {
      display: none;
      /* Hides desktop navigation on tablets. */
    }
  
    .mobile-menu-btn {
      display: block;
      /* Displays the mobile menu button. */
    }
  
    /* Adjustments for various sections on tablets. */
    #hero,
    #our-story,
    #team,
    #testimonials,
    .blog-articles,
    #contact-page,
    footer {
      grid-template-columns: 1fr;
      /* Single-column layout for smaller screens. */
    }
  }
  
  /* ========== Section-Specific Grid Layouts ========== */
  /* Hero Section */
  #hero {
    grid-template-areas:
      "heading"
      /* Heading spans the first row. */
      "image"
      /* Image occupies the second row. */
      "para"
      /* Paragraph/text spans the third row. */
      "buttons";
    /* Buttons are placed in the last row. */
    grid-template-columns: 1fr;
    /* Single-column layout. */
  }
  
  /* Our Story Section */
  #our-story {
    grid-template-columns: 1fr;
    /* Single-column layout. */
    grid-template-areas:
      "heading"
      /* Heading spans the first row. */
      "image"
      /* Image occupies the second row. */
      "text";
    /* Text spans the last row. */
  }
  
  /* Team Section */
  #team {
    grid-template-columns: 1fr;
    /* Single-column layout. */
    grid-template-areas:
      "heading"
      /* Heading in the first row. */
      "image"
      /* Image in the second row. */
      "text";
    /* Text spans the third row. */
  }
  
  /* Testimonials Section */
  #testimonials {
    grid-template-columns: 1fr;
    /* Single-column layout. */
    grid-template-areas:
      "heading"
      /* Heading in the first row. */
      "testimonial1"
      /* First testimonial spans the second row. */
      "testimonial2";
    /* Second testimonial spans the third row. */
  }
  
  /* Contact Page */
  #contact-page {
    grid-template-areas:
      "contact-info"
      /* Contact info spans the first row. */
      "contact-form";
    /* Contact form spans the second row. */
    grid-template-columns: 1fr;
    /* Single-column layout. */
  }
  
  /* ========== Mobile Design Adjustments (Up to 600px) ========== */
  @media (max-width: 600px) {
    body {
      font-size: 14px;
      /* Reduces base font size for smaller screens. */
    }
  
    header {
      grid-template-areas:
        "brand menu";
      /* Simplifies header layout for mobile. */
      grid-template-columns: 1fr auto;
      /* Adjusts columns for smaller screens. */
      padding: 10px 15px;
      /* Reduces padding for compact layout. */
    }
  
    .logo {
      width: 40px;
      /* Shrinks logo size for smaller screens. */
      height: 40px;
    }
  
    .header-title {
      font-size: 1.2rem;
      /* Reduces font size for header titles. */
    }
  
    #hero {
      padding: 15px;
      /* Adds inner padding for balance. */
    }
  
    #hero-heading {
      font-size: 1.5rem;
      /* Reduces heading font size for readability on small screens. */
    }
  
  
    #services h2,
    #testimonials-heading,
    #intro h2 {
      font-size: 1.5rem;
      /* Ensures section titles remain readable. */
    }
  
    #our-story {
      grid-template-columns: 1fr;
      grid-template-areas:
        "heading"
        "image"
        "text";
    }
  
  
    .contact-form {
      padding: 15px;
      /* Reduces padding for a compact form layout. */
    }
  
  
  }
  
  footer h3 {
    font-size: 1rem;
    /* Reduces footer heading size for smaller screens. */
  }
  
  footer a {
    font-size: 0.85rem;
    /* Shrinks link font size in the footer. */
  }
  
  footer #social-media a img {
    max-width: 30px;
    /* Shrinks social media icons for compact design. */
  }
  
  
  /* ========== Extra Small Screens (Up to 480px) ========== */
  @media (max-width: 360px) {
  
    header {
      padding: 10px;
      /* Reduces padding for compact layout. */
    }
  
    .header-title {
      font-size: 1rem;
      /* Shrinks font size for header titles. */
    }
  
    .mobile-menu-btn {
      font-size: 1.2rem;
      /* Increases button size for better usability. */
    }
  
    #hero {
      padding: 10px;
      /* Reduces padding for smaller screens. */
    }
  
    #hero-heading {
      font-size: 1.2rem;
      /* Further reduces heading font size for readability. */
    }
  
    footer {
      font-size: 0.8rem;
      /* Shrinks footer text for compact design. */
  
    }
  
    /* ========== Section-Specific Adjustments ========== */
    /* Header */
    @media (max-width: 601px) {
      .desktop-nav {
        display: none;
        /* Hides desktop navigation. */
      }
  
      .mobile-menu-btn {
        display: block;
        /* Displays mobile menu button. */
      }
  
      .overlay-nav-link {
        font-size: 1rem;
        /* Adjusts overlay navigation link font size. */
      }
    }
  
    /* Hero Section */
    @media (max-width: 601px) {
      #hero {
        grid-template-columns: 1fr;
        /* Stacks content in a single column. */
        grid-template-areas:
          "heading"
          "image"
          "para"
          "buttons";
      }
  
      .hero-buttons .btn {
        padding: 8px 15px;
        /* Reduces button padding for smaller screens. */
        font-size: 0.9rem;
        /* Shrinks font size for buttons. */
      }
    }
  
  
    /* Contact Page */
    @media (max-width: 601px) {
      #contact-page {
        grid-template-areas:
          "contact-info"
          "contact-form";
        /* Stacks contact sections vertically. */
        grid-template-columns: 1fr;
        /* Single-column layout. */
      }
  
      .contact-form input,
      .contact-form textarea,
      .contact-form button {
        font-size: 0.85rem;
        /* Shrinks form element font size for smaller screens. */
      }
    }
  
    /* Footer */
    @media (max-width: 601px) {
      footer {
        grid-template-areas:
          "contact"
          "social"
          "legal"
          "footer-bottom";
        /* Stacks footer content vertically. */
      }
    }
  }
  
  
  /* ========== Tablet-Specific Adjustments (601px to 768px) ========== */
  @media (max-width: 601px) and (min-width: 962px) {
    .mobile-menu-btn {
      display: block;
      /* Ensure the button is visible */
      position: absolute;
      /* Position the button precisely */
      top: 50%;
      /* Center vertically */
      right: 20px;
      /* Place the button near the right edge */
      transform: translateY(-50%);
      /* Adjust for precise vertical centering */
      font-size: 1.5rem;
      /* Ensure visibility */
    }
  }
  
  
  /* ========== Section Padding and Spacing Adjustments for Small Screens ========== */
  @media (max-width: 360px) {
    #our-story {
      padding: 0;
      /* Removes padding around the section for compact layout. */
      gap: 0;
      /* Eliminates spacing between elements for a tighter design. */
      margin-bottom: 0;
      /* Removes space below the section. */
    }
  
    #services {
      padding: 0;
      /* Removes padding around the section for better fit. */
      margin-top: 0;
      /* Eliminates space above the section. */
    }
  }
  
  
  /* ========== General Stacking Rule for Small Screens ========== */
  @media (max-width: 360px) {
  
    /* Applies consistent stacking for all sections. */
    #intro,
    #beverages,
    #food-options,
    #kids-menu,
    #seasonal-specials {
      display: flex;
      /* Changes layout to flexbox for stacking. */
      flex-direction: column;
      /* Stacks items vertically. */
      align-items: center;
      /* Centers items horizontally. */
      text-align: center;
      /* Centers text alignment for better readability. */
      gap: 1.5rem;
      /* Adds space between stacked items for visual clarity. */
      padding: 1.5rem 1rem;
      /* Reduces padding for smaller screens. */
    }
  
  
    /* Adjust headers for better readability on smaller screens. */
    #intro h2,
    #beverages h2,
    #food-options h2,
    #kids-menu h2,
    #seasonal-specials h2 {
      font-size: 1.5rem;
      /* Reduces font size for headings. */
      margin-bottom: 1rem;
      /* Adds space below headings for separation. */
    }
  
    /* Styling for articles (menu items) in smaller screens. */
    #beverages article,
    #food-options article,
    #kids-menu article,
    #seasonal-specials article {
      width: 100%;
      /* Ensures articles take full width for better fit. */
      max-width: 500px;
      /* Limits width for better visuals. */
      display: flex;
      /* Uses flexbox for consistent alignment. */
      flex-direction: column;
      /* Stacks content vertically within the article. */
      align-items: center;
      /* Centers content inside the article. */
      background: #ffffff;
      /* Adds white background for distinction. */
      padding: 15px;
      /* Adds inner padding for better readability. */
      border-radius: 8px;
      /* Adds rounded corners for a polished look. */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      /* Subtle shadow for depth. */
      margin: 0 auto;
      /* Centers the articles horizontally. */
    }
  
    /* Images inside articles */
    article img {
      width: 100%;
      /* Ensures images scale proportionally to their container. */
      max-width: 400px;
      /* Sets a maximum width for images. */
      height: auto;
      /* Maintains the aspect ratio of the image. */
      border-radius: 8px;
      /* Adds rounded corners for the images. */
    }
  
  }
  
  /* ===== General Breakpoints ===== */
  
  /* Large Desktop: 1024px and above */
  @media (min-width: 1024px) {
    body {
      font-size: 16px;
      /* Set a default font size for large screens */
    }
  
    header {
      padding: 15px 30px;
      /* Add consistent spacing for header */
    }
  
    #hero-heading {
      font-size: 2.5rem;
      /* Larger font size for hero heading */
    }
  
    footer h3 {
      font-size: 1.5rem;
      /* Emphasize footer headings */
    }
  
    .contact-form {
      padding: 30px;
      /* Add comfortable spacing around the contact form */
    }
  }
  
  /* Tablet: 601px to 1024px */
  @media (max-width: 1024px) {
    body {
      font-size: 15px;
      /* Slightly smaller font size for tablets */
    }
  
    header {
      grid-template-areas:
        /* Define header layout for tablets */
        "brand menu"
        "nav nav";
      grid-template-columns: auto 1fr;
    }
  
    .desktop-nav {
      display: none;
      /* Hide desktop navigation on tablets */
    }
  
    .mobile-menu-btn {
      display: block;
      /* Show mobile menu button on tablets */
    }
  
    #hero {
      grid-template-areas:
        /* Adjust hero layout for tablets */
        "heading"
        "image"
        "para"
        "buttons";
      grid-template-columns: 1fr;
    }
  
    #our-story {
      grid-template-columns: 1fr;
      /* Single-column layout for tablets */
      grid-template-areas:
        /* Define grid areas for \"Our Story\" section */
        "heading"
        "image"
        "text";
    }
  
    .barista-image {
      grid-area: image;
      /* Assign image to its grid area */
      margin: 0 auto;
      /* Center image horizontally */
      width: auto;
      /* Flexible width */
      max-width: 80%;
      /* Limit image width for balance */
    }
  
    .team-description {
      grid-area: text;
      /* Assign text to its grid area */
      padding: 1rem;
      /* Add spacing around text */
      text-align: center;
      /* Center-align text for tablets */
    }
  
    #testimonials {
      grid-template-columns: 1fr;
      /* Single-column layout for testimonials */
      grid-template-areas:
        /* Define grid areas */
        "heading"
        "testimonial1"
        "testimonial2";
    }
  
    #contact-page {
      grid-template-areas:
        /* Adjust contact page layout */
        "contact-info"
        "contact-form";
      grid-template-columns: 1fr;
      /* Single-column layout */
    }
  
    footer {
      grid-template-areas:
        /* Adjust footer layout for tablets */
        "contact"
        "social"
        "legal"
        "footer-bottom";
      grid-template-columns: 1fr;
    }
  }
  
  /* Mobile: Up to 600px */
  @media (max-width: 360px) and (max-height: 640px) {
    body {
      font-size: 14px;
      /* Smaller font size for mobile devices */
    }
  
    header {
      grid-template-areas:
        /* Simplify header layout */
        "brand menu";
      grid-template-columns: 1fr auto;
      padding: 10px 15px;
      /* Reduce padding for compact design */
    }
  
    .logo {
      width: 40px;
      /* Adjust logo size */
      height: 40px;
    }
  
    .header-title {
      font-size: 1.2rem;
      /* Adjust font size for title */
    }
  
    #hero {
      padding: 15px;
      /* Add spacing around hero section */
    }
  
    #hero-heading {
      font-size: 1.5rem;
      /* Reduce font size for hero heading */
    }
  
    #services h2,
    #testimonials-heading,
    #intro h2 {
      font-size: 1.5rem;
      /* Standardize font sizes across sections */
    }
  
    #our-story {
      grid-template-columns: 1fr;
      /* Single-column layout for \"Our Story\" */
      grid-template-areas:
        "heading"
        "image"
        "text";
    }
  
    .contact-form {
      padding: 15px;
      /* Reduce padding for smaller screens */
    }
  
    footer h3 {
      font-size: 1rem;
      /* Adjust font size for footer headings */
    }
  
    footer a {
      font-size: 0.85rem;
      /* Reduce font size for links */
    }
  
    footer #social-media a img {
      max-width: 30px;
      /* Limit size of social media icons */
    }
  }
  
  /* Extra Small Screens: Up to 480px */
  @media (max-width: 360px) {
    @media (max-height: 640px) {
      header {
        padding: 10px;
        /* Minimal padding for extra small screens */
      }
  
      .header-title {
        font-size: 1rem;
        /* Adjust title size for small devices */
      }
  
      .mobile-menu-btn {
        font-size: 1.2rem;
        /* Adjust button size */
      }
  
      #hero {
        padding: 10px;
        /* Reduce padding for hero section */
      }
  
      #hero-heading {
        font-size: 1.2rem;
        /* Adjust font size for hero heading */
      }
  
      footer {
        font-size: 0.8rem;
        /* Reduce overall footer font size */
      }
    }
  }
  
  /* ===== Section-Specific Adjustments ===== */
  
  /* Header */
  @media (max-width: 768px) {
    .desktop-nav {
      display: none;
      /* Hide desktop navigation for smaller screens */
    }
  
    .mobile-menu-btn {
      display: block;
      /* Show mobile menu button */
    }
  
    .overlay-nav-link {
      font-size: 1rem;
      /* Adjust font size for overlay navigation */
    }
  }
  
  /* Hero Section */
  @media (max-width: 768px) {
    #hero {
      grid-template-columns: 1fr;
      /* Single-column layout for hero section */
      grid-template-areas:
        "heading"
        "image"
        "para"
        "buttons";
    }
  
    .hero-buttons .btn {
      padding: 8px 15px;
      /* Adjust button padding */
      font-size: 0.9rem;
      /* Reduce button font size */
    }
  }
  
  /* Contact Page */
  @media (max-width: 768px) {
    #contact-page {
      grid-template-areas:
        "contact-info"
        "contact-form";
      grid-template-columns: 1fr;
      /* Single-column layout */
    }
  
    .contact-form input,
    .contact-form textarea,
    .contact-form button {
      font-size: 0.85rem;
      /* Adjust font sizes for smaller screens */
    }
  }
  
  /* Footer */
  @media (max-width: 768px) {
    footer {
      grid-template-areas:
        "contact"
        "social"
        "legal"
        "footer-bottom";
    }
  }
  
  /* Lightbox Overlay */
  .lightbox-overlay {
    position: fixed;
    /* Ensure overlay covers the entire screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Dark semi-transparent background */
    display: none;
    /* Initially hidden */
    justify-content: center;
    /* Center content horizontally */
    align-items: center;
    /* Center content vertically */
    z-index: 1000;
    /* Ensure overlay is above other content */
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease;
    /* Smooth fade-in effect */
  }
  
  /* Show Lightbox Overlay */
  .lightbox-overlay.active {
    display: flex;
    /* Make the lightbox visible */
    opacity: 1;
  }
  
  /* Lightbox Container */
  .lightbox-container {
    position: relative;
    /* Allow positioning of child elements */
    text-align: center;
    /* Center-align content */
    max-width: 90%;
    /* Limit width for large images */
    max-height: 90%;
    /* Limit height for large images */
    overflow: hidden;
    /* Prevent overflow issues */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Add spacing between elements */
    animation: fadeIn 0.3s ease-in-out;
    /* Fade-in animation */
  }
  
  /* Lightbox Image */
  .lightbox-img {
    max-width: 100%;
    /* Ensure image fits within container */
    max-height: 70vh;
    /* Prevent image from exceeding viewport height */
    border-radius: 10px;
    /* Rounded corners for image */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    /* Add shadow for depth */
    object-fit: contain;
    /* Maintain aspect ratio */
    display: block;
    /* Ensure image is displayed correctly */
  }
  
  /* Caption Text */
  .lightbox-caption {
    color: #fff;
    /* White text for visibility */
    font-size: 1rem;
    /* Standard caption font size */
    font-family: "Lato", sans-serif;
    /* Use clean sans-serif font */
    text-align: center;
    /* Center-align caption text */
    padding: 10px;
    /* Add spacing around caption */
    max-width: 80%;
    /* Limit caption width */
    word-wrap: break-word;
    /* Wrap long captions */
  }
  
  /* Navigation Buttons */
  .lightbox-nav {
    position: absolute;
    /* Position relative to the container */
    top: 50%;
    /* Center vertically */
    transform: translateY(-50%);
    /* Align vertically */
    background: rgba(255, 255, 255, 0.7);
    /* Semi-transparent button background */
    border: none;
    /* Remove border */
    font-size: 2rem;
    /* Large button size */
    padding: 0.5rem;
    /* Add spacing around button */
    cursor: pointer;
    /* Pointer cursor for interactivity */
    border-radius: 50%;
    /* Round button shape */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Add shadow for depth */
    z-index: 1001;
    /* Ensure button is above other content */
    transition: background 0.2s ease, transform 0.2s ease;
    /* Smooth hover effect */
  }
  
  .lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.9);
    /* Lighter background on hover */
    transform: scale(1.1);
    /* Slight zoom on hover */
  }
  
  .lightbox-nav-left {
    left: 20px;
    /* Adjusted spacing for left button */
  }
  
  .lightbox-nav-right {
    right: 20px;
    /* Adjusted spacing for right button */
  }
  
  /* Close Button */
  .lightbox-close {
    position: absolute;
    /* Position relative to the container */
    top: 20px;
    /* Adjust spacing from top */
    right: 20px;
    /* Adjust spacing from right */
    background: none;
    /* Transparent background */
    color: #ffffff;
    /* White color for visibility */
    font-size: 1.5rem;
    /* Standard close button size */
    border: none;
    /* Remove border */
    cursor: pointer;
    /* Pointer cursor for interactivity */
    z-index: 1001;
    /* Ensure button is above other content */
    transition: color 0.2s ease;
    /* Smooth hover effect */
  }
  
  .lightbox-close:hover {
    color: #ff7070;
    /* Subtle red highlight on hover */
  }
  
  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
      /* Start with no visibility */
    }
  
    to {
      opacity: 1;
      /* Fade in to full visibility */
    }
  }
  
  /* Prevent scroll when lightbox is active */
  body.lightbox-active {
    overflow: hidden;
    /* Disable scrolling */
  }
  
  /* Accessibility Enhancements */
  .lightbox-nav:focus,
  .lightbox-close:focus {
    outline: 2px solid #ffffff;
    /* Highlight focus for accessibility */
    outline-offset: 2px;
    /* Add spacing around focus outline */
  }