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

body {
    font-family: Arial, sans-serif;
    background-color: white;
    color: black;
    line-height: 1.6;
}

header {
    background-color: #F8F8F8; /* Off-white color */
    padding: 10px 0;
    text-align: center;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow content to wrap */
    padding: 10px;
}

.logo {
    flex: 0 0 auto; /* Adjust for fixed size */
    max-width: 200px;
    height: auto;
    margin-right: 20px;
}

.header-info {
    flex: 0 1 auto; /* Adjust flex settings for auto width */
    background-color: white;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    text-align: right;
    margin-left: 20px;
    max-width: fit-content; /* Adjust width to fit content */
}

.social-icons {
    flex: 0 0 auto; /* Adjust for fixed size */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 20px;
    order: 2; /* Position next to the logo */
}

.social-icon {
    width: 50px;
    height: 50px;
    margin-left: 10px;
}

/* Enhance the navigation for larger screens */
nav {
    background-color: #333; /* Dark Gray */
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 20px;
    /* Add styles for larger screens */
}

nav a, nav a:visited {
    color: white;
    margin: 0 20px;
    text-decoration: none;
    /* Adjust font size for larger screens */
    font-size: 1em; /* Example size */
}

nav a:hover {
    text-decoration: underline;
    text-decoration-color: white; /* White underline on hover */
}

/* Hides the underline from links by default */
a {
    text-decoration: none;
}

/* Shows the underline only when hovering over the links */
a:hover {
    text-decoration: underline;
}

section {
    padding: 20px;
    margin: 10px auto; /* Center the section and add margin on the top and bottom */
    background-color: #f9f9f9; /* Light gray background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 5px; /* Rounded corners */
    text-align: justify; /* Justify text */
    width: 70%; /* Adjust the width as needed */
    max-width: 900px; /* Increase maximum width */
}

.staff-member {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.profile, .profile-picture {
    flex: 1;
    padding: 10px;
}

.profile-picture img {
    width: 100%;
    height: auto;
    border-radius: 5px; /* Optional: for rounded corners */
}

.contact-info {
    background-color: #f9f9f9; /* Light gray background */
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#contact {
    display: flex;
    justify-content: space-between; /* Space out the divs evenly */
    flex-wrap: wrap; /* Allows items to wrap in smaller screens */
}

#contact > div {
    flex: 1;
    margin: 10px;
    min-width: 300px;
    margin-left: 40px; /* Adjust this value as needed */
}

#contact h3 {
    margin-top: 0;
    margin-bottom: 10px; /* Adds space below the heading */
}

a, a:visited {
    color: #372579; /* Purple color for body links */
}

a:hover {
    text-decoration: underline;
    text-decoration-color: #372579; /* Purple underline on hover */
}

footer {
    background-color: #333; /* Dark Gray */
    color: white;
    text-align: center;
    padding: 20px 0;
}

h1, h2 {
    color: black; /* Adjusted text color for headers */
}

#head-team {
            text-align: left;
            margin-top: 20px;
}

.head-team-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    justify-items: center;
    margin-bottom: 5px; /* Adds 25px of space below the container */
}

.head-team-member {
    width: 115px; /* was 105px */
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.head-team-member img {
    width: 105px;
    height: 105px;
    object-fit: cover;
    border-radius: 50%;
}

.head-team-member p {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9em;
    color: black;
}

/* Additions to style.css */

.carrier {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Space between each carrier */
}

.carrier-logo {
    width: 300px; /* Width of the logo box */
    height: auto; /* Adjust height automatically */
    border: 1px solid #ccc; /* Border for the logo box */
    padding: 10px; /* Padding inside the logo box */
    margin-right: 20px; /* Space between the logo box and the text */
}

.carrier-image {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* This ensures the image is scaled properly within its container */
}

.carrier-info {
    max-width: 525px; /* Set the maximum width to 300px */
}


.carrier-info p {
    text-align: left; /* Align text to the left */
}

/* New Insurance Class */
.insurance {
    background-color: #f8f8f8; /* Off-white color */
    padding: 20px;
    margin: 10px auto;
    border-radius: 5px;
    text-align: left;
}

.insurance-category {
    margin-bottom: 15px;
}

.space-below {
    margin-bottom: 1em; /* Adjust the space as needed */
}

.searchHighlight {
    background-color: yellow;
    color: black;
}

.purple-button {
    background-color: #62C2FE; /* Purple background */
    color: white; /* White text */
    padding: 10px 20px; /* Larger padding for bigger size */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Larger font size */
    cursor: pointer; /* Cursor changes to pointer on hover */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
	margin-top: 5px; /* Add top margin to create space */
}

.purple-button:hover {
    background-color: #0C2A5A; /* Slightly darker purple on hover */
}

.purple-button, .big-search-box {
    font-size: 16px; /* Larger font size */
    padding: 10px 20px; /* Larger padding for bigger size */
    border: 2px solid #0C2A5A; /* Purple border */
    border-radius: 5px; /* Rounded corners */
}

.big-search-box {
    width: calc(100% - 44px); /* Adjust the width as needed */
    box-sizing: border-box; /* Include padding and border in the element's width */
	margin-bottom: 5px; /* Add bottom margin to create space */
}

/* Optional: Add focus style for search box */
.big-search-box:focus {
    outline: none; /* Remove default focus outline */
    border-color: #0C2A5A; /* Darker purple border on focus */
}

#testimonials {
    background-color: #f8f8f8; /* Off-white color */
    padding: 20px;
    text-align: center;
}

#testimonial-container p {
    font-style: italic;
    margin: 10px 0;
}

#why-us {
    background-color: #f8f8f8; /* Choose a suitable background color */
    padding: 20px;
    text-align: justify; /* was left */
}

#why-us-container h3 {
    font-weight: bold;
    margin-top: 15px;
}

#why-us-container p {
    margin: 5px 0;
}

/* Hamburger Icon Style */
.hamburger-icon {
    display: none; /* Hidden by default */
    font-size: 30px;
    cursor: pointer;
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 1268px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }

    .logo, .header-info, .social-icons {
        margin: 10px 0; /* Adjust margins for mobile view */
        max-width: 100%; /* Ensure they don't exceed the screen width */
    }

    .header-info {
        flex-basis: 80%; /* Adjust the width for smaller screens */
        margin-left: 0; /* Remove margin on smaller screens */
        text-align: center; /* Center text on smaller screens */
    }

    nav a {
        display: block; /* Stack links vertically */
        margin: 5px 0; /* Reduce margin */
    }
	
	    #contact {
        flex-direction: column;
        align-items: flex-start; /* Aligns items to the start of the container */
    }

    #contact > div {
        width: 100%; /* Full width for each contact div */
        margin-left: 0; /* Reset left margin */
    }
		
}


/* Responsive adjustments for smaller screens (e.g., small smartphones) */
@media screen and (max-width: 1000px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }

    .logo, .header-info, .social-icons {
        margin: 5px 0; /* Adjust margins for smaller screens */
        width: 100%; /* Full width for better visibility */
        max-width: none; /* Override max-width */
    }

    nav a {
        display: block; /* Stack links vertically */
        margin: 2px 0; /* Smaller margin for tighter space */
    }
	
	    #contact {
        flex-direction: column;
        align-items: flex-start;
    }

    #contact > div {
        width: 100%;
        margin-left: 0;
    }

}	
	
/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .staff-member {
        flex-direction: column;
    }

    .profile, .profile-picture {
        width: 100%;
    }
}


/* Responsive adjustments for cell phone screens */
@media screen and (max-width: 768px) {
    #about-us, #team, #services, #contact, #head-team, #insurance-quote, #insurance-carrier, #testimonials, #why-us {
        padding: 10 10px; /* Reduce padding on all sides, adjust as needed */
        margin: 5; /* Remove any additional margin */
        width: calc(100% - 20px); /* Adjust for padding */
    }

    .header-content, .logo, .header-info, .social-icons, nav {
        width: 100%; /* Ensure full width for header elements */
        max-width: none; /* Override any max-width */
    }

    /* Check if container of sections restricts the width */
    .container { /* Replace with actual container class if different */
        width: 100%; /* Full width */
        padding: 0; /* Remove padding */
        max-width: none; /* Override any max-width */
    }
	
	@media screen and (max-width: 768px) {
    /* ... other styles ... */

    #contact {
        flex-direction: column;
        align-items: flex-start;
    }

    #contact > div {
        width: 100%;
        margin-left: 0;
    }
	
}


/* Responsive adjustments for medium screens */
@media screen and (max-width: 768px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
	
	{
    .social-icons {
        display: none; /* Hide social icons on phone screens */
    }
	
	.hide-social-icons {
    display: none;
    }
	
	body {
        margin: 0px; /* Increase margin for smaller screens */
    }

    .logo, .header-info, .social-icons {
        margin: 5px 0; /* Adjust margins for smaller screens */
        width: 100%; /* Full width for better visibility */
        max-width: none; /* Override max-width */
    }

    .header-info {
        /* Existing styles... */
    }
	
	/* If the navigation bar needs adjustment */
    nav {
        margin-top: 10px; /* Reduce space above the navigation bar */
        /* Adjust as needed */
    }

    nav a {
        display: block;
        margin: 5px 0;
        /* Adjust font size for medium screens */
        font-size: 0.9em; /* Smaller font size */
    }

    .staff-member {
        flex-direction: column;
    }

    .profile, .profile-picture {
        width: 100%;
    }
}


/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .carrier {
        flex-direction: column;
        align-items: start;
    }

    .carrier-logo {
        width: 100%; /* Full width on smaller screens */
        margin-bottom: 10px;
    }
}


/* Responsive adjustments for cell phone screens */
@media screen and (max-width: 500px) {
    #about-us, #team, #services, #head-team, #contact, #staff-member, #testimonials, #why-us {
        padding: 0 10px; /* Reduce padding on all sides, adjust as needed */
        margin: 5; /* Remove any additional margin */
        width: calc(100% - 20px); /* Adjust for padding */
    }

    .header-content, .logo, .header-info, .social-icons, nav {
        width: 100%; /* Ensure full width for header elements */
        max-width: none; /* Override any max-width */
    }

    /* Check if container of sections restricts the width */
    .container { /* Replace with actual container class if different */
        width: 100%; /* Full width */
        padding: 0; /* Remove padding */
        max-width: none; /* Override any max-width */
    }
}

@media screen and (max-width: 500px) {
    .header-content .logo {
        max-width: 200px; /* Set maximum width of the logo */
        height: auto; /* Keep the height proportional */
    }
}


/* Responsive adjustments for small screens (e.g., cell phones) */
@media screen and (max-width: 500px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
	
	{
    .social-icons {
        display: none; /* Hide social icons on phone screens */
    }
	
	body {
        margin: 0px; /* Increase margin for smaller screens */
    }

    .logo {
        max-width: 200px; /* Adjust logo size for small screens */
        margin: 0 auto; /* Center the logo */
    }

    .header-info {
        margin-left: 0;
        margin-top: 10px; /* Add some space between logo and header info */
        text-align: center;
    }

    .social-icons {
        justify-content: center;
        margin: 10px 0; /* Add space around social icons */
    }

    .social-icon {
        margin-left: 5px; /* Reduce space between icons */
        margin-right: 5px;
    }
	
	.hide-social-icons {
    display: none;
    }   

    /* If the navigation bar needs adjustment */
    nav {
        margin-top: 10px; /* Reduce space above the navigation bar */
        /* Adjust as needed */
    }

    nav {
        padding: 5px 0; /* Reduce padding in nav */
    }

    nav a {
        font-size: 0.9em; /* Reduce font size for nav links */
        margin: 0 5px; /* Reduce margin between nav links */
        padding: 2px; /* Add padding for better touch targets */
    }
	
    section div {
        width: 100%; /* Use full width for divs inside sections */
        margin: 0 auto;
        padding: 10px 0; /* Add vertical padding */
    }
}


/* Existing styles */

/* Responsive adjustments for screens up to 500px */
@media screen and (max-width: 500px) {
    .carrier {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .carrier-logo {
        width: 100%; /* Full width of the container */
        max-width: 300px; /* Maximum width of the logo */
        margin-bottom: 10px; /* Space below the logo */
    }

    .carrier-logo img {
        width: 100%; /* Make the image responsive */
        height: auto; /* Maintain aspect ratio */
    }

    .carrier-info {
        width: 100%; /* Full width of the container */
    }

    .carrier-info h3 {
        font-size: 1.2em; /* Adjust font size for smaller screens */
    }

    .carrier-info p {
        font-size: 1em; /* Adjust font size for smaller screens */
    }
}


/* Responsive adjustments for insurance section */
@media screen and (max-width: 500px) {
    .insurance {
        padding: 10px;
        margin: 5px auto; /* Center the div and maintain equal margin on both sides */
        width: calc(100% - 20px); /* Use full width minus padding */
        box-sizing: border-box; /* Include padding and border in the element's width */
    }

    .insurance-category h3 {
        font-size: 1.0em; /* Slightly larger heading for readability */
    }

    .insurance-category p {
        font-size: 0.9em; /* Slightly smaller text for space efficiency */
    }
}



  /* Responsive adjustments for smaller screens */
    @media screen and (max-width: 768px) {
        .head-team-container {
            grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
        }

        .head-team-member {
            width: 50px; /* Adjust size to 50px for cell phone screens */
            height: 50px;
        }
    }

    @media screen and (max-width: 480px) {
        .head-team-container {
            grid-template-columns: repeat(2, 1fr); /* 2 columns for small screens */
        }

        /* Adjust other styles if needed based on existing CSS */
    }

    /* Other existing media queries and styles ... */


/* Responsive - Hide/Show Menu */
@media screen and (max-width: 768px) {
    .hamburger-icon {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .nav-links.active {
        display: block;
    }
}	



/* Responsive - Hide/Show Menu for screens up to 500px */
@media screen and (max-width: 500px) {
    .hamburger-icon {
        display: block;
        font-size: 25px;
        cursor: pointer;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    .nav-links.active {
        display: block;
    }
	
	.nav-links a {
        font-size: 1.1em; /* Larger font size for menu items */
        padding: 5px; /* Larger padding for better touch targets */
    }

    /* Adjust other styles for smaller screens here if necessary */
}