html {
    scroll-behavior: smooth;
}
body {
    background: #F8F9FA !important;
    font-family: 'Oswald', sans-serif !important;
    margin: 0;
    padding: 70px 0 0 0;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

/* .container {
    max-width: 1536px;
} */
/* ------------------------------MEDIA QUERIES SECTION-------------------------------- */
@media (max-width: 3000px) {
    .container {
        max-width: 1280
    }
    /* --------Carousel Section-------- */
    .carousel {
        overflow: hidden !important;
    }
    .carousel-caption {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .carousel-logo {
        max-width: 250px !important;
    }
    .carousel-title {
        font-size: 3rem !important;
    }
}

@media (max-width: 1920px) {
    .container {
        max-width: 1280
    }
    /* --------Carousel Section-------- */
    .carousel-caption {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .carousel-logo {
        max-width: 250px !important;
    }
    .carousel-title {
        font-size: 3rem !important;
    }
}

@media (max-width: 1440px) {
    .container {
        max-width: 1280px;
    }
    /* --------Carousel Section-------- */
    .carousel {
        height: 90vh !important;
    }
    .carousel-caption {
        top: 40% !important;
        transform: translateY(-40%) !important;
    }
    .carousel-caption .carousel-logo {
        width: 25vw !important;
        max-width: 250px !important;
    }
    .carousel-title {
        font-size: 2.5rem !important;
    }
    /* --------Carousel End------------- */
    /* --------Calendar Section-------- */
    #calendar {
        padding: 10px;
    }
}

@media (max-width: 1280px) {
    .container {
        max-width: 1024px;
    }
    /* --------Carousel Section-------- */
    .carousel-caption {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .carousel-caption .carousel-logo {
        width: 40vw !important;
        max-width: 250px !important;
    }
    .carousel-caption h1 {
        font-size: 3rem !important;
    }
}

@media (max-width: 1024px) and (min-height: 800px) {
    /* --------Carousel Section-------- */
    .carousel {
        height: 70vh !important;
    }
    .carousel-caption {
        top: 45% !important;
        transform: translateY(-45%) !important;
    }
    .carousel-caption .carousel-logo {
        width: 50vw !important;
        max-width: 250px !important;
    }
}

@media (max-width: 1024px) and (max-height: 800px) {
    /* --------Carousel Section-------- */
    .carousel {
        height: 90vh !important;
    }
    .carousel-caption {
        top: 40% !important;
        transform: translateY(-40%) !important;
    }
    .carousel-caption .carousel-logo {
        width: 40vw !important;
        max-width: 250px !important;
    }
    .carousel-caption h1 {
        font-size: 2rem !important;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 640px;
    }
    /* --------Carousel Section-------- */
    .carousel {
        height: 70vh !important;
    }
    .carousel-caption {
        top: 45% !important;
        transform: translateY(-45%) !important;
        padding: 0 10px !important;
    }
    .carousel-caption .carousel-logo {
        width: 50vw !important;
    }
    .carousel-caption h1 {
        font-size: 2rem !important;
    }
}

@media (max-width: 640px) {
    .container {
        max-width: 475px;
    }
    /* --------Carousel Section-------- */
    .carousel {
        height: 90vh !important;
    }
    .carousel-caption {
        top: 30% !important;
        transform: translateY(-30%) !important;
    }
    .carousel-caption .carousel-logo {
        width: 40vw !important;
    }
}

@media (max-width: 475px) {
    .container {
        width: 100%;
    }
    /* --------Carousel Section-------- */
    .carousel {
        height: 90vh !important;
    }
    .carousel-caption {
        top: 40% !important;
        transform: translateY(-40%) !important;
    }
    .carousel-caption .carousel-logo {
        width: 45vw !important;
    }
    .carousel-caption h1 {
        font-size: 1.5rem !important;
        padding: 0 5px !important;
    }
}
/* --------------------------------MEDIA QUERIES END-------------------------------- */
/* -----------------------------NAVIGATION SECTION-------------------------- */
.nav {
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.5) !important;
    z-index: 1000 !important;
}
.nav-link {
    color: #D98641 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    letter-spacing: 1%;
    transition: transform 0.2s ease, color 0.2s ease
}

.nav-link:hover {
    color: #6b401c;
    transform: scale(1.10);
}
/* -------------------------------NAVIGATION END------------------------------ */
/* -------------------------------FOOTER SECTION------------------------------- */
.footer {
    margin-top: -75px;
}
.main-footer h1 {
    font-size: 1.5rem;
}
.main-footer h5 {
    font-size: 1rem; 
    font-weight: 400;
}
.main-footer p {
    font-family: 'Open Sans', 'sans-serif';
    font-size: 0.875rem; 
    font-weight: 400;
}
.main-footer .bi {
    color: #f8b966;
}
.sub-footer {
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 0;
    padding: 0;
}
.sub-footer p {
    font-family: 'Open Sans', 'sans-serif';
    margin: 0;
    color: #d98641;
    font-size: 1rem;
    font-weight: 400;
}
/* -------------------------------FOOTER SECTION---------------------------------- */
/* -------------------------------SCROLL TO TOP BUTTON----------------------- */
#scrollTopBtn {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    z-index: 9999;
    border-radius: 50%;
    border: none;
    background-color:  #6F833F;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#scrollTopBtn:hover {
    background-color: #3c4821;
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
/* -------------------------------SCROLL TO TOP BUTTON----------------------- */
/* -----------------------------CAROUSEL SECTION------------------------------- */
.carousel {
    position: relative;
}

.carousel-img {
    height: 90vh;
    opacity: 0.7;
    object-fit: cover;
    filter: brightness(50%);
}

.carousel-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }

.carousel-caption .carousel-logo {
    max-width: 300px;
    height: auto;
    margin-bottom: 15px;
}

.carousel-caption h1 {
    font-size: 3.125rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    margin: 0;
    line-height: 1.2;
}
.carousel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: brightness(90%);
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 0;
}
/* ----------------------------------CAROUSEL END------------------------------------ */
/* ----------------------------------READ MORE SECTION------------------------------------ */
.read-more h2 {
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    margin: 0;
    line-height: 1.2;
    z-index: 1;
    position: relative;
}
.read-more img {
    max-width: 100%;
    height: auto;
}
.read-more p {
    font-family: 'Open Sans', 'sans-serif';
    line-height: 200%;
    letter-spacing: 15%;
    z-index: 1;
    position: relative;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}
.read-more .btn {
    background-color: #6F833F;
    font-family: 'Open Sans', 'sans-serif';
    border: #6F833F;
    letter-spacing: 1%;
    transition: transform 0.2s ease, color 0.2s ease;
    z-index: 1;
    position: relative;
}
.read-more .btn:hover {
    background-color: #2d3718;
    transform: scale(1.05);
}
.read-more::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(217, 134, 65, 0.7);
    z-index: 0;
}
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: 0.8s ease-out;
  }
.animate-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}
.zoom-in {
  transform: scale(0.8);
}
/* ----------------------------------READ MORE END------------------------------------ */

/*------------------------------------HOME EVENTS SECTION START-------------------------------*/
.home-events {
    color: #F8F9FA;
    height: 70vh auto;
    position: relative;
}
.home-events::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(111, 131, 63, 0.6);
    z-index: 0;
}
.sample-events {
    z-index: 5 !important;
    position: relative !important;
}
.vm-events {
    z-index: 1;
    position: relative;
}
.vm-events button {
    background-color: #D98641 !important;
    font-family: 'Open Sans', 'sans-serif' !important;
    border: none !important;
    letter-spacing: 1% !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
    max-width: 200px;
    width: auto;
    display: inline-block;
}
.vm-events button:hover {
    background-color: #6b401c !important;
    transform: scale(1.05) !important;
}

.event-box {
    max-width: 100%;
}

/* Day container styling */
.day-container {
    width: 50px; /* or a percentage if you want it fluid */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 20%;
}

/* Button styling */
#event-button {
    margin-top: 20px;
}
/*------------------------------------HOME EVENTS SECTION END-------------------------------*/
/* ------------------------------MISSION AND VISION BOX START--------------------------------- */
.mission-vision {
    color: #F8F9FA;
    height: 70vh auto;
    position: relative;
}
.mission-vision::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(217, 134, 65, 0.7), rgba(111, 131, 63, 0.7),rgba(134,110,93,0.7));
    z-index: 0;
}
.mission-vision p {
    font-family: 'Open Sans', 'sans-serif';
    line-height: 200%;
    letter-spacing: 15%;
    z-index: 1;
    position: relative;
}
.mv-box {
    background-color: rgba(217, 134, 65, 0.7);
    z-index: 1;
    position: relative;
    min-height: 250px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
/* ------------------------------MISSION AND VISION BOX END--------------------------------- */
/* ------------------------------OTHER PROGRAMS--------------------------------- */
.programs {
    color: #F8F9FA;
    height: 70vh auto;
    position: relative;
}
.programs::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(217, 134, 65, 0.8);
    z-index: 0;
}
.program-box {
    z-index: 1;
    position: relative;
}
.program-box ul {
    list-style-type: none;
    margin: 0;
}

.program-box li {
    font-family: 'Open Sans', 'sans-serif';
    line-height: 2;
    letter-spacing: 0.5px;
    color: #F8F9FA;
    display: flex;
    align-items: center;
}

.program-box li i {
    color: #F8F9FA;
    margin-right: 8px;
    font-size: 1rem;
}
/* ------------------------------OTHER PROGRAMS END--------------------------------- */
/* ------------------------------HOME VOLUNTEER APPLICATION SECTION START--------------------------------- */
.application-preview {
    color: #F8F9FA;
    height: 80vh;
    min-height: auto;
    position: relative;
}
.application-preview-box {
    z-index: 1;
    position: relative;
}
.application-preview-box p {
    line-height: 200%;
    letter-spacing: 15%;
    z-index: 1;
    position: relative;
}
.application-preview button  {
    background-color: #6F833F;
    font-family: 'Open Sans', 'sans-serif';
    border: none;
    letter-spacing: 1%;
    transition: transform 0.2s ease, color 0.2s ease;
    z-index: 1;
    position: relative;
}
.application-preview button:hover {
    background-color: #2d3718;
    transform: scale(1.05);
}
/* ------------------------------HOME VOLUNTEER APPLICATION SECTION END--------------------------------- */
/*---------------------------------------SIGN-IN SECTION START----------------------------------------------*/
#signinDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
}
.divSignIn{
    display: flex; 
    align-items: center; 
    flex-direction: column; 
    justify-content: center; 
    width: 50%;
}
.signinWelcome {
    white-space: pre-line;
    color: #d98641;
    font-size: 50px;
    font-family: Poppins;
    font-weight: 800;
    line-height: 50px;
}

.custom-input {
    width: 336.20px;
    height: 61.47px;
    background: white;
    border-radius: 6.87px;
    border: 1.03px #d98641 solid;
    margin-top: 25px;
    margin: 0 auto;
    gap: 10px;
}

.custom-input legend {
    text-align: justify;
    color: #6F833F;
    font-size: 21.42px;
    font-weight: 500;
    line-height: 25.85px;
    letter-spacing: 0.21px;
    word-wrap: break-word;
}

.custom-input input {
    border: none;
    outline: none;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

#logIn {
    width: 130px;
    height: 47px;
    background: rgba(219, 103, 42, 0);
    box-shadow: 0px 0.85px 0.85px rgba(0, 0, 0, 0.25);
    border-radius: 29.19px;
    border: 1.03px #6F833F solid;
    color: #6F833F;
    font-size: 22.31px;
    font-weight: 500;
    letter-spacing: 0.22px;
    word-wrap: break-word;
    display: block;
    margin: 0 auto;
}

#logIn:hover {
    background: #6F833F;
    color: white;
}

.forgotpass {
    text-align: center;
    color: #D31D33;
    font-size: 19.92px;
    font-family: Poppins;
    font-weight: 500;
    line-height: 25.85px;
    letter-spacing: 0.20px;
    word-wrap: break-word;
}

.signUpStyle {
    color: #6F833F;
    font-family: Poppins;
    font-size: 19.92px;
    font-weight: 500;
    text-decoration: none;
}

.bannertextSign {
    color: #d98641;
    font-size: 19.92px;
    font-family: Poppins;
    font-weight: 500;
    line-height: 25.85px;
    letter-spacing: 0.20px;
    word-wrap: break-word;
}

/*---------------------------------------RESPONSIVE DESIGN----------------------------------------------*/
@media (max-width: 1024px) {
    #signinDiv {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #signinDiv > div {
        width: 90%;
    }
    .divSignIn{
        width: 80%;
    }
    .signinWelcome {
        font-size: 40px;
        line-height: 45px;
    }

    .custom-input {
        width: 80%;
    }

    #logIn {
        width: 50%;
    }

    .bannerImg {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .signinWelcome {
        font-size: 30px;
        line-height: 35px;
    }
    .divSignIn{
        width: 80%;
    }
    .custom-input legend {
        font-size: 18px;
    }

    .forgotpass,
    .bannertextSign {
        font-size: 16px;
    }
    .signUpStyle {
        font-size: 16px;
    }
    #logIn {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .signinWelcome {
        font-size: 24px;
        line-height: 28px;
        text-align: center;
    }
    .divSignIn{
        width: 80%;
    }
    .custom-input {
        width: 80%;
    }
    .signUpStyle {
        font-size: 16px;
    }
    .custom-input legend {
        font-size: 16px;
    }

    #logIn {
        width: 50%;
        font-size: 16px;
    }

    .bannerImg {
        width: 100%;
        height: auto;
    }
}

/*---------------------------------------SIGN-IN SECTION END----------------------------------------------*/
/* Styling for Event Items */
#eventItems {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    margin-top: 50px;
}

.event-box {
    width: 335px;
    height: 348.7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}

.event-box img {
    height: 50%;
}
.day-container {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f2f2f2;
    box-shadow:  2px 4px rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-top-left-radius: 0px;
}

.event-info {
    text-align: center;
    padding: 10px;
}

#event-button {
    margin: 0 auto;
    margin-top: 50px;
    width: 279.798px;
    height: 35px;
    display: block;
    justify-content: center;
    border-radius: 17.597px;
    background: #D98641 ;
    border: #D98641 ;
    color: #FEFEFE;
    text-shadow: 0px 3.519px 3.519px rgba(0, 0, 0, 0.25);
    font-size: 17.597px;
    font-style: normal;
    font-weight: 600;  
}

/*---------------------------------------APPLICATION FORM SECTION START----------------------------------------------*/
#app-bg {
    background: url(Images/app-bg.png) lightgray -1177.951px -4227.618px / 293.56% 415.875% no-repeat;
}

.app-form-btn {
    width: 100%;
    max-width: 250px; /* Make the button wider */
    height: 50px;
    border-radius: 25px; /* Rounded corners */
    background: #6F833F;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    color: #FFF;
    font-size: 17px;
    font-weight: 600;
    display: block;
    margin: 20px auto;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.3s, transform 0.2s; /* Smooth transition effects */
}

.app-form-btn:hover {
    background: #2d3718;
    transform: scale(1.05);
}

#form {
    margin-top: 20px; 
    padding: 20px; 
}

#form h1 {
    color: #d98641;
    text-align: center;
    font-size: 25px;
    font-weight: 800;
}

.form-container {
    border-radius: 15px;
    background: rgba(217, 217, 217, 0.40);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    width: 60%;
    margin: 0 auto;
    padding: 30px;
}

.form-container h2 {
    color: #d98641;
    font-size: 24px; /* Slightly smaller than the main heading */
    font-weight: 600;
    margin-bottom: 15px;
}

/* Input field styling */
.form-container input[type="text"], 
.form-container input[type="tel"], 
.form-container input[type="email"],
.form-container select,
.form-container textarea {
    width: 90%;
    padding: 5px;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc; /* Light border */
    margin-bottom: 15px;
    font-size: 16px;
    transition: border-color 0.3s; /* Smooth border transition */
}

.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
    border-color: #AB2695; /* Highlight on focus */
    outline: none; /* Remove default outline */
}

/* Responsive layout */
.grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between columns */
}

.grid-row div {
    flex: 1;
    min-width: 220px; /* Minimum width for small screens */
}

/* Required field indication */
.required {
    color: red; /* Red color for required fields */
}

/* Error and success messages */
.alert {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}
/* Tab Navigation */
.tabs {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #866e5d;
    margin-bottom: 20px;
}

.tabs li {
    cursor: pointer;
    padding: 10px 15px;
    border: 2px solid transparent; /* Border for inactive tabs */
    border-bottom: none; /* No border at the bottom */
    transition: background 0.3s, border 0.3s;
}

.tabs li:hover {
    background-color: rgba(171, 38, 149, 0.1); /* Light hover effect */
}

.tabs li.active {
    background-color: #d98641; /* Active tab background */
    color: #FFF; /* White text for active tab */
    border-color: #d98641; /* Border color for active tab */
}

/* Tab Content */
.tab-contents {
    display: none; /* Hide all tab content by default */
}

.tab-contents.active {
    display: block; /* Show active tab content */
}

/* ==== Responsive Breakpoints ==== */

/* Tablets and small laptops */
@media (max-width: 768px) {
  .form-container {
    width: 90%;
    padding: 20px;
  }

  /* Stack the tabs instead of row */
  .tabs {
    flex-direction: column;
    align-items: stretch;
  }
  .tabs li {
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
  }

  /* Each grid “row” becomes a column */
  .grid-row {
    flex-direction: column;
  }
  .grid-row div {
    min-width: 100%;
  }
}

/* Phones and very small screens */
@media (max-width: 480px) {
  #form h1 {
    font-size: 1.5em;
  }
  .tabs li {
    font-size: 0.9em;
    padding: 8px 12px;
  }
  .form-container h2 {
    font-size: 1.2em;
  }
  .form-container input,
  .form-container select,
  .form-container textarea {
    font-size: 14px;
    padding: 8px;
    width: 100%;
  }
  .app-form-btn {
    max-width: 100%;
    font-size: 16px;
  }
}
/*---------------------------------------APPLICATION FORM SECTION END----------------------------------------------*/
/*------------------------------------ABOUT SECTION START-------------------------------------------*/
.main-about {
    color: #F8F9FA;
    height: 100vh;
    height: auto;
    position: relative;
}
.main-about img {
    z-index: 1;
    position: relative;
}
.main-about p {
    font-family: 'Open Sans', 'sans-serif';
    line-height: 200%;
    letter-spacing: 15%;
    z-index: 1;
    position: relative;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}
.main-about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: brightness(80%);
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 0;
}
.sub-about {
    height: 100vh;
    height: auto;
    z-index: 1;
    position: relative;
    color: #D98641;
}
.sub-about-content {
    z-index: 1;
    position: relative;
}
.sub-about-content h2 {
    font-family: 'Oswald', 'sans-serif';
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}
.sub-about-content img {
    margin-top: -50px;
}
/*------------------------------------ABOUT SECTION END-------------------------------------------*/
/*------------------------------------GALLERY SECTION START-------------------------------------------*/
#gallery-bg{
    background-image: url('/images/gallery-bg.png');
    background-size: 100%;
}
.search-bar {
    display: flex;
    align-items: center;
    border-radius: 30px;
    background: rgba(171, 38, 149, 0.12);
    width: 300px;
    height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
}

.search-icon {
    width: 30px;
    height: 30px;
    margin-right: 20px;
}

.search-input {
    border: none;
    background: transparent;
    font-size: 18px;
    outline: none;
    width: 100%;
    height: 60px; /* Adjust the height to match the search bar */
    padding: 0 20px;
    box-sizing: border-box;
}

.search-input::placeholder {
    color: #AB2695;
    font-weight: 500;
}

.gallery h1 {
    color: #D98641;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
}
#gallery-images {
    width: 260.144px;
    height: 221.714px;
    border-radius: 29.562px;
    background:  lightgray 50% / cover no-repeat;
}
/*------------------------------------GALLERY SECTION END-------------------------------------------*/

/* CreateEvent.html START*/
.back-arrow {
    position: absolute;
    top: 60px;
    left: 100px;
    transform: translateY(-50%);
    cursor: pointer;
}

.back-arrow svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #AB2695;
    stroke-width: 2;
}
.form-event {
    background: rgba(217, 217, 217, 0.40);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    width: 40%;
    margin: 0 auto;
    padding: 15px;
    justify-content: center;
}
.form-event h3 {
    color: #AB2695;
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}
.form-event textarea {
    width: 80%;
    height: 80px;
    justify-content: left;
}
.form-event label {
    color: #AB2695;
    text-align: justify;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
}
.form-event input[type="submit"]{
    width: 135.185px;
    height: 33px;
    border-radius: 32.616px;
    border: 1.151px solid #AB2695;
    background: #AB2695;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: #FFF;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: block;
    margin-left: 37%;
}
.form-event input[type="text"]{
    width: 60%;
    height: 40px;
    border-radius: 11.289px;
    border: 1.129px solid #AB2695;
    background: #F2F2F2;
    margin-bottom: 10px;
}
/* CreateEvent.html END*/

/* Admin Profile Page */
.profileH1 {
    color: #CF803E;
    text-align: center;
    font-size: 2em;
    font-style: normal;
    font-weight: 800;
    margin-top: 10px;
    margin-bottom: 10px;
}
.profileName{
    color: white;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
}
#profile{
    width: 90%; 
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}
.profilediv {
    width: 30%; 
    border-radius: 8.342px 0px 0px 8.342px;
    background: #DA8641;  
    padding: 20px;
    box-shadow: 4px 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.upload-picture{
    width: 200.189px;
    height: 40px;
    border-radius: 11.403px;
    border: 1.14px solid #AB2695;
    background: #F2F2F2;
    color: #AB2695;
    text-align: center;
    text-shadow: 0px 4.561px 4.561px rgba(0, 0, 0, 0.25);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}
.edit-button{
    width: 166px;
    height: 40px;
    border-radius: 5.403px;
    border: 1.14px solid #D98641;
    background: #F2F2F2;
    color: #D98641;
    text-align: center;
    text-shadow: 0px 4.561px 4.561px rgba(0, 0, 0, 0.25);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-left: 67%;
}

.save-button, .cancel-button {
    width: 166px;
    height: 40px;
    border-radius: 11.403px;
    border: 1.14px solid #D98641;
    background: #D98641; /* Matching the border color of the edit button */
    color: #F2F2F2; /* Inverted the text and background color */
    text-align: center;
    text-shadow: 0px 4.561px 4.561px rgba(0, 0, 0, 0.25);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-left: 67%; /* Slightly adjust margins */
    margin-top: 10px; /* Adds spacing from the form */
    cursor: pointer;
}

.save-button:hover, .cancel-button:hover {
    background: #f28dc6; /* Slightly lighter pink for hover effect */
    color: #ffffff; /* White text on hover */
}

.save-button:active, .cancel-button:active {
    background: #d2188f; /* Darker pink for active state */
}
.profile-form {
    margin-bottom: 40px;
}

.profile-form input[type="text"],
.profile-input input[type="email"],
.profile-form input[type="password"] {
    width: 90%;
    height: 40px;
    border-radius: 5.289px;
    border: 1.129px solid #D98641;
    background: #F2F2F2;
    margin-bottom: 10px;
    padding: 5px;
    color: rgba(0, 0, 0, 0.25);
}

.profile-form .grid-row{
    display: grid;
    grid-template-columns: 3fr 3fr;
    gap: 20px;   
}
.profile-form .grid-row label {
    color: #D98641;
    text-align: justify;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
}
.profile-form input[type="submit"] {
    display: none; /* Hide submit buttons initially */
}

.profile-form.editing input[type="submit"] {
    display: inline; /* Show submit buttons in editing mode */
}

.cancel-button {
    display: none; /* Hide cancel button initially */
}

.profile-form.editing .cancel-button {
    display: inline; /* Show cancel button in editing mode */
}
.sign-out-button {
    background: #6f833f;
    border: #6f833f;
    color: white;
    border-radius: 10px;
    padding: 10px;
}
.sign-out-button:hover {
    background: #8a9f59;
    border: #8a9f59;
    color: white;
}

 /* Logout container styling: full width, positioned above profile form */
 .logout-container {
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
}
.profile-details {
    width: 60%;
    padding: 40px;
    background-color: #FFF;
    margin: 0 auto;
}
/* Additional responsive adjustments if needed */
@media (max-width: 768px) {
    #profile {
        flex-direction: column;
    }
    .profilediv, .profile-details {
        width: 100%;
        margin-bottom: 20px;
    }
    .edit-button, .save-button, .cancel-button {
        margin-left: 0;
    }
    .profile-form input[type="text"],
    .profile-input input[type="email"],
    .profile-form input[type="password"] {
        width: 95%;  /* Increase width on small screens */
        padding: 8px; /* Slightly increase padding for better touch usability */
        font-size: 14px; /* Adjust font size if needed */
    }
    .profile-details {
        width: 90%;
        padding: 20px;
    }
}
/* Admin Profile Page END*/


/* Notification Volunteer START*/
#notification {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 50%;
    height: 500px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
}
.notif-volunteer h2 {
    color: #AB2695;
    text-align: justify;
    font-family: Poppins;
    font-size: 20.106px;
    font-style: normal;
    font-weight: 700;
}
.notif-volunteer {
    display: flex ;
    flex-direction: row ;
    justify-content: space-between;     
}

#search-icon {
    width: 39.966px; /* Adjust width */
    height: 38.431px; /* Adjust height */
    cursor: pointer; /* Indicate it's clickable */
    transition: fill 0.3s ease; /* Smooth color transition */
}

#search-icon:hover {
    fill: #8C1D76; 
}


.search-container {
    display: flex;
    align-items: center;
    position: relative;
}


.search-field {
    display: none; /* Initially hidden */
    margin-left: 10px;
    padding: 5px;
    border: 1px solid #AB2695; /* Border color */
    border-radius: 4px;
    font-size: 16px;
    transition: width 0.3s ease; 
}


.search-field.show {
    display: block;
    width: 200px; 
}

.notif-notif {
    width: 80%;
    height: 5%;
    border-radius: 15px;
    background: rgba(211, 32, 58, 0.20);
    margin: 0 auto;
    display: flex;
    padding: 10px;
    margin-bottom: 15px;
    align-items: center;
    
}
.notif-item .card:hover {  
    background: rgba(87, 84, 85, 0.35);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.notif-desc {
    color: #AB2695;
    text-align: justify;
    font-family: Poppins;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    margin-left: 5%;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    #notification {
        width: 90%;
    }
    #search-field {
        width: 100%;
    }
    .notif-icon {
        width: 30px;
        height: 30px;
    }
    .notif-desc {
        font-size: 13px;
    }
    .notif-time {
        font-size: 11px;
    }
}
/* Notification Volunteer END */

/* Admin View Membership Application START */
#view-application{
    height: 70%;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 115px;
    
}
.application-view {
    display: flex ;
    flex-direction: row ;
    justify-content: space-between;  
}
.application-view h2 {
    color: #AB2695;
    text-align: justify;
    font-family: Poppins;
    font-size: 20.106px;
    font-style: normal;
    font-weight: 700;
}


.applicants-name {
    width: 300px;
    height: 10%;
}

.applicants-name button {
    width: 100%;
    color: #AB2695;
    font-family: Poppins;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(171, 38, 149, 0.25);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 25px;
}

.applicants-name button:focus {
    outline: none;
}

.applicants-name button:hover {
    text-decoration: underline;
}

.applicants-details {
    width: 70%;
    /* display: none; Start hidden */
    width: 723px;
    height: 546px;
    border-radius: 5px;
    background: #F4F0F0;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 5px;
    transition: max-height 0.3s ease;
    overflow: hidden;
    
}

#for-applicants{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.applicants {
    display: flex;
    flex-direction: column;
    
}
.applicants-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.applicants-details li {
    margin-bottom: 10px;
}

/* Admin View Membership Application END */

/* ---------------------------------CALENDAR SECTION----------------------------------- */
#calendar {   
    width: 80% !important;
    margin: 30px auto !important;
    background-color: #f8f9fa !important; 
    border-radius: 10px !important; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) !important; 
}

.fc-toolbar .fc-button {
    background-color: #d98641 !important;
    border-color: #d98641 !important;
    color: white !important;
}

.fc-toolbar .fc-button:hover,
.fc-toolbar .fc-button:focus {
    background-color: #b87432 !important;
    border-color: #b87432 !important;
}

.fc-toolbar .fc-button.fc-button-active {
    background-color: #a9602b !important;
    border-color: #a9602b !important;
}

#calendar .fc .fc-button {
    background-color: #d98641 !important;
    border-color: #d98641 !important;
    color: white !important;
}

.fc-toolbar-title {
    color: #866e5d;
}

.fc-scrollgrid-sync-inner a {
    color: #6f833f;
}

/* ---------------------------------CALENDAR SECTION----------------------------------- */

/* Responsiveness */

@media (max-width: 768px) {
    .nav-text {
        display: none;
    }
}   

/* Responsiveness End */

/* Event Dashboard START */
.btn-create{
    background-color: #d98641 !important;
    border-color: #d98641 !important;
    color: white !important;
}

.btn-create:hover{
    background-color: #b87432 !important;
    border-color: #b87432 !important;
}
/* Event Dashboard END */

/* MESSAGES PAGE START */
#messages {
    display: flex;
    flex-direction: row;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.recepient-name, .group-message {
    width: 100%;
    height: 65px;
    border-radius: 5px;
    background: #F8F8F8;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    align-items: center;
}
.group-message:hover, .recepient-name:hover {
    background: #F4F0F0;
}
.recepient-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}
.recepient-name{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.message-recepient{
    width: 30%; 
    border-right: 1px solid #ddd; 
    /* border-radius: 13.655px;  */
    border-top-left-radius: 13.655px;
    border-bottom-left-radius: 13.655px;
    padding: 20px;
    background:#F4DBC6;
}
.message-recepient h2 {
    color: #AB2695;
    text-align: justify;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}
.message-recepient h3 {
    color: #DA8641;
    text-align: justify;
    font-family: Poppins;
    font-size: 12.794px;
    font-style: normal;
    font-weight: 700;
}
.recepient {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recepient-name p {
    color: rgba(0, 0, 0, 0.25);
    text-align: justify;
    font-family: Poppins;
    font-size: 12.794px;
    font-style: normal;
    font-weight: 400;
}

.message-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 546px;
    border-radius: 5px;
    border-top-right-radius: 13.655px;
    border-bottom-right-radius: 13.655px;
    padding: 5px;
    width: 70%; 
    background-color: #fff; 
    padding: 20px; 
}
.svg-button {
    width: 53px;
    height: 53px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" fill="none"><g filter="url(%23filter0_d_923_1292)"><path d="M48.5193 5.11574C49.6173 2.07845 46.6741 -0.864801 43.6368 0.23574L6.51575 13.6608C3.46829 14.7639 3.09975 18.9221 5.90321 20.5462L17.7525 27.4062L28.3334 16.8252C28.8128 16.3622 29.4548 16.106 30.1212 16.1118C30.7876 16.1176 31.4251 16.3849 31.8964 16.8562C32.3676 17.3274 32.6349 17.9649 32.6407 18.6313C32.6465 19.2977 32.3903 19.9398 31.9273 20.4191L21.3464 31.0001L28.2089 42.8493C29.8305 45.6528 33.9886 45.2817 35.0917 42.2368L48.5193 5.11574Z" fill="%23BD2382"/></g><defs><filter id="filter0_d_923_1292" x="0" y="0" width="52.7539" height="52.752" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_923_1292"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_923_1292" result="shape"/></filter></defs></svg>') no-repeat center center;
    background-size: cover;
    border: none;
    cursor: pointer;
}

.svg-button:focus {
    outline: none;
}
.message-header {
    padding-top: 5px;
}
.message-send {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
}
.message-send form, .message-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.message-input input[type='text']{
    border-radius: 10px;
    background: #F5E0E2;
    box-shadow: 0px 2.434px 2.434px 0px rgba(0, 0, 0, 0.25);
    width:100%;
    height: 50px;
    margin-right: 5px;
}
#message-form {
    width: 100%;
}
.message-text{
    border-radius: 20px;
    background: #F5E0E2;
    box-shadow: 0px 2.434px 2.434px 0px rgba(0, 0, 0, 0.25);
    width: fit-content;
    height: 50px;
    padding: 10px;
}

/* New message body and bubble styles */
.message-body {
    display: flex;
    flex-direction: column-reverse; /* Newest message at the bottom */
    gap: 10px;
    padding: 5px;
}

.message {
    display: flex;
    margin-bottom: 10px;
}

/* Styles for received messages */
.message-received {
    margin-right: auto;
}

.message-received .message-box {
    background-color: #F8F8F8;
    color: #777;
    border-radius: 10px;
    padding: 10px;
    max-width: 100%;
}

/* Styles for sent messages */
.message-sent {
    margin-left: auto;
}

.message-sent .message-box {
    background-color: #AB2695;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    max-width: 100%;
}

/* Message bubble styling */
.message-bubble {
    word-wrap: break-word;
    position: relative;
}

.message-bubble small {
    font-size: 12px;
    color: #aaa;
    position: absolute;
    bottom: -15px;
    right: 5px;
}

/* Responsive styles */
@media (max-width: 768px) {
    #messages {
        flex-direction: column;
        width: 95%;
    }
    .message-recepient {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    .message-content {
        width: 100%;
        height: auto;
    }
    .message-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between; 
        height: 546px;
        border-radius: 5px;
        border-top-right-radius: 13.655px;
        border-bottom-right-radius: 13.655px;
        background-color: #fff;
        padding: 5px;
        width: 100%; 
        padding: 20px;    
    }
}
/* MESSAGES PAGE END */