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;
}

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

hr {
    border: 0;
    clear:both;
    display:block;
    width: 50%;               
    background-color:#d7d1d1;
    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: #fc9d04;
}

.btn-info:hover {background-color: #f85a33;}

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


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

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

.dropdown-item {
    color: white;

}
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;
}




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


a:hover {
    color: #ffad2a !important;
}

.bottom {
    background-color: #f85b33 !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%;
}

#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: #f85a33; /* Orange color */
  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: 3.0em;
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: #fc9d04; /* Orange color */
  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: #f85b33;
    color: white;

}


/* 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, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to left, rgba(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;
  }
}
/* --- Navbar & Alert Bar Styling --- */

/* Alert bar container - use Bootstrap spacing for margin-bottom */
.alert {
    margin-bottom: -.5%; /* Fine if this specific value is needed */
}

/* Main Navbar Background */
#navBar {
    background-color: #f85a33 !important; /* Use !important here if it's the only way to override Bootstrap's bg-light */
}

/* Navbar links - ensure they are white and have ORANGE hover background */
.navbar-dark .navbar-nav .nav-link {
    color: whitesmoke !important; /* Using !important due to existing overrides */
    padding-left: 30px !important;
    padding-right: 30px !important;
    /* transition for smooth hover */
    transition: background-color 0.3s ease;
}

/* THIS IS THE KEY CHANGE FOR MAIN NAV LINK HOVER */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: black !important; /* Keep text white on hover for main nav links */
    background-color:  #f85a33 !important; /* Lighter orange background on hover for main nav links */
}

/* Navbar Toggler Icon (for mobile menu) */
button.navbar-toggler {
    border: 1px solid whitesmoke !important; /* Keep border for visibility */
}
.navbar-toggler-icon {
    /* Override Bootstrap's default black icon with a white one */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* --- Dropdown Styling (Apply the custom dark grey/white theme) --- */

/* Custom dropdown link (e.g., "Personal Insurance") */
.navbar-dark .navbar-nav .nav-item.dropdown .custom-dropdown-link {
    /* If you added this class in HTML */
    padding-right: 30px; /* Adjust padding to match other nav links */
    /* Remove Bootstrap's default dropdown arrow */
}

/* Hide the default Bootstrap dropdown caret (arrow) on custom dropdowns */
.navbar-dark .navbar-nav .nav-item.dropdown .custom-dropdown-link::after {
    display: none;
}

/* Dropdown menu container */
.navbar-dark .navbar-nav .nav-item.dropdown .dropdown-menu {
    background-color: #333; /* Dark grey background */
    border: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    margin-top: 0;
    border-radius: 0;
    min-width: 200px;
    padding: 0; /* Remove default padding from Bootstrap dropdown-menu */
}

/* Individual dropdown items */
.navbar-dark .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    color: white; /* White text */
    background-color: #333; /* Match menu background */
    padding: 10px 20px;
    transition: background-color 0.3s ease; /* Smooth hover */
}

/* Dropdown item hover effect - LIGHTER DARK GREY */
.navbar-dark .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover,
.navbar-dark .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:focus {
    background-color: #575757; /* Lighter dark grey on hover */
    color: white; /* Keep text white on hover */
}

/* Make custom dropdown appear on hover (for desktop) */
@media (min-width: 992px) {
    .navbar-dark .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }
}

 .logo-card {
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        min-height: 120px; /* Adjust as needed - gives cards uniform height */
        padding: 10px; /* Add some padding inside the card body */
        text-align: center; /* Ensures text (if any) or block elements are centered */
    }
    .company-logo {
        max-width: 100%; /* Ensure image doesn't overflow its container */
        max-height: 100px; /* Set a uniform maximum height for all logos */
        width: auto; /* Allow width to scale proportionally */
        height: auto; /* Allow height to scale proportionally */
        object-fit: contain; /* Ensures the entire image is visible, scaled down to fit */
        display: block; /* Make it a block element for margin:auto centering */
        margin: 0 auto; /* Center the image horizontally within its parent */
        transition: transform 0.2s ease-in-out; /* Smooth hover effect */
    }

    .company-logo:hover {
        transform: scale(1.05); /* Slightly enlarge on hover */
    }

    /* Adjust card padding/margins if needed */
    .card {
        margin-bottom: 1rem; /* Space between cards */
    }

    .required {
  color: red;
}