form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #05005b !important;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   
  
}


label {

    font-size: 16px;

    color: #fcfffe !important;

    margin-bottom: 0px;

    font-weight: bold;

}



input[type="text"], input[type="tel"], input[type="email"], input[type="time"], textarea {

    width: 100%;

    padding: 10px;

    margin-bottom: 15px;

    border: 1px solid #ccc;

    border-radius: 4px;

    font-size: 16px;

    box-sizing: border-box;

    transition: border-color 0.3s;

}



input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="time"]:focus, textarea:focus {

    border-color: #0056b3;

    outline: none;

}



textarea {

    resize: vertical;

    min-height: 100px;

}



button[type="submit"] {

    background-color: #0056b3;

    color: #fff;

    padding: 10px 15px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    font-size: 16px;

    transition: background-color 0.3s;

    width: 100%;

}



button[type="submit"]:hover {

    background-color: #003d80;

}



::placeholder {

    color: #999;

    font-style: italic;

}





/* Reset default styles */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



/* Header styles */

header {

    display: flex !important;

    justify-content: space-between;

    align-items: center;

    padding: 10px 20px;

    background-color: #f8f9fa;

    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

    position: sticky; /* Make header sticky */

    top: 0; /* Stick to the top */

    z-index: 1000; /* Ensure it stays above other content */

}



/* Logo styles */

header a img {

    max-width: 150px;

    height: auto;

    display: block;

}



/* Navigation styles */

.navbar {

    list-style: none;

    display: flex;

    gap: 20px;

    margin: 0;

}



/* Navbar links */

.navbar li a {

    text-decoration: none;

    color: #0056b3;

    font-weight: bold;

    font-size: 16px;

    transition: color 0.3s ease;

}



/* Toggle button styles */

#menu-icon {

    display: none; /* Hidden by default */

    cursor: pointer;

    font-size: 24px; /* Adjust the size as needed */

}



/* Media query for screens up to 768px (mobile) */

@media (max-width: 768px) {

    .navbar {

        display: none; /* Hide navbar by default */

        flex-direction: column; /* Stack items vertically */

        background-color: #f8f9fa; /* Background color */

        position: absolute; /* Positioning */

        top: 60px; /* Below the header */

        left: 0;

        width: 100%; /* Full width */

        padding: 10px 0; /* Padding */

        z-index: 1; /* Ensure it appears above other elements */

    }



    /* Show navbar when active */

    .navbar.active {

        display: flex; /* Show menu */

    }



    /* Show toggle button on small screens */

    #menu-icon {

        display: block; /* Show toggle button */

    }

}



/* Active styles for links */

.navbar li a:hover {

    color: #003d7a; /* Change color on hover */

}





/* About Section Styles */

.about-area {

    padding-top: 52px; /* Top padding */

    padding-bottom: 22px; /* Bottom padding */

    background-color: #e1e8ff; /* Light background color */

}



.about-text {

    padding: 20px; /* Padding around text */

}



.about-text h1 {

    font-size: 36px; /* Main heading size */

    margin-bottom: 20px; /* Spacing below heading */

    color: #333; /* Dark color for contrast */

}



.about-text p {

    font-size: 15px; 

    line-height: 1.6; /* Better readability */

    color: #000000; /* Slightly lighter for text */

    margin-bottom: 15px; /* Spacing below each paragraph */



}

.about-bg {

    position: relative; /* Position for child elements */

    overflow: hidden; /* Hide overflow */

}



.about-bg-main img {

    width: 100%; /* Responsive image */

    border-radius: 8px; /* Slightly rounded corners */

}



.shape-top-1,

.shape-top-2,

.shape-bottom {

    position: absolute; /* Absolutely position shapes */

}



.shape-top-1 {

    top: 20px; /* Position from the top */

    left: 20px; /* Position from the left */

    width: 100px; /* Size of the shape */

}



.shape-top-2 {

    top: 20px; /* Position from the top */

    right: 20px; /* Position from the right */

    width: 100px; /* Size of the shape */

}



.shape-bottom {

    bottom: -30px; /* Position from the bottom */

    left: 50%; /* Center horizontally */

    transform: translateX(-50%); /* Center it */

    width: 150px; /* Size of the shape */

}



/* Responsive Design */

@media (max-width: 768px) {

    .about-text h1 {

        font-size: 28px; /* Smaller heading size for mobile */

    }



    .about-text p {

        font-size: 14px; /* Smaller text size for mobile */

    }



    .shape-top-1, .shape-top-2, .shape-bottom {

        width: 80px; /* Smaller shapes for mobile */

    }

}



.bold {

    font-weight: bold;

}