/* General Styles */

:root {

    --primary-font: Arial, sans-serif;

}

html {

    overflow-x: hidden;

    width: 100%;

    box-sizing: border-box;

    scroll-behavior: smooth;

}



*,

*::before,

*::after {

    box-sizing: inherit;

}



body {

    margin: 0;

    font-family: var(--primary-font);

    font-size: 16px;

    line-height: 28px;

    font-weight: 400;

    color: #666;

    overflow-x: hidden;

    width: 100%;

    max-width: 100vw;

}



.container {

    max-width: 1700px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Reduce side padding for product pages */

.product-page .container {

    padding: 0 15px;

}



/* Header container adjustments */

header .container {

    max-width: 100%;

    margin: 0 auto;

    padding: 0 30px 0 40px;

    width: 100%;

    box-sizing: border-box;

}



a {

    text-decoration: none;

    color: inherit;

}



button {

    cursor: pointer;

    border: none;

    padding: 10px 20px;

    border-radius: 5px;

    font-weight: bold;

}



/* Header Section */

header {

    background-color: #fff;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    width: 100%;

}



/* Top Header Bar */

.header-top-bar {

    background-color: #fff;

    padding: 10px 0;

    border-bottom: 1px solid #eee;

}



.header-phone {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    font-size: 13px;

}



.header-phone i {

    color: #333;

    font-size: 14px;

}



.phone-label {

    color: #333;

    font-weight: 500;

}



.phone-number {

    color: #c52828;

    font-weight: 600;

    text-decoration: none;

}



.phone-number:hover {

    text-decoration: underline;

}



/* Main Header Band */

.header-main {

    background-color: #fff;

    padding: 18px 0;

}


.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

}



.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}



.logo img {

    height: 60px;

    width: auto;

}



.logo-text {

    display: flex;

    flex-direction: column;

}



.logo-name {

    font-size: 18px;

    font-weight: 700;

    color: #333;

    line-height: 1.2;

}



.logo-tagline {

    font-size: 12px;

    color: #666;

    line-height: 1.2;

    margin-top: 2px;

}



.header-right {

    display: flex;

    align-items: center;

    gap: 25px;

    flex-shrink: 0;

    margin-right: 0;

}



nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    gap: 22px;

}

/* Desktop: main-nav should behave as regular nav */
.main-nav {

    position: static;

    display: block;

    height: auto;

    width: auto;

    max-width: none;

    background: transparent;

    box-shadow: none;

    padding: 0;

    overflow: visible;

}



nav ul li {

    position: relative;

    display: flex;

    align-items: center;

}



.nav-link {

    font-weight: 600;

    font-size: 14px;

    padding: 5px 0;

    text-decoration: none;

    transition: color 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



.nav-link-red {

    color: #c52828;

}



.nav-link-black {

    color: #333;

}



.nav-link:hover {

    opacity: 0.8;

}



.nav-link i {

    font-size: 10px;

    margin-left: 2px;

    transition: transform 0.3s ease;

}

/* Desktop: chevron should point down by default, rotate up on hover */
.dropdown:hover .nav-link i {

    transform: rotate(180deg);

}



.dropdown-content {

    display: none;

    position: absolute;

    top: calc(100% + 5px);

    right: 0;

    background-color: #fff;

    min-width: 200px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);

    z-index: 1000;

    padding: 8px 0;

    white-space: nowrap;

}



.dropdown::before {

    content: '';

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    height: 5px;

}



.dropdown-content a {

    display: block;

    padding: 10px 18px;

    color: #333;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    transition: background-color 0.2s ease;

}



.dropdown-content a:hover {

    background-color: #f5f5f5;

    color: #c52828;

}



.dropdown:hover .dropdown-content,

.dropdown-content:hover {

    display: block;

}



.btn-customize-shed {

    background-color: #c52828;

    color: #fff;

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: 600;

    font-size: 14px;

    border: none;

    cursor: pointer;

    transition: background-color 0.3s ease;

    white-space: nowrap;

}



.btn-customize-shed:hover {

    background-color: #a61f1f;

}


/* Mobile Menu Toggle */

.mobile-menu-toggle {

    display: none;

    flex-direction: column;

    justify-content: space-around;

    width: 30px;

    height: 30px;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0;

    z-index: 1001;

}


/* Hide mobile menu elements on desktop */

.mobile-menu-header,

.mobile-btn-customize,

.mobile-menu-close {

    display: none !important;

}


.mobile-menu-toggle span {

    width: 100%;

    height: 3px;

    background-color: #333;

    border-radius: 3px;

    transition: all 0.3s ease;

}


.mobile-menu-toggle.active span:nth-child(1) {

    transform: rotate(45deg) translate(8px, 8px);

}


.mobile-menu-toggle.active span:nth-child(2) {

    opacity: 0;

}


.mobile-menu-toggle.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -7px);

}



/* Hero Section */

.hero-section {

    position: relative;

    background-image: url('assets/Hero-1 (1).jpg');

    background-size: cover;

    background-position: center;

    color: #fff;

    padding: 150px 0 130px 0;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    /* Horizontal gradient similar to reference hero */
    right: 0;

    bottom: 0;

    z-index: 1;

    display: none;

}



/* Hero layout – matches screenshot */

.hero-layout {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

}


.hero-banner {

    position: relative;

    display: flex;

    align-items: stretch;

    background-color: rgba(0, 0, 0, 0.55);

    padding: 40px 60px 55px 0;

    max-width: 780px;

    width: 100%;

    box-sizing: border-box;

}


.hero-banner-accent {

    width: 6px;

    background-color: #e02020;

}


.hero-banner-content {

    padding-left: 35px;

    padding-right: 40px;

}


.hero-banner-content h1 {

    font-size: 3.4em;

    margin: 0 0 18px 0;

    line-height: 1.12;

    font-weight: 800;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

}


.hero-banner-content p {

    font-size: 1.05em;

    margin: 0 0 25px 0;

    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);

}





/* Hero arrow block mimicking red control at bottom center of banner */

.hero-arrow-block {

    position: absolute;

    bottom: 18px;

    left: 50%;

    transform: translateX(-50%);

    display: inline-flex;

    align-items: stretch;

    overflow: hidden;

    background-color: #e02020;

}


.hero-arrow {

    border: none;
    background: transparent;
    color: #fff;
    width: 42px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95em;
    cursor: pointer;
}


.hero-arrow-divider {

    width: 1px;
    background-color: rgba(255, 255, 255, 0.7);
}



.btn-contact-us {

    background-color: #c00;

    color: #fff;

    padding: 18px 36px;

    font-size: 1.05em;

    border-radius: 5px;

    transition: background-color 0.3s ease;

}



.btn-contact-us:hover {

    background-color: #a00;

}



.btn-design-shed {

    background-color: #c52828;

    color: #fff;

    padding: 15px 35px;

    font-size: 1.1em;

    font-weight: 600;

    border-radius: 4px;

    border: none;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.btn-design-shed:hover {

    background-color: #a61f1f;

}



.hero-slider-nav {

    position: absolute;

    bottom: 50%; /* Center vertically */

    transform: translateY(50%);

    width: 100%;

    display: flex;

    justify-content: space-between;

    padding: 0 20px;

    box-sizing: border-box;

}



.slider-arrow {

    background-color: rgba(255, 255, 255, 0.3);

    color: #fff;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2em;

    transition: background-color 0.3s ease;

}



.slider-arrow:hover {

    background-color: rgba(255, 255, 255, 0.6);

}



.left-arrow {

    left: 20px;

}



.right-arrow {

    right: 20px;

}



/* Welcome Section */

.welcome-section {

    padding: 80px 0;

    background-color: #f8f8f8;

}



.welcome-container {

    display: flex;

    align-items: center;

    gap: 40px;

}



.welcome-image {

    flex: 1;

    max-width: 50%;

}



.welcome-image img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 5px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



.welcome-text {

    flex: 1;

    max-width: 40%;
    margin-left: 90px;

}



.welcome-text h2 {

    font-size: 2.125rem;

    color: #333;

    margin-bottom: 20px;
    /* position: relative; */
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    /* font-family:Montserrat ; */
    /* font-weight: 700; */
    line-height: 2.75rem;



}



.welcome-text p {

    margin-bottom: 15px;

    color: #666;

}



.btn-call-us {

    background-color: #c00;

    color: #fff;

    padding: 7px 16px;

    font-size: 12px;

    border-radius: 5px;

    margin-top: 20px;

    transition: background-color 0.3s ease;
    min-width: 0;
    line-height: 22px;

}



.btn-call-us:hover {

    background-color: #a00;

}



/* Products Section */

.products-section {

    padding: 80px 0;

    text-align: center;

    background-color: #fff;
    margin-top: -70px;

}



.products-section h2 {

    font-size: 21px;

    color: #333;

    margin-bottom: 20px;

}



.products-description {

    /* max-width: 800px; */

    margin: 0 auto 18px auto;

    color: #555;

}



.product-grid {

    display: flex;

    grid-template-columns: repeat(4, minmax(250px, 1fr));

    gap: 10px;

    margin-top: 40px;
    

}



.product-card {

    background-color: #fff;

    border-radius: 0;

    box-shadow: 0 8px 18px rgba(0,0,0,0.08);

    padding: 30px 30px 40px 30px;

    text-align: left;

    transition: transform 0.2s ease;

}



.product-card:hover {

    transform: translateY(-5px);

}



.product-card img {

    max-width: 100%;

    height: 230px; /* Taller images to match reference cards */

    object-fit: cover;

    border-radius: 0;

    margin-bottom: 30px;
    

}



.product-card h3 {

    font-size: 1.9em;

    color: #333;

    margin-bottom: 18px;

}



.product-link {

    color: #c00;

    font-weight: 600;

    text-decoration: underline;

    text-underline-offset: 3px;

    font-size: 1.05em;

    transition: color 0.25s ease;

}



.product-link:hover {

    color: #a00;

}



/* Buying A Shed Section */

.buying-shed-section {

    /* position: relative; */

    background-image: url('assets/background-help.jpg');

    background-size: cover;

    background-position: center;

    color: #fff;

    padding: 80px 0;

    text-align: center;

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.buying-shed-overlay {

    /* position: absolute; */

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 1;

}



.buying-shed-content {

    position: relative;

    z-index: 2;

    width: 100%;

}



.buying-shed-content h2 {

    font-size: 2.5em;

    font-weight: 700;

    margin-bottom: 60px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

    color: #fff;

    text-align: center;

}



.feature-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    max-width: 1200px;

    margin: 0 auto;

}



.feature-card {

    background-color: #fff;

    color: #333;

    padding: 40px 30px;

    /* border-radius: 8px; */

    box-shadow: 0 8px 18px rgba(0,0,0,0.15);

    border-top: 6px solid #c52828;

    text-align: center;

    display: flex;

    flex-direction: column;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: rgba(255, 255, 255, .9);

}



.feature-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 24px rgba(0,0,0,0.2);

}



.feature-icon {

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.feature-icon i {

    font-size: 48px;

    color: #0066cc;

}



.feature-card h3 {

    font-size: 1.5em;

    font-weight: 700;

    margin-bottom: 15px;

    color: #333;

    line-height: 1.3;

}



.feature-card p {

    margin-bottom: 25px;

    color: #666;

    font-size: 16px;

    line-height: 1.6;

    flex-grow: 1;

}



.btn-learn-more,

.btn-contact-us-small,

.btn-customize-your-shed {

    background-color: #c52828;

    color: #fff;

    padding: 12px 24px;

    font-size: 14px;

    font-weight: 600;

    border-radius: 4px;

    border: none;

    cursor: pointer;

    transition: background-color 0.3s ease;

    align-self: center;

    margin-top: auto;

    text-transform: none;

    letter-spacing: 0;

}



.btn-learn-more:hover,

.btn-contact-us-small:hover,

.btn-customize-your-shed:hover {

    background-color: #a61f1f;

}



/* Testimonial Section */

.testimonial-section {

    padding: 80px 0;

    text-align: center;

    background-color: #f8f8f8;

}



.testimonial-section h2 {

    font-size: 2.5em;

    color: #333;

    margin-bottom: 40px;

}



.quote-icon {

    font-size: 5em;

    color: #c00;

    line-height: 0.7;

    margin-bottom: 20px;

}



.testimonial-text {

    font-size: 1.5em;

    font-style: italic;

    max-width: 800px;

    margin: 0 auto 20px auto;

    color: #666;

}



.testimonial-author {

    font-size: 1.2em;

    font-weight: bold;

    color: #333;

    margin-bottom: 40px;

}



.carousel-indicators {

    display: flex;

    justify-content: center;

    gap: 10px;

}



.dot {

    height: 12px;

    width: 12px;

    background-color: #bbb;

    border-radius: 50%;

    display: inline-block;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.dot.active {

    background-color: #c00;

}



/* Footer Section */

footer {

    background-color: #222;

    color: #eee;

    padding-top: 60px;

    padding-bottom: 20px;

}



.footer-container {

    display: flex;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 40px;

    flex-wrap: wrap; /* Allow wrapping on smaller screens */

    align-items: flex-start; /* Align content to the top */

}



.footer-contact-info,

.footer-form {

    flex: 1;

    min-width: 300px; /* Ensure minimum width for responsiveness */

}



.footer-contact-info h3 {

    font-size: 1.6em; /* Adjusted font size */

    color: #fff;

    margin-bottom: 20px;

    border-bottom: 2px solid #c00;

    padding-bottom: 10px;

    display: inline-block; /* To make border-bottom only under text */

    line-height: 1.2; /* Adjust line-height for better spacing */

}



.footer-form h3 {

    font-size: 1.6em; /* Adjusted font size */

    color: #fff;

    margin-bottom: 20px; /* Restore original margin-bottom */

    width: 100%; /* Make the underline span full width */

    text-align: left; /* Ensure text is left-aligned */

}



.footer-contact-info p,

.footer-contact-info ul li {

    margin-bottom: 5px; /* Adjusted margin */

    font-size: 0.95em; /* Adjusted font size */

    line-height: 1.5; /* Adjusted line-height for readability */

}



.footer-contact-info strong {

    font-weight: bold;

}



.footer-contact-info .fa-phone {

    margin-right: 8px;

}



.footer-contact-info a {

    color: #c00;

    transition: color 0.3s ease;

}



.footer-contact-info a:hover {

    color: #fff;

}



.social-icons {

    margin-top: 20px;

    display: flex; /* Use flex to control spacing */

    gap: 15px; /* Spacing between icons */

}



.social-icons a {

    color: #fff;

    font-size: 1.5em;

    transition: color 0.3s ease;

}



.social-icons a:hover {

    color: #c00;

}



.footer-form {

    background-color: #2d2d2d; /* Specific dark grey from image */

    padding: 20px 30px 30px 30px; /* Adjusted padding-top for spacing and consistent padding */

    border-top: 2px solid #c00; /* Red underline at the very top of the section */

    border-radius: 5px; /* Subtle border-radius */

}



.footer-form form {

    display: flex;

    flex-direction: column;

    /* Removed gap: 15px; to manually control spacing */

}



.footer-form input {

    background-color: transparent; /* Transparent background */

    border: none; /* Remove all borders */

    border-bottom: 1px solid #555; /* Only bottom border */

    padding: 0 0 5px 0; /* Adjusted padding to match screenshot */

    color: #eee;

    border-radius: 0; /* Remove border-radius */

    font-size: 0.95em; /* Adjusted font size */

    margin-bottom: 15px; /* Adjusted spacing between fields */

    box-sizing: border-box; /* Include padding and border in the element's total width and height */

    width: 100%; /* Make input fields span full width */

    outline: none; /* Remove default browser outline on focus */

    height: 40px; /* Fixed height for inputs */

    line-height: normal; /* Restore normal line-height */

}



.footer-form input::placeholder,

.footer-form textarea::placeholder {

    color: #bbb;

}



.footer-form textarea {

    background-color: transparent; /* Transparent background */

    border: none; /* Remove all borders */

    border-bottom: 1px solid #555; /* Only bottom border */

    padding: 5px 0; /* Adjusted padding to match screenshot */

    color: #eee;

    border-radius: 0; /* Remove border-radius */

    font-size: 0.95em; /* Adjusted font size */

    margin-bottom: 15px; /* Adjusted spacing between fields */

    box-sizing: border-box; /* Include padding and border in the element's total width and height */

    width: 100%; /* Make input fields span full width */

    outline: none; /* Remove default browser outline on focus */

    min-height: 100px;

    resize: vertical;

    line-height: normal; /* Restore normal line-height for multiline text */

}



.recaptcha-text {

    font-size: 0.8em; /* Slightly smaller */

    color: #bbb;

    margin-top: 5px; /* Adjusted spacing */

    margin-bottom: 15px; /* Adjusted spacing */

}



.recaptcha-text a {

    color: #c00;

    transition: color 0.3s ease;

}



.recaptcha-text a:hover {

    color: #eee;

}



.btn-send-request {

    background-color: #c00;

    color: #fff;

    padding: 12px 25px;

    font-size: 1em;

    border-radius: 5px;

    align-self: flex-start; /* Align to the left */

    transition: background-color 0.3s ease;

}



.btn-send-request:hover {

    background-color: #a00;

}



.footer-bottom {

    background-color: #111;

    padding: 20px 0;

    text-align: center;

    border-top: 1px solid #333;

    /* display: flex; */

    justify-content: space-between;

    align-items: center; /* Vertically center items */
    

}



.footer-bottom .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.footer-bottom .website-by {

    color: #aaa;

    font-size: 0.85em;

    display: flex;

    align-items: center;

    gap: 5px;

}



.footer-bottom .website-by img {

    height: 20px; /* Adjust as needed */

    vertical-align: middle;

}



.footer-bottom p {

    margin: 0;

    font-size: 0.9em;

    color: #aaa;

}



/* Contact Page Specific Styles */

.contact-main-content {

    padding: 80px 20px;

}



.contact-page-content {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;

}



.contact-page-content .footer-contact-info,

.contact-page-content .footer-form {

    flex: 1;

    min-width: 300px;

}



.contact-page-content .footer-contact-info h3,

.contact-page-content .footer-form h3 {

    text-align: left; /* Ensure headings are left-aligned on contact page */

}


/* Product Detail Pages */

.product-page {

    background-color: #f5f5f5;

}


.product-title-bar {

    background-color: #c52828;

    padding: 30px 0;

    color: #fff;

    text-align: center;

}


.product-title-bar h1 {

    margin: 0;

    font-size: 2.4em;

    font-weight: 700;

}


.product-hero {

    background-color: #ffffff;

    padding: 70px 0 50px 0;

}


.product-hero-inner {

    display: grid;

    grid-template-columns: 1.05fr 1fr;

    gap: 70px;

    align-items: start;

}


.product-hero-image img {

    width: 100%;

    height: auto;

    display: block;

    box-shadow: 0 8px 18px rgba(0,0,0,0.18);

}


.product-hero-content h2 {

    font-size: 1.45em;

    color: #c52828;

    margin-top: 0;

    margin-bottom: 20px;

    font-weight: 600;

    line-height: 1.3;

}


.product-hero-features h3 {

    font-size: 0.95em;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #777;

    margin-bottom: 12px;

}


.product-hero-features ul {

    list-style: none;

    padding: 0;

    margin: 0 0 24px 0;

}


.product-hero-features li {

    position: relative;

    padding-left: 16px;

    margin-bottom: 6px;

    font-size: 0.96em;

    color: #666;

}


.product-hero-features li::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0.55em;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background-color: #c52828;

}



.product-hero-extra-options {

    margin-top: 20px;

    margin-bottom: 24px;

}



.product-hero-extra-options h3 {

    font-size: 0.95em;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #777;

    margin-bottom: 12px;

}



.product-hero-extra-options ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.product-hero-extra-options li {

    position: relative;

    padding-left: 16px;

    margin-bottom: 6px;

    font-size: 0.96em;

    color: #666;

}



.product-hero-extra-options li::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0.55em;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background-color: #c52828;

}


.product-hero-actions {

    display: flex;

    gap: 15px;

}


.btn-primary,

.btn-outline {

    padding: 12px 26px;

    border-radius: 3px;

    font-size: 0.95em;

    font-weight: 600;

}


.btn-primary {

    background-color: #c52828;

    color: #fff;

}


.btn-primary:hover {

    background-color: #a61f1f;

}


.btn-outline {
    background-color: #c52828;

    color: #fff;

    border: none;

}


.btn-outline:hover {

    background-color: #c52828;

    color: #fff;

}


.product-pricing {

    background-color: #f5f5f5;

    padding: 45px 0 55px 0;

}


.product-pricing h2 {

    text-align: center;

    font-size: 1.25em;

    margin: 0 0 35px 0;

    font-weight: 700;

    color: #000;

    letter-spacing: 0.02em;

}


.pricing-tables-dual {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 300px;

    max-width: 1200px;

    margin: 0 auto;

}



.pricing-table-title {

    font-size: 1.05em;

    font-weight: 600;

    color: #333;

    text-align: center;

    margin: 0 0 12px 0;

    padding: 12px 15px 8px 15px;

    background-color: #fff;

}



.pricing-table-wrapper {

    background-color: #fff;

    box-shadow: 0 8px 18px rgba(0,0,0,0.12);

    padding: 0;

    overflow: hidden;

    border: 2px solid #333;

}


.pricing-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.95em;

}


.pricing-table th,

.pricing-table td {

    padding: 12px 18px;

    text-align: left;

    border: 2px solid #333;

}


.pricing-table thead th {

    background-color: #c52828;

    color: #fff;

    font-weight: 600;

    text-align: left;

}



.pricing-table tbody tr {

    background-color: #fff;

}



.pricing-table tbody td {

    color: #333;

}


/* Flat white body rows to visually match reference pricing table */


.product-design-cta {

    background-color: #222;

    padding: 60px 0;

    color: #fff;

}


.product-design-inner {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    gap: 40px;

    align-items: center;

}


.product-design-image img {

    width: 100%;

    height: auto;

    display: block;

    box-shadow: 0 8px 18px rgba(0,0,0,0.4);

}


.product-design-content h2 {

    font-size: 1.6em;

    margin-top: 0;

    margin-bottom: 18px;

}


.product-design-content p {

    margin-bottom: 22px;

    color: #ddd;

}





/* Responsive Adjustments */

@media (max-width: 1024px) {

    /* Hero Section Responsive - Tablet */

    .hero-section {

        padding: 120px 0 100px 0;

        min-height: 450px;

    }

    .hero-banner {

        padding: 35px 50px 50px 0;

        max-width: 85%;

    }

    .hero-banner-content {

        padding-left: 30px;

        padding-right: 35px;

    }

    .hero-banner-content h1 {

        font-size: 3em;

    }

    .hero-banner-content p {

        font-size: 1em;

    }

    .btn-contact-us {

        padding: 16px 32px;

        font-size: 1em;

    }

}

@media (max-width: 992px) {

    /* Header Responsive - Tablet */

    .header-container {

        flex-wrap: wrap;

        gap: 15px;

    }

    .logo img {

        height: 50px;

    }

    .logo-name {

        font-size: 16px;

    }

    .logo-tagline {

        font-size: 11px;

    }

    .header-right {

        gap: 15px;

    }

    nav ul {

        gap: 15px;

    }

    .nav-link {

        font-size: 13px;

    }

    .btn-customize-shed {

        padding: 8px 16px;

        font-size: 13px;

    }

    .hero-content h1 {

        font-size: 3em;

    }

    .hero-content p {

        font-size: 1.2em;

    }

    /* Hero Section Responsive */

    .hero-section {

        padding: 100px 0 80px 0;

        min-height: 400px;

    }

    .hero-banner {

        padding: 30px 40px 40px 0;

        max-width: 90%;

    }

    .hero-banner-content {

        padding-left: 25px;

        padding-right: 30px;

    }

    .hero-banner-content h1 {

        font-size: 2.5em;

    }

    .hero-banner-content p {

        font-size: 1em;

    }

    .btn-contact-us {

        padding: 15px 28px;

        font-size: 1em;

    }

    .hero-arrow-block {

        bottom: 12px;

    }

    .hero-arrow {

        width: 36px;

        height: 30px;

        font-size: 0.85em;

    }

    .welcome-container {

        flex-direction: column;

    }

    .welcome-image, .welcome-text {

        max-width: 100%;

    }

    .footer-container {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    .footer-contact-info h3 {

        display: block; /* Revert to block for center alignment */

        border-bottom: none; /* Remove border-bottom for center alignment */

        padding-bottom: 0;

    }

    .footer-form h3 {

        display: block; /* Ensure it's block for full width */

        border-top: none; /* Removed border-top for mobile as it's handled by generic footer-form h3 */

        padding-top: 0; /* Removed padding for mobile as it's handled by generic footer-form h3 */

        width: auto; /* Revert width on smaller screens */

        text-align: center; /* Center heading on smaller screens */

    }

    .social-icons {

        justify-content: center;

        display: flex;

    }

    .btn-send-request {

        align-self: center; /* Center button in footer form */

    }

    .contact-page-content .footer-contact-info h3,

    .contact-page-content .footer-form h3 {

        text-align: center; /* Center headings for smaller screens on contact page */

    }

    .footer-bottom .container {

        flex-direction: column;

        gap: 10px;

    }

    .footer-bottom .website-by {

        justify-content: center;

    }

}



@media (max-width: 768px) {

    /* Header Responsive - Mobile */

    header {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        width: 100%;

        z-index: 1000;

        background-color: #fff;

    }

    body {

        padding-top: 0;

    }

    /* Calculate header height and add padding to body */
    /* Header-top-bar: ~28px (8px padding + content) + Header-main: ~69px (12px padding + 45px logo) = ~97px */
    body:not(.menu-open) {

        padding-top: 97px;

    }

    .header-top-bar {

        padding: 8px 0;

    }

    .header-phone {

        font-size: 11px;

        gap: 6px;

        justify-content: flex-end;

    }

    .header-phone i {

        font-size: 12px;

    }

    .phone-label {

        font-size: 11px;

    }

    .header-main {

        padding: 12px 0;

    }

    header .container {

        padding: 0 15px;

    }

    .header-container {

        flex-wrap: nowrap;

        justify-content: space-between;

        align-items: center;

    }

    .logo {

        gap: 8px;

    }

    .logo img {

        height: 45px;

    }

    .logo-name {

        font-size: 14px;

    }

    .logo-tagline {

        font-size: 10px;

        display: none;

    }

    .header-right {

        gap: 10px;

        align-items: center;

        display: flex;

    }

    .header-right .btn-customize-shed:not(.mobile-btn-customize) {

        order: 1;

        margin-right: auto;

    }

    .header-right .mobile-menu-toggle {

        order: 2;

    }

    .mobile-menu-toggle {

        display: flex;

    }

    body.menu-open .mobile-menu-toggle {

        display: none !important;

    }

    .header-right nav.main-nav {

        position: fixed !important;

        top: 0;

        right: -100%;

        left: auto;

        width: 100%;

        height: 100vh;

        background-color: #fff;

        box-shadow: -2px 0 10px rgba(0,0,0,0.1);

        transition: right 0.3s ease;

        z-index: 1000;

        overflow-y: auto;

        padding: 0;

        display: flex !important;

        flex-direction: column !important;

        visibility: visible !important;

    }

    .mobile-menu-header {

        display: flex !important;

        flex-direction: column;

        padding: 0;

        width: 100%;

        box-sizing: border-box;

    }

    .mobile-menu-top-row {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 12px 20px;

        width: 100%;

        box-sizing: border-box;

        background-color: #f5f5f5;

    }

    .mobile-menu-logo {

        display: flex;

        align-items: center;

        gap: 10px;

    }

    .mobile-menu-logo img {

        height: 50px;

        width: auto;

    }

    .mobile-logo-text {

        display: flex;

        flex-direction: column;

    }

    .mobile-logo-name {

        font-size: 16px;

        font-weight: 700;

        color: #333;

        line-height: 1.2;

        font-family: var(--primary-font);

    }

    .mobile-logo-tagline {

        font-size: 11px;

        color: #666;

        line-height: 1.2;

        margin-top: 2px;

        font-family: var(--primary-font);

    }

    .mobile-menu-phone {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 6px;

        font-size: 12px;

        font-family: var(--primary-font);

    }

    .mobile-menu-phone i {

        color: #333;

        font-size: 13px;

    }

    .mobile-phone-label {

        color: #333;

        font-weight: 500;

    }

    .mobile-phone-number {

        color: #c52828;

        font-weight: 600;

        text-decoration: none;

    }

    .mobile-menu-header-bottom {

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 10px;

        padding: 12px 20px;

        width: 100%;

        box-sizing: border-box;

        border-bottom: 1px solid #eee;

    }

    .mobile-btn-customize {

        display: block !important;

        padding: 10px 20px;

        font-size: 13px;

        font-weight: 600;

        font-family: var(--primary-font);

        text-transform: none;

        background-color: #c52828;

        color: #fff;

        border-radius: 0;

        border: none;

        cursor: pointer;

        white-space: nowrap;

        margin: 0;

        letter-spacing: 0;

    }

    .mobile-btn-customize:hover {

        background-color: #a61f1f;

    }

    .mobile-menu-close {

        display: flex !important;

        align-items: center;

        justify-content: center;

        width: 40px;

        height: 40px;

        background: transparent;

        border: none;

        cursor: pointer;

        padding: 0;

        margin: 0;

        color: #000;

        font-size: 28px;

        font-weight: 300;

        flex-shrink: 0;

    }

    .mobile-menu-close:hover {

        opacity: 0.7;

    }

    .main-nav.active {

        right: 0 !important;

    }

    .main-nav ul {

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 0 !important;

        padding: 0 20px 20px 20px !important;

        margin: 0 !important;

    }

    .main-nav ul li {

        width: 100% !important;

        border-bottom: 1px solid #eee;

    }

    .main-nav ul li.dropdown {

        display: flex !important;

        flex-direction: column !important;

    }

    .main-nav .nav-link {

        display: block !important;

        padding: 15px 0 !important;

        width: 100% !important;

        font-size: 16px !important;

        order: 1;

    }

    .main-nav .nav-link i {

        font-size: 10px;

        margin-left: 8px;

        color: #c52828;

        transition: transform 0.3s ease;

        transform: rotate(0deg);

    }

    .dropdown.active .nav-link i {

        transform: rotate(180deg);

    }

    .dropdown-content {

        position: static !important;

        display: none !important;

        box-shadow: none;

        background-color: #f9f9f9;

        margin: 0;

        padding: 0;

        width: 100% !important;

        order: 2;

    }

    .dropdown.active .dropdown-content {

        display: block !important;

    }

    .dropdown-content a {

        display: block;

        padding: 12px 0 12px 30px;

        font-size: 14px;

        font-weight: 400;

        text-transform: uppercase;

        color: #000;

        cursor: pointer;

        text-decoration: none;

    }

    .dropdown-content a:hover {

        color: #c52828;

    }

    .btn-customize-shed:not(.mobile-btn-customize) {

        display: flex !important;

        padding: 10px 20px;

        font-size: 13px;

        font-weight: 600;

        font-family: var(--primary-font);

        text-transform: none;

        background-color: #c52828;

        color: #fff;

        border-radius: 0;

        border: none;

        cursor: pointer;

        white-space: nowrap;

        margin: 0;

        letter-spacing: 0;

    }

    body.menu-open .btn-customize-shed:not(.mobile-btn-customize) {

        display: none !important;

    }

    .nav-overlay {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.5);

        z-index: 999;

    }

    .nav-overlay.active {

        display: block !important;

    }

    .hero-content h1 {

        font-size: 2.5em;

    }

    .hero-content p {

        font-size: 1em;

    }

    /* Hero Section Responsive - Mobile */

    .hero-section {

        padding: 0;

        min-height: 400px;

        display: flex;

        align-items: flex-end;

        justify-content: flex-start;

        background-size: cover;

        background-position: center;

        position: relative;

        overflow: hidden;

    }

    .hero-layout {

        padding: 0 15px 20px 15px !important;

        position: relative;

        z-index: 2;

        display: flex;

        align-items: flex-end;

        width: 100%;

        max-width: 100%;

        margin: 0;

    }

    .hero-banner {

        background-color: rgba(0, 0, 0, 0.55);

        padding: 25px 20px 50px 0;

        max-width: 100%;

        width: 100%;

        position: relative;

        display: flex;

        align-items: stretch;

    }

    .hero-banner-accent {

        width: 4px;

        background-color: #e02020;

        flex-shrink: 0;

    }

    .hero-banner-content {

        padding-left: 20px;

        padding-right: 20px;

        flex: 1;

    }

    .hero-banner-content h1 {

        font-size: 1.75em;

        line-height: 1.2;

        margin: 0 0 12px 0;

        color: #fff;

        font-weight: 800;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

        font-family: var(--primary-font);

    }

    .hero-banner-content p {

        font-size: 0.95em;

        margin: 0 0 18px 0;

        color: #fff;

        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);

        font-family: var(--primary-font);

        line-height: 1.5;

    }

    .btn-contact-us {

        padding: 12px 24px;

        font-size: 0.95em;

        background-color: #c00;

        color: #fff;

        border-radius: 5px;

        font-weight: 600;

        font-family: var(--primary-font);

    }

    .hero-arrow-block {

        position: absolute;

        bottom: 12px;

        right: 20px;

        left: auto;

        transform: none;

        display: inline-flex;

        align-items: stretch;

        overflow: hidden;

        background-color: #e02020;

    }

    .hero-arrow {

        width: 32px;

        height: 28px;

        font-size: 0.85em;

    }

    .product-grid, .feature-grid {

        grid-template-columns: 1fr;

    }

    .testimonial-text {

        font-size: 1.2em;

    }

}


@media (max-width: 480px) {

    /* Header Responsive - Small Mobile */

    .header-top-bar {

        padding: 6px 0;

    }

    .header-phone {

        font-size: 10px;

        gap: 4px;

        justify-content: flex-end;

    }

    .header-phone i {

        font-size: 11px;

    }

    .phone-label {

        font-size: 10px;

    }

    .header-main {

        padding: 10px 0;

    }

    header .container {

        padding: 0 10px;

    }

    .logo {

        gap: 6px;

    }

    .logo img {

        height: 40px;

    }

    .logo-name {

        font-size: 13px;

    }

    .mobile-menu-top-row {

        padding: 10px 15px;

    }

    .mobile-menu-header-bottom {

        padding: 10px 15px;

    }

    .mobile-menu-phone {

        font-size: 11px;

        padding: 0;

    }

    .mobile-btn-customize {

        padding: 8px 16px;

        font-size: 12px;

    }

    .main-nav ul {

        padding: 0 15px 15px 15px !important;

    }

    .main-nav .nav-link {

        font-size: 15px;

        padding: 12px 0 !important;

    }

    .main-nav {

        width: 100% !important;

        left: auto !important;

        right: -100% !important;

        padding: 0 !important;

    }

    .main-nav.active {

        right: 0 !important;

    }

    .main-nav .nav-link {

        font-size: 15px;

        padding: 12px 0;

    }

    .mobile-menu-toggle {

        width: 26px;

        height: 26px;

    }

    .mobile-menu-toggle span {

        height: 2.5px;

    }


    /* Hero Section Responsive - Small Mobile */

    .hero-section {

        padding: 0;

        min-height: 350px;

        display: flex;

        align-items: flex-end;

        justify-content: flex-start;

    }

    .hero-layout {

        padding: 0 10px 15px 10px !important;

        position: relative;

        z-index: 2;

        display: flex;

        align-items: flex-end;

        width: 100%;

        max-width: 100%;

        margin: 0;

    }

    .hero-banner {

        padding: 20px 15px 45px 0;

        background-color: rgba(0, 0, 0, 0.55);

        max-width: 100%;

        width: 100%;

        position: relative;

        display: flex;

        align-items: stretch;

    }

    .hero-banner-accent {

        width: 3px;

        background-color: #e02020;

        flex-shrink: 0;

    }

    .hero-banner-content {

        padding-left: 15px;

        padding-right: 15px;

        flex: 1;

    }

    .hero-banner-content h1 {

        font-size: 1.5em;

        line-height: 1.2;

        margin: 0 0 10px 0;

        color: #fff;

        font-weight: 800;

        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

        font-family: var(--primary-font);

    }

    .hero-banner-content p {

        font-size: 0.85em;

        margin: 0 0 15px 0;

        color: #fff;

        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);

        font-family: var(--primary-font);

        line-height: 1.5;

    }

    .btn-contact-us {

        padding: 10px 20px;

        font-size: 0.9em;

        background-color: #c00;

        color: #fff;

        border-radius: 5px;

        font-weight: 600;

        font-family: var(--primary-font);

    }

    .hero-arrow-block {

        position: absolute;

        bottom: 10px;

        right: 15px;

        left: auto;

        transform: none;

        display: inline-flex;

        align-items: stretch;

        overflow: hidden;

        background-color: #e02020;

    }

    .hero-arrow {

        width: 28px;

        height: 24px;

        font-size: 0.75em;

    }

    .hero-arrow {

        width: 28px;

        height: 24px;

        font-size: 0.75em;

    }

}


/* Hero Slider Dots */

.hero-dots {

    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}



/* Gallery Page Styles */

.gallery-page {

    background-color: #f5f5f5;

    padding: 0;

}



.gallery-section {

    padding: 60px 0;

    background-color: #fff;

}



.gallery-section:first-of-type {

    padding-top: 70px;

}



.gallery-section:nth-child(even) {

    background-color: #f5f5f5;

}



.gallery-section .container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 10px;

}



.gallery-intro .container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 10px;

}



.gallery-intro {

    background-color: #fff;

    padding: 60px 0 50px 0;

    text-align: center;

}



.gallery-intro-title {

    font-size: 2em;

    font-weight: 700;

    color: #c52828;

    margin: 0 0 25px 0;

    text-align: center;

}



.gallery-intro-text {

    font-size: 1.05em;

    color: #666;

    margin: 0 auto 18px auto;

    max-width: 900px;

    line-height: 1.6;

    text-align: center;

}



.gallery-call-link {

    color: #c52828;

    text-decoration: none;

    font-weight: 600;

}



.gallery-call-link:hover {

    text-decoration: underline;

}



/* Gallery CTA Section */

.gallery-cta {

    background-color: #e8e8e8;

    padding: 60px 0;

    text-align: center;

}



.gallery-cta .container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 10px;

}



.gallery-cta-title {

    font-size: 2em;

    font-weight: 700;

    color: #c52828;

    margin: 0 0 20px 0;

    text-align: center;

}



.gallery-cta-text {

    font-size: 1.1em;

    color: #555;

    margin: 0 auto 12px auto;

    max-width: 800px;

    line-height: 1.6;

    text-align: center;

}



.gallery-cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 30px;

    flex-wrap: wrap;

}



.btn-gallery-call,

.btn-gallery-submit {

    background-color: #c52828;

    color: #fff;

    padding: 14px 30px;

    border-radius: 4px;

    font-size: 1em;

    font-weight: 600;

    text-decoration: none;

    display: inline-block;

    transition: background-color 0.3s ease;

    white-space: nowrap;

}



.btn-gallery-call:hover,

.btn-gallery-submit:hover {

    background-color: #a61f1f;

}



.gallery-section-title {

    text-align: center;

    font-size: 2.2em;

    font-weight: 700;

    color: #333;

    margin: 0 auto 40px auto;

    padding-bottom: 0;

    border-bottom: none;

    display: block;

    width: 100%;

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-top: 0;

}



.gallery-item {

    position: relative;

    overflow: hidden;

    background-color: #fff;

    box-shadow: 0 3px 10px rgba(0,0,0,0.1);

    border-radius: 0;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    aspect-ratio: 1;

    width: 100%;

}



.gallery-item:hover {

    transform: translateY(-4px);

    box-shadow: 0 6px 18px rgba(0,0,0,0.15);

}



.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.3s ease;

}



.gallery-item:hover img {

    transform: scale(1.05);

}



@media (max-width: 1024px) {

    .gallery-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: 16px;

    }

}



@media (max-width: 768px) {

    /* Buying Shed Section - Mobile */
    .buying-shed-section {

        padding: 60px 0;

        min-height: auto;

    }

    .buying-shed-content h2 {

        font-size: 2em;

        margin-bottom: 40px;

    }

    .feature-grid {

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 0 15px;

    }

    .feature-card {

        padding: 30px 25px;

    }

    .feature-icon i {

        font-size: 40px;

    }

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 14px;

    }



    .gallery-section-title {

        font-size: 1.8em;

    }



    .gallery-section {

        padding: 45px 0;

    }

}



@media (max-width: 480px) {

    .gallery-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .gallery-section-title {

        font-size: 1.5em;

    }

}


.hero-dot {

    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}


.hero-dot.active {

    background-color: #fff;
    transform: scale(1.2);
}