body {
    background-color: #fcfbfb;
    font-family: Arial;
    padding-top: 8vh;
}

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

.TopBar {
    background-color: #195240;
    height: 8vh;
    width: 100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 9999;
}

.TopLogo {
    position: absolute; 
    left: 70%; 
    transform: translateX(-50%); /* Centers it horizontally */
    top: 0;
    height: 100%; /* Tells the container to exactly match the 8vh TopBar */
    display: flex;
    align-items: center; /* Vertically centers the logo inside the bar */
    z-index: 1; /* Keeps it on a low layer so the menu can sit on top */
}
.TopLogo img {
    height: 16vh !important; 
    width: auto !important;
    margin: 0 !important; 
}

.CallButton {
    background-color: transparent;
    border-radius: 10px;
    border-color:black;
    border-width:0.8vh;
    height: 6vh;
    width: 20vh;
    position: fixed;
    left: 3%;
    top:1vh;

    color:#fcfbfb; 
    font-size: 2vh;  
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;

}

.LogoBar {
    height: 30vh;
    max-width: 100vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -5vh;
    margin-top: -5vh;
}

.Herotext {
    background-color: whitesmoke;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.7), -2px -2px 5px rgba(0,0,0,0.7);
    padding: 10px 15px 10px 15px;

    background-color: #195240;
    color: aliceblue;
    display: block;
    width: 90%;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vh;

    padding: 1vh;

    font-family: serif;
    text-align: center;

    border: #333;
    border-width: 3vh;
    border-color: #333;
    border-radius: 2vh;

    box-shadow: #333;
}
.Herotext h2 {
    line-height: 1;
    color: whitesmoke;
}

.Herotext p {
    color: whitesmoke;

}


/* Hamburger Bar 
/* Style the navigation menu */
.topnav {
    background-color: #333;
    position: relative;
    width: 50%;
    left: 50%;
    z-index: 10; 
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  width: 100%;
}

/* Style navigation menu links */
.topnav a {
    color: #d0983c;
    padding: 1vh 1vh;
    text-decoration: none;
    font-size: 17px;
    display: block;
}



/* Style the hamburger menu */
.topnav a.icon {
    height: 3vh;
    background: transparent;
    display: block;
    position: absolute;
    right: 1vh;
    top: 2vh;
    box-shadow: #333;
}


/* Services Boxes */

.card-container {
    display: flex;
    flex-direction: column; 
    gap: 2vh; 
    padding: 20px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vh;

}

.card {
    background-color: whitesmoke;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.7), -2px -2px 5px rgba(0,0,0,0.7);
    padding: 10px 15px 10px 15px;

    text-align: center;
    box-sizing: border-box;

    margin-left: auto;
    margin-right: auto;

}

.card a{
    display: block;
    height:100%
}

.card img {
    max-width: 80vw;
}

.card:hover{
    background-color: #195240;
    color: ivory
}

.stats-container{
    /* display: flex; */
    gap: 1vh;
    align-items: center;
    justify-content: flex-start;
}

.stat-item{
    /* display: flex; */
    align-items: center;
    gap: 1em
}

.stat-item p {
    font-weight: bold;
}

.stat-item i {
    color: #d0983c;
    padding: 10px;
    border-radius: 5px;
    font-size: 5vh;
}

.padding{
    padding:100px;
    height:10vh

}

.ContactUsButton{
    border-radius: 5vh;
    border-width: 3vh;
    border-color: #195240;
    border-style: outset;
    box-shadow: 2vh 2vh 5vh rgba(0,0,0,0.7), -2px -2px 5px rgba(0,0,0,0.7);


    display:block;

    text-align: center;
    margin-top: 2vh;

    background-color: #d0983c;
}
.ContactUsButton h2 {
    font-family: Arial, Helvetica, sans-serif; /* Modern, clean font */
    font-size: 6vh; /* Scaled down slightly so it fits better */
    color: #195240; /* Matches your green theme instead of plain black */
    text-transform: uppercase; /* Makes it feel like a strong call-to-action */
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 1vh;
}

.ContactUsButton p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5vh; 
    color: #333; /* Dark grey for easy reading */
    margin-bottom: 0; 
    line-height: 1.4; /* Gives the text a little breathing room */
    padding: 2vh 2vh 2vh 2vh
}

.Footer {
    background-color: #195240;
    min-height: 10vh; 
    width: 100vw; 
    margin-top: 5vh; 
    margin-left: -8px; 
    margin-bottom: -8px; 
    
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    align-content: center; /* Ensures the rows pack together */
    
    /* THE FIX: Split the gap so it only pushes left/right, not up/down */
    column-gap: 3vh; /* Keeps the 3vh space between the two logos */
    row-gap: 0; /* Kills the forced space between the text and the logos */
    
    padding: 2vh 5%; 
    box-sizing: border-box; 
}

.Info {
    order: 1; /* Puts the text first */
    width: 100%; /* THE MAGIC TRICK: Forces the text to take up the whole top row */
    text-align: center; 
    color: #ffffff; 
    font-family: Arial, Helvetica, sans-serif; 
    margin-bottom: 2vh; /* Adds a little space below the text before the logos start */
}

.Info p {
    margin: 5px 5vw; 
}

/* Give each logo wrapper exactly half the remaining space so they sit next to each other */
.CIMALogo {
    order: 2; /* Puts it on the bottom row, left side */
    width: 45%; 
    display: flex;
    justify-content: center; /* Centers the image inside its half */
}

.PeersLBCLogo {
    order: 3; /* Puts it on the bottom row, right side */
    width: 45%; 
    display: flex;
    justify-content: center;
}

/* Ensure the images don't overflow their 40% halves */
.CIMALogo img, .PeersLBCLogo img {
    height: auto; 
    max-width: 100%; 
    display: block;
}

/* Form Container for the entire quote process  */

.form-container {
    border-style: solid;
    border-width: 1vh;
    border-radius: 3vh;
    border-color: #195240;
    box-shadow: #2B2B2B;

    background-color: #F0F5F2;

    display: flex;
    flex-direction: column;


    padding: 3vh;

    text-align: center;

    margin-left: auto;
    margin-right: auto; 

}



.form-container input {
    background-color: #FFFFFF;
    border-radius: 1vh;
    border-color: #195240;
    width: 5vw;
    height: 3.2vh;

    text-align: center;
    font-size: 3vh;



}

.long-input p {
    display: flex;
    flex-direction: column; 
    text-align: left;       
    width: 100%;
    max-width: 400px;       
    margin: 0 auto 15px auto; 
}

.long-input input[type="text"],
.long-input input[type="email"],
.long-input input[type="password"],
.long-input input[type="date"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;      
    text-align: left;     
    box-sizing: border-box;
    border: 2px solid #1a472a; 
    border-radius: 6px;
    margin-top: 5px;      
}

.long-input ul {
    list-style-type: none; 
    padding-left: 0;
    margin-top: 8px;
    font-size: 0.85em;
    color: #444;
}

.long-input ul li {
    margin-bottom: 4px;
}

.long-input .helptext {
    font-size: 0.85em;
    color: #444;
    margin-top: 5px;
    display: block;
}

.long-input p:has(input[type="checkbox"]) {
    display: grid;
    grid-template-columns: auto 1fr; 
    align-items: center;
    column-gap: 12px;     
    margin-bottom: 15px;
}

.long-input p:has(input[type="checkbox"]) input {
    grid-column: 1;
    grid-row: 1;
    width: 20px;          
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #1a472a; 
}

.long-input p:has(input[type="checkbox"]) label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 16px;
    cursor: pointer;
}

.long-input p:has(input[type="checkbox"]) .helptext {
    grid-column: 2;
    grid-row: 2;
    margin-top: 4px;
    font-size: 0.85em;
    color: #555;
}



.form-container button {
    display: block;
    margin: 20px auto 0 auto;
    border-radius: 1vh;
    border-width: 1vh;
    border-color: #195240;
    background-color: #d0983c;

    padding: 12px 30px;

    font-size: large;
    cursor: pointer;

}



.form-container h1 {
    color: #2B2B2B;
    text-align: center;
}

.form-container h2 {
    color: #4F4F4F
}

.form-container ul {
    list-style-position: inside; /* This brings the bullets into the centered text flow */
    padding-left: 0;             /* Removes the default left indentation */
}

.form-container .helptext {
    display: block;       /* Forces the text onto a new line */
    margin-top: 8px;      /* Adds some breathing room below the box */
    font-size: 0.9em;     /* Optional: makes it slightly smaller */
    color: #555;          /* Optional: softens the color so it looks like a hint */
}
/* Line items styling */

.form-item {
    display: flex;
    margin-bottom: 2vh;
    align-items: center;
    /* margin-left: auto;
    margin-right: auto; */
}

.form-label{
    margin-right: 5px;
    /* font-weight: bold; */
}


.text-input input {
    background-color: #FFFFFF;
    border-radius: 1vh;
    border-color: #195240;
    width: 300px;
    height: 2.1vh;
    text-align: left;
    font-size: 2vh;
}

.date-input input {
    background-color: #FFFFFF;
    border-radius: 1vh;
    border-color: #195240;
    width: 10rem;
    height: 2.1vh;
    text-align: center;
    font-size: 2vh;


}

.number-input input {
    width: 100px;
    height:2.1vh;
    font-size: 2vh;
}

/* Multiple checkbox inputs  */

.checkbox-group-input {
    display: flex;
    flex-direction: column; 
    gap: 1.5vh; 
    margin-left: 5px;
}

.checkbox-group-input label {
    display: flex;
    align-items: center; 
    gap: 1vh; 
    font-size: 2vh;
    cursor: pointer;
}

.form-container .checkbox-group-input input[type="checkbox"] {
    width: 2.5vh; 
    height: 2.5vh;
    border-radius: 4px;
    margin: 0;
    cursor: pointer;
}

.checkbox-group-input ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.form-helptext {
    position: relative; 
    display: inline-block;
    margin-left: 1vh
}

.popup-text {
    position: absolute; 
    bottom: 150%; 
    left: 50%;
    transform: translateX(-50%); 

    width: 35vw;
    

    background-color: #2B2B2B;
    color:#ffffff;
    padding: 10px;
    border-radius: 8px;
}

.popup-text {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease; /* Makes it fade in smoothly */
}

/* When the user hovers over the WRAPPER, change the POPUP */
.form-helptext:hover .popup-text {
    visibility: visible;
    opacity: 1;
}

.form-helptext::after {
    position: absolute;
    top: 100%; 
    left: 50%;
}

.question-mark {
    color:#d0983c;
}

.form-errors {
    color:red
}

.heading {
    text-align: center;
    margin-left: 5vw;
    margin-right: 5vw;
    color: #333;

}







@media (min-width: 768px) {
    .card-container {
        flex-direction: row; 
        justify-content: space-between; 
        padding: 0 5%; 
    }

    .card {
        flex: 1; 
        margin: 0 10px; 
    }
    .card img {
    max-width: 40vw;
}

    .ContactUsButton {
        width: fit-content; /* Forces the button to stay small and hug the text */
        
        /* Because it's inside a flex row, these auto margins will automatically 
           grab all the empty space on both sides and shove the button dead center */
        margin-left: auto;
        margin-right: auto;
        padding: 12px 24px; /* Standard button breathing room instead of relying on the H2 margins */
    }
    .ContactUsButton h2 {
        font-size: 18px; /* Scales it down to a normal, readable size */
        margin: 0; /* CRITICAL: This strips away the massive invisible spacing browsers add to headings */
        text-align: center;
        line-height: 1.2; 
    }


    .Footer {
        flex-wrap: nowrap; /* Stops the wrapping, forcing a single straight line again */
        justify-content: space-between; 
        padding: 0 0%; 
    }

    .Info { 
        order: 3; /* Moves text to the far right */
        width: auto; /* Stops the text from taking up 100% width */
        text-align: right; 
        margin-bottom: -5vh; /* Removes the mobile gap */
    }

    .CIMALogo { 
        order: 1; /* Moves to far left */
        width: auto; /* Removes the 40% restriction */
    }
    
    .PeersLBCLogo { 
        order: 2; /* Moves next to CIMA logo */
        width: auto; 
    }
    
    .CIMALogo img, .PeersLBCLogo img {
        max-width: 25vw; /* Sets the maximum size for large computer screens */
    }

    .form-container{
            max-width: 40vw;
    }

    .form-item {
    margin-left: auto;
    margin-right: auto;
}

}


.quote-announcement {
    background-color: #195240;
    border-radius: 2vh;
    padding: 3vh;
    margin-bottom: 3vh;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.quote-announcement h1 {
    color: #fcfbfb;
    font-size: 3.5vh;
    margin-top: 0;
}

.quote-announcement h2 {
    color: #e0e0e0;
    font-size: 2.5vh;
    margin-bottom: 0.5vh;
}

.quote-announcement p {
    color: #e0e0e0
}

.quote-announcement .total-price {
    color: #d0983c;
    font-size: 5vh;
    font-weight: bold;
    margin-top: 1vh;
    margin-bottom: 0;
}

.quote-breakdown {
    color: #4F4F4F;
    font-size: 2.2vh; 
}

.quote-breakdown p {
    margin: 1vh 0; 
}

.quote-breakdown .breakdown-intro {
    font-weight: bold;
    color: #2B2B2B;
    border-bottom: 2px solid #195240;
    padding-bottom: 1vh;
    margin-bottom: 2vh;
}

.quote-breakdown .sub-text {
    font-size: 1.8vh;
    color: #666;
    margin-top: -0.5vh;
}

.quote-breakdown ul {
    list-style-position: inside; 
    padding: 0;
    margin: 0.5vh 0 2vh 0;
}

.quote-breakdown li {
    font-size: 1.9vh;
    color: #666;
    margin: 0.3vh 0;
}