@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Merienda:wght@300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.merienda-uniquifier {
    font-family: "Merienda", cursive;
    font-optical-sizing: auto;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body 
{
    margin:0;
    padding:0;
    box-sizing: border-box;
    width:100%;
    background-color: black;
    font-family: 'poppins',sans-serif;
    
}
    /*body::before {
        content: 'XS';
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        color: white;
        z-index: 4;
    }*/

li {
    justify-content: center;
}


/* Base navbar style */
.navbar {
    position: fixed !important;
    width: 100%;
    height: 75px;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 1rem 2rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background-color: transparent;
    /*backdrop-filter: blur(4px);*/ /* optional for glassy look */
}

    /* Style after scroll */
    .navbar.scrolled {
        width: 100%;
        height: 75px;
        background-color: #ffffff; /* change as needed */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Optional: smoother link transitions */
    .navbar a {
        color: #000;
        transition: color 0.2s ease;
    }

    .navbar.scrolled {
        animation: slideDown 0.3s ease-in-out;
    }

    .navbar h3 {
        margin: 0px;
        font-family: "Merienda", cursive;
        /*font-family: serif;
        font-style: italic;
        font-weight: bolder;*/
        color: white !important;
    }

    .navbar.scrolled h3 {
        margin: 0px;
        font-family: "Merienda", cursive;
        /*font-family: serif;
        font-style: italic;
        font-weight:bolder;*/
        color: black !important;
    }

    .navbar .navbar-collapse .navbar-nav li a {
        color: white !important;
        font-size: 15px;
    }

    .navbar.scrolled .navbar-collapse .navbar-nav li a {
        color: black !important;
        font-size: 15px;
    }

.navbar-toggler {
    border-color: white !important;
    color: white !important;
}

.navbar.scrolled .navbar-toggler {
    border-color: black !important;
    color: black !important;
}

.navbar-nav .nav-link.active {
    font-weight: bold !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.1rem white !important;
}

.Cpyright {
    font-size: 12px;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
        /*#navbar {
    top: 30px;
    position: absolute;
    z-index: 3;
    justify-content: unset;
}

.navbar h3 {
    font-family: serif;
    font-style: italic;
    color: white !important;
}

.navbar li a {
    color: white !important;
    font-size: 13px;
}

.nav-link:hover {*/
        /*border-bottom: 2px solid White;*/
        /*transform: translate(-5%, -5%);
    transition: .1s;
}*/
/*.navbar-nav .nav-link.active {
    font-weight: bold !important;
}*/

/*.navbar button {
    border: unset;
}

    .navbar button svg {
        color: white;
        vertical-align: unset;
    }

.offcanvas-body li a {
    color: white !important;
}*/

section {
   /* min-height: 100vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Responsive iframe (16:9) */
.iframe-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%;  /*16:9 Aspect Ratio */
}

.iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    border: none;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 91%;
    background: rgb(0 0 0 / 34%); /* Dark transparent background */
    z-index: 1;
}

.wavesvg {
    position: relative;
    z-index: 2;
    display: ruby-text;
    visibility: hidden;
}

/* Content (Documentary section) over the video */
.content {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 2;
    visibility:hidden;
}
.watchbtn {
    background-color: #b9a78f;
    border-color: unset;
}
.viewbtn:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
    background-color: #ffffff;
    /*margin-bottom: 3rem;*/
    padding: 1rem;
    transition: box-shadow 0.5s ease-in-out;
    transition-duration: 500ms;
}

#calendar {
    max-width: 1100px;
    margin: 40px auto;
}

footer ul li a{
    color:black;
    text-decoration:none;
}

.info-box {
    text-align: center;
}

    .info-box li {
        line-height: 1.875rem;
        font-size: 2rem;
        display: inline-block;
        color: black;
        text-align: center;
        padding-right: 30px;
    }

    .info-box:hover li .loc {
        color: #4A89F3;
    }

    .info-box:hover li .emi {
        color: #ff2e00;
    }

    .info-box:hover li .wat {
        color: #25D366;
    }


.main-img {
    max-width: 70% !important;
}

.card {
    overflow:visible !important;
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 12px !important;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease-in-out;
    border: 0px !important;
}

.banner-img {
    height: 91%;
    width: 100%;
}

.tdHead-bg{background-color: #7e91ff47;}


.ribbon {
    font-family: cursive;
    font-size: 23px;
    /*font-weight: bold;*/
    color: #fff;
}

.ribbon {
    --f: .4em; /* control the folded part */
    --r: .8em; /* control the cutout */

    position: absolute;
    left: 20px;
    top: calc(-1*var(--f));
    padding: .2em;
    border: solid #0000;
    border-width: 0 0 var(--r) calc(2*var(--f));
    background: radial-gradient(50% 100% at bottom,#0005 98%,#0000 101%) 0 0/calc(2*var(--f)) var(--f) no-repeat border-box;
    background-color: #ff0000;
    border-radius: var(--f) var(--f) 0 0;
    clip-path: polygon(0 0,100% 0,100% calc(100% - var(--r)),calc(50% + var(--f)) 100%,calc(2*var(--f)) calc(100% - var(--r)),calc(2*var(--f)) var(--f),0 var(--f));
}

.topic-h {
    font-family: "Merienda", cursive;
    font-size: 23px;
}

.offcanvas {
    max-width: 80% !important;
}


@media (min-width: 576px) {
    /* body:: before {
        content: 'SM';
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        color: white;
        z-index: 4;
    }*/
    .overlay {
        height: 95%;
    }

    .navbar-toggler {
        border-color: white !important;
        color: white !important;
    }

    .navbar.scrolled .navbar-toggler {
        border-color: black !important;
        color: black !important;
    }

    .content {
        visibility: visible;
    }

}

@media (min-width: 768px) {
   /* body::before {
        content: 'MD';
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        color: white;
        z-index: 4;
    }*/

    .wavesvg {
        visibility: visible;
    }

    .overlay {
        height: 93%;
    }

    .content {
        visibility: visible;
    }

    .navbar-toggler {
        border-color: white !important;
        color: white !important;
    }
    .navbar.scrolled .navbar-toggler {
        border-color: black !important;
        color: black !important;
    }
}

@media (min-width: 992px) {
    /*body::before {
        content: 'LG';
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        color: black;
        z-index: 4;
    }*/
}

@media (max-width:992px) {
    .offcanvas-body li a {
        color: black !important;
    }
    .navbar .offcanvas .offcanvas-body {
        margin-left: 0px !important;
    }
}

@media (min-width: 1200px) {
    /*body::before {
        content: 'Xl';
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        color: white;
        z-index: 4;
    }*/
    .banner-img {
        height: 95%;
        width: 100%;
    }
}

@media (min-width: 1400px) {
    /*body::before {
        content: 'XXL';
        font-size: 30px;
        font-weight: bold;
        position: absolute;
        color: black;
        z-index: 4;
    }*/
}