@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');
*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root{

  --cc-bright-purple: #A41896;
  --cc-lilac: #A677D8;
  --cc-green: #97C229;
  --cc-dark-purple: #592C82;
  
  --banner-grad1:  var(--cc-green);
  --banner-grad2: var( --cc-lilac);

  --color-purple: #6A3B8E;
  --color-litePurple: #aa15ac;
  --color-red: #C50000;
  --color-green: #5B9D2C;
  --color-orange: #F77B00;
  --color-light-blue: #A1BFD4;
  --color-yellow: #FFD700;
  --color-pink: #FF008C;
  --color-dark-green: #006400;
  --color-teal: #00A896;
  --color-dark-blue: #3C5D8F;
}

body{
   font-family: "Poppins", sans-serif;
 
 
}

h1{

    font-weight: 400;
    font-size: 82px;
}

img{
    width: 100%;
}


.container{

    flex-direction: column;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;

}

.bannerVideo{
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;

}

.videoOverlay{
    position: absolute;
    background-color: black;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    z-index: 1;
    opacity: .2;
    mix-blend-mode:darken;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.contentOverLay{

    position: absolute;

    width:100%;
    height: 100%;
    top:0;
    left:0;
    z-index: 2;
    padding:10%;
    display: flex;
    align-items: center;
   justify-content: center;
   flex-direction: column;
   padding-left:10%;
   padding-right:10%;
  
   

}

.mainlogo{



  width: 100px;
  position: absolute;
  top: 5%;
  left:5%;
  text-align: center;
  z-index: 10;

  p{
    font-size: .6rem;
    color: white;

  };
  
    
}



.classCountDownContainer{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:100%;
  height:100%;
  background-color: #00000053;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  h2{
    margin-bottom: 8px;
  }
}

.timebox{
    display: flex;
    gap: 5rem;
    color: white;
    border-bottom: 1px solid white;
     border-top: 1px solid white;
   
    align-items: center;
    justify-content: center;
    height: 20%;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.time{
    text-align: center;
}



.bottomFixedContainer{
    background-color: var(--cc-lilac);
    position: absolute;
    bottom: 0;
    height: 128px;
    z-index: 50;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
   
    
    opacity: .8;




}



    .bottomLinks{
        z-index: 30;

        width: 32px;
        
        svg{
            width: 100%;
            fill: white;
            
        }


    }



h1{
  
    font-size: 5rem;
    line-height: 4rem;
    background-color:#ffffff4f;
    padding: 2rem;
    border-radius: 4px;
    
}

h2{

  font-size: 3rem;
      font-weight: 200;
      line-height: 3rem;

}

h3{

    font-weight: 200;
    font-size: 2rem;
  
}


h4{

    font-weight: 200;
    font-size: 1.5rem;
  
}

.signUpform{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.eo-form-wrapper{
  border: none;


}

.footer{

  height: 300px;
  background-color: var(--cc-dark-purple);
}





@media only screen and (max-width: 987px) {
 
      h2{

      font-size:2rem;
      font-weight: 200;
          margin-bottom: 4px;

      }

      p{
        font-size: 12px;
      }
     

      .timebox{
      
        gap:2rem;

      }

         .videoAndBookingForm{
        flex-direction: column;

        height: 100%;
          .left{
          width: 100%;
      

          }

          .right{
            width: 100%;        
      
          }
        
      }



}
/* end of tablet query */



@media only screen and (max-width: 600px) {

  .footerForm{

 display: flex; flex-direction: column; width: 100%;
            gap:8px; margin-top:8px; justify-content: center; align-items: center; text-align: center;


}

 

     h2{

      }

      .timebox{
        gap:1rem;
      }


      /* cc svg size on mobile */
      .overlay {

      svg{
        width: 100%;

      }
      }



      section.homePageContactForm{
  height: 100%;


  .formAndImageHolder{
    display: flex;
    flex-direction: column;

      .left{
        width: 100%;

      }
       .right{
        width: 100%;
        
      }
  }
}


  
  }