@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

body{
    margin: 0;
}


/* Global Styles */




/* Section Styles */
.section-buttons {
    background-image: url('img/background.jpg'); /* Replace with your background image */
    background-size: cover;
    background-position: center;
    padding: 100px 20px;
    position: relative;
}

.section-buttons::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 92, 54, 0.8); /* Green overlay with transparency */
    z-index: 1;
}

.section-heading {
    font-size: 3rem;
    color: #fff;
    z-index: 2;
    position: relative;
}

.section-subheading {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 40px;
    z-index: 2;
    position: relative;
}

/* Button Styles */
.button-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    z-index: 2;
    position: relative;
}

.custom-button {
    padding: 15px 30px;
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.vocational {
    background-color: #0A5C36;
    box-shadow: 0 5px 15px rgba(10, 92, 54, 0.4);
}

.manufacturing {
    background-color: #314961;
    box-shadow: 0 5px 15px rgba(49, 73, 95, 0.4);
}

.custom-button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.custom-button:active {
    transform: scale(0.95);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .button-container {
        flex-direction: column;
        gap: 20px;
    }

    .custom-button {
        width: 100%;
    }

    .section-heading {
        font-size: 2.5rem;
    }
}




/* Heading */
.heading h2{
    font-size: 18px;
    font-weight: 500;
    border-left: 8px solid blue;
    padding: 5px 15px;
    margin-bottom: 15px;
}
.heading h3{
    font-size: 18px;
    
}
.heading p{
    font-size: 14px;
}
.heading p span{
    font-weight: 400;
    color: blue;
}




/* Dropdown Menu Styling */
.nav-item .dropdown-menu {
    background-color: #fff; 
    border: none; /* Remove border */
}

.nav-item .dropdown-item {
    color:  #0A5C36   ; 
}

/* .nav-item .dropdown-item:hover {
    background-color: #e0f7f4; 
} */

/* Ensure no outline on dropdown */
.nav-item .dropdown-item:focus, .nav-item .dropdown-item:hover {
    outline: none;
}

/* Buttons */
.btn1{
    font-size: 0.5rem;
    font-weight: 400;
    background-color: blue;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none !important;
    transition: all 0.5s;
}
.btn1:hover{
    background-color: #e6edff;
    color: #303054;
}

/* Header */
header{
    /* background-color: #0A5C36; */
    background-color: #fff ;
    width: 100%;
    
}




header .navbar-brand{
    font-size: 15px;
    font-weight: 600;
    /* color: #fff; */
    color: #0A5C36 !important;
    
}
.nav .nav-item {
    font-size: 22px;
    font-weight: 600;
    /* color: #fff;
    
    background-color: #0A5C36; */
    color: #0A5C36; /* Sets the text color to green */
    background-color: transparent; /* Removes the background color */
}
.navbar-dark .navbar-nav .nav-link {
    font-size: 16px;
    /* font-weight: 600; */
    color: #0A5C36 !important; 
    /* color: #fff; */
}
nav{
    padding: 8px 2px !important;
}
.navbar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns the logo and text to the left */
    padding-left: 0; /* Removes any padding that may push the content right */
}

.navbar-brand img {
    
    max-width: 50px; /* Adjust the size as needed */
    height: auto;
    
    margin-right: 10px; /* Space between image and text */
    margin-left: 0; /* Ensure the logo starts at the left */
}



  
/* Logo adjustments for left and right logos */
.logo-left {
    max-height: 50px; /* Adjust this height according to your needs */
    margin-right: 10px;
}

.logo-right {
    max-height: 50px; /* Adjust this height according to your needs */
    margin-left: 10px;
}

.right-logo-container {
    position: relative;
}

/* Ensure that the right logo and the toggler icon align properly in responsive view */
@media (max-width: 992px) {
    .right-logo-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* Adjust the position of the right logo */
    .logo-right {
        order: 2; /* Place it after the navbar-toggler */
        margin-right: 10px; /* Add some spacing */
    }

    /* Adjust the position of the navbar-toggler */
    .navbar-toggler {
        order: 1; /* Place it before the right logo */
        margin-left: auto;
    }
}

/* Optional: Further customization to the navbar toggler icon for better visibility */
/* .navbar-toggler {
    color: #0A5C36 !important;
} */
/* Remove default background image */
.navbar-toggler-icon {
    background: white;
}

/* Use a custom SVG for the toggler icon with green lines */
.navbar-toggler {
    border: none; /* Remove any border if present */
}

.navbar-toggler-icon {
    width: 1.5rem; /* Adjust width as needed */
    height: 1.5rem; /* Adjust height as needed */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='%230A5C36' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}



    












/* Dropdown item color */
.navbar .nav-item .dropdown-item {
    color: #0A5C36; /* Green color for the text */
    background-color: transparent; /* Transparent background for no outline */
}

/* Optional: Remove background on hover and add padding */
.navbar .nav-item .dropdown-item:hover {
    /* color: rgb(49, 49, 95);  */
    color: rgb(49, 49, 95); 
    text-decoration: none; /* Remove underline on hover */
}

/* Optional: Remove border if needed */
.navbar .nav-item .dropdown-menu {
    border: none; /* Remove border from the dropdown menu */
}








.home-sec{
    
    padding-top: 100px;
}

.home-sec .home-content p{
    font-size: 14px;
    margin-bottom: 30px;
}

.carousel-item img {
    height: 400px; /* Adjust the height as needed */
    width: 100%;
    object-fit: cover; 
    
    
}



.home-sec .home-content{
    align-items: center;
    padding: 150px 0;
}

/* Flip Box Container */

.info-section {
    display: flex;
    
    flex-wrap: wrap;  
    padding: 5px;
}

.flip-box {
    background-color: transparent;
    width: 62%;
    height: 150px;
    perspective: 1000px;
    margin: 15px 65px;
    gap:3px;
    box-sizing: border-box;
    

    
}

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
    transform: rotateX(180deg);
    
}
.info-icon {
    width: 50px;  
    height: auto; 
    display: block;
    margin: 0 auto 10px; 
}

.flip-box h3 {
    margin-top: 10px;
    font-size: 1.0rem;
}


.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    padding: 20px;
}



/* .flip-box-front {
    background-color: #0A5C36;
} */

.flip-box-front {
    
    background: url('../img/info.png') no-repeat center center/cover;
    position: absolute;
}
.flip-box-front::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 92, 54, 0.9); /* Green transparency with 70% opacity */
    z-index: 1;
}
.flip-box-front .box-content {
    position: relative;
    z-index: 2;
}
.flip-box-back {
    background-color: rgb(49, 49, 95);
    transform: rotateX(180deg);
     z-index: 2;
}



.flip-button {
    background-color: white;
    color: #0A5C36;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

.flip-button:hover {
    
    color: rgb(49, 49, 95);
    /* color:white; */
}

/* Company Intro Section */
.company-intro {
    padding: 40px 0;
}

.company-intro h2 {
    font-size: 26px;
    color: #0A5C36;
    text-align: left;
    margin-bottom: 10px;
}
.highlighted-text {
    font-weight: bold;
    font-size: 18px; /* Larger size for 'KCDC' */
    color: #0A5C36; /* Optional: Change the color if needed */
}
.border-line {
    width: 100%; /* Adjust this width to your desired line length */
    height: 4px;
    background-color: #0A5C36;
    margin-bottom: 20px;
}

.company-intro p {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
}

/* KCDC Excellence Section */
.kcdc-excellence {
    padding: 50px 0;
    background-color: #fff;
}

.excellence-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.video-icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    
}

.excellence-header h2 {
    font-size: 28px;
    color: #0A5C36;
    font-weight: bold;
}

.video-wrapper {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.video-thumbnail {
    background-image: url('../img/thumbnail.png'); /* Replace with your thumbnail */
    background-size: cover;
    background-position: center;
    height: 200px; /* Small rectangle size */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
}

/* .play-button {
    font-size: 20px;
    color: #0A5C36;
    background-color: #fff;
    padding: 10px;
    border-radius: 20%;
    transition: background-color 0.3s ease;
} */

.play-button {
    font-size: 14px; /* Adjust font size for the play icon */
    color: #0A5C36; /* Play icon color */
    background-color: #fff;
    padding: 5px 20px; /* Adjust padding to create a small rectangle */
    border-radius: 5px; /* Slightly rounded corners */
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

.play-button:hover {
    background-color: rgba(255, 255, 255, 1); /* Darken background on hover */
}

.play-button:hover {
    /* background-color: rgba(255, 255, 255, 1); */
    background-color: #0A5C36;
    color:#fff;
}

.video-title-thumbnail {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

.video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    width: 80%;
    max-width: 800px;
    margin: 50px auto;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #000;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.video-title-modal {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #0A5C36;
    margin-bottom: 15px;
}

video {
    width: 100%;
    height: auto;
    border-radius: 10px;
}


/* Stats Section */
.stats-section {
    position: relative;
    background-image: url('../img/stats.png');
    background-size: cover;
    background-position: center;
    height: 300px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 20px;
}
.represent-section {
    position: relative;
    background-image: url('../img/stats.png');
    background-size: cover;
    background-position: center;
    height: 300px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-bottom: 20px;
}

.stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 255, 0.349);  */
    background-color:rgb(49, 49, 95, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.container.text-center {
    position: relative;
    z-index: 2; /* Ensure text is above the overlay */
}
.represent-section .container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px; /* Adjust this if needed */
    gap: 100px;
}
.stat-item {
    margin: 20px 0;
    text-align: center;
    
}
.represent-section .stat-item {
    margin-left: 200px;
    text-align: center;
    
}
.stats-icon {
    width: 60px;  /* Adjust the size of your icons */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto 10px; /* Center the icon and add spacing */
}

.stats-box h3 {
    margin-top: 5px;
    font-size: 36px;
}



.stat-item h1 {
    font-size: 48px;
    margin: 0;
    color: white;
}
.stat-item h1 {
    transition: all 0.1s ease-in-out;
}

.stat-item p {
    margin: 0;
    font-size: 24px;
    color: white;
}

.stats-section .stats-title {
    position: absolute;
    
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}


.stats-section .stats-title h2 {
    margin-bottom: 2px;
    font-size: 22px;
    /* font-weight: bold; */
}

.represent-section .stats-title {
    position: absolute;
    top: 25px; /* Position it at the top */
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.represent-section .stats-title h2 {
    margin-top: 0; /* Remove top margin */
    margin-bottom: 20px; /* Adjust bottom margin for spacing */
    font-size: 22px;
    /* Optional adjustments */
    
    text-align: center; /* Center the text */
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .stat-item h1 {
        font-size: 36px;
    }

    .stat-item p {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .stats-section {
        height: auto;
        padding: 40px 0;
    }
    .represent-section {
        height: auto;
        padding: 40px 0;
    }

    .stat-item h1 {
        font-size: 28px;
    }

    .stat-item p {
        font-size: 16px;
    }
    .represent-section .stat-item {
        margin: 20px;
        text-align: center;
        
    }
}

.partners-list {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Adjust gap between each partner */
}

.partner-item {
    display: flex;
    align-items: center;
}

.partner-item a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000; /* Adjust this color as needed */
}

.partner-item img {
    height: 50px; /* Set the height for a smaller, icon-sized logo */
    width: auto; /* Maintain the aspect ratio */
    margin-right: 10px; /* Adjust space between the logo and text */
}


.partner-item a:hover {
    color: rgb(49, 49, 95, 0.8); /* Change color on hover */
}

.partner-item a:hover img {
    transform: scale(1.05); /* Slight zoom effect on hover */
    transition: transform 0.3s ease;
}

.cert-list {
    list-style: none;
    padding: 0;
    font-size: 18px;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.cert-list li {
    padding: 10px 0;
    color: #333;
    position: relative;
    padding-left: 30px;
    border-bottom: 1px solid #ddd;
}
.cert-list li img {
    width: 60px; /* Adjust logo width */
    height: auto; /* Maintain aspect ratio */
    margin-right: 15px; /* Space between logo and text */
}

/* Custom bullet points */
.cert-list li:before {
    content: "\2022"; /* Unicode for bullet point */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #0A5C36; /* Custom green color */
}
/* About section */
.about-sec{
    /* padding: 150px 0; */
    padding-top: 150px;
    background-color: transparent;
}



.about-sec  p{
    font-size: 18px;
    text-align: justify;
}


.about-sec .buttons {
    /* width: 350px; */
    text-align: center ;
    margin-top: 40px;
    
}

.work-section {
    /* padding: 100px 0 50px 0;  Add extra padding at the top to clear the navbar */
    padding: 150px 0;
    /* background-color: #f9f9f9; */
}

.heading {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #0A5C36;
}

.heading-underline {
    width: 80px;
    height: 4px;
    background-color: #0A5C36;
    margin: 10px auto 30px;
}

.work-content {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    max-width: 900px;
    margin: 0 auto;
}

.work-content h2 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #0A5C36;
    text-align: left;
}

.work-list {
    padding-left: 20px;
    list-style: none;
}

.work-list li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.work-list li:before {
    content: "\2022"; /* Bullet symbol */
    color: #0A5C36;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* General Section Styling */
.female-courses {
    padding: 100px 0; /* More padding to avoid navbar overlap */
    background-color: #f9f9f9;
}

.heading {
    text-align: center;
    font-size: 20px;
    color: #2e8b57;
    font-weight: bold;
    margin-bottom: 20px;
}

.heading-underline {
    width: 80px;
    height: 4px;
    background-color: #2e8b57;
    margin: 0 auto 40px;
}

/* Ensure section isn't hidden behind the navbar */
#female-courses {
    scroll-margin-top: 100px;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Course Category Styling */
.course-category {
    margin-bottom: 50px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.category-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

/* Course List */
.course-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.course-list li {
    background-color: #f2f2f2;
    padding: 10px 15px;
    font-size: 18px;
    color: #555;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.course-list li:hover {
    /* background-color: #2e8b57; */
    background-color: rgb(49, 49, 95, 0.8);
    color: #fff;
    transform: translateY(-3px);
}

/* Responsive Design: Two courses per row for smaller screens */
@media screen and (max-width: 768px) {
    .course-list {
        grid-template-columns: repeat(2, 1fr); /* Two courses per row */
    }

    .course-list li {
        width: 100%; /* Ensures two courses fit properly */
    }
    .category-title {
        font-size: 18px;
        
    }
}

/* Typography */
/* h2, h1, li {
    font-family: 'Arial', sans-serif;
} */


/* General Styles */
.green {
    color: #0A5C36;
}



/* Heading Styles */
/* .heading {
    font-size: 2.5em;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
} */

.heading-underline {
    width: 100%;
    height: 2px;
    background-color: #0A5C36; /* Green color for the underline */
    margin-bottom: 20px;
}

/* Motto Styles */
.motto {
    font-size: 1.8em;
    text-align: center;
    font-weight: 500;
    margin-bottom: 30px; /* Adds spacing between the motto and the next section */
    color: #303054;
}
.media-heading {
    font-size: 1.5em;
    text-align: left;
    font-weight: bold;
    margin: 30px; /* Adds spacing between the motto and the next section */
    color: #303054;
}

/* Sub-heading and Content Styles */
.sub-heading {
    font-size: 1.6em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.content {
    font-size: 1.1em;
    line-height: 1.6;
}

/* Bullet Point Styles */
ul, ol {
    margin-left: 20px; /* Adjust margin to ensure bullets are visible */
    padding-left: 20px; /* Add padding to create space for the bullets */
}

li {
    margin-bottom: 10px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .heading {
        font-size: 2em;
    }
    
    .motto {
        font-size: 1.5em;
    }
    
    .sub-heading {
        font-size: 1.4em;
    }
    
    .content {
        font-size: 1em;
    }

    ul, ol {
        margin-left: 15px; /* Reduce margin for smaller screens */
        padding-left: 15px; /* Adjust padding for responsive layout */
    }
    
    li {
        margin-bottom: 8px;
    }
}
/* Structure Section */
.structure-description {
    margin: 20px 0;
    text-align: center;
}

.structure-description p {
    font-size: 18px;
    margin-bottom: 30px;
}

/* .team-section {
    margin-top: 10px;
    text-align: center;
}

.team-member-box {
    
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    transition: transform 0.3s ease;
    text-align: center;
}

.team-member-box:hover {
    transform: translateY(-10px);
} */

/* .team-img {
    width: 80%;
    height: 230px; 
    object-fit: cover;
    border-bottom: 1px solid #ddd;
}

.team-info {
    padding: 10px 0;
}

.team-info h4 {
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
} */

/* General styles for the team section */
.team-section {
    padding: 60px 0; /* Adjust padding as needed */
}

.team-member-box {
    border: 1px solid #ddd; /* Light border around the box */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensure content doesn't overflow the box */
    background: #fff; /* White background for the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    text-align: center; /* Center align text */
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for hover effect */
    transition: transform 0.3s ease;
}

.team-member-box:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.team-img {
    width: 80%; /* Adjust width to control image size */
    height: 230px;  
    /* max-width: 300px; Maximum width for larger screens */
    margin: 15px auto; /* Center align and add space around the image */
    display: block; /* Remove extra space below the image */
    object-fit: cover;
    border-radius: 5px; /* Make image circular, optional */
}

.team-info {
    padding: 15px; /* Space around the text */
}

.team-info h4 {
    margin: 0; /* Remove default margin */
    font-size: 1.25rem; /* Adjust font size as needed */
    color: #333; /* Dark text color */
}

.team-info .designation {
    margin: 5px 0 0; /* Margin on top, remove bottom margin */
    font-size: 1rem; /* Adjust font size as needed */
    color: #666; /* Lighter text color */
}
.team-member-box:hover {
    transform: translateY(-10px);
} 
.team-info p {
    color: #666;
    font-size: 14px;
}
.headingteam {
    
    font-size: 20px;
    color: #0A5C36;;
    font-weight: bold;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
    color: inherit;
}


/* General Section Styling */
#locations {
    padding: 100px 0;
    background-color: #f4f4f4;
}

.heading {
    text-align: center;
    font-size: 26px;
    color: #0A5C36;;
    font-weight: bold;
    margin-bottom: 20px;
}

/* .heading-underline {
    width: ;
    height: 4px;
    background-color: #2e8b57;
    margin: 0 auto 40px;
} */

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Location Group Styling */

.location-group {
    margin-bottom: 50px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.location-heading {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: bold;
}

.location-list,
.sub-location-list {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.location-list li,
.sub-location-list li {
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
    padding: 8px 12px;
    /* border-left: 4px solid #2e8b57; */
    border-left: 4px solid rgb(49, 49, 95, 0.8);
    background-color: #f9f9f9;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.location-list li:hover,
.sub-location-list li:hover {
    background-color: rgb(49, 49, 95, 0.8);
    /* background-color: #2e8b57; */
    color: #fff;
    transform: translateY(-3px);
}

/* Multi-Column List for Vocational Centers */
.multi-column-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 0;
    margin: 0;
}

.multi-column-list li {
    background-color: #f2f2f2;
    padding: 10px 15px;
    font-size: 18px;
    color: rgb(49, 49, 95, 0.8);
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.multi-column-list li:hover {
    background-color: rgb(49, 49, 95, 0.8);
    /* background-color: #2e8b57; */
    color: #fff;
    transform: translateY(-3px);
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .location-heading {
        font-size: 14px;
    }

    .location-list li,
    .sub-location-list li,
    .multi-column-list li {
        font-size: 16px;
    }
}




















/* Animation */
@keyframes slideIn {
    from {
        left: -100%;
    }
    to {
        left: 0;
    }
}

/* event section */

.event {
    background-color: #f9f9f9;
    padding: 50px 0;
}

.event .container {
    text-align: center;
}

.event .heading {
    animation: highlight 2s infinite;
    text-align: center;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 50px;
}

@keyframes highlight {
    0%, 100% {
        background-color: green;
        color: #fff;
    }
    50% {
        background-color: #fff;
        color: #333;
    }
}

.event .induction {
    margin-top: 20px;
    text-align: center;
}

.event .image-container img {
    max-width: 300px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

.event .image-container img:hover {
    transform: scale(1.1);
}



.event .form-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    width: 300px;
    background-color:  green;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    padding: 5px 10px;
    transition: background-color 0.3s;
}

.event .form-link:hover {
    background-color: white;
    color: black;

}





/* Missions */
.mission{
    padding: 150px 0;
}
.mission .container .category{
    margin-top: 60px;
}

.mission p{
    text-align: justify;
}
.gallery-sec{
	position: relative;
	padding: 50px 0;
}

.gallery-sec .image-container{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	padding: 10px;
}

.gallery-sec .image-container .image{
	height: 200px;
	width: 300px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	overflow: hidden;
}

.gallery-sec .image-container .image img{
	height: 100%;
	width: 100%;
	border: 5px solid #d4d4d4;
	object-fit: cover;
	transition: 0.2s linear;
}

.gallery-sec .image-container .image:hover img{
	transform: scale(1.1);
}

.gallery-sec .pop-image{
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.8);
	height: 100%;
	width: 100%;
	z-index: 100;
	display: none;
}

.gallery-sec .pop-image span{
	position: absolute;
	top: 120px;
	right: 50px;
	font-size: 60px;
	font-weight: bolder;
	color: #ffffff;
	cursor: pointer;
	z-index: 100;
}

.gallery-sec .pop-image img{
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 3px solid #ffffff;
	width: 750px;
	object-fit: cover;
}

/* Conatact Us */
.contact-section {
    padding: 150px 0 80px;
}
.contact-section .heading h2 {
    font-weight: bold;
}

.contact-section .contact-form .form-group {
    margin-bottom: 20px;
}

.contact-section .contact-form .form-control {
    height: 50px;
    border-radius: 5px;
}

.contact-section .contact-form textarea.form-control {
    height: 122px;
    margin-bottom: 10px;
    resize: none;
}

.contact-section .contact-form .form-control:focus {
    box-shadow: none;
}






/* Footer */
/* footer{
    background-color: #0A5C36;
    color: #e6edff;
    padding: 50px 0;
}
footer h4{
    margin-bottom: 20px;
}
footer p a{
    text-decoration: none;
    color: #e6edff;
}
footer p a:hover{
    text-decoration: none;
    color: #e6edff;
}


footer .col-two ul li{
    list-style: none;
}

footer .col-two ul li a{
    color: #e6edff;
    text-decoration: none;
    transition: all 0.5s;
}
footer .col-two ul li a:hover{
    margin-left: 5px;
}
footer .social{
    margin-bottom: 30px;
}
footer .social a img{
    width: 20px;
    margin-right: 15px;
} */

footer {
    background-color: #f8f9fa;
    padding: 30px 0;
}

.contact-info {
    background-color: #0A5C36; /*Green background */
    padding: 20px;
    width: 100%;
    text-align: center;
    margin-bottom: 30px; /* Adds space between contact section and copyright */
    color: white;
    /* border-radius: 8px;  */
}

.contact-info i {
    margin-right: 10px;
}

.contact-info p {
    margin: 10px 0; /* Adjusted for more balanced spacing */
    font-size: 16px;
}

.contact-info a {
    color: white; /* Link color in white to match the section */
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.copyright-section {
    background-color: rgb(30, 30, 65);
    padding: 10px 0;
    text-align: center;
    color: #fff;
    margin-top: 0;
    
}

.copyright-section p {
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) {
    .contact-info p {
        display: inline-block;
        margin-right: 30px;
    }
}


/* Scroll Bar */

::-webkit-scrollbar{
    width: 5px;
}

::-webkit-scrollbar-track{
    border: 7px solid transparent;
}

::-webkit-scrollbar-thumb{
    background-color:  rgb(49, 49, 95);
}

#online{
    height: 50px;
    width: 100%;
    padding: 150px 0;
    /* border: none; */
    /* outline: none; */
    /* border: 1px solid rgb(206, 212, 218); */
    /* border-radius: 5px; */
    /* color: rgb(73, 80, 87); */
    font-weight: 400;
}


/* donation */
#donation {
    background-color: #f9f9f9;
    padding: 50px 0;
    text-align: center;
}
#donation h2{
    margin-top: 100px;
}

.donation-description {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.donation-image-container {
    margin-bottom: 20px;
    overflow: hidden;
}

.donation-image {
    max-width: 100%;
    height: 300px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation: scrollImages 9s infinite; /* Adjust animation duration as needed */
}

.donation-text {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.donation-logo {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}

.account-number {
    font-weight: bold;
    color: green;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

@keyframes scrollImages {
    0% {
        transform: translateX(0);
    }
    33.33% {
        transform: translateX(-100%);
    }
    66.66% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}


.transparent-image {
    position: relative;
    height: 300px; /* Adjust height as needed */
    margin-bottom: 30px;
}

.transparent-image .bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.transparent-image .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 255, 0.4); /* Blue color with transparency */
}
/* General Section Styling */
#contact {
    padding: 80px 0;
    background-color: #f4f4f4;
}

.heading {
    text-align: center;
    font-size: 30px;
    color: #2e8b57;
    font-weight: bold;
    margin-bottom: 20px;
}

/* .heading-underline {
    width: 80px;
    height: 4px;
    background-color: #2e8b57;
    margin: 0 auto 40px;
} */

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Contact Details Styling */
.contact-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}









.contact-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact-infor {
    flex: 1;
    margin-right: 20px;
    margin-bottom: 93px;
}

.contact-infor p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 15px;
}
.about-sec .reach {
    text-align: left;
    color: #0A5C36;
    font-size: 30px;
    margin: 30px;
    
}

.icon-green {
    color: #0A5C36;
    margin-right: 10px;
}

.contact-infor a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.contact-infor a:hover {
    color: #0A5C36;
}

.contact-map {
    flex: 1;
}

@media (max-width: 768px) {
    .contact-details {
        flex-direction: column;
    }

    .contact-info, .contact-map {
        margin-bottom: 20px;
    }
    .contact-infor {
        flex: 1;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .contact-infor {
        
        margin-bottom: 365px;
    }
}


/* Contact Map Styling */
.contact-map {
    flex: 1;
    max-width: 600px;
    width: 100%;
    margin-top: 20px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .contact-details {
        flex-direction: column;
    }

    .contact-info, .contact-map {
        margin-right: 0;
        margin-bottom: 20px;
    }
}