@import url('https://fonts.googleapis.com/css2?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');
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Pixelify+Sans:wght@400..700&family=Sixtyfour+Convergence:BLED,SCAN@5,58&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&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');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');


@font-face {
    font-family: 'Gellatio';
    src: url('fonts/Gellatio.ttf') format('truetype');;
}

@font-face {
    font-family: 'Ethnocentric';
    src: url('fonts/Ethnocentric.otf') format('truetype');;
}


*{
    color: white;
}



body {
    /* padding-top: 10vh;  */
    overflow-x: hidden; 
    overscroll-behavior: none;
}


video {
    position: fixed; 
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    object-fit: cover;
    z-index: -1;
}


/*home page*/
.home {
    height: 100vh;
    position: relative;
    background-color: rgb(0, 0, 0); 
    z-index: -1;

}

/* Glow Animation */
@keyframes glow {
    0% {
        text-shadow: 0 0 5px #00BFFF, 0 0 10px #00BFFF, 0 0 20px #FFFFFF, 0 0 40px #000000;
    }
    50%{
        text-shadow: 0 0 10px rgba(9, 150, 197, 0.8);
    }
    100% {
        text-shadow: 0 0 10px #00BFFF, 0 0 20px #00BFFF, 0 0 30px #FFFFFF, 0 0 50px #000000;
    }
}

/* Moving Glow Animation */
@keyframes background-glow {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
/* Flicker Effect */
@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
    }
    20%, 24%, 55% {
        opacity: 0.6;
    }
}
/* Light Movement Animation */
@keyframes light-move {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Animation for Light Movement */
@keyframes moveLight {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes zoomOut {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    80% {
      opacity: 0;
    }
    100% {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  @keyframes zoomIn {
    0% {
      transform: scale(4);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }


  /* Light Movement Animation */
@keyframes light-move {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Animation for Light Movement */
@keyframes moveLight {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Navbar Styles */
#navbar {
    background-color: rgba(10, 25, 50, 0.9); 
    box-shadow: 0 4px 10px rgba(0, 255, 255, 0.3); 
    border-bottom: 2px solid rgba(69, 174, 231, 0.5); 
    color: #ffffff;
    padding: 2vh 3vh; 
    font-family: 'Share Tech Mono';
}

/* Ensure the navbar text remains visible and futuristic */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9); 
    transition: color 0.3s ease, background-color 0.3s ease;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 2.5vh; 
    animation: glow 2s infinite, flicker 1.5s infinite;
}

/* Hover effect for links */
.navbar-nav .nav-link:hover {
    background-color: rgba(0, 255, 255, 0.2);
    color: rgb(50, 197, 213); 
    border-radius: 5px;
}

/* Navbar Title */
#nav-title {
    padding: 1vh; 
    color: #dce9ec;
    letter-spacing: 2px;
    font-family: 'ethnocentric';
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 
                 0 0 20px rgba(0, 200, 255, 0.5); /* Futuristic glow shadow */
    transform: translateY(20px); 
    position: relative;
    top: -2vh; 
    animation: glow 2s infinite, flicker 1.5s infinite;
}

/* Title Text Styling */
.navbar-toggler-icon {
    background-color: rgba(19, 92, 137, 0.95); 
    border-radius: 0.5vh;

}
/* Change color of the hamburger icon (lines) on hover */
.navbar-toggler-icon:active {
    background-color:rgba(17, 26, 159, 0.95); 
    border-radius: 0.5vh;
}

.navbar-toggler-icon.collapse{
    border: none;
}




/*tagline*/
#tagline {
    height: 100%;
    position: relative;
    top: 24vh; 
}

.event-name {
    text-align: center;
    font-size: 13vh; 
    text-transform: uppercase;
    font-family: 'Ethnocentric';
    letter-spacing: 0.4vh; 
    position: relative;
    overflow: hidden;
    border-radius: 1.2vh; 
    animation: glow 2s infinite, flicker 1.5s infinite;
}
.event-name1 {
    text-align: center;
    font-size: 4vh; 
    text-transform: uppercase;
    font-family: 'Ethnocentric';
    letter-spacing: 0.4vh; 
    position: relative;
    overflow: hidden;
    border-radius: 1.2vh;
    animation: glow 2s infinite, flicker 1.5s infinite;
}

.event-tagline {
    font-family: 'Gellatio';
    font-size: 4vh;
    color: aqua;
    text-align: right;
    animation: glow 2.5s infinite, flicker 1.5s infinite;
}


/* Transition for smooth zoom */
#tag {
    will-change: transform, opacity;
    transform: scale(1);
    opacity: 1;
    transition: transform 0.8s ease, opacity 0.8s ease;
}

#tag.fade-out {
    transform: scale(1.5);
    opacity: 0;
}

#tag.fade-in {
    transform: scale(1);
    opacity: 1;
}


/*hero*/
#hero {
    position: relative;
    bottom: 6vh;
}

#noesis-logo {
    position: relative;
    top: 0vh;

}

#intro {
    position: relative;
    top: 12.5vh; 
}

/* Card Styling */
.about-card {
    background-color: rgba(12, 53, 88, 0.751); 
    padding: 2vh; 
    border-radius: 1vh; 
    animation: bounce 3s infinite;
    box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.3), 0 0.6vh 2vh rgba(0, 0, 0, 0.19); 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover scaling effect */
.about-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0.8vh 1.6vh rgba(0, 0, 0, 0.5), 0 1.2vh 4vh rgba(0, 0, 0, 0.3);
}

/* Title Styling */
#intro h2.title {
    color: white;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 2vh; 
    letter-spacing: 0.2vh; 
    font-size: 4vh; 
}

/* Paragraph Styling */
#intro p {
    background-color: #05051f; 
    padding: 2.3vh; 
    border-radius: 1vh; 
    text-align: center;
    font-size: 2.6vh; 
    
}

/* Futuristic Paragraph Styling */
.futuristic-paragraph {
    font-family: 'Doto'; 
    font-weight: 900;
    font-size: 100%;
    line-height: 1.8;
    text-align: justify;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.6);
    padding: 2vh; 
    border-radius: 1vh; 
    box-shadow: 0 0 1.5vh rgba(0, 191, 255, 0.4);
    position: relative;
    overflow: hidden;
    border: 0.1vh solid rgba(0, 191, 255, 0.3);
}

/* Highlighted Words */
.futuristic-paragraph span {
    color: #00BFFF;
    font-weight: bold;
    text-shadow: 0 0 1vh rgba(0, 191, 255, 0.6);
    animation: glow 2s infinite alternate;
}

/* Futuristic Button Styling */
.futuristic-button {
    display: inline-block;
    padding: 1.2vh 3vh; 
    font-family: 'Ethnocentric'; 
    font-size: 2vh; 
    color: #00BFFF; 
    text-transform: uppercase;
    text-decoration: none;
    border: 0.2vh solid #00BFFF;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
    position: relative;
    overflow: hidden;
    letter-spacing: 0.2vh; 
    text-align: center;
    transition: 0.3s ease-in-out;
    box-shadow: 0 0 0.5vh #00BFFF, 0 0 1.5vh rgba(0, 191, 255, 0.6);
}

/* Hover Effect */
.futuristic-button:hover {
    background: rgba(0, 191, 255, 0.1); 
    box-shadow: 0 0 1.5vh #00BFFF, 0 0 3vh rgba(0, 191, 255, 0.8);
    color: #ffffff;
    border-color: #ffffff;
}

/* Light Animation */
.futuristic-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.4), transparent);
    z-index: 1;
    transition: 0.4s;
    animation: light-move 2s infinite linear;
}

/* Border Animation */
.futuristic-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 0.1vh solid rgba(255, 255, 255, 0.2);
    z-index: -1;
    transition: 0.3s;
}

/* Button Styling */
#home-button .btn {
    padding: 1.0vh 2vh; 
    font-size: 2.2vh; 
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: 'Ethnocentric';
}

/* Button Hover Effects */
#home-button .btn:hover {
    transform: translateY(-0.3vh); 
    opacity: 0.9;
}

#home-button {
    display: flex;
    justify-content: center; 
    gap: 1vh; 
    flex-wrap: wrap; 
    margin-top: 2vh; 
}

#home-button .btn {
    background-color: rgba(41, 1, 172); 
    border: none;
    padding: 1vh 2vh; 
    margin: 0.5vh 0; 
    border-radius: 2vh; 
    color: white; 
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s; /* Add hover effects */
}

#home-button .btn:hover {
    background-color: rgb(135, 206, 235, 0.5); 
    color: black; 
    transform: scale(1.05); 
}

/*hero end*/

/* event */
#event {
    position: relative;
    top: -20vh; 
    z-index: -1;
}

#event-title {
    color: #efefef;
    font-family: 'ethnocentric';
    text-align: center;
    position: relative;
    text-transform: uppercase;
    top: 10vh;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.5); 
    overflow: hidden; 
    animation: fadeIn 1.5s ease-in-out, bounce 2s infinite ease-in-out;
    opacity: 0;
    transform: translateY(2vh); 
    transition: opacity 3s ease, transform 3s ease; 
}

#event-title h2 {
    font-size: 8vh; 
    font-family: 'ethnocentric';
}

/* Visible state when scrolled into view */
#event-title.active {
    opacity: 1; 
    transform: translateY(0); 
}

/* Hidden again when scrolled out */
#event-title.hidden {
    opacity: 0;
    transform: translateY(2vh); 
    transition: opacity 1s ease, transform 1s ease; 
}

/* Container Positioning */
#event-container {
    position: relative;
    top: 6vh;
}

/* Cards Grid */
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10vh; 
    padding: 2vh; 
}

.custom-card {
    position: relative;
    height: 40vh; 
    max-width: 45vh;
    background-size: cover;
    background-position: center;
    border-radius: 1vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 1vh 1.5vh rgba(37, 154, 178, 0.607);
}

.custom-card:hover {
    transform: scale(1.05);
    box-shadow: 0 2vh 3vh rgb(107, 193, 255); 
    filter: brightness(0.9);
}

.card-title {
    color: white;
    background: linear-gradient(135deg, #000428, #004e92);
    padding: 1.5vh 3vh; 
    border-radius: 0.7vh; 
    font-size: 2.6vh; 
    text-align: center;
    position: relative;
    bottom: 2vh; 
    font-family: 'Share Tech Mono';
    font-weight: 900;
}

/* Row Animation */
.observer-row {
    opacity: 0;
    transform: translateY(8vh); 
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.observer-row.show {
    opacity: 1;
    transform: translateY(0);
}


/*event end*/

/* Schedule Section */
#schedule {
    position: relative;
    top: 40vh; 
}

#schedule-title {
    color: #fcfeff;
    font-family: 'ethnocentric';
    font-size: 5vh; 
    text-align: center;
    position: relative;
    bottom: 52vh; 
    text-transform: uppercase;
    text-shadow: 0 0 1.5vh rgba(0, 255, 255, 0.8), 0 0 4vh rgba(0, 200, 255, 0.5); 
    overflow: hidden; 
    animation: fadeIn 1.5s ease-in-out, bounce 2s infinite ease-in-out;
    opacity: 0; 
    transform: translateY(2vh); 
    transition: opacity 3s ease, transform 3s ease;
}

#schedule-title h2 {
    font-size: 8vh;
    font-family: 'ethnocentric';
}

/* Visible state when scrolled into view */
#schedule-title.active {
    opacity: 1; 
    transform: translateY(0); 
}

/* Hidden again when scrolled out */
#schedule-title.hidden {
    opacity: 0; 
    transform: translateY(2vh); 
    transition: opacity 1s ease, transform 1s ease; 
}

/* General Button Styling */
.schedule-button {
    display: inline-block;
    width: 50vh; 
    padding: 1.2vh 3vh; 
    font-family: 'doto'; 
    font-size: 1.6rem;
    color: #006eff; 
    text-transform: uppercase;
    text-decoration: none;
    border: 0.2vh solid #00BFFF; 
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
    position: relative;
    overflow: hidden;
    bottom: 11vh;
    letter-spacing: 0.2vh; 
    text-align: center;
    transition: 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
    box-shadow: 0 0 0.5vh #00BFFF, 0 0 1.5vh rgba(0, 191, 255, 0.6); 
}

/* Hover Effect */
.schedule-button:hover {
    background: rgba(234, 230, 230, 0.1); 
    box-shadow: 0 0 1.5vh #00BFFF, 0 0 3vh rgba(0, 191, 255, 0.8); 
    color: #ffffff;
    border-color: #ffffff;
}

/* Light Animation */
.schedule-button::before {
    content: '';
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.4), transparent);
    z-index: 1;
    animation: light-move 2s infinite linear;
}

/* Border Animation */
.schedule-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 0.1vh solid rgba(255, 255, 255, 0.2); 
    z-index: -1;
}

/* Button Container Styling */
#sc-button {
    position: relative;
    display: flex;
    justify-content: center; 
    gap: 1vh; 
    flex-wrap: wrap; 
    bottom: 40vh; 
    font-family: 'Share Tech Mono';
    font-weight: 900; 
}

/* Individual Button Styling */
#sc-button .btn {
    padding: 1vh 2vh; 
    font-size: 1.4rem;
    background-color: rgba(15, 199, 250, 0.5); 
    color: white; 
    border: none; 
    margin: 0.5vh 0; 
    border-radius: 2.5vh; 
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s; 
}

/* Hover Effects for Buttons */
#sc-button .btn:hover {
    background-color: rgba(14, 99, 132, 0.856); 
    color: rgb(255, 255, 255); 
    transform: scale(1.05); 
}

/*timeline*/
 #one, #two{
    position: relative;
    bottom: 10vh;
}

 /*schedule*/
 #one,#two{
    display: none;
  }
#one * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#one h2,#two h2{
    margin: 0.5em;
    color: #ffffff;
    text-shadow: 0 0 15px #0ff, 0 0 25px #00f;
    font-family: 'ethnocentric';
    font-size: x-large;
}

#one h4{
    margin: 0.5em;
    color: #ffffff;
    font-family:'Share Tech Mono';      
    font-weight:900;
}
#one p{
    margin: 0.8em;
    color: #ffffff;
    position: relative;
    top:-10px;
    font-family:'Doto'; 
    font-weight: '700';
    
}


#one .timeline {
    margin: 5em auto;
    max-width: 40em;
    position: relative;
}

#one .checkpoint {
    max-width: 33.99em;
    padding: 2em 3em;
    position: relative;
    animation: float 3s infinite ease-in-out;
}

#one .checkpoint div {
    background-color: rgba(7, 60, 83, 0.871);
    border: 2px solid #01bbff;
    border-radius: 1em;
    padding: 1.5em;
    box-shadow: 0 0 20px #0ff, 0 0 40px rgba(0, 255, 255, 0.7);
    transition: transform 0.3s, box-shadow 0.3s;
}

#one .checkpoint div:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px #0ff, 0 0 50px #0ff;
}

#one .checkpoint p {
    line-height: 1.7;
    color: white;
    display: inline;
    text-shadow: 0 0 15px rgb(0, 255, 208), 0 0 25px rgb(195, 255, 0);
    border-radius: 4px;

}
#one .checkpoint:nth-child(odd){
    border-left: 3px solid #ffffff;
    padding-left: 3em;
    transform: translateX(17em);
}
#one .checkpoint:nth-child(even){
    border-right: 3px solid #ffffff;
    padding-right: 3em;
    transform: translateX(-16.78em);
}
#one .checkpoint:nth-child(odd)::before,
#one .checkpoint:nth-child(even)::before{
    content: '';
    background: #ffffff;
    width: 3em;
    height: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#one .checkpoint:nth-child(odd)::before{
    left: 0;
}
#one .checkpoint:nth-child(even)::before{
    right: 0;
}
#one .btn{
    background-color: #004cb7;
    padding: 20px;
    font-size: 20px;
    border: 3px solid #fff;
    color: #fff;
    font-weight: 600;
    margin-left: 20px;
    transition: 0.6s ease;
}
#one .btn:hover{
    background-color: #fff;
    padding: 20px;
    font-size: 20px;
    border: 3px solid #004cb7;
    color: #004cb7;
    font-weight: 600;
    margin-left: 20px;
}
#one .btn1{
    background-color: #fff;
    padding: 20px;
    font-size: 20px;
    border: 3px solid #004cb7;
    color: #004cb7;
    font-weight: 600;
    margin-left: 20px;
}
#one .btn1:hover{
    background-color: #004cb7;
    padding: 20px;
    font-size: 20px;
    border: 3px solid #fff;
    color: #fff;
    font-weight: 600;
    margin-left: 20px;
    transition: 0.6s ease;
}
#one .container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin-top: 20px;
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-70%);
        opacity: 0;
    }
    100% {
        transform: translateX(50%);
        opacity: 1;
    }
}
@keyframes slideInRight {
    0% {
        transform: translateX(70%);
        opacity: 0;
}
    100% {
        transform: translateX(-50%);
        opacity: 1;
}
}
#one .checkpoint:nth-child(odd) {
animation: slideInLeft 1s ease-out;
}
#one.checkpoint:nth-child(even) {
animation: slideInRight 1s ease-out;
}



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


#two h4{
    margin: 0.5em;
    color: #ffffff;
    font-family:'Share Tech Mono';      
    font-weight:900;
}
#two p{
    margin: 0.8em;
    color: #ffffff;
    position: relative;
    top:-15px;
    font-family:'doto'; 
    font-weight: bold;
    
}

#two .timeline{
    margin: 5em auto;
    max-width: 40em;
    position: relative;
}
#two .checkpoint{
    max-width: 33.99em;
    padding: 2em 3em;
    position: relative;
    animation: float 3s infinite ease-in-out;
}
#two .checkpoint div{
    background-color: rgba(7, 60, 83, 0.871);
    border: 2px solid #01bbff;
    border-radius: 1em;
    padding: 1.5em;
    box-shadow: 0 0 20px #0ff, 0 0 40px rgba(0, 255, 255, 0.7);
    transition: transform 0.3s, box-shadow 0.3s;
}
#two .checkpoint p{
    line-height: 1.7;
    color: white;
    display: inline;
    text-shadow: 0 0 15px rgb(0, 255, 208), 0 0 25px rgb(195, 255, 0);
    border-radius: 10px;

}
#two .checkpoint div:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px #0ff, 0 0 50px #0ff;
}
#two .checkpoint:nth-child(odd){
    border-left: 3px solid #ffffff;
    padding-left: 3em;
    transform: translateX(17em);
}
#two .checkpoint:nth-child(even){
    border-right: 3px solid #ffffff;
    padding-right: 3em;
    transform: translateX(-16.78em);
}
#two .checkpoint:nth-child(odd)::before,
#two .checkpoint:nth-child(even)::before{
    content: '';
    background: #ffffff;
    width: 3em;
    height: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#two .checkpoint:nth-child(odd)::before{
    left: 0;
}
#two .checkpoint:nth-child(even)::before{
    right: 0;
}
#two .btn{
    background-color: #004cb7;
    padding: 20px;
    font-size: 20px;
    border: 3px solid #fff;
    color: #fff;
    font-weight: 600;
    margin-left: 20px;
    transition: 0.6s ease;
}
#two .btn:hover{
    
    background-color: #fff;
    padding: 20px;
    font-size: 20px;
    border: 3px solid #004cb7;
    color: #004cb7;
    font-weight: 600;
    margin-left: 20px;
}
#two .btn1{
    background-color: #fff;
    padding: 20px;
    font-size: 20px;
    border: 3px solid #004cb7;
    color: #004cb7;
    font-weight: 600;
    margin-left: 20px;
}
#two .btn1:hover{
    background-color: #004cb7;
    padding: 20px;
    font-size: 20px;
    border: 3px solid #fff;
    color: #fff;
    font-weight: 600;
    margin-left: 20px;
    transition: 0.6s ease;
}
#two .container {
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin-top: 20px;
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-70%);
        opacity: 0;
    }
    100% {
        transform: translateX(50%);
        opacity: 1;
    }
}
@keyframes slideInRight {
    0% {
        transform: translateX(70%);
        opacity: 0;
}
    100% {
        transform: translateX(-50%);
        opacity: 1;
}
}
#two .checkpoint:nth-child(odd) {
animation: slideInLeft 1s ease-out;
}
#two .checkpoint:nth-child(even) {
animation: slideInRight 1s ease-out;
}



/*end*/

#part5{
    bottom:150px;
    position:relative;
}

/*contact us */

#contact-us-title {
    color: #ffffff;
    font-family: 'ethnocentric';
    font-size: 5vh;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.5); /* Futuristic glow shadow */
    overflow: hidden; 
    animation: fadeIn 1.5s ease-in-out, bounce 2s infinite ease-in-out;
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 3s ease, transform 3s ease; 
}

#contact-us-title h2{
    font-size: 60px;
    font-family:'ethnocentric';
}
/* Visible state when scrolled into view */
#contact-us-title.active {
    opacity: 1; 
    transform: translateY(0); 
}

/* Hidden again when scrolled out */
#contact-us-title.hidden {
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 1s ease, transform 1s ease;
}


/* ------------------------------ */
#coor-title {
    color: #ffffff;
    font-family: 'ethnocentric';
    font-size: 5vh;
    text-align: center;

    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.5); /* Futuristic glow shadow */
    overflow: hidden;
    animation: fadeIn 1.5s ease-in-out, bounce 2s infinite ease-in-out;
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 3s ease, transform 3s ease; 
}

#coor-title h2{
    font-size: 60px;
    font-family:'ethnocentric';
}
/* Visible state when scrolled into view */
#coor-title.active {
    opacity: 1; 
    transform: translateY(0); 
}

/* Hidden again when scrolled out */
#coor-title.hidden {
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 1s ease, transform 1s ease; 
}

/* ---------------------------------------------- */
/* ------------------------------ */
#coor-title1 {
    color: #ffffff;
    font-family: 'ethnocentric';
    font-size: 5vh;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.5); /* Futuristic glow shadow */
    overflow: hidden; 
    animation: fadeIn 1.5s ease-in-out, bounce 2s infinite ease-in-out;
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 3s ease, transform 3s ease; 
}

#coor-title1 h2{
    font-size: 60px;
    font-family:'ethnocentric';
}
/* Visible state when scrolled into view */
#coor-title1.active {
    opacity: 1; 
    transform: translateY(0); 
}

/* Hidden again when scrolled out */
#coor-title1.hidden {
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 1s ease, transform 1s ease; 
}

/* ---------------------------------------------- */

.contact-us-button {
    display: inline-block;
    width: 500px;
    padding: 12px 30px;
    font-family: 'doto'; 
    font-size: 1.2rem;
    color: #006eff; 
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #00BFFF;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
    position: relative;
    overflow: hidden;
    letter-spacing: 2px;
    text-align: center;
    transition: 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
    box-shadow: 0 0 5px #00BFFF, 0 0 15px rgba(0, 191, 255, 0.6);
}

/* Hover Effect */
.contact-us-button:hover {
    background: rgba(0, 191, 255, 0.1); 
    box-shadow: 0 0 15px #00BFFF, 0 0 30px rgba(0, 191, 255, 0.8);
    color: #ffffff;
    border-color: #ffffff;
}

/* Light Animation */
.contact-us-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.4), transparent);
    z-index: 1;
    animation: light-move 2s infinite linear;
}

/* Border Animation */
.contact-us-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: -1;
}


/*Contact us card home page*/
/* General styles for the card */
#contact-us-card {
    width: 20em; 
    background: linear-gradient(135deg, #000428, #004e92); /* Futuristic gradient */
    color: white;
    border: 2px solid #00bfff; 
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.5); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for the card */
#contact-us-card:hover {
    transform: scale(1.05); 
    box-shadow: 0 0 30px rgba(0, 191, 255, 0.8); 
}

/* Center-align text */
#contact-us-card h5{
    margin-top: 20px;
    font-family: 'ethnocentric';
    text-align: center;

}
#contact-us-card p {
    text-align: center;
    font-family: 'doto';
    color: white;
    font-weight: 900;
}

/* Icon button styles */
.btn-icon {
    width: 50px;
    height: 50px;
    background-color: #00bfff; 
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.6);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-icon:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 191, 255, 1);
}

/* Align the icons in the center */
.btn-icon i {
    line-height: 50px;
}

/* Gap between buttons */
.d-flex.gap-3 > * {
    margin-right: 1rem;
}

/*end*/

/* Icon Container */
.icon-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Icon Links */
.icon-link {
    font-size: 1.5rem;
    color: rgba(0, 191, 255, 0.8);
    transition: color 0.3s ease, transform 0.3s ease;
}

.icon-link:hover {
    color: white;
    transform: scale(1.2);
}

.fas, .fab {
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(0, 200, 255, 0.6);
}
/* Footer */
footer {
    background-color: rgba(10, 25, 50, 0.9); 
    color: #fff;
    padding: 4vh 0; 
    text-align: center;
    width: 100%;
    position: relative;
    top: 30vh; 
    backdrop-filter: blur(1.5vh); 
    border-top: 0.4vh solid #00ffff; 
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap; 
    gap: 3vh; 
    font-family: 'Share Tech Mono';
    font-weight: 900;
}

.footer-content h5 {
    font-weight: 900;
    color: #00BFFF;
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-item i {
    font-size: 4.9vh; 
    margin-bottom: 1.5vh; 
    transition: transform 0.3s ease , glow 0.3s ease;
}

.footer-item p {
    margin: 0;
    font-size: 2vh; 
}

.footer-item a {
    color: #fff;
    text-decoration: none;
    font-weight: 900;
}

.footer-item a:hover {
    color: #f39c12;
    transform: scale(1.1); 
}

/* Glowing iframe for Google Maps */
.mu-venue-map iframe {
    width: 65vh; 
    height: 32vh; 
    max-width: 58.5vh; 
    border: none;
    box-shadow: 0 0 2.25vh rgba(0, 255, 255, 0.7);
}


/*web wizard card*/



.checkpoint p{
    font-family: 'Share Tech Mono';
}


/* Mobile-specific Styles (320px – 480px screens) */
@media (max-width: 480px) {

    body {
        padding-top: 13%; 
    }

    #navbar {
        box-shadow: 0 0 15px rgba(0, 132, 255, 0.8);
        border-bottom: 2px solid rgba(0, 132, 255, 0.8);
    }

    /* Dropdown menu styling */
    .custom-navbar {
        background: linear-gradient(180deg, rgba(0, 50, 150, 0.9), rgba(0, 0, 50, 0.9));
        padding: 2% 0;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(0, 132, 255, 0.6);
        animation: pulseGlow 2s infinite alternate;
        position: relative;
        top:10px;
    }

    @keyframes pulseGlow {
        from {
            box-shadow: 0 0 10px rgba(0, 132, 255, 0.6);
        }
        to {
            box-shadow: 0 0 25px rgba(0, 132, 255, 1);
        }
    }

    /* Menu items in mobile view */
    .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.9);
        font-size: 2.8vh;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        padding: 0.5vh 0;
        margin: 2% 0;
        font-weight: bold;
        text-align: center;
        transition: color 0.4s ease, background-color 0.4s ease, transform 0.2s ease;
    }

    /* Hover effect for mobile menu items */
    .navbar-nav .nav-link:hover {
        background: radial-gradient(circle, rgba(0, 255, 255, 0.4), rgba(0, 132, 255, 0.1));
        color: #00ffff;
        border-radius: 8px;
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    }

    /* Navbar title */
    #nav-title {
        color: rgba(255, 255, 255, 0.9);
        font-size: 3vh;
        letter-spacing: 1.5px;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 132, 255, 0.6);
    }

    /* Toggler icon customization */
    .navbar-toggler-icon {
        background-image: linear-gradient(90deg, rgba(0, 255, 255, 0.8), rgba(0, 132, 255, 0.8));
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(0, 132, 255, 0.8);
    }

    .navbar-toggler {
        border: none;
    }

    #tagline {
        height: 100%;
        width: 100%;
        top: 30vh;
        position: relative;
        align-items: center;
        overflow: hidden;
    }

    .event-name {
        font-size: 6.5vh;
        letter-spacing: 0.5vh;
        letter-spacing: 0.5vw; 
        border-radius: 5%;
        animation: glow 2s infinite, flicker 1.5s infinite;
    }

    .event-tagline {
        font-size: 80%; 
        text-align: center; 
        top:1.5vh;
    }

    /*hero */
    #hero {
        top: 0vh; 
    }

    #noesis-logo {
        position: relative;
        top: -20vh;

    }

    #intro {
        top: -20vh; 
    }

    #intro h2.title {
        font-size: 3vh;
    }

    #intro p {
        font-size: 2vh; 
        padding: 2vh; 
    }

    .about-card {
        padding: 2vh;
        border-radius: 1vh; 
    }

    .futuristic-paragraph {
        text-align: left;
        font-size: 5vh; 
        padding: 1vh;
    }

    .futuristic-button {
        padding: 2vh 4vh; 
        font-size: 0.5vh; 
    }

    #home-button .btn {
        font-size: 2vh; 
    }

    #home-button .btn:hover {
        transform: scale(1.05);
    }
    /*event title*/
    #event {
        top: -15vh; 
    }

    #event-title {
        top: 8vh; 
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 200, 255, 0.5); 
        transform: translateY(2vh);
        transition: opacity 3s ease, transform 3s ease; 
        

    }

    #event-title h2 {
        font-size: 4.2vh; 
        transition: glow 3s ease;
    }

   /* Container Positioning */
   #event-container {
    top: 10vh;
    height: 100%;
    }

    .cards-grid {
        gap: 4vh; 
       
    }

    .custom-card {
        width: 100%; 
        border-radius: 3%; 
        box-shadow: 0 1% 3% rgba(37, 154, 178, 0.5); 
    }


    .card-title {
        font-size: 1.4rem;
        padding: 2% 4%;
        bottom: 4%;
    }

    .observer-row {
        transform: translateY(15%);
    }

    /*schedule*/
    #schedule {
        padding: 10px; 
        position: relative;
        top: 210vh;
    }

    #schedule-title h2 {
        font-size: 50px; 
    }


    .schedule-button { 
        padding: 1% 1%;
        bottom: 50vh; 
        font-size: 0.9rem; 
        box-shadow: 0 0 0.3vh #00BFFF, 0 0 0.8vh rgba(0, 191, 255, 0.6);
    }

    #sc-button {
        gap: 3%;
        bottom: 10%; 
    }

    #sc-button .btn {
        font-size: 0.8rem; 
        border-radius: 2vh; 
    }

    /*event time line*/
    #one, #two{
        position: relative;
        bottom:55vh;
    }

    #one h2{
        font-size: medium;
    }

    #one h4{
        font-size: medium;

    }
    #one p{
        font-weight: bold;
        font-size: small;
        
    }
    #one .checkpoint {
        padding: 1em 2em;
        width: 100%;
        position: relative;
        animation: float 3s infinite ease-in-out;
        margin: 2em auto; 
    }
    
    #one .checkpoint div {
        width: 100%;
        align-items: center;
    }
    
    #one .checkpoint:nth-child(even){
        border-right: 3px solid #4b0f0f00;
    }
    #one .checkpoint:nth-child(odd),
    #one .checkpoint:nth-child(even) {
        border-left: 3px solid #ffffff00;
        padding-left: 3em;
        transform: translateX(0); 
        animation: slideInCenter 1s ease-out; 
    }
    
    #one .checkpoint:nth-child(odd)::before,
    #one .checkpoint:nth-child(even)::before {
        content: '';
        background: #ffffff00;
        width: 3em;
        height: 3px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%; 
        transform: translate(-50%, -50%);
    }
    

    #two h2{
        margin: 0.5em;
        color: #ffffff;
        text-shadow: 0 0 15px #0ff, 0 0 25px #00f;
        font-family: 'ethnocentric';
        font-size: medium;
    }

    #two h4{
        font-family:'Share Tech Mono';       
        font-size: large;

    }
    #two p{
        top:-10px;
        font-size: small;
        
    }
    #two .checkpoint {
        padding: 1em 2em;
        width: 100%;
        margin: 2em auto; 
    }

    #two .checkpoint div {
        padding: 1em;
        align-items: center;
    }

    #two .checkpoint:nth-child(even){
        border-right: 3px solid #4b0f0f00;
    }

    #two .checkpoint:nth-child(odd),
    #two .checkpoint:nth-child(even) {
        border-left: 3px solid #ffffff00;
        padding-left: 3em;
        transform: translateX(0); 
        animation: slideInCenter 1s ease-out; 
    }
    
    #two .checkpoint:nth-child(odd)::before,
    #two .checkpoint:nth-child(even)::before {
        content: '';
        background: #ffffff00;
        width: 3em;
        height: 3px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /*end*/

/* contact us */
    .event-name1{
        font-size: 2vh;
    }

    #contact-us{
        position: relative;
        top: 165vh;
    }

    #contact-us-title {
        font-size: 90%;
    }
    
    #contact-us-title h2{
        font-size: 30px;
       
    }


    /*footer*/
    footer{
        position: relative;
        top: 210vh;
    }
    .footer-content {
        flex-direction: column; 

    }

    /* Show only Contact Us, Social Media, and Map */
    .footer-item {
        display: none; 
    }
    .footer-item:nth-child(3){
        margin-top: 20px;
        margin-top: 2vh; 
      }

    .footer-item:nth-child(2), /* Contact Us */
    .footer-item:nth-child(3) /* Social Media */ {
        display: flex; /* Show these items */
        width: 100%; 
        justify-content: center; 
    }

    .mu-venue-map {
        display: block; 
        margin-top: 2vh; 
        text-align: center;
    }

    .mu-venue-map iframe {
        width: 100%;
        height: 30vh; 
    }
    
    /*rule*/
    
    .monitor {
        margin-top: 10px;
        width: 90%;
        max-width: 600px; 
        height: 300px; 
        position: relative;
        overflow: hidden;
    }
    
    .screen {
        width: 90%; 
        height: 350px;
        font-size: 24px;
        overflow: hidden;
    }
    
    .screen.off {
        height: 250px;
        overflow: hidden; 
    }

    .cont {
        color: white;
        height: 90%;
        max-height:50%; 
        padding: 5%; 
        background-color: #000;
        font-family: 'Share Tech Mono';
    }
    
    .cont h1 {
        text-align: center;
        font-family: 'Doto';
        font-size: 0.8em; 
    }

    .cont p{
        font-size: 15px;
    }

    .base1{
        width: 50px;
        height: 40px;
    }

    .base{
        width: 200px;
    }

    .input-container{
        width: 300px;
        margin-left: 0;
    }

    .keyboard{
        width: 300px;
        height: 140px;
        margin-left: 0;
    }

    .key{
        font-size:3px;
        width:10px;
        height: 3px;
        padding: 6.5px;
        border-radius: 2.5px;
    }

    .key-row{
        margin-bottom: 1px;
    }

    .key.wide {
    width: 70px; 
    }

    .key.space {
        width: 280px; 
    }

    .mouse{
        display: none;
    }
        
  /* footer end */ 

    /*web wizard page*/

    #webwizard h4 {
        left: 5px;
        top: 10px;
        font-size: 1rem; 
    }

    #webwizard h3{
        font-size: 1rem;
    }

    #webwizard h5{
        font-size: 0.7rem;
    }

    #webwizard h6{
        font-size: 0.7rem;
        position: relative;
    }

    #webwizard li{
        font-size: 0.65rem;
        position: relative;
        right:2px;
    }


    .contents {
        margin-top: 10vh; 
        height: 100%;
        box-shadow: 0px 0px 0px 0px #062176c6;
    }

    #webwizard .info {
        padding: 10px;
        position: relative;
        top:10px;
        font-size: 0.9rem;
    }

    #webwizard .custom-width {
        width: 90%; 
        margin: 0 auto; 
    }
    #webwizard .bg-custom{
        height: 470px;
        width: 100%;
        }
    #webwizard .cards {
        position: relative;
        left: 0%; 
        width: 100%; 
        margin: 0 auto;
    }

    .front, .back{
        position: absolute;
        width: 100%;
        height: 90%;
    }

    .event-card-title{
        font-size: 1.2rem;
        position: relative;
        top:-1px;
    }

    #web-foot{
        position: relative;
        top: 20px;
    }

    /*end*/
    #coor-title h2{
        font-size: 3vh;
    }
    #coor-title1 h2{
        font-size: 3vh;
    }

}



/* Mobile-specific Styles (480px – 768px screens) */
 @media (min-width:481px) and (max-width: 768px) {

    body {
        padding-top: 10%; 
    }
           
 /* Navbar background for mobile */
    #navbar {
           box-shadow: 0 0 15px rgba(0, 132, 255, 0.8);
        border-bottom: 2px solid rgba(0, 132, 255, 0.8);
    
    }

    /* Dropdown menu styling */
    .custom-navbar {
        background: linear-gradient(180deg, rgba(0, 50, 150, 0.9), rgba(0, 0, 50, 0.9));
        padding: 2% 0;
        position: relative;
        top: 1.5vh; 
        border-radius: 8px; 
        box-shadow: 0 0 20px rgba(0, 132, 255, 0.6);
    }

    /* Menu items in mobile view */
    .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.8); 
        font-size: 2.5vh; 
        text-transform: uppercase; 
        letter-spacing: 1px; 
        padding: 1vh 0;
        margin: 1% 0;
        font-weight: 900;
        text-align: center; 
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    /* Hover effect for mobile menu items */
    .navbar-nav .nav-link:hover {
        background-color: rgba(0, 255, 255, 0.2);  
        border-radius: 5px; 
    }

    #tagline {
        height: 100%;
        width: 100%;
        top: 30vh; 
        position: relative;
        align-items: center;
        overflow: hidden;
    }

    .event-name {
        font-size: 7.2vh; 
        letter-spacing: 0.5vh;
        letter-spacing: 0.5vw;
        border-radius: 5%; 
        animation: glow 2s infinite, flicker 1.5s infinite;
    }

    .event-tagline {
        font-size: 100%; 
        text-align: center; 
        top:1.5vh;
    }
  
    /*hero */
    #hero {
        top: -2vh; 
    }

    #noesis-logo {
        position: relative;
        top: -20vh; 

    }

    #intro {
        top: -15vh; 
    }

    #intro h2.title {
        font-size: 3vh; 
    }

    #intro p {
        font-size: 2.5vh; 
        padding: 2vh; 
    }

    .about-card {
        padding: 2vh; 
        border-radius: 1vh; 
    }


    /* Container Positioning */
    #event-title h2{
        font-size: 5vh;
    }
   #event-container {
    top: 10vh;
    height: 100%;
    }

    .cards-grid {
        gap: 4vh;   
    }

    .custom-card {
        height: 40vh; 
        max-width: 99%; 
        border-radius: 3%; 
        box-shadow: 0 1% 3% rgba(37, 154, 178, 0.5); 
    }

    .custom-card:hover {
        transform: scale(1.02); 
        box-shadow: 0 2% 4% rgba(107, 193, 255, 0.7);
    }

    .card-title {
        font-size: 1.4rem; 
        padding: 2% 4%; 
        bottom: 4%;
    }

    .observer-row { 
        transform: translateY(15%); 
    }

     /*schedule*/
     #schedule {
        padding: 10px; 
        position: relative;
        top: 210vh;
    }

    #schedule-title h2 {
        font-size: 4.5vh; 
    }

    .schedule-button {
        width: 100%; 
        height: 100%;
        padding: 3% 4%;
        bottom: 50vh; 
        font-size: 0.9rem; 
        box-shadow: 0 0 0.3vh #00BFFF, 0 0 0.8vh rgba(0, 191, 255, 0.6);
    }

    #sc-button {
        gap: 3%; 
        bottom: 10%; 
    }

    #sc-button .btn {
        font-size: 1.2rem; 
        border-radius: 8vh; 
    }

    
    /*event time line*/
    #one, #two{
        position: relative;
        bottom:55vh;
    }

    #one h2{
        font-size: large;
    }

    #one h4{
        font-size: x-large;

    }
    #one p{ 
        font-weight: bold;
        font-size: medium;
        
    }
    #one .checkpoint {
        padding: 1em 2em;
        width: 100%;
        position: relative;
    }
     #one .checkpoint div {
        width: 100%;
        align-items: center;
    } 
    #one .checkpoint div:hover {
        transform: scale(1.05);
        box-shadow: 0 0 30px #0ff, 0 0 50px #0ff;
    }
    
    #one .checkpoint p {
        line-height: 1.7;
        color: #ffffff;
    }
   


    #one .checkpoint:nth-child(odd){
        border-left: 3px solid #ffffff00;
        padding-left: 3em;
        position: relative;
        animation: slideInCenter 1s ease-out;
    }

    #one .checkpoint:nth-child(even){
        border-right: 3px solid #ffffff00;
        padding-right: 3em;
        animation: slideInCenter 1s ease-out;
    }

    #one .checkpoint:nth-child(odd),
    #one .checkpoint:nth-child(even) {
        border-left: 3px solid #ffffff00;
        padding-left: 3em;
        transform: translateX(0); 
    }

    #one .checkpoint:nth-child(odd)::before,
    #one .checkpoint:nth-child(even)::before {
        content: '';
        background: #ffffff00;
        width: 3em;
        height: 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #two h2{
        margin: 0.5em;
        color: #ffffff;
        text-shadow: 0 0 15px #0ff, 0 0 25px #00f;
        font-family: 'ethnocentric';
        font-size: large;
    }

    #two h4{
        font-family:'Share Tech Mono';       
        font-size: x-large;
        font-weight: 900;

    }
    #two p{
        top:-10px;
        font-size: medium;
        
    }
    #two .checkpoint {
        padding: 1em 2em;
        width: 100%;
        margin: 2em auto; 
    }
    
    #two .checkpoint div {
        padding: 1em;
        align-items: center;
     }
    
    
    #two .checkpoint:nth-child(odd){
        border-left: 3px solid #ffffff;
        padding-left: 3em;
        transform: translateX(17em);
    }
    #two .checkpoint:nth-child(even){
        border-right: 3px solid #4b0f0f00;
        padding-right: 3em;
        transform: translateX(-16.78em);
    }
    #two .checkpoint:nth-child(odd),
    #two .checkpoint:nth-child(even) {
        border-left: 3px solid #ffffff00;
        padding-left: 3em;
        transform: translateX(0); 
        animation: slideInCenter 1s ease-out; 
    }
    
    #two .checkpoint:nth-child(odd)::before,
    #two .checkpoint:nth-child(even)::before {
        content: '';
        background: #ffffff00;
        width: 3em;
        height: 3px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        transform: translate(-50%, -50%);
    }
    /*end*/

    

    /*contact us home page*/
    .event-name1{
        font-size: 2vh;
    }

    #contact-us{
        position: relative;
        top: 165vh;
    }

    #contact-us-title {
        font-size: 90%;
        text-align: center;
         overflow: hidden; 
        animation: fadeIn 1.5s ease-in-out, bounce 2s infinite ease-in-out;
        opacity: 0; 
        transform: translateY(20px); 
        transition: opacity 3s ease, transform 3s ease; 
    }
    
    #contact-us-title h2{
        font-size: 30px;
       
    }
   
    #contact-us-title.active {
        opacity: 1; 
        transform: translateY(0);
    }
    
    /* Hidden again when scrolled out */
    #contact-us-title.hidden {
        opacity: 0; 
        transform: translateY(20px);
        transition: opacity 1s ease, transform 1s ease; 
    }
    
    .event-name1{
        font-size: 2vh;
    }

    #contact-us{
        position: relative;
        top: 165vh;
    }

    #contact-us-title {
        font-size: 80%;
        text-align: center;
         overflow: hidden; 
        animation: fadeIn 1.5s ease-in-out, bounce 2s infinite ease-in-out;
        opacity: 0; 
        transform: translateY(20px); 
        transition: opacity 3s ease, transform 3s ease; 
    }
    
    #contact-us-title h2{
        font-size: 5vh;
       
    }
    /* Visible state when scrolled into view */
    #contact-us-title.active {
        opacity: 1; 
        transform: translateY(0); 
    }
    
    /* Hidden again when scrolled out */
    #contact-us-title.hidden {
        opacity: 0; 
        transform: translateY(20px); 
        transition: opacity 1s ease, transform 1s ease; 
    }

    #coor-title h2{
        font-size: 4vh;
    }
    #coor-title1 h2{
        font-size: 4vh;
    }

     /*footer*/
     footer{
        position: relative;
        top: 210vh;
    }
    .footer-content {
        flex-direction: column; 

    }

    /* Show only Contact Us, Social Media, and Map */
    .footer-item {
        display: none; 
    }
    .footer-item:nth-child(3){
        margin-top: 20px;
        margin-top: 2vh; 
      }

    .footer-item:nth-child(2), /* Contact Us */
    .footer-item:nth-child(3) /* Social Media */ {
        display: flex; 
        width: 100%; 
        justify-content: center; 
    }

    .mu-venue-map {
        display: block; 
        margin-top: 2vh; 
        text-align: center; 
    }

    .mu-venue-map iframe {
        width: 100%;
        height: 30vh; 
    }
    
  /* footer end */ 
 /*rule*/
    
 .monitor {
    margin-top: 10px;
    width: 90%; 
    max-width: 600px; 
    height: 300px; 
    position: relative;
    overflow: hidden;
}

.screen {
    width: 90%; 
    height: 350px; 
    font-size: 24px;
   
    overflow: hidden;
}

.screen.off {
    height: 250px;
    overflow: hidden; 
    
}

.cont {
    color: white;
    height: 90%; 
    max-height:50%; 
    padding: 5%; 
    background-color: #000;
    font-family: 'Share Tech Mono';
}

.cont h1 {
    text-align: center;
    font-family: 'Doto';
    font-size: 0.8em;
}

.cont p{
    font-size: 15px;
}

.base1{
    width: 30px;
    height: 40px;
}

.base{
    width: 130px;
}

.input-container{
    width: 400px;
    margin-left: 0;
}

.keyboard{
    width: 400px;
    height: 180px;
    margin-left: 0;
}

.key{
    font-size:5px;
    width:30px;
    height: 23px;
    padding: 6.5px;
    border-radius: 2.5px;
}

.key-row{
    margin-bottom: 1px;
}

.key.wide {
width: 70px; 
}

.key.space {
width: 280px; 
}

.mouse{
display: none;
}
  /*web wizard page*/

    
  #webwizard h4 {
    left: 5px;
    top: 10px;
    font-size: 1rem;
    }

    #webwizard h3{
        font-size: 1rem;
    }

    #webwizard h5{
        font-size: 0.9rem;
    }

    #webwizard h6{
        font-size: 0.7rem;
        position: relative;
    }

    #webwizard li{
        font-size: 0.75rem;
        position: relative;
        right:2px;
    }


    .contents {
        margin-top: 10vh; 
        height: 100%;
        box-shadow: 0px 0px 0px 0px #062176c6;
    }

    #webwizard .info {
        padding: 10px;
        position: relative;
        top:10px;
        font-size: 0.9rem; 
    }

    #webwizard .custom-width {
        width: 90%; 
        margin: 0 auto; 
    }
    #webwizard .bg-custom{
        background-color: #094e945f;
        height: 470px;
        width: 100%;
        }
    #webwizard .cards {
        position: relative;
        left: 0%; 
        width: 100%;
        margin: 0 auto; 
    }

    .front, .back{
        position: absolute;
        width: 100%;
        height: 90%;
    }

    .event-card-title{
        font-size: 1.6rem;
        position: relative;
        top:-1px;
    }

    #web-foot{
        position: relative;
        top: 20px;
    }
}


@media (min-width:767) and (max-width:990px){
    body {
        padding-top: 10%; 
    }
           
 

    /* Dropdown menu styling */
    .custom-navbar {
        background-color: rgba(10, 25, 50, 1);  
        padding: 2% 0;
        position: relative;
        top: 1.5vh; 
        border-radius: 8px; 
        box-shadow: 0.2vh 0.2vh 15px rgba(0, 132, 255, 0.3); 
    }

    /* Menu items in mobile view */
    .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.8); 
        font-size: 2.5vh; 
        text-transform: uppercase; 
        letter-spacing: 1px; 
        padding: 1vh 0;
        margin: 1% 0;
        font-weight: 900;
        text-align: center; 
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    /* Hover effect for mobile menu items */
    .navbar-nav .nav-link:hover {
        background-color: rgba(0, 255, 255, 0.2); 
        color: black; 
        border-radius: 5px; 
    }

    #tagline{
        overflow: hidden;
    }
    .event-name{
        font-size: 4vh;
    }

    .event-name1{
        font-size:3vh;
    }

    .event-tagline{
        font-size: 2.6vh;
    }

    /* Transition for smooth zoom */
    #tag {
        will-change: transform, opacity;
        transform: scale(0.7);
        opacity: 1;
        transition: transform 0.8s ease, opacity 0.8s ease;
    }

    #tag.fade-out {
        transform: scale(1.2);
        opacity: 0;
    }

    #tag.fade-in {
        transform: scale(1);
        opacity: 1;
    }

    /*hero */
    #hero {
        top: -2vh; 
    }

    #noesis-logo {
        position: relative;
        top: -8vh; 

    }

    #intro {
        top: -15vh; 
    }

    #intro h2.title {
        font-size: 3vh; 
    }

    #intro p {
        font-size: 2.5vh; 
        padding: 2vh;
    }

    .custom-card{
        width: 100%;
    }

    #sc-button .btn {
        font-size: 0.5rem;
    }

    
    /*event time line*/
    #one, #two{
        position: relative;
    }

    #one .checkpoint div {
        background-color: rgba(7, 60, 83, 0.871);
        border: 2px solid #01bbff;
        border-radius: 1em;
        padding: 1em;
        align-items: center;
        width: 100%;
        box-shadow: 0 0 20px #0ff, 0 0 40px rgba(0, 255, 255, 0.7);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    #one .checkpoint div:hover {
        transform: scale(1.05);
        box-shadow: 0 0 30px #0ff, 0 0 50px #0ff;
    }
    
    #one .checkpoint p {
        line-height: 1.7;
        color: #ffffff;
    }
   /* Center the container */

/* Keep original styles intact */
#one .checkpoint:nth-child(odd){
    border-left: 3px solid #ffffff00;
    padding-left: 3em;
    position: relative;
    animation: slideInCenter 1s ease-out;
}

#one .checkpoint:nth-child(even){
    border-right: 3px solid #ffffff00;
    padding-right: 3em;
    animation: slideInCenter 1s ease-out;
}

#one .checkpoint:nth-child(odd),
#one .checkpoint:nth-child(even) {
    border-left: 3px solid #ffffff00;
    padding-left: 3em;
    transform: translateX(0); 
}

#one .checkpoint:nth-child(odd)::before,
#one .checkpoint:nth-child(even)::before {
    content: '';
    background: #ffffff00;
    width: 3em;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


    #two .checkpoint {
        max-width: 39.99em;
        padding: 1em 2em;
        width: 100%;
        position: relative;
        animation: float 3s infinite ease-in-out;
        margin: 2em auto; 
    }
    
    #two .checkpoint div {
        background-color: rgba(7, 60, 83, 0.871);
        border: 2px solid #01bbff;
        border-radius: 1em;
        padding: 1em;
        align-items: center;
        box-shadow: 0 0 20px #0ff, 0 0 40px rgba(0, 255, 255, 0.7);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    #two .checkpoint div:hover {
        transform: scale(1.05);
        box-shadow: 0 0 30px #0ff, 0 0 50px #0ff;
    }
    
    #two .checkpoint p {
        line-height: 1.7;
        color: #ffffff;
    }
    
    #two .checkpoint:nth-child(odd){
        border-left: 3px solid #ffffff;
        padding-left: 3em;
        transform: translateX(17em);
    }
    #two .checkpoint:nth-child(even){
        border-right: 3px solid #4b0f0f00;
        padding-right: 3em;
        transform: translateX(-16.78em);
    }
    #two .checkpoint:nth-child(odd),
    #two .checkpoint:nth-child(even) {
        border-left: 3px solid #ffffff00;
        padding-left: 3em;
        transform: translateX(0); 
        animation: slideInCenter 1s ease-out; 
    }
    
    #two .checkpoint:nth-child(odd)::before,
    #two .checkpoint:nth-child(even)::before {
        content: '';
        background: #ffffff00;
        width: 3em;
        height: 3px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%; 
        transform: translate(-50%, -50%);
    }
    
    

    /*contact us home page*/
    .event-name1{
        font-size: 2vh;
    }

    #contact-us{
        position: relative;
        top: vh;
    }

    #contact-us-title {
        font-size: 90%;
        text-align: center;
         overflow: hidden; 
        animation: fadeIn 1.5s ease-in-out, bounce 2s infinite ease-in-out;
        opacity: 0; 
        transform: translateY(20px); 
        transition: opacity 3s ease, transform 3s ease; 
    }
    
    #contact-us-title h2{
        font-size: 30px;
       
    }
    /* Visible state when scrolled into view */
    #contact-us-title.active {
        opacity: 1; 
        transform: translateY(0); 
    }
    
    /* Hidden again when scrolled out */
    #contact-us-title.hidden {
        opacity: 0; 
        transform: translateY(20px); 
        transition: opacity 1s ease, transform 1s ease; 
    }

    
    #coor-title h2{
        font-size: 4vh;
    }
    #coor-title1 h2{
        font-size: 4vh;
    }

    .footer-content{
        gap:2vh;
    }

    .footer-item i {
        font-size: 3vh;
        margin-bottom: 1.5vh; 
        transition: transform 0.3s ease , glow 0.3s ease;
    }
    
    .footer-item p {
        margin: 0;
        font-size: 1.7vh; 
    }
    .footer-content h5 {
        font-weight: 900;
        color: #00BFFF;
    }
    .footer-item a {
        color: #fff;
        text-decoration: none;
        font-weight: 900;
    }
    .mu-venue-map iframe {
        width: 63vh; 
        height: 30vh; 
        max-width: 58.5vh; 
    }
    

  /* footer end */ 

  /*web wizard page*/

    
  #webwizard h4 {
    left: 5px;
    top: 10px;
    font-size: 1rem; 
    }

    #webwizard h3{
        font-size: 1rem;
    }

    #webwizard h5{
        font-size: 0.9rem;
    }

    #webwizard h6{
        font-size: 0.7rem;
        position: relative;
    }

    #webwizard li{
        font-size: 0.75rem;
        position: relative;
        right:2px;
    }


    .contents {
        margin-top: 10vh; 
        height: 100%;
        box-shadow: 0px 0px 0px 0px #062176c6;
    }

    #webwizard .info {
        padding: 10px;
        position: relative;
        top:10px;
        font-size: 0.9rem; 
    }

    #webwizard .custom-width {
        width: 90%; 
        margin: 0 auto; 
    }
    #webwizard .bg-custom{
        background-color: #094e945f;
        height: 470px;
        width: 100%;
        }
    #webwizard .cards {
        position: relative;
        left: 0%; 
        width: 100%; 
        margin: 0 auto; 
    }

    .front, .back{
        position: absolute;
        width: 100%;
        height: 90%;
    }

    .event-card-title{
        font-size: 1.6rem;
        position: relative;
        top:-1px;
    }

    #web-foot{
        position: relative;
        top: 20px;
    }

}
@media (min-width:991px) and (max-width:1024px){
    body {
        padding-top: 10%; 
    }

    #navbar{
        padding: 1.7vh 2.7vh;;
      }

    #tagline{
        overflow: hidden;
    }
    .event-name{
        font-size: 12vh;
    }

    .event-name1{
        font-size:3vh;
    }

    .event-tagline{
        font-size: 2.6vh;
    }

    /* Transition for smooth zoom */
    #tag {
        will-change: transform, opacity;
        transform: scale(0.7);
        opacity: 1;
        transition: transform 0.8s ease, opacity 0.8s ease;
    }

    #tag.fade-out {
        transform: scale(1.2);
        opacity: 0;
    }

    #tag.fade-in {
        transform: scale(1);
        opacity: 1;
    }

    #intro p{
        font-size: 2.1vh;
    }

    .custom-card{
        width: 100%;
    }

    #sc-button .btn {
        font-size: 0.8rem;
    }

    #one h2, #two h2{
        font-size: larger;
    }

    #one .checkpoint{
        max-width: 70%;
    }

    

    #two .checkpoint{
        width: 30em;
    }

    #two .checkpoint div{
        position: relative;
        align-items: center;
    }
   


    #contact-us-title h2{
        font-size: 50px;
       
    }
    #coor-title h2{
        font-size: 4vh;
    }
    #coor-title1 h2{
        font-size: 4vh;
    }

    .footer-content{
        gap:2vh;
    }

    .footer-item i {
        font-size: 3vh; 
        margin-bottom: 1.5vh; 
        transition: transform 0.3s ease , glow 0.3s ease;
    }
    
    .footer-item p {
        margin: 0;
        font-size: 1.7vh; 
    }
    .footer-content h5 {
        font-weight: 900;
        color: #00BFFF;
    }
    .footer-item a {
        color: #fff;
        text-decoration: none;
        font-weight: 900;
    }
    .mu-venue-map iframe {
        width: 63vh; 
        height: 30vh; 
        max-width: 58.5vh; 
    }
    

}

@media (min-width:1025px) and  (max-width:1300px){
    #tagline{
        overflow: hidden;
    }

}