body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent horizontal scrolling and ensure media scale to their containers */
html, body {
    overflow-x: hidden;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

.header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0A018C;
    padding: 20px;
    gap: 20px;
}

.header-upper-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

@media (min-width: 992px) {
    .header-upper-container {
        height: 105px;
    }
}

.header-logo {
    height: auto;
    width: auto;
    max-height: 110px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .header-logo {
        height: auto;
        max-height: 170px;
        display: block;
        margin-top: 30px;
    }
}

.header-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.header-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background: #75CC20;
    color: #000000;
    padding: 10px 15px;
    border-radius: 10px;
    gap: 5px;
    transition: 0.3s ease-in-out;
}

.header-buttons-context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.header-buttons h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1em;
    text-align: center;
}

.header-buttons-context h1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.header-buttons-context h1 img {
    height: 18px;
    object-fit: cover;
}

.header-buttons:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}

.header-navigation-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
}

.header-navigation {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.header-nav {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1em;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.header-nav:hover {
    font-weight: 500;
    transition: 0.3s ease-in-out;
}

/* Breadcrumb */
.breadcrumb {
    width: 100%;
    max-width: 1100px;
    margin: 18px 0;
    padding: 8px 0 8px 20px;
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 8px;
}
.breadcrumb a {
    color: #0A018C;
    text-decoration: none;
    font-weight: 600;
}
.breadcrumb .sep { color: #999999; }
.breadcrumb .current { color: #333333; font-weight: 600; }

@media (max-width: 600px) {
    .breadcrumb { font-size: 13px; padding-left: 12px; }
}

/*.header-nav:hover svg {*/
/*    animation: moveDown 1s ease-in-out infinite;*/
/*}*/

/*@keyframes moveDown {*/
/*    0% {*/
/*        transform: translateY(0);*/
/*    }*/
/*    50% {*/
/*        transform: translateY(3px);*/
/*    }*/
/*    100% {*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

.dropdown-container {
    position: relative;
}

.dropdown-models-and-styles,
.dropdown-resources,
.dropdown-locations {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #0A018C;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    min-width: 220px;
    z-index: 1000;
    margin-top: 10px;
    padding: 10px 0;
}

.dropdown-models-and-styles.active,
.dropdown-resources.active,
.dropdown-locations.active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-trigger svg {
    transition: transform 0.3s;
}

.dropdown-trigger.active svg {
    transform: rotate(180deg);
}
    
.mobile-menu-btn {
    display: none;
}

/* Desktop-only fix: prevent the Resources dropdown from being cut off on the right edge */
@media (min-width: 769px) {
    .dropdown-resources,
    .dropdown-locations {
        left: auto;
        right: -80px;
        transform-origin: top right;
    }
}

.header-top-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    width: 100%;
    background: #75CC20;
}

.header-top-banner h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 22px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    width: 90%;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    background: #FFFFFF;
    padding: 100px 0;
    border-top: 1px solid #EEEEEE;
    width: 100%;
}

.footer-content-socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 40px;
    flex-wrap: wrap;
}

.footer-content-socials a {
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.footer-content-socials a:hover {
    transform: scale(1.2);
    transition: 0.3s ease-in-out;
}

.footer-content-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 15%;
}

.footer-content h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 15px;
    line-height: 1em;
}

.footer-content h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #999999;
    font-size: 15px;
    line-height: 1em;
}

.home-banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: url(../img/sun-flare.jpeg) no-repeat center center;
    background-size: cover;
    height: 500px;
    gap: 30px;
}

.home-banner-context {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    background: rgba(0, 0, 0, 0.64);
    width: 100%;
    padding: 120px;
    gap: 10px;
}

.home-banner-context-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.home-banner-context h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    font-size: 40px;
    line-height: 1em;
    text-align: left;
}

.home-banner-context h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #75CC20;
    font-size: 40px;
    line-height: 1em;
    text-align: left;
}

.home-banner-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.home-banner-button a {
    text-decoration: none;
    background: #0A018C;
    border-radius: 10px;
    padding: 13px 20px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: #75CC20;
    font-size: 14px;
    line-height: 1em;
    text-align: center;
}

.home-info-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    padding: 80px 0;
    margin: 0 auto;
    gap: 80px 0;
}

.home-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 25%;
}

.home-info h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 22px;
    line-height: 1em;
    text-align: center;
}

.home-sheds-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: url(../img/home-2-bg.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    padding: 0 0 80px;
}

.home-sheds {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 25%;
    height: 440px;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #0A018C;
}

.home-sheds img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-sheds-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 18px;
    border-radius: 19px;
    width: 90%;
    bottom: 40px;
}

.home-sheds-label h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #999999;
    font-size: 13px;
    line-height: 1.2em;
    text-align: center;
}

.home-sheds-label h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 22px;
    line-height: 1em;
    text-align: center;
}

.why-choose-steel-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    width: 100%;
    gap: 10px;
    background: #0A018C;
}

.why-choose-steel-contexts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 40%;
}

.why-choose-steel-contexts h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: #FFFFFF;
    font-size: 55px;
    line-height: 1em;
    text-align: left;
}

.why-choose-steel-contexts h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1.3em;
    text-align: left;
    width: 80%;
}

/*.why-choose-steel-images {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: flex-start;*/
/*    justify-content: center;*/
/*    width: 474px;*/
/*    border-radius: 20px;*/
/*    overflow: hidden;*/
/*    height: 455px;*/
/*}*/

/*.why-choose-steel-images img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/

.why-choose-steel-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    max-width: 760px;
    min-width: 360px;
    overflow: hidden;
    gap: 50px;
}

.why-choose-steel-images img {
    width: 200px;
    height: auto;
}


.why-choose-steel-images video,
.home-why-video {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/*.home-form-container {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 0 80px;*/
/*}*/
.home-form-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
    /* width: 100%; */
    padding: 60px 80px;
}

/*.home-form-contexts-container {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: flex-start;*/
/*    justify-content: flex-start;*/
/*    gap: 20px;*/
/*    width: 40%;*/
/*}*/
.home-form-contexts-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 40%;
    padding-top: 70px;
}

.home-form-contexts-container h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 30px;
    line-height: 1em;
    text-align: center;
}

.home-form-contexts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-form-contexts-container h2,
.home-form-contexts h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #777777;
    font-size: 18px;
    line-height: 1.3em;
    text-align: left;
    width: 80%;
}

.home-form-contexts-container h2 a,
.home-form-contexts h2 a {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #777777;
    font-size: 18px;
    line-height: 1.3em;
    text-align: left;
    width: 80%;
    text-decoration: none;
}

.home-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 40%;
    background: url(../img/form-bg.png) no-repeat center center;
    background-size: cover;
    padding: 80px 0 100px;
}

.home-form.new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 50%;
    background: #FFFFFF;
    background-size: cover;
    padding: 30px 20px;
}

.home-form.template {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 40%;
    background: url(../img/form-bg.png) no-repeat center center;
    background-size: cover;
    padding: 30px 0 100px;
}

.new-form-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;

    padding: 30px;
    border-radius: 0.75rem;

    border: 4px solid transparent;

    /* Gradient border */
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(to right in oklab, #84cc16, #99a1af) border-box;

    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.home-form-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-form-title.new {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
}

.home-form-title h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 32px;
    line-height: 1em;
    text-align: center;
}

.home-form-title.new h1 {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    color: #000000;
    font-size: 40px;
    line-height: 1em;
    text-align: left;
    letter-spacing: -0.03em;
}

.home-form-title h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1em;
    text-align: center;
}

.home-form-title.new h2 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #6a7282;
    font-size: 12px;
    line-height: 1em;
    text-align: left;
    letter-spacing: -0.03em;
}

.home-form-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    padding: 0 80px;
}

.home-form-form.new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0 0;
}

.home-form-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.home-form-col.new {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.home-form-col label {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.2em;
}

.home-form-col input,
.home-form-col textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2em;
    color: #000000;
    background: #EEEEEE;
}

.home-form-col.new input,
.home-form-col.new textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ebe6e7;
    border-radius: 0.375rem;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2em;
    color: #000000;
    background: #FFFFFF;
    outline: none;
}

.home-form-col input::placeholder,
.home-form-col textarea::placeholder {
    color: #999999;
}

.home-form-col.new input::placeholder,
.home-form-col.new textarea::placeholder {
    color: #999999;
}

.home-form-col.new input:focus,
.home-form-col.new textarea:focus {
    /*border: 2px solid #84cc16;*/
    box-shadow: 0 0 0 2px #84cc16;
}

.home-form-submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: #000000;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1em;
}

.home-form-submit.new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    background: #000000;
    border-radius: 0.375rem;
    cursor: pointer;
    border: none;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 1em;
    letter-spacing: 0.1em;
    margin-top: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.home-form-submit.new:hover {
    background: #84cc16;
    color: #000000;
}

.meet-the-team-banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: url(../img/meet-the-team-bg.png) no-repeat center center;
    background-size: cover;
    height: 500px;
    gap: 30px;
    padding: 0 50px;
    position: relative;
}

.meet-the-team-banner-context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    padding: 20px;
    border-radius: 20px;
}

.meet-the-team-banner-context h1 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    color: #75CC20;
    font-size: 40px;
    line-height: 1em;
    text-align: center;
    text-shadow: rgb(0, 0, 0) 0px 0px 40px;
}

.meet-the-team-banner-context h2 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    color: #FFFFFF;
    font-size: 40px;
    line-height: 1em;
    text-align: center;
    text-shadow: rgb(0, 0, 0) 0px 0px 40px;
}

.meet-the-team-banner-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.meet-the-team-banner-button a {
    text-decoration: none;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 13px 20px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 14px;
    line-height: 1em;
    text-align: center;
}

.meet-the-team-sheds-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-size: cover;
    width: 100%;
    padding: 80px 0;
}

.meet-the-team-sheds {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 25%;
    height: 440px;
    border-radius: 20px;
    overflow: hidden;
}

.meet-the-team-sheds img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meet-the-team-sheds-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    padding: 18px;
    border-radius: 19px;
    width: 90%;
    bottom: 40px;
}

.meet-the-team-sheds-label h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #999999;
    font-size: 13px;
    line-height: 1.2em;
    text-align: center;
}

.meet-the-team-sheds-label h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 22px;
    line-height: 1em;
    text-align: center;
}

.meet-the-team-info-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    padding: 80px 0;
    margin: 0 auto;
    gap: 80px 0;
}

.meet-the-team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 25%;
}

.meet-the-team-info h1 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 22px;
    line-height: 1em;
    text-align: center;
}

.meet-the-team-members-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 80px 50px;
}

.meet-the-team-members {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 300px;
}

.meet-the-team-members img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
}

.meet-the-team-member-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.meet-the-team-member-info h1 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 22px;
    line-height: 1em;
    text-align: left;
}

.meet-the-team-member-info a {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: #999999;
    font-size: 18px;
    line-height: 1.2em;
    text-align: left;
    width: 90%;
}

.our-top-models-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 50px;
    gap: 40px;
}

.our-top-models-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.our-top-models-title h1 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 32px;
    line-height: 1em;
    text-align: center;
}

.our-top-models-title h2 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: #999999;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.3em;
    text-align: center;
}

.our-top-models-lists {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 30px 10px;
}

.our-top-models {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 350px;
    text-decoration: none;
}

.our-top-models img {
    width: 100%;
    height: 227.5px;
    object-fit: cover;
    border-radius: 10px;
}

.our-top-models-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}

.our-top-models-info h3 {
    font-family: "Inter", sans-serif;
    font-weight: 550;
    color: #000000;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1em;
    text-align: left;
}

.our-top-models-info h4 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: #999999;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1em;
    text-align: left;
}

.featured-models-info-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    padding: 80px 0;
    margin: 0 auto;
    gap: 80px 0;
}

.featured-models-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 25%;
}

.featured-models-info h1 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 22px;
    line-height: 1em;
    text-align: center;
}

.featured-models-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: url(../img/home-2-bg.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    padding: 0 0 80px;
}

.featured-models {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 25%;
    overflow: hidden;
    gap: 20px;
}

.featured-models img {
    width: 100%;
    height: 353.5px;
    object-fit: cover;
    border-radius: 20px;
}

.featured-models-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.featured-models-label h1 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1em;
    text-align: left;
}

.featured-models-label h2 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: #75CC20;
    font-size: 18px;
    letter-spacing: -0.01em;
    line-height: 1.2em;
    text-align: left;
    width: 80%;
}

.featured-models-banner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: url(../img/featured-model-banner-bg.png) no-repeat center center;
    background-size: cover;
    height: 500px;
    gap: 30px;
}

.featured-models-banner-context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 20px;
    gap: 25px;
}

.featured-models-banner-context h1 {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    color: #000000;
    font-size: 32px;
    letter-spacing: -0.03em;
    line-height: 1em;
    text-align: center;
}

.featured-models-banner-context h2 {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: #999999;
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1.1em;
    text-align: center;
    width: 30%;
}

.featured-models-banner-context a {
    text-decoration: none;
    background: #75CC20;
    border-radius: 10px;
    padding: 15px 20px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.2em;
    text-align: center;
}

.template-navigation-header-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #F9F9F9;
    padding: 30px 100px 30px;
}

.template-navigation-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.template-nav,
.template-navigation-header h5 {
    text-decoration: none;
    color: #767676;
    transition: 0.3s ease;
    font-family: "Monsterrat", sans-serif;
    font-weight: 400;
    font-size: 15px;
}

.template-nav:hover {
    color: #555;
    transition: 0.3s ease;
}

.template-nav.active {
    color: #242424;
    font-weight: 600;
}

.product-category-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.product-container {
    display: flex;
    flex-direction: row;
    padding: 50px 0;
    gap: 50px;
    justify-content: center;
    align-items: flex-start;
    background: #75cc207a;
    width: 90%;
    border-radius: 50px;
}

.product-description {
    display: flex;
    flex-direction: column;
    width: 45%;
    gap: 20px;
}

.product-description h1 {
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: #242424;
    text-transform: capitalize;
}

.product-description h2 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    line-height: 1.6;
}

.product-image {
    display: flex;
    width: 45%;
    position: relative;
    height: 400px;
}

.product-description-call-now {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 20px 20px 15px;
    border: 2px solid #0A018C;
    border-radius: 20px;
}

.product-description-call-now h1 {
    font-family: "Poppins", sans-serif;
    color: #737a85;
    font-size: 20px;
    font-weight: 600;
}

.product-description-call-now h2 {
    font-family: "Poppins", sans-serif;
    color: #000;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.product-description-call-now h2 a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #0A018C;
    font-size: 24px;
    font-weight: 600;
}

.product-image-img {
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.product-image-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    position: absolute;
    background-color: #0A018C;
    padding: 15px 24px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    border-radius: 20px;
    bottom: -30px;
    right: 0;
}

.more-product-lists-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 50px 100px;
}

.more-product-lists-container h1 {
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: #242424;
    text-transform: capitalize;
}

.more-product-lists-cat-temp-1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 230px 50px;
    padding-bottom: 200px;
    width: 100%;
}

.new-style-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40%;
    position: relative;
}

.other-products-category-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 50px 100px;
}

.other-products-category-container h1 {
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: #0A018C;
}

.other-products-category-lists {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 170px 20px;
    padding: 140px 0 0;
}

.other-products-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 32%;
    position: relative;
    border: 3px solid #0A018C;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    border-radius: 20px;
    padding: 20px 0;
    height: 170px;
    background: linear-gradient(#75cc20, #ffffff);
}

.other-products-category-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    text-decoration: none;
}

.other-products-category-card-image {
    display: flex;
    width: 90%;
    height: 250px;
    border-radius: 12px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.12);
    overflow: hidden;
    position: absolute;
    top: -140px;
}

.other-products-category-card-image img {
    width: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

.other-products-category-card h4 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #0A018C;
    text-align: center;
    padding: 0 10px;
}

.bottom-page-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0 50px;
}

.bottom-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 50px;
}

.bottom-page-content h1 {
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: #242424;
    text-align: center;
}

.bottom-page-content h2 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    line-height: 1.6;
    width: 80%;
}

.bottom-page-content h2 a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #000000;
    line-height: 1.6;
}

.bottom-page-content h2 a:hover {
    text-decoration: underline;
}

.bottom-page-content-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    gap: 20px;
    width: 50%;
}

.bottom-page-alt-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 20px;
    width: 45%;
}

.bottom-page-alt-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
}

.bottom-page-content h3 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #000000;
    line-height: 1;
}

.bottom-page-content p {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    line-height: 1.6;
}

.bottom-page-content p a {
    text-decoration: none;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #000000;
    line-height: 1.6;
}

.bottom-page-content p a:hover {
    text-decoration: underline;
}

.bottom-page-content ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    list-style-position: inside;
}

.bottom-page-content ul li {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    line-height: 1.6;
}

.bottom-page-content ul li img {
    width: 15px;
    height: 15px;
    background: #8FC24D;
    padding: 5px;
    border-radius: 3px;
}

.bottom-page-content ul li strong {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #000000;
    line-height: 1.6;
}

.bottom-page-hr {
    display: flex;
    width: 90%;
}

.bottom-page-alternate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.single-shed-price-new-style {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}

.single-shed-price-new-style h4 {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #242424;
    text-align: left;
    line-height: 1;
}

.single-shed-price-new-style h2 {
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #0A018C;
    text-align: left;
    line-height: 1;
    padding: 0 20px;
}

.thank-you-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 50px;
    height: 100vh;
}

.thank-you-page img {
    width: 150px;
    background: #0A018C;
    border-radius: 8px;
    padding: 8px;
}

.thank-you-page p {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: #000000;
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1.2em;
    text-align: center;
}

.home-button {
    font-family: "Inter", sans-serif;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #0A018C;
    color: #ffffff;
    padding: 12px 20px 12px 15px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    line-height: 1.2em;
    border-radius: 10px;
    cursor: pointer;
}

.home-button:hover {
    background: #0A018C96;
}

.meet-the-team-element-1 {
    display: block;
    width: 100%;
    background: none;
    position: absolute;
    bottom: 0;
}

.meet-the-team-element-1 svg {
    display: flex;
    transform: rotateX(0deg);
}

.elementor-shape-fill-meet-the-team {
    fill: #fff;
    transform-origin: center;
}

.the-elite-advantage-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 50px 0;
    gap: 50px;
}

.the-elite-advantage-context {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 35%;
}

.the-elite-advantage-context h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1em;
    text-align: left;
    color: #0A018C;
    text-transform: uppercase;
}

.the-elite-advantage-context h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 25px;
    line-height: 1em;
    text-align: left;
    color: #333333;
}

.the-elite-advantage-context ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    list-style: inside;
}

.the-elite-advantage-context ul li,
.the-elite-advantage-context p {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1em;
    text-align: left;
    color: #333333;
    padding-left: 10px;
}

.the-elite-advantage-context p {
    padding-left: 0;
}

.the-elite-advantage-context ul li strong,
.the-elite-advantage-context p strong{
    font-weight: 700;
}

.hero-ctas {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.btn-general {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(28deg,rgba(10, 1, 140, 1) 0%, rgba(117, 204, 32, 1) 100%);
    color: #FFFFFF;
    padding: 15px 20px;
    border-radius: 10px;
    gap: 5px;
    transition: 0.3s ease-in-out;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1em;
    text-align: center;
}

.btn-general:hover {
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
}

.the-elite-advantage-image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    width: 45%;
}

.the-elite-advantage-image.logo {
    width: 30%;
    background: #0A018C;
    padding: 30px;
    border-radius: 30px;
}

.the-elite-advantage-image.logo img {
    width: 100%;
    height: auto;
}

.the-elite-advantage-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px;
}

.home-form-container.meet-the-team {
    gap: 50px;
    padding: 100px 0;
}

.locations-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    gap: 50px;
    background: radial-gradient(circle at 20% 30%, rgba(10, 1, 140, 0.30) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(117, 204, 32, 0.30) 0%, transparent 50%);
}

.locations-container h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 45px;
    line-height: 1em;
    text-align: center;
    color: #0A018C;
    text-transform: uppercase;
}

.locations-list-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 50px 0;
    gap: 50px;
}

.locations-list-context {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 35%;
}

.locations-list-context h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1em;
    text-align: left;
    color: #0A018C;
    text-transform: uppercase;
}

.locations-list-context a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style: inside;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1em;
    text-align: left;
    color: #333333;
    padding-left: 10px;
    text-decoration: none;
}

.locations-list-context ul li strong {
    font-weight: 700;
}

.locations-list-image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    width: 45%;
}

.locations-list-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px;
}

.who-we-are-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0 200px;
    position: relative;
    width: 100%;
}

.who-are-we-contents {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.who-we-are-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 46%;
}

.who-we-are-texts h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1;
    text-align: left;
}

.who-we-are-texts h2 {
    font-family: "Monsterrat", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8em;
    text-align: left;
}

.who-we-are-texts h3 {
    font-family: "Monsterrat", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5em;
    text-align: left;
    color: #040404;
}

.who-we-are-texts ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    list-style-position: inside;
}

.who-we-are-texts ul li {
    font-family: "Monsterrat", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5em;
    text-align: left;
}

.who-we-are-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 45%;
}

.who-we-are-img {
    width: 100%;
}

.who-we-are-element {
    display: block;
    width: 100%;
    background: none;
    position: absolute;
    bottom: 0;
}

.who-we-are-element svg {
    display: flex;
    transform: rotateX(180deg);
}

.elementor-shape-fill-who-we-are {
    fill: #75cc204f;
    transform: rotateY(180deg);
    transform-origin: center;
}

.set-dayton-barns-apart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 100px 0;
    background: #75cc204f;
}

.set-dayton-barns-apart-container h1 {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}

.set-dayton-barns-apart-lists {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 15px;
}

.set-dayton-barns-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 50px;
    width: 23%;
}

.set-dayton-barns-card h2 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.set-dayton-barns-card h3 {
    font-family: "Monsterrat", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
    text-align: center;
}

.meet-the-team-element-2 {
    display: block;
    width: 100%;
    background: #75cc204f;
    bottom: 0;
    padding-top: 100px;
}

.meet-the-team-element-2 svg {
    display: flex;
    transform: rotateX(0deg);
}

.elementor-shape-fill-meet-the-team-2 {
    fill: #fff;
    transform: rotateY(0deg);
    transform-origin: center;
}

.corporate-team-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
    padding: 50px 30px;
}

.corporate-team-container h1 {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}

.corporate-team-lists {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    width: 100%;
}

.corporate-team {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    width: 20%;
}

.corporate-team img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.corporate-team h2 {
    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-align: left;
}

.corporate-team h3 {
    font-family: "Monsterrat", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #767676;
}

.corporate-team a {
    background: #75CC20;
    font-size: 15px;
    font-weight: 600;
    font-family: "Monsterrat", sans-serif;
    border-radius: 15px 0 15px 0;
    text-decoration: none;
    color: #000000;
    padding: 12px 24px;
    transition: 0.3s ease;
    text-align: center;
    line-height: 1;
    transition: 0.3s ease-in-out;
}

.corporate-team a:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;
}

.team-page-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 50px;
    padding: 100px 0;
}

.team-page-contexts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 40%;
    
}

.team-page-name-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.team-page-name-title h5 {
    font-size: 25px;
    font-weight: 600;
    font-family: "Monsterrat", sans-serif;
    color: #0A018C;
    line-height: 1em;
}

.team-page-name-title h6 {
    font-size: 20px;
    font-weight: 600;
    font-family: "Monsterrat", sans-serif;
    color: #0A018C;
    line-height: 1em;
}

.team-page-contexts ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    list-style: none;
}

.team-page-contexts ul li {
    font-size: 18px;
    font-weight: 600;
    font-family: "Monsterrat", sans-serif;
    color: #333333;
    line-height: 1em;
}

.team-page-contexts ul li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333333;
    gap: 10px;
    transition: 0.3s ease-in-out;
}

.team-page-contexts ul li a:hover {
    text-decoration: underline;
    transition: 0.3s ease-in-out;
}

.team-page-socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.team-page-socials a {
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.team-page-socials a:hover {
    transform: scale(1.07);
    transition: 0.3s ease-in-out;
}

.team-page-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.team-page-description p {
    font-size: 18px;
    font-weight: 500;
    font-family: "Monsterrat", sans-serif;
    color: #333333;
    line-height: 1.3em;
}

.team-page-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
}

.team-page-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
}


@media (max-width: 1199px) {
    .home-info-container,
    .meet-the-team-info-container,
    .featured-models-info-container {
        width: 100%;
    }

    .home-sheds,
    .meet-the-team-sheds,
    .featured-models {
        width: 30%;
    }

    .featured-models img {
        height: 236.5px;
    }

    .featured-models-label h1 {
        font-size: 20px;
    }

    .featured-models-label h2 {
        font-size: 16px;
    }

    .featured-models-info h1 {
        font-size: 20px;
    }

    .our-top-models-container {
        padding: 80px 30px;
    }

    .our-top-models {
        width: 230px;
    }

    .our-top-models img {
        height: 153.5px;
    }

    .why-choose-steel-images {
        width: 45%;
    }

    .why-choose-steel-contexts h1 {
        font-size: 35px;
    }

    .why-choose-steel-contexts {
        width: 45%;
    }

    .why-choose-steel-contexts h2 {
        width: 90%;
    }

    /*.home-form-container {*/
    /*    padding: 0;*/
    /*}*/
    .home-form-container {
        padding: 40px 20px;
        gap: 30px;
    }

    .home-form-contexts-container,
    .home-form {
        width: 45%;
    }
    
    .home-form-contexts-container {
        padding-top: 0;
    }
    
    .home-form.template {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        width: 50%;
        background: url(../img/form-bg.png) no-repeat center center;
        background-size: cover;
        padding: 30px 0 100px;
    }

    .home-form-form {
        padding: 0 40px;
    }
    
    .home-banner-context {
        padding: 30px;
    }

    .meet-the-team-members-container {
        padding: 80px 30px;
    }

    .meet-the-team-members img {
        height: 230px;
    }

    .meet-the-team-members h1 {
        font-size: 20px;
    }

    .meet-the-team-members a {
        font-size: 16px;
    }

    .featured-models-banner-context h2 {
        width: 40%;
        font-size: 20px;
    }

    .header-container {
        gap: 20px;
    }

    .product-container {
        padding: 100px 20px 50px;
    }

    .product-description-call-now h2,
    .product-description-call-now h2 a {
        font-size: 22px;
    }

    .new-style-cat-card {
        width: 45%;
    }

    .more-product-lists-container,
    .other-products-category-container {
        padding: 50px 20px;
    }

    .other-products-category-lists {
        gap: 130px 20px;
    }

    .other-products-category-card {
        height: 145px;
    }

    .other-products-category-card-image {
        height: 200px;
        top: -110px;
    }

    .bottom-page-content {
        padding: 0 30px;
    }

    .bottom-page-content h1 {
        width: 90%;
    }

    .bottom-page-content h2 {
        width: 85%;
    }

    .bottom-page-content-texts {
        width: 85%;
    }

    .single-shed-price-new-style h4 {
        font-size: 18px;
    }
    
    .single-shed-price-new-style h2 {
        font-size: 28px;
    }
    
    .header-top-banner h6 {
        font-size: 18px;
    }
    
    .the-elite-advantage-container,
    .locations-list-container{
        flex-direction: column;
        gap: 30px;
    }
    
    .the-elite-advantage-context,
    .the-elite-advantage-image,
    .locations-list-context,
    .locations-list-image {
        width: 90%;
    }
    
    .who-we-are-container {
        padding: 50px 0 150px;
    }
    
    .who-are-we-contents {
        flex-direction: column;
        gap: 30px;
    }
    
    .who-we-are-texts {
        width: 90%;
    }
    
    .who-we-are-images {
        width: 90%;
    }
    
    .set-dayton-barns-apart-container {
        padding: 50px 0;
    }
    
    .set-dayton-barns-apart-container h1 {
        width: 90%;
    }
    
    .set-dayton-barns-apart-lists {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        justify-content: center;
    }
    
    .set-dayton-barns-card {
        width: 80%;
    }
    
    .meet-the-team-element-2 {
        padding-top: 0;
    }
    
    .corporate-team-container {
        gap: 30px;
    }
    
    .corporate-team {
        width: 30%;
    }
    
    .corporate-team img {
        height: 250px;
    }
    
    .team-page-container {
        padding: 50px 0;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    
    .team-page-image {
        width: 80%;
    }
    
    .team-page-image img {
        max-width: 400px;
    }
    
    .team-page-contexts {
        width: 80%;
    }
    
    .bottom-page-alternate {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
    
    .bottom-page-alternate.reverse {
        flex-direction: column-reverse;
        align-items: center;
        gap: 50px;
    }
    
    .bottom-page-alt-image img {
        width: 500px;
    }
    
    .other-products-category-card h4 {
        font-size: 16px;
    }
}

@media (max-width: 809px) {
    .mobile-menu-btn {
        display: block;
        color: #FFFFFF;
        font-size: 30px;
    }

    .header-navigation {
        max-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .header-navigation.open {
        max-height: 100vh;
        flex-direction: column;
        align-items: flex-end;
    }

    .header-navigation-container.gap-open {
        gap: 10px;
    }

    .header-upper-container {
        flex-direction: column;
        gap: 20px;
    }

    .header-buttons-container {
        gap: 20px;
    }

    .header-container {
        gap: 20px;
    }
    
    .dropdown-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .dropdown-models-and-styles,
    .dropdown-resources,
    .dropdown-locations {
        position: static;
        box-shadow: none;
        border-radius: 0;
        margin-top: 0;
        padding: 0;
        background: transparent;
        min-width: auto;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        transform: none;
        transition: max-height 0.3s ease-out;
    }

    .dropdown-models-and-styles.active,
    .dropdown-resources.active,
    .dropdown-locations.active {
        max-height: 1000px;
        transition: max-height 0.4s ease-in;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .dropdown-models-and-styles a,
    .dropdown-resources a,
    .dropdown-locations a {
        padding: 2px;
        text-align: right;
    }

    .home-banner-context h1,
    .home-banner-context h2,
    .meet-the-team-banner-context h1,
    .meet-the-team-banner-context h2 {
        font-size: 30px;
    }

    .home-banner-container,
    .meet-the-team-banner-container {
        height: 339px;
    }

    .home-info {
        width: 40%;
        gap: 10px;
    }

    .meet-the-team-info,
    .featured-models-info {
        width: 100%;
        gap: 10px;
    }

    .home-info-container,
    .meet-the-team-info-container,
    .featured-models-info-container {
        gap: 40px 20px;
        padding: 40px 20px;
    }

    .home-sheds-container {
        flex-direction: column;
        padding: 0 0 40px;
    }

    .meet-the-team-sheds-container {
        flex-direction: column;
        padding: 40px 0;
    }

    .home-sheds,
    .meet-the-team-sheds {
        width: 80%;
        height: 400px;
    }

    .why-choose-steel-container {
        flex-direction: column;
    }

    .why-choose-steel-container {
        padding: 40px 0;
    }

    .why-choose-steel-contexts {
        width: 80%;
    }

    .why-choose-steel-images {
        width: 80%;
    }
    
    .why-choose-steel-images video,
    .home-why-video {
        height: 350px;
    }
    
    .why-choose-steel-images img {
        width: 150px;
    }

    .why-choose-steel-container {
        gap: 50px;
    }

    .why-choose-steel-contexts h1 {
        font-size: 30px;
    }

    /*.home-form-container {*/
    /*    flex-direction: column-reverse;*/
    /*}*/
    .home-form-container {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }

    .home-form-contexts-container,
    .home-form {
        /*width: 80%;*/
        width: 100%;
    }
    
    .home-form-contexts-container {
        padding-top: 0;
    }

    .home-form-container > div[style] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        padding: 100px 50px;
    }

    .footer-content {
        width: 100%;
    }

    .meet-the-team-members-container {
        padding: 40px 20px;
    }

    .meet-the-team-members {
        width: 400px;
    }

    .meet-the-team-members img {
        height: 350px;
    }

    .our-top-models-container {
        padding: 40px 20px;
    }

    .our-top-models-title {
        gap: 5px;
    }

    .our-top-models-title h1 {
        font-size: 24px;
        letter-spacing: -0.02em;
    }

    .our-top-models {
        width: 100%;
    }

    .our-top-models img {
        height: 221px;
    }

    .featured-models-container {
        flex-direction: column;
        padding: 40px 20px;
    }

    .featured-models {
        width: 100%;
    }

    .featured-models img {
        height: 350px;
    }

    .featured-models-label .blue {
        color: #0B028C;
    }
    
    .featured-models-banner-context {
        gap: 15px;
    }

    .featured-models-banner-context h1 {
        font-size: 24px;
        letter-spacing: -0.02em;
    }
    
    .featured-models-banner-context h2 {
        font-size: 20px;
        width: 90%;
    }

    .featured-models-banner-context a {
        padding: 15px 20px;
    }

    .template-navigation-header-container {
        padding: 30px;
    }

    .product-container {
        flex-direction: column;
        align-items: center;
        padding: 50px 20px;
    }

    .product-description {
        order: 2; /* Description in middle */
        width: 90%;
    }

    .product-image {
        width: 100%;
    }

    .product-description-call-now h1 {
        font-size: 16px;
    }

    .product-description-call-now h2,
    .product-description-call-now h2 a {
        font-size: 18px;
    }

    .new-style-cat-card {
        width: 95%;
    }

    .other-products-category-container h1,
    .locations-we-serve h1 {
        text-align: center;
    }

    .other-products-category-card {
        width: 50%;
    }

    .more-product-list-card,
    .other-products-category-card {
        width: 80%;
    }

    .bottom-page-content {
        padding: 0 20px;
    }

    .bottom-page-content h1 {
        width: 100%;
    }

    .bottom-page-content h2 {
        width: 90%;
    }

    .bottom-page-content-texts {
        width: 90%;
    }

    .single-shed-price-new-style h4 {
        font-size: 14px;
    }
    
    .single-shed-price-new-style h2 {
        font-size: 20px;
    }
    
    .header-top-banner h6 {
        font-size: 16px;
    }
    
    .the-elite-advantage-container,
    .locations-list-container {
        padding: 30px 0;
    }
    
    .the-elite-advantage-image img,
    .locations-list-image img {
        height: 300px;
    }
    
    .corporate-team-container {
        padding: 50px 0;
    }
    
    .home-form-container.meet-the-team {
        padding: 50px 0;
    }
    
    .corporate-team-lists {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    
    .corporate-team {
        width: 80%;
    }
    
    .corporate-team img {
        height: 300px;
    }
    
    .team-page-image img {
        height: 350px;
    }
    
    .home-form.template {
        width: 80%;
    }
    
    .bottom-page-alt-image img {
        width: 350px;
        height: 300px;
    }
}



/* PRODUCT INVENTORY */
.product-details-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.product-details-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.product-images-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-image-container {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 6px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(45deg, #1b068f 0%, #76c41d 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.main-image-container img {
    width: 100%;
    height: auto;
    display: block;
    min-height: 400px;
    object-fit: cover;
}

.thumbnail-images {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    border: 3px solid #e9ecef;
    transition: all 0.3s ease;
}

.thumbnail:hover {
    border-color: #76c41d;
    transform: translateY(-2px);
}

.thumbnail.active {
    border-color: #1b068f;
    box-shadow: 0 4px 12px rgba(27,6,143,0.3);
}

.product-info-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.product-title {
    font-size: 2.5rem;
    color: #1b068f;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.product-brand {
    font-size: 1.5rem;
    color: #6c757d;
}

.product-brand .label {
    font-weight: 600;
    color: #495057;
}

.product-price {
    font-size: 2.5rem;
    color: #76c41d;
    font-weight: 800;
}

.product-status {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.status-badge, .condition-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.in_stock,
.status-badge.in.stock {
    background: #d4edda;
    color: #155724;
}

.status-badge.out_of_stock,
.status-badge.out.of.stock {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.preorder,
.status-badge.pre-order {
    background: #fff3cd;
    color: #856404;
}

.condition-badge {
    background: #d1ecf1;
    color: #0c5460;
}

.product-description-inv,
.product-specifications {
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid #1b068f;
}

.product-description-inv h3,
.product-specifications h3 {
    color: #1b068f;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.product-description-inv p,
.product-specifications p {
    color: #495057;
    line-height: 1.7;
    margin: 0;
    font-size: 1.05rem;
}

.product-specifications .details-section {
    margin-bottom: 14px;
}
.product-specifications .details-section h4 {
    margin: 0 0 8px 0;
    color: #1b068f;
    font-size: 1.05rem;
    font-weight: 700;
}
.product-specifications .details-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.product-specifications .details-list li {
    padding: 6px 0;
    color: #495057;
}
.product-specifications .details-list .sublist { 
    list-style: disc;
    margin: 6px 0 0 18px;
}

/* New card + grid layout for product details */
.product-specifications .card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(11,9,58,0.06);
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid rgba(27,6,143,0.06);
}
.product-specifications .card-header {
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(27,6,143,0.06), rgba(118,196,29,0.02));
}
.product-specifications .card-header h4 {
    margin: 0;
    color: #1b068f;
    font-size: 1.3rem;
}
.product-specifications .card-body {
    padding: 14px 18px 18px 18px;
}
.product-specifications .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 18px;
    align-items: start;
}
.product-specifications .detail-item {
    background: #f8f9fb;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.03);
}
.product-specifications .detail-label {
    font-size: 1.1rem;
    color: #6c757d;
    font-weight: 700;
}
.product-specifications .detail-value {
    margin-top: 6px;
    color: #22223a;
    font-weight: 600;
    font-size: 1.1rem;
}
.product-specifications .details-raw { color: #495057; }

/* Container for multiple detail-section cards (e.g., Roof + Siding) */
.product-specifications .details-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
    .product-specifications .details-sections-grid {
        grid-template-columns: 1fr;
    }
}

.product-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meta-label {
    font-weight: 600;
    color: #495057;
}

.meta-value {
    color: #1b068f;
    font-weight: 500;
}

.product-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.btn-primary-inv,
.btn-secondary-inv {
    padding: 16px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid transparent;
}

.btn-primary-inv {
    background: #76c41d;
    color: white;
    flex: 1;
    min-width: 200px;
}

.btn-primary-inv:hover {
    background: #68b019;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(118,196,29,0.4);
}

.btn-secondary-inv {
    background: white;
    color: #1b068f;
    border-color: #1b068f;
    flex: 1;
    min-width: 200px;
}

.btn-secondary-inv:hover {
    background: #1b068f;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27,6,143,0.3);
}

.store-info-section {
    margin-top: 60px;
    padding: 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    border: 3px solid #dee2e6;
}

.store-info-section h2 {
    color: #1b068f;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 30px 0;
    text-align: center;
}

.store-details {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr minmax(260px, 620px);
    align-items: start;
}

.store-map {
    background: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-map iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 8px;
}

/* Responsive: stack map under details on small screens */
@media (max-width: 900px) {
    .store-details {
        grid-template-columns: 1fr;
    }
    .store-map {
        order: 2;
    }
    .store-map iframe {
        height: 260px;
    }
}

.store-item {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    gap: 24px;
    align-items: flex-start;
    grid-column: 1 / -1; /* span both columns so the card expands to the right */
}

.store-item h3 {
    color: #1b068f;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 16px 0;
}

.store-item .store-map {
    flex: 0 0 620px;
}

.store-item .store-address,
.store-item .store-contact {
    margin: 0 0 12px 0;
}

/* Left column wrapper inside the card */
.store-item .store-meta {
    flex: 1 1 0;
    min-width: 0; /* allow flex children to shrink properly */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-item .store-meta h3 {
    margin: 0 0 8px 0;
}

.store-item .store-meta p {
    margin: 0 0 8px 0;
}

.store-address,
.store-contact {
    color: #495057;
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 8px 0;
}

.store-contact a {
    color: #1b068f;
    text-decoration: none;
    font-weight: 600;
}

.store-contact a:hover {
    color: #76c41d;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .product-details-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .product-details-container {
        padding: 30px 15px;
    .store-item {
        flex-direction: column;
    }
    .store-item .store-map {
        flex: 0 0 auto;
        width: 100%;
    }
    }   
    
    .product-title {
        font-size: 1.75rem;
    }
    
    .product-price {
        font-size: 2rem;
    }
    
    .product-brand {
        font-size: 1rem;
    }
    
    .product-description-inv,
    .product-specifications {
        padding: 18px;
    }
    
    .product-description-inv h3,
    .product-specifications h3 {
        font-size: 1.15rem;
    }
    
    .product-description-inv p,
    .product-specifications p {
        font-size: 0.95rem;
    }
    
    .product-actions {
        flex-direction: column;
    }
    
    .btn-primary-inv,
    .btn-secondary-inv {
        width: 100%;
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .store-info-section {
        padding: 20px;
        margin-top: 40px;
    }
    
    .store-info-section h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .store-item {
        padding: 20px;
    }
    
    .store-item h3 {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }
    
    .store-address,
    .store-contact {
        font-size: 0.95rem;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .product-details-container {
        padding: 20px 10px;
    }
    
    .product-title {
        font-size: 1.5rem;
    }
    
    .product-price {
        font-size: 1.75rem;
    }
    
    .main-image-container {
        border-radius: 12px;
        border-width: 4px;
    }
    
    .main-image-container img {
        min-height: 250px;
    }
    
    .thumbnail {
        width: 80px;
        height: 80px;
    }
    
    .status-badge, .condition-badge {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .store-info-section {
        padding: 15px;
        border-radius: 15px;
    }
    
    .store-info-section h2 {
        font-size: 1.3rem;
    }
    
    .store-item {
        padding: 15px;
    }
    
    .store-item h3 {
        font-size: 1.1rem;
    }
    
    .store-address,
    .store-contact {
        font-size: 0.9rem;
    }
}
/* PRODUCT INVENTORY END */

/* INVENTORY */

/* Inline styles specific for the inventory section (set font family and inherit) */
.inventory-section-container { text-align: center; padding: 50px 100px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.inventory-section-title { color: #1b068f; font-size: 36px; font-weight: 800; letter-spacing: 1px; margin-bottom: 40px; font-family: inherit; }
.inventory-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; padding: 0; }
.inventory-card { display: flex; flex-direction: column; width: 100%; position: relative; background: #fff; border-radius: 20px; padding: 0; border: 6px solid transparent; background-image: linear-gradient(white, white), linear-gradient(45deg, #1b068f 0%, #76c41d 100%); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 12px rgba(27,6,143,0.06), 0 0 22px rgba(118,196,29,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }

/* Pagination Styles */
.pagination-container { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 50px; margin-bottom: 30px; font-family: inherit; }
.pagination-arrow, .pagination-number { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 8px 12px; text-decoration: none; color: #0b1582; font-size: 18px; font-weight: 600; transition: all 0.3s ease; border-radius: 8px; }
.pagination-arrow { color: #0b1582; font-size: 20px; font-weight: 700; }
.pagination-arrow:hover:not(.disabled) { background: #f0f0ff; color: #1b068f; }
.pagination-arrow.disabled { color: #ccc; cursor: not-allowed; }
.pagination-number { color: #0b1582; }
.pagination-number:hover { background: #f0f0ff; color: #1b068f; }
.pagination-number.active { background: #0b1582; color: #fff; font-weight: 700; }
.pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; color: #0b1582; font-size: 18px; font-weight: 600; }
@media (max-width: 760px) { .pagination-container { gap: 6px; } .pagination-arrow, .pagination-number { min-width: 36px; height: 36px; font-size: 16px; } }
.inventory-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.14), 0 0 18px rgba(27,6,143,0.18), 0 0 34px rgba(118,196,29,0.12); }
.inventory-card-inner { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 12px 12px 0 12px; }
.inventory-image-wrap { display: flex; width: 100%; height: 280px; border-radius: 16px; overflow: hidden; position: relative; }
.inventory-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inventory-card-body { padding: 24px; text-align: left; flex: 1; display: flex; flex-direction: column; font-family: inherit; }
.inventory-card-title { color: #0b1582; font-size: 1.7rem; margin: 0 0 12px 0; font-weight: 800; line-height: 1.3; font-family: inherit; }
.inventory-card-desc { color: #343496; font-size: 1.2rem; margin: 0 0 16px; line-height: 1.6; flex: 1; font-family: inherit; }
.inventory-card-price { color: #0b1582; font-size: 22px; margin: 0 0 20px 0; font-weight: 800; font-family: inherit; }
    .inventory-card-button { display: inline-flex; align-items: center; justify-content: center; align-self: center; margin: 0 auto; background: #76c41d; color: #fff; padding: 12px 24px; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 15px; transition: background 0.3s ease; font-family: inherit; }
.inventory-card-button:hover { background: #68b019; }
.inventory-card-button .arrow {
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease, border-color 0.2s ease;
}
.inventory-card-button:hover .arrow {
    background: #fff;
    color: #76c41d;
    border-color: #fff;
    transform: translateX(3px);
}
@media (max-width: 1300px) { 
    .inventory-cards-row { grid-template-columns: repeat(2, 1fr); gap: 24px; } 
}
@media (max-width: 1000px) { 
    .inventory-section-container { padding: 40px 60px; }
    .inventory-cards-row { gap: 20px; } 
    .inventory-image-wrap { height: 240px; } 
}
@media (max-width: 760px) { 
    .inventory-section-container { padding: 30px 20px; }
    .inventory-section-title { font-size: 28px; margin-bottom: 30px; }
    .inventory-cards-row { grid-template-columns: 1fr; gap: 24px; } 
    .inventory-image-wrap { height: 280px; }
    .inventory-card-body { padding: 20px; }
    .inventory-card-title { font-size: 1.5rem; }
    .inventory-card-desc { font-size: 1.1rem; }
    .inventory-card-price { font-size: 20px; margin-bottom: 16px; }
    .inventory-card-button { padding: 10px 20px; font-size: 14px; }
    .inventory-card-button .arrow { width: 32px; height: 32px; font-size: 16px; }
}
@media (max-width: 480px) {
    .inventory-section-container { padding: 25px 15px; }
    .inventory-section-title { font-size: 24px; margin-bottom: 25px; }
    .inventory-image-wrap { height: 240px; }
    .inventory-card-body { padding: 18px; }
    .inventory-card-title { font-size: 1.3rem; }
    .inventory-card-desc { font-size: 1rem; }
}
/* INVENTORY END*/


    /* Centering and panel width are handled on the wrapper so all panels align */
    .rto-wrap{ position:relative; width:95vw; max-width:1400px; margin:40px auto; padding:0 20px; font-family:Montserrat,system-ui,Arial; font-size:20px; line-height:1.65 }
    .rto-note{ margin-top:10px; color:var(--brand-blue); font-size:15px; background:rgba(201,243,160,0.95); padding:8px 10px; border-radius:8px; display:inline-block; font-weight:700 }

    /* Full-width hero with subtle background photo and overlay */
    .rto-hero-outer{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 30px 70px rgba(10,10,60,0.08); width:100%; box-sizing:border-box; margin:20px 0 }
    /* place background absolutely so hero height is driven by content (prevents clipping) */
    .rto-hero-bg{ position:absolute; inset:0; background-image: linear-gradient(90deg, rgba(201,243,160,0.12), rgba(42,150,82,0.04)); background-size:cover; background-position:center; z-index:0 }
    .rto-hero-overlay{ position:relative; z-index:1; background:linear-gradient(180deg, rgba(201,243,160,0.95) 0%, rgba(201,243,160,0.9) 60%); display:flex; align-items:center }

    .rto-hero { display:grid; grid-template-columns:1fr 540px; gap:36px; padding:36px; align-items:center }
    .rto-left { padding-right:6px }
    .rto-heading{ color:var(--accent-green); font-size:48px; font-weight:900; margin:0 0 12px }
    .rto-lead{ font-size:20px; color:#17203b; margin-bottom:20px }

    .features-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px }
    .feature-card{ background:#fff; border-radius:12px; padding:14px 18px; display:flex; gap:14px; align-items:center; min-width:190px; box-shadow:0 10px 30px rgba(12,20,50,0.06) }
    .feature-card i{ font-size:26px; color:var(--accent-green) }
    .feature-card .t{ font-weight:800; color:#13223b; font-size:18px }

    .primary-cta{ display:inline-block; padding:16px 34px; background:var(--accent-green); color:#fff; border-radius:999px; font-weight:900; font-size:20px; box-shadow:0 18px 44px rgba(10,1,140,0.14); text-decoration:none; transition:transform .12s ease, filter .12s ease }
    .primary-cta:hover{ filter:brightness(.95); transform:translateY(-2px) }

    .rto-right{ display:flex; justify-content:center }
    .hero-card-img{ width:100%; max-width:540px; border-radius:14px; overflow:hidden; position:relative }
    .hero-card-img img{ display:block; width:100%; height:auto }

    .image-badge{ position:absolute; left:16px; top:16px; background:rgba(255,255,255,0.98); padding:10px 14px; border-radius:10px; font-weight:800; color:var(--accent-green); font-size:15px; box-shadow:0 10px 30px rgba(6,18,70,0.06) }

    /* secondary content */
    .rto-body{ display:grid; grid-template-columns:1fr 320px; gap:28px; margin-top:28px }
    .content-box{ background:#fff; border-radius:12px; padding:24px; box-shadow:0 12px 30px rgba(6,18,70,0.04) }
    .content-box h3{ font-size:24px; margin-top:0 }
    .content-box h4{ font-size:22px }
    .notes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px }
    .note-card{ background: linear-gradient(180deg, rgba(201,243,160,0.95), rgba(201,243,160,0.9)); border-radius:12px; padding:18px; box-shadow:0 8px 24px rgba(10,10,60,0.04); min-height:100px }
    .note-card h5{ margin:0 0 8px; color:#0b2a10; font-size:20px }
    .note-card p{ margin:0; color:#15311a; font-size:17px; line-height:1.6 }
    @media (max-width:920px){ .notes-grid{ grid-template-columns:1fr } }
    .steps li{ margin-bottom:10px }

    @media (max-width:920px){ .rto-hero{ grid-template-columns:1fr; padding:22px } .rto-body{ grid-template-columns:1fr } .rto-right{ order:-1 } .rto-heading{ font-size:32px; line-height:1.15 } .rto-lead{ font-size:16px } .primary-cta{ font-size:16px; padding:12px 24px } }


    /* METAL-BUILDINGS */
        /* container (scoped to this module only) */
    .bottom-page-content.redesigned.mb { max-width:1100px; margin:0 auto; padding:36px 22px; }
    .bottom-page-content.redesigned.mb .content-grid{display:flex;gap:36px;flex-wrap:wrap;align-items:flex-start}
    .bottom-page-content.redesigned.mb .main{flex:1 1 640px;min-width:300px}
    .bottom-page-content.redesigned.mb .sidebar-cta{flex:0 0 340px}

    /* hero */
    .bottom-page-content.redesigned.mb .hero h1{margin:0 0 12px;font-size:1.85rem;color:#052935;line-height:1.15}
    .bottom-page-content.redesigned.mb .hero p{color:#234452;margin:0 0 18px}

    /* section headings (emphasized) */
    .bottom-page-content.redesigned.mb .features-grid h2,
    .bottom-page-content.redesigned.mb .uses h3,
    .bottom-page-content.redesigned.mb .pricing h3,
    .bottom-page-content.redesigned.mb .benefits h3{
        margin:0 0 16px;font-size:1.3rem;color:#06283D;font-weight:700;letter-spacing:0.2px;line-height:1.2
    }
        .bottom-page-content.redesigned.mb .features-grid h2::after,
        .bottom-page-content.redesigned.mb .uses h3::after,
        .bottom-page-content.redesigned.mb .pricing h3::after,
        .bottom-page-content.redesigned.mb .benefits h3::after{
            content:'';display:block;width:56px;height:4px;background:#39C700;border-radius:3px;margin-top:12px
        }

    /* feature cards */
    .bottom-page-content.redesigned.mb .features-grid .features{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;list-style:none;padding:0;margin:0}
    .bottom-page-content.redesigned.mb .features-grid .features li{background:#f7f9fb;padding:16px;border-radius:10px;min-height:74px}
    .bottom-page-content.redesigned.mb .features-grid .features li strong{display:block;margin-bottom:8px;color:#06283D;font-size:1rem}

    /* pills */
    .bottom-page-content.redesigned.mb .uses-grid{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 16px}
    .bottom-page-content.redesigned.mb .use-pill{display:inline-block;background:#f0f7ff;padding:9px 14px;border-radius:22px;font-size:.97rem;color:#073049;border:1px solid rgba(7,48,73,0.06);box-shadow:0 4px 12px rgba(7,48,73,0.04)}

    /* lists */
    .bottom-page-content.redesigned.mb .pricing ul{margin:10px 0 0 20px;padding-left:0}
    .bottom-page-content.redesigned.mb .pricing ul li{margin:12px 0;line-height:1.6}
    .bottom-page-content.redesigned.mb .benefits ul{margin:10px 0 0 20px;padding-left:0}
    .bottom-page-content.redesigned.mb .benefits ul li{margin:12px 0;line-height:1.6}
    .bottom-page-content.redesigned.mb .benefits ul li strong{display:inline-block;width:160px;color:#06283D}

    /* separate visual sections inside main column */
    .bottom-page-content.redesigned.mb .section-block{background:#ffffff;border-radius:10px;padding:18px 18px;margin-bottom:20px;box-shadow:0 6px 18px rgba(16,40,60,0.03)}
    .bottom-page-content.redesigned.mb .section-block .uses-grid{margin-top:6px}

    /* CTA */
    .bottom-page-content.redesigned.mb .cta-card{background:#06283D;color:#fff;padding:26px;border-radius:10px;text-align:center;box-shadow:0 10px 30px rgba(6,40,61,0.18)}
    .bottom-page-content.redesigned.mb .cta-card h3{margin:0 0 10px;font-size:1.18rem;font-weight:800;color:#fff}
    .bottom-page-content.redesigned.mb .cta-card p{margin:0 0 16px;color:rgba(255,255,255,0.95)}
    .bottom-page-content.redesigned.mb .cta-card a{display:block;width:100%;max-width:220px;margin:8px auto;padding:12px 16px;border-radius:8px;text-decoration:none;text-align:center}
    .bottom-page-content.redesigned.mb .btn-primary{background:#39C700;color:#fff;border:0;box-shadow:0 4px 12px rgba(57,199,0,0.18)}
    .bottom-page-content.redesigned.mb .btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff}

    /* spacing between main sections */
    .bottom-page-content.redesigned.mb .main section{margin-bottom:22px;padding-bottom:6px}

    @media(max-width:980px){
        .bottom-page-content.redesigned.mb .content-grid{gap:20px}
        .bottom-page-content.redesigned.mb .sidebar-cta{flex:1 1 100%}
    }
    @media(max-width:720px){
        .bottom-page-content.redesigned.mb .features-grid .features{grid-template-columns:1fr}
        .bottom-page-content.redesigned.mb{padding:20px}
    }

    .pagination.mb { display:flex; gap:14px; justify-content:center; align-items:center; margin-top:18px; }
    .pagination.mb .nav-link { color:#07204f; text-decoration:none; font-weight:700; font-size:18px; padding:6px 8px; }
    .pagination.mb .pages { display:flex; gap:12px; align-items:center; }
    .pagination.mb .page-number { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:transparent; color:#07204f; text-decoration:none; font-weight:700; }
    .pagination.mb .page-number:hover { background:rgba(7,32,79,0.06); }
    .pagination.mb .page-number.active { background:#07204f; color:#ffffff; box-shadow:0 6px 0 rgba(7,32,79,0.08); }
    
    /* extra-large container and spacing */
    .commercial-styles{width:100%;max-width:1600px;margin:48px auto;padding:0 28px}
    .commercial-header{display:block;margin-bottom:18px}
    .commercial-header h1{margin:0 0 10px;font-size:2.6rem;color:#052935;line-height:1.02}
    .commercial-sub{margin:0 0 24px;color:#375a67;font-size:1.08rem}

    /* three-column card grid (forced) */
    .commercial-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;align-items:start}

    /* much larger, more prominent cards */
    .commercial-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(6,40,61,0.07);transition:transform .32s ease,box-shadow .32s ease;display:flex;flex-direction:column;min-height:560px}
    .commercial-card:hover{transform:translateY(-14px);box-shadow:0 50px 110px rgba(6,40,61,0.18)}
    .card-media{height:420px;background-size:cover;background-position:center}
    .card-body{padding:26px 28px;display:flex;flex-direction:column;gap:14px}
    .card-badge{display:inline-block;background:#39C700;color:#fff;padding:12px 16px;border-radius:999px;font-weight:900;font-size:1.1rem}
    .card-body h4{margin:0;font-size:1.5rem;color:#052935;font-weight:900}

    /* responsive adjustments */
    @media(max-width:1500px){.commercial-styles{max-width:1300px}.card-media{height:360px}.commercial-card{min-height:520px}}
    @media(max-width:1200px){.commercial-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card-media{height:320px}.commercial-card{min-height:480px}}
    @media(max-width:780px){.commercial-cards{grid-template-columns:1fr}.card-media{height:240px}.commercial-styles{padding:0 14px}.commercial-card{min-height:auto}
        .commercial-header h1{font-size:1.35rem}
    }