body {
    padding: 0px;
    margin: 0px;
  }
  * {
    box-sizing: border-box;
  }
  body {
    font-family: Verdana, sans-serif;
  }
  a{
    text-decoration: none !important;
  }
  .mySlides {
    display: none;
  }
  img {
    vertical-align: middle;
  }
  .topbar {
    background-color: black;
    text-align: center;
    padding: 10px;
    color: white;
    font-size: 25px !important;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .topbar{
    font-size: 30px;
    font-weight: 900;
    margin-top: 0px;
    padding: 5px;
  }

  /* Slideshow container */
  .slideshow-container {
    width: 100%;
    height: 95vh;
    position: relative;
  }
  .overlay {
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9990;
  }

  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* The dots/bullets/indicators */
  .dot {
    height: 0px;
    width: 0px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active {
    background-color: #717171;
  }

  /* Fading animation */
  .fadee {
    animation-name: fadee;
    animation-duration: .5s;
  }

  @keyframes fadee {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }
  .main-content{
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 9997;
    text-align: center;
  }
  .signinform{
    display: none;

  }

  .question_part2{
    display: none;
  }
  .question_part3{
    display: none;
  }
  .main-content h1{
    text-align: center;
    color: black;
    font-size: 40px;
    font-weight: 900;
    /* text-shadow:0px 2px 5px black; */
    margin-bottom: 40px;
    font-family: 'Secular One', sans-serif;
    text-transform:uppercase;
  }
  .main-content h3{
    text-align: center;
    color: black;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-shadow: none;
    text-transform:uppercase;
    font-family: 'Secular One', sans-serif !important;
    margin-top: 20px;
  }
  .questions {
    display: flex;
    justify-content: center;
    gap: 30px;
  }
  .questions img {
    border-radius: 25px;
    transition: 0.2s;
    width: 300px;
    cursor: pointer;
    border: 7px solid #8b523d;
    
  }
  .questions .question1{
    text-align: center;
    color: white;
    font-size: 25px;
    font-weight: 800;
    text-shadow: 2px 4px black;
  }
  .questions h1{
    color: white;
    font-size: 40px;
    font-weight: 800;
    text-shadow: 1px 2px black;
  }
  .questions .question2{
    text-align: center;
  }
  .questions img:hover {
    box-shadow: 0px 0px 40px black;
  }
  .questions img:clicked {
    box-shadow: 0px 0px 50px white;
  }

  .signin .fblogin{
    background-color: #3B67BF;
    width: 100%;
    padding: 20px;
    text-align: center;
    color:white;
    font-weight: 800;
    border-radius: 10px;
    margin-top: 30px;
    transition: .2s;
  }
  .signin .fblogin:hover{
    opacity: .8;
    cursor: pointer;
  }
  .signin .googlelogin{
    background-color: #CF4332;
    width: 100%;
    padding: 20px;
    text-align: center;
    color:white;
    font-weight: 800;
    border-radius: 10px;
    margin-top: 30px;
  }
  .signin .googlelogin:hover{
    opacity: .8;
    cursor: pointer;
    transition: .2s;
  }
  .signin .loginbtn{
    background-color: black;
    width: 100%;
    padding: 20px;
    text-align: center;
    color:white;
    font-weight: 800;
    border-radius: 10px;
    margin-top: 30px;
  }
  .signin .loginbtn:hover{
    opacity: .8;
    cursor: pointer;
    transition: .2s;
  }
  .msg{
    width: 400px;
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9997;
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    color: white;
    font-size: 20px;
    font-weight: 800;
    display: none;
    border-radius: 30px;
    box-shadow:
    0px 0px 7.8px rgba(0, 0, 0, 0.042),
    0px 0px 17.2px rgba(0, 0, 0, 0.062),
    0px 0px 28.8px rgba(0, 0, 0, 0.077),
    0px 0px 43.4px rgba(0, 0, 0, 0.089),
    0px 0px 62.6px rgba(0, 0, 0, 0.1),
    0px 0px 88.6px rgba(0, 0, 0, 0.111),
    0px 0px 125.7px rgba(0, 0, 0, 0.123),
    0px 0px 182.5px rgba(0, 0, 0, 0.138),
    0px 0px 281.3px rgba(0, 0, 0, 0.158),
    0px 0px 500px rgba(0, 0, 0, 0.2)
  ;
  animation-name: popingup;
  animation-duration:  .6s;
  }
  .msg1{
    width: 400px;
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9997;
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    color: white;
    font-size: 20px;
    font-weight: 800;
    display: none;
    border-radius: 30px;
    box-shadow:
    0px 0px 7.8px rgba(0, 0, 0, 0.042),
    0px 0px 17.2px rgba(0, 0, 0, 0.062),
    0px 0px 28.8px rgba(0, 0, 0, 0.077),
    0px 0px 43.4px rgba(0, 0, 0, 0.089),
    0px 0px 62.6px rgba(0, 0, 0, 0.1),
    0px 0px 88.6px rgba(0, 0, 0, 0.111),
    0px 0px 125.7px rgba(0, 0, 0, 0.123),
    0px 0px 182.5px rgba(0, 0, 0, 0.138),
    0px 0px 281.3px rgba(0, 0, 0, 0.158),
    0px 0px 500px rgba(0, 0, 0, 0.2)
  ;
  animation-name: popingup;
  animation-duration:  .6s;
  }
  .msg2{
    width: 400px;
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9997;
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    color: white;
    font-size: 20px;
    font-weight: 800;
    display: none;
    border-radius: 30px;
    box-shadow:
    0px 0px 7.8px rgba(0, 0, 0, 0.042),
    0px 0px 17.2px rgba(0, 0, 0, 0.062),
    0px 0px 28.8px rgba(0, 0, 0, 0.077),
    0px 0px 43.4px rgba(0, 0, 0, 0.089),
    0px 0px 62.6px rgba(0, 0, 0, 0.1),
    0px 0px 88.6px rgba(0, 0, 0, 0.111),
    0px 0px 125.7px rgba(0, 0, 0, 0.123),
    0px 0px 182.5px rgba(0, 0, 0, 0.138),
    0px 0px 281.3px rgba(0, 0, 0, 0.158),
    0px 0px 500px rgba(0, 0, 0, 0.2)
  ;
  animation-name: popingup;
  animation-duration: .6s;
  
  }

  @keyframes popingup {
    0%{
      width: 0px;
      padding:0px;
      font-size: 0px;
    }
    100%{
      width: 400px;
      padding: 20px;
      font-size: 20px;
      font-weight: 800;
    }
  }

  .mobile-img{
    display: none;
  }

  .inputForm{
    display:none;
  }
  .inputForm input{
    width: 50%;
    padding: 8px;
    font-size: 17px;
    font-weight: 700;
    outline: none;
  }
  .inputForm .submitbtn{
    padding: 10px 40px;
    font-size: 20px;
    font-weight: 700;
    background-color: black;
    margin-top: 20px;
    transition: .2s;
    color: white;
    border-radius: 6px;
  }
  .inputForm .submitbtn:hover{
    opacity: .8;
    cursor: pointer;
  }

  @media(max-width:1000px){
    .left-side{
      display: none !important;
    }
    .mobile-img{
      display: block;
    }
    .main-content h1{
      text-align: center;
      color: black;
      font-size: 30px;
      font-weight: 800;
      text-shadow:none;
      margin-bottom: 60px;
    }
    .questions {
      display: flex;
      justify-content: center;
      gap: 100px;
    }
    .questions img {
      border-radius: 30px;
      transition: 0.2s;
      width: 300px !important;
      cursor: pointer;
      
    }
    .main-content{
      width: 800px;
      height: 400px;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
    }
    .msg{
      width: 400px;
      padding: 20px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
      background-color: rgba(0,0,0,0.8);
      color: white;
      font-size: 18px;
      font-weight: 800;
      display: none;
      border-radius: 30px;
      box-shadow:
      0px 0px 7.8px rgba(0, 0, 0, 0.042),
      0px 0px 17.2px rgba(0, 0, 0, 0.062),
      0px 0px 28.8px rgba(0, 0, 0, 0.077),
      0px 0px 43.4px rgba(0, 0, 0, 0.089),
      0px 0px 62.6px rgba(0, 0, 0, 0.1),
      0px 0px 88.6px rgba(0, 0, 0, 0.111),
      0px 0px 125.7px rgba(0, 0, 0, 0.123),
      0px 0px 182.5px rgba(0, 0, 0, 0.138),
      0px 0px 281.3px rgba(0, 0, 0, 0.158),
      0px 0px 500px rgba(0, 0, 0, 0.2)
    ;
    animation-name: popingup;
    animation-duration:  .6s;
    }
    .msg1{
      width: 400px;
      padding: 20px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
      background-color: rgba(0,0,0,0.8);
      color: white;
      font-size: 18px;
      font-weight: 800;
      display: none;
      border-radius: 30px;
      box-shadow:
      0px 0px 7.8px rgba(0, 0, 0, 0.042),
      0px 0px 17.2px rgba(0, 0, 0, 0.062),
      0px 0px 28.8px rgba(0, 0, 0, 0.077),
      0px 0px 43.4px rgba(0, 0, 0, 0.089),
      0px 0px 62.6px rgba(0, 0, 0, 0.1),
      0px 0px 88.6px rgba(0, 0, 0, 0.111),
      0px 0px 125.7px rgba(0, 0, 0, 0.123),
      0px 0px 182.5px rgba(0, 0, 0, 0.138),
      0px 0px 281.3px rgba(0, 0, 0, 0.158),
      0px 0px 500px rgba(0, 0, 0, 0.2)
    ;
    animation-name: popingup;
    animation-duration:  .6s;
    }
    .msg2{
      width: 400px;
      padding: 20px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
      background-color: rgba(0,0,0,0.8);
      color: white;
      font-size: 18px;
      font-weight: 800;
      display: none;
      border-radius: 30px;
      box-shadow:
      0px 0px 7.8px rgba(0, 0, 0, 0.042),
      0px 0px 17.2px rgba(0, 0, 0, 0.062),
      0px 0px 28.8px rgba(0, 0, 0, 0.077),
      0px 0px 43.4px rgba(0, 0, 0, 0.089),
      0px 0px 62.6px rgba(0, 0, 0, 0.1),
      0px 0px 88.6px rgba(0, 0, 0, 0.111),
      0px 0px 125.7px rgba(0, 0, 0, 0.123),
      0px 0px 182.5px rgba(0, 0, 0, 0.138),
      0px 0px 281.3px rgba(0, 0, 0, 0.158),
      0px 0px 500px rgba(0, 0, 0, 0.2)
    ;
    animation-name: popingup;
    animation-duration: .6s;
    
    }
  
    @keyframes popingup {
      0%{
        width: 0px;
        padding:0px;
        font-size: 0px;
      }
      100%{
        width: 400px;
        padding: 15px;
        font-size: 18px;
        font-weight: 800;
      }
    }
  
  }

  @media(max-width:825px){
    .desktop-img{
      display: none;
    }
    .mobile-img{
      display: block;
    }
    .main-content h1{
      text-align: center;
      color: black;
      font-size: 30px !important;
      font-weight: 800;
      text-shadow:none;
      margin-bottom: 30px;
      margin-top: 50px;
    }
    .questions {
      display: flex;
      justify-content: center;
      gap: 30px;
    }
    .questions img {
      border-radius: 30px;
      transition: 0.2s;
      width: 300px !important;
      cursor: pointer;
      
    }
    .main-content{
      width: 800px;
      height: 400px;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
    }
  }



  @media(max-width:550px){
    .inputForm input{
      width: 250px !important;
      padding: 8px;
      font-size: 17px;
      font-weight: 700;
    }
    .desktop-img{
      display: none;
    }
    .mobile-img{
      display: block;
    }
    .main-content h1{
      text-align: center;
      color: black;
      font-size:25px !important;
      font-weight: 800;
      text-shadow:none;
      margin-bottom: 30px;
      margin-top: 50px;
    }
    .questions {
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    .questions img {
      border-radius: 30px;
      transition: 0.2s;
      width: 150px !important;
      cursor: pointer;
      
    }
    .main-content{
      width: 800px;
      height: 400px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
    }
    .msg{
      width: 200px;
      padding:10px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
      background-color: rgba(0,0,0,0.8);
      color: white;
      font-size: 15px;
      font-weight: 800;
      display: none;
      border-radius: 30px;
      box-shadow:
      0px 0px 7.8px rgba(0, 0, 0, 0.042),
      0px 0px 17.2px rgba(0, 0, 0, 0.062),
      0px 0px 28.8px rgba(0, 0, 0, 0.077),
      0px 0px 43.4px rgba(0, 0, 0, 0.089),
      0px 0px 62.6px rgba(0, 0, 0, 0.1),
      0px 0px 88.6px rgba(0, 0, 0, 0.111),
      0px 0px 125.7px rgba(0, 0, 0, 0.123),
      0px 0px 182.5px rgba(0, 0, 0, 0.138),
      0px 0px 281.3px rgba(0, 0, 0, 0.158),
      0px 0px 500px rgba(0, 0, 0, 0.2)
    ;
    animation-name: popingup;
    animation-duration:  .6s;
    }
    .msg1{
      width: 200px;
      padding: 10px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
      background-color: rgba(0,0,0,0.8);
      color: white;
      font-size: 15px;
      font-weight: 800;
      display: none;
      border-radius: 30px;
      box-shadow:
      0px 0px 7.8px rgba(0, 0, 0, 0.042),
      0px 0px 17.2px rgba(0, 0, 0, 0.062),
      0px 0px 28.8px rgba(0, 0, 0, 0.077),
      0px 0px 43.4px rgba(0, 0, 0, 0.089),
      0px 0px 62.6px rgba(0, 0, 0, 0.1),
      0px 0px 88.6px rgba(0, 0, 0, 0.111),
      0px 0px 125.7px rgba(0, 0, 0, 0.123),
      0px 0px 182.5px rgba(0, 0, 0, 0.138),
      0px 0px 281.3px rgba(0, 0, 0, 0.158),
      0px 0px 500px rgba(0, 0, 0, 0.2)
    ;
    animation-name: popingup;
    animation-duration:  .6s;
    }
    .msg2{
      width: 200px;
      padding: 10px;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9997;
      text-align: center;
      background-color: rgba(0,0,0,0.8);
      color: white;
      font-size: 15px;
      font-weight: 800;
      display: none;
      border-radius: 30px;
      box-shadow:
      0px 0px 7.8px rgba(0, 0, 0, 0.042),
      0px 0px 17.2px rgba(0, 0, 0, 0.062),
      0px 0px 28.8px rgba(0, 0, 0, 0.077),
      0px 0px 43.4px rgba(0, 0, 0, 0.089),
      0px 0px 62.6px rgba(0, 0, 0, 0.1),
      0px 0px 88.6px rgba(0, 0, 0, 0.111),
      0px 0px 125.7px rgba(0, 0, 0, 0.123),
      0px 0px 182.5px rgba(0, 0, 0, 0.138),
      0px 0px 281.3px rgba(0, 0, 0, 0.158),
      0px 0px 500px rgba(0, 0, 0, 0.2)
    ;
    animation-name: popingup;
    animation-duration: .6s;
    
    }
  
    @keyframes popingup {
      0%{
        width: 0px;
        padding:0px;
        font-size: 0px;
      }
      100%{
        width: 200px;
        padding: 10px;
        font-size: 15px;
        font-weight: 800;
      }
    }
  
  }