@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body
{
    background-image: url(https://www.royalenfield.com/content/dam/royal-enfield/india/login/sign-up/banner-3.jpg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#signH1
{
    font-size:25px;
    font-weight:200px;
    margin-top: 40px;
    margin-bottom: 19px;
}

#acceptCond
{
    margin-top: 18px;
}

.signupCont
{
    width: 90%;
    background-color: rgb(229,227,227);
    margin: auto;
    margin-top: 290px;
    /* margin-bottom: 200px; */
    padding-bottom: 70px;
}
.nav
{
    display: flex;
    padding: 50px 2px;
    border-bottom: solid 2px #8e8e8e;
    margin-top: 50px;
}
.nav>div
{
    width: 33%;
}
img
{
    width: 60px;
    height: 55.78px;
}
.nav>div>p
{
    text-align: center;
    margin: 5px  50px;
}
#inpt>div
{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 10px 50px;
    gap: 80px;
}
#genF,#genM,#ownY,#ownN
{
    margin-right: 8px;
    margin-top: 5px;
    margin-left: 5px;
}
#inpt>div>div>input
{
    width: 100%;
    height: 50px;
    padding-left: 10px;
    font-size: 16px;
    background-color: #e5e3e3;
    border: 2px solid grey;
    font-family: "Libre Franklin", sans-serif;
}
select
{
    width:102.7% ;
    height: 50px;
    font-size: 16px;
    padding-left: 8px;
    background-color: #e5e3e3;
}
#inpt>div
{
    height: 50px; 
 }  
.gen>div
{
    display: flex;
    justify-content: flex-start;
}
h1
{
    text-align: center;
    font-weight: 700px;
}
#gend
{
    margin-bottom: 10px;
}
.gen>p
{
    margin-top: 0px;
}
p,span,input,button{
    font-weight: 500;
}
.cond
{
    padding: 20px 50px;
}
.humanV
{
    display: flex;
    background-color: white;
    justify-content:space-between;
    padding: 10px;
    align-items: center;
    width: 245px;
    margin: auto;
    margin-top: 50px;
}
.recapI
{
    height: 60px ;
    width: 60px;
    margin-right: 10px;
}
.recaptch
{
    height: 30px;
    width :30px;
    margin-right: 10px;
}
.humanV>div
{
    align-items: center;
}
.humanV>div>span
{
    margin-top: -100px;
}
a{
    color: black;
    font-weight: 700;
}
.humanV>div
{
    display: flex;
}
.createA
{
    height: 45px;
    width: 17%;
    margin-top: 50px;
    align-items: center;
}
.orSignUp
{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
}
.orSignUp>button:nth-child(1)
{
    background-color: rgb(24,51,146);
}
.orSignUp>button:nth-child(2)
{
    background-color:rgb(207,82,82) ;

}
.orSignUp>button:nth-child(3)
{
    background-color:rgb(79,185,238) ;
}
.orSignUp>button
{
    color: white;
    padding: 10px;
    width: 70%;
    text-align: center;
    border: 0px;
    font-size: 16px;
    font-weight: bold;
}
.logI
{
    height:35px;
    width:10%
}
.createA
{
    color:black;
    background-color: rgb(239,227,227);
    transition:background-color .5s;
    font-family: 'Montserrat', sans-serif;
}
.createA:hover
{
    color:white;
    background-color: black;
}

.logI
{
    color:black;
    background-color: #e5e3e3;
}
.logI a{
    font-weight: bold;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
}
.logI a:hover{
    text-decoration: none;
}
.logI:hover
{
    filter: invert(1);
}
button,.createA,.gen>div>input
{
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

input[type="submit"]{
    border: 2px solid black;
    background-color: inherit;
    font-weight: bold;
    font-size: 16px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* #dobtext{
    display: inline-block;
    margin-bottom: 5px;
} */

/* New part */

/* .radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
  }
  .radio_input {
    display: none;
  }
  .radio2 {
    width: 1.25em;
    height: 1.25em;
    border: 2px solid dimgray;
    border-radius: 50%;
    margin-right: 8px;
    box-sizing: border-box;
    padding: 2px;
  }
  .radio2::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: red;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.15s;
  }
  .radio_input:checked + .radio2::after {
    transform: scale(1);
  } */


  .radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
  }
  .radio_input {
    display: none;
  }
  
  .radio2 {
    width: 1.25em;
    height: 1.25em;
    border: 2px solid dimgray;
    border-radius: 50%;
    margin-right: 8px;
    box-sizing: border-box;
    padding: 2px;
  }
  
  .radio2::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: red;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.15s;
  }
  
  .radio_input:checked + .radio2::after {
    transform: scale(1);
  }




/* MEDIA QUERIES */

@media all and (max-width:767px)
    {
             #inpt>div
                {
                    display: grid;
                    grid-template-columns: repeat(1,1fr);
                    grid-template-rows: repeat(2,0px);
                }
            .orSignUp
                {
                        display: grid;
                        grid-template-columns:   repeat(1,1fr);
                        row-gap: 10px;
                }
             .orSignUp>button,.logI,.createA
                    {
                        width: 95%;
                    }
             #inpt>div
                    {
                        height: 140px; 
                     }  

            .signupCont
                     {
                         width: 101%;
                        background-color: rgb(229,227,227);
                        margin-top: 150px;

                    }
                    
             /* .createA,.logI
                     {
                           color:white;
                          background-color: black;
                    } */
             .cond
                   {
                         margin-top: -80px;
                   }
            .humanV
                {
                      margin-bottom: -50px;
                }

                .logI a{
                    font-weight: bold;
                    font-size: 16px;
                    font-family: 'Montserrat', sans-serif;
                    text-decoration: none;
                }
                .logI a:hover{
                    text-decoration: none;
                }
                /* .logI:hover
                {
                    filter: invert(1);
                } */
                #footerIconsDiv{
                    display: none;
                }
       }
@media all and (max-width:400px)
{
                    .nav
                {  
                    display: grid;
                    grid-template-columns: repeat(1,1fr);
                    justify-content: center;
                    margin-bottom: 15px;
                } 
                .nav>div
                {
                    min-width: 390px;
                }

                #footerIconsDiv{
                    display: none;
                }
}