@import url(/assets/css/loader.css);
html, body {
margin : 0;
  padding: 0;
  height : 100%;
  min-height : 100%;
}
    body {
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    body::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }
    
    canvas {
        display: block;
    }
    
    .teamsModal {
        z-index: 10;
    }
    
    @font-face {
        font-family: oxanium;
        src: url(../fonts/Oxanium-Bold.ttf);
        font-weight: bold;
    }
    
    @font-face {
        font-family: delicious;
        src: url(../fonts/DeliciousHandrawn-Regular.ttf);
        font-weight: bold;
    }
    
    @font-face {
        font-family: saman;
        src: url(../fonts/SAMAN___.TTF);
    }
    
    .WrapperDiv {
        height: 100vh;
        position: absolute;
    }
    
    .opac {
        opacity: 100%;
    }
    
    .modal-content {
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }
    /* .scrollCards {
  margin: 5%;
} */
    
    .content-section {
        display: none;
    }
    
    body::-webkit-scrollbar {
        display: none;
    }
    
    body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    p {
        font-family: delicious;
    }
    
    .modalDay1,
    .modalDay2,
    .modalDay3 {
        width: 90vw;
        top: 20%;
        height: 28rem;
        margin: 3%;
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
        background: rgba(255, 255, 255, 0.582);
        backdrop-filter: blur(2px);
    }
    
    .modal-content {
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }
    
    .modal-body {
        overflow: scroll;
    }
    
    .modal-body::-webkit-scrollbar {
        display: none;
    }
    
    .modal-body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .sponsorCover {
        padding: 2%;
        font-family: oxanium;
        color: white;
        left: 275%;
        top: 0%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    
    .sponsors {
        margin: auto;
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
        background: rgba(130, 170, 116, 0.4);
        backdrop-filter: blur(5px);
        width: 50vw;
    }
    
    @media screen and (max-width: 1000px) {
        .sponsors {
            width: 95vw;
        }
    }
    
    .ComingSoonHolder {
        width: 8em;
        height: 8em;
        position: absolute;
        margin: 20px;
        opacity: 1;
    }
    
    .sponsorText {
        top: 20%;
        left: 32%;
    }
    
    .sponsorHead h1 {
        font-size: 50px;
    }
    
    .sponsorTop {
        padding-bottom: 1%;
    }
    
    .eventDays {
        position: absolute;
        top: 0;
        left: 200%;
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
    }
    /* Teams */
    
    .teamsModal {
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
        background: rgba(255, 255, 255, 0.582);
        backdrop-filter: blur(2px);
    }
    
    .teamsModal::-webkit-scrollbar {
        display: none;
    }
    
    .teamsModal {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .teamsHead h1 {
        font-size: 50px;
    }
    
    .bubbleParaTeam {
        font-size: small;
        color: white;
    }
    
    .teams-bg {
        background: rgba(255, 255, 255, 0.582);
        backdrop-filter: blur(2px);
    }
    
    #bubbleteams {
        top: 30%;
        left: 30%;
        scale: 1.5;
    }
    
    .carousel {
        z-index: 5;
        top: 10%;
        display: flex;
        width: 50%;
    }
    
    .carouselImage {
        border-radius: 24px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .carousel-image {
        width: 100vw;
        height: 45vh;
    }
    
    @media screen and (max-width: 1000px) {
        .carousel-image {
            height: 28vh;
        }
    }
    
    .closeButton {
        top: 8px;
        right: 8px;
        z-index: 20;
        position: absolute;
    }
    
    #backdrop-back {
        fill: #71c7f2;
        opacity: 0.75;
    }
    
    #bubbleOne {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        /* Disable selection/copy in UIWebView */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
    .Day {
        position: absolute;
        top: 55%;
        left: 30%;
        display: flex;
        flex-wrap: nowrap;
        gap: 6rem;
    }
    
    .Day1 {
        z-index: 5;
        background-size: cover;
        width: 100vw;
    }
    
    .Day2 {
        z-index: 5;
        background-size: cover;
        width: 100vw;
    }
    
    .Day3 {
        z-index: 5;
        background-size: cover;
        width: 100vw;
    }
    
    .modal::-webkit-scrollbar {
        display: none;
    }
    
    .modal {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .frontPage {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.75s ease-in-out;
        height: 100vh;
        width: 100vw;
    }
    
    .frontPagebg {
        margin: 0 5%;
        background: rgba(130, 170, 116, 0.4);
        backdrop-filter: blur(5px);
        padding: 6%;
        border-radius: 50px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
    }
    
    .frontPagebg h1 {
        font-size: 100px;
        color: white;
        font-family: saman;
    }
    
    .frontPagebg h2 {
        color: white;
        font-size: 50px;
    }
    
    @media screen and (max-width: 1000px) {
        .carousel {
            width: 100vw;
        }
        .sponsorCover {
            left: 650%;
        }
        .frontPagebg h1 {
            font-size: 65px;
        }
        .frontPagebg h2 {
            font-size: 35px;
        }
        .frontPagebg {
            margin: 2%;
            padding: 10%;
        }
        .Day {
            flex-direction: column;
            top: 30%;
            gap: 9rem;
            left: 5%;
        }
    }
    
    .bubble-rotate-offset {
        width: 100%;
        height: 100%;
        animation: rotate-bubble-offset 15s alternate infinite;
    }
    
    .ball {
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        position: relative;
        background: radial-gradient( circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
        cursor: pointer;
    }
    
    .bubblePara {
        font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-size: 30px;
        line-height: 26px;
        position: relative;
        top: 0%;
        text-align: center;
        padding: 2% 0;
        color: #fff;
    }
    
    .day-no {
        top: 75%;
        position: relative;
    }
    
    .ball.bubble {
        background: radial-gradient( circle at 50% 55%, rgb(240 245 255 / 0%), rgb(240 245 255 / 29%) 40%, rgb(225 238 255 / 61%) 60%, rgb(43 130 255));
        -webkit-animation: bubble-anim 2s ease-out infinite;
        animation: bubble-anim 2s ease-out infinite;
    }
    
    #bubbleOne {
        animation: UpAndDown 3.5s alternate infinite;
    }
    
    #bubbleTwo {
        animation: downAndUp 4.5s alternate infinite;
    }
    
    #bubbleThree {
        animation: UpAndDown 4s alternate infinite;
    }
    
    @media screen and (max-width: 1000px) {
        #bubbleOne {
            animation: leftAndRight 3.5s alternate infinite;
        }
        #bubbleTwo {
            animation: rightAndLeft 4.5s alternate infinite;
        }
        #bubbleThree {
            animation: leftAndRight 4s alternate infinite;
        }
    }
    
    @keyframes UpAndDown {
        0% {
            transform: translateY(-20px);
        }
        50% {
            transform: translateY(20px);
        }
        100% {
            transform: translateY(-20px);
        }
    }
    
    @keyframes leftAndRight {
        0% {
            transform: translateX(-20px);
        }
        50% {
            transform: translateX(20px);
        }
        100% {
            transform: translateX(-20px);
        }
    }
    
    @keyframes rightAndLeft {
        0% {
            transform: translateX(-20px);
        }
        50% {
            transform: translateX(20px);
        }
        100% {
            transform: translateX(-20px);
        }
    }
    
    @keyframes downAndUp {
        0% {
            transform: translateY(20px);
        }
        50% {
            transform: translateY(-20px);
        }
        100% {
            transform: translateY(20px);
        }
    }
    
    .bubble-holder {
        width: 10em;
        height: 10em;
        position: absolute;
        margin: 10px;
        opacity: 1;
    }
    
    .ball.bubble:after {
        display: block;
        background: radial-gradient( circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);
    }
    
    .ball:after {
        content: "";
        position: absolute;
        display: none;
        top: 5%;
        left: 10%;
        width: 80%;
        height: 80%;
        border-radius: 100%;
        -webkit-filter: blur(1px);
        filter: blur(1px);
        z-index: 2;
        -webkit-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
    }
    
    @keyframes bubble-anim {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        20% {
            -webkit-transform: scaleY(0.95) scaleX(1.05);
            transform: scaleY(0.95) scaleX(1.05);
        }
        48% {
            -webkit-transform: scaleY(1.1) scaleX(0.9);
            transform: scaleY(1.1) scaleX(0.9);
        }
        68% {
            -webkit-transform: scaleY(0.98) scaleX(1.02);
            transform: scaleY(0.98) scaleX(1.02);
        }
        80% {
            -webkit-transform: scaleY(1.02) scaleX(0.98);
            transform: scaleY(1.02) scaleX(0.98);
        }
        97%,
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    
    @keyframes rotate-bubble-offset {
        0% {
            -webkit-transform: rotateZ(30deg);
            transform: rotateZ(30deg);
        }
        100% {
            -webkit-transform: rotateZ(-30deg);
            transform: rotateZ(-30deg);
        }
    }
    
    @media screen and (max-width: 1000px) {
        .eventDays {
            left: 500%;
        }
        .Day {
            position: absolute;
            left: 25%;
        }
    }
    
    @media screen and (max-height: 850px) and (max-width: 1000px) {
        .bubble-holder {
            scale: 0.75;
        }
    }
    /* Teams */
    /* Teams */
    
    .ourteams-page {
        position: absolute;
        top: 0;
        width: 70vw;
        height: 100vh;
        display: flex;
        left: 440%;
        align-items: center;
        justify-content: flex-start;
        padding: 2%;
        flex-direction: column;
    }
    
    @media screen and (max-width: 1000px) {
        .ourteams-page {
            left: 1100%;
        }
    }
    
    .teamsModal {
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
        background: rgba(255, 255, 255, 0.582);
        backdrop-filter: blur(2px);
        height: 28rem;
        z-index: 25;
    }
    
    .teamsModal-body {
        overflow: scroll;
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
        /* Firefox */
    }
    
    .teamsModal-body::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }
    
    .teamsHead h1 {
        font-size: 50px;
    }
    
    .ourteams-bubble {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    .bubbleParaTeam {
        font-size: small;
        color: white;
    }
    
    .teams-bg {
        background: rgba(255, 255, 255, 0.582);
        backdrop-filter: blur(2px);
    }
    
    #bubbleteams {
        top: 22%;
        left: 30%;
        scale: 1.5;
    }
    
    .teams-day-no {
        position: relative;
        top: 70%;
    }
    
    .bubbleParaTeam {
        font-size: 24px;
        font-family: delicious;
        z-index: 0;
    }
    
    .teamMemberName {
        font-size: 20px;
    }
    
    .teamMemberCard {
        width: 45%;
    }
    
    @media screen and (max-width: 1000px) {
        .ourteams-bubble {
            width: 150vw;
        }
        .teamsModal {
            width: 95vw !important;
        }
        .teamMemberName {
            font-size: 18px;
        }
        .teamMemberCard {
            width: 60%;
        }
    }