@import  url(https://fonts.googleapis.com/css?family=Montserrat);
html,body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*max-height: 90%;*/
    width:100%;
    height:100%;
    overflow: hidden;
   
    
}

body {
	/*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);*/
	background: linear-gradient(-45deg, #c25837, #e29fb8, #538ea3, #b57cc2,#428678);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	min-height: 100vh;
    display: flex;
    flex-direction: column;
}


@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}


.arrow {
  position: fixed;
  bottom: 0;
  left: 50.9%;
  margin-left: -20px;
  width: 20px;
  height: 20px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
  display: block;
 
}
.end{
  position:absolute;
  bottom: -99999px;
  
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}




video{
    height: 90vh;
    justify-content: center;
    position:relative;
    bottom: 0;
    right: 0;
    pointer-events: none;
  
    filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 1));
}

.video-container video {
  width: 100vw;
  height: calc(100vh - 100px); /* Adjusted to keep videos centered */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}


.container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 95vh;
}
section{
    height: 95vh;
    display:flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    width: 100%;
}

.one{
   
    background-color: none;
    

}

.two{
    background-color: none;
    

}

.three{
  background-color: none;
  position: relative;

  justify-content: center;
 

}

  
  .form {
    position: absolute;
     height: 300px;
    width: 300px;
    text-align: center; 
    align-content: center;
    font-family: Chalkduster, fantasy;

 
    

  }
  
  .info {
    padding: 10px;
      margin: 8px auto 0px auto; 
  }
 

p {
    text-align: center;
    padding: 0px;
    margin: 2px 2px;
    font-size: 80%;
    
        
  
  }
 
  p.line {
    margin: 0px auto 12px auto;
    color:black;
  }
  
  .form input {
    font-size: 16px;
    color:black;
    padding: 6px;
    margin: 15px auto 8px;
    display: block;
    width: 65%;  
    font-family:Chalkduster, fantasy;
  }
  
  input:focus {
    outline: 0;
  }
  
  .button button {
    display: inline-block;
    width: 400px;
  }
  button.accept {
    color:white;
    background-color:tomato;
    border: none;
    font-family:monospace;
    font-size: 14px;
    padding: 1px 1px;
    width: 70px;
    margin: 10px auto 0px auto; 
    align-items: center;
    display: block;
    box-shadow: 0 0 10px rgba(231, 104, 81, 0.8); /* Glow effect */
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
  
    
    
  }


  
  
  button.accept {
    border-radius: 5px 5px 5px 5px;
  }
  .login {
    border-radius: 0px 5px 5px 5px;
   }
  button:hover {
    background-color: #cc919a;
    transition: .5s;
  }
  
  button:focus {
    outline: 0;
  }
  
  .atten {
display:inline-block;
  }
 

  .notatten {
    display:inline-block;
  }
  .item:last-child {
    border-bottom: 0;
  }
  input:checked + p{
    text-decoration:underline;
    text-decoration-color: crimson;
    
  }
  input[type=checkbox] {
    width: 25px;
    height: 25px;
 }

  

/*popup*/
/* Popup Styling */
.popup {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Dark overlay */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  
    
}

/* Make sure popup container is positioned properly */
.popup-content {
  width: 300px; /* Adjust as needed */
  height: 350px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column; /* Arrange elements in column */
  justify-content: flex-end; /* Align content to bottom */
  align-items: center;
}

/* Ensure image fully covers the popup */
.popup-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill without stretching */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Create an overlay to hold text & button */
.popup-overlay {
  position: absolute;
  bottom: 0; /* Stick to the bottom */
  width: 100%;
  background: rgba(0, 0, 0, 0.6); /* Dark overlay for readability */
  color: white;
  text-align: center;
  padding: 15px;
  z-index: 2;
}

/* Ensure no shadows on text */
.popup-text {
  font-size: 20px;
  font-family: "Lucida Handwriting", cursive;
  color: white; /* Inner text color */
  text-shadow: 1px 1px 2px black; /* Simple black outline */
  margin-bottom: 20px; /* Adds space between text and button */
}
/* Adjust the overlay to improve readability */
.popup-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto; /* Adjusts to content */
  background: rgba(0, 0, 0, 0.5); /* Darker for contrast */
  color: white;
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center align text & button */
  gap: 2px; /* Space between text and button */
  z-index: 2;
}

/* Close Button */
.popup-button {
  background: transparent; /* No background */
  color: white; /* Keep text visible */
  border: 2px solid white; /* Optional: Add border */
  border-radius: 5px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s;
}

.popup-button:hover {
  background: rgba(255, 255, 255, 0.2); /* Slight highlight effect */
}


/* Bounce Animation */
@keyframes textBounce {
  0% { transform: scale(0.8) translateY(0); opacity: 0; }
  40% { transform: scale(1.1) translateY(-10px); opacity: 1; }
  60% { transform: scale(1) translateY(0); }
  80% { transform: scale(1.05) translateY(-5px); }
  100% { transform: scale(1) translateY(0); }
}


.copyright {
  text-align: center;
  font-size: 12px;
  color: rgb(245, 235, 235);
  margin-top: 0px;
  border-radius: 5px; /* Optional: adds rounded corners */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 
               0 0 10px rgba(255, 255, 255, 0.6), 
               0 0 15px rgba(255, 255, 255, 0.4); /* Glow effect */
}

/* Responsive Styles */

  @media (max-width: 768px) {
    .form {
        width: 95%;
        padding: 15px;
    }

}

@media (max-width: 480px) {
    .form {
        width: 100%;
        padding: 10px;
    }
    button.accept {
        font-size: 14px;
    }
}