/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f4f8; /* Light background for contrast */
    color: #333; /* Default text color */
    line-height: 1.6; /* Improved readability */
}

/* Header Styles */
header {
    background-color: #2c3e50; /* Dark blue background */
    color: #ecf0f1; /* Light text color */
    padding: 20px; /* Increased padding for better spacing */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    position: sticky; /* Sticky header */
    top: 0; /* Stick to the top */
    z-index: 1000; /* Ensure it stays above other content */
}

/* Navigation Styles */
nav {
    background-color: #34495e; /* Slightly lighter background for navigation */
    display: flex;
    justify-content: center; /* Center navigation items */
    padding: 10px 0; /* Padding for navigation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for navigation */
}

nav a {
    margin: 0 20px; /* Horizontal margin for spacing */
    color: #ecf0f1; /* Light text color */
    text-decoration: none;
    font-weight: bold; /* Bold text for emphasis */
    transition: color 0.3s, transform 0.3s; /* Smooth color and transform transition */
    position: relative; /* For pseudo-element */
}

nav a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #1abc9c; /* Teal underline */
    transition: width 0.3s; /* Smooth underline transition */
    position: absolute;
    bottom: -5px; /* Position below text */
    left: 50%; /* Center it */
    transform: translateX(-50%); /* Center it */
}

nav a:hover {
    color: #1abc9c; /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
}

nav a:hover::after {
    width: 100%; /* Expand underline on hover */
}

/* Hero Section Styles */
.hero {
    text-align: center;
    padding: 80px; /* Increased padding for a spacious feel */
    background: linear-gradient(135deg, #3498db, #2ecc71); /* Gradient background */
    color: #ffffff; /* White text color */
    position: relative; /* For absolute positioning of overlay */
    overflow: hidden; /* Hide overflow for animations */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3); /* Dark overlay for better text visibility */
    z-index: 1; /* Place behind text */
}

.hero h1 {
    font-size: 3.5em; /* Larger heading */
    margin-bottom: 20px; /* Space below heading */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for depth */
}

.hero img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Rounded corners for images */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow for images */
    z-index: 2; /* Place above overlay */
    transition: transform 0.3s; /* Smooth scaling */
}

.hero img:hover {
    transform: scale(1.05); /* Scale up on hover */
}

/* Gallery Styles */
.gallery {
    display: flex;
    justify-content: center;
    background-color: #e8f6f3; /* Light teal background */
    color: #333; /* Dark text color */
    flex-wrap: wrap;
    padding:  40px; /* Added padding for spacing */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.gallery img {
    margin: 10px;
    width: 300px;
    height: auto;
    border-radius: 10px; /* Rounded corners for images */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth scaling and shadow transition */
}

.gallery img:hover {
    transform: scale(1.1); /* Scale up on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Shadow effect on hover */
}

/* Details and Contact Form Styles */
.details, .contact-form {
    padding: 30px;
    text-align: center;
    background-color: #f9fbe7; /* Light yellow background */
    border-radius: 10px; /* Rounded corners */
    margin: 20px; /* Margin for spacing */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s; /* Smooth transform transition */
}

.details:hover, .contact-form:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

/* Details Image */
.details img {
    margin: 0;
    width: 400px;
    height: auto;
    border-radius: 10px; /* Rounded corners for images */
    transition: transform 0.3s; /* Smooth scaling */
}

.details img:hover {
    transform: scale(1.1); /* Scale up on hover */
}

/* Contact Form Styles */
.contact-form form {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
}

.contact-form input, .contact-form textarea {
    margin-bottom: 15px; /* Increased margin for better spacing */
    padding: 15px; /* Increased padding for comfort */
    font-size: 16px;
    border: 1px solid #ccc; /* Light border for inputs */
    border-radius: 5px; /* Rounded corners for inputs */
    transition: border-color 0.3s; /* Smooth border color transition */
}

.contact-form input:focus, .contact-form textarea:focus {
    border-color: #1abc9c; /* Change border color on focus */
    outline: none; /* Remove default outline */
}

.contact-form button {
    padding: 15px;
    background-color: #1abc9c; /* Teal background */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 5px; /* Rounded corners for button */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s; /* Smooth background color and transform transition */
}

.contact-form button:hover {
    background-color: #16a085; /* Darker teal on hover */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

/* Footer Styles */
footer {
    background-color: #2c3e50; /* Dark blue background */
    color: #ecf0f1; /* Light text color */
    text-align: center;
    padding: 20px; /* Padding for spacing */
    position: relative; /* Positioning for footer */
    bottom: 0; /* Stick to the bottom */
    width: 100%; /* Full width */
    transition: background-color 0.3s; /* Smooth background transition */
}

footer:hover {
    background-color: #34495e; /* Slightly lighter on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .gallery {
        flex-direction: column; /* Stack images vertically on smaller screens */
        align-items: center; /* Center align images */
    }

    .gallery img {
        width: 90%; /* Full width on smaller screens */
    }

    .contact-form {
        padding: 20px; /* Adjust padding for smaller screens */
    }
}

/* Animation Styles */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hero, .gallery, .details, .contact-form {
    animation: fadeIn 1s ease-in; /* Fade-in effect for sections */
}