/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* Navbar styling */
.navbar {
    background-color: rgb(230, 214, 139); /* Make the background transparent */
    color: #620505; /* Change the text color to black */
    position: sticky;
    top: 0;
    width: 100%;
    padding: 15px 30px; /* Increase padding for a modern look */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow for a more modern feel */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

.navbar .logo {
    display: flex; /* Flexbox to align logo and text horizontally */
    align-items: center; /* Align items vertically */
    padding: 10px 20px; /* Add padding for spacing and background effect */
    border-radius: 5px; /* Rounded corners for the logo box */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border 0.3s ease; /* Smooth hover transitions */
    border: 2px solid transparent; /* Default transparent border */
}

/* Logo image styling */
.navbar .logo img {
    height: 50px; /* Adjust logo size */
    margin-right: 10px; /* Space between logo image and organization name */
    transition: transform 0.3s ease; /* Smooth transition for scale on hover */
}

/* Organization name styling */
.navbar .organization-name {
    font-size: 22px; /* Adjust text size */
    font-weight: 600; /* Make text bold for better visibility */
    text-transform: uppercase; /* Make text uppercase for a modern look */
    letter-spacing: 1px; /* Slight spacing between letters */
}

/* Hover effect on the logo (image + text) */
.navbar .logo:hover {
    transform: translateY(-5px); /* Lift the logo slightly on hover */
    box-shadow: 3px 6px 12px rgb(190, 96, 94); /* Subtle shadow effect shifted to the side with new color */
    background-color: rgb(212, 186, 177); /* Darker warm background when hovered */
    border: 2px solid #003366; /* Dark blue border around the logo box */
}

/* Hover effect on the logo image */
.navbar .logo img:hover {
    transform: scale(1.1); /* Slightly scale up the logo on hover */
}

/* Hover effect on the organization name */
.navbar .organization-name:hover {
    color: #003366; /* Change text color to dark blue on hover */
}

/* Navbar links styling */
.navbar ul {
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    margin-right: 20px; /* Space from the right edge */
}

.navbar li {
    margin: 0 20px; /* Increased spacing between nav items */
    transition: transform 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; /* Smooth effect for hover */
    position: relative; /* Needed for absolute positioning of the hover effect */
}

/* Styling for the anchor tags (links) */
.navbar a {
    color: #620505; /* Black text color for links */
    text-decoration: none;
    font-size: 16px;
    font-weight: bold; /* Make text slightly bolder */
    text-transform: uppercase; /* Make text uppercase for a modern look */
    letter-spacing: 1px; /* Slight spacing between letters */
    transition: color 0.3s ease, padding 0.3s ease; /* Smooth color transition */
    display: block; /* Ensure the box around the link covers the entire area */
    padding: 10px 10px; /* Add padding for the hover effect */
    border-radius: 5px; /* Rounded corners for the link */
}

/* Hover effect on the navbar link */
.navbar a:hover {
    color: #003366; /* Dark blue color when hovered */
    text-decoration: underline; /* Underline on hover for better interaction */
}

/* 3D box effect when hovering over the nav items */
.navbar li:hover {
    transform: translateY(-5px); /* Lift the nav item slightly on hover */
    box-shadow: 3px 6px 12px rgb(190, 96, 94); /* Subtle shadow effect shifted to the side with new color */
}

/* Create a box effect around the link */
.navbar li:hover a {
    background-color: rgb(212, 186, 177); /* Updated background color on hover */
    border: 2px solid #003366; /* Dark blue border around the box */
    padding: 12px 25px; /* Increase padding to make the box feel more prominent */
}

/* Add a slight color background when the navbar is scrolled */
.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.9); /* Light background when scrolling */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Increase shadow for a more pronounced effect */
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
    .navbar {
        flex-direction: column; /* Stack items vertically */
        padding: 10px; /* Adjust padding */
    }
    
    .navbar .logo {
        margin-bottom: 15px; /* Add spacing between logo and nav items */
    }
    
    .navbar ul {
        flex-direction: column; /* Stack nav items vertically */
        width: 100%; /* Ensure nav items take up full width */
        padding: 0; /* Remove extra padding */
    }
    
    .navbar li {
        margin: 10px 0; /* Add spacing between each nav item */
    }

    .navbar a {
        padding: 10px; /* Adjust padding for links */
    }
    
    .navbar .organization-name {
        font-size: 18px; /* Adjust text size */
    }
}

/* Ensure the logo and nav items are centered on mobile */
@media screen and (max-width: 480px) {
    .navbar {
        align-items: center; /* Center items vertically */
        text-align: center; /* Center text */
    }
    
    .navbar .logo,
    .navbar ul {
        justify-content: center; /* Center items horizontally */
    }
    
    .navbar a {
        padding: 8px; /* Adjust padding */
        font-size: 14px; /* Adjust font size */
    }
}

/*------------------------------------------- End of Nvarbar -------------------------------*/

/* Welcome Section with Background Image */
.welcome {
    height: 150vh;  /* Full viewport height */
    width: 100%;
    background-image: url('Images/Welcome_1.PNG'); /* Set the background image */
    background-size: cover;  /* Ensure the entire image fits */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat;  /* Prevent repeating the image */
    background-color: #f4f4f4;  /* Set a fallback background color */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
    text-align: center;
    color: #620505; /* 620505 brown; Keep the text white for contrast */
    z-index: 1; /* Ensure content is above the image */
}

.welcome-text {
    position: relative;
    z-index: 1;
}

.welcome-text h1 {
    font-size: 50px;
    margin-bottom: 10px;
}

.welcome-text p {
    font-size: 24px;
    font-family: 'Georgia', serif; /* Elegant serif font */
}

/* General Section Styles with Gradient */
.section {
    padding: 120px;
    text-align: center;
    margin-top: 10px;
    background: linear-gradient(to bottom, rgb(230, 214, 139), rgba(133, 119, 82, 0.97)); /* Gradient transition */
}

.section h2 {
    font-size: 40px;
    text-align: center;
    margin-bottom: 20px;
    color: #620505;
    font-family: 'Georgia', serif; /* Elegant serif font */
}

.section p {
    font-size: 20px;
    margin-bottom: 20px;
    color: #620505;
}

/* Special Welcome Paragraph Styling */
.special-welcome {
    font-size: 40px; /* Adjust size to make it a bit larger for readability */
    font-family: 'Georgia', serif; /* Elegant serif font */
    font-weight: 100; /* Bold for emphasis */
    color: white; /* Text color */
    line-height: 1.6; /* Set line spacing for better readability */
    margin-top: 40px; /* Add space between the previous section */
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); /* Subtle text shadow to make the text stand out */
    padding-top: 50px; /* Reduce padding for better layout */
    max-width: 800px; /* Limit the width for better readability */
    margin-left: auto;
    margin-right: auto; /* Center the paragraph */
    text-align: justify; /* Justify the text to make it more professional */
    letter-spacing: 0.5px; /* Slight letter spacing for better readability */
    word-wrap: break-word; /* Ensure text doesn't overflow in small containers */
    padding-left: 20px; /* Padding to ensure text doesn't touch the sides */
    padding-right: 20px; /* Padding for consistency */
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
    .welcome {
        height: auto; /* Adjust height to auto for better mobile layout */
        padding-top: 20px;
        text-align: center;
    }
    
    .welcome-text h1 {
        font-size: 32px; /* Adjust font size */
    }
    
    .welcome-text p {
        font-size: 18px; /* Adjust font size */
    }
    
    .section {
        padding: 60px 20px; /* Adjust padding for mobile */
    }
    
    .section h2 {
        font-size: 28px; /* Adjust font size */
    }
    
    .section p {
        font-size: 16px; /* Adjust font size */
    }
    
    .special-welcome {
        font-size: 24px; /* Adjust font size */
        padding: 20px; /* Adjust padding */
        line-height: 1.4; /* Adjust line height */
    }
}

/* Further adjustments for very small screens */
@media screen and (max-width: 480px) {
    .welcome-text h1 {
        font-size: 28px; /* Further adjust font size */
    }
    
    .welcome-text p {
        font-size: 16px; /* Further adjust font size */
    }
    
    .section h2 {
        font-size: 24px; /* Further adjust font size */
    }
    
    .special-welcome {
        font-size: 20px; /* Further adjust font size */
        padding: 15px; /* Further adjust padding */
    }
}




/*-------------------------------------------------------------- End of Welcome Section---------------------------------------------*/
.section {
    display: block; /* Ensure sections are displayed */
    padding: 20px; /* Add padding for better visibility */
}

@media (max-width: 600px) {
    .section {
        padding: 10px; /* Adjust padding for mobile */
        font-size: 14px; /* Adjust font size for readability */
    }
}

#donation {
    z-index: 1; /* Ensure it has a higher z-index if necessary */
    position: relative; /* Ensure proper stacking context */
}


/*
 Form Styles for Donation Section 
#donation form {
    background-color: rgba(184, 90, 90, 0.3); /* The last parameter sets the transparency
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgb(222, 202, 151);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

#donation label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    text-align: left;
}

#donation input,
#donation select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

#donation button {
    padding: 12px 20px;
    font-size: 18px;
    background-color: rgb(230, 214, 139);
    border: none;
    border-radius: 25px 25px;
    color: black;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#donation button:hover {
    background-color: rgb(5, 154, 174); /* Color change on hover/
}

/* Media query for mobile devices 
@media screen and (max-width: 768px) {
    #donation form {
        padding: 20px; /* Adjust padding for mobile 
        max-width: 100%; /* Ensure form takes full width 
    }
    
    #donation label {
        font-size: 14px; /* Adjust font size for mobile 
    }
    
    #donation input,
    #donation select {
        padding: 10px; /* Adjust padding for inputs 
        font-size: 14px; /* Adjust font size for mobile 
    }
    
    #donation button {
        padding: 10px 16px; /* Adjust padding for button 
        font-size: 16px; /* Adjust font size for mobile 
    }
}

/* Further adjustments for very small screens 
@media screen and (max-width: 480px) {
    #donation form {
        padding: 15px; /* Further adjust padding for very small screens 
    }
    
    #donation label {
        font-size: 12px; /* Further adjust font size 
    }
    
    #donation input,
    #donation select {
        padding: 8px; /* Further adjust padding 
        font-size: 12px; /* Further adjust font size 
    }
    
    #donation button {
        padding: 8px 12px; /* Further adjust padding 
        font-size: 14px; /* Further adjust font size 
    }
}
*/
/*-------------------------------------------------------------- End of Donation Section---------------------------------------------*/


/* Form Styles for Donation Section */
#contact form {
    background-color: rgba(184, 90, 90, 0.3); /* The last parameter sets the transparency */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgb(222, 202, 151);
    padding: 30px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

#contact  label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    text-align: left;
}

#contact input,
#contact select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

#contact button {
    padding: 12px 20px;
    font-size: 18px;
    background-color: rgb(230, 214, 139);
    border: none;
    border-radius: 25px 25px;
    color: black;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#contact button:hover {
    background-color: rgb(5, 154, 174); /* Color change on hover */
}

/* Make the comments box wider and more prominent */
#contact textarea {
    width: 100%;  /* Full width */
    padding: 15px; /* Slightly more padding for a larger feel */
    font-size: 16px; /* Same font size */
    height: 200px;  /* Adjust height to make it bigger */
    resize: vertical; /* Allow vertical resizing */
}

/* Form Styles for signup Section */
#signup form {
    background-color: rgba(184, 90, 90, 0.3); /* The last parameter sets the transparency */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgb(222, 202, 151);
    padding: 30px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

#signup  label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    text-align: left;
}

#signup input,
#signup select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

#signup button {
    padding: 12px 20px;
    font-size: 18px;
    background-color: rgb(230, 214, 139);
    border: none;
    border-radius: 25px 25px;
    color: black;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#signup button:hover {
    background-color: rgb(5, 154, 174); /* Color change on hover */
}

/* Make the comments box wider and more prominent */
#signup textarea {
    width: 100%;  /* Full width */
    padding: 15px; /* Slightly more padding for a larger feel */
    font-size: 16px; /* Same font size */
    height: 200px;  /* Adjust height to make it bigger */
    resize: vertical; /* Allow vertical resizing */
}

/* Projects Container */
.projects-container {
    display: flex;
    justify-content: space-between; /* Align the boxes side by side */
    gap: 20px; /* Space between the slider and the paragraph */
    margin-top: 30px; /* Space from the previous section */
}

/* Slider Box */
.slider-box {
    flex: 1; /* Makes the slider box take up remaining space */
    max-width: 48%; /* Control the maximum width of the slider */
}

/* Paragraph Box */
.paragraph-box {
    flex: 1; /* Makes the paragraph box take up remaining space */
    max-width: 48%; /* Control the maximum width of the paragraph */
    background-color: transparent#f4f4f4; /* Light background color for contrast */
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}

/* Slider Styling */
.slider-container {
    position: relative;
    width: 100%;
    text-align: center;
}

#sliderImage {
    width: 100%;
    height: auto;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.slider-text {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

#slicerButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#prevButton {
    left: 10px;
}

#nextButton {
    right: 10px;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Paragraph Box Styling */
.paragraph-box p {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    text-align: center;
    margin-top: 20px;
    background: linear-gradient(to bottom, rgb(230, 214, 139), rgb(96, 133, 82)); /* Gradient transition */

}
#----------------------------------
/* Style for the calendar section */
.calendar-section {
    display: flex;
    flex-direction: column; /* Adjust direction for better mobile display */
    justify-content: center; /* Center the content */
    padding: 10px; /* Reduce padding for mobile devices */
    background: linear-gradient(to right, #f4f4f4, #eaeaea);
}




/* Style for each calendar frame */
.calendar-frame {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px; /* Reduce padding for mobile devices */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 15px; /* Adjust margin for better spacing on mobile devices */
}

.calendar-frame:hover {
    transform: translateY(-10px);
    background-color: rgba(184, 90, 90, 0.5); 
    transition: background-color 0.3s;
}

.calendar-frame h2 {
    font-size: 20px; /* Reduce font size for mobile devices */
    margin-bottom: 8px; /* Adjust margin */
    color: rgba(184, 90, 90);
    font-family: 'Arial', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

/* Style for the tables inside the frames */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
    table-layout: fixed; /* Ensure all columns are displayed */
}

table th, table td {
    padding: 8px; /* Reduce padding for mobile devices */
    border: 1px solid #ddd;
    text-align: left;
}

table th {
    background-color: rgba(184, 90, 90, 0.3);
    color: #555;
}

table td {
    background-color: #ffffff;
}

table tr:hover {
    background-color: rgba(184, 90, 90, 0.5);
   
}

.special-row-table {
    background-color: rgba(184, 90, 90, 0.5) !important;
    
}


/* Media query for smaller screens */
@media (max-width: 600px) {
    .calendar-section {
        padding: 5px;
    }

    .calendar-frame {
        padding: 10px;
        margin-bottom: 10px;
    }

    .calendar-frame h2 {
        font-size: 6px;
    }

    table th, table td {
        padding: 6px;
        font-size: 6px; /* Reduce font size for better fit on small screens */
    }

    table {
        font-size: 6px; /* Adjust font size for better readability */
        word-wrap: break-word; /* Ensure text wraps properly */
    }
}

#-----------------------------------------





/* Footer Styling */
#footer {
    background-color: rgb(230, 214, 139); /* Same as the nav bar background color */
    text-align: center;
    padding: 10px 0;
    color: black; /* Text color */
    font-size: 14px;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); /* Optional: subtle shadow effect */
}




#footer p {
    margin: 0;
}



/* Section Styling