/* for all custom styling */
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:ital,wght@0,400;0,700;1,400&display=swap');

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000000;
    overflow-x: hidden; /* Prevent horizontal scroll due to full-width slides */
}

.banner { 
    width: 100%;
    height: 43px; 
    background-color: #f0cb38;
    color: #000; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem; 
    font-weight: bold;
    font-family: 'Bona Nova SC', serif;
    padding: 0.5rem 0rem;
    box-sizing: border-box;
    position: relative; /* allow absolutely positioned child */
    transition: background-color 0.3s, color 0.3s;
}

.financing-link {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: bolder;
    color: #0c8b05;
    text-decoration: none;
    transition: color 0.3s;
    letter-spacing: 0.5px;
    transition: color 0.3s, text-shadow 0.3s;
}

.financing-banner2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0;
    padding: 10px; /* optional: add space inside the border */
    transition: border-color 0.3s ease;
}

.financing-banner2 img {
    transition: transform 0.3s ease, border 0.3s ease;
}

.financing-banner2 img:hover {
    transform: scale(1.03);
}

/* Adjust text alignment for smaller screens */
@media (max-width: 768px) {
    .banner {
        font-size: 1.2rem; /* Slightly smaller font on small screens */
        text-align: center; /* Center the text */
        justify-content: center; /* Ensure horizontal centering */
    }
}

/* Hover banner ONLY if not hovering over link */
.banner:hover:not(:has(.financing-link:hover)) {
    background-color: #bda338;
    color: #fff;
}

.financing-link:hover {
    color: #fff; /* Change only the link color */
}

.acorn-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.acorn-logo img {
    max-width: 1020px; /* adjust if needed */
    height: auto;
    transition: transform 0.3s ease, border 0.3s ease;
}

.acorn-logo img:hover {
    transform: scale(1.03);
}

header {
    position: relative; /* Required to position the orange line */
    background-color: #000000;
    color: #fff;
    padding-top: 1.5rem 0; /* Adds space for the orange line */
    padding-bottom: 1.5rem;
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* Center all content */
    font-family: 'Bona Nova SC', serif;
    box-sizing: border-box; /* Ensures padding is included in height */
    margin-top: 0.3rem;
}

#logo {
    width: 220px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}

#header-content {
    flex-grow: 1; /* Allows heading and nav to take remaining space */
    text-align: center; /* Center-align the header text */
}

/* Enhance header text */
#header-content h1 {
    font-size: 3vw; /* Larger font for emphasis */
    font-weight: 700; /* Make it bolder */
    color: #e7c644; /* Orange text color to match top line */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Stronger shadow for depth */
    letter-spacing: 1px; /* Slightly spaced letters for readability */
    margin: 0;
}

/* For smaller screens, adjust the header text size */
@media (max-width: 768px) {
    #header-content h1 {
        font-size: 5vw;
    }
}

#social-media {
    display: flex;
    flex-direction: column; /* Stack icons vertically by default */
    align-items: center;
    gap: 0.5rem; /* Space between icons */
    margin-left: 1rem; /* Space between social media and navigation */
}   

.social-icons {
    display: flex; /* Display social icons in a row */
    gap: 1rem; /* Space between icons */
}

.phone-number {
    color: #e7c439; /* Match the text color with the header */
    font-size: 1.5rem; /* Adjust font size as needed */
    text-align: center; /* Center-align the phone number */
    font-family: 'Bona Nova SC', serif;
    margin-top: 1.5rem; /* Space above the phone number */
}

#social-media a {
    display: flex; /* Ensures the image is treated as a flex item */
    justify-content: center; /* Center the icons */
    margin-right: 10px; /* Added margin-right to the anchor itself */
}

#social-media img {
    width: 38px; /* Default size for other icons */
    height: auto;
    transition: transform 0.3s ease;
}

#social-media a img {
    transition: transform 0.3s ease; /* Ensure transition applies to all */
}

#social-media a img.email-icon {
    width: 48px; /* Size for Email icon */
}

#social-media a img#location-image {
    width: 46px; /* Size for Location icon */
}

#social-media a:hover img {
    transform: scale(1.1); /* Slightly enlarge icon on hover */
}

.facebook-icon {
    width: 18px !important; /* Make Facebook icon smaller */
}


nav {
    display: flex; /* Display links side by side */
    align-items: center; /* Vertically center the items */
    margin: 1rem 0; /* Default margin for larger screens */
    justify-content: center; /* Center the nav items in full screen */
}

@media (max-width: 1024px) { /* Adjust to your desired breakpoint */
    nav {
        flex-direction: column; /* Stack links vertically on smaller screens */
        margin-top: 1.5rem; /* Add margin above when stacked */
        align-items:normal; /* Align to the left when stacked */
    }
}

nav a {
    color: #ffffff;
    margin: 0 2rem;
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
    margin-top: 0.5rem; /* Add space between each link when stacked */
}

nav a:hover {
    color: #f5cd2e; /* Add a hover effect */
    transform: scale(1.1);
    text-decoration: underline;
}

section {
    padding: 2rem;
    max-width: 800px;
    margin: auto; /* Center the section */
}


/* Slideshow styles */
.slideshow-container {
    position: relative;
    width: 100vw; /* 100% of the viewport width */
    height: 100vh; /* Full height of the viewport */
    margin: 0;
    padding: 0; /* Remove any padding */
    transition: opacity 0.3s ease; /* Smooth transition */
    overflow: hidden; /* Prevent overflow */
}

.slideshow-container:hover {
    opacity: 0.8; /* Dim the slideshow when hovered */
}

.slide {
    width: 100%; /* Make each slide take the full width */
    height: 100%; /* Make each slide take the full height */
    position: absolute;
    left: 0; /* Position the slides normally */
    transition: transform 1.5s ease-in-out; /* Smooth slide transition */
    transform: translateX(100%); /* Start each slide off-screen to the right */
}

/* Adjust arrows */
.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 1rem;
    cursor: pointer;
    font-size: 2rem;
    border-radius: 50%;
    z-index: 2; /* Ensure arrows are above the slides */
    transition: background-color 0.3s ease;
}

.arrow-btn:hover {
    background-color: #f5cd2e;
    color: #000;
}

/* Left Arrow */
.left-arrow {
    left: 2%;
}

/* Right Arrow */
.right-arrow {
    right: 2%;
}

/* Button styles */
.home-consultation-btn {
    position: absolute;
    top: 87%; /* Adjust to position the button */
    left: 28%;
    transform: translate(-50%, -50%);
    padding: 1rem 2rem;
    font-size: 1.2rem;
    color: #000000;
    background-color: #e4c549;
    border: 1px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1; /* Ensure the button appears above the image */
}

/* Hover effect for all buttons */
.home-consultation-btn:hover {
    background-color: #aa9232;
    transform: translate(-50%, -50%) scale(1.1); /* Slight zoom effect on hover */
}

.home-estimate-btn {
    position: absolute;
    top: 87%; /* Adjust to position the button */
    left: 67%;
    transform: translate(-50%, -50%);
    padding: 1rem 2rem;
    font-size: 1.2rem;
    color: #000000;
    background-color: #e4c549;
    border: 1px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1; /* Ensure the button appears above the image */
}

/* Hover effect for estimate btn */
.home-estimate-btn:hover {
    background-color: #aa9232;
    transform: translate(-50%, -50%) scale(1.1); /* Slight zoom effect on hover */
}

.contact-btn {
    position: absolute;
    top: 83%; /* Adjust to position the button */
    left: 29%;
    transform: translate(-50%, -50%);
    padding: 1rem 2rem;
    font-size: 1.2rem;
    color: #000000;
    background-color: #e4c549;
    border: 1px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1; /* Ensure the button appears above the image */
}

/* Hover effect for contact button */
.contact-btn:hover {
    background-color: #aa9232;
    transform: translate(-50%, -50%) scale(1.1);
}

.style-btn {
    position: absolute;
    top: 80%; /* Adjust to position the button */
    left: 69%;
    transform: translate(-50%, -50%);
    padding: 1rem 2rem;
    font-size: 1.2rem;
    color: #000000;
    background-color: #e4c549;
    border: 1px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1; /* Ensure the button appears above the image */
}

/* Hover effect for style button */
.style-btn:hover {
    background-color: #aa9232;
    transform: translate(-50%, -50%) scale(1.1);
}

#hero {
    margin: 0;
    padding: 0;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
    border-radius: 0;
}

h2 {
    color: #fff;
    text-align: center;
    margin-top: 20px;
}

#highlights {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 1.5rem;
    padding: 1.5rem;
}

/* Responsive Design for Small Screens */
@media (max-width: 768px) {
    body {
        font-size: 90%; /* Scale down font size slightly */
    }

    header {
        flex-direction: column; /* Stack header content */
        text-align: center;
        padding: 1rem;
    }

    #logo {
        width: 150px; /* Smaller logo size */
    }

    #header-content h1 {
        font-size: 6vw; /* Adjust header text size */
        margin: 0.5rem 0;
    }

    nav {
        flex-direction: column; /* Stack nav links vertically */
        margin: 0.5rem 0;
    }

    nav a {
        margin: 0.5rem 0; /* Space between links */
        font-size: 1rem; /* Adjust font size */
    }

    .slideshow-container {
        height: 60vh; /* Reduce slideshow height */
    }

    .slide {
        height: 100%; /* Ensure slides fill reduced height */
    }

    .hero-image {
        object-fit: cover; /* Cover the available space */
    }

    .style-btn, .home-consultation-btn, .home-estimate-btn, .contact-btn {
        width: 80%; /* Make buttons wider on mobile */
        padding: 1rem; /* Adjust padding */
        font-size: 1rem; /* Scale down font size */
        left: 50%; /* Center buttons */
        top: auto; /* Let content height determine button position */
        bottom: 5%; /* Add space from the bottom */
        transform: translateX(-50%); /* Center horizontally */
    }

    .phone-number {
        font-size: 1.2rem; /* Smaller phone number text */
        margin-top: 0.5rem;
    }

    #social-media {
        gap: 0.5rem; /* Smaller gaps between icons */
        margin: 1rem 0; /* Adjust spacing */
    }

    .social-icons {
        justify-content: center; /* Center social icons */
        gap: 1rem; /* Maintain spacing */
    }

    section {
        padding: 1rem; /* Reduce padding */
    }

    .banner {
        font-size: 1rem; /* Smaller banner text */
        padding: 0.3rem;
    }
}

/* DROP DOWN SERVICE LOCATIONS //////////////////////////////////////   */
/* Dropdown Container */
.dropdown-container {
    display: flex;
    flex-direction: column; /* Stack the dropdowns vertically */
    align-items: center; /* Center the dropdowns horizontally */
    gap: 1rem; /* Add space between the dropdowns */
    margin: 0 2rem; /* Optional: Adjust space on the sides */
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Button */
  .dropbtn {
    color: #ffffff;
    margin: 0;
    text-decoration: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
  }
  
  /* Dropdown Content */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #222;
    min-width: 160px;
    z-index: 1;
    text-align: left;
    padding: 0.5rem 0;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
    border-radius: 4px;
  }
  
  /* Dropdown Items */
  .dropdown-content a {
    color: #ffffff;
    padding: 0.5rem 1rem;
    display: block;
    text-decoration: none;
    transition: background 0.3s ease;
    font-size: 0.95rem;
  }
  
  /* Hover Effects */
  .dropdown-content a:hover {
    background-color: #444;
    color: #f5cd2e;
  }
  
  /* Show Dropdown on Hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Hover on Dropdown Button */
  .dropdown:hover .dropbtn {
    color: #f5cd2e;
    transform: scale(1.1);
    text-decoration: underline;
  }
  
/* Ensure dropdown content aligns with the button */
.dropdown-container .dropdown {
    display: block;
    width: 100%; /* Ensure the dropdowns take up full width in container */
  }



  
/* Add styles for text color */
.contact-info h3, .contact-info p, .contact-info ul {
    color: #e7c644; /* Company yellow color */
}

/* Contact us section styling */
#contact-us {
    color: #e7c644; /* Company yellow color for general text */
    padding: 2rem;
    max-width: 800px;
    margin: auto;
}

#contact-us h2, #contact-us h3 {
    color: #f5cd2e; /* Slightly brighter yellow for headings */
}


/* CONTACT US PAGE BUTTONS */
#contact-banner {
    width: 100%;
    height: auto;
    margin-bottom: 20px; /* Adds spacing below the banner */
}

#contact-banner img.full-width-image {
    width: 100%;
    height: auto;
    display: block; /* Removes any unwanted spaces */
}

.contact-us-banner {
    position: relative;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Enables responsiveness */
    justify-content: space-between;
    align-items: center;
    max-width: 1600px; /* Increase max-width to make the container wider */
    margin: 0 auto; /* Center the container horizontally */
}

.contact-banner-image {
    border: 2px solid #e7c644;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 7px rgb(255, 250, 250); /* Soft shadow for depth */
    transition: all 0.3s ease; /* Smooth transition effect for hover */
    width: 65%; /* Adjusted to make it narrower */
    height: auto;
    display: block;
    margin: 0 auto; /* Centered the image */
    margin-right: 15%; /* Move the image to the right */
    margin-bottom: 40px;
}

/* Flexbox layout for buttons ------------------------------------------------------*/
/* Contact Us Banner Styling */
.contact-us-banner {
    position: relative;
    display: flex;
    flex-wrap: wrap; /* Enables responsiveness */
    justify-content: space-between;
    align-items: center;
}

/* Info Box Styling */
.info-box {
    position: absolute;
    z-index: 10;
}

.info-box.right-info {
    top: 60px;
    left: 10px;
}

.info-box.email-locate-info {
    top: 60px;
    right: 10px;
}

/* Left Buttons: Vertical Stacking */
.info-box .button-container.left-buttons {
    display: flex;
    flex-direction: column;
    gap: 75px;
    align-items: center;
}

/* Call Us Image Styling */
.call-us-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210px;
}

.call-us-image {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.call-us-image:hover {
    transform: scale(1.05);
}

/* Right Buttons: Vertical Stacking */
.info-box .email-locate-buttons {
    display: flex;
    flex-direction: column;
    gap: 85px;
    align-items: flex-end; /* Align buttons to the right */
}

/* Button Styling (Shared) */
.contact-estimate-btn,
.contact-consultation-btn,
.email-us-button button,
.locate-us-button button {
    padding: 10px 20px;
    font-size: 18px;
    color: #000;
    background-color: #e7c644;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    text-align: center;
    font-weight: bold;
    font-family: 'Bona Nova SC', serif;
    text-decoration: underline;
    width: 180px;
    height: 50px;
}

/* Button Hover Effects */
.contact-estimate-btn:hover,
.contact-consultation-btn:hover,
.email-us-button button:hover,
.locate-us-button button:hover {
    background-color: #aa9232;
    color: #ddd;
    transform: scale(1.05);
}

.contact-estimate-btn:active,
.contact-consultation-btn:active,
.email-us-button button:active,
.locate-us-button button:active {
    background-color: #8b751bb5;
}

/* Response Rate Image */
.response-rate-image {
    width: 180px;
    height: auto;
    margin-top: -15px;
    transition: transform 0.3s ease;
}

.response-rate-image:hover {
    transform: scale(1.05);
}

/* Responsive Adjustments */
@media screen and (max-width: 1310px) {
    /* Ensure consultation button stacks above the response rate image */
    .info-box .contact-consultation-btn {
        margin-bottom: 60px; /* Add space below the Consultation button */
    }
    
    .contact-us-banner {
        flex-direction: column; /* Stack items vertically */
        align-items: center;
    }

    .info-box {
        position: static; /* Allow elements to flow naturally */
        margin: 10px 0;
    }

    .info-box .button-container {
        align-items: center; /* Center items for small screens */
        gap: 50px; /* Reduced gap between buttons and elements */
    }

    .contact-estimate-btn,
    .contact-consultation-btn,
    .email-us-button button,
    .locate-us-button button {
        width: 100%; /* Slightly narrower buttons */
        max-width: 350px; /* Reduce maximum width */
        font-size: 16px; /* Smaller text */
        padding: 10px 15px; /* Thinner appearance */
        height: auto; /* Remove fixed height for flexibility */
        border-radius: 8px; /* Maintain rounded edges */
        white-space: nowrap;
    }

    .response-rate-image {
        width: 150px; /* Smaller image size */
        margin-bottom: 2px; /* Reduced space below the image */
    }
}

/* Protect Banner Styling */
.protect-banner {
    position: relative;
    width: 100vw; /* Full width */
    box-sizing: border-box;
    margin: 22px auto 0; /* Adjust bottom margin to reduce space */
}

.protect-image {
    width: 100%; /* Make sure the image spans the full width of its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove inline spacing */
}

/* Button Styling */
.protect-btn {
    position: absolute;
    top: 50%; /* Center vertically relative to the image */
    right: 7%; /* Align to the very right edge of the banner */
    transform: translateY(-50%); /* Center vertically */
    background-color: #605c4e;
    color: white;
    padding: 15px 25px;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 21px;
    text-align: center;
    line-height: 1.5;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    z-index: 10; /* Keep button above the image */
    box-sizing: border-box;
}

/* Button Hover Effect */
.protect-btn:hover {
    background-color: #434036;
    text-decoration: underline;
}

/* Responsive Styling for smaller screens */
@media (max-width: 1480px) {
    .protect-btn {
        font-size: 18px; /* Adjust font size for smaller screens */
        padding: 12px 20px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 1024px) {
    .protect-btn {
        font-size: 16px; /* Further reduce font size */
        padding: 10px 15px; /* Further reduce padding */
    }
}

@media (max-width: 768px) {
    .protect-btn {
        font-size: 10px; /* Even smaller font size */
        padding: 4px 3px; /* Even smaller padding */
    }
}

@media (max-width: 768px) {
    .contact-info h3, .contact-info p, .contact-info ul {
        font-size: 1rem; /* Adjust font size for better readability */
    }

    #contact-us {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .contact-banner-image {
        width: 90%; /* Adjust width */
        margin-bottom: 20px;
    }

    .contact-estimate-btn,
    .contact-consultation-btn {
        width: 90%;
        font-size: 1rem;
    }

    .res-com-sup-container {
        flex-direction: column;
        gap: 20px;
    }

    .res-com-sup-container img {
        width: 120px;
        height: 120px;
    }

    .highlight-description {
        font-size: 1rem;
        padding: 5px;
    }
}

.res-com-sup-container {
    display: flex;
    justify-content: center; /* Centers the images horizontally */
    align-items: stretch; /* Aligns them vertically if needed */
    gap: 100px; /* Space between the images */
    width: 100vw; /* Ensures the container spans the full viewport width */
    margin-top: 10px; /* Removes any extra margin */
    padding: 0; /* Removes any extra padding */
    box-sizing: border-box; /* Ensures padding/margin does not affect dimensions */
}

/* residential, commercial, and supplier text under circle im */
.highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Aligns content to the top */
    height: 100%; /* Makes each section take up the full height of the container */
}

/* Styling for the introductory sentences */
.highlight-intro {
    font-size: 1.2rem; /* Larger font size to make it stand out */
    font-weight: 500; /* Bold font weight for emphasis */
    color: whitesmoke; /* Highlighted color */
    margin-top: 10px; /* Adds some space above */
    margin-bottom: 15px; /* Adds space below the introductory text */
    font-family: 'Arial', sans-serif; /* Clean font */
    text-align: center; /* Centers the text */
    max-width: 380px; /* Limit the width to prevent overly long lines */
    font-weight: bold;
    font-style: italic;
}

.highlight-text {
    margin-top: 10px; /* Adds space between the image and text */
    font-size: 1.8rem; /* Larger font size for titles */
    font-weight: bold;
    color: #f8b400; /* Or any color that suits your design */
    text-decoration: underline;
    text-transform: uppercase; /* Capitalizes the title for emphasis */
}

/* Styling for the descriptive text */
.highlight-description {
    font-size: 1.1rem; /* Slightly larger text for better readability */
    color: #e0e0e0; /* Soft off-white color for contrast against dark background */
    line-height: 1.8; /* Increased line-height for readability */
    margin-top: 15px;
    padding: 10px 10px; /* Add padding for space around the text */
    border-left: 5px solid #f8b400; /* Accent border on the left side for emphasis */
    font-family: 'Arial', sans-serif; /* Clean, modern font */
    font-weight: 400; /* Standard weight for body text */
    text-align: left; /* Justify the text for a clean layout */
    font-style: italic;
    max-width: 305px; /* Limit the width to prevent overly long lines */
    margin-bottom: 20px; /* Space between paragraphs */
}

.res-com-sup-container img {
    width: 200px; /* Adjust the size of the images */
    height: 200px; /* Maintain aspect ratio */
    border-radius: 50%; /* Optional rounded corners */
    object-fit: cover; /* Consistent image styling */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
    margin-bottom: 15px;
    border: 4px solid #ffffffa0;
}

.res-com-sup-container img:hover {
    transform: scale(1.07); /* Zoom on hover */
    border: 7px solid #e7c644dc;
}

@media (max-width: 1320px) {
    .res-com-sup-container {
        flex-direction: column; /* Stacks images vertically */
        gap: 35px; /* Adjust spacing for smaller screens */
    }

    .res-com-sup-container img {
        width: 150px; /* Reduce image size for smaller screens */
        height: 150px;
    }
}

/* Ensure the body and html are set to full width */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* .why-choose-us section should take full width */
.why-choose-us {
    display: flex;
    justify-content: flex-start; /* Align content to the left */
    align-items: flex-start;
    margin-top: 40px;
    padding: 20px 40px; /* Padding to the sides */
    background-color: #1d1d1d; /* Dark background color for contrast */
    color: #e0e0e0; /* Light text for readability */
    font-family: 'Arial', sans-serif;
    width: 100%; /* Full width of the parent container */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    max-width: 100%; /* Ensure it doesn’t have any width constraints */
    border-top: 10px solid #977d26; /* White bar at the top */
}

.why-choose-us-content {
    margin-right: 50px; /* Space between content and image */
    width: 50%; /* Ensures the content takes 50% of the width */
}

.why-choose-us h2 {
    font-size: 2.4rem;
    font-weight: bold;
    color: #f8b400; /* Accent color */
    margin-bottom: 24px;
    text-transform: uppercase; /* Adds a professional touch */
    letter-spacing: 1.2px; /* Slight letter-spacing for a refined touch */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle shadow for emphasis */
    border-bottom: 3px solid #977d26; /* Underline for separation */
    padding-bottom: 10px;
}

.why-choose-us p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.8;
    max-width: 700px; /* Keeps text width from being too wide */
    text-align: justify; /* Polished alignment for professional readability */
    color: #c7c7c7; /* Slightly softer tone for paragraph text */
}

.why-choose-us-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.why-choose-us-list li {
    font-size: 1.2rem;
    margin-bottom: 10px;
    line-height: 1.6;
    text-align: left;
    max-width: 650px; /* Limit text width */
    position: relative; /* For icons or markers */
    padding-left: 35px; /* Space for custom bullet */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); /* Subtle gradient effect */
    border-radius: 5px; /* Smooth edges */
    padding: 12px;
}

.why-choose-us-list li::before {
    content: "✔"; /* Adds a checkmark icon for each item */
    font-size: 1.2rem;
    color: #f8b400; /* Matches the accent color */
    position: absolute;
    left: 0;
    top: 5px;
}

.why-choose-us-list li strong {
    color: #f8b400; /* Highlight section titles */
    font-weight: bold;
    text-transform: capitalize; /* Modern look */
    font-size: 1.2rem; /* Slightly larger for prominence */
}

/* Add hover effect for items */
.why-choose-us-list li:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight highlight on hover */
    transform: scale(1.02); /* Subtle zoom effect */
    transition: all 0.3s ease; /* Smooth transition */
}

.why-choose-us-img {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the image horizontally */
    align-items: center;
    margin-left: 100px; /* Add more space between image and text */
    margin-top: 1rem; /* Add space above the image */
}

.why-choose-us-img img {
    width: 700px;
    height: 1100px; /* Limit the height to prevent the image from being too long */
    border-radius: 10px; /* Optional: Rounded corners */
}

/* Media Query for Mobile */
@media screen and (max-width: 1124px) {
    .why-choose-us {
        flex-direction: column; /* Stack content and image on mobile */
        padding: 20px 10px; /* Reduced padding for mobile */
    }

    .why-choose-us-content, .why-choose-us-img {
        width: 100%; /* Both sections take 100% of width on mobile */
        margin: 0; /* Remove margin */
    }

    .why-choose-us-img {
        max-width: 100%; /* No image width constraints on mobile */
    }
}
    @media (max-width: 768px) {
        .why-choose-us-list li {
            padding-left: 20px;
            font-size: 1.1rem;
        }
    }

/* Button styling */
.learn-more-btn {
    display: inline-block;
    margin-top: 50px; /* Adds space between the image and the button */
    padding: 15px 30px;
    background-color: #f8b400; /* Accent color */
    color: #1d1d1d; /* Dark text color for contrast */
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border-radius: 5px;
    text-decoration: none; /* Removes underline */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* Button hover effect */
.learn-more-btn:hover {
    background-color: #977d26; /* Slightly darker shade on hover */
    transform: scale(1.05); /* Subtle zoom effect */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.4); /* More pronounced shadow on hover */
}

/* Styling for the Home End Section */
.home-end {
    text-align: center;
    margin: 0; /* Remove any margins to avoid extra spacing */
    padding: 0; /* Remove padding */
}

.home-end-img {
    width: 100vw; /* Makes the image span the entire width of the screen */
    height: auto; /* Maintains the aspect ratio */
    margin: 0; /* Removes any margin */
    margin-top: 20px;
    display: block; /* Ensures the image is displayed as a block element */
    max-width: none; /* Removes any max-width restriction */
}

/* -----------------------------------------------------------------------------*/
/* Location Section Styling */
/* Ensure map and info container are responsive */
.location-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
}

.map-container {
    flex: 2;
    min-width: 400px;
    max-width: 700px;
    height: 400px;
    background-color: #ac932f;
    padding: 6px;
    border-radius: 12px;
    overflow: hidden;
}

/* Style the iframe to fill the container and ensure responsiveness */
.map-container iframe {
    width: 100%; /* Full width to make it responsive */
    height: 100%; /* Set height for consistency */
    border: none; /* Remove iframe border */
    border-radius: 12px; /* Match the rounded corners of the container */
    transition: height 0.3s ease; /* Smooth transition for height change */
}

/* Adjust map height for smaller screens */
@media (max-width: 768px) {
    .map-container iframe {
        height: 400px; /* Smaller height for mobile */
    }
}

@media (max-width: 480px) {
    .map-container iframe {
        height: 250px; /* Further smaller height for very small screens */
    }
}

.business-info {
    flex: 1;
    max-width: 500px;
    color: white;
    font-family:'Times New Roman', Times, serif;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 1.3px;
}

/* Style for address lines */
.address-line1,
.address-line2 {
    display: block; /* Ensures each line stays separate */
    line-height: 1.5; /* Prevents extra spacing caused by line height */
    margin: 0; /* Removes any default margin */
    letter-spacing: 1.2px; /* Adds letter spacing for readability */
}

/* Optional: Strong tag style adjustment if necessary */
p > strong {
    margin-right: 5px; /* Small space between "Address:" and the lines */
}

.business-info-header img {
    width: 100%;
    max-width: 300px;
    margin-bottom: 12px;
}

.business-info p {
    line-height: 2;
    margin: 10px 0;
}

.business-info a {
    color: #fbdc41;
    size: 10px;
}

.business-info a:hover {
    text-decoration: underline;
    color: #b7a02e;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .location-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .map-container {
        height: 300px;
    }

    .business-info {
        text-align: center;
    }
}

/* Ensure full width for the image and center it */
.contact-header-image {
    position: relative;
    width: 100%; /* Make sure it takes up the full width of its parent container */
    text-align: center; /* Center the image horizontally */
    margin: 0 auto; /* Center the container itself */
}

.contact-header-image img {
    width: 100%; /* Make the image take up the full width */
    height: auto; /* Maintain the aspect ratio */
    object-fit: cover; /* Ensure the image fills the container without distortion */
    display: block; /* Remove any extra space below the image */
    margin: 0; /* Remove any margin */
}

.operating-hours-image {
    text-align: center; /* Center the image */
    margin: 20px 0; /* Add some spacing around the image */
}

.operating-hours-image img {
    width: 100%; /* Make the image responsive */
    max-width: 500px; /* Ensure the image doesn't stretch too wide */
    height: auto; /* Maintain aspect ratio */
    margin-top: 50px;
    border-radius: 10px; /* Optional: Adds rounded corners to the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

.operating-hours {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    font-family: 'Bona Nova SC', serif; /* Matching font */
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

.operating-hours li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
}

.operating-hours li:last-child {
    border-bottom: none;
}

.operating-hours .day {
    font-weight: bold;
    color: #fbdc41;
    font-size: 22px;
}

.operating-hours .hours {
    color: #fbdc41;
    font-weight: bold;
    font-size: 24px;
}

.operating-hours .closed .hours {
    color: #acacac;
    font-style: italic;
    font-weight: bold;
    text-decoration: line-through;
}

/* Hover Effect */
.operating-hours li:hover {
    background-color: #f9f9f956;
    transition: background-color 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .operating-hours {
        font-size: 14px;
    }
    .operating-hours li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* Footer Styling */
/* Footer Styling */
footer { 
    margin-top: 0;
    background-color: black;
    color: #fff;
    font-family: 'Bona Nova SC', serif;
    font-size: 14px;
    padding: 40px 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #444; /* Add border to the top of the footer container */
    padding-top: 10px; /* Space between the top border and content */
}

/* Footer Sections */
.footer-left, .footer-center, .footer-right {
    flex: 1;
    min-width: 200px;
}

.footer-left {
    text-align: center;
}

.footer-left img {
    width: 150px;
    margin-bottom: 1px;
    transition: opacity 0.3s ease;
}

.footer-left .social-icons {
    margin-top: 5px;
    display: flex;
    justify-content: center;
    gap: 50px;
}

.footer-left .social-icons img {
    width: 38px;
    height: 42px;
}

/* Specific style for the Facebook icon */
.footer-left .social-icons a:nth-child(2) img {
    height: 40px; /* Adjust this value as needed */
    width: auto; /* Maintains aspect ratio */
}

/* Hover effect for the logo */
.footer-logo img:hover {
    opacity: 0.6;
}

/* Hover effect for social icons */
.footer-left .social-icons img:hover {
    opacity: 0.6;
}

/* Center Section */
.footer-center {
    text-align: center;
    margin-top: 40px;
}

.footer-center h3 {
    margin-top: 50px;
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.footer-center p {
    margin: 8px 0;
}

.footer-center .social-icons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 50px;
}

.footer-center .social-icons img {
    width: 30px;
    height: 38px;
}

/* Quick Links Section */
.footer-right {
    margin-top: 79px;
    text-align: center;
}

.footer-right h3 {
    font-size: 16px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

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

.footer-right ul li {
    margin-bottom: 8px;
}

/* Address and Contact Info Styling */
.footer-center p,
.footer-center a {
  font-size: 20px; /* Increase font size */
  line-height: 28px; /* Adjust line height for better readability */
  color: #ffffff; /* Ensure the text is visible */
  font-weight: bold; /* Make the text bold */
  text-transform: none; /* Keep the text normal case */
  margin-bottom: 8px; /* Add spacing between lines */
  text-decoration: none; /* Added to remove underline */
}

.footer-center a:hover {
  color: #ffdb4a; /* Highlight on hover */
}

/* Quick Links Styling */
.footer-right ul li a {
  font-size: 20px; /* Increase font size for links */
  color: #ffffff; /* Keep consistent color */
  font-weight: bold; /* Make links bold */
  transition: color 0.3s, text-decoration 0.3s; /* Smooth transition */
}

.footer-right ul li a:hover {
  color: #ffdb4a; /* Highlight link color on hover */
  text-decoration: underline; /* Add underline on hover */
}

/* General Footer Styling Adjustments */
.footer-center p,
.footer-right ul li {
  margin-bottom: 12px; /* Add more spacing for clarity */
}

/* Footer Bottom */
/* Footer Bottom */
.footer-bottom {
    width: 100%; /* Ensure it spans the full width */
    text-align: center; /* Center the text */
    border-top: 1px solid #444; /* Top border for separation */
    padding-top: 15px; /* Padding on top */
    font-size: 14px; /* Font size */
    color: #ccc; /* Light color for text */
    margin-top: 20px; /* Margin to create space from the content above */
}

.footer-bottom p {
    margin: 10px 0; /* Adjust margin between lines */
    font-size: 16px; /* Increase font size for better readability */
    line-height: 1.8; /* Adjust line height for spacing */
}

/* Specific link style within footer bottom */
.footer-bottom .privacy-link {
    color: #c4ab45cd; /* Color for the privacy link */
    text-decoration: none;
    font-weight: bold;
    margin-left: 10px;
}

.footer-bottom .privacy-link:hover {
    color: #917d30cb; /* Hover effect color */
}


/* Responsive Design */
@media screen and (max-width: 1210px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-left, .footer-center, .footer-right {
        text-align: center;
        margin-top: 20px; /* Add space between sections */
    }

    .footer-left .social-icons {
        gap: 30px; /* Adjust spacing for mobile screens */
    }

    .footer-center p {
        font-size: 16px; /* Reduce font size slightly */
    }

    .footer-center h3 {
        font-size: 18px; /* Adjust heading size */
    }

    .footer-right ul li a {
        font-size: 16px; /* Adjust link size */
    }

    .footer-right h3 {
        font-size: 20px; /* Adjust heading size */
    }

    .footer-bottom {
        font-size: 14px; /* Adjust bottom footer text size */
        padding: 20px 10px; /* Adjust padding for mobile view */
    }
}

/* Smaller mobile screens */
@media screen and (max-width: 600px) {
    .footer-left .social-icons {
        flex-direction: column;
        gap: 15px; /* Stack social icons vertically */
    }

    .footer-center p, .footer-center a {
        font-size: 14px; /* Reduce font size for small screens */
    }

    .footer-center h3 {
        font-size: 16px; /* Reduce heading font size */
    }

    .footer-right ul li {
        margin-bottom: 10px; /* More spacing between links */
    }

    .footer-right ul li a {
        font-size: 14px; /* Smaller link text */
    }

    .footer-bottom p {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    .footer-bottom {
        padding: 20px 0; /* Adjust padding */
    }
}

/* Scroll-to-top arrow styles */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(150, 148, 148, 0.425);
    display: none; /* Initially hidden */
}

.scroll-to-top a img {
    width: 35px;
    height: 35px;
    display: block;
}

.scroll-to-top:hover {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 6px rgba(150, 148, 148, 0.634);
}

.follow-us {
    text-align: center; /* Center the text under the logo */
    margin-top: 10px; /* Space between the logo and text */
    margin-bottom: 5px;
    font-size: 20px; /* Adjust the font size */
    letter-spacing: 3px;
    line-height: 30px;
    color: #ffdb4a; /* Change to your desired color */
}

.follow-us p, .follow-us {
    font-weight: bold; /* Make the text bold */
}

.footer-center h3, 
.footer-right h3 {
    font-size: 26px; /* Increase font size */
    margin-bottom: 15px; /* Add more space below the heading */
    text-transform: uppercase; /* Keep the uppercase style */
    letter-spacing: 3px; /* Add spacing between letters */
    line-height: 36px; /* Adjust line height */
    color: #ffdb4a; /* Match the color of "FOLLOW US" */
    font-weight: bold; /* Make the text bold */
}

.footer-center h3:hover,
.footer-right h3:hover {
    color: #b0993c; /* Change color on hover */
}

/* impact windows -----------------------------------------------------------------/*
/* Header Section ----------------------------*/
/* Impact Window Cover Section */
.impact-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Set the width to 90% */
    max-width: 100%;
    margin: 0 auto; /* Centers the container horizontally */
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Adds a bold gold border */
    box-sizing: border-box; /* Includes border in total width */
    border-radius: 15px; /* Makes the border slightly rounded */
    animation: slideInRight 1s ease-out; /* Adds slide-in animation */
    margin-bottom: 50px;
}

.impact-window-overlay h1 {
    font-size: 2rem; /* Large, prominent text */
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin: 0;
    color: #e7c439bd; /* Gold accent color */
}

/* Introduction Section -----------------------------------*/
.impact-windows-info {
    padding: 2rem 3rem;
    background-color: #1a1a1a; /* Dark background for contrast */
    color: #ffffff; /* White text for readability */
    font-family:'Times New Roman', Times, serif;
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto; /* Centers the section */
    max-width: 1200px; /* Set a max-width for better control */
    font-size: 1.4rem; /* Ensure font size consistency */
    line-height: 1.9rem;
    word-spacing: 0.2rem
}

/* Style for Divider Line */
.divider-line {
    width: 55%; /* Adjust width of the line */
    margin: 1.5rem auto; /* Center the line and add margin */
    border: 0;
    border-top: 3px solid #ffcc00c7; /* Gold color line */
    opacity: 0.5; /* Slight transparency */
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .impact-window-cover {
        width: 95%;
    }

    .impact-window-overlay h1 {
        font-size: 1.2rem;
    }

    .impact-windows-info {
        padding: 1.5rem 2rem;
    }

    .impact-windows-info h2, .impact-windows-options h3 {
        font-size: 1.8rem; /* Slightly smaller font size for better readability */
    }

    .impact-windows-info p {
        font-size: 1.3rem;
    }

    .impact-windows-options ul {
        padding-left: 1rem;
    }

    .impact-windows-options li {
        font-size: 1rem;
    }

    .impact-windows-intro h2 {
        font-size: 2rem; /* Smaller title for mobile */
    }
}

/* Ensuring <p> text is italic without affecting font size */
.impact-windows-info p {
    font-size: inherit; /* Inherit font size from parent */
}

.windows-collection-description {
    font-size: 1.2em !important; /* Reduce size further and ensure it's applied */
    line-height: 1.6rem; /* Adjust line height */
    color: #f4f4f4; /* Text color */
    margin-bottom: 2rem !important;
}

/* Styling for <strong> elements within the Impact Windows section */
.impact-windows-info strong {
    color: #c8ab39; /* Gold color for <strong> text */
    font-style: italic;
    line-height: 1.8;
    text-decoration: underline;
}

.impact-windows-intro {
    margin-bottom: 3rem;
    max-width: 1200px; /* Increase max-width to make it wider */
    margin: 0 auto; /* Centers the section */
    padding: 0 1rem; /* Add padding to ensure the content doesn't touch the edges */
}

.impact-windows-intro h2 {
    font-size: 2.7rem; /* Prominent title */
    color: #e7c439; /* Gold accent for contrast */
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.6; /* Added line height */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */
}

.impact-windows-intro p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: #f4f4f4; /* Slightly lighter text color for readability */
}

.impact-windows-options h3 {
    font-size: 2.5rem;
    color: #e7c439; /* Consistent gold accent */
    font-weight: bold;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.impact-windows-options ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.impact-windows-options li {
    margin-bottom: 1.2rem;
    color: #f4f4f4;
    padding-left: 1.2rem;
    position: relative;
}

.impact-windows-options li:before {
    content: '\2022'; /* Adds a custom bullet */
    color: #e7c439; /* Gold bullet for accent */
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: 0;
}

.impact-windows-info h3, .impact-windows-info p {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a professional shadow effect */
}

/* Optional: Subtle background effect */
.impact-windows-info {
    background: linear-gradient(to right, #1a1a1a, #333333);
    max-width: 1195px; /* Increased max-width to make it even wider */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .impact-windows-info {
        padding: 3rem 1.5rem;
    }

    .impact-windows-intro h2 {
        font-size: 2.5rem;
    }

    .impact-windows-options {
        text-align: left;
    }

    .impact-windows-options ul {
        padding-left: 1rem;
    }
}

/* Gallery Section--------------------------*/
/* Style Gallery Section */
.style-gallery {
    margin-top: -20px;
    padding: 2rem 0;
    background: linear-gradient(to right, #1a1a1a, #292929);
    text-align: center;
    color: #e7c439; /* Consistent gold color for titles */
    max-width: 1600px; /* Increase max-width to make it wider */
    padding: 0 1rem; /* Optional: add some padding if needed */
}

.gallery-title {
    font-size: 3.7rem !important;
    color: #e7c439; /* Gold accent */
    text-align: center;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    top: -15px; /* Adjust to move the title upwards */
}

.window-gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 0 auto;
    max-width: 1600px; /* Increase max-width to make it wider */
    padding: 0 1rem; /* Optional: add some padding if needed */
}

.window-gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    padding: 10px; /* Added padding for breathing space */
}

.window-gallery-card img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    border-radius: 8px; /* Slightly more rounded corners */
    border: 4px solid #ac901f; /* Gold border */
}

/* Gallery overlay */
.window-gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    text-align: center;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s ease-in-out;
    height: 3rem; /* Set initial height to fit the text */
}

/* Gallery overlay heading */
.window-gallery-overlay h3 {
    font-size: 1.7rem; /* Slightly larger for visibility */
    font-weight: bold;
    color: #f4f4f4; /* Lighter color for better readability */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    transition: all 0.3s ease-in-out;
    opacity: 1; /* Always visible */
}

/* General button styles */
.about-btn {
    background-color: transparent; /* Transparent button */
    color: #e7c439; /* Gold text */
    padding: 0.6rem 1.2rem;
    border: 2px solid #e7c439; /* Gold border */
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Smooth transition */
    margin-top: 10px;
    transform: translateY(20px); /* Start the button below */
}

/* Show button on hover */
.window-gallery-card:hover .about-btn {
    opacity: 1; /* Make the button visible */
    visibility: visible; /* Make the button visible */
    transform: translateY(0); /* Move the button up smoothly */
}

/* Hover effects for the gallery card */
.window-gallery-card:hover {
    transform: translateY(-10px); /* Slightly lift the card */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.6);
}

/* Show full overlay with button when hovering */
.window-gallery-card:hover .window-gallery-overlay {
    height: 6rem; /* Expands the overlay on hover */
}

/* Specific height for Horizontal Rollers on hover */
.window-gallery-card.horizontal-rollers-card:hover .window-gallery-overlay {
    height: 7rem; /* Increase the height for Horizontal Rollers to fit the two-line text */
}

/* Button hover effects */
.about-btn:hover {
    background-color: #dab628; /* Gold background on hover */
    color: #1a1a1a; /* Dark text for contrast */
    transform: translateY(-3px); /* Slight upward movement */
}

/* Specific button classes for each window style */
.single-hung-btn {
    background-color: transparent; /* Transparent button */
    border-color: #e7c439; /* Gold border */
}

.fixed-picture-btn {
    background-color: transparent;
    border-color: #e7c439;
}

.horizontal-rollers-btn {
    background-color: transparent;
    border-color: #e7c439;
}

/* Make Horizontal Rollers button move up more */
.window-gallery-card.horizontal-rollers-card:hover .horizontal-rollers-btn {
    transform: translateY(-15px); /* Move up 15px when hovering */
    opacity: 1; /* Ensure the button is fully visible */
    visibility: visible; /* Ensure the button is fully visible */
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

/* Extra hover effect for Horizontal Rollers button itself */
.horizontal-rollers-btn:hover {
    background-color: #dab628; /* Gold background on hover */
    color: #1a1a1a; /* Dark text for contrast */
    transform: translateY(-20px); /* Move up further on button hover */
}

.awning-btn {
    background-color: transparent;
    border-color: #e7c439;
}

.casement-btn {
    background-color: transparent;
    border-color: #e7c439;
}

/* Optional: Add hover effect for individual buttons */
.single-hung-btn:hover {
    background-color: #ceab21; /* Hover effect for single Hung */
    color: white;
}

.fixed-picture-btn:hover {
    background-color: #ceab21; /* Hover effect for Fixed/Picture */
    color: white;
}

.awning-btn:hover {
    background-color: #ceab21; /* Hover effect for Awning */
    color: white;
}

.casement-btn:hover {
    background-color: #ceab21; /* Hover effect for Casement */
    color: white;
}

/* Responsive Gallery */
@media (max-width: 768px) {
    .window-gallery-card {
        width: 100%; /* Cards should take full width on small screens */
    }

    .gallery-title {
        font-size: 2rem; /* Smaller gallery title */
    }

    .window-gallery-container {
        gap: 1rem;
    }

    .quote-btn {
        font-size: 12px;
        padding: 8px 12px;
    }

    .about-btn {
        font-size: 12px; /* Adjust button for mobile */
    }
}

/* Contact Section -------------------------------------------------------------*/
/* Style for the Quote Banner */
.quote-banner {
    position: relative;
    text-align: center;
    margin-top: 3rem; /* Space between the impact windows section and this banner */
}

.quote-image {
    width: 100%; /* Make image fill the container */
    height: auto;
    max-width: 1600px; /* Set max width if you want to limit the size */
    border-radius: 8px; /* Optional: rounded corners for the image */
}

.quote-btn {
    position: absolute;
    top: 38%; /* Position the button slightly lower on the image */
    right: 4%; /* Align the button to the right */
    transform: translateY(-50%); /* Adjusts the button vertically to center it */
    background-color: rgb(80, 80, 80); 
    color: white; /* Text color */
    font-family: 'Trebuchet MS', Arial, sans-serif;
    padding: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.3rem;
    letter-spacing: 1px;
    z-index: 10; /* Ensure the button appears above the image */
    display: inline-block; /* Makes it behave like a button */
}

.quote-btn:hover {
    background-color: rgba(255, 255, 255, 0.827); /* Darker gold on hover */
    color: rgba(0, 0, 0, 0.93);
}

/* Responsive button */
@media (max-width: 1024px) {
    .quote-btn {
        font-size: 14px;
        padding: 10px 20px;
    }
}

@media (max-width: 768px) {
    .quote-btn {
        font-size: 10px;
        padding: 4px 8px;
    }
}

.experience-difference-section {
    text-align: center;
    margin-bottom: 3rem; /* Increased margin for better separation */
}

.experience-difference-title {
    font-family: 'Bebas Neue', sans-serif; /* Applying the new font */
    font-size: 3.5rem; /* Slightly larger to make it more prominent */
    color: white; /* Gold accent color to maintain consistency */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px; /* More spacing to emphasize the title */
    margin-bottom: 2rem; /* Increased space between title and image */
    text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.5); /* Stronger shadow for more contrast */
    line-height: 1.2; /* Slightly tighter line-height for better readability */
}

/* Optional: Subtle hover effect for better interactivity */
.experience-difference-title:hover {
    color: #ffda47; /* Lighter color on hover */
    text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.7); /* Stronger shadow on hover */
}

.above-footer-banner .quote-image {
    max-width: 100%;
    height: auto;
}


.above-footer-banner {
    margin-top: 2rem; /* Adjust spacing between sections */
    text-align: center; /* Centers the image */
}

.above-footer-banner .quote-image {
    max-width: 100%; /* Ensures the image is responsive */
    height: auto; /* Maintains aspect ratio */
}

/* Footer---------------------------------------------- */
.impact-windows-footer {
    padding: 1rem;
    background-color: #333333;
    color: #fff;
    text-align: center;
    font-size: 0.9rem;
}


/* single HUNG PAGE --------------------------------------------------------------------------*/
/* Single Hung Banner Container */
.single-hung-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}
  
.single-hung-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}


/* Images Section */
.single-hung-banner-images {
    margin-top: 410px;
    display: flex;
    flex-direction: column;
    gap: 120px; /* Gap specific to Single Hung Banner Images */
    max-width: 50%;
    align-items: center;
}

/* Text Section */
.single-hung-banner-text {
    max-width: 50%;
    padding: 20px;
    text-align: center;
}

.single-hung-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Styling for the text block */
.single-hung-description {
    font-size: 1.5rem;
    line-height: 2.4rem;
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px;
    flex-grow: 1;
}

/* Styling for Single Hung */
.single-hung {
    font-weight: bold;
    font-style: italic;
    color: #c6a832;
}

/* Styling for Double Hung */
.double-hung {
    font-weight: bold;
    font-style: italic;
    color: #c6a832;
}

/* Responsive Design */
@media (max-width: 768px) {
    .single-hung-banner-content {
        flex-direction: column;
    }

    .single-hung-banner-images,
    .single-hung-banner-text {
        max-width: 100%;
    }

    .single-hung-heading {
        font-size: 1.8rem; /* Adjust for mobile */
        margin-bottom: 10px;
    }

    .single-hung-description {
        font-size: 1rem; /* Smaller text for mobile */
        margin-top: 20px;
    }
  
    .hurricane-resistant-introduction {
        flex-direction: column;
        padding: 10px;
    }

    .hurricane-resistant-banner-text, .hurricane-resistant-images {
        max-width: 100%;
        padding-left: 0;
    }

    .hurricane-resistant-heading {
        font-size: 1.8rem;
    }

    .hurricane-resistant-description {
        font-size: 1rem;
    }

    .safety-images {
        flex-direction: column;
        gap: 20px;
        margin-left: 0;
    }

    .safety-image img {
        max-width: 100%;
        margin-right: 0;
    }

    .single-hung-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .single-hung-gallery-item {
        width: 100%; /* Full width on mobile */
        margin-bottom: 10px;
    }

    .single-hung-cta {
        padding: 30px 20px; /* Reduce padding for mobile */
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .single-hung-cta-heading {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    .single-hung-cta-description {
        font-size: 1rem;
    }

    .single-hung-cta-button {
        padding: 10px 30px;
        font-size: 1.2rem; /* Adjust button size */
        margin-top: 20px;
    }

    /* Footer layout adjustment */
    .footer-left, .footer-center, .footer-right {
        flex: 1 1 100%; /* Stack footer elements */
        text-align: center;
    }

    .footer-bottom p {
        font-size: 0.9rem; /* Smaller footer text */
    }
}

/* For extra small screens (phones in portrait mode) */
@media (max-width: 480px) {
    .single-hung-heading {
        font-size: 1.5rem;
    }

    .single-hung-description {
        font-size: 0.9rem;
    }

    .single-hung-cta-button {
        padding: 8px 20px;
        font-size: 1rem;
    }
}


/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Section for hurricane-resistant introduction----------------------------- */
.hurricane-resistant-introduction {
    padding: 40px 20px;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: flex-start;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.hurricane-resistant-banner-text {
    max-width: 50%;
    padding: 20px;
    text-align: center;
}

.hurricane-resistant-images {
    display: flex;
    flex-direction: column;
    gap: 180px; /* Gap specific to Hurricane Resistant Images */
    max-width: 45%;
    align-items: flex-start;
    padding-left: 120px;
    margin-top: 190px;
}

.hurricane-resistant-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.hurricane-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


.hurricane-resistant-heading {
    font-size: 2.3rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center;
}

.hurricane-resistant-description {
    font-size: 1.5rem;
    line-height: 2.4rem;
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 40px;
    color: white;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hurricane-resistant-introduction {
    flex-direction: column;
    padding: 20px;
  }

  .hurricane-resistant-banner-text, .hurricane-resistant-images {
    max-width: 100%;
    padding-left: 0;
    margin-top: 20px;
  }
}

.single-hung-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.safety-images {
  display: flex;
  flex-direction: column; /* Align images vertically */
  gap: 40px; /* Space between the images */
  margin-left: 110px; /* Adds gap to the right of the image */
}


/* Safety Image */
.safety-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.safety-image img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

  
.safe-image {
    margin-top: 20px;
}

.safe-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

.udreamwedo-image {
    margin-top: 20px; /* Adds space to the top of the udreamwedo image */
}

.udreamwedo-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}
  
/* General hover effect for images */
.hurricane-resistant-image:hover,
.safety-images img:hover,
.udreamwedo-image img:hover,
.benefits-images img:hover,
.single-hung-gallery-image:hover,
.centered-image:hover,
.fw-pw-advantage-images img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.single-hung-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.benefits-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 30px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-right: 110px; /* Adds gap to the right of the image */
}

.benefits-images img {
    margin-top: 150px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border-radius: 10px;
}

/* Image inside Impact Window Cover */
.cover-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Styling for the checkmark list */
.checkmark-list {
    font-family: 'Times New Roman', Times, serif;
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    color: white;
}

.checkmark-list li {
    position: relative;
    padding-left: 30px;
    font-size: 1.3rem;
    line-height: 2.8rem;
}

.checkmark-list li:before {
    content: '\2713';
    font-size: 1.5rem;
    color: #c6a832;
    position: absolute;
    left: 0;
    top: 0;
}

/* Image inside Impact Window Cover */
.cover-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Single Hung Window Cover Section */
.single-hung-window-cover {
    position: relative;
    text-align: center;
    width: 80%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd;
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.single-hung-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.centered-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .single-hung-window-cover {
        width: 90%; /* Make the container wider on small screens */
        margin-bottom: 30px; /* Adjust bottom margin */
    }

    .single-hung-banner-image {
        max-width: 100%; /* Ensure the image adjusts to the container width */
        border-radius: 10px; /* Slightly reduce border radius for small screens */
    }
}
  
/* Image inside Single Hung Window Cover */
/* Gallery Styles -------------------------------------------------------------------------- */
/* Gallery Styles */
.single-hung-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.single-hung-gallery-title {
    margin-bottom: 30px;
}

.single-hung-gallery-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}


/* Gallery Images Layout */
.single-hung-gallery-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px; /* Reduces space between images */
    justify-items: center;
}

.single-hung-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

.single-hung-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.single-hung-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}


/* Call to Action Section */
.single-hung-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.single-hung-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.single-hung-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.single-hung-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.single-hung-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.single-hung-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.single-hung-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.single-hung-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.single-hung-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}

/* Style for the horizontal line */
.section-line {
    border: none;
    border-top: 2px solid #f7b14b; /* Golden line matching the site's color scheme */
    margin: 40px auto;
    width: 80%;
}

/* Styles for smaller screens (mobile) */
@media (max-width: 768px) {
    .single-hung-heading, .hurricane-resistant-heading, .single-hung-cta-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    .single-hung-description {
        font-size: 0.9rem; /* Adjust font size */
    }

    /* Adjust padding and margin */
    .single-hung-banner, .hurricane-resistant-introduction, .single-hung-safety {
        padding: 10px;
    }

    /* Stack images and text vertically on small screens */
    .single-hung-banner-content {
        display: block;
    }

    /* Image adjustments */
    .single-hung-banner-images, .hurricane-resistant-images {
        display: flex;
        flex-direction: column;
    }

    /* Adjust gallery layout */
    .single-hung-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .single-hung-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }

    /* Adjust footer layout */
    .footer-left, .footer-center, .footer-right {
        flex: 1 1 100%; /* Stack footer elements */
        text-align: center;
    }
}

/* For extra small screens (phones in portrait mode) */
@media (max-width: 480px) {
    .single-hung-description, .hurricane-resistant-description {
        font-size: 0.85rem; /* Further decrease font size */
    }

    .single-hung-cta-button {
        padding: 12px; /* Adjust button size for mobile */
        font-size: 1rem;
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }
}

/* FIXED OR PICTURE WINDOW PAGE ------------------------------------------------------------------*/
/* Fixed or Picture Window Cover */
.fw-pw-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Default width for larger screens */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Gold border */
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.fw-pw-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fixed or Picture Window Banner Container */
.fw-pw-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* New class for the images in the banner */
.fw-pw-banner-image-item {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hover effect for the banner images */
.fw-pw-banner-image-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Content Wrapper */
.fw-pw-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Images Section */
.fw-pw-banner-images {
    margin-top: 410px;
    display: flex;
    flex-direction: column;
    gap: 120px; /* Gap specific to Fixed Window Banner Images */
    max-width: 50%; /* Ensures that the image section takes up 50% of the width */
    align-items: center;
}

/* Text Section */
.fw-pw-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

.fw-pw-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}

/* Styling for the text block */
.fw-pw-description {
    font-size: 1.5rem;
    line-height: 2.4rem;
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px;
    flex-grow: 1;
}

/* Styling for specific elements within the text */
.fw-pw {
    font-weight: bold;
    font-style: italic;
    color: #c6a832;
}

/* Styling for Section Line */
.section-line {
    width: 50%;
    margin: 10px auto 30px;
    border: 0;
    border-top: 2px solid #c6a832;
    opacity: 0.8;
}

/* Responsive Styling */
@media (max-width: 768px) {
    .fw-pw-window-cover {
        width: 90%; /* Expand width for smaller screens */
        margin-bottom: 30px; /* Adjust bottom margin */
    }

    .fw-pw-banner {
        padding: 20px 10px; /* Reduce padding for compact layout */
        border-radius: 10px; /* Reduce border radius for smaller screens */
    }

    .fw-pw-heading {
        font-size: 2.5rem; /* Adjust font size for better readability */
        line-height: 3rem;
        margin-bottom: 15px;
    }

    .fw-pw-banner-images {
        margin-top: 20px; /* Reduce spacing for smaller screens */
        gap: 20px; /* Reduce gap between images */
        max-width: 100%; /* Allow images to occupy full width */
    }

    .fw-pw-banner-text {
        max-width: 100%; /* Text section occupies full width */
        padding: 10px; /* Compact padding */
    }

    .fw-pw-banner-content {
        flex-direction: column; /* Stack items vertically */
        gap: 15px; /* Adjust gap between content blocks */
    }
}


/* Responsive Design */
@media (max-width: 768px) {
    .fw-pw-banner-content {
      flex-direction: column;
    }

    .fw-pw-banner-images,
    .fw-pw-banner-text {
      max-width: 100%;
    }
}

/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Section for hurricane-resistant introduction----------------------------- */
.hurricane-resistant-introduction {
    padding: 40px 20px;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: flex-start;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.hurricane-resistant-banner-text {
    max-width: 50%;
    padding: 20px;
    text-align: center;
}

.hurricane-resistant-images {
    display: flex;
    flex-direction: column;
    gap: 150px; /* Gap specific to Hurricane Resistant Images */
    max-width: 45%;
    align-items: flex-start;
    padding-left: 120px;
    margin-top: 190px;
}

.hurricane-resistant-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.hurricane-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


.hurricane-resistant-heading {
    font-size: 2.3rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hurricane-resistant-introduction {
    flex-direction: column;
    padding: 20px;
  }

  .hurricane-resistant-banner-text, .hurricane-resistant-images {
    max-width: 100%;
    padding-left: 0;
    margin-top: 20px;
  }
}

/* Fixed Picture Window Safety Section */
.fw-pw-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.fwpw-safety-images {
    display: flex;
    flex-direction: column; /* Align images vertically */
    gap: 40px; /* Space between the images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

/* Safety Image */
.fwpw-safety-image img,
.glass-safe-image img,
.pool-safe-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.fwpw-safety-image img:hover,
.glass-safe-image img:hover,
.pool-safe-image img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

.section-line {
    width: 50px;
    height: 3px;
    background-color: #c6a832; /* Accent color */
    margin: 10px auto 30px auto;
}

.safety-features-list {
    font-family: 'Times New Roman', Times, serif;
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    color: white;
}

.safety-features-list li {
    position: relative;
    padding-left: 30px;
    font-size: 1.3rem;
    line-height: 2.8rem;
}

.safety-features-list li strong {
    color: #c6a832; /* Accent color for strong text */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .fwpw-safety-images {
        flex-direction: column;
        align-items: center;
    }

    .fwpw-safety-image,
    .glass-safe-image,
    .pool-safe-image {
        margin-bottom: 20px;
    }

    .fw-pw-heading {
        font-size: 2rem;
    }

    .fw-pw-description {
        font-size: 1rem;
    }

    .safety-features-list li {
        font-size: 1rem;
    }
}

.fw-pw-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Styling for fw-pw-advantage-images */
.fw-pw-advantage-image {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 30px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-right: 110px; /* Adds gap to the right of the image */
}

/* Image Styling */
.fw-pw-advantage-images img {
    margin-top: 150px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border: 5px solid #c6a832 !important; /* Ensure border is applied */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Matching shadow effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

.fw-pw-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.fw-pw-gallery-title {
    margin-bottom: 30px;
}

.fw-pw-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}

/* Gallery Images Layout */
.fw-pw-gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 0px; /* Small gap between images */
    justify-items: center; /* Center images within grid cells */
}

/* Wide Images - Span 2 columns */
.fw-pw-gallery-image-wide {
    grid-column: span 2; /* Make the image span 2 columns */
    width: 110%; /* Ensure it adjusts to the grid */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Prevent distortion */
    /* Remove margin or use zero margins if necessary */
}

/* Gallery Items Styling */
.fw-pw-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

/* Image Styling */
.fw-pw-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.fw-pw-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

/* Responsive Design */
@media (max-width: 768px) {
    .fw-pw-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    /* Adjust gallery layout */
    .fw-pw-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .fw-pw-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }
}

/* Call to Action Section */
.fw-pw-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.fw-pw-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.fw-pw-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.fw-pw-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.fw-pw-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.fw-pw-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.fw-pw-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.fw-pw-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.fw-pw-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}
 
/* HORIZONTAL ROLLER PAGE ------------------------------------------------------------------------------*/
.horizontal-roller-window-cover { 
    position: relative;
    text-align: center;
    width: 80%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd;
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.horizontal-roller-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Text Section for Horizontal Roller */
.horizontal-roller-banner-text {
    max-width: 50%;
    padding: 20px;
    text-align: center;
}

/* Horizontal Roller Banner Content Layout */
.horizontal-roller-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center; /* Align items vertically centered */
}

/* Mobile Responsiveness for Horizontal Roller */
@media (max-width: 768px) {
    .horizontal-roller-banner-content {
        flex-direction: column; /* Stack images and text on small screens */
        align-items: center;
    }

    .horizontal-roller-banner-images {
        max-width: 100%; /* Ensure images take full width on small screens */
        gap: 10px; /* Reduce gap between images */
    }

    .horizontal-roller-banner-text {
        max-width: 100%; /* Ensure text section takes full width */
    }
    .horizontal-roller-heading {
        font-size: 2rem; /* Adjust heading size on small screens */
    }

    .horizontal-roller-description {
        font-size: 1.2rem; /* Adjust description size */
    }
}

/* Images Section for Horizontal Roller */
.horizontal-roller-banner-images {
    margin-top: 0; /* No margin for the container */
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 100px; /* Adjust gap between images */
    max-width: 50%;
    align-items: center;
}

/* Apply margin-top only to the first image */
.horizontal-roller-banner-images img:first-of-type {
    margin-top: 320px; /* Adjust the top margin as needed */
}

/* Image Styling */
.horizontal-roller-banner-images img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.horizontal-roller-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.horizontal-roller-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center;
}

.horizontal-roller-description {
    font-size: 1.5rem;
    line-height: 2.4rem;
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px;
    flex-grow: 1;
}

.horizontal-roller-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Highlight style for horizontal roller */
.highlight {
    color: #ffcc00; /* Yellow color */
    font-weight: bold; /* Optional: make it bold for emphasis */
    font-style: italic;
}

/* Add yellow border to hr5 and hr6 images */
.benefits-images img[src="images/hr5.png"], 
.benefits-images img[src="images/hr6.jpg"] {
    border: 5px solid #c6a832; /* Yellow border */
    border-radius: 10px; /* Optional: rounded corners */
}


.horizontal-roller-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.horizontal-roller-gallery-title {
    margin-bottom: 30px;
}

.horizontal-roller-gallery-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}


/* Gallery Images Layout */
.horizontal-roller-gallery-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px; /* Reduces space between images */
    justify-items: center;
}

.horizontal-roller-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

.horizontal-roller-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.horizontal-roller-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

.horizontal-roller-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.horizontal-roller-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

.horizontal-roller-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.horizontal-roller-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.horizontal-roller-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.horizontal-roller-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.horizontal-roller-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.horizontal-roller-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.horizontal-roller-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}

/* Animation for gradient */
@keyframes gradient-animation {
    0% {
        background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    }
    50% {
        background: linear-gradient(135deg, rgba(255, 191, 0, 0.8), rgba(255, 153, 51, 0.6));
    }
    100% {
        background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    }
}

/* AWNING IMPACT WINDOWS PAGE ------------------------------------------------ */
.aw-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Default width for larger screens */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Gold border */
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.aw-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fixed or Picture Window Banner Container */
.aw-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the main container doesn't overflow */
    .aw-window-cover {
        width: 100%; /* Allow full width */
        margin-bottom: 30px; /* Space between sections */
    }

    /* Banner container styling */
    .aw-banner {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .aw-heading {
        font-size: 2rem;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .aw-banner-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .aw-banner-images img {
        width: 20%;
        max-width: 100%; /* Ensure image doesn't exceed its container width */
        height: auto;
        object-fit: cover; /* Keep aspect ratio intact */
    }

    .aw-banner-text {
        padding: 20px;
        text-align: center;
        width: 80%;
    }

    /* Stack banner content vertically */
    .aw-banner-content {
        flex-direction: column;
        gap: 15px; /* Reduced gap */
    }

    .aw-description {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Gallery section adjustments */
    .aw-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .aw-gallery-item {
        width: 100%; /* Each gallery item takes full width */
        margin-bottom: 10px;
        text-align: center;
    }

    .aw-gallery-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* Ensure safety images don't overflow */
    .aw-safety-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        gap: 20px;
        margin-left: 0; /* Remove margin */
    }

    .aw-safety-image img {
        width: 100%;
        height: auto;
        margin-right: 0; /* Remove margin on smaller screens */
    }

    /* Call-to-action adjustments */
    .aw-cta {
        padding: 40px 20px;
    }

    .aw-cta-heading {
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    .aw-cta-description {
        font-size: 1.2rem;
        text-align: center;
    }

    /* Button Styling */
    .aw-cta-button {
        padding: 12px 30px;
        font-size: 1.2rem;
    }
}


/* Images Section */
.aw-banner-images {
    margin-top: 430px;
    display: flex;
    flex-direction: column;
    gap: 260px; /* Gap specific to Fixed Window Banner Images */
    max-width: 50%;
    align-items: center;
}

/* Text Section */
.aw-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

.aw-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}

/* Content Wrapper */
.aw-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Styling for the text block */
.aw-description {
    font-size: 1.5rem; /* Consistent font size */
    line-height: 2.4rem; /* Proper spacing between lines */
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px; /* Space above each paragraph */
    flex-grow: 1; /* Allows equal width for each text block */
}

/* Styling for specific elements within the text */
.highlighted {
    color: #ffcc00; /* Adjust to your desired yellow */
    font-weight: bold;
    font-style: italic;
}

/* Styling for Section Line */
.section-line {
    width: 50%;
    margin: 10px auto 30px;
    border: 0;
    border-top: 2px solid #c6a832;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .aw-banner-content {
      flex-direction: column;
    }

    .aw-banner-images,
    .aw-banner-text {
      max-width: 100%;
    }
}

/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.aw-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.aw-safety-images {
    display: flex;
    flex-direction: column; /* Align images vertically */
    gap: 40px; /* Space between the images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

/* Safety Image */
.aw-safety-image img,
.aw-glass-safe-image img,
.aw-pool-safe-image img,
.aw-advantage-images img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.aw-safety-image img:hover,
.aw-glass-safe-image img:hover,
.aw-pool-safe-image img:hover,
.aw-advantage-images img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

.aw-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.aw-benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.aw-advantage-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 30px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

.aw-advantage-images img {
    margin-top: 150px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border-radius: 10px;
}

.benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.aw-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.aw-gallery-title {
    margin-bottom: 30px;
}

.aw-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}

.aw-gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 0px; /* Small gap between images */
    justify-items: center; /* Center images within grid cells */
}

.aw-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

/* Image Styling */
.aw-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.aw-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

@media (max-width: 768px) {
    .aw-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .aw-gallery-item {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .aw-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    /* Adjust gallery layout */
    .aw-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .aw-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }
}

/* Call to Action Section */
.aw-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.aw-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.aw-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.aw-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.aw-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.aw-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.aw-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.aw-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.aw-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}

/*CASEMENT IMPACT WINDOW PAGE ---------------------------------------------------------- */
.case-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Default width for larger screens */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Gold border */
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.case-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fixed or Picture Window Banner Container */
.case-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the main container doesn't overflow */
    .case-window-cover {
        width: 100%; /* Allow full width */
        margin-bottom: 30px; /* Space between sections */
    }

    /* Banner container styling */
    .case-banner {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .case-heading {
        font-size: 2rem;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .case-banner-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .case-banner-images img {
        width: 20%;
        max-width: 100%; /* Ensure image doesn't exceed its container width */
        height: auto;
        object-fit: cover; /* Keep aspect ratio intact */
    }

    .case-banner-text {
        padding: 20px;
        text-align: center;
        width: 80%;
    }

    /* Stack banner content vertically */
    .case-banner-content {
        flex-direction: column;
        gap: 15px; /* Reduced gap */
    }

    .case-description {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Gallery section adjustments */
    .case-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .case-gallery-item {
        width: 100%; /* Each gallery item takes full width */
        margin-bottom: 10px;
        text-align: center;
    }

    .case-gallery-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* Ensure safety images don't overflow */
    .case-safety-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        gap: 20px;
        margin-left: 0; /* Remove margin */
    }

    .case-safety-image img {
        width: 100%;
        height: auto;
        margin-right: 0; /* Remove margin on smaller screens */
    }

    /* Call-to-action adjustments */
    .case-cta {
        padding: 40px 20px;
    }

    .case-cta-heading {
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    .case-cta-description {
        font-size: 1.2rem;
        text-align: center;
    }

    /* Button Styling */
    .case-cta-button {
        padding: 12px 30px;
        font-size: 1.2rem;
    }
}


/* Images Section */
.case-banner-images {
    margin-top: 460px;
    display: flex;
    flex-direction: column;
    gap: 210px; /* Gap specific to Fixed Window Banner Images */
    max-width: 50%;
    align-items: center;
}

/* Text Section */
.case-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

/* Text Section */
.case-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

.case-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}

/* Content Wrapper */
.case-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Styling for the text block */
.case-description {
    font-size: 1.5rem; /* Consistent font size */
    line-height: 2.4rem; /* Proper spacing between lines */
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px; /* Space above each paragraph */
    flex-grow: 1; /* Allows equal width for each text block */
}

/* Responsive Design */
@media (max-width: 768px) {
    .case-banner-content {
      flex-direction: column;
    }

    .case-banner-images,
    .case-banner-text {
      max-width: 100%;
    }
}

/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.case-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.case-safety-images {
    display: flex;
    flex-direction: column; /* Align images vertically */
    gap: 40px; /* Space between the images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

/* Safety Image */
.case-safety-image img,
.case-glass-safe-image img,
.case-pool-safe-image img,
.case-advantage-images img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.case-safety-image img:hover,
.case-glass-safe-image img:hover,
.case-pool-safe-image img:hover,
.case-advantage-images img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

.case-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.case-benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.case-advantage-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 30px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

.case-advantage-images img {
    margin-top: 150px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border-radius: 10px;
}

.benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.case-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.case-gallery-title {
    margin-bottom: 30px;
}

.case-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}

.case-gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 0px; /* Small gap between images */
    justify-items: center; /* Center images within grid cells */
}

.case-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

/* Image Styling */
.case-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.case-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

/* Responsive Design */
@media (max-width: 768px) {
    .case-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    /* Adjust gallery layout */
    .case-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .case-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }
}

/* Call to Action Section */
.case-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.case-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.case-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.case-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.case-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.case-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.case-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.case-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.case-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}

@media (max-width: 768px) {
    .case-cta {
        padding: 60px 30px; /* Reduced padding for mobile */
    }

    .case-cta-heading {
        font-size: 1.8rem; /* Smaller heading on mobile */
    }

    .case-cta-description {
        font-size: 1.4rem; /* Smaller description on mobile */
    }
}

/* STOREFRONT IMPACT WINDOWS PAGE ------------------------------------------------------------------*/
.stfw-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Default width for larger screens */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Gold border */
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.stfw-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fixed or Picture Window Banner Container */
.stfw-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* New class for the images in the STF banner */
.stf-banner-image-item {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hover effect for the STF banner images */
.stf-banner-image-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the main container doesn't overflow */
    .stfw-window-cover {
        width: 100%; /* Allow full width */
        margin-bottom: 30px; /* Space between sections */
    }

    /* Banner container styling */
    .stfw-banner {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .stfw-heading {
        font-size: 2rem;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .stfw-banner-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .stfw-banner-images img {
        width: 20%;
        max-width: 100%; /* Ensure image doesn't exceed its container width */
        height: auto;
        object-fit: cover; /* Keep aspect ratio intact */
    }

    .stfw-banner-text {
        padding: 20px;
        text-align: center;
        width: 80%;
    }

    /* Stack banner content vertically */
    .stfw-banner-content {
        flex-direction: column;
        gap: 15px; /* Reduced gap */
    }

    .stfw-description {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Gallery section adjustments */
    .stfw-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .stfw-gallery-item {
        width: 100%; /* Each gallery item takes full width */
        margin-bottom: 10px;
        text-align: center;
    }

    .stfw-gallery-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* Ensure safety images don't overflow */
    .stfw-safety-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        gap: 20px;
        margin-left: 0; /* Remove margin */
    }

    .stfw-safety-image img {
        width: 100%;
        height: auto;
        margin-right: 0; /* Remove margin on smaller screens */
    }

    /* Call-to-action adjustments */
    .stfw-cta {
        padding: 40px 20px;
    }

    .stfw-cta-heading {
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    .stfw-cta-description {
        font-size: 1.2rem;
        text-align: center;
    }

    /* Button Styling */
    .stfw-cta-button {
        padding: 12px 30px;
        font-size: 1.2rem;
    }

    /* Adjust the gallery layout */
    .stfw-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .stfw-gallery-item {
        width: 100%;
        margin-bottom: 10px;
    }
}


/* Images Section */
.stfw-banner-images {
    margin-top: 180px;
    display: flex;
    flex-direction: column;
    gap: 80px; /* Gap specific to Fixed Window Banner Images */
    max-width: 50%;
    align-items: center;
}

/* Text Section */
.stfw-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

.stfw-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}

/* Content Wrapper */
.stfw-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Styling for the text block */
.stfw-description {
    font-size: 1.5rem; /* Consistent font size */
    line-height: 2.4rem; /* Proper spacing between lines */
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px; /* Space above each paragraph */
    flex-grow: 1; /* Allows equal width for each text block */
}

/* Responsive Design */
@media (max-width: 768px) {
    .stfw-banner-content {
      flex-direction: column;
    }

    .stfw-banner-images,
    .stfw-banner-text {
      max-width: 100%;
    }
}

/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.stfw-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.stfw-safety-images {
    display: flex;
    flex-direction: column; /* Align images vertically */
    gap: 40px; /* Space between the images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

/* Safety Image */
.stfw-safety-image img,
.stfw-glass-safe-image img,
.stfw-pool-safe-image img,
.stfw-advantage-images img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.stfw-safety-image img:hover,
.stfw-glass-safe-image img:hover,
.stfw-pool-safe-image img:hover,
.stfw-advantage-images img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

.safety-content {
    margin-top: 20px;
    max-width: 700px;
}

.stfw-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.stfw-benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.stfw-advantage-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 140px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

.stfw-advantage-images img {
    margin-top: 20px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border-radius: 10px;
}

.benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.stfw-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.stfw-gallery-title {
    margin-bottom: 30px;
}

.stfw-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}

.stfw-gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 0px; /* Small gap between images */
    justify-items: center; /* Center images within grid cells */
}

.stfw-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

/* Image Styling */
.stfw-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.stfw-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stfw-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    .stfw-safety {
        width: 90%;
    }

    .safety-content {
    width: 110%;
    }

    /* Adjust gallery layout */
    .stfw-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .stfw-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }
}

/* Call to Action Section */
.stfw-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.stfw-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.stfw-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.stfw-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.stfw-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.stfw-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.stfw-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.stfw-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.stfw-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}


/* IMPACT DOORS PAGE -----------------------------------------------------------------*/
.impact-door-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Set the width to 90% */
    max-width: 100%;
    margin: 0 auto; /* Centers the container horizontally */
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Adds a bold gold border */
    box-sizing: border-box; /* Includes border in total width */
    border-radius: 15px; /* Makes the border slightly rounded */
    animation: slideInRight 1s ease-out; /* Adds slide-in animation */
    margin-bottom: 50px;
}

.impact-door-overlay h1 {
    font-size: 2rem; /* Large, prominent text */
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin: 0;
    color: #e7c439bd; /* Gold accent color */
}

.impact-doors-info {
    padding: 2rem 3rem;
    background-color: #1a1a1a; /* Dark background for contrast */
    color: #ffffff; /* White text for readability */
    font-family:'Times New Roman', Times, serif;
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto; /* Centers the section */
    max-width: 1200px; /* Set a max-width for better control */
    font-size: 1.4rem; /* Ensure font size consistency */
    line-height: 1.9rem;
    word-spacing: 0.2rem
}

/* Ensuring <p> text is italic without affecting font size */
.impact-doors-info p {
    font-size: inherit; /* Inherit font size from parent */
}

.doors-collection-description {
    font-size: 1.2em !important; /* Reduce size further and ensure it's applied */
    line-height: 1.6rem; /* Adjust line height */
    color: #f4f4f4; /* Text color */
    margin-bottom: 2rem !important;
}

/* Styling for <strong> elements within the Impact Windows section */
.impact-doors-info strong {
    color: #c8ab39; /* Gold color for <strong> text */
    font-style: italic;
    line-height: 1.8;
    text-decoration: underline;
}

.impact-doors-intro {
    margin-bottom: 3rem;
    max-width: 1200px; /* Increase max-width to make it wider */
    margin: 0 auto; /* Centers the section */
    padding: 0 1rem; /* Add padding to ensure the content doesn't touch the edges */
}

.impact-doors-intro h2 {
    font-size: 2.7rem; /* Prominent title */
    color: #e7c439; /* Gold accent for contrast */
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.6; /* Added line height */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */
}

.impact-doors-intro p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: #f4f4f4; /* Slightly lighter text color for readability */
}

.impact-doors-options h3 {
    font-size: 2.5rem;
    color: #e7c439; /* Consistent gold accent */
    font-weight: bold;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.impact-doors-options ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.impact-doors-options li {
    margin-bottom: 1.2rem;
    color: #f4f4f4;
    padding-left: 1.2rem;
    position: relative;
}

.impact-doors-options li:before {
    content: '\2022'; /* Adds a custom bullet */
    color: #e7c439; /* Gold bullet for accent */
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: 0;
}

.impact-doors-info h3, .impact-doors-info p {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a professional shadow effect */
}

/* Optional: Subtle background effect */
.impact-doors-info {
    background: linear-gradient(to right, #1a1a1a, #333333);
    max-width: 1195px; /* Increased max-width to make it even wider */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .impact-doors-info {
        padding: 3rem 1.5rem;
    }

    .impact-doors-intro h2 {
        font-size: 2.5rem;
    }

    .impact-doors-options {
        text-align: left;
    }

    .impact-doors-options ul {
        padding-left: 1rem;
    }
}

/* Specific button classes for each window style */
.sgd-btn {
    background-color: transparent; /* Transparent button */
    border-color: #e7c439; /* Gold border */
}

.french-door-btn {
    background-color: transparent;
    border-color: #e7c439;
}

.entry-door-btn {
    background-color: transparent;
    border-color: #e7c439;
}

/* Optional: Add hover effect for individual buttons */
.sgd-btn:hover {
    background-color: #ceab21; /* Hover effect for single Hung */
    color: white;
}

.french-door-btn:hover {
    background-color: #ceab21; /* Hover effect for Fixed/Picture */
    color: white;
}

.entry-door-btn:hover {
    background-color: #ceab21; /* Hover effect for Awning */
    color: white;
}

/* IMPACT DOOR GALLERY ITEMS ----------------------*/

.door-gallery-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 1.5rem; /* Space between items */
    justify-content: center;
    margin: 0 auto;
    max-width: 800px; /* Adjust as needed */
    padding: 0 1rem; /* Optional: add padding */
}

.door-gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    padding: 10px; /* Added padding for breathing space */
}

.door-gallery-card img {
    width: 100%;
    height: 290px;
    object-fit: cover;
    border-radius: 8px; /* Slightly more rounded corners */
    border: 4px solid #ac901f; /* Gold border */
}

/* Gallery overlay */
.door-gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    text-align: center;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s ease-in-out;
    height: 3rem; /* Initial height */
}

/* Gallery overlay heading */
.door-gallery-overlay h3 {
    font-size: 1.7rem; /* Same as windows */
    font-weight: bold;
    color: #f4f4f4; /* Lighter color for readability */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0;
    transition: all 0.3s ease-in-out;
    opacity: 1; /* Always visible */
}

/* General button styles */
.about-btn {
    background-color: transparent;
    color: #e7c439; /* Gold text */
    padding: 0.6rem 1.2rem;
    border: 2px solid #e7c439; /* Gold border */
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    margin-top: 10px;
    transform: translateY(20px); /* Start the button below */
}

/* Show button on hover */
.door-gallery-card:hover .about-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover effects for the gallery card */
.door-gallery-card:hover {
    transform: translateY(-10px); /* Slightly lift the card */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.6);
}

/* Show full overlay with button when hovering */
.door-gallery-card:hover .door-gallery-overlay {
    height: 6rem; /* Match overlay height */
}

@media (max-width: 768px) {
    .impact-door-cover {
        width: 90%; /* Slightly reduce width to allow space around edges */
        padding: 0 1rem; /* Reduce padding for smaller screens */
        margin-bottom: 30px; /* Reduce space between sections */
    }

    .impact-door-overlay h1 {
        font-size: 1.6rem; /* Scale down the heading */
    }

    .impact-doors-info {
        padding: 1.5rem 1rem; /* Reduced padding for smaller devices */
        font-size: 1.2rem; /* Slightly smaller font size */
        line-height: 1.6rem; /* Adjusted line height */
    }

    .impact-doors-info p {
        font-size: 1.1rem; /* Make paragraphs slightly smaller */
    }

    .doors-collection-description {
        font-size: 1rem !important; /* Reduce size */
        line-height: 1.4rem; /* Adjust line height */
    }

    .impact-doors-intro h2 {
        font-size: 2rem; /* Scale down the heading */
    }

    .impact-doors-options h3 {
        font-size: 2rem; /* Smaller title for options */
    }

    .impact-doors-options ul {
        padding-left: 1rem; /* Adjust for better spacing */
    }

    .impact-doors-options li {
        font-size: 1rem; /* Smaller font size for list items */
        padding-left: 1rem; /* Adjust padding */
    }

    .door-gallery-container {
        grid-template-columns: 1fr; /* Stack gallery items vertically */
        padding: 0 1rem; /* Adjust padding */
    }

    .door-gallery-card {
        width: 100%; /* Ensure cards take full width */
        margin-bottom: 1.5rem; /* Space between cards */
    }

    .door-gallery-card img {
        height: 220px; /* Smaller images for better fit on mobile */
    }

    .door-gallery-overlay h3 {
        font-size: 1.4rem; /* Adjust overlay heading size */
    }

    .about-btn {
        padding: 0.8rem 1.5rem; /* Increase button padding for easier tapping */
        font-size: 1.1rem; /* Adjust font size for readability */
    }

    /* Button hover effect adjustments */
    .door-gallery-card:hover {
        transform: translateY(0); /* Remove lift effect for small screens */
    }
}

/* Additional small screen styles */
@media (max-width: 480px) {
    .impact-doors-info {
        font-size: 1.1rem; /* Smaller font for very small screens */
    }

    .impact-doors-intro h2 {
        font-size: 1.8rem; /* Smaller heading for intro */
    }

    .impact-doors-options h3 {
        font-size: 1.8rem; /* Scale down heading */
    }

    .impact-doors-options li {
        font-size: 0.9rem; /* Further reduce list item font size */
    }

    .impact-doors-info p {
        font-size: 1rem; /* Further reduce paragraph font size */
    }

    .door-gallery-card img {
        height: 200px; /* Ensure images are not too large */
    }

    .door-gallery-container {
        grid-template-columns: 1fr; /* Ensure gallery items are stacked */
    }
}

/* SLIDING GLASS DOOR PAGE ---------------------------------------*/
.sgd-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Default width for larger screens */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Gold border */
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.sgd-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fixed or Picture Window Banner Container */
.sgd-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* New class for the images in the SGD banner */
.sgd-banner-image-item {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hover effect for the SGD banner images */
.sgd-banner-image-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the main container doesn't overflow */
    .sgd-window-cover {
        width: 100%; /* Allow full width */
        margin-bottom: 30px; /* Space between sections */
    }

    /* Banner container styling */
    .sgd-banner {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .sgd-heading {
        font-size: 2rem;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .sgd-banner-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .sgd-banner-images img {
        width: 80%;
        max-width: 100%; /* Ensure image doesn't exceed its container width */
        height: auto;
        object-fit: cover; /* Keep aspect ratio intact */
    }

    .sgd-banner-text {
        padding: 20px;
        text-align: center;
        width: 90%;
    }

    /* Stack banner content vertically */
    .sgd-banner-content {
        flex-direction: column;
        gap: 15px; /* Reduced gap */
    }

    .sgd-description {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Gallery section adjustments */
    .sgd-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sgd-gallery-item {
        width: 100%; /* Each gallery item takes full width */
        margin-bottom: 10px;
        text-align: center;
    }

    .sgd-gallery-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* Ensure safety images don't overflow */
    .sgd-safety-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        gap: 20px;
        margin-left: 0; /* Remove margin */
    }

    .sgd-safety-image img {
        width: 100%;
        height: auto;
        margin-right: 0; /* Remove margin on smaller screens */
    }

    /* Call-to-action adjustments */
    .sgd-cta {
        padding: 40px 20px;
    }

    .sgd-cta-heading {
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    .sgd-cta-description {
        font-size: 1.2rem;
        text-align: center;
    }

    /* Button Styling */
    .sgd-cta-button {
        padding: 12px 30px;
        font-size: 1.2rem;
    }
}


/* Images Section */
.sgd-banner-images {
    margin-top: 460px;
    display: flex;
    flex-direction: column;
    gap: 210px; /* Gap specific to Fixed Window Banner Images */
    max-width: 50%;
    align-items: center;
}

/* Text Section */
.sgd-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

/* Text Section */
.sgd-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

.sgd-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}

/* Content Wrapper */
.sgd-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Styling for the text block */
.sgd-description {
    font-size: 1.5rem; /* Consistent font size */
    line-height: 2.4rem; /* Proper spacing between lines */
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px; /* Space above each paragraph */
    flex-grow: 1; /* Allows equal width for each text block */
}

/* Responsive Design */
@media (max-width: 768px) {
    .sgd-banner-content {
      flex-direction: column;
    }

    .sgd-banner-images,
    .sgd-banner-text {
      max-width: 90%;
    }
}

/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.sgd-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.sgd-safety-images {
    display: flex;
    flex-direction: column; /* Align images vertically */
    gap: 40px; /* Space between the images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

/* Safety Image */
.sgd-safety-image img,
.sgd-glass-safe-image img,
.sgd-pool-safe-image img,
.sgd-advantage-images img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.sgd-safety-image img:hover,
.sgd-glass-safe-image img:hover,
.sgd-pool-safe-image img:hover,
.sgd-advantage-images img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

.sgd-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.sgd-benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.sgd-advantage-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 30px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

.sgd-advantage-images img {
    margin-top: 150px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border-radius: 10px;
}

.sgd-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.sgd-gallery-title {
    margin-bottom: 30px;
}

.sgd-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}

.sgd-gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 0px; /* Small gap between images */
    justify-items: center; /* Center images within grid cells */
}

.sgd-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

/* Image Styling */
.sgd-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.sgd-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sgd-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    /* Adjust gallery layout */
    .sgd-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .sgd-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }

    .sgd-advantage-images {
        margin-left: 10px;
        width: 30%;
    }
}

/* Call to Action Section */
.sgd-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.sgd-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.sgd-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.sgd-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.sgd-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.sgd-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.sgd-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.sgd-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.sgd-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}

/* FRENCH DOOR IMPACT PAGE -----------------------------------------------------------------------*/
.fd-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Default width for larger screens */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Gold border */
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.fd-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* New class for the images in the FD banner */
.fd-banner-image-item {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hover effect for the FD banner images */
.fd-banner-image-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}


/* Fixed or Picture Window Banner Container */
.fd-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the main container doesn't overflow */
    .fd-window-cover {
        width: 100%; /* Allow full width */
        margin-bottom: 30px; /* Space between sections */
    }

    /* Banner container styling */
    .fd-banner {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .fd-heading {
        font-size: 2rem;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .fd-banner-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .fd-banner-images img {
        width: 20%;
        max-width: 100%; /* Ensure image doesn't exceed its container width */
        height: auto;
        object-fit: cover; /* Keep aspect ratio intact */
    }

    .fd-banner-text {
        padding: 20px;
        text-align: center;
        width: 80%;
    }

    /* Stack banner content vertically */
    .fd-banner-content {
        flex-direction: column;
        gap: 15px; /* Reduced gap */
    }

    .fd-description {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Gallery section adjustments */
    .fd-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .fd-gallery-item {
        width: 100%; /* Each gallery item takes full width */
        margin-bottom: 10px;
        text-align: center;
    }

    .fd-gallery-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* Ensure safety images don't overflow */
    .fd-safety-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        gap: 20px;
        margin-left: 0; /* Remove margin */
    }

    .fd-safety-image img {
        width: 100%;
        height: auto;
        margin-right: 0; /* Remove margin on smaller screens */
    }

    /* Call-to-action adjustments */
    .fd-cta {
        padding: 40px 20px;
    }

    .fd-cta-heading {
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    .fd-cta-description {
        font-size: 1.2rem;
        text-align: center;
    }

    /* Button Styling */
    .fd-cta-button {
        padding: 12px 30px;
        font-size: 1.2rem;
    }
}


/* Images Section */
.fd-banner-images {
    margin-top: 360px;
    display: flex;
    flex-direction: column;
    gap: 210px; /* Gap specific to Fixed Window Banner Images */
    max-width: 50%;
    align-items: center;
}

/* Text Section */
.fd-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

/* Text Section */
.fd-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

.fd-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}

/* Content Wrapper */
.fd-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Styling for the text block */
.fd-description {
    font-size: 1.5rem; /* Consistent font size */
    line-height: 2.4rem; /* Proper spacing between lines */
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px; /* Space above each paragraph */
    flex-grow: 1; /* Allows equal width for each text block */
}

/* Responsive Design */
@media (max-width: 768px) {
    .fd-banner-content {
      flex-direction: column;
    }

    .fd-banner-images,
    .fd-banner-text {
      max-width: 100%;
    }
}

/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.fd-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.fd-safety-images {
    display: flex;
    flex-direction: column; /* Align images vertically */
    gap: 40px; /* Space between the images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

/* Safety Image */
.fd-safety-image img,
.fd-glass-safe-image img,
.fd-pool-safe-image img,
.fd-advantage-images img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.fd-safety-image img:hover,
.fd-glass-safe-image img:hover,
.fd-pool-safe-image img:hover,
.fd-advantage-images img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

.fd-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.fd-benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.fd-advantage-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 30px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

.fd-advantage-images img {
    margin-top: 150px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border-radius: 10px;
}

.fd-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.fd-gallery-title {
    margin-bottom: 30px;
}

.fd-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}

.fd-gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 0px; /* Small gap between images */
    justify-items: center; /* Center images within grid cells */
}

.fd-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

/* Image Styling */
.fd-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.fd-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

/* Responsive Design */
@media (max-width: 768px) {
    .fd-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    /* Adjust gallery layout */
    .fd-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .fd-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }

    .fd-advantage-images {
        margin-left: 30px;
    }
}

/* Call to Action Section */
.fd-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.fd-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.fd-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.fd-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.fd-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.fd-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.fd-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.fd-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.fd-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}

/* ENTRY IMPACT DOORS PAGE -------------------------------------------------------------------------------------------------- */
.ed-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Default width for larger screens */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Gold border */
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.ed-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fixed or Picture Window Banner Container */
.ed-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* New class for the video in the ED banner */
.ed-banner-video-item {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hover effect for the ED banner video */
.ed-banner-video-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* New class for the image in the ED banner */
.ed-banner-image-item {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* Hover effect for the ED banner images */
.ed-banner-image-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the main container doesn't overflow */
    .ed-window-cover {
        width: 100%; /* Allow full width */
        margin-bottom: 30px; /* Space between sections */
    }

    /* Banner container styling */
    .ed-banner {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 85%;
    }

    .ed-heading {
        font-size: 2rem;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .ed-banner-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .ed-banner-images img {
        width: 20%;
        max-width: 100%; /* Ensure image doesn't exceed its container width */
        height: auto;
        object-fit: cover; /* Keep aspect ratio intact */
    }

    .ed-banner-text {
        padding: 20px;
        text-align: center;
        width: 100%;
    }

    /* Stack banner content vertically */
    .ed-banner-content {
        flex-direction: column;
        gap: 15px; /* Reduced gap */
    }

    .ed-description {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Gallery section adjustments */
    .ed-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .ed-gallery-item {
        width: 100%; /* Each gallery item takes full width */
        margin-bottom: 10px;
        text-align: center;
    }

    .ed-gallery-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    /* Ensure safety images don't overflow */
    .ed-safety-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        gap: 20px;
        margin-left: 0; /* Remove margin */
    }

    .ed-safety-image img {
        width: 100%;
        height: auto;
        margin-right: 0; /* Remove margin on smaller screens */
    }

    /* Call-to-action adjustments */
    .ed-cta {
        padding: 40px 20px;
    }

    .ed-cta-heading {
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    .ed-cta-description {
        font-size: 1.2rem;
        text-align: center;
    }

    /* Button Styling */
    .ed-cta-button {
        padding: 12px 30px;
        font-size: 1.2rem;
    }
}


/* Images Section */
.ed-banner-images {
    margin-top: 360px;
    display: flex;
    flex-direction: column;
    gap: 70px; /* Gap specific to Fixed Window Banner Images */
    max-width: 50%;
    align-items: center;
}

/* Text Section */
.ed-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

/* Text Section */
.ed-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

.ed-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}

/* Content Wrapper */
.ed-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Styling for the text block */
.ed-description {
    font-size: 1.5rem; /* Consistent font size */
    line-height: 2.4rem; /* Proper spacing between lines */
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px; /* Space above each paragraph */
    flex-grow: 1; /* Allows equal width for each text block */
}

/* Responsive Design */
@media (max-width: 768px) {
    .ed-banner-content {
      flex-direction: column;
    }

    .ed-banner-images,
    .ed-banner-text {
      max-width: 100%;
    }
}

/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.ed-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.ed-safety-images {
    display: flex;
    flex-direction: column; /* Align images vertically */
    gap: 40px; /* Space between the images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

/* Safety Image */
.ed-safety-image img,
.ed-glass-safe-image img,
.ed-pool-safe-image img,
.ed-advantage-images img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.ed-safety-image img:hover,
.ed-glass-safe-image img:hover,
.ed-pool-safe-image img:hover,
.ed-advantage-images img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

.ed-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.ed-benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.ed-advantage-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 10px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

.ed-advantage-images img {
    margin-top: 150px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border-radius: 10px;
}

.ed-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.ed-gallery-title {
    margin-bottom: 30px;
}

.ed-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}

.ed-gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 0px; /* Small gap between images */
    justify-items: center; /* Center images within grid cells */
}

.ed-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

/* Image Styling */
.ed-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.ed-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ed-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    /* Adjust gallery layout */
    .ed-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .ed-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }

    .ed-advantage-images {
        margin-left: 10px;
    }
}

/* Call to Action Section */
.ed-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.ed-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.ed-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.ed-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.ed-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.ed-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.ed-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.ed-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.ed-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}

.centered-video {
    border: 5px solid #c6a832;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

/* Hover effect */
.centered-video:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

/* STOREFRONT IMPACT DOORS PAGE -------------------------------------------------------------------------------------------------- */
.stf-window-cover {
    position: relative;
    text-align: center;
    width: 80%; /* Default width for larger screens */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 8px solid #c6a832dd; /* Gold border */
    box-sizing: border-box;
    border-radius: 15px;
    animation: slideInRight 1s ease-out;
    margin-bottom: 50px;
}

.stf-banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Fixed or Picture Window Banner Container */
.stf-banner {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the main container doesn't overflow */
    .stf-window-cover {
        width: 100%; /* Allow full width */
        margin-bottom: 30px; /* Space between sections */
    }

    /* Banner container styling */
    .stf-banner {
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 87%;
    }

    .stf-heading {
        font-size: 2rem;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .stf-banner-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .stf-banner-images img {
        width: 20%;
        max-width: 100%; /* Ensure image doesn't exceed its container width */
        height: auto;
        object-fit: cover; /* Keep aspect ratio intact */
    }

    .stf-banner-text {
        padding: 20px;
        text-align: center;
        width: 100%;
    }

    /* Stack banner content vertically */
    .stf-banner-content {
        flex-direction: column;
        gap: 15px; /* Reduced gap */
    }

    .stf-description {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    /* Gallery section adjustments */
    .stf-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .stf-gallery-item {
        width: 100%; /* Each gallery item takes full width */
        margin-bottom: 10px;
        text-align: center;
    }

    .stf-gallery-image {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .stf-safety {
        width: 95%;
    }

    /* Ensure safety images don't overflow */
    .stf-safety-images {
        display: flex;
        flex-direction: column; /* Stack images vertically */
        gap: 10px;
        margin-right: 0px; /* Remove margin */
        margin-left: 0px;
    }

    .stf-safety-image img {
        width: 100%;
        height: auto;
        margin-right: 0; /* Remove margin on smaller screens */
    }

    /* Call-to-action adjustments */
    .stf-cta {
        padding: 40px 20px;
    }

    .stf-cta-heading {
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
    }

    .stf-cta-description {
        font-size: 1.2rem;
        text-align: center;
    }

    /* Button Styling */
    .stf-cta-button {
        padding: 12px 30px;
        font-size: 1.2rem;
    }
}


/* Images Section */
.stf-banner-images {
    margin-top: 360px;
    display: flex;
    flex-direction: column;
    gap: 90px; /* Gap specific to Fixed Window Banner Images */
    max-width: 50%;
    align-items: center;
}

/* Text Section */
.stf-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

/* Text Section */
.stf-banner-text {
    max-width: 50%; /* Limit the width for better layout control */
    padding: 20px;
    text-align: center;
}

.stf-heading {
    font-size: 3.2rem;
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-align: center; /* Ensure the heading is centered */
}

/* Content Wrapper */
.stf-banner-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}

/* Styling for the text block */
.stf-description {
    font-size: 1.5rem; /* Consistent font size */
    line-height: 2.4rem; /* Proper spacing between lines */
    letter-spacing: 0.1rem;
    font-family: 'Times New Roman', Times, serif;
    margin-top: 60px; /* Space above each paragraph */
    flex-grow: 1; /* Allows equal width for each text block */
}

/* Responsive Design */
@media (max-width: 768px) {
    .stf-banner-content {
      flex-direction: column;
    }

    .stf-banner-images,
    .stf-banner-text {
      max-width: 100%;
    }
}

/* Slide-in animation from the right */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.stf-safety {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.stf-safety-images {
    display: flex;
    flex-direction: column; /* Align images vertically */
    gap: 40px; /* Space between the images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

/* Safety Image */
.stf-safety-image img,
.stf-glass-safe-image img,
.stf-pool-safe-image img,
.stf-advantage-images img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 5px solid #c6a832;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-right: 150px; /* Adds gap to the right of the image */
}

/* Hover effect without shifting the image's position */
.stf-safety-image img:hover,
.stf-glass-safe-image img:hover,
.stf-pool-safe-image img:hover,
.stf-advantage-images img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    transform-origin: center center; /* Keeps the scaling centered */
}

.stf-benefits {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a;
    color: #fff;
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

.stf-benefits-content {
    max-width: 60%; /* Adjust width for text content */
}

.stf-advantage-images {
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 10px; /* Space between the images */
    max-width: 35%; /* Adjust width for images */
    margin-left: 110px; /* Adds gap to the right of the image */
}

.stf-advantage-images img {
    margin-top: 150px;
    width: 100%;
    max-width: 250px; /* Limit the size of images */
    height: auto;
    border-radius: 10px;
}

.stf-gallery {
    padding: 40px 20px;
    text-align: center;
    background-color: #1a1a1a; /* Dark background to match site theme */
    color: #f4f4f4; /* Light text color for contrast */
    margin: 0 auto;
    max-width: 1200px;
    border: 5px solid #c6a832;
    border-radius: 20px;
}

/* Gallery Title */
.stf-gallery-title {
    margin-bottom: 30px;
}

.stf-heading {
    font-size: 3.2rem; /* Larger font size for more emphasis */
    line-height: 4.2rem;
    letter-spacing: 0.1rem;
    color: #ffcc00; /* Golden color to make it pop */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700; /* Bold text for a stronger impact */
    text-transform: uppercase; /* Uppercase for a more polished and impactful appearance */
    margin-bottom: 30px; /* Adds spacing between heading and gallery images */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better visibility */
    border-bottom: 3px solid #c6a832; /* Adds a clean line beneath for emphasis */
    padding-bottom: 10px; /* Space between text and border */
}

.stf-gallery-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
    gap: 0px; /* Small gap between images */
    justify-items: center; /* Center images within grid cells */
}

.stf-gallery-item {
    text-align: center;
    display: flex;
    justify-content: center; /* Centers images horizontally */
    align-items: center; /* Centers images vertically */
    padding: 0; /* Removes any unnecessary padding */
}

/* Image Styling */
.stf-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images maintain their aspect ratio and fill the container */
    border-radius: 8px;
    border: 4px solid #c6a832;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    margin-bottom: 10px; /* Small space below images */
}

/* Hover effect */
.stf-gallery-image:hover {
    transform: scale(1.05);
    border-color: #e7c439;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stf-heading {
        font-size: 1.5rem; /* Smaller text on mobile */
    }

    /* Adjust gallery layout */
    .stf-gallery-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .stf-gallery-item {
        width: 100%; /* Images take full width */
        margin-bottom: 10px;
    }

    .stf-benefits {
        width: 90%;
    }

    .stf-advantage-images {
        margin-left: 30px;
    }
}

/* Call to Action Section */
.stf-cta {
    padding: 80px 40px; /* Spacious padding for a more modern look */
    background: #f7ba20; /* Vibrant orange/golden background */
    text-align: center;
    color: #fff;
    border-radius: 20px; /* Curved corners for a more elegant feel */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Strong shadow for depth */
    margin-top: 50px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    border: 8px solid #ff7700; /* Bold border for emphasis */
}

/* Add animated background gradient for more movement */
.stf-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(255, 191, 0), rgba(255, 153, 51, 0.812));
    z-index: 1;
    animation: gradient-animation 3.5s ease-in-out infinite;
}

@keyframes gradient-animation {
    0% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
    50% { background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(255, 120, 0, 0.6)); }
    100% { background: linear-gradient(135deg, rgba(255, 192, 0, 0.6), rgba(255, 153, 51, 0.6)); }
}

.stf-cta-text {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures text appears above background */
}

.stf-cta-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px; /* Adds letter spacing for emphasis */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4); /* Strong text shadow for contrast */
}

/* Make description text more impactful */
.stf-cta-description {
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Button Styling */
.stf-cta-button {
    padding: 15px 40px;
    font-size: 1.5rem;
    background-color: #f8b400; /* Bright yellow/orange button */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px; /* Rounded button */
    border: 3px solid #e47d2d; /* Border for more definition */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle box shadow */
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.stf-cta-button:hover {
    background-color: #f79e3b; /* Darker yellow-orange for hover */
    transform: scale(1.1); /* Grow effect on hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover active button state */
.stf-cta-button:active {
    transform: scale(1.05); /* Slight shrink when clicked */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* Make the button focus more noticeable */
.stf-cta-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f8b400; /* Focus ring for better accessibility */
}

/* SERVICES PAGE -----------------------------------------------------------------------------*/
/* Styling the container that holds the image */
.image-section.services-banner-images {
    text-align: center; /* Centers the content horizontally */
    padding: 0; /* Adds padding above and below the image */
}

/* Styling the image to be responsive */
.centered-image {
    max-width: 90%; /* Ensures the image is responsive and doesn't overflow */
    height: auto; /* Maintains the image's aspect ratio */
    display: inline-block; /* Makes the image inline so it behaves like a block element */
    margin: 0 auto; /* Ensures the image is centered within its container */
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 150px;
    margin-top: 50px;
    padding: 0 20px;
}

/* Group for each service category */
.services-group {
    text-align: center;
    max-width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease-in-out; /* Smooth hover effect */
}

/* Service images with rounded corners */
.services-image {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Ensures image covers the area without distortion */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Heading styling for service sections */
.services-heading {
    font-size: 2.4em;
    color: white; /* Dark color for contrast */
    font-family: 'Times New Roman', Times, serif;
    font-weight: 600;
    margin: 20px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* List styles */
.services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Ensures the items stack vertically */
    gap: 5px; /* Adds space between each list item */
}

/* Individual service item styles */
.services-list-item {
    background: #f1b72c; /* Warm yellow background */
    padding: 12px 30px;
    margin: 8px 0;
    font-size: 1.2em;
    text-transform: uppercase;
    gap: 10px;
    color: black;
    font-weight: 600;
    border-radius: 8px; /* Rounded corners for list items */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    transition: background-color 0.3s, transform 0.3s; /* Smooth hover effect */
    display: flex;
    align-items: center; /* Vertically centers the content */
    justify-content: flex-start; /* Aligns items to the left */
    text-align: left; /* Ensure the text is aligned to the left */
}

/* Add checkmark before each list item */
.services-list-item::before {
    content: '✔'; /* Checkmark symbol */
    margin-right: 15px; /* Adds space between the checkmark and the text */
    font-size: 1.5em;
    color: green; /* White checkmark to match the text color */
}

/* Hover effect on list items */
.services-list-item:hover {
    background: #e18a00; /* Darker yellow on hover */
    transform: translateY(-3px); /* Slight lift effect */
}

/* Call to Action Section */
#services-cta-section {
    background-color: #c49d27;
    color: white;
    padding: 40px 20px;
    text-align: center;
    border: 10px solid lightgray; /* Border for more definition */
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 25px;
    margin-top: 30px;
}

.services-cta-container h2 {
    font-size: 2.8em;
    margin-bottom: 10px;
}

.services-cta-container p {
    font-size: 1.5em;
    letter-spacing: 0.1em;
    margin-bottom: 50px;
}

.services-cta-button {
    background-color: #ffc000;
    color: black;
    padding: 18px 30px;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.3s;
}

.services-cta-button:hover {
    background-color: black;
    color: #ffc000;
}

/* ABOUT US PAGE -------------------------------------------------------------- */
/* About Page Banner */
/* Styling the container that holds the image */
.image-section.about-page-banner-container {
    text-align: center; /* Centers the content horizontally */
    padding: 0; /* Adds padding above and below the image */
}

/* Styling the image to be responsive */
.centered-image {
    max-width: 90%; /* Ensures the image is responsive and doesn't overflow */
    height: auto; /* Maintains the image's aspect ratio */
    display: inline-block; /* Makes the image inline so it behaves like a block element */
    margin: 0 auto; /* Ensures the image is centered within its container */
}

/* Section Heading Style */
/* Section Heading Style */
.about-services-approach-heading {
    font-size: 4.5em; /* Larger size for impact */
    color: #f1b72c; /* Bold, standout gold color */
    font-family: 'Times New Roman', Times, serif; /* Strong, modern sans-serif font */
    font-weight: 700;
    margin: 40px 0;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    display: inline-block;
    background: linear-gradient(90deg, #f1b72c, #ff7f50); /* Gradient effect */
    -webkit-background-clip: text; /* Clip gradient to text */
    color: transparent; /* Make text color transparent so gradient shows */
    width: 100%; /* Ensure it takes up full width */
}

/* Add an underline animation for the heading */
.about-services-approach-heading::after {
    content: '';
    display: block;
    width: 0;
    height: 6px;
    background: #f1b72c; /* Matching the gold color */
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%); /* Center the line under the heading */
    animation: underlineAnimation 2s ease-in-out infinite alternate; /* Slow down the animation */
}

/* Keyframe animation for the heading underline */
@keyframes underlineAnimation {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* Container Style */
.about-services-approach-container {
    width: 100%; /* Ensures the container spans the full width of its parent */
    max-width: 100%; /* Removed limit, now it takes up full available width */
    margin: 0 auto; /* Centers the container horizontally */
    padding: 0 20px; /* Optional: Adds space inside for breathing room */
}

/* Description Style */
.about-services-approach-description {
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.6em;
    line-height: 2em;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    max-width: none; /* Removed restriction */
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    transform: perspective(800px) rotateX(5deg);
    transition: all 0.5s ease;
    text-align: center;
}

/* Ensure the text container spans the full width */
.about-services-approach-description {
    display: block; /* Forces it to take up the available width */
}

/* Hover effect for description */
.about-services-approach-description:hover {
    transform: perspective(800px) rotateX(0deg) scale(1.0); /* Lift effect and zoom on hover */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); /* Stronger shadow on hover */
}

/* Gradient text highlight for "Storm Troopers Windows & Doors" */
.about-services-approach-description span.highlight {
    font-weight: 700;
    font-size: 1.5em;
    color: #f1b72c;
    background: linear-gradient(45deg, #f1b72c, #ff7f50);
    -webkit-background-clip: text;
    color: transparent;
    transition: color 0.3s ease;
}

/* Add a subtle hover effect to the highlighted brand name */
.about-services-approach-description span.highlight:hover {
    color: #ffd64f;
    transform: scale(1.0); /* Slightly enlarge the brand name on hover */
}

/* Add animation to the description for an elegant reveal */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-services-approach-description {
    animation: slideInFromBottom 1s ease-out;
}

/* Trusted Partners Section Style */
#about-partners-suppliers-section {
    margin-top: 100px;
    background: #1f1f1f; /* Dark background for the section */
    padding: 60px 20px; /* Add some spacing to the section */
    position: relative;
    border-radius: 50px; /* Rounded button */
    border: 4px solid #e47d2d; /* Border for more definition */
}

.award-email-sign {
    display: block; /* Ensures the image is treated as a block-level element */
    margin: 0 auto 60px; /* Centers the image horizontally and adds a bottom margin */
    max-width: 100%; /* Ensures the image scales responsively */
    height: 70%; /* Maintains the aspect ratio */
    background: #1f1f1f; /* Matches the background of the section */
    padding: 20px; /* Adds padding around the image */
    position: relative;
    border-radius: 50px; /* Rounded edges for the image container */
    border: 4px solid #e47d2d; /* Adds the orange border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Optional: Adds a shadow for better visibility */
    transition: transform 1s ease, box-shadow 1s ease, border-color 1s ease; /* Slower transition for smoother animation */
}

.award-email-sign:hover {
    transform: scale(1.1); /* Slightly enlarges the image */
    box-shadow: 0 8px 25px rgba(228, 125, 45, 0.6); /* Adds a glowing shadow */
    border-color: #ff9a3d; /* Changes the border color to a lighter shade on hover */
}

/* Heading Style */
.about-partners-suppliers-heading {
    font-size: 4.5em; /* Larger size for impact */
    color: #f1b72c; /* Bold, standout gold color */
    font-family: 'Times New Roman', Times, serif; /* Strong, modern serif font */
    font-weight: 700;
    margin: 40px 0;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    display: inline-block;
    background: linear-gradient(90deg, #f1b72c, #ff7f50); /* Gradient effect */
    -webkit-background-clip: text; /* Clip gradient to text */
    color: transparent; /* Make text color transparent so gradient shows */
    width: 100%; /* Ensure it takes up full width */
}

/* Underline animation for the heading */
.about-partners-suppliers-heading::after {
    content: '';
    display: block;
    width: 0;
    height: 6px;
    background: #f1b72c; /* Matching the gold color */
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%); /* Center the line under the heading */
    animation: underlineAnimation 2s ease-in-out infinite alternate; /* Slow down the animation */
}

/* Keyframe animation for the heading underline */
@keyframes underlineAnimation {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* Description Style */
.about-partners-suppliers-description {
    color: #fff; /* White text */
    font-family: 'Times New Roman', Times, serif; /* Clean, readable font */
    font-size: 1.6em;
    text-align: center;
    line-height: 2em;
    margin: 20px 0;
    padding: 20px 60px; /* Padding to match the previous section */
    width: 100%; /* Full width of the container */
    max-width: 100%; /* Ensure it doesn’t exceed container width */
    background: rgba(0, 0, 0, 0.7); /* Dark background with opacity for readability */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Strong shadow for depth */
    overflow: hidden;
    transform: perspective(800px) rotateX(5deg);
    transition: all 0.5s ease;
    box-sizing: border-box; /* Ensure padding is included in the width */
    margin: 0 auto 40px auto; /* Center and add bottom margin */
}

/* Hover effect for description */
.about-partners-suppliers-description:hover {
    transform: perspective(800px) rotateX(0deg) scale(1.05); /* Lift effect and zoom on hover */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); /* Stronger shadow on hover */
}

/* Partner List Style */
.about-partners-list {
    list-style-type: none;
    padding: 0;
    margin: 40px 0;
    text-align: center;
    font-weight: bold;
    line-height: 2.5em;
}

/* Individual Partner Item Style */
.about-partner-item {
    font-size: 1.4em; /* Slightly larger font for better visibility */
    color: #fff;
    margin: 15px 0;
    font-family: 'Times New Roman', Times, serif;
    position: relative;
    padding-left: 40px; /* Space for the icon */
    text-transform: uppercase; /* Uppercase for added impact */
    transition: color 0.3s ease, transform 0.3s ease, padding-left 0.3s ease;
}

/* Adding an icon to the left of each partner name */
.about-partner-item::before {
    content: '✔'; /* Checkmark symbol for a visual cue */
    font-size: 2.5em; /* Larger icon size */
    color: #f1b72c; /* Gold color to match theme */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Center the icon vertically */
    transition: color 0.3s ease;
}

/* Hover effects for partner items */
.about-partner-item:hover {
    color: #f1b72c; /* Gold color on hover */
    transform: scale(1.0); /* Enlarging the item slightly on hover */
    padding-left: 60px; /* Add some extra space to the left when hovered */
}

/* Hover effect for the icon */
.about-partner-item:hover::before {
    color: #fff; /* Change icon color on hover */
    transform: translateY(-50%) scale(1.2); /* Enlarge the icon on hover */
}

/* Adding a subtle underline effect on hover */
.about-partner-item:hover::after {
    content: none;
}

/* Styling for partner images section */
.about-partners-images {
    display: flex;
    flex-wrap: wrap; /* Allow images to wrap to the next row */
    gap: 30px; /* Space between images */
    justify-content: center; /* Center the images within the section */
    margin-top: 20px; /* Add some space above the images */
    padding: 0 10px;
}

/* Individual image styling */
.partner-image {
    width: auto;
    height: auto;
    max-height: 110px;
    max-width: 190px; /* Set a maximum width for images */
    border-radius: 10px; /* Slightly round the corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for partner images */
.partner-image:hover {
    transform: scale(1.1); /* Slightly enlarge the image on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Increase shadow depth on hover */
}

/* PRIVACY POLICY PAGE ---------------------------------------------------------- */
/* Privacy Policy Section */
#privacy-policy-section {
    padding: 40px 10%;
    background-color: #000; /* Black background */
    color: #d4af37; /* Gold text color */
}

.privacy-policy-container {
    max-width: 1000px;
    margin: 0 auto;
}

.privacy-policy-heading {
    font-size: 3.5em;
    color: #d4af37; /* Gold color for the heading */
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    margin-bottom: 60px;
}

.privacy-policy-introduction {
    font-size: 1.5em;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.7em;
    color: #d4af37; /* Gold color for introduction text */
    margin-bottom: 30px;
    text-align: center;
    margin-bottom: 90px;
}

.privacy-policy-subheading {
    font-size: 3.5em;
    color: #d4af37; /* Gold color for the heading */
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    margin-bottom: 60px;
}

.privacy-policy-text {
    font-size: 1.5em;
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.7em;
    color: #d4af37; /* Gold color for introduction text */
    margin-bottom: 30px;
    text-align: center;
    margin-bottom: 90px;
}

.privacy-policy-text ul {
    margin-top: 10px;
    list-style-type: disc;
    margin-left: 20px;
}

.privacy-policy-text a {
    color: #d4af37; /* Gold color for links */
    text-decoration: none;
}

.privacy-policy-text a:hover {
    text-decoration: underline;
}

/* GENERAL RESPONSIVE SETTINGS */

/* For screens smaller than 768px (tablets and smaller) */
@media (max-width: 768px) {
    /* Services container */
    .services-container {
        flex-direction: column;
        gap: 40px; /* Reduced gap for smaller screens */
        margin-top: 30px;
        padding: 0 10px;
    }

    /* Service group (ensure it fits in smaller screens) */
    .services-group {
        max-width: 100%;
        box-shadow: none; /* Reduce shadow for smaller devices */
    }

    /* Service image */
    .services-image {
        height: 150px; /* Reduce image height */
    }

    /* Service heading */
    .services-heading {
        font-size: 1.8em; /* Make font smaller on smaller screens */
    }

    /* Services list item font size */
    .services-list-item {
        font-size: 1em;
        padding: 10px 20px;
    }

    /* CTA button */
    .services-cta-button {
        font-size: 1.2em;
        padding: 12px 24px;
    }

    /* About page banner */
    .image-section.about-page-banner-container .centered-image {
        max-width: 100%; /* Full width of the screen */
    }

    /* About Us Description */
    .about-services-approach-description {
        font-size: 1.4em;
        padding: 15px;
    }

    /* Partner images */
    .about-partners-images {
        flex-direction: column;
        align-items: center;
    }

    .partner-image {
        max-height: 50px; /* Reduce size of partner images */
        max-width: 50px;
    }

    /* Privacy Policy */
    .privacy-policy-heading,
    .privacy-policy-subheading {
        font-size: 2.5em; /* Reduce heading font size */
    }

    .privacy-policy-introduction,
    .privacy-policy-text {
        font-size: 1.2em; /* Smaller font size for text */
        margin-bottom: 20px;
    }
}

/* For screens smaller than 480px (phones) */
@media (max-width: 480px) {
    /* Services container */
    .services-container {
        gap: 20px; /* Smaller gap */
        padding: 0 5px;
    }

    /* Service group */
    .services-group {
        max-width: 100%;
    }

    /* Service image */
    .services-image {
        height: 120px; /* Smaller image height */
    }

    /* Service heading */
    .services-heading {
        font-size: 1.6em; /* Even smaller font size */
    }

    /* List items */
    .services-list-item {
        font-size: 0.9em; /* Smaller font size */
    }

    /* CTA Button */
    .services-cta-button {
        font-size: 1.1em;
        padding: 10px 20px;
    }

    /* About page banner */
    .image-section.about-page-banner-container .centered-image {
        max-width: 100%;
    }

    /* About Us Description */
    .about-services-approach-description {
        font-size: 1.3em;
        padding: 10px;
    }

    /* Partner images */
    .partner-image {
        max-height: 40px; /* Even smaller images */
        max-width: 40px;
    }

    /* Privacy Policy */
    .privacy-policy-heading,
    .privacy-policy-subheading {
        font-size: 2em; /* Smaller heading size */
    }

    .privacy-policy-introduction,
    .privacy-policy-text {
        font-size: 1em;
    }

    .privacy-policy-text ul {
        margin-left: 10px;
    }
}