body {
    font-family: 'Lora', serif;
    clear: all;
    overflow-x: hidden;
}

a {
    color: rgb(8, 8, 8);
}

#requestQuote {
    float: right;
    margin-top: 5%;

}

button.btn.btn-info.contactUs {
    margin-top: 15%;
}
.phoneNumber,
.phoneFax,
.email {
    text-align: right ;
    color:black;
    margin-top: 2%;
    margin-bottom: 0% !important;
    padding-bottom: 0% !important;
    text-align: left;


}

#goIns {
    color: black !important;
}

.container {
    position: relative;
    text-align: center;
    color: white;
}

.centered {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 200%;
}


/*Footer Styling*/
.footer {
    width: 100%;
}
.f1 {
    padding: 0;
    margin: 0;
    color: whitesmoke;
}

.f1,
.f2,
.f3 {

    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    text-align: left;
    font-size: 13px;
    padding: 0 8%;
    min-width: 300px;
    width: 33%;
    color: whitesmoke;


}

#f1 {
    color: whitesmoke;
}

#f4 {
font-size: 14px;
    color: whitesmoke !important;
}

a {
    color: white; /* This rule for 'a' tag is overridden by later ones for specific links. If you intend for all 'a' tags to be white in the footer but black elsewhere, you'll need more specific selectors. This is okay for now, just a note. */
}

.dropdown-menu {
    background-color: #AAB7BB;
}

hr {
    border: 0;
    clear:both;
    display:block;
    width: 50%;
    background-color:whitesmoke;
    height: 1px;
}


#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-te-gadget-icon {background-image:url(//gtranslate.net/flags/gt_logo_19x19.gif) !important;background-position:0 0 !important;}
body {top:0 !important;}

/* styling for navbar and alert bar */

.contactUs,
.request {
color: whitesmoke;

}

.requestInstantQt {
    padding-top: -15%;
}

/* ContactUs*/
.btn-info {
    background-color: #AAB7BB;
}

.btn-info:hover {background-color: #D2B48C;
color: #5F4B38;
}

.btn-info {
    border: #AAB7BB;
    margin-top: 5%;
}

#phoneNumber {
    color: black;

}
.fa-phone-alt {
    color: black;
}

div.spanish.seHabla {
    color: black;
    font-size: medium;
    font-weight: bolder;
    margin-top: 1%;

    overflow-x: auto;
}

.alert {
    margin-bottom: -.5%;
}
#navBar {
    background-color: #AAB7BB !important;
    color: whitesmoke !important;


}
.email{
    color: black !important;
}
.dropdown-item {
    color: #5f4b38;

}
button.navbar-toggler,

span.navbar-toggler-icon,
.navbar-light {
    border: 1px solid whitesmoke !important;
}

a.nav-link{
color: whitesmoke !important;
padding-left: 30px !important;
padding-right: 30px !important;
}

.navbar .dropdown-toggle::after {
    display: none;

}

a.dropdown-item:hover {
    background-color:#E4D6B8;
}


a:hover {
    color: #5f4b38 !important;
}

/* --- Navbar Toggler (for mobile menu button) --- */
button.navbar-toggler,
span.navbar-toggler-icon,
.navbar-light .navbar-toggler-icon {
    border: 1px solid whitesmoke !important;
}

/* --- DROPDOWN ON HOVER CSS --- */
@media (min-width: 992px) { /* For desktop, Bootstrap's 'lg' breakpoint */
    .navbar-expand-lg .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
    }
    /* To ensure the active state doesn't stay 'shown' after mouse leaves if clicked */
    .navbar-expand-lg .navbar-nav .dropdown .dropdown-toggle:active {
        pointer-events: none; /* Prevents sticky click on desktop */
    }
} /* <--- THIS IS THE MISSING CLOSING BRACE! */


/* Now, the navbar thinning CSS will apply globally, not just inside the media query */
/*
 * Custom CSS for Navbar Thickness
 * Add these rules to your css/style-sheet.css
 */

#navBar {
    /* Reduce vertical padding on the entire navbar */
    padding-top: 0.2rem; /* Adjusted from 0.25rem for more thinness */
    padding-bottom: 0.2rem; /* Adjusted from 0.25rem for more thinness */
    /* If still not thin enough, you can try min-height, but padding is preferred */
    /* min-height: 45px; */ /* Example: adjust as needed */
}

#navBar .navbar-nav .nav-link {
    /* Reduce vertical padding on individual nav links */
    padding-top: 0.3rem; /* Adjusted from 0.5rem for more thinness */
    padding-bottom: 0.3rem; /* Adjusted from 0.5rem for more thinness */
    font-size: 0.9rem; /* Slightly smaller font if desired, adjusted from 0.95rem */
    line-height: 1; /* Helps collapse vertical space */
}

/* For dropdowns, also adjust padding or font size */
#navBar .dropdown-menu .dropdown-item {
    padding-top: 0.4rem; /* Adjusted from 0.5rem */
    padding-bottom: 0.4rem; /* Adjusted from 0.5rem */
    font-size: 0.85rem; /* Smaller font for dropdown items */
}

/* Optionally, if you have a brand/logo in the navbar and it's making it too tall */
#navBar .navbar-brand {
    padding-top: 0.2rem; /* Consistent with navbar padding */
    padding-bottom: 0.2rem; /* Consistent with navbar padding */
    height: auto;
    max-height: 40px; /* Example max height for a logo */
}

/* Ensure the toggler icon doesn't add extra height */
#navBar .navbar-toggler {
    padding: 0.2rem 0.5rem; /* Reduce padding around the toggler icon */
}

/* If the above still doesn't work, you might need to use !important (use sparingly) */
/*
#navBar {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}

#navBar .navbar-nav .nav-link {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}
*/


.bottom {
    background-color: #AAB7BB !important;
}


#rqQuote {
    text-align: center;
}

.modal-title {
    text-align: justify !important;
}


/* Renters Page*/

.rentersIns {
    font-weight: bold;
}



/*AutoInsurance.html Styling*/

#reAutoQt {
    align-items: center !important;
}

.spanish {
    word-wrap: break-word;

}

/*Auto Req Form*/

.autoReq {
    text-align: center;
}

.btAutoForm {
    float: right;
}

.siteHeading {
    text-align: center;
}

/*Commercial Ins*/
#commercialIns,
#petIns {
    color: black;
}


.insType {
    font-size: small;
}


/*Contact Us*/

#contactUs {
    padding-left: 20px;
}

.card-text {
    margin-bottom: 0%;
    color: black;
}

.card-body {
    color: #333 !important; /* or black if preferred */
}

#emailCU {
    color: black !important;
}

/* Commercial Page Image */


.commercial {
    float:left;
    text-align: center;
    margin-right: 45px;

}

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



/**/
.commercial-body-text {
    margin: 50px;
    padding: 15px;
}

.condo {
    margin-left: 15%;
}

.lifeTitles {
    font-weight: bold;
}


/* Condo How it works list */
ol {
    margin:0 0 1.5em;
    padding:0;
    counter-reset:item;
}

ol>li {
    margin:0;
    padding:0 0 0 2em;
    text-indent:-2em;
    list-style-type:none;
    counter-increment:item;
}

ol>li:before {
    display:inline-block;
    width:1.5em;
    padding-right:0.5em;
    font-weight:bold;
    text-align:right;
    content:counter(item) ".";
}

/* Contact Us Page */

.phoneNumbersCU {
    color: black;
}

/* Thank You */
.jumboThankYou {
    background-color: transparent;
}
.display-4, .lead {
    text-align: center;
}

.line {
    margin-top: 5%;
}

.logo{
    width: 150px;
    height: auto;
}

.hero-section {
    padding-top: 0;
    padding-bottom: 0;
}



.hero-content-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;

}



.hero-section .row {
height: auto;
align-items: stretch;

}



/* Text Column - Centered */

.hero-text-column {
padding: 80px 15px 80px 0;
text-align: Left;
display: flex;
align-items: center;
justify-content: center;

}



.hero-text-column > div {
max-width: 500px;
margin: 0 auto;

}



.welcome-text {
    color: #5F4B38;
    font-weight: bold;
    font-size: 2em; /* Reduced from 2.5em */
    margin-bottom: 10px;
    white-space: nowrap; /* Prevents line break */
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Main Heading - Changed to Black */

.main-heading {
color: #000000; /* Changed to BLACK */
font-size: 2.5em;
font-weight: bold;
line-height: 1.1;
margin-bottom: 20px;

}



.sub-text {
font-size: 1.2em;
color: #555;
margin-bottom: 30px;

}



.btn-get-a-quote {
    background-color: #AAB7BB;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.1em;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-get-a-quote:hover {
    background-color: #E4D6B8;
    color: #5F4B38;
}


/* Image Column with Adjusted Fade Effect */
.hero-image-column {
position: relative;
padding: 0;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;

}



.hero-main-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Adjust the fade effect using mask-image */
/* Increased the percentage where the fade starts and ends,
and made the fade range smaller (e.g., 90% to 100% for a sharper fade,
or 70% to 95% for a softer fade that doesn't cut off as much initially) */
-webkit-mask-image: linear-gradient(to left, rgb(0,0,0,1) 75%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to left, rgb(0,0,0,1) 75%, rgba(0, 0, 0, 0) 100%);
/* You can try different values like 80% to 100% or 70% to 95%
The first percentage (75% here) is where the fade starts.
The second percentage (100% here) is where it becomes fully transparent.*/

}

@media (max-width: 768px) {
    .sub-text {
        white-space: normal;
        font-size: 1em;
    }
} /* <--- Added this missing closing brace */

/*
 * Custom CSS for Navbar Thickness
 * Add these rules to your css/style-sheet.css
 */

#navBar {
    /* Reduce vertical padding on the entire navbar */
    padding-top: 0.2rem; /* Adjusted from 0.25rem for more thinness */
    padding-bottom: 0.2rem; /* Adjusted from 0.25rem for more thinness */
    /* If still not thin enough, you can try min-height, but padding is preferred */
    /* min-height: 45px; */ /* Example: adjust as needed */
}

#navBar .navbar-nav .nav-link {
    /* Reduce vertical padding on individual nav links */
    padding-top: 0.3rem; /* Adjusted from 0.5rem for more thinness */
    padding-bottom: 0.3rem; /* Adjusted from 0.5rem for more thinness */
    font-size: 0.9rem; /* Slightly smaller font if desired, adjusted from 0.95rem */
    line-height: 1; /* Helps collapse vertical space */
}

/* For dropdowns, also adjust padding or font size */
#navBar .dropdown-menu .dropdown-item {
    padding-top: 0.4rem; /* Adjusted from 0.5rem */
    padding-bottom: 0.4rem; /* Adjusted from 0.5rem */
    font-size: 0.85rem; /* Smaller font for dropdown items */
}

/* Optionally, if you have a brand/logo in the navbar and it's making it too tall */
#navBar .navbar-brand {
    padding-top: 0.2rem; /* Consistent with navbar padding */
    padding-bottom: 0.2rem; /* Consistent with navbar padding */
    height: auto;
    max-height: 40px; /* Example max height for a logo */
}

/* Ensure the toggler icon doesn't add extra height */
#navBar .navbar-toggler {
    padding: 0.2rem 0.5rem; /* Reduce padding around the toggler icon */
}

/* If the above still doesn't work, you might need to use !important (use sparingly) */
/*
#navBar {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}

#navBar .navbar-nav .nav-link {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}
*/