/* import google font family */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,600&display=swap');
/* selecting everything */
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

:root{
   --bg-color: #F5F5F5;
   --button-color: #1B3764;
   --button-text-color: #FFFFFF;
   --second-bg-color: #323946;
   --text-color: #fff;
   --main-color: #1B3764;
   --input-field: #E0E0E0;
   --input-field-text: #000000;
   --header-background: #1B3764;
   --card-background: #E0E0E0;
}

body {
 font-family: 'Open Sans', sans-serif, helvetica, Arial;
 font-weight: 400;
 font-size: 14px;
 
}

.header {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   height: 70px;
   padding: 2rem;
   background: var(--header-background);
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 100;
}

.header img {
   width: 19rem;
   height: auto;
}

.header .sticky {
   border-bottom: 1rem solid rgba(0, 0, 0, .2);
}
.navbar a {
   font-size: 16px;
   color: #fff;
   margin-left: 15px;
   transition: .3s;
   text-decoration: none;
}

.navbar a:hover,
.navbar a:active {
   color: var(--second-bg-color);
}

#menu-icon {
   display: none;
   font-size: 24px;
   cursor: pointer;
}

.nomination-container{
   width: 100%;
   min-height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;
}
#contact {
 background-color: Grey(220, 255, 66, 0.7);
 padding: 20px;
 margin-inline: auto;
}
#contact input, button {
 font: 400 15px 'Open Sans', sans-serif, helvetica, Arial;
}
#contact h1 {
 font-size: 35px;
 font-weight: bold;
 text-align: center;
 color: var(--button-color);
}
#contact h3 {
 margin: 5px 0px 15px;
 text-align: center;
}
.row {
 display: flex;
 width: 100% !important;
 padding: 20px 0px;
}
.row .column {
 margin: 0px 20px;
 width: 50%;
}
fieldset {
 border: medium none !important;
 margin:  0 0 10px;
 min-width: 100%;
 width: 100%;
}
#contact input {
 width: 100%;
 border: 1px solid rgb(150, 150, 150);
 background-color: white;
 padding: 10px;
 margin: 5px 0;
 border-radius: 7px;
}
input[type = "radio"] {
 width: 10% !important;
}
#contact .row .radio {
 border: 1px solid rgb(150, 150, 150);
 background-color: white;
 margin: 7px 0 10px;
 padding: 5px;
 border-radius: 7px;
}
#contact .row .idCard{
 display: flex;
 height: 45px !important;
 margin: 5px 0;
}
#contact .row .idCard :first-child {
 width: 80px;
}
#contact .row .idCard :last-child {
 width: 40px;
}
#contact .row #phone {
 max-width: 100% !important;
 padding-right: 80px;
}
#contact input:hover {
 transition: border-color 0.3s ease-in-out;
 border: 1px solid rgb(68, 68, 68);
}
#contact .btn{
   display: flex;
   flex-direction: row;
   justify-content: center;
}
#contact .btn:hover{
 opacity: 0.8;   
}
    

#contact button {
 outline: none;
 border: none;
 background-color: var(--button-color);
 color: var(--button-text-color);
 font-size: 17px;
 width: 100%;
}
 
#contact input:focus {
 outline: 0;
 border: 1px solid red;
}
 
/* mobile responsive mode */
@media screen and (max-width: 580px)  {
 .row {
  flex-direction: column;
 }
 .row .column {
  width: 90% !important;
 }
 #contact .row #phone {
 padding-right: 180px;
}
}
.gender{
    
    justify-content: space-around;
}
@media only screen and (max-width:414px){
    .text{
       visibility:collapse;
    }
    .phonetext{
       visibility:visible;
    }
 }

 @media (max-width: 768px) {
   .navbar {
         display: none;
         flex-direction: column;
         gap: 10px;
         background-color: var(--header-background);
         position: absolute;
         top: 60px;
         right: 0;
         width: 150px;
         padding: 10px 0;
         justify-content: center;
         align-items: center;
      }
   
   
   
      .navbar a {
         padding: 10px 20px;
         color: var(--text-color);
         margin-left: 0;
      }
   
      .header img {
         max-width: 150px;
      }
   
      .navbar a:hover {
         color: var(--main-color);
      }
   
      #menu-icon {
         display: block;
         font-size: 30px;
         color: #fff;
      }
   
      .navbar.show {
         display: flex;
      }
   
      .slide-down {
         display: flex;
         animation: slideDown 0.5s forwards;
      }
   
      .slide-up {
         animation: slideUp 0.5s forwards;
      }
   
      @keyframes slideDown {
         from {
            max-height: 0;
            opacity: 0;
         }
   
         to {
            max-height: 200px;
            opacity: 1;
         }
      }
   
      @keyframes slideUp {
         from {
            max-height: 200px;
            opacity: 1;
         }
   
         to {
            max-height: 0;
            opacity: 0;
         }
      }
   }