/************************ header *****************************/




#header-main-container {
    margin-left: -10px;
    width: 100%; /* Full width */

    position: fixed; /* sticky positioning */
    top: 0; /* Top alignment if needed */
    background-color:  var(--main-theme-header-color-bg);  /*#f8f8f8; */
    z-index: 1000; /* Ensure it stays on top of other content */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Vertically align items */
    padding: 5px 0px 5px 0px; /* Add some vertical padding */
    flex-wrap: nowrap; /* Prevent wrapping */
    height: 85px;

}


/* Base styling for the header */
#main-logo-container {
    display: flex;
    justify-content: center;
    max-width: 200px; /* Maximum width of the logo */
    flex: 1 1 auto; /* Flex grow and shrink as needed */

}

#main-logo-container > div > div > div > div > div > img{
        min-width: 100px;  
}



/* Specific ID styles for layout */
#header-quote-text-container{
    display : none; /* stay hidden for now */
    flex: 1 1 auto; /* Flex grow and shrink as needed */
    text-align: center; /* Center the text */
    padding: 0 10px; /* Horizontal padding */
    min-width: 0; /* Allow elements to shrink below their content size */
    color : var(--main-theme-header-other-text-color );
}

#header-zip-prompt-container{
    padding-left: 15%;
    padding-right: 10px;
    white-space: nowrap;
    color : var(--main-theme-header-other-text-color );
}

/* Adjustments for the zip input container */
#header-zip-input-container {
    flex: 0 1 auto;  /* Do not grow, can shrink, max-width at 20% */
}

/* Style for the input field and button */
#header-zip-input-container input{
    max-width: 100px;
    min-width: 80px;
    box-sizing: border-box;
}

#header-estimate-btn-container {
    padding-right: 3%;  /* offset from main container to right */
    padding-left: 1%;
    flex: 0 1 auto; /* Container can shrink but not grow */

}

#getEstimateHeader{
    color: var(--main-theme-header-get-estimate-button-text-color) ;
    border: 1px solid var(--main-theme-header-get-estimate-button-border-color) ;
    background-color: var(--main-theme-header-get-estimate-button-static-bg-color) ;
    max-width: 130px;
    padding-right: 5px;
    padding-left: 5px;
}

#getEstimateHeader:hover{
    background-color: var(--main-theme-header-get-estimate-button-hover-bg-color) ;

}

#getEstimateHeader:active {
    background-color: var(--main-theme-header-get-estimate-button-click-bg-color); /* Darker shade on click, replace with your color */
    color: var(--main-theme-header-get-estimate-button-text-color); /* text color */
    border: 2px solid var(--main-theme-header-get-estimate-button-border-color) ;
}

#getEstimateHeader:focus {
    outline: 1px solid var(--main-theme-header-get-estimate-button-border-color) !important;
}





/* Adjustments for mobile view */
@media (max-width: 767px) {
    #header-main-container {
        flex-wrap: nowrap;
        min-width: 300px;
        padding: 5px 0px 5px 10px; /* fit iphone 4*/
    }

    #main-logo-container {
        flex: 0 1 140px; /* Allows the logo to grow and shrink */
        min-width: 90px; /* Minimum width for the logo */
        z-index : -1; /*bring zip container on top of it*/
    }




    /* Hide specific elements on mobile */
    #header-quote-text-container, #header-zip-prompt-container {
        display: none;
    }
    

}

@media (max-width: 300px) {
    
    #getEstimateHeader{
        font-size: 10px;
        margin-right: 20px;
    }
    
    
}





/************************ main nav *****************************/

#section-overall-main-nav-container{
    background-color : var(--main-theme-overall-main-nav-color-bg);
}





    #main-nav .nav-link-container {
        display: flex;
        justify-content: space-between; 
        align-items: center; 
        width: 100%; 
        padding: 0; 
        margin-top: 30px;
        
        border-radius: 0.25rem; 
        box-shadow: 0px 4px 3px 4px lightgrey;
    }



    
    


#main-nav .nav-link-container a:hover h3 {
  text-decoration: underline;
}

.nav-link-style {
    background-color: var(--main-theme-navbar-color-bg);
    padding: 0.5rem; /* Adjust padding as needed */
    color: var(--main-theme-navbar-color-text);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    transition: background-color 0.3s, box-shadow 0.3s;
    flex-grow: 1; /* Make each link grow to fill the available space */
    text-align: center; /* Center text for aesthetic reasons */
    border: 1px solid lightgrey;

}

.nav-link-style h3 {
    margin: 0; /* Remove default margin */
    font-family: var(--main-body-font-family) !important;
    font-size: var(--main-body-font-size) !important; /* Default font size for h3 in nav links */
    font-weight: normal; /* Adjust weight as needed */
    


}

/* Keyframes for pulsate effect */
@keyframes pulsate {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); } /* Enlarge a bit */
    100% { transform: scale(1); }
}


#service-column-1-right.pulsate {
  animation: pulsate 1s ease-in-out;   
}




/* Hamburger Menu Icon Styling */
.nav-hamburger {
    cursor: pointer;
    display: none;
}

.nav-hamburger div {
    width: 30px; /* Width of the hamburger lines */
    height: 2px; /* Height of the hamburger lines */
    background-color: var(--main-theme-navbar-color-hamburger); /* Color of the hamburger lines */
    margin: 6px 0; /* Spacing between the lines */
    transition: 0.4s; /* Smooth transition for the animation */
}


/* When the menu is active */
.nav-menu-container.active {
    display: block;
    transform: translateX(0); /* Move into view */
}


.nav-hamburger.open div:nth-child(1) {
    transform: rotate(-45deg) translate(-8px, 6px);
}

.nav-hamburger.open div:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.open div:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -4px);
}







/* Mobile view */
@media screen and (max-width: 767px) {
    /* Make the nav-menu-container a flex container */
    #main-nav {
        display: flex;
        flex-direction: column;
    }
    

    .nav-link-style {
        width: 50%; /* Set each nav link to take up 50% of the screen width */
        box-sizing: border-box; /* Include padding and border in the element's width */
        min-width: 180px;
    }
    .nav-link-style h3 {
        width: 100%; /* Make h3 take up the full width of its parent */
        text-align: center; /* Center the text within h3 */
        margin: 0; /* Remove default margins */
        text-wrap: nowrap;
   
    }

    /* Set the order of the hamburger to be first */
    #main-nav > .nav-hamburger {
        display : block;
        order: 1; 

        margin-left: 92%;
        margin-top: 2.1rem;
    }

    /* Set the order of the nav-link-container to be second */
    #main-nav > .nav-link-container {
        order: 2;
        display: none; /* Initially hidden */
        box-shadow: none;

    }

    /* Show the nav links when active */
    #main-nav > .nav-link-container.active {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Style for the hamburger icon */
    .nav-hamburger {
        display: block;
        z-index: 999;
    }
}




/************************ section 1 *****************************/




#section-overall-columns-container{
    background-color : var(--main-theme-overall-section1-columns-color-bg);
}

.service-section-1 {
    display: flex;
    justify-content: space-between;
}


/*********** left ***********/


#service-column-1-left{
    flex: 1; /* Each column takes up an equal amount of space */
    padding: 0 10px 10px 10px; /* Adjust padding as needed */
    margin-top: -1%;
}


#service-column-1-left > div.service-text-area.service-section-1-text-area-1 h3{
    
    font-family: var(--main-heading-font-family) !important;
    font-size: var(--main-heading-font-size) !important;
}

.service-text-area h3{
 margin-bottom: 0px;   
}


#service-section-1-city-name{
    display: block;
}

#service-section1-column-left-text-1{
    font-style: Italic;
    letter-spacing: .7px;
    font-family: var(--main-heading-font-family) !important;
    font-size: var(--main-heading-caption-font-size) !important;
}


#service-section1-column-left-text-2{
    font-family: var(--main-body-font-family) !important;
    font-size: var(--main-body-font-size) !important;
    margin-top: -1rem;
}

#service-column-1-left > div.service-text-area.service-section-1-text-area-2 > ul{
    font-family: var(--main-body-font-family) !important;
    font-size: var(--main-body-font-size) !important;
}


/*********** middle ***********/

#service-column-1-middle{
    flex: 1; /* Each column takes up an equal amount of space */
    padding: 0px 30px 10px 10px; /* Adjust padding as needed */
}


.service-section-1 .service-section-1-column-middle {
    display: block; /* Show on desktop */
}


.service-section-1 .service-section-1-image-container {
    display: none; /* Hide on desktop */
}



/*********** right ***********/

#service-column-1-right {
    flex: 1; /* Each column takes up an equal amount of space */
    padding: 10px; /* Adjust padding as needed */
    max-width: 350px;
    border: 1px solid var(--main-theme-section1-columns-right-color-border);
    padding: 20px;
    box-shadow: 0px 10px 14px 8px lightgrey;
    margin: 0 auto auto auto;
    background: var(--main-theme-section1-columns-right-color-bg);
    
}


#service-section-1-widget-container {
    text-align: center;
    
}


#service-section-1-widget-container h3 {
    color: var(--main-theme-section1-widget-container-color);
    text-align: center;
    font-family: var(--main-heading-font-family) !important;
    font-size: var(--main-widget-heading-font-size) !important;
    margin-bottom: 10px;
    position: relative;
}

#service-section-1-widget-container h3:after {
    content: '';
    display: block;
    width: 40%;
    height: 3px;
    background-color: var(--main-theme-section1-widget-container-underline-color);
    margin: 8px auto 0;
}

#service-section-1-description {
    text-align: center;
    color: var(--main-theme-section1-description-color);
    margin-bottom: 20px;
}

#service-section-1-zip-code {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--main-theme-section1-zip-color);
}

#service-section-1-get-estimate {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--main-theme-section1-widget-get-estimate-button-border-bg-color) ;
    background-color: var(--main-theme-section1-widget-get-estimate-button-static-bg-color);
    color: var(--main-theme-section1-widget-get-estimate-button-text-color);
    font-family: var(--main-body-font-family) !important;
    font-size: var(--main-body-font-size) !important;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 4px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 700;
}



#service-section-1-get-estimate:hover {
    background-color: var(--main-theme-section1-widget-get-estimate-button-hover-bg-color);
}


#service-section-1-get-estimate:active {
    background-color: var(--main-theme-section1-widget-get-estimate-button-click-bg-color); /* Darker shade on click, replace with your color */
    color: var(--main-theme-section1-widget-get-estimate-button-text-color); /* text color */
    border: 2px solid var(--main-theme-section1-widget-get-estimate-button-border-bg-color) ;
}

#service-section-1-get-estimate:focus {
    outline: 1px solid var(--main-theme-section1-widget-get-estimate-button-border-bg-color) !important;
}


.service-section-1-small-text {
    text-align: center;
    color: var(--main-theme-section1-small-text-color);
    font-family: var(--main-body-font-family) !important;
    font-size: var(--main-widget-caption-font-size) !important;
}

/* Ensuring the input and button text is properly centered */
#service-section-1-zip-code,
#service-section-1-get-estimate {
    text-align: center;
    
}

#mobile-service-image-container{
        display: none;
    
}

#mobile-service-logo-container{
    display: none;
}


#service-section-1-get-estimate::after {
    content: '>'; /* This is the text to be added */
    display: inline-block; /* Makes it align nicely with the button text */
    margin-left: 8px; /* Space between the button text and the symbol */
    border: 2px solid var(--main-theme-body-widget-get-estimate-button-text-color); /* Border for the circle */
    border-radius: 50%; /* Makes the border form a circle */
    width: 20px; /* Width of the circle */
    height: 20px; /* Height of the circle */
    text-align: center; /* Centers the ">" symbol horizontally */
    vertical-align: middle;
    line-height: 17px; /* Centers the ">" symbol vertically */
    font-size: 20px; /* Size of the ">" symbol */
    padding-left: 1px;
}





/* Mobile responsiveness */
@media (max-width: 767px) {
    

    
    #mobile-service-logo-container{
        display: flex;
        justify-content: center;
        align-items: center; /* Optional, if you also want vertical centering */
        margin-top : -3.75rem;
        margin-bottom : -1.5rem;
        padding-bottom: 5px;
    }
    
    #mobile-service-logo-container img{
        width: 100%;
    }
    
    


    
    #mobile-service-image-container{ /* image one when hamburger is not activated */
        display: block;
        max-width: 65%;
        margin: auto auto -5% auto;
        padding-top: 4%;
        padding-bottom: 3%;
    }
    
    #main-nav > div.nav-link-container.active{
        margin-top: -1rem;  /* shift container up when expanded from hamburger */
    }
    
    
    #service-column-1-left > div.service-text-area.service-section-1-text-area-2 > h3{
        padding-left: 1rem;
        padding-bottom: .5rem;
    }
    
    #service-column-1-left > div.service-text-area.service-section-1-text-area-2 > ul{
        padding-left: 2.8rem;
    }
    
    
    #service-column-1-left > div.service-section-1-image-container{  
        max-width: 90%;
        margin: auto;
        display: none; /* image two not used anymore, can maybe delete this struct */
    }
    

    .service-section-1 .service-section-1-column-middle {
        display: none; /* middle column on desktop is hidden on mobile */
    }
    
    .service-section-1 {
        flex-direction: column;
    }
    
    #section-overall-columns-container > div > div > div > div.service-container.service-section-1.shifted{
         margin-top: -1.5rem;
    }
    
    .service-section-1-text-area-1{
        text-align: center;
    }
    

    #service-column-1-left{
        max-width: 95%;
        margin: auto auto 10px auto; /* top, right, bottom, left */
    }

    
    .service-text-area{   /* control width of text column */
        max-width: 95%;
        margin : auto;
    }
    
    #service-column-1-right{ /* control width of widget */
        max-width: 95%;
        margin: 10px 20px 30px 20px; /* top, right, bottom, left */
    }
    
    #service-section-1-get-estimate::after {

        margin-left: 4px; /* Space between the button text and the symbol */
        width: 20px; /* Width of the circle */
        height: 20px; /* Height of the circle */
        line-height: 17px; /* Centers the ">" symbol vertically */
        font-size: 20px; /* Size of the ">" symbol */
        padding-left: 1px;
    }

}


@media (max-width: 310px) {

    #service-section-1-get-estimate {
        
        font-size: 12px !important;
    
        
        
    }


}





/************************ section 2 image gallery *****************************/


#section-overall-gallery-and-heading-container{

    background-color : var(--main-theme-overall-image-gallery-color-bg);

}

.service-image-gallery-title {
    text-align: center;
    font-family: var(--main-heading-font-family) !important;
    font-size: var(--main-subheading-font-size)  !important;
    padding-bottom: 20px;

}


.service-image-grid {
    display: grid;
    grid: auto-flow 300px;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    grid-gap: 0px; /* spacing between images and captions */
    justify-items: center;

}

.service-image-grid-item {
    text-align: center; /* Center the text and image */

}

.service-image-grid-item p {
    margin-top: 0px; /* Reduce space between image and caption */
}




.service-image-grid-item img{


    padding-left: 4%;
    padding-right: 4%;
}



/* Responsive layout for mobile */
@media (max-width: 767px) {
    .service-image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    }

    
    #section-overall-gallery-and-heading-container{

        padding-right: 12%;
        padding-left: 12%;
    }

}


/************************ section  rating ***************************/

#section-overall-rating-container{
    background-color : var(--main-theme-overall-rating-color-bg);   
    /*display: none;*/
}




/* Style the main container for user testimonials */
.users-testimonials {
    margin: 20px;
    display: flex; /* Make this a flexbox container */
    flex-wrap: wrap; /* Wrap items to the next line if they don’t fit */
    justify-content: space-between; /* Distribute items evenly */
}

#testimonial-container{
        display : normal; 
}

#title-container{
       display : normal;
       margin-top: 20px;
}





/* Style the testimonial class */
.testimonial {
    margin-bottom: 20px;
    flex: 1; /* Flex grow */
    min-width: calc(33.333% - 20px); /* Width for 3 columns, considering margins */
    box-sizing: border-box;
    padding: 10px; /* Add some padding */
}




#testimonial_1,
#testimonial_2,
#testimonial_3{
    margin-top: 20px;
    position: relative;
    min-width : 125px;
}


#testimonial_1::before,
#testimonial_2::before,
#testimonial_3::before{
    content: "";
    position: absolute;
    top: 0px;
    left: 1%; /* to start the border at 10% from the left */
    width: 80%; /* make it 80% of the width of the container */
    border-top: 2px solid lightgrey;
}


.testimonial h3 {
        font-size: 16px; 
}

/* Style the rating header */
.rating-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Take the full width to avoid squeezing into flex items */
}




#rating-head-stars{
    min-width:  270px;
}


/* Increase the size of stars in rating class */
.rating img {
    width: 27px;
    height: 27px;
}

#rating-head-stars img {
    width: 40px;
    height: 40px;
}


.rating-head-text{
    display : flex;
    align-items: center;
    padding-right : 16px;
    
}


.rating-head{
    display : flex;
    justify-content: center;

}

#overall-rating {
    font-size: 40px;
    font-weight : normal;
    display :  block;
    padding-right : 20px;
}

#customer-satisfaction {
    font-size: 20px;
    display :  block;
    padding-right : 20px;
    border-right: 4px solid lightgrey; 
    
}

#rating-head-stars{
    padding-left : 20px;    
}


#reviews-title{
    display : block;
    text-align: center;
    font-size : 35px;
    font-weight : normal;
     margin-top: 0px;
    
}



.rating{
    padding-bottom: 10px;
}





/* Responsiveness for smaller screens */
@media (max-width: 768px) {
    
    
    #testimonial_1 > div > div,
    #testimonial_2 > div > div,
    #testimonial_3 > div > div{
        padding-left: 0px;
    }

    #rating-head-stars img {
        width: 40px;
        margin-bottom: -0px; /* Reduce space beneath the stars */
    }
    .rating img {
        width: 20px;
        margin-bottom: -22px; /* Reducing the space below each star */
    }
    
    .testimonial {
        min-width: calc(50% - 20px); /* Two testimonials per row */
    }
    .testimonial h3 {
        margin-top: 20px; /* Adjust this value as needed to reduce space */
    }
    .testimonial p {
        margin-bottom: 0px; /* Adjust this value as needed to reduce space */
    }
    
    #testimonial-container{
         flex-direction : column; 
    }
    
    #customer-satisfaction {

        border-right: 0px solid lightgrey; 
    
    }

}




/************************ section 3 service region ***************************/

#section-overall-service-region-container{
    
    background-color : var(--main-theme-overall-service-region-color-bg);
    
}

#service-region-container {
    display: block;
    text-align: center;
}

#service-region-map-container {
    width: 70%; /* Default width */
    height: 100%; /* Default height */
    margin: 2rem auto 1rem;
}

/* Style for the map image */
#static-map-image {
    width: 100%; /* Make the map image take the full width of its container */
    height: auto; /* Maintain aspect ratio */
}



/* Adjustments for smaller screens */
@media only screen and (max-width: 600px) {
    #service-region-map-container {
        width: 90%; /* Increased width for smaller screens */
        height: auto; /* Adjust height as needed */
    }
}



/************************ section body widget  *****************************/



#section-overall-body-widget-container{
    
    background-color : var(--main-theme-overall-body-widget-color-bg);
    text-align: center;
    padding-bottom: 20px;
}



/*
    max-width: 600px; 
    margin: auto;
    padding: 10px; 
    */
#body-widget-container {

    flex: 1; /* Each column takes up an equal amount of space */
    padding: 10px; /* Adjust padding as needed */
    max-width: 90%;
    border: 1px solid var(--main-theme-section1-columns-right-color-border);
    padding: 20px;
    box-shadow: 0px 10px 14px 8px lightgrey;
    margin: 0 auto auto auto;
    background: var(--main-theme-section1-columns-right-color-bg);
}

#body-zip-and-button-container {
    display: flex; /* Enables flexbox */
    flex-wrap: nowrap; /* Prevents wrapping */
    align-items: center; /* Aligns items vertically */
    justify-content: space-between; /* Spacing between items */
}

#zip-code-body-input-container,
#get-estimate-body-button-container {
    flex: 1; /* Each child takes equal space */
    margin: 5px; /* Space around the items */
    align-self: flex-end;       
}

#zip-code-input-body {
    width: 100%; /* Full width of the container */
    padding: 5px; /* Padding inside the input */
    border: 1px solid #ccc; /* Border styling */
    border-radius: 4px; /* Rounded corners */
    min-width: 65px;
}

#get-estimate-body-button {
    width: 100%; /* Full width of the container */
    padding: 10px; /* Padding inside the button */
    background-color: var(--main-theme-body-widget-get-estimate-button-static-bg-color); /* Button color */
    color: var(--main-theme-body-widget-get-estimate-button-text-color); /* Text color */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}


#get-estimate-body-button:active {
    background-color: var(--main-theme-body-widget-get-estimate-button-click-bg-color); /* Darker shade on click, replace with your color */
    color: var(--main-theme-body-widget-get-estimate-button-text-color); /* text color */
    border: 2px solid var(--main-theme-body-widget-get-estimate-button-border-bg-colo) ;
}

#get-estimate-body-button:focus {
    outline: 1px solid var(--main-theme-body-widget-get-estimate-button-border-bg-color) !important;
}


#get-estimate-body-button:hover {
    background-color: var(--main-theme-body-widget-get-estimate-button-hover-bg-color); /* Darker shade on hover */
}


#zip-code-body-input-container label {
    display: block;
    margin-bottom: 5px;
    text-align: center;

    color: var(--main-theme-body-widget-zip-label-color);
}



#get-estimate-body-button::after {
    content: '>'; /* This is the text to be added */
    display: inline-block; /* Makes it align nicely with the button text */
    margin-left: 8px; /* Space between the button text and the symbol */
    border: 2px solid var(--main-theme-body-widget-get-estimate-button-text-color); /* Border for the circle */
    border-radius: 50%; /* Makes the border form a circle */
    width: 20px; /* Width of the circle */
    height: 20px; /* Height of the circle */
    text-align: center; /* Centers the ">" symbol horizontally */
    vertical-align: middle;
    line-height: 17px; /* Centers the ">" symbol vertically */
    font-size: 20px; /* Size of the ">" symbol */
    padding-left: 1px;
}


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

    #zip-code-input-body{
        width: 150px;
    }
    
    #get-estimate-body-button {
        width: 100%;
        font-size: 20px;
    }
    


    
}


@media screen and (max-width: 405px) {
    
    #get-estimate-body-button::after {
        margin-left: 3px; /* Space between the button text and the symbol */
        font-size: 12px; 
        width: 15px; /* Smaller circle width */
        height: 15px; /* Smaller circle height */
        line-height: 12px; /* Adjust line height for vertical centering */
    }
    
    #get-estimate-body-button {
     
        font-size: .6rem;   
    }
    

}


@media screen and (max-width: 315px) {
    
    #get-estimate-body-button::after {
        margin-left: 3px; /* Space between the button text and the symbol */
        font-size: 10px; 
        width: 12px; /* Smaller circle width */
        height: 12px; /* Smaller circle height */
        line-height: 8px; /* Adjust line height for vertical centering */
        padding-left: 0px;
    }
    
    #get-estimate-body-button {
     
        font-size: .5rem;   
    }
    

}



/************************ section FAQ  *****************************/


.faq-table {
    width: 100%;
    border-collapse: collapse;
}

.faq-row td {
    border: 1px solid #ddd;
    padding: 8px;
    cursor: pointer;
}

.faq-row .answer {
    display: none;
    padding-top: 10px;
}


.faq-row.active .answer {
    display: block;
    font-family: var(--main-body-font-family) !important;
    font-size: var(--main-faq-answer-font-size)  !important;
}


.toggle{
    font-size: 28px;
    font-weight: bold !important;
    color: var(--main-theme-header-color-bg) !important;
}

.faq-row .toggle {
    float: right;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.faq-row.active .toggle {
    transform: rotate(45deg); /* Rotates the "+" to look like a "-" */
}

.question{
    font-weight: bold !important;
    font-family: var(--main-body-font-family) !important;
    font-size: var(--main-body-font-size)  !important;
}




#section-overall-faq-container{
    background-color : var(--main-theme-overall-faq-color-bg); 
}


#faq-header{
    display: block;
    margin: auto;
    text-align: center;
    padding-bottom: 1rem;
}


/* Responsive Design */
@media screen and (max-width: 600px) {
    .faq-row td {
        padding: 4px;
    }
}


/************************ section 5  about us *****************************/

#section-overall-about-us-container{
    background-color : var(--main-theme-overall-about-us-color-bg);
}



#about-us-content-container {
    display: flex; /* Enable flexbox */
    align-items: flex-start; /* Align items to the start of the flex container */
    justify-content: space-between; /* Space out the children */
    width: 100%; /* Full width of the container */
}

#about-us-text-container {
    width: 70%; /* Text container takes up 70% of the width */
    font-family: var(--main-body-font-family) !important;
    font-size: var(--main-body-font-size)  !important;
}

#about-us-text-container h3 {
    text-align: center; /* Center only the heading */
    margin-bottom: 1em; /* Space below the heading */
}

.bs_paragraph-content,
#about-us-list-container {
    text-align: left; /* Left-align the text content and list */
}

#collage-container {
    width: 30%; /* Collage takes up the remaining 30% */
    align-self: stretch; /* Stretch to align with the text container */
    padding-top: 40px;
}

/* Mobile view: Stack elements vertically */
@media (max-width: 767px) {
    #about-us-content-container {
        flex-direction: column; /* Stack children vertically */
    }

    #about-us-text-container {
        width: 85%; /* Each child takes full width */
        margin-left: auto; /* center block element */
        margin-right: auto;
    }

    #collage-container {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }
}



/********************* footer *****************************/



#theme-footer{
    font-size: 10px;
     background-color : var(--main-theme-overall-about-us-color-bg);
}