*{
    margin: 0;
    padding: o;
    box-sizing: border-box;
  
}
body{background-color: rgba(0, 0, 0, 1);}
.imgbox{background-image: url('./assets/Images/Background image.png');

padding: 10px;}   
#img{
  
     height: 630px;
     width: 100%;
     background-repeat:no-repeat;
     color: white; 
   padding-top: 240px;
    text-align: center;
    }
   
    .para1{font-size: 52px;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}
    
    .para2{font-size:24px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;padding: 8px;}
   
    .para3{font-size: 20px;font-family:sans-serif;padding: 19px;color: white;text-align: center;}
    .logos{height: 42px;
          box-shadow: 0 1px 9px black;
          width: 11.5%;
          position: absolute;
          top: 22px;
           margin-left: 30px;} 
           .logo{height: 42px;
            box-shadow: 0 1px 9px black;
            width: 11.5%;
            position: absolute;
            top: 22px;
             margin-left: 30px;} 

           .sign{text-decoration: none;
          color: white;
              border: 1px solid red; 
            background-color: red;
          border-radius: 3px;
        position: absolute; 
      top:20px;
      right: 30px;
      text-align: center; 
     padding: 5px;
    width: 70px;
  height: 30px;}     
  .sign{font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;} 
  .sign:hover{background-color: rgba(255, 0, 0, 0.879);}
       #email{background-color:rgba(0, 0, 0, 0.39);
           
        border: 1px solid rgba(255, 255, 255, 0.39);
        padding: 10px;
        width: 365px;
       
        height: 50px;
        border-radius: 4px;}
        #emails{background-color:rgba(0, 0, 0, 0.39);
           
          border: 1px solid rgba(255, 255, 255, 0.39);
          padding: 10px;
          width: 365px;
         
          height: 50px;
          border-radius: 4px;}

       #email::placeholder {
        color:white;      } 
        #email[type="email"]{color: white;}
       
       #submit{ color: white;
                background-color: red;
              height: 44px;
              
              width: 130px;
              margin-top:13px ;
              font-size: 18px;
            border-radius: 3px;
            border: 1px solid red;}
        #submit:hover{ background-color:rgba(255, 0, 0, 0.845) ;
          border: 1px solid rgba(139, 0, 0, 0.886);}

          .ques{color: white;
            text-align: center;
          font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin-top: 40px;
      
        font-size: 50px;}
       
        #quesgrid{display: grid;
          margin-left:140px;
          margin-right:140px;
        background-color: rgba(255, 255, 255, 0.18);
       font-size: 22px;
        text-align:start;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     margin-top: 28px;
     margin-bottom: 25px;
      color: white;}
    .question span{position:absolute;
                  right: 160px;
                 
                  font-size:30px ;
                  }

      .question{border-bottom: 7px solid black;
      padding: 22.5px; transition: background-color 0.3s ease;
       }
    .question:hover span{
                         transform: rotate(40deg);}
       .question:hover{cursor: pointer;
        border-bottom: 2px solid black;
      background-color: rgba(255, 255, 255, 0.08);} 
.ans{padding-top: 10px;
 display: none;
  width: 100%;
  padding: 20px;
  opacity: 0;
 
         border-bottom: 7px solid black;}
        
         .click:hover .ans{display: block;
       opacity: 1;}


       .tooltip2{display:none;
                 position: absolute;
                top: 48px;
                height: ;
                padding: 1px;
                right: 107px;}
                .hid{padding-top:6px;padding-bottom:4px;}
       .lgengs{padding-top:5px;}
       .lghis{padding-bottom:3px;}
       .lgengs{background-color:white;color:black;border-radius:5px;padding-left:25px;padding-right:30px;}
       .lghis{background-color: white;color:black;padding-left:33px;padding-right:38px;border-radius:5px;} 

      
                      
      .lghis:hover{background-color:blue;color:white}
     
     .lgengs:hover {
        background-color: blue;
        color: white;
      }
      

          .tools3:hover .tooltip2{display:block; } 
      
       .sspan{font-size: 20px;margin-left: 6px;margin-top: -13px;position: absolute;}

       .tool2{color: rgba(255, 255, 255, 0.984);
                font-size:  14px;
             border: 0.4px solid rgba(255, 255, 255, 0.301);
                position: absolute;
                background-color: rgba(0, 0, 0, 0.071);
                top: 16px;
                right: 110px;
                text-align: center; 
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                padding: 8px;
                cursor: pointer;
              width:110px;
              border-radius: 3px;
            }

           
            
            .lang2{width: 15px;
                         position:absolute;
                           margin-left: -70px;
                          margin-top:4px;}

          /*sign in page*/
         
         .formbody{ background-color: rgba(128, 128, 128, 0);
        padding: 20px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.386)}
         
          .form{width: 100%;
            height:100%;
      background-color: rgba(0, 0, 0, 0.281);}
       .s{
        color: white;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        margin-top: 90px;
       font-size: 27px;
        position: relative;
       }
       #em{background-color: rgba(255, 255, 255, 0.187);
      border: 0.1px solid rgba(255, 255, 255, 0) ;
      margin-top:30px; 
      width: 100%;
      color: white; 
      padding: 15px;
      height: 46px;
    border-radius:3px ;}
    #em[type="email or phone number"]{color: white; margin-left: ;}
         
          #pass::placeholder{padding: px;}
        #pass{background-color: rgba(255, 255, 255, 0.187); 
          border: 1px solid rgba(255, 255, 255, 0) ;
          padding: 15px;
          color: white;
           margin-top: 20px;
          width: 100%;
          height: 46px;
        border-radius:3px ;}
        
       
        #sub{ background-color: red; 
          color: white;
          border: 1px solid black;
          cursor: pointer;
          font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
        width: 100%;
          margin-top: 30px;
          margin-bottom:10px ;
          font-size: 15px;
         height: 46px;
        border-radius:3px } 
        
        .checkbox{width: 25px;
          position: relative;
          right: 5px;
       }
      .ck{color: rgba(255, 255, 255, 0.664);
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      font-size: 12px; 
      margin-left: -13px;
      margin-top: -10px;
    }
   

    
    /*
    .checkbox + label::before
      content: "";
      position: absolute;
      left: -18px;
      top: 10px;
      width: 13px;
      height: 11px;
      border: 2px solid #000;
      background-color: #fff;
    }
    .checkbox + label::after {
      content: "";
      position: absolute;
      left: -15px;
      top: 3px;
      width: 10px;
      height: 9px;
      background-color: #ff0000; /* Change to your desired color */
  /*    opacity: 0; /* Hide the checkmark by default */
  /*  }
    
    /* Show the checkmark when the checkbox is checked *//*
    .checkbox:checked + label::after {
      opacity: 1;
    } 
    */
    #help{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-size: 12px;
     display: flex;
     justify-content: end;
     margin-left: 105px;
     margin-top: -16px;
    }
    #help>a{color: rgba(255, 255, 255, 0.668);
      text-decoration: none;
    
      cursor: pointer;} 
      .pas{margin-left: 18px ;font-size: 18px;color: rgba(255, 255, 255, 0.605);margin-top: 30px;}

#help:hover{text-decoration: underline;
            }
            .pa{color: rgba(255, 255, 255, 0.443) ;
            font-size: 16px;
            
             margin-top: 27px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;}
            .home{color: white;
            text-decoration: none;} .home:hover{text-decoration: underline;} 
            .pa button{   background-color: black;cursor: pointer;}
            .pa button:hover{text-decoration: underline;
           }
            .pt{color: blue;
           text-decoration: none;}
            .pt:hover{text-decoration: underline;} 
            .tool{text-decoration: none;}
          #tooltip{display: none;}
          .tool:hover #tooltip{display: block;}

          .flex-a{background-color: rgba(0, 0, 0, 0.023);}
          .flex-b{display: grid;
              grid-template-columns: auto auto auto ;
              list-style-type: none; 
               
              margin-top: 10px;
              margin-left: px;
                background-color: rgba(0, 0, 0, 0);}
              .flex-b>li{ background-color: ;
                margin: 10px ;
                margin-left: 20px;
                color: white;
                margin-right: px;
                padding: -10px;
               font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                font-size: 12.5px;}
              .flexf{color: white;}
              li>a{text-decoration: none;}
              .logosign{ width: 150px;margin-left: 12px ;height: 43px;margin-top:-15px ;width: 150px;margin-left: 12px ;height: 43px;margin-top:-15px ;   
              
                height: 49px;
                box-shadow: 0 1px 9px black;
                width: 153px;
                position: absolute;
                top: 12px;
                 margin-left: 10px;}

              .tool1{color: rgba(255, 255, 255, 0.765);
                font-size:  14px;
                border: 0.4px solid rgba(255, 255, 255, 0.217);
                margin-left:22px ;
                text-align: center; 
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                padding: 10px; 
                margin-right: -80px;
                cursor: pointer;
              width:110px;
              border-radius: 3px;
            }.tooltip1 {z-index: 1;}
           
            .lang{width: 15px;
                         position:absolute;
                           margin-left: -70px;
                          margin-top:4px;}