#top{
    width: 100%;
    height: 50%;
    /* padding:10px; */
    /* border: 5px solid red; */
}



 #pic{
    height:1200px;
     width:100%;
     background-size: contain;
     margin: auto; 
       margin-top:20px; 
     margin-bottom: 20px;
     margin-left:20px ;
     margin-right: 70px;
     
}

form{
    padding: 10px ;
    width: 420px;
    height:auto; 
   top:130%; 
    left:50%;
    right: 50%;
    position:absolute;
      transform: translate(-50%,-50%);  
      box-sizing: border-box;
       background-color: white;
       
}  

#a{
    width:90%;
}
#b{
    width: 90%
}
#email{
    left: 40px;
}


input[type=text],input[type=password]
{
    width:100%;
    padding:12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
}

    .radio1 input[type=radio] {  
        width: 24px;
       height: 24px;
       background: #FFFFFF;
       margin: 0px 16px 15px 0px;
    }
    
button{
    background-color: black;
    color: white;
    padding: 14px 20px;
    margin:8px 0;
   
    width:100%;
    border:none;
    cursor:pointer;
    width:100%;
}
button:hover{
    opacity:0.8;
} 
#para{
    
    text-decoration: underline;
}
body{
    width: 100%;
    margin: 0;
    padding: 0;
}

/* navbar css starts  */
#nav{
    width: 100%;
    height: 50px;
    background-color: #f2f2f2;
    display: flex;
    gap: 50%;
    font-size: small;
}
.signin{
    height: 13px;
    margin-top: 10px;
    padding-right: 20px;
    padding-left: 40px;
    border-right: 1px solid gray;
}
.signin span{
    margin-right: 10px;
}

.left{
    display: flex;
    gap: 10px;
    padding: 4px;
}
.india{
    text-align: center;
    display: flex;
    padding: 4px;
    
}

.ind{

    margin-left: 10px;
    margin-top: 15%;
}
#flag{
    width: 20px;
    height: 20px;
    margin-top: 6px;
    border-radius: 50%;
}
.right{
    display: flex;
    gap: 10px;
}
.rt{
    border-right: 1px solid gray;
    padding-right: 10px;
}
.rtl{
    border: none;
}
/* navbar css ends  */

/* header css starts */
.upper-head{
    display: flex;
    /* gap: 20px; */
    justify-content: space-between;
    padding: 10px;
}
.lefthead{
    /* padding: 10px; */
    padding-left: 40px;
}
.upbtn
{
    height: 30px;
    /* padding: 20px; */
    font-size: 20px;
    border: none;
    background-color: transparent;
}
.wbtn{
    border-right: 1px solid gray;
    padding-right: 20px;
}
.mbtn{
    padding: 20px;
}
/* #mainlogo{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjc2IDI1Ij48ZGVmcz48cGF0aCBpZD0iYSIgZD0iTTAgMjQuMjFoMjc2VjBIMHoiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMjc2IDQuMTZWLjMzN2gtMTYuNDU4VjQuMTZoNi4yMzN2MTkuNzEzaDMuOTU1VjQuMTZIMjc2em0tMzcuNzY2IDE1Ljg5di02LjYzM2g2LjQ1NlY5LjU5NGgtNi40NTZWNC4xNmg5LjQ3OVYuMzM3aC0xMy40MzV2MjMuNTM2aDEzLjQzNXYtMy44MjJoLTkuNDh6bS0xOC4yNDkgNC4xNlYuMzM4aC0zLjk1NXYxNS4xMDRMMTk5LjQ2IDB2MjMuODczaDMuOTU2VjguNzdsMTYuNTcgMTUuNDR6bS0zMy4yNS0yMC4wNVYuMzM3aC0xNi40NTlWNC4xNmg2LjIzM3YxOS43MTNoMy45NTZWNC4xNmg2LjI3em0tNDQuMjYxIDkuNDgyVi4zMzdoLTMuOTU2djEzLjQ1NWMwIDYuNTIgNC4xNDIgMTAuNDE5IDkuODkgMTAuNDE5IDUuNzQ3IDAgOS44OS0zLjg5OCA5Ljg5LTEwLjQyVi4zMzhoLTMuOTU3djEzLjMwNWMwIDQuMTYtMi4xNjQgNi43NDYtNS45MzMgNi43NDYtMy43NyAwLTUuOTM0LTIuNTg2LTUuOTM0LTYuNzQ2em0tMjguNjIzLTkuODJjNC42NjUgMCA4LjIxIDMuNjM2IDguMjEgOC4yODMgMCA0LjY0Ny0zLjU0NSA4LjI4My04LjIxIDguMjgzLTQuNjY1IDAtOC4yMS0zLjYzNi04LjIxLTguMjgzIDAtNC42NDcgMy41NDUtOC4yODIgOC4yMS04LjI4MnptMCAyMC4zODljNi44MyAwIDEyLjE2Ni01LjI4NSAxMi4xNjYtMTIuMTA2QzEyNi4wMTcgNS4yODUgMTIwLjY4IDAgMTEzLjg1IDBzLTEyLjE2NiA1LjI4NC0xMi4xNjYgMTIuMTA1YzAgNi44MjEgNS4zMzYgMTIuMTA2IDEyLjE2NiAxMi4xMDZ6bS00Ni43OS00LjE2di02LjYzNGg2LjQ1N1Y5LjU5NGgtNi40NTZWNC4xNmg5LjQ3OVYuMzM3SDYzLjEwNnYyMy41MzZINzYuNTR2LTMuODIyaC05LjQ4em0tMjIuMjAzIDMuODIyaDMuOTU1Vi4zMzdoLTMuOTU1djkuMjU3SDMzLjEzOVYuMzM3aC0zLjk1NXYyMy41MzZoMy45NTVWMTMuNDE3aDExLjcxOXYxMC40NTZ6TTE2LjQ1OCA0LjE2Vi4zMzdIMFY0LjE2aDYuMjMydjE5LjcxM2gzLjk1NlY0LjE2aDYuMjd6IiBtYXNrPSJ1cmwoI2IpIi8+PC9nPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: black;
} */
.righthead{
    display: flex;
    width: auto;
    gap: 30px;
    padding-right: 50px;
    padding-top: 18px;
}
.midhead{
    width: auto;
    justify-content: center;
}

.srchrt{
    height: 28px;
   display: flex; 
   padding-right: 10px;
   border-right: 1px solid gray;
}
.iconrt{
    width: 22px;
    height: 22px;
}
#hrtop{
    width: 97%;
}
.nav-head{
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: auto;
    margin-bottom: 1px solid gray;
}

/* header css ends(if in your page beneficiary bar is present then)  */

/* beneficiary css starts here */
.benefitBar{
    display: flex;
    width: 96%;
    margin: auto;
    /* padding: 5px; */
    background-color: #f2f2f2;
    height: 40px;
    padding: 10px;
}
.benbar{
    display: flex;
    width: 100%;
    margin: auto;
    margin-top: 0px;
    display: flex;
    /* gap: 10%; */
    font-size: small;
    justify-content: space-between;
}
.cont{
    display: flex;
    height: 28px;
    margin: auto;
    padding: 2px;
}
.cont1, .cont2
{
    border-right: 1px solid rgb(230, 227, 227);
    padding-right: 1% !important;
}
.iconben{
    width: 40px;
    height: 40px;
    margin-top: 10x;
    margin-right: 20px;
}

/* beneficiary css ends here */

/* popup */

.containerh {
    position: relative;
  }
  
  .icon {
    background-color: transparent;
    cursor: pointer;
    padding: 2px 5px;
    width: fit-content;
  }  
.containerh:hover .popup {
    opacity: 1;
    display: block;
  }
  .containerh:hover .benefitBar {
    display: none;
    background-color: whitesmoke;
  }
  .popup {
    width: 1200px;
    height: 500px;
    margin-top: 18px;
    background-color: whitesmoke;
    padding: 1px 20px;
    position: absolute;
    top: 20px;
    transition: all 0.25s ease;
    opacity: 0;
    display: none;
    position: absolute;
    left: -5;
    padding: 30px;
    margin-left: 0px;
  }
  .contpop{
      display: flex;
      width: 100%;
      margin: auto;
  }
  .firstpop,.secondpop{
      width: 15%;
      text-align: center;
      margin: auto;
  }
  .thirdpopup{
      width: 60%;
      margin: auto;
      display: flex;
      justify-content: space-around;
      text-align: center;
  }
  .im3,.im4{
    width: 280px;
  }
  .firstpop{
      padding-left: 30px;
  }
  .im4{
      padding-right: 30px;
  }





  body{
    width: 100%;
    margin: 0;
    padding: 0;
}
/* footer css start */
#hrfooter{
    width: 97%;
}
/* .footer-main{
    display: flex;
} */
.footer-right-logo{
    display: flex;
    width: 50px;
    justify-content: space-between;
    gap: 20px;
}
.phone-logo{
    width: 20px;
}
.phone-no{
    display: flex;
    gap: 20px;
}
.footer-bottom-logo{
    width: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 20px;
}
.footer-main{
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: 5%;
    margin-bottom: 3%;
}
.footer-bottom{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: flex-end;
    width: 100%;
    margin: 2%;
}
.footer-bottom-txt{
    font-size: small;
    justify-content: space-between;
    /* border-left: 20px; */
    /* justify-content: end;
    justify-content: flex-end; */
    width: auto;
}
hr{
    width: 97%;
    color: rgba(216, 211, 211, 0.911) !important;
}
.mrp{
    width: 50%;
}
.footer-left-btn{
    width: auto;
    padding: 15px;
    padding-right: 94px;
}
.footer-left-sbt{
    width: auto;
    padding: 15px;
    /* padding-right: 100px; */
    font-weight: 520;
}
.social{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
    gap: 10px;
    width: 20%;
}
.s-icon{
    width: 40px !important;
}
footer{
    /* margin-bottom: 50%; */
    padding-bottom: 20px;
}

/* footer css end */