/* Set viewport width: 1000 */
/* Set separate viewport width for font-size and line-height: 1000 */
/* General Styles */
body {
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

a {
    text-decoration: none;
    color: black;
    font-size: 18.3469px;
    font-size: max(14px, 0.95557vw);
    line-height: 145%;
}

.contact-info a {
    color: white;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Header Styles */
.header-container {
    position: relative;
}

.main-header {
    background-color: #f8f9fa;
    padding: 10px 20px;
    padding: max(5px, 0.52083vw) max(10px, 1.04167vw);
}

.main-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navigation-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.menu-container {
    width: 100%;
}

.main-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.menu-item {
    position: relative;
}

.menu-link {
    display: block;
    padding: 10px 15px;
    padding: max(5px, 0.52083vw) max(8px, 0.78125vw);
    color: #333;
    font-weight: bold;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.menu-item.has-submenu .menu-link::after {
    content: '\25BE';
    margin-left: 5px;
    margin-left: max(3px, 0.26042vw);
    font-size: 0.8em;
}

/* Top Menu Styles (same as before) */
.top-menu {
    /* background-color: #0A3061; */
    /* Dark Blue */
    color: white;
    /* padding: 10px 20px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    position: absolute;
    z-index: 13;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.search-icon {
    padding: 27px 30px;
    padding: max(14px, 1.40625vw) max(16px, 1.5625vw);
    background: #08254f;
}

.herostuff {
    height: 675px;
    height: max(462px, 35.15625vw);
    position: relative;
	background-color: black;
}

#otherpage .herostuff {
    height: 81px !important;
}

#otherpage .herostuff:before {
    content: '';
    background: #00336638;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
}

.hero-section {
    width: 100%;
    height: 100% !important;
}

/* Hamburger Menu (same as before) */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 25px;
    width: max(23px, 1.30208vw);
    height: 20px;
    height: max(17px, 1.04167vw);
    cursor: pointer;
    background: white;
    padding: 30px;
    padding: max(26px, 1.5625vw);
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

div#menu-button,
div#menu-button * {
    box-sizing: content-box;
}

.hamburger-menu span {
    width: 100%;
    height: 1px;
    background-color: #000000;
    transition: all 0.3s ease;
}

.hamburger-menu span:nth-child(2) {
    width: 80%;
}

/* Logo Container (same as before) */
.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    gap: max(5px, 0.52083vw);
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    height: max(21px, 2.08333vw);
    width: auto;
    /* Keep aspect ratio */
    margin-right: 0px;
    /* Space between image and text */
    height: 70px !important;
    height: max(65px, 3.64583vw) !important;
    padding-left: 9px;
    padding-left: max(9px, 0.46875vw);
}

.logo-since {
    font-size: 0.8em;
    color: #ccc;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

/* Right Side (modified for search) */
.right-side {
    display: flex;
    align-items: center;
}

.leftcontactstuff {
    display: flex;
    padding-right: 35px;
    padding-right: max(18px, 1.82292vw);
    position: relative;
}

.leftcontactstuff:after {
    content: '';
    height: 10px;
    height: max(5px, 0.52083vw);
    background: white;
    width: 1px;
    height: 45px;
    height: max(23px, 2.34375vw);
    position: absolute;
    right: 0;
    top: -10px;
    top: min(-5px, -0.52083vw);
}

.leftcontactstuff:after {}

.rightstuffsearch {
    display: flex;
    padding-left: 35px;
    padding-left: max(18px, 1.82292vw);
}

/* Contact Info (same as before) */
.contact-info:not(.contact-info:last-of-type) {
    display: flex;
    align-items: center;
    margin-right: 23px;
    margin-right: max(12px, 1.19792vw);
    font-size: 0.9em;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.contact-info i {
    margin-right: 8px;
    margin-right: max(4px, 0.41667vw);
}

/* Social Icons (same as before) */
.social-icons {
    display: flex;
    margin-right: 15px;
    margin-right: max(8px, 0.78125vw);
}

.svg-container {
    width: 18px;
    /* Or whatever size you want */
    height: auto;
    /* Maintain aspect ratio */
    /* border: 1px solid red; */
    /* For visualization */
    FILTER: INVERT(1);
}

.svg-container {}

.svg-container svg {
    width: 100%;
    /* Fill the container width */
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Removes extra space below */
}

.social-icons a {
    color: white;
    font-size: 1.2em;
    margin-right: 15px;
    margin-right: max(8px, 0.78125vw);
    text-decoration: none;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    display: flex;
    align-items: center;
}

/* Search Button */
.search-container {
    position: relative;
}

.search-button {
    background-color: #003366;
    /* Darker Blue */
    /* border: 1px solid #007bff; */
    /* Match the image's highlight */
    padding: 8px;
    padding: max(4px, 0.41667vw);
    border-radius: 4px;
    border-radius: max(2px, 0.20833vw);
    cursor: pointer;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.search-button i {
    color: white;
    font-size: 1.2em;
}

/* Search Bar (Initially hidden) */
.search-bar {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    border-radius: max(2px, 0.20833vw);
    padding: 8px;
    padding: max(4px, 0.41667vw);
    display: none;
    /* Hidden by default */
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.search-bar input[type="text"] {
    width: 200px;
    width: max(104px, 10.41667vw);
    padding: 5px;
    padding: max(3px, 0.26042vw);
    border: 1px solid #ccc;
    border-radius: 4px;
    border-radius: max(2px, 0.20833vw);
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.search-bar.active {
    display: block;
    /* Show when active */
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 max(1px, 0.10417vw) max(3px, 0.26042vw) rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: none;
    min-width: 200px;
    min-width: max(104px, 10.41667vw);
}

.menu-item:hover .submenu {
    display: block;
}

.submenu-item {
    border-bottom: 1px solid #eee;
}

.submenu-item:last-child {
    border-bottom: none;
}

.submenu-link {
    display: block;
    padding: 10px 15px;
    padding: max(5px, 0.52083vw) max(8px, 0.78125vw);
    color: #333;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.submenu-link:hover {
    background-color: #f0f0f0;
}

/* Hero Section Styles */
.hero-section {
    position: relative;
    color: #fff;
    text-align: center;
	background-color: #000;
}

.hero-image {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
	
}

.hero-image img {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
	background-color: #000;
}

.hero-content-wrapper {
    position: relative;
    /* padding: 100px 20px; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.hero-content-wrapper:before {
    /* Rectangle 4 */
    position: absolute;
    width: 1920px;
    width: max(1000px, 100vw);
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(180deg, rgba(8, 37, 79, 0) 0%, #08254F 100%);
    width: 100%;
    /* height: 100%; */
    z-index: 1;
    content: '';
}

.hero-content {
    /* max-width: 1200px; */
    z-index: 1;
    margin-bottom: 57px;
    margin-bottom: max(30px, 2.96875vw);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Exo', sans-serif;

}

.hero-content h1 {
    font-size: 49px;
    font-size: max(26px, 2.55208vw);
    margin-bottom: 0 !important;
    text-align: left;
    font-family: 'Exo', sans-serif;
    /* Updated to Exo */
    letter-spacing: 2.5px;
    letter-spacing: max(1px, 0.13021vw);
}

.hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 120px;
    gap: max(3px, 6.25vw);
    margin-top: 0px;
    /* width: 1020px; */
}

.hero-link-item {
    /* background-color: rgba(0, 0, 0, 0.5); */
    padding: 20px 0px 20px 0;
    padding: max(10px, 1.04167vw) 0px max(10px, 1.04167vw) 0;
    border-radius: 5px;
    border-radius: max(3px, 0.26042vw);
    width: 300px;
    width: max(156px, 15.625vw);
}

.hero-link-container {
    text-align: left;
}

.hero-link-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    margin-bottom: max(5px, 0.52083vw);
    /* font-family: 'Karla', sans-serif; */
    /* Updated to Karla */
}

.hero-link-description {
    margin-bottom: 15px;
    margin-bottom: max(8px, 0.78125vw);
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.hero-link {
    display: inline-block;
    /* padding: 10px 20px; */
    color: #fff;
    border-radius: 0;
    transition: background-color 0.3s ease;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    /* padding: 6px 0px; */
}

.hero-link:hover {
    /* background-color: #ffffff; */
    /* color: black; */
    /* padding: 6px 0px; */
    text-decoration: underline;
}

/* Our Purpose Section Styles */
.our-purpose-section {
    padding: 60px 20px;
    padding: max(31px, 3.125vw) max(25px, 1.04167vw);
    /* text-align: center; */
}

.containerstuff {
    width: 1200px;
    width: max(625px, 62.5vw);
    margin: 0 auto;
}

.our-purpose-container {
    /* max-width: 1200px; */
    margin: 0 auto;
}

.our-purpose-container h2 {
    font-size: 2em;
    margin-bottom: 0px !important;
    text-align: left;
    font-family: 'Exo', sans-serif;
    /* Updated to Exo */
    font-size: 41.0721px;
    font-size: max(21px, 2.13917vw);
    line-height: 55px;
    line-height: max(29px, 2.86458vw);
    letter-spacing: 0.05em;
}

#otherpage h2 {
    font-size: 20px !important;
}

.our-purpose-description {
    margin-bottom: 30px;
    margin-bottom: max(16px, 1.5625vw);
    color: #555;
    text-align: left;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    font-size: 21.3066px;
    font-size: max(12px, 1.10972vw);
    line-height: 145%;
}

.our-purpose-description img {
    width: 100%;
}

.our-purpose-description p {
    margin-top: 5px;
    margin-top: max(3px, 0.26042vw);
}

.left-right-area {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
    align-items: center;
    height: 602px;
    height: max(314px, 31.35417vw);
}

#otherpage .left-right-area {
    height: max(314px, 35.35417vw);
}

.left-content,
.right-content {
    /* flex: 1 1 300px; */
}

.right-content {
    width: 100%;
    height: 100%;
}

.left-content {
    background: #F5F5F5;
    padding: 0px 85px 0px 45px;
    padding: 0px max(44px, 4.42708vw) 0px max(23px, 2.34375vw);
    width: 660px;
    width: max(344px, 34.375vw);
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.who-we-are h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    margin-bottom: max(8px, 0.78125vw);
    text-align: left;
    font-family: 'Exo', sans-serif;
    /* Updated to Exo */
    font-size: 41.0721px;
    font-size: max(21px, 2.13917vw);
    line-height: 55px;
    line-height: max(29px, 2.86458vw);
    letter-spacing: 0.05em;
    margin-top: 0;
    margin-bottom: 9px !important;
    margin-bottom: max(5px, 0.46875vw) !important;
}

h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

.who-we-are-description {
    color: #555;
    text-align: left;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    font-size: 21.3066px;
    font-size: max(11px, 1.10972vw);
    line-height: 145%;
}

.right-content img {
    width: 100%;
    width: 100% !important;
    object-fit: cover;
    height: 100%;
}

/* News Section Styles */
.news-section {
    /* background-color: #e9ecef; */
    /* padding: 40px 20px; */
}

.news-container {
    /* max-width: 1200px; */
    margin: 0 auto;
}

.news-list-wrapper {
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

.news-list {
    display: flex;
    gap: 20px;
    gap: max(10px, 1.04167vw);
    width: max-content;
    flex-wrap: wrap;
    justify-content: center;
}

.news-item {
    background-color: #F5F5F5;
}

.news-item img {}

.news-link-container {
    /* padding: 15px 20px; */
    text-align: center;
}

.news-link-container a {
    color: #333;
    font-weight: bold;
    transition: color 0.3s ease;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    display: flex;
    justify-content: space-between;
}

.news-link-container a:hover {
    color: #6e6e6e;
}

.news-link-container span {
    display: block;
    padding: 9px 23px 20px 23px;
    padding: max(5px, 0.46875vw) max(12px, 1.19792vw) max(10px, 1.04167vw) max(12px, 1.19792vw);
    text-align: left;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

/* Contact Us Section Styles */
.contact-us-section {
    padding: 60px 20px;
    padding: max(31px, 3.125vw) max(25px, 1.04167vw);
    background-color: #fff;
    text-align: center;
}

.contact-us-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-us-container h2 {
    font-size: 2em;
    margin-bottom: 0;
    text-align: left;
    font-family: 'Exo', sans-serif;
    /* Updated to Exo */
    font-size: 41.0721px;
    font-size: max(21px, 2.13917vw);
    line-height: 55px;
    line-height: max(29px, 2.86458vw);
    letter-spacing: 0.05em;
}

.contact-us-intro {
    color: #555;
    margin-bottom: 30px;
    margin-bottom: max(16px, 1.5625vw);
    text-align: left;
    margin-top: 0;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    font-size: 21.3066px;
    font-size: max(11px, 1.10972vw);
    line-height: 145%;
    margin-top: 6px;
    margin-top: max(3px, 0.3125vw);
}

.contact-details-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 30px;
    gap: max(16px, 1.5625vw);
}

.contact-details-item {
    /* flex: 1 1 400px; */
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    width: 100%;
}

.company-info-wrapper {
    text-align: left;
}

.company-info {
    padding: 20px;
    padding: max(10px, 1.04167vw);
    background: #F5F5F5;
    padding: 150px 85px 180px 45px;
    padding: max(78px, 7.8125vw) max(44px, 4.42708vw) max(94px, 9.375vw) max(23px, 2.34375vw);
    width: 517px;
    width: max(269px, 26.92708vw);
    box-sizing: border-box;
    position: relative;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.company-name {
    font-size: 1.5em;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    margin-bottom: max(5px, 0.52083vw);
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    font-size: 28.5827px;
    font-size: max(15px, 1.48868vw);
    line-height: 38px;
    line-height: max(20px, 1.97917vw);
    letter-spacing: 0.05em;
}

.address,
.phone,
.email {
    display: block;
    margin-bottom: 5px;
    margin-bottom: max(3px, 0.26042vw);
    color: #555;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    font-size: 21.3066px;
    font-size: max(11px, 1.10972vw);
    line-height: 145%;
}

.inquiry-button {
    margin-top: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.inquiry-button:hover {}

.map-wrapper {
    width: 100%;
    /* max-width: 600px; */
    /* border: 1px solid #ddd; */
    /* border-radius: 5px; */
    /* overflow: hidden; */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    box-shadow: 0 max(1px, 0.10417vw) max(3px, 0.26042vw) rgba(0, 0, 0, 0.05);
    height: 100%;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* We Got You Covered Section Styles */
.we-got-you-covered-section {
    background: linear-gradient(0deg, rgba(8, 37, 79, 0) 0%, #08254F 100%), url('/siteart/covered.png');
    padding: 60px 20px 0;
    padding: max(31px, 3.125vw) max(25px, 1.04167vw) 0;
    text-align: center;
    background-size: cover;
}

.we-got-you-covered-container {
    /* max-width: 1200px; */
    margin: 0 auto;
}

.we-got-you-covered-container h2 {
    font-size: 2em;
    margin-bottom: 15px;
    margin-bottom: max(8px, 0.78125vw);
    font-family: 'Exo', sans-serif;
    /* Updated to Exo */
}

.we-got-you-covered-container>h2 {
    color: white;
    text-align: left;
    font-family: 'Exo', sans-serif;
    /* Updated to Exo */
    font-size: 41.4454px;
    font-size: max(22px, 2.15861vw);
    line-height: 55px;
    line-height: max(29px, 2.86458vw);
    letter-spacing: 0.05em;
}

.covered-services-list {
    display: flex;
    /* flex-wrap: wrap; */
    /* justify-content: space-around; */
    gap: 5px;
    gap: max(3px, 0.26042vw);
}

.covered-service-item {
    /* flex: 1 1 400px; */
    width: 50%;
    margin-bottom: -50px;
    margin-bottom: min(-26px, -2.60417vw);
}

.service-card {
    background-color: #F5F5F5;
    padding: 40px 60px;
    padding: max(21px, 2.08333vw) max(31px, 3.125vw);
    text-align: left;
    display: flex;
    flex-direction: column;
    min-height: 410px;
    min-height: max(214px, 21.35417vw);
    position: relative;
}

.service-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-content h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    margin-bottom: max(8px, 0.78125vw);
    font-family: 'Exo', sans-serif;
    /* Updated to Exo */
    font-size: 28.8425px;
    font-size: max(15px, 1.50221vw);
    line-height: 38px;
    line-height: max(20px, 1.97917vw);
    letter-spacing: 0.05em;
}

.contact-us-container {
    width: 100%
}

.service-content p {
    color: #555;
    margin-bottom: 20px;
    margin-bottom: max(10px, 1.04167vw);
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    font-size: 21.5003px;
    font-size: max(11px, 1.11981vw);
    line-height: 145%;
    margin-top: 0;
}

.learn-more-button-wrapper {
    margin-top: auto;
    position: absolute;
    bottom: 0;
    right: 0;
}

.learn-more-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    gap: max(5px, 0.52083vw);
    /* padding: 10px 20px; */
    color: black;
    /* border-radius: 5px; */
    transition: background-color 0.3s ease;
    /* position: absolute; */
    /* bottom: 0; */
    /* right: 0; */
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    font-size: 19.5371px;
    font-size: max(10px, 1.01756vw);
    line-height: 145%;
}

.learn-more-button:hover {
    /* background-color: #0056b3; */
}

.arrow-box {
    display: flex;
    align-items: center;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    background: #C72121;
    padding: 30px;
    padding: max(16px, 1.5625vw);
    margin-left: 14px;
    margin-left: max(7px, 0.72917vw);
}

/* Footer Styles */
.main-footer {
    color: #fff;
    padding: 40px 20px;
    padding: max(21px, 2.08333vw) max(10px, 1.04167vw);
    text-align: center;
    margin-top: 100px;
    margin-top: max(52px, 5.20833vw);
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.footer-logo {
    margin-bottom: 130px;
    margin-bottom: max(68px, 6.77083vw);
}

.footer-logo img {
    max-width: 370px;
    max-width: max(193px, 19.27083vw);
    height: auto;
}

.footer-navigation {
    margin-bottom: 20px;
    margin-bottom: max(10px, 1.04167vw);
}

.footer-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 55px;
    gap: max(29px, 2.86458vw);
}

.footer-menu-item {
    margin: 0;
}

.footer-menu-link {
    color: black;
    transition: color 0.3s ease;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.footer-menu-link:hover {
    color: #ddd;
}

@media (max-width: 850px) {

    .contact-info span {
        display: none !important
    }

}

/* Responsive Design */
@media (max-width: 768px) {

    .containerstuff {
        width: 100%;
        box-sizing: border-box;
    }

    .logo-container {
        width: 100%;
        /* justify-content: space-between; */
    }

    .right-side {
        display: flex !important;
        justify-content: space-between;
        width: 100%;
    }

    .leftcontactstuff {
        padding-left: 20px;
    }

    .right-side {
        margin-top: 5px !important;
    }

    .top-menu {
        flex-direction: column;
    }

    .herostuff {
        height: unset;
    }

    .contact-us-container {
        width: 100%;
    }

    .main-menu {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-details-item {
        flex-direction: column
    }

    .company-info,
    .company-info-wrapper {

        width: 100%;

        max-width: 100% !important;
    }

    .company-info {
        padding-top: 40px;
        padding-bottom: 60px;
    }

    .map-wrapper iframe {
        height: 230px;
    }

    .menu-item {
        width: 100%;
    }

    .submenu {
        position: static;
        border: none;
        box-shadow: none;
        display: none;
        width: 100%;
    }

    .menu-item:hover .submenu {
        display: block;
    }

    .hero-content-wrapper {
        padding: 60px 20px;
    }

    .hero-content h1 {
        font-size: 2em;
        margin-top: 130px;
    }

    .hero-links {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-link-item {
        width: 100%;
    }

    .left-right-area {
        flex-direction: column;
        height: unset;
        width: 100% !important;
        max-width: 100% !important;
    }

    .right-content img {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0;
        margin: 0;
        height: 250px;
    }

    .left-content {
        width: 100%;
        box-sizing: border-box;
        padding-top: 30px;
        padding-bottom: 70px;
    }

    .contact-details-list {
        flex-direction: column;
        align-items: stretch;
    }

    .covered-services-list {
        flex-direction: column;
        align-items: stretch;
    }

    .covered-service-item {
        width: 100%;
        margin-bottom: 0;
    }

    .we-got-you-covered-container {
        width: 100%;
    }

    .service-card {
        min-height: 210px !important;
    }
}

/* Right Side (modified for search) */
.right-side {
    display: flex;
    align-items: center;
    margin-top: -9px;
    margin-top: min(-5px, -0.46875vw);
}

.leftcontactstuff {
    display: flex;
    padding-right: 35px;
    padding-right: max(18px, 1.82292vw);
    position: relative;
}

.leftcontactstuff:after {
    content: '';
    height: 10px;
    height: max(5px, 0.52083vw);
    background: white;
    width: 1px;
    height: 45px;
    height: max(35px, 2.34375vw);
    position: absolute;
    right: 0;
    top: -10px;
    top: min(-5px, -0.52083vw);
}

.leftcontactstuff:after {}

.rightstuffsearch {
    display: flex;
    padding-left: 35px;
    padding-left: max(18px, 1.82292vw);
    position: relative;
    /* Needed for absolute positioning of search bar */
}

/* Contact Info (same as before) */
.contact-info:not(.contact-info:last-of-type) {
    display: flex;
    align-items: center;
    margin-right: 23px;
    margin-right: max(20px, 1.19792vw);
    font-size: 0.9em;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
}

.contact-info i {
    margin-right: 8px;
    margin-right: max(4px, 0.41667vw);
}

/* Social Icons (same as before) */
.social-icons {
    display: flex;
    margin-right: 15px;
    margin-right: max(8px, 0.78125vw);
}

.social-icons a {
    color: white;
    font-size: 1.2em;
    margin-right: 15px;
    margin-right: max(13px, 0.78125vw);
    text-decoration: none;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    display: flex;
    align-items: center;
}

/* Search Button */
.search-container {
    position: relative;
    display: flex;
}

.search-button {
    background-color: #003366;
    /* Darker Blue */
    /* border: 1px solid #007bff; */
    /* Match the image's highlight */
    padding: 18px;
    padding: max(16px, 0.9375vw);
    border-radius: 0 !important;
    cursor: pointer;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    display: flex;
    /* To align the icon */
    align-items: center;
    /* Vertically center icon */
    justify-content: center;
    /* Horizontally center icon */
    width: 36px;
    width: max(19px, 1.875vw);
    /* Set a fixed width or height for the button */
    height: 36px;
    height: max(19px, 1.875vw);
}

.search-button button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.search-button i {
    color: white;
    font-size: 1.2em;
    /* No more specific styling for the icon here - inherits from the button */
}

/* Search Bar (Initially hidden) */
.search-bar {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 0px;
    display: none;
    /* Hidden by default */
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    z-index: 1;
    /* Ensure search bar is above other elements */
}

.search-bar input[type="text"] {
    width: 230px;
    width: max(180px, 11.97917vw);
    padding: 14px;
    padding: max(11px, 0.72917vw);
    border: none;
    border-radius: 0;
    font-family: 'Karla', sans-serif;
    /* Updated to Karla */
    font-size: 16px;
    font-size: max(15px, 0.83333vw);
}

.search-bar.active {
    display: block;
    /* Show when active */
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 max(1px, 0.10417vw) max(3px, 0.26042vw) rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: none;
    min-width: 200px;
    min-width: max(104px, 10.41667vw);
}

.parts-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /* Distributes items evenly with space around */
}

.parts-logos img {
    width: calc(25% - 10px);
    /* Roughly 1/4th of the container width, minus spacing */
    margin: 5px;
    /* Adds a small margin around each image */
    box-sizing: border-box;
    /* Includes padding and border in the element's total width and height */
    max-width: 200px;
    /* Added max width */
    height: auto;
    /* maintain aspect ratio */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .parts-logos img {
        width: calc(33.333% - 10px);
        /* 3 per row on medium screens */
    }
}

@media (max-width: 480px) {
    .parts-logos img {
        width: calc(50% - 10px);
        /* 2 per row on small screens */
    }
}

.bottom {
    display: flex;
    gap: 50px;
    justify-content: space-between;
}

.svg-container {
    filter: invert(1);
    transition: filter 0.3s ease;
}

.svg-container.invert-off {
    filter: invert(0);
}