body {
    margin: 0;
    padding: 0;
}

/* Global styles */
body {
    background-color: #f4f4f4;
}

header {
    display: block;
}

main {
    padding: 20px;

}

.main {
    padding-top: 3.5rem;
    overflow: hidden;
    isolation: isolate;
    position: relative;
    height: 100dvh;
}

.main-img {
    width: 100%;
    height: 100%;
    z-index: -10;
    inset: 0;
    position: absolute;
    max-width: 100%;
    vertical-align: middle;
    background-color: #111827;
}


.main-wrapper {
    opacity: 0.3;
}

@media (min-width: 1024px) {
    .main-wrapper {
        background-color: transparent;
        width: 75%;
        height: 100%;
        z-index: 0;
        top: 0;
        left: 0;
        position: absolute;
    }
}

@media (min-width: 1024px) {
    .main-container {
        padding-left: 4rem;
        padding-right: 4rem;
        max-width: 80rem;
    }
}

@media (min-width: 640px) {
    .main-container {
        padding-top: 10rem;
        padding-bottom: 12rem
    }
}

.main-container {
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    position: relative;
}

.center-container {
    display: flex;
    flex-direction: column; /* Align children vertically */
    align-items: center; /* Center children horizontally */
    justify-content: center; /* Center children vertically */
    text-align: center; /* Center the text for inline or inline-block children */
    height: 100%; /* Optional: If you want the container to fill its parent's height */
}


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

.sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.font-bold {
    font-weight: 700;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0;
}


h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

.gap-x-6 {
    column-gap: 1.5rem;
}

.justify-start {
    justify-content: flex-start;
}

.items-center {
    align-items: center;
}

.flex {
    display: flex;
}

.mt-10 {
    margin-top: 2.5rem;
}

.text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity));
}

.leading-8 {
    line-height: 2rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

element.style {
    background-color: rgb(230, 200, 122);
    color: rgb(255, 255, 255);
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0), var(--tw-shadow);
}

.font-semibold {
    font-weight: 600;
}

@media (min-width: 640px) {
    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
}

.main-text {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.025em;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    font-size: 3.75rem;
    line-height: 1;
}


.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.font-bold {
    font-weight: 700;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

a {
    color: inherit;
    text-decoration: inherit;
}

*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}
/* Form styles */
.quote-form {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
}

.quote-form h2 {
    color: #333;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="file"] {
    width: 100%;
    padding: 10px;
}

input[type="submit"] {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

footer {
    background-color: #111827;
    color: #fff;
    text-align: center;
    margin-top: auto; /* Keeps the margin-top to push the  down */
     /* Ensures no extra space is added below the  */
    box-sizing: border-box; /* Ensures padding does not add to the total width */
    overflow: hidden;
    padding: 10px 0;
}


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



.welcome {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-direction: column;
}




.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10; /* Ensure the navbar is above the main content */
    background-color: #111827; /* Use the desired color for the navbar background */
}

.nav-text {
    color: rgb(243 244 246);
    font-weight: 600;
}

.link-text {
    color: rgb(243 244 246);
    line-height: 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: inherit;
}

.navbar-container {
    display: flex;
    padding: 1.5rem;
    justify-content: space-between;
    align-items: center;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .navbar-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.nav-flex {
    display: flex;
}

@media (min-width: 1024px) {
    .nav-flex {
        flex: 1 1 0;
    }
}

.nav-logo {
    padding: 0.375rem;
    gap: 0.75rem;
    align-items: center;
    display: flex;
    margin: -0.375rem;
    color: inherit;
    text-decoration: inherit;
}

.nav-img-class {
    width: auto;
    height: 2rem;
    max-width: 100%;
    display: block;
    vertical-align: middle;
}

@media (min-width: 1024px) {

    .nav-links {
        column-gap: 3rem;
        display: flex;
    }
}

.main {
    padding-bottom: 100px;
}

#services {
    min-height: 100%;
    background-color: #ffffff;
    margin-bottom: 0;
    position: relative; /* Add this to position .services-content relative to this section */
    padding-top: 2%;
}

.services-wrapper {
    background-color: #ffffff;
    height: 500px;
    position: relative;
}



.services-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10%, 10%));
    grid-template-rows: 1fr;
    grid-column-gap: 5%;
    grid-row-gap: 20px;
    position: relative;
    justify-content: center; /* Center items horizontally */
    align-content: center; /* Center items vertically */
    height: 100%;
}

.services-content > div {
    cursor: pointer;
    overflow: visible;
    justify-self: center; /* Center horizontally */
    align-self: center; /* Center vertically */
    background-color: white;
    min-height: 100%;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 5%;
    box-shadow: rgba(0, 32, 37, 0.1) 0 2px 8px -2px;
    width: 250px;
}

.services-content > div:hover .arrow {
    width: 40%;
}


.services-content > div > p {
    position: relative; /* Needed for absolute positioning of the pseudo-element */
    color: #555555;
    font-size: 14px;
    padding-bottom: 5%;
}

.services-content > div > p::after {
    content: '';
    position: absolute;
    left: 5%; /* Aligns the start of the line with the start of the paragraph */
    bottom: 0; /* Position it at the bottom of the paragraph */
    width: 90%; /* Adjust this to control the width of the border */
    height: 1px; /* Height is the thickness of the border */
    background-color: #555555; /* Same color as your text */
    border-bottom: 1px solid; /* Create the border */
    opacity: 50%;
}

.services-content > div > div > div > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    transition: all .2s ease-in-out;
}

.services-content > div:hover > div > div > img {
    transform: scale(1.05);
}


.hidden-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}


.about-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.sw-topper {
    position: absolute;
    text-transform: uppercase;
    margin-top: 3%;
    font-size: var(--topperFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    color: var(--primary);
}



.services-tabs {
    margin-left: 2.5%;
    margin-right: 2.5%;
}


.services-tabs > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5%;
    float: right;
    text-transform: uppercase;
    margin-top: 4%;
    font-size: 100%;
    transition: all .5s ease;
    color: #fff;
    text-align: center;
    background-color : #888888;
    outline: none;
}
.services-tabs > div:hover {
    color: #bf1e2c;
    background-color: #545454;
}

.services-tabs > div.active {
    color: #bf1e2c;
    background-color: #545454;
}


.services-tabs > div > p {
}

.services-tabs > div:hover > p {
    transform: scale(1.05);
}

.services-tabs > div.active > p {
    transform: scale(1.05);
}


.services-tabs > div {
    width: auto;
    cursor: pointer;
}

.services-tabs > div > p {
    font-weight: bold;
}


.slideshow-container {
    position: relative;
    margin: auto;
}

.slide {
    display: none;
}


/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Slide in with fade animation */
.slide-in-fade {
    animation-name: slideInFade;
    animation-duration: 1s;
}

@keyframes slideInFade {
    0% {transform: translateY(-20px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}


.h1 {
    padding-left: 5%;
}


.anchor-arrow{
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: black;
}

.anchor-arrow:hover {
    color: #e27b5b;
    border-color: #e27b5b;
}

.anchor-arrow .arrow {
    width: 25%;
    transition: all 0.3s ease;
}

.anchor-arrow:hover .arrow {
    width: 40%;
}



.h1 {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 3px;
}

.arrow{
    margin-top: 1em;
    margin-right: 2em;
    border: 1px solid red;
    position: relative;
    background: red;
    margin-left: 5%;
}

.arrow .head,
.arrow .head:after {
    border: 1.5px solid red;
    border-radius: 2px;
    width: 8px;
    position: absolute;
    right: -5px;
    top: 2px;
    transform: rotate(-45deg);
}

.arrow .head:after {
    content: "";
    border-color: red;
    right: -5px;
    top: -5px;
    transform: rotate(90deg);
}





/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #about {
        padding: var(--sectionPadding);
    }
    #about .about-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 100px */
        gap: clamp(3rem, 10vw, 6.25rem);
    }
    #about .about-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #about .about-flex {
        max-width: 38.5rem;
    }
    #about .about-title {
        max-width: 20ch;
    }
    #about .about-text {
        margin-bottom: 1rem;
    }
    #about .about-text:last-of-type {
        margin-bottom: 0;
    }
    #about .about-wrapper {
        width: 100%;
    }
    #about .about-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        row-gap: 1.75rem;
        /* 16px - 20px */
        column-gap: clamp(1rem, 2.3vw, 1.25rem);
    }
    #about .about-item {
        text-align: left;
        list-style: none;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        display: flex;
        grid-column: span 12;
        flex-direction: column;
        align-items: flex-start;
        /* 16px - 24px */
        gap: clamp(1rem, 3vw, 1.5rem);
    }
    #about .about-icon-wrapper {
        /* 60px - 80px */
        width: clamp(3.75rem, 7vw, 5rem);
        height: clamp(3.75rem, 7vw, 5rem);
        margin: 0;
        box-sizing: border-box;
        border: 1px solid var(--primary);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #about .about-icon {
        width: 2rem;
        height: auto;
        display: block;
    }
    #about .about-h3 {
        font-size: 1.25rem;
        line-height: 1.5em;
        margin: 0 0 0.5rem;
        color: var(--headerColor);
        text-align: inherit;
    }
    #about .about-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        text-align: inherit;
    }
    #about .about-wrapper {
        /* makes the contents of this container act as though the container doesn't exist. They are now children of the about-container so they can be positioned around each other. This allows us to sue the order property to place the about-image-group at the top of the page on mobile */
        display: contents;
    }
    #about .about-image-group {
        font-size: min(2.7vw, 1em);
        width: 33.875em;
        height: 30.875em;
        /* sends it to teh top in the 1st position */
        order: -1;
        position: relative;
        z-index: 1;
    }
    #about .about-picture-wrapper {
        width: 100%;
        height: 85%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: stretch;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
    }
    #about .about-box {
        width: 80%;
        margin-top: -2.375em;
        margin-left: 1.5em;
        padding: 1em;
        background-color: #f7f7f7;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        position: relative;
        z-index: 10;
        cursor: pointer;
        white-space: nowrap;
    }
    #about .about-header {
        font-size: 1em;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: block;
        white-space: nowrap;
    }
    #about .about-desc {
        font-size: 0.875em;
        line-height: 1.5em;
        margin: 0;
        color: var(--primary);
        display: block;
    }
    #about .about-picture {
        position: relative;
        z-index: 1;
    }
    #about .about-picture img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: absolute;
        top: 0;
        left: 0;
    }
    #about .about-picture1 {
        width: 100%;
        height: 100%;
    }
    #about .about-picture2 {
        width: 36.346863%;
        height: 39.878543%;
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #about .about-container {
        max-width: 80rem;
    }
    #about .about-content {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #about .about-flex {
        text-align: left;
        width: 40vw;
        max-width: 40rem;
        flex: none;
    }
    #about .about-title {
        margin: 0;
    }
    #about .about-h3,
    #about .about-item-text {
        text-align: left;
    }
    #about .about-item {
        grid-column: span 4;
    }
    #about .about-image-group {
        width: 100%;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #about {
        /* set the darker background color on the main div */
        background-color: #ffffff;
        overflow: hidden;
    }
    #about .about-content {
        align-items: flex-start;
    }
    #about .about-flex {
        width: 50%;
    }
    #about .about-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 2.5rem;
        position: relative;
        z-index: 1;
    }
    #about .about-wrapper:before {
        /* make the white space dependant on the height of the about-wrapper as a pseudo element attached to the cs wrapper. This makes the white background responsive to the amount of items you have in your list. When the list grows or shrinks, the design will maintain its same spacing */
        content: '';
        width: 100vw;
        height: 40vw;
        background: #fff;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 50%;
        z-index: -1;
        transform: translateX(-50%);
    }
    #about .about-card-group {
        max-width: 39.375rem;
        /* use padding to push add the same amount of space between the content and the top of the card group as the negative margin top value on the about-image-group. This makes sure that it counter acts the effects of the negative margin affecting the card group as well */
        padding-top: 3rem;
        align-self: flex-start;
    }
    #about .about-image-group {
        width: 33.875em;
        /* by setting height to auto, it will stretch to fill the container height. So when you add or subtract more cards and change the height of the container, the image group will shrink as well. Thats why we set the heights of the images in percentages. They will always be X% tall inside the about-image-group. So when the image group stretches to match the container height, the pictures percentage height also grows proportionally. This ensures the design responds to changes in height from the card section on the left. */
        height: auto;
        min-height: 30.875em;
        /* makes it overlap the .about-wrapper div */
        margin-top: -3rem;
        order: 2;
        flex: none;
    }
    #about .about-item {
        grid-column: span 12;
        flex-direction: row;
    }
}


body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.about-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.about-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.about-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #868686;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #be1c2c;
    --bodyTextColor: #545454;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.about-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.about-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.about-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

html, body {

    min-height: 100%;
    margin: 0;
    padding: 0;
}


html, body {
    scroll-behavior: smooth;
    max-width: 100%;
}

/* Media Styles */

@media screen and (min-width: 769px) {
    nav {
        display: none;
    }
}


@media screen and (max-width: 768px) {

    #services {
        min-height: 100%;
        background-color: #ffffff;
        position: relative; /* Add this to position .services-content relative to this section */
        margin-bottom: 0;
    }

    .services-wrapper {
        background-color: #ffffff;
        min-height: 100%;
        position: relative;
    }

    .services-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2vh;
        position: relative;
        transform: translateY(0);
        width: 100%;
        height: 100%;
        bottom: -300px;
        top: -400px;
    }

    .services-content > div {
        width: 80%;
        height: auto;
        box-sizing: border-box;
        padding-top: 5%;
        min-height: 100%;
    }

    .welcome {
        height: 100dvh;
        display: -webkit-flex;
        align-items: center;
        -webkit-justify-content: center;
        position: relative;
        overflow: hidden;
        -webkit-flex-direction: column;
    }

    .welcome img {
        width: auto;
        height: 20dvh;
    }

    .navbar-container {
        display: none;
    }

    nav {
        position: absolute;
        height: 65px;
    }

    .services-tabs {
        z-index: 9999999;
        position: relative;
    }

    .services-tabs > div {
        width: 50%;
        min-height: 100%;
        margin-bottom: 10%;
        z-index: 999999999999999;
    }

    h2 {
        position: relative;
        text-align: left;
    }

    .sw-topper {
        position: absolute;
        bottom: 100%; /* Positions it above the h2 */
        left: auto; /* Center it horizontally */
        text-transform: uppercase;
        font-size: var(--topperFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: left;
        max-width: 43.75rem;
        color: var(--primary);
        letter-spacing: .1em;
    }

    .services-tabs > div > p {
        font-size: 80%;
    }


    #menuToggle {
        display: flex;
        flex-direction: column;
        top: 25px;
        left: 25px;
        -webkit-user-select: none;
        user-select: none;
        position: fixed;
        z-index: 999;
    }

    #menuToggle input
    {
        display: flex;
        width: 40px;
        height: 32px;
        position: absolute;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
    }

    #menuToggle span
    {
        display: flex;
        width: 29px;
        height: 2px;
        margin-bottom: 5px;
        position: relative;
        background: #ed1b24;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 5px 0px;
        transition: transform 0.75s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }

    #menuToggle input:checked ~ span
    {
        opacity: 1;
        transform: rotate(45deg) translate(-3px, -1px);
    }
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    #menuToggle input:checked ~ span:nth-last-child(2)
    {
        transform: rotate(-45deg) translate(0, -1px);
    }

    #menu {
        position: fixed; /* Use fixed positioning to cover the entire screen */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #111827;
        padding: 50px; /* Adjust padding as needed */
        transform: translateX(-100%); /* Initially hide off-screen */
        transition: transform 0.75s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    /* Initially hide all menu items */
    .menu-item {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        margin-bottom: 20px;
        width: 100%;
    }


    /* Apply delays to individual menu items */
    .menu-item:nth-child(1) { transition-delay: 0.2s; }
    .menu-item:nth-child(2) { transition-delay: 0.4s; }
    .menu-item:nth-child(3) { transition-delay: 0.6s; }
    .menu-item:nth-child(4) { transition-delay: 0.8s; }
    .menu-item:nth-child(5) { transition-delay: 1s; }
    .menu-item:nth-child(6) { transition-delay: 1.2s; }
    .menu-item:nth-child(7) { transition-delay: 1.4s; }

    /* When the menu is open, show the menu items */
    #menuToggle input:checked ~ ul .menu-item {
        opacity: 1;
        transform: translateY(0);
    }


    #menuToggle input:checked ~ ul
    {
        transform: none;
    }

    ul {
        display: block; /* Ensure the padding and margin are effectively applied */
        padding: 10px 0; /* Increase top and bottom padding */
        margin: 5px 0; /* Add some margin to the top and bottom */
        text-decoration: none;
        color: white;
        font-family: inherit;
        font-size: 1.5em;
        font-weight: 400;
        transition: color 200ms;
        text-align: center;
        width: 100%;
    }

    .contact {
        bottom: 0;
    }

    a {
        text-decoration: none;
        color: #1E1E23;
        opacity:1;
        font-family: inherit;
        font-size: 1.5em;
        font-weight: 400;
        transition: 200ms;
    }

    body.menu-open {
        overflow: hidden;
    }

    .main-container {
        padding-top: 15rem;
        width: 80%;
        height: auto;
    }

    .nav-text {
        font-size: 70%;
        padding-top: 10px;
    }
}



.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}


a {
    text-decoration: none;
}






div {
    display: block;
}

















/* Styles the scrollbar track (background) */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Styles the scrollbar thumb (the moving part) */
::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px; /* Rounded corners */
}

/* Styles the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Adjusts the width of the scrollbar */
::-webkit-scrollbar {
    width: 8px;
}


html {
    font-family: 'Barlow', sans-serif;
!important;
}

@font-face {
    font-family: 'Barlow';
    src: url('/static/fonts/Barlow-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.text-brand-primary {
    color: #e6c87a;
}

.bg-brand-primary {
    background-color: #e6c87a;
}


.text-brand-secondary {
    color: #bd212f;
}

.bg-brand-secondary {
    background-color: #bd212f;
}


.text-brand-accent {
    color: #fefff7;
}

.bg-brand-accent {
    background-color: #fefff7;
}

/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */
*,
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

::after,
::before {
    --tw-content: ''
}

:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

menu,
ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

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

[hidden] {
    display: none
}

*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.inset-0 {
    inset: 0px
}

.left-0 {
    left: 0px
}

.right-0 {
    right: 0px
}

.top-0 {
    top: 0px
}

.isolate {
    isolation: isolate
}

.-z-10 {
    z-index: -10
}

.z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-50 {
    z-index: 50
}

.order-first {
    order: -9999
}

.order-last {
    order: 9999
}

.-m-1 {
    margin: -0.25rem
}

.-m-1\.5 {
    margin: -0.375rem
}

.-m-2 {
    margin: -0.5rem
}

.-m-2\.5 {
    margin: -0.625rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.ml-12 {
    margin-left: 3rem
}

.mt-10 {
    margin-top: 2.5rem
}

.mt-12 {
    margin-top: 3rem
}

.mt-16 {
    margin-top: 4rem
}

.mt-2 {
    margin-top: 0.5rem
}

.mt-2\.5 {
    margin-top: 0.625rem
}

.mt-3 {
    margin-top: 0.75rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-8 {
    margin-top: 2rem
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.block {
    display: block
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.aspect-\[16\/9\] {
    aspect-ratio: 16/9
}

.h-10 {
    height: 2.5rem
}

.h-12 {
    height: 3rem
}

.h-6 {
    height: 1.5rem
}

.h-8 {
    height: 2rem
}

.h-full {
    height: 100%
}

.w-10 {
    width: 2.5rem
}

.w-12 {
    width: 3rem
}

.w-6 {
    width: 1.5rem
}

.w-8 {
    width: 2rem
}

.w-auto {
    width: auto
}

.w-full {
    width: 100%
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-7xl {
    max-width: 80rem
}

.max-w-md {
    max-width: 28rem
}

.max-w-xl {
    max-width: 36rem
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.flex-col {
    flex-direction: column
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center
}

.justify-start {
    justify-content: flex-start
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-16 {
    gap: 4rem
}

.gap-3 {
    gap: 0.75rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-8 {
    gap: 2rem
}

.gap-x-4 {
    column-gap: 1rem
}

.gap-x-6 {
    column-gap: 1.5rem
}

.gap-x-8 {
    column-gap: 2rem
}

.gap-y-20 {
    row-gap: 5rem
}

.gap-y-6 {
    row-gap: 1.5rem
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse))
}

.overflow-hidden {
    overflow: hidden
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-full {
    border-radius: 9999px
}

.rounded-md {
    border-radius: 0.375rem
}

.rounded-xl {
    border-radius: 0.75rem
}

.border-0 {
    border-width: 0px
}

.border-t {
    border-top-width: 1px
}

.border-gray-900\/10 {
    border-color: rgb(17 24 39 / 0.1)
}

.border-gray-950 {
    --tw-border-opacity: 1;
    border-color: rgb(3 7 18 / var(--tw-border-opacity))
}

.bg-\[\#000000\] {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}

.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity))
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.from-\[\#000000\] {
    --tw-gradient-from: #000000 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-gray-800 {
    --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-50\% {
    --tw-gradient-from-position: 50%
}

.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position)
}

.object-cover {
    object-fit: cover
}

.p-1 {
    padding: 0.25rem
}

.p-1\.5 {
    padding: 0.375rem
}

.p-2 {
    padding: 0.5rem
}

.p-2\.5 {
    padding: 0.625rem
}

.p-6 {
    padding: 1.5rem
}

.p-8 {
    padding: 2rem
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}

.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem
}

.py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem
}

.py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem
}

.pb-8 {
    padding-bottom: 2rem
}

.pt-14 {
    padding-top: 3.5rem
}

.pt-16 {
    padding-top: 4rem
}

.pt-8 {
    padding-top: 2rem
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}

.font-bold {
    font-weight: 700
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.leading-5 {
    line-height: 1.25rem
}

.leading-6 {
    line-height: 1.5rem
}

.leading-7 {
    line-height: 1.75rem
}

.leading-8 {
    line-height: 2rem
}

.tracking-tight {
    letter-spacing: -0.025em
}

.text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity))
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity))
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity))
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity))
}

.text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.opacity-25 {
    opacity: 0.25
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.ring-1 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.ring-inset {
    --tw-ring-inset: inset
}

.ring-gray-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity))
}

.ring-gray-900\/10 {
    --tw-ring-color: rgb(17 24 39 / 0.1)
}

.placeholder\:text-gray-400::placeholder {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity))
}

.hover\:text-gray-100:hover {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity))
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-inset:focus {
    --tw-ring-inset: inset
}

.focus-visible\:outline:focus-visible {
    outline-style: solid
}

.focus-visible\:outline-2:focus-visible {
    outline-width: 2px
}

.focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px
}

@media (min-width: 640px) {
    .sm\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .sm\:mt-10 {
        margin-top: 2.5rem
    }

    .sm\:mt-20 {
        margin-top: 5rem
    }

    .sm\:inline-block {
        display: inline-block
    }

    .sm\:aspect-\[2\/1\] {
        aspect-ratio: 2/1
    }

    .sm\:w-full {
        width: 100%
    }

    .sm\:max-w-2xl {
        max-width: 42rem
    }

    .sm\:max-w-3xl {
        max-width: 48rem
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .sm\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem
    }

    .sm\:py-48 {
        padding-top: 12rem;
        padding-bottom: 12rem
    }

    .sm\:pt-24 {
        padding-top: 6rem
    }

    .sm\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem
    }

    .sm\:text-6xl {
        font-size: 3.75rem;
        line-height: 1
    }

    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem
    }

    .sm\:leading-6 {
        line-height: 1.5rem
    }
}

@media (min-width: 768px) {
    .md\:grid {
        display: grid
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1024px) {
    .lg\:sticky {
        position: sticky
    }

    .lg\:top-0 {
        top: 0px
    }

    .lg\:z-10 {
        z-index: 10
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .lg\:m-0 {
        margin: 0px
    }

    .lg\:-my-8 {
        margin-top: -2rem;
        margin-bottom: -2rem
    }

    .lg\:mx-0 {
        margin-left: 0px;
        margin-right: 0px
    }

    .lg\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .lg\:mr-auto {
        margin-right: auto
    }

    .lg\:mt-24 {
        margin-top: 6rem
    }

    .lg\:flex {
        display: flex
    }

    .lg\:grid {
        display: grid
    }

    .lg\:aspect-\[3\/2\] {
        aspect-ratio: 3/2
    }

    .lg\:h-full {
        height: 100%
    }

    .lg\:w-2\/3 {
        width: 66.666667%
    }

    .lg\:w-2\/6 {
        width: 33.333333%
    }

    .lg\:w-3\/4 {
        width: 75%
    }

    .lg\:w-4\/6 {
        width: 66.666667%
    }

    .lg\:w-full {
        width: 100%
    }

    .lg\:max-w-7xl {
        max-width: 80rem
    }

    .lg\:max-w-none {
        max-width: none
    }

    .lg\:flex-1 {
        flex: 1 1 0%
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:flex-row {
        flex-direction: row
    }

    .lg\:gap-28 {
        gap: 7rem
    }

    .lg\:gap-8 {
        gap: 2rem
    }

    .lg\:gap-x-12 {
        column-gap: 3rem
    }

    .lg\:bg-transparent {
        background-color: transparent
    }

    .lg\:bg-gradient-to-r {
        background-image: linear-gradient(to right, var(--tw-gradient-stops))
    }

    .lg\:p-0 {
        padding: 0px
    }

    .lg\:px-0 {
        padding-left: 0px;
        padding-right: 0px
    }

    .lg\:px-16 {
        padding-left: 4rem;
        padding-right: 4rem
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .lg\:py-0 {
        padding-top: 0px;
        padding-bottom: 0px
    }

    .lg\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem
    }

    .lg\:pb-8 {
        padding-bottom: 2rem
    }

    .lg\:pl-8 {
        padding-left: 2rem
    }

    .lg\:pt-32 {
        padding-top: 8rem
    }
}

@media (min-width: 1280px) {
    .xl\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .xl\:mr-8 {
        margin-right: 2rem
    }

    .xl\:mt-0 {
        margin-top: 0px
    }

    .xl\:grid {
        display: grid
    }

    .xl\:w-1\/2 {
        width: 50%
    }

    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .xl\:gap-8 {
        gap: 2rem
    }
}


/* Base styles for form elements for readability */
/* Base styles for both sections */
.section {
    padding: 20px; /* Shared padding for consistency */
    background-color: #f4f4f4; /* Shared background color */
}

/* Specific styles for .contact-section */
.contact-section {
    min-height: 80vh;
}

.contact-wrap {
    overflow: hidden;
}

.contact-form {
    max-width: 500px; /* Specific width for the contact form */
    margin: 7.5% auto auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Specific styles */
.estimates-section {
    padding: 20px 0;
    margin-top: 80px;
    overflow: hidden;
}

.container {
    max-width: 800px; /* Specific width for the estimates container */
    margin: auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    min-height: 150vh;
    display: flex;
    flex-direction: column;
}

.estimates-form h2 {
    color: #333;
    margin-bottom: 16px;
}

/* Shared form styles across both sections */
.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 8px;
    font-size: 16px; /* Keep font size consistent across devices */
    color: #666;
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

.submit-btn {
    padding: 10px 15px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #0056b3;
}

/* Responsive adjustments, ensuring they apply to both sections without conflict */
@media (max-width: 768px) {
    .contact-form, .container {
        padding: 10px; /* Apply consistent padding in responsive state */
    }

    .contact-section {
        margin-top: 50%;
        margin-bottom: 50%;
        min-height: auto;
        overflow: scroll;
    }

    .form-group label, .form-group input, .form-group textarea, .submit-btn {
        font-size: 0.9rem; /* Consistent font resizing for smaller screens */
    }
}



.thank-you-container {
    text-align: center;
    padding: 50px;
}

.thank-you-container h1 {
    color: #333;
}

.thank-you-container p {
    margin: 20px 0;
    color: #666;
}

.thank-you-container a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}