/* General Styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

h1, h2, h3 {
    margin: 0 0 20px;
    font-weight: normal;
    color: #333;
}

p {
    line-height: 1.6;
}

/* Navbar */
.navbar {
    background-color: #333;
    color: white;
    padding: 15px 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .logo a {
    font-size: 24px;
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.navbar .nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar .nav-links li {
    margin-left: 20px;
}

.navbar .nav-links a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}

.navbar .nav-links a:hover {
    background-color: #575757;
}

/* Hero Section */
.hero-section {
    position: relative; /* Ensure positioning is relative for absolute children */
    color: white;
    text-align: center;
    overflow: hidden; /* Prevent overflow */
}

.banner-img {
    width: 100%; /* Full width for responsiveness */
    height: 454px; /* Adjusted height for the banner image */
    object-fit: cover; /* Maintain aspect ratio without stretching */
    display: block; /* Ensure it behaves like a block element */
}

.hero-text {
    position: absolute; /* Position absolutely to center over the image */
    top: 50%; /* Move down 50% of the parent's height */
    left: 50%; /* Move right 50% of the parent's width */
    transform: translate(-50%, -50%); /* Center it */
    z-index: 1; /* Ensure it appears above the image */
}

/* Overlay for Better Visibility */
.hero-section::before {
    content: ''; /* Empty content for the overlay */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.68); /* Black overlay with 50% opacity */
    z-index: 0; /* Behind the text */
}

.hero-text h1 {
    color: rgb(214, 193, 193);
    font-size: 50px; /* Font size for the main title */
    margin: 0; /* Remove default margin */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Dark shadow for better contrast */
}

.hero-text p {
    color: rgb(233, 225, 225);
    margin: 10px 0; /* Add space above and below the paragraph */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Dark shadow for better contrast */
}

.hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
}

.hero-text button:hover {
    background-color: #555;
    color: white;
}

/* About Section */
.history-section {
    padding: 80px 0;
    text-align: center;
    
}

.history-section p {
    max-width: 800px;
    margin: 0 auto;
    text-align: justify; /* Justify the text */

}

/* Menu Section */
.team-section {
    background-color: #f4f4f4;
    padding: 80px 0;
    text-align: center;
}

.team-section .team-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.team-section .team-item {
    width: 30%;
    margin: 20px 0;
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.team-section .team-item:hover {
    transform: translateY(-10px);
}

.team-section h3 {
    font-size: 24px;
}

/* Contact Section */
.contact-section {
    padding: 80px 0;
    text-align: center;
}

.contact-section form {
    max-width: 600px;
    margin: 0 auto;
}

.contact-section input, .contact-section textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-section .btn {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-section .btn:hover {
    background-color: #575757;
}

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

/*Logo*/

.logo-img {
    height: 40px; /* Adjust this height to fit your navbar */
    width: auto; /* Keep aspect ratio */
}

.navbar .logo {
    display: flex;
    align-items: center; /* Center the logo vertically */
}

.navbar .container {
    display: flex;
    justify-content: space-between; /* Space between logo and links */
    align-items: center;
}