@import url("https://fonts.googleapis.com/css2?family=Delius&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Mogra&family=Roboto:ital,wght@0,100..900;1,100..900&family=Tenor+Sans&display=swap");

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

    padding: 0;
}

html {
    font-family: "Tenor Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
    max-width: 100vw;

    /* cursor: alias; */

    /* cursor: url(https://www.google.com/imgres?q=cartoon%20icons%20cursor&imgurl=https%3A%2F%2Fi.pinimg.com%2F474x%2F7e%2F90%2Fb8%2F7e90b8a2d0687a9386f3ed5425e58b57.jpg&imgrefurl=https%3A%2F%2Fin.pinterest.com%2Fpin%2F809522101769740658%2F&docid=9U1KiJ8P3qb_bM&tbnid=FTYDKtbJ_rE_ZM&vet=12ahUKEwjB987Yqs2MAxUlyzgGHUm4IgIQM3oECGsQAA..i&w=360&h=360&hcb=2&ved=2ahUKEwjB987Yqs2MAxUlyzgGHUm4IgIQM3oECGsQAA), */
    /* auto; */
}

a {
    color: black;
    text-decoration: none;
}
body {
    max-width: 100vw;
    overflow-x: hidden;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
textarea {
    resize: none;
}
.layout__padding {
    padding: 1rem 5rem;
}
.primary__btn__outerlayer {
    position: relative;
    padding: 2px;
    /* background-color: rgb(249, 115, 66); */
    overflow: hidden;
    border-radius: 3rem;
    width: fit-content;
    height: fit-content;
}

.primary__btn__outerlayer::after {
    content: "";
    background: #0cebeb; /* fallback for old browsers */
    background: -webkit-linear-gradient(
        to right,
        #29ffc6,
        #20e3b2,
        #0cebeb
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
        to right,
        #29ffc6,
        #20e3b2,
        #0cebeb
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10;
    border-radius: 3rem;
    transform: translateX(-100%);
    transition-duration: 400ms;
}
.primary__btn__outerlayer::before {
    content: "";
    background: #0cebeb; /* fallback for old browsers */
    background: -webkit-linear-gradient(
        to right,
        #29ffc6,
        #20e3b2,
        #0cebeb
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
        to right,
        #29ffc6,
        #20e3b2,
        #0cebeb
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -10;
    border-radius: 3rem;
    transform: translateX(100%);
    transition-duration: 400ms;
}

.primary__btn__outerlayer:hover:after {
    transform: translateX(0%);
}
.primary__btn__outerlayer:hover:before {
    transform: translateX(0%);
}
.primary__btn {
    background-color: rgb(249, 115, 66);
    border: none;
    outline: none;
    font-weight: bold;
    color: whitesmoke;
    padding: 12px 30px;
    border-radius: 3rem;
}
.secondary__btn {
    background-color: rgb(55, 138, 55);
    border: none;
    outline: none;
    font-weight: bold;
    color: whitesmoke;
    padding: 12px 30px;
    border-radius: 0.3rem;
}
.heading {
    font-weight: 800;
    font-size: 3rem;
    background: -webkit-linear-gradient(90deg, #42d392, #647eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
button {
    cursor: pointer;
}


header {
    
    top:0;
    left: 0;
    right: 0;
    position:fixed;
    z-index: 1000;

    align-items: center;
    display: flex;
    justify-content: space-between;

    height: 100px; 
    
    transition: 300ms linear;
}

header.active {
    background: #addfbc;
    height: 80px;
}
/*New codes for header starts here*/

 
#header-banner.active {
    display: flex;
}
#header-banner {
    background: #ffcc55;
    color: #333;
    display: none;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    gap: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}

/* Countdown section */
#header-banner h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0;
    flex: 1;
    min-width: 150px;
}
#header-banner h3 span {
    background-color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.year-spinner-container {
    display: inline-block; /* Allow it to sit inline with text */
    height: 1.2em; /* Match line height, adjust as needed */
    overflow: hidden; /* Hide the overflowing numbers */
    vertical-align: middle; /* Align vertically with text */
    position: relative; /* Needed for absolute positioning of inner */
    width: 4ch; /* Approximate width of "2025" */
    margin: 0 5px; /* Add some space around the spinner */
}

/* The element that actually moves/spins */
.year-spinner-inner {
    display: flex;
    flex-direction: column; /* Stack numbers vertically */
    position: absolute; /* Position freely within container */
    left: 0;
    width: 100%; /* Take full width of container */
    /* Start animation - Updated to loop infinitely */
    animation: spinYear 5s cubic-bezier(0.608, 0.55, 0.9, 1.55) 0.5s infinite;
     /* name | duration | timing-function | delay | iteration-count */
}

.year-spinner-inner span {
    height: 1.2em; /* Match container height */
    line-height: 1.2em; /* Vertically center text */
    text-align: center; /* Center numbers horizontally */
    display: block; /* Ensure each span takes full width */
}

/* Keyframes for the spinning animation - Updated for looping */
@keyframes spinYear {
    0% {
        transform: translateY(0%); /* Start at 2025 */
    }
    10% {
        transform: translateY(-80%); /* Begin moving up */
    }
    50% {
        /* Spin rapidly */
         transform: translateY(-90%); /* Adjust for more/less spin (peak) */
    }
    60% {
       
        transform: translateY(0%);
    }
    100% {
         
        transform: translateY(0%);
    }
}

/* Middle section */
.header-banner-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: bolder;
    flex: 2;
    min-width: 240px;
    text-align: center;
}

/* Word swapper */
#header-banner-middle-diff-words {
    display: inline-block;
    overflow: hidden;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
}
#header-banner-middle-diff-words-swaper {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
}
#header-banner-middle-diff-words-swaper span {
    height: 28px;
    line-height: 28px;
    text-align: left;
}

/* Right section */
.header-banner-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    flex: 1;
    min-width: 180px;
}

/* Button styling remains the same */
.register-button {
    color: white;
    background-color: black;
    border: none;
    outline: none;
    padding: 10px 24px;
    border-radius: 40px;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 180px;
    transition: background-color 300ms, color 300ms;
}
.banner-btn-text,
.header-register-btn-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.3s, transform 0.3s;
}
.banner-btn-text {
    opacity: 1;
}
.header-register-btn-arrow {
    opacity: 0;
}
.register-button:hover {
    background-color: white;
    color: black;
}
.register-button:hover .banner-btn-text {
    opacity: 0;
    transform: translateY(-150%);
}
.register-button:hover .header-register-btn-arrow {
    opacity: 1;
    transform: translateY(-50%);
}

/* Close icon fix (typo in 'height') */
.heading-banner-close-icon svg {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #header-banner {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .header-banner-middle,
    .header-banner-right,
    #header-banner h3 {
        justify-content: center;
        align-items: center;
    }

    .header-banner-right {
        align-items: center;
    }

    .register-button {
        width: 100%;
        max-width: 220px;
    }
}

.heading-banner-close-icon {
    position: absolute;
    top: 5px;
    right: 5px;
}

/*New codes for header ends here*/

.nav__logo {
    width: 150px;
    z-index: 10;
}

.nav__bar__icon {
    width: 20px;
    height: 20px;
    fill: black;
    display: none;
}

.nav__items__container {
    align-items: center;
    display: flex;
    justify-content: center;
}

.nav_item {
    color: black;
    cursor: pointer;
    font-weight: bold;
    margin-left: 20px;
    text-decoration: none;
}

.nav_item svg {
    fill: black;
    display: flex;
    height: 15px;
    margin-left: 5px;
    margin-bottom: 0px;
    width: 15px;
}

.nav_item.icon {
    display: flex;
    position: relative;
}

.nav__item__submenu {
    background-color: white;
    border: 1px solid gainsboro;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: black;
    display: none;
    font-size: small;
    font-weight: normal;
    position: absolute;
    padding: 20px 25px;
    top: 35px;
    width: 200px;
}

.nav__dropdown.active .nav__item__submenu {
    display: block;
}

.nav__item__submenu a {
    border-radius: 0.5rem;
    display: block;
    overflow: hidden;
    padding: 10px 5px;
    position: relative;
}
.nav__item__submenu a:hover {
    background-color: rgba(232, 230, 230, 0.875);
}
.nav__item__submenu a::before {
    background-color: gray;
    bottom: 0;
    content: "";
    height: 0.1rem;
    left: 0;
    position: absolute;
    translate: -150%;
    width: 100%;
}

.nav__item__submenu a:hover:before {
    transition-duration: 400ms;
    transition-timing-function: linear;
    translate: 0%;
}

.nav__item__for__animate {
    display: inline-block;
}

.banner {
    height: 60vh;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    width: 100vw;
    clip-path: polygon(100% 0, 100% 82%, 49% 100%, 0 82%, 0 0);
}

.banner_content__container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
}

.banner__heading {
    font-size: 3rem;
    font-weight: 800;
    color: white;
}

.banner__pages {
    margin-top: 1rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.banner__pages a {
    color: white;
}
.banner__pages a:hover {
    color: #addfbc;
    text-decoration: underline;
}

footer {
    /* #42d392, #647eff */
    background: #addfbc;
    overflow: hidden;
    padding: 6rem;
    position: relative;
    max-width: 100vw;
}
footer::after {
    content: "";
    background: url("/assets/footer1.png");
    position: absolute;
    width: 30vw;
    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;
    top: 0;
    left: 0;
    bottom: 0;
}
footer::before {
    content: "";
    background: url("/assets/footer2.png");
    position: absolute;
    width: 50vw;
    background-size: contain;

    background-repeat: no-repeat;
    top: 0;
    right: 0;
    bottom: 0;

    /* z-index: -1; */

    background-position: right;
}

#footer__container {
    display: grid;

    color: black;
    position: relative;

    grid-template-columns: 1fr 1fr 1fr;
}

.footer__left__content p {
    margin-top: 1.5rem;
    font-size: medium;
    max-width: 350px;
    color: rgb(9, 7, 7);
}
.footer__logo__container {
    width: 9rem;
}
.footer__socialmedia__icons__container {
    display: flex;
    gap: 10px;
    margin-top: 1.5rem;
}
.footer__socialmedia__icon {
    border-radius: 50%;
    border: 1px solid rgb(0, 0, 0);
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
.footer__socialmedia__icon svg {
    height: 15px;
}
.footer__socialmedia__icon:hover svg {
    fill: white;
}
.footer__middle__content h3 {
    color: rgb(0, 0, 0);
    font-size: 1rem;
}

.footer__middle__Links {
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
    margin-left: 1rem;
}
.footer__middle__Links ul {
    list-style: square;
}
.footer__middle__Links ul li {
    margin-bottom: 0.5rem;
    color: rgb(0, 0, 0);
}
.footer__middle__Links ul li a {
    color: rgb(0, 0, 0);
}
.footer__middle__Links ul li::marker {
    color: green; /* Or any other color you want */
}

.footer__right__content .footer__address > h3 {
    color: rgb(4, 3, 3);
}
.footer__address div {
    margin-top: 1.5rem;
}
.footer__right__content h3 {
    color: green;
    margin-bottom: 0.5rem;
}
.footer__right__content p {
    line-height: 25px;
}
.footer__right__content div {
    margin-bottom: 10px;
}
.footer__right__content a:hover {
    color: rgb(34, 128, 34);
}
.facebook:hover {
    background-color: blue;
}
.pinterest:hover {
    background-color: red;
}
.insta:hover {
    background-color: plum;
}
.linkedin:hover {
    background-color: blue;
}
.footer__copy__rights__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgb(70, 70, 70);
    padding-top: 2rem;
    margin-top: 1rem;
}

@media only screen and (max-width: 840px) {
    .layout__padding {
        padding: 2rem;
    }

    .nav__logo {
        width: 100px;
    }

    .nav__items__container {
        transition-duration: 200ms;
        transition-timing-function: linear;
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding-left: 20px;
        font-size: 20px;
        background-color: black;

        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    .nav__items__container.active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .nav__bar__icon {
        fill: white;
        z-index: 100;
        display: inline;
    }

    .nav__bar__icon #open {
        fill: black;
    }

    .nav__bar__icon.open #open {
        display: none;
    }
    .nav__bar__icon #close {
        display: none;
    }
    .nav__bar__icon.open #close {
        display: inline;
    }
    .nav__dropdown svg {
        display: none;
    }
    .nav_item {
        color: white;
    }

    .nav__item__submenu {
        background-color: inherit;
        border: none;
        border-radius: 10px;
        box-shadow: none;
        display: inline;

        font-size: 15px;
        font-weight: normal;
        position: static;
        padding: 0;
        padding-left: 10px;
    }

    .nav__dropdown {
        display: flex;
        flex-direction: column;
    }

    .nav__item__submenu a {
        display: block;

        color: white;
    }
    .nav__item__submenu a:hover {
        background-color: transparent;
    }
    .nav__item__submenu a::before {
        background-color: black;
    }

    .nav__item__submenu a:hover:before {
        transition-duration: 400ms;
        transition-timing-function: linear;
        translate: 0%;
    }
    .banner {
        clip-path: polygon(100% 0, 100% 91%, 49% 100%, 0 90%, 0 0);
    }
    .heading {
        font-size: 2rem;
        font-weight: 900;
    }
    footer {
        padding: 2rem;
    }
    #footer__container {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    .footer__copy__rights__container {
        flex-direction: column;
    }
    .footer__copy__rights__container div {
        text-align: center;
    }
}
@media only screen and (max-width: 600px) {
    .banner {
        clip-path: polygon(100% 0, 100% 95%, 49% 100%, 0 95%, 0 0);
    }
    #footer__container {
        grid-template-columns: 1fr;
    }
    footer::after {
        display: none;
    }
    footer::before {
        display: none;
    }
}