* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;

}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Rubik", sans-serif;
    padding: 36px 36px;
    position: relative;
    z-index: 2;
}

.links{
    display: flex;
    align-items: center;
    gap: 42px;
}

.Main_logo{
    width: 120px;
}

a {
    text-decoration: none;
    color: #043544;
    transition: all ease-in-out 300ms;
    font-size: 18px;
    font-family: "Rubik", sans-serif;
}



a:hover {
    transform: translateY(-3px);
    color: rgba(32, 32, 32, 0.906);
}

.uil-align-center-alt,
.uil-times {
    font-size: 42px;
    color: rgb(27, 27, 27);
    ;
}

.hidden {
    display: none;
}

.menu_close {
    display: none;
    cursor: pointer;
}




.hero_img_container {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 36px;

}

.span {
    color: white;
}

img {
    width: 100%;
    object-fit: cover;

}

mark {
    background-color: #043544;
    padding: 2px 12px;
    border-radius: 50px;
    color: white;
    font-size: 16px;

}





.hero_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    text-align: center;
    gap: 24px;
    padding: 12px 36px;
}

.hover-image {
    transition: transform 0.2s ease-out;
    will-change: transform;
    pointer-events: none;
}

.uil-align-center-alt,
.uil-times {
    position: relative;
    z-index: 2000;
}


.side_menu {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 120px 36px;
    position: absolute;
    top: 0;
    width: 175px;
    left: -200px;
    background-color: rgb(255, 255, 255);
    height: 100vh;
    box-shadow: 4px 7px 20px 0px #0000001c;
    z-index: 1;
    transition: left 400ms ease-in-out;
}

.side_menu.open {
    left: 0;
}







.hero_text h2 {
    font-size: 58px;
    font-weight: 400;
    color: #2f7084;
    font-family: "Bebas Neue", sans-serif;
    cursor: pointer;
    transition: all ease-out 500ms;
    position: relative;

}

.hero_text h2::after {
    content: "";
    position: absolute;
    left: -50px;
    top: 72px;
    /* space below text */
    width: 50%;
    height: 4px;
    background: linear-gradient(90deg, #008b35, #06cc73);
    border-radius: 2px;

}




.hero_text p {
    font-size: 18px;
    font-weight: 200;
    line-height: 1.5;
    color: rgb(28, 28, 28);
    font-family: "Rubik", sans-serif;
}


.hero_image1 {
    width: 80%;


}

.hero_image {
    width: 35%;
    position: absolute;
    bottom: -50px;


}

.car {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 96px;
    position: relative;
}






.hero_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 24px;
}

.text {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 1000px;

}

.cta {
    padding: 14px 52px;
    font-size: 16px;
    background-color: transparent;
    border: 1px solid #00000096;
    color: #00000096;
    transition: all ease-in-out 600ms;
    cursor: pointer;

}

.top {
    margin-top: 36px;
}

.cta:hover {
    background-color: rgb(41, 41, 41);
    color: white;
}


.social_icons {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    padding-top: 4px;

}

.h:hover {
    transform: translateY(-2px);
    color: rgb(41, 41, 41);
}

.h {
    transition: all ease-in-out 300ms;
    font-size: 24px;
    color: #00000096;
    cursor: pointer;
}


.bg {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: -1;

}

.bg h1 {
    position: absolute;
    color: transparent;
    text-align: center;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(0, 0, 0, 0.398);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    font-size: 10vw;
    width: 100%;
    font-family: sans-serif;
}

.bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(0, 139, 53, 0.28) 0%,
            /* green overlay color */
            rgba(255, 255, 255, 1) 100%
            /* fade to white */
        );
    z-index: 1;
    pointer-events: none;
}





video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    opacity: 100%;
}


.about_container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 120px 120px;
    gap: 96px;
    position: relative;
    overflow: hidden;
    


}
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  font-size: 24px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#backToTop.show {
  opacity: 1;
  pointer-events: auto;
}

.span2 {
    color: #2f7084;
}

.about_container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* gradient with color in the middle, fading to transparent top & bottom */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            /* transparent top */
            rgba(0, 139, 53, 0.28) 80%,
            /* semi-transparent middle */
            rgba(0, 139, 53, 0.28) 10%,
            /* semi-transparent middle */
            rgba(0, 139, 53, 0.28) 100%
            /* transparent bottom */
        );
    pointer-events: none;
    /* so clicks go through */
    z-index: 1;
}

.about_text,
.bento_container {
    position: relative;
    z-index: 2;
}

.about_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
}

.bento_container {
    width: 50%;
    min-width: 50%;
}



.about_text h1 {
    font-size: 62px;
    font-family: "Rubik", sans-serif;
    max-width: 500px;
}



.about_text p {
    max-width: 600px;
    font-size: 18px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    line-height: 1.8;
}


.f-container {
    width: 400px;
}

.founder-img {
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

}

.founder {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 120px 62px 120px;
    text-align: center;
    gap: 38px;
    position: relative;


}

.bgmi {
    position: relative;

}

.bgmi::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            /* solid white at top */
            rgba(0, 139, 53, 0.28) 50%,
            /* semi-transparent green middle */
            rgba(0, 123, 255, 0.5) 80%,
            /* semi-transparent blue lower */
            rgba(255, 255, 255, 1) 100%
            /* solid white at bottom */
        );
    pointer-events: none;
    z-index: -1;
}


.bgi {
    position: absolute;
    z-index: -1;
    top: 0;
    height: 100%;
    opacity: 50%;

}

.founder h1 {
    font-size: 36px;
    font-family: "Rubik", sans-serif;
    max-width: 800px;
    font-weight: 400;
    color: #043544;
}


.founder p {
    max-width: 900px;
    font-size: 18px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    line-height: 1.8;
}

.vission_mission {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 120px 100px 120px;
    text-align: center;
    gap: 62px;
}

.vission,
.mission {
    max-width: 600px;
    height: 100%;
    border: 2px solid #056b89;
    padding: 24px;
    border-radius: 24px;
    background-color: rgb(248, 248, 255);
}


.vission h1 {
    font-size: 36px;
    font-family: "Rubik", sans-serif;
    padding-bottom: 24px;
    font-weight: 400;
    color: #043544;
}

.vission p {
    max-width: 900px;
    font-size: 18px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    line-height: 1.8;
}

.mission h1 {
    font-size: 36px;
    font-family: "Rubik", sans-serif;
    padding-bottom: 24px;
    font-weight: 400;
    color: #043544;
}

.mission p {
    max-width: 900px;
    font-size: 18px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    line-height: 1.8;
}

.courses {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 36px 36px 62px 36px;
    text-align: center;
    gap: 32px;
    position: relative;



}

.courses::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('./Assets/Images/bg.jpg') center/cover no-repeat;
    opacity: 0.5;
    /* ← Change this for more or less transparency */
    z-index: -2;
}

/* Fades to white at top and bottom */
.courses::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, white 0%, transparent 10%, transparent 90%, white 100%);
    z-index: -1;
}


.course_box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
    flex-wrap: wrap;
    
}

.course_box2 {
    display: grid;
    grid-template-columns: auto auto;
    gap: 36px;
    align-items: start
}

.c-img {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50%;
    z-index: -1;
    height: 100%;
    width: 800px;
    opacity: 20%;
    object-fit: contain;
}

.courses h1 {
    font-size: 36px;
    font-family: "Rubik", sans-serif;
    font-weight: 400;

}

.courses h2 {
    font-family: "Rubik", sans-serif;
    font-weight: 100;

}

.course_h1 {
    font-size: 36px;
    font-family: "Rubik", sans-serif;
    font-weight: 300;
    background-color: #043544;
    color: rgb(255, 255, 255);
    padding: 12px 24px !important;
    border-radius: 120px;
}

/* General styles */
.c-head h1,
.c-photo h1 {
    font-size: 42px;
    font-family: "Rubik", sans-serif;
    padding-bottom: 24px;
    font-weight: 600;
}

.c-head p,
.c-photo p {
    font-size: 18px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    line-height: 1.8;
}

.video {
    padding-top: 72px;
}

.video p {
    font-size: 18px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    line-height: 1.8;
    max-width: 800px;
    padding-top: 24px;
}

ul li {
    font-size: 16px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    padding-bottom: 8px;

}

/* Card Style */
.card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 24px 24px 36px 24px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 24px;
}

.card:hover {

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card h1 {
    font-size: 1.8rem;

}

.card p {
    font-size: 24px;
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    line-height: 1.5;

    padding-top: 24px;
}

/* Hide the details initially */
.course-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-20px);
    /* Starting from above */
    transition: max-height 0.8s ease-out, opacity 0.8s ease-out, transform 0.8s ease-out;
    /* Smooth slide-down */
    display: flex;

    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 26px;
}

.card.expanded .course-details {
 max-height: 1000px;
    /* Adjust this value depending on the size of the content */
    opacity: 1;
    transform: translateY(0);
}

/* Active state when clicked */
.card.active .course-details {
    max-height: 500px;
    /* Adjust this value depending on the size of the content */
    opacity: 1;
    transform: translateY(0);
    /* Move into place */
}

.toggle-btn {
  cursor: pointer;
  margin-top: 10px;
  color: #043544;
  transition: all ease-in-out 300ms;
}

.toggle-btn:hover{
    transform: translateX(4px);
}

.close-btn {
  display: none;
  
}

.card.expanded .toggle-btn:not(.close-btn) {
  display: none;
}

.card.expanded .close-btn {
  display: inline;
  color: red;
  
}




.folio {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 36px;
    flex-direction: column;
    gap: 96px;
}

.folio h1 {
    font-size: 46px;
    font-family: "Rubik", sans-serif;
    font-weight: 200;
    color: #1d1d1dc1;


}

.folio_container {
    display: flex;
    flex-direction: column;
    gap: 62px;
    padding: 120px 36px;
}

.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    grid-auto-rows: 600px;
    /* Row height */
    gap: 24px;
    /* Adjust spacing */
    width: 80%;
    margin: auto;
}

.item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure images fit nicely */
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.item:nth-child(3n) {
    grid-column: span 2;
    /* Stretching every 3rd image */

}



footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 16px;
    box-shadow: 7px 7px 71px 20px #0000001c;
    background-color: whitesmoke;
}

footer h1 {
    font-size: 28px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    color: #1d1d1dc1;
}

.social_icons_footer {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;

}

.copywrite {

    font-size: 16px;
    font-family: "Rubik", sans-serif;
    font-weight: 100;
    color: #1d1d1dc1;
}

hr {
    width: 100%;
    margin-top: 54px;

    border-top: 1px solid #1d1d1d36;
}

.contact_container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 42px;
    padding: 120px 18px;
    
    background: linear-gradient(to top,  #418DA4 0% , rgb(255, 255, 255) 100% /* fade to white */);
}

.contact_container h1{
    font-size: 42px;
    font-family: "Rubik", sans-serif;
   
    font-weight: 600;
}

.contactd{
    font-size: 20px;
    font-family: "Rubik", sans-serif;
   
    font-weight: 200;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.contact_container h3{
     font-size: 20px;
    font-family: "Rubik", sans-serif;
   color: #043544;
    font-weight: 200;
}

.s {
    font-size: 28px;
    padding-right: 8px;
    color: #043544;
}

.f{
    grid-row: 3/5;
}

.enrollbtn:hover{
    color: white !important;
}

.details_contact{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    
    align-items: center;
    column-gap: 62px;
    row-gap: 24px;
    
}

.contactd h3{
    padding-right: 8px;
}


@media only screen and (max-width: 768px) {
    .hidden {
        display: block;
        cursor: pointer;
    }

    .hide {
        display: none;
    }

    nav {
        justify-content: space-between;
        padding: 24px 16px;
    }

    .course_box2 {
        grid-template-columns: 1fr;
    }
}


@media only screen and (max-width: 1024px) {
    .img-pos {
        top: 0;
        left: 0;
        opacity: 5%;
        width: 500px;
    }

    .img-pos1 {
        top: 200px;
        right: 0;
        opacity: 5%;
        width: 500px;
    }

    .about_container {
        flex-direction: column;
        justify-content: center;
        padding: 120px 36px;
        gap: 52px;
    }

    .about_text {
        align-items: center;
        text-align: center;
    }

    .bento_container {
        width: 100%;
    }

    .founder {
        padding: 48px 18px;
    }

    .vission_mission {
        flex-direction: column;
        align-items: center;
        padding: 18px;
    }

    .f-container {
        width: 280px;
    }

    .hero_text h2::after {
        display: none;

    }

    .hero_image1 {
        width: 100%;
    }

    .course_h1 {
        font-size: 24px !important;
    }
    .details_contact{
        grid-template-columns: 1fr;
    } 
    .f{
        grid-row: 5;
    }

}













nav {
    opacity: 0;
    /* Initially hidden */
    transform: translateY(30px);
    /* Starts slightly below */
    animation: fadeIn 2s ease-in-out forwards;

}

/* .hero_img_container{
    opacity: 0;  
    transform: translateY(30px); 
    animation: fadeIn 2s ease-in-out forwards;
}

.hero_container , .bg {
    opacity: 0; 
    
    animation: fadeIns 2s ease-in-out forwards;
} */
.animate{
    opacity: 0;
    transform: translateY(30px);
    animation: fadeIn 2s ease-in-out forwards;
    animation-delay: 4s;
    /* Starts after image */
}

/* Social Icons Animation */
.social_icons {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeIn 2s ease-in-out forwards;
    animation-delay: 4.5s;
    /* Slightly after CTA */
}

.hero_container,
.bg {
    opacity: 0;
    animation: fadeIns 2s ease-in-out forwards;
    animation-delay: 1.5s;
    /* Start earlier */
}

.hero_img_container {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeIn 2s ease-in-out forwards;
    animation-delay: 3s;
    /* Start after parent fades in */
}



nav {
    animation-delay: 1.5s;
}

.bg {
    animation-delay: 0s;
}

.hero_container {
    animation-delay: 2.5s;

}

.h1bg {
    animation: fadeOut 5s forwards;
    animation-delay: 2s;
    /* delay before it starts fading */
}

@keyframes fadeOut {
    to {
        opacity: 10%;

    }
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIns {
    from {
        opacity: 0;

    }

    to {
        opacity: 1;

    }
}



nav,
.bg,
.hero_container {
    will-change: opacity, transform;
}








.folio {
    opacity: 0;
    transform: translateY(20px);
    /* Starts slightly below */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.folio.show {
    opacity: 1;
    transform: translateY(0);
}

.gallery img {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.gallery img.show {
    opacity: 1;

}




.item:hover {
    transform: scale(1.01);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}



.fullscreen {
    position: fixed;
    top: 0;
    left: 0;

    object-fit: cover;
    /* Fills screen while maintaining aspect ratio */
    background: rgba(0, 0, 0, 0.9);
    /* Dark overlay effect */
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}





.foundation_image {

    border-radius: 12px;
}

h6 {
    font-size: 14px;
    color: gray;
    font-family: sans-serif;
    cursor: pointer;
    font-family: "Rubik", sans-serif;
    font-weight: 200;
}