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



.text-content {
    flex: 1;
    padding: 20px;
}

/* Navbar Styles */
/* Navbar Styles */
/* Navbar Styles */


.navbar {
    background-color: white; /* Set header background to white */
    padding: 20px;
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for the header */
    margin-right: 70px; /* You can adjust this as per your requirement */
    width: 100%; /* Ensure navbar takes up full width */
}

.navbar {
    background-color: white; /* Set header background to white */
    padding: 20px;
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for the header */
    margin-right: 70px; /* You can adjust this as per your requirement */
    width: 100%; /* Ensure navbar takes up full width */
    position: fixed; /* Makes the navbar fixed at the top */
    top: 0; /* Position the navbar at the top of the page */
    left: 0; /* Align it to the left */
    z-index: 1000; /* Ensures it stays above other content */
}



.section {
   margin-left: 20px;  
}




.navbar .logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar .logo-img {
    height: 50px; /* Adjust size as per your requirement */
    width: auto;
   
     margin-left: 20px;
    
    /* Optional: Adds space between logo and text */
}

/* Navbar Links Styling */
.navbar .nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin-left: auto; /* Push the navigation links to the right */
}

.navbar .nav-links li a {
    color: black; /* Set text color to black */
    text-decoration: none;
    font-size: 18px;
    padding: 5px 10px;
}

.navbar .nav-links li a:hover {
    background-color: #4CAF50;
    color: white; /* Change text color to white when hovered */
    border-radius: 5px;
}



/* Hero Section Styles */
/* Dark Color Scheme for Hero Section Text */


.cta-btn {
    background-color: #4CAF50; /* Green button background */
    color: #333; /* Dark text color on the button */
    padding: 15px 25px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 5px;
    border: none; /* Remove any borders */
}

.cta-btn:hover {
    background-color: #45a049; /* Darker green on hover */
    color: white; /* White text on hover */
}


.cta-btn {
    background-color: #4CAF50;
    color: white;
    padding: 15px 25px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 5px;
}

.cta-btn:hover {
    background-color: #45a049;
}

/* Image Styling */
.image-content {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}










/* Body and Fonts */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #f5f5f5;
    color: #333;
}

/* Container for Content */
.container {
    width: 80%;
    margin: 0 auto;
}

/* Navbar Styles */


/* Hero Section Styles */
/* Hero Section Styles */
/* Hero Section Styles */
/* Hero Section Styles */
/* Hero Section Styles */
/* Hero Section Styles */
/* Hero Section Styles */
/* Hero Section */
/* Hero Section */
/* Hero Section */
.hero {
    background-color: #003366; /* Dark blue background */
    color: white; /* White text color */
    padding: 10px 20px 20px; /* Add padding on top and bottom */
    text-align: center; /* Center the content */
    position: relative; /* For positioning the pseudo-element */
    margin-left: 40px; /* Longer left side (b) */
    margin-right: 40px; /* Shorter right side (d) */
    overflow: hidden; /* Hide overflow for the curved bottom */
  clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 100% 90%, 0% 100%); 
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%,   0% 100%);
  
 height: auto;
  
}
.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto; /* Center align content */
}

/* Media Query for Mobile Devices */

.text-content {
    flex: 1;
    padding-right: 20px;
}

.hero-heading {
    font-size: 48px; /* Large heading */
    margin-bottom: 20px;
    color: white; /* Ensure heading is white */
}

.hero-subheading {
    font-size: 24px; /* Medium subheading */
    margin-bottom: 10px;
    color: white; /* Ensure subheading is white */
}

.cta-btn {
    background-color: #4CAF50; /* Green button */
    color: white; /* White text on button */
    padding: 15px 25px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 5px;
    display: inline-block;
}

.cta-btn:hover {
    background-color: #45a049; /* Darker green on hover */
}

.image-content {
    flex: 1;
    padding-left: 20px;
}

.hero-image {
    max-width: 100%; /* Ensure image is responsive */
    height: auto;
}
 
 
 
 @media screen and (max-width: 768px) {
     

     .hero {
    background-color: #003366; /* Dark blue background */
    color: white; /* White text color */
    padding: 5px 5px 5px; /* Add padding on top and bottom */
    text-align: center; /* Center the content */
    position: relative; /* For positioning the pseudo-element */
    margin-left: 5px; /* Longer left side (b) */
    margin-right: 5px; /* Shorter right side (d) */
    overflow: hidden; /* Hide overflow for the curved bottom */
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%); /* Corrected duplicate clip-path */
    height: auto; /* Ensures container height adjusts based on content */
    width:100%;
}

     
     
     
     
    .hero-content {
        flex-direction: column; /* Stack the content vertically */
        align-items: center; /* Center the content */
        
        height: auto;
        
    }

    .text-content {
        padding-right: 0; /* Remove padding on mobile */
        text-align: center; /* Center text for better alignment */
        margin-bottom: 20px; /* Add some space below the text */
    }

    .image-content {
        padding-left: 0; /* Remove padding on mobile */
        text-align: center; /* Ensure the image is centered */
        margin-bottom: 3px;
        
        
        
    }

    .hero-image {
        max-width: 90%; /* Ensure image doesn't overflow */
        height: auto; /* Keep image aspect ratio */
         margin-bottom: 55px;
    }
}

 
 
 
 
 
 
 
 
 
 
 
 
 
  
/* Hero Content */


.about h2 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
}

.about-text {
    font-size: 18px;
    text-align: center;
    line-height: 1.6;
}

/* Services Section Styles */
.services {
    padding: 50px 0;
    background-color: #e9e9e9;
}

.services h2 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
}

.service-item {
    margin: 20px 0;
}

.service-item h3 {
    font-size: 28px;
    color: #4CAF50;
}

.service-item p {
    font-size: 18px;
    line-height: 1.6;
}

/* Footer Styles */
/* Facilities Section Styling */
.facilities {
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Make sure the content is stacked vertically */
    height: 100vh; /* Full viewport height */
    background-color: #f4f4f4; /* Light background color */
    text-align: center;
}

.container_ {
    max-width: 1200px;
    width: 100%; /* Full width */
      margin-top: 10px;
       margin-bottom: 10px;
} 

/* Facilities Title in Very Large Font */
.section-title {
    font-size: 75px; /* Very large font for the title */
    color: #003366; /* Dark blue color for the title */
    margin-bottom: 10px; /* Space between title and buttons */
    font-weight: bold; /* Make the title bold */
}

/* Styling the buttons for facilities */

.facilities {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 20px;
}

.facility-buttons {
    display: flex;
    justify-content: space-between; /* Distribute buttons with equal space between them */
    width: 80%; /* Limit the width of the container */
    max-width: 1000px; /* Optional: maximum width of the entire button section */
    margin: 0 auto; /* Center the container */
    gap: 15px; /* Space between buttons */
}

.facility-btn {
    display: flex;
    align-items: center; /* Align icon and text vertically in the middle */
    justify-content: center; /* Center content horizontally */
    background-color: #007bff; /* Blue button color */
    color: white;
    border-radius: 50%; /* Circle button */
    width: 120px; /* Fixed width for the button */
    height: 120px; /* Fixed height for the button */
    text-decoration: none; /* Remove underline */
    font-size: 18px; /* Icon and text size */
    padding: 10px; /* Padding to give some space inside the button */
    text-align: center; /* Ensure text is centered */
    flex-shrink: 0; /* Prevent shrinking */
}

.facility-btn i {
    font-size: 32px; /* Icon size */
    margin-right: 10px; /* Space between icon and text */
}

.facility-btn span {
    font-size: 16px; /* Text size */
    white-space: nowrap; /* Prevent the text from wrapping */
}


.facilities {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Make sure the content is stacked vertically */
    height: 100vh; /* Full viewport height */
    background-color: #f4f4f4; /* Light background color */
    text-align: center;
}

.container_ {
    max-width: 1200px;
    width: 100%; /* Full width */
}

/* Facilities Title in Very Large Font */
.section-title {
    font-size: 75px; /* Very large font for the title */
    color: #003366; /* Dark blue color for the title */
    margin-bottom: 10px; /* Increased space between title and buttons */
    font-weight: bold; /* Make the title bold */
}

/* Styling the buttons for facilities */
.facility-buttons {
    display: flex;
    justify-content: space-between; /* Distribute buttons with equal space between them */
    width: 80%; /* Limit the width of the container */
    max-width: 1000px; /* Optional: maximum width of the entire button section */
    margin: 0 auto; /* Center the container */
    gap: 15px; /* Space between buttons */
}

.facility-btn {
    display: flex;
    align-items: center; /* Align icon and text vertically in the middle */
    justify-content: flex-start; /* Align content to the left (icon will be on the left and text will be to the right) */
    background-color: transparent; /* Remove background color from button */
    color: #007bff; /* Blue color for the text */
    text-decoration: none; /* Remove underline */
    font-size: 18px; /* Icon and text size */
    padding: 10px; /* Padding to give some space inside the button */
    flex-shrink: 0; /* Prevent shrinking */
}

.facility-btn i {
    font-size: 32px; /* Icon size */
    margin-right: 15px; /* Space between icon and text */
    width: 60px; /* Set a fixed width for the icon */
    height: 60px; /* Set a fixed height for the icon */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #007bff; /* Blue background for the icon */
    border-radius: 50%; /* Make it circular */
    color: white; /* Icon color */
}

.facility-btn span {
    font-size: 16px; /* Text size */
    white-space: nowrap; /* Prevent the text from wrapping */
}









.facilities {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Make sure the content is stacked vertically */
    height: 100vh; /* Full viewport height */
    background-color: #f4f4f4; /* Light background color */
    text-align: center;
}

.container {
    max-width: 1200px;
    width: 100%; /* Full width */
      margin-top: 10px;
       margin-bottom: 10px;
    
    
}

/* Facilities Title in Very Large Font */
.section-title {
    font-size: 75px; /* Very large font for the title */
    color: #003366; /* Dark blue color for the title */
    margin-bottom: 10px; /* Increased space between title and buttons */
    font-weight: bold; /* Make the title bold */
}

/* Styling the buttons for facilities */
.facility-buttons {
    display: flex;
    justify-content: space-between; /* Distribute buttons with equal space between them */
    width: 80%; /* Limit the width of the container */
    max-width: 1000px; /* Optional: maximum width of the entire button section */
    margin: 0 auto; /* Center the container */
    gap: 15px; /* Space between buttons */
}

.facility-btn {
    display: flex;
    align-items: center; /* Align icon and text vertically in the middle */
    justify-content: flex-start; /* Align content to the left (icon will be on the left and text will be to the right) */
    background-color: transparent; /* Remove background color from button */
    color: #007bff; /* Blue color for the text */
    text-decoration: none; /* Remove underline */
    font-size: 18px; /* Icon and text size */
    padding: 10px; /* Padding to give some space inside the button */
    flex-shrink: 0; /* Prevent shrinking */
}

.facility-btn i {
    font-size: 32px; /* Icon size */
    margin-right: 15px; /* Space between icon and text */
    width: 60px; /* Set a fixed width for the icon */
    height: 60px; /* Set a fixed height for the icon */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #007bff; /* Blue background for the icon */
    border-radius: 50%; /* Make it circular */
    color: white; /* Icon color */
    line-height: 0; /* Ensure there's no extra space around the icon */
    min-width: 60px; /* Ensure the width is not smaller than 60px */
    min-height: 60px; /* Ensure the height is not smaller than 60px */
}

.facility-btn span {
    font-size: 16px; /* Text size */
    white-space: nowrap; /* Prevent the text from wrapping */
}










footer {
    background-color: #003366; /* Dark background */
    color: white; /* White text */
    padding: 20px 0;
}

.footer-left {
    display: flex;
    flex-direction: column; /* Stack <p> tags vertically */
    align-items: flex-start; /* Align to the left */
    gap: 10px; /* Provide space between <p> elements */
}

.footer-left p {
    margin: 0; /* Remove any default margin */
    font-size: 14px;
    display: flex;
    align-items: center; /* Align icon and text */
}

.footer-left i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 16px; /* Icon size */
}

.footer-left a {
    color: white;
    text-decoration: none;
}

.footer-left a:hover {
    text-decoration: underline;
}

.footer-right {
    display: flex;
    justify-content: flex-end;
    gap: 15px; /* Space between icons */
    margin-top: 20px;
}

.social-icon {
    color: white;
    font-size: 24px; /* Icon size */
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.social-icon:hover {
    color: #007bff; /* Change color on hover */
}

.container_ {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .footer-left {
        text-align: center;
    }

    .footer-right {
        justify-content: center;
        margin-top: 15px;
    }
}

.box-container {
    display: flex;
    flex-wrap: wrap; /* Ensure images wrap on smaller screens */
    justify-content: space-around; /* Distribute images evenly */
    margin-bottom: 2px; /* Space between image sections */
    
}

.box-half {
    width: 48%; /* Ensures each image takes about half of the container width */
    margin: 10px 0; /* Adds spacing between images */
    text-align: center; /* Centers the text below the images */
 
}

.box-half img {
    width: 120px; /* Set image width to 120px */
    display: block;
    margin: 0 auto; /* Center the images */
       background-color: #007bff;
    
    
}

.box-half p {
    font-size: 13px;
    color: blue;
    margin-top: 10px; /* Adds spacing between the image and the text */
}


/* General Layout for the section */
.honored-people-container {
    padding: 10px 10px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Section title style */
.section-title {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

/* Gallery Container */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Space between items */
    margin-bottom: 10px;
}

/* Honored Person (image and text) */
.honored-person {
    background-color: #f9f9f9;
       background-color: blue;
    
    border-radius: 10px;
    padding: 20px;
    width: 240px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

/* Image style */
.honored-person img {
    width: 120px; /* Set image size */
    height: 120px; /* Set image size */
    border-radius: 50%;
    margin-bottom: 15px; /* Space between image and text */
    border: 2px solid #007bff;
}

/* Person's name and title */
.honored-person p {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
}

/* Hover effect */
.honored-person:hover {
    transform: translateY(-5px); /* Slight upward movement */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .image-gallery {
        flex-direction: column; /* Stack the images vertically on small screens */
    }

    .honored-person {
        width: 80%; /* Allow for more space on small screens */
    }
}

/* Apply margin to a specific section */
.section {
  margin-top: 2px;  /* Set top margin */
  margin-bottom: 2px; /* Set bottom margin */
}
.div {
    
    margin-top: 2px;  /* Set top margin */
  margin-bottom: 2px; /* Set bottom margin */
    
}