body {
/* Removes the browser's default 8px margin */
margin: 0; padding: 0;width:100%;}
html {box-sizing: border-box;}
*, *::before, *::after {
/* Ensures width: 100% includes padding, which is key for alignment */box-sizing: border-box;}
/* Reset list styles */
ul {list-style: none;margin: 0;padding: 0;}
.primary-nav li {
list-style: none; /* Removes the disc bullet */
}
/* Header bar */
.header_main .main_nav{background-color: #003366;padding:0;border:25px;z-index: 1010;}
/* flex container for logo and nav (desktop/mobile base)*/
.nav_wrapper {display: flex;
justify-content: space-between;
gap:5px;/* sets the exact space between the logo and the content */
align-items: center;background-color: #003366;padding:15px 20px;font-family: Arial, sans-serif;
position:relative;}/*needed for positioning on mobile */
/*logo container */
.logo {flex-shrink:0;}
/* logo image */
.logo img{display:block;}
/* Nav + Social Icons */
/* Desktop:this is a flex container,aligning nav and social side by side */
.right-group{display: flex; align-items: center;gap:200px;/* Space between the primary nav and the social icons */}
/* Social Icons Styling */
.social-icon { display: flex;gap: 15px;}
.social-icon a {color: red;font-size: 18px;transition: color 0.3s;}
.social-icon a:hover {color: #5d9ee0; /* Brighter blue on hover */}
/* Menu Toggle Button - HIDDEN BY DEFAULT (Desktop) */
#menu-toggle {display: none;background: none;border: none;color: white;font-size: 24px;cursor: pointer;
margin-left: auto;} /* Pushes the menu icon to the far right on mobile */
/* Navigation list on the right FIXED */
.primary-nav {display: flex;gap:20px;transition:transform 0.3s ease-in-out;width:100%;}
/* Optional: remove inline-block if you had it before */
.primary-nav > li {position: relative;}
.primary_nav_link{color: white;text-decoration: none;padding: 8px 12px; display:block;transition: back-ground 0.3s;}
.primary_nav_link:hover {background-color: #0055aa;border-radius: 5px;}
/* Secondary nav (dropdown) */
.secondary-nav {display: none;position: absolute;top: 100%;left: 0;background-color: #f9f9f9;min-width: 250px;box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 1000;}
.dropdown:hover .secondary-nav {display: block;}
/* Sub-links inside dropdown */
.secondary-nav li {padding: 10px;border-bottom: 1px solid #ddd;}
.secondary-nav li a {color: #003366;text-decoration: none;display: block;}
.secondary-nav li a:hover {background-color: #eee;}
/* Extra content inside dropdown */
.nav-content {padding: 10px;font-size: 14px;color: #333;}
.nav-content h4 {margin-top: 10px;margin-bottom: 5px;color: #0055aa;}
/* ================================================= */
/* START MOBILE RESPONSIVENESS (MAX WIDTH 768px) */
/* ================================================= */
@media (max-width: 768px) {
.nav_wrapper {/* On mobile, we want the logo on the left, and the button on the right */justify-content: space-between;position:relative;height:auto;
display:flex;gap:10px;width:100%;flex-direction: row;align-items: center;flex-wrap: wrap;padding: 15px 20px;}
/* 2. LOGO POSITIONING: Left, pushing other items away */
.logo-group {
flex-grow: 1; /* Allows the logo container to take up space */
}
/* 1. SHOW THE HAMBURGER ICON */
#menu-toggle {display: block;flex-shrink: 0;margin-left: 0;}
/* 2. HIDE THE ENTIRE MENU/SOCIAL CONTAINER BY DEFAULT */
/*Target the container with id="mobile-menu" which is the .right-group div */
#mobile-menu { width: 100%;background-color: #003366;z-index: 1005;order:1;
/* Transition for smooth slide-down effect */
max-height: 0px;overflow: hidden;transition: max-height 0.3s ease-in-out;position:static;}
/* 3. MOBILE MENU: STACK VERTICALLY */
.primary-nav {flex-direction: column; /* Stack links vertically */gap: 0;}
/* SHOW SOCIAL ICONS INSIDE THE MOBILE MENU*/
.right-group {display: flex;flex-direction: column;gap: 10px;padding: 10px 20px;border-top: 1px solid #0055aa;}
.social-icons {justify-content: center;margin: 10px 0;}
.social-icons a {font-size: 24px;}
/* 4. SHOW MENU WHEN 'is-open' CLASS IS PRESENT */
#mobile-menu.is-open {max-height: 500px; /* Large enough value to show all content */}
/* Make secondary nav display inline and full-width */
.secondary-nav {display: block; position: static; /* Position normally within the flow */ width: 100%; min-width: auto;background-color:#f9f9f9;
/* Different background to stand out */box-shadow: none;border-radius: 0;margin-top: 0;padding-left: 0;list-style: none;}
.secondary-nav li {padding: 0;border-bottom: 1px solid #ddd;}
.secondary-nav li a {color: #003366;}
.secondary-nav li a:hover {background-color: #eee; /* Light hover background for white background */}
.nav-content {padding: 10px; background-color: transparent;color:#333;}
.nav-content h4 {color: #0055aa; margin-top: 10px;margin-bottom: 5px;}}
/* ================================================= */
/* END MOBILE RESPONSIVENESS */
/* ================================================= */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.container{margin:0px;padding:0px;position:relative;}
.container img{width: 100%;height:70%; display: block;object-fit:cover;}
.banner-overlay-text{position: absolute;left: 10px;bottom: 150px;padding: 25px;background-color: white;color: black;
font-size: 24px;border-radius:10px;z-index: 5;width:auto;}
.banner-title {position: absolute;left: 10px;top: 20px;padding: 15px 5px;color: wheat;font-size: 20px;
z-index: 10;}
.banner-title h1 {margin: 0; font-size: 1.5em;padding: 0;}
@media (max-width: 768px) {
.container {
display: flex;
flex-direction: column;
height: auto; /* Allows container to grow with content */
}
.banner-title {
position: static; /* Removes it from the "floating" layer */
top: 0;
left: 0;
width: 100%;
padding: 20px 15px 10px 15px; /* Added padding for space */
background-color: #002147;
order: 1; /* Keeps it at the very top */
z-index: 10;
}
.banner-title h1 {
font-size: 22px;
line-height: 1.2;
text-align: center; /* Aligns to the left as per standard mobile headers */
margin: 0;
}
.container img {
position: static;
height: 250px; /* Fixed height works better for mobile banners */
width: 100%;
order: 2; /* Image comes after title */
object-fit: cover;
}
.banner-overlay-text {
position: static; /* Stays in the document flow */
order: 3; /* Always appears after the image */
width: 90%;
margin: 20px auto; /* Creates the "little bit of space" at the top */
left: 0;
bottom: 0; /* Resets the 150px from desktop */
font-size: 18px;
padding: 20px;
background-color: white;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
border-radius: 10px;
transform: none;
}
}
.site-footer {background-color: #003366;color: white;padding: 20px 15px;font-family: Arial, sans-serif;margin-top:0px}
.footer-content {display: flex;/* keep the column in a row */flex-wrap: wrap;justify-content:space-around;align-items: flex-start;/* space above the copyrights line */
gap:20px;padding-bottom:20px;}
.footer-col-1{flex:1 1 300px;min-width:250px;margin-top:45px;}
.footer-links.footer-col-2{flex:1 1 200px;min-width:180px;margin-top:5px;}
.footer-info.footer-col-3 {flex:1 1 300px;min-width:250px;}
.footer-info-details {margin-bottom:15px;}
.footer-logo img {width: 100px;height: 50px; border: none;margin-top:40px;margin-bottom:80px;}
.footer-links ul {list-style: none;padding: 0px;font-size:18px;color:whitesmoke;}
.footer-links a {color: whitesmoke;text-decoration: none;display:block;padding:15px 0px;}
.footer-links li{position:relative;padding-left:15px;}
.footer-links li::before {content:"\2022";color:red;font-weight:bold;display:inline-block;position:absolute;left:0;margin-right:5px;font-size:1.5em;transform:translateY(-50%);top:50%;}
.footer-links a:hover {text-decoration: underline;color:green;}
.footer-info ul{list-style:none; padding:0px;}
.footer-info li{display:flex;align-items:flex-start;margin-bottom:5px;}
.footer-info i{ margin-right:10px; margin-top:5px;color:red;}
.footer-info a[href^="mailto:"]{color:whitesmoke;}
.footer-copyright{text-align:center; /* center the text */margin-top: 5px;margin-bottom:0px;font-size: 14px;border-top: 1px solid rgba(255,255,255,0.3);
padding-top: 10px;width: 100%;}
/*================================= */
/* start of services section */
/*==================================*/
/* --- Centered Main Heading and Underline --- */
.main-heading{text-align:center;margin-bottom:50px;margin-top:120px;}
.main-heading h3 {text-align: center;margin-bottom: 30px;display:inline-block;padding-bottom:10px;font-size:1.2em;
border-bottom: 2px solid red;margin:0;}
/* Container for all services to arrange them in a row */
.services-container {display: flex;flex-wrap: wrap; /* Allows wrapping on smaller screens */
justify-content: center; /* Centers the services within the body */gap: 20px; /* Space between service boxes */margin-top: 20px;}
/* Styling for each individual service box (main tag) */
.service-box {width: 300px; /* Set a fixed width for each service box */padding: 15px;border: 2px solid grey; /* Short color border line (blue in this case) */
border-radius: 8px; /* Optional: adds rounded corners */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
text-align: left; /* Align content inside the box to the left */}
/* Styling for the service images */
.service-box img {width: 100%; /* Make image responsive within its container */height: 200px; /* Set a max height for uniform look */
object-fit: cover; /* Ensures image covers the area without distortion */margin-bottom: 5px;border-radius: 4px; /* Optional: minor rounding for the image */}
/* Adjusting the specific image height from the original code for uniform layout */
/* Note: The original height of 1020px was likely a typo and has been corrected in the image style above. */
/* Styling for the service titles */
.service-box h4 {color: #333;margin-top: 0; /* Separator for title */padding-bottom: 5px;}
/* Styling for the paragraphs */
.service-box p {font-size: 0.9em;line-height: 1.4;color: #555;
min-height: 90px; /* Ensure a minimum height for p tags for a uniform look */
margin-bottom:0px;}
/*==============================*/
/* end of services section */
/*==============================*/
/*===============================*/
/*start of why choose us section*/
/*===============================*/
/* Basic container and layout setup (assuming a standard grid system or full width) */
.content-container {width: 90%; /* Example width, adjust as needed */margin: 0 auto;}
.row {display: flex; /* Enables Flexbox for the columns */justify-content: space-between; /* Pushes content to the edges, or use 'space-around' */
align-items: flex-start; /* Aligns columns at the top */}
.col-md-6 {/* This ensures the columns take up roughly equal space */width: 40%;padding: 0 5px; /* Add some padding between the columns */
box-sizing: border-box; /* Include padding in the element's total width */}
/* Target the second column wrapper (the one with the list) */
.row .col-md-6:nth-child(2) {margin-top: 60px; /* Adjust this value to push the column down */padding-left:10px;padding-right:50px;width:50%;}
/* --- Left Column Styling --- */
.our-commitment-summary {text-align: left; /* Ensure content is left-aligned */padding-left:90px;margin-top:100px;}
.section-title { /* Styling for the : left-aligned with a border line underneath */ text-align: left;
padding-bottom: 10px; /* Space between the text and the border */border-bottom:none;
display:block; /* Essential to make border-bottom only as wide as the text */
margin-bottom: 10px; /* Space after the title/border before the paragraph */font-size:1.1em;opacity:0.5;}
.our-commitment-summary h4 {font-size:1.8em;display: inline-block; /* Makes the border only as wide as the text */
margin-top: 5px; /* Adjust spacing above if needed */margin-bottom: 15px; /* Space after the border line */
position:relative;}
/* **NEW: Pseudo-element to create the short border line** */
.our-commitment-summary h4::after {content: ''; /* Required for pseudo-elements */display: block;/* LINE STYLING */
height: 5px; /* Thickness of the line */background-color: red; /* Color of the line */
/* **LINE LENGTH AND POSITIONING** */
width: 30%; /* **CONTROLS THE SHORT LENGTH (Adjust as needed)** */
margin-top: 15px; /* **Controls the space between the text and the line** */
margin-bottom: 0; /* Ensures line is flush with h4 bottom margin */}
.section-summary {text-align: left; /* Styling for the
: left-aligned after the border */border:none;}
/* --- Right Column Styling vertical List) --- */
.our-commitment-list { list-style: none; /* Remove default bullet points */padding: 0;margin: 0px;flex-direction: column; /* Arrange list items horizontally */display:flex;}
.single-our-commitment-list {/* Styles for each list item to control its size and spacing when in a row */
width:100%; /* Example width, allowing multiple items in one row */
margin: 0px 0px 5px 0px; /* Add spacing between list items */padding: 15px;display:flex;align-items:flex-start;}
/* Optional: Icon and text layout within the list item */
.our-commitment-icon-wrapper {margin-bottom: 10px;font-size: 24px;color: white; /* Example color */min-width:70px;
height:70px;border-radius:50%;background-color:#f0f8ff;border:1px solid red;display:flex;justify-content: center;align-items: center;
margin-right: 40px;flex-shrink: 0;}
/* Target the icon (i tag) inside the wrapper */
.our-commitment-icon-wrapper i {font-size: 30px; /* **Larger icon size** */color:red; /* **Changed icon color to red** */}
.our-commitment-text{ flex-grow:1;}
.our-commitment-text h4 { margin-top: 0; /* Ensures the h4 starts flush at the top for alignment */ margin-bottom: 10px; /* Space between the h4 and the p */
display: block;/* Removed all previous conflicting margin-left, padding, and width */}
.our-commitment-text p {margin-top: 0; /* Ensures the paragraph starts right after the h4 */}
/* Container for the entire section (NOW FULL WIDTH) */
.our-clients-section {max-width: none; /* Allows it to take full viewport width */margin: 0; /* Ensures it is flush with the sides */padding: 0; }
/* Inner section spacing - CRITICAL FIX: Removed ALL horizontal padding here */
/*================================*/
/*end of our why choose us section*/
/*================================*/
/*============================*/
/*start of our partner section*/
/*============================*/
.our-partner-section {padding-top: 35px;padding-bottom:0px;padding-left:0px;padding-right:0px;}
/* --- Partner Title Styling (Horizontal padding re-applied here for text spacing) --- */
.partner-tittle {text-align: center;margin-bottom: 0px;font-size: 1.2rem;color:whitesmoke ;opacity:0.7;
border:2px solid #d3d3d3;padding:15px 20px;background-color:#003366;display: block; text-transform: uppercase;}
/* --- Logos Wrapper Styling (The main row container - Full-width is now guaranteed) --- */
.inner-container-wrapper { width: 100%; display: flex;flex-wrap: nowrap; justify-content: center;align-items: center;overflow-x: hidden;overflow-y: hidden;
border: 1px solid #003366;border-left: none;border-right: none;border-top:none;border-radius: 0; /* Remove corner rounding */
padding: 20px 20; background-color: #ffffff;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom:0px;min-height: 150px;}
/* Individual Logo Container Styling - Default (Medium Screens) */
.inner-container {width: 150px;height: 120px;margin:15px;flex-shrink: 0;display: flex;justify-content: center;
align-items: center;border-radius: 8px;border:1px solid grey;overflow: hidden;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);transition: transform 0.3s ease;}
.inner-container:hover {transform: scale(1.05);}
/* Image Styling */
.inner-container img {max-width: 100%;max-height: 100%;display: block;object-fit: contain;
border-radius: 6px;}
/* ------------------------------------------------------------- */
/* MEDIA QUERIES FOR RESPONSIVENESS */
/* ------------------------------------------------------------- */
/* Media Query for extra small mobile screens (max-width: 600px) */
@media (max-width: 768px) {
.inner-container {
width: 90px;
height: 90px;
margin: 8px;
}
.partner-tittle {
font-size: 1rem;
padding: 15px 5px; /* Tighter padding for text on narrow screen */
}
.our-partner-section {
padding: 15px 0; /* CRITICAL FIX: No horizontal padding on this parent */
}
}
/* Media Query for larger screens (min-width: 768px) */
@media (min-width: 768px) {
.inner-container {
width: 150px;
height: 150px;
margin: 20px 30px;
}
}
/*===========================*/
/*start of statistics section*/
/*===========================*/
.statistic-section img{width:100%;max-height:450px;object-fit: cover;display: block;margin-bottom: 0px;}