@font-face { font-family: Emirates-Bold; src: url("https://c.ekstatic.net/shared/fonts/emirates/emirates-bold-v3.eot#iefix") format("embedded-opentype"), url("https://c.ekstatic.net/shared/fonts/emirates/emirates-bold-v3.woff2") format("woff2"), url("https://c.ekstatic.net/shared/fonts/emirates/emirates-bold-v3.woff") format("woff"), url("https://c.ekstatic.net/shared/fonts/emirates/emirates-bold-v3.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f6f6f6;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    height: 55px;
}
nav {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 70%;
    height: 100%;
}
nav div {
    height: 100%;
}

.lite {
    text-align: center;
    margin-top: 70px;
    font-size:50px;
    color: #333333;
    font-family: Emirates-Bold,Helvetica,Arial,Lucida Grande,sans-serif;
}
.lift {
    font-family: Helvetica,Arial,Lucida Grande,sans-serif;
    text-align: center;
    color: #333333;
    font-size: 19px;
}
main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.containergrids {
    width: 62%;
    display: flex;
    align-items: center;
    padding: 30px 50px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    margin-top: 30px;
    background-color: #fff;
    min-height : 300px;
}

.grid1 {
    width: 50%;
    height: 100%;
    /* border: 1px solid red; */
    min-height: 300px;
}
.grid2 {
    width: 50%;
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.lb {
    color: #333333;
    font-weight: 600;
    font-size: 18px;
}
.divinput {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    width: 100%;
    font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
}
.twahachtha {
    height: 55px;
    width: 75%;
    border: 1px solid #333;
    padding-left: 20px;
    font-size: 17px;
    color: #333;
    border-radius: 4px;
    box-shadow: inset 3px 3px 0px 0px #f6f6f6;
}
.twahachtha::placeholder {
    color: black;
}
.nssit {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 75%;
    margin-top: 6px;
    padding-left: 20px;

}
.rd {
    color: #c60c30;
    font-size: 14px;
    text-decoration: underline;
}
.rmb {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #333333;
}
.checkbox {
    height: 20px;
    width:  20px;
    accent-color: #c60c30;
    cursor: pointer;
}
.divsbmt {
    display: flex;
    align-items: center;
    width: 80%;
    justify-content: center;
}
.sbmtbtn {
    height: 45px;
    width: 100%;
    color:  #fff;
    background-color: #c60c30;
    font-weight: 500;
    font-size: 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.sbmtbtn:hover {
    opacity: 0.9;
}
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}
.fpcc {
    width: 100%;
}

.containergrid2 {
    width: 60%;
}
.nae {
    font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
    color: #333;
    font-size: 19px;
    margin-bottom: 10px;
    font-weight: 600;
}
.rnt {
    font-size: 13px;
    margin-bottom: 10px;
}
.ul {
    cursor: pointer;
    text-decoration: underline;
}
.jn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.jnn {
    width: 100%;
    height: 35px;
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 3px;
    margin-top: 10px;
    cursor: pointer;
    transition: 0.3s;
}
.jnn:hover {
    opacity: 0.9;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.1);
}
.separator {
    width: 1px;
    height: 100%;
    border-left: 1px solid #d8d8d8;
    min-height: 300px;
    position: relative;
}
.spr {
    position: absolute;
    top: 50%;
    z-index: 20;
    transform: translate(-50%,-30%) rotate(90deg);
    width: 48px;
    height: 48px;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImEiIGN4PSIyMyIgY3k9IjIzIiByPSIyMyIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIHRyYW5zZm9ybT0icm90YXRlKDkwIDIzIDI0KSI+PHVzZSBmaWxsPSIjRkZGIiB4bGluazpocmVmPSIjYSIvPjxjaXJjbGUgc3Ryb2tlPSIjQzdDN0M3IiBjeD0iMjMiIGN5PSIyMyIgcj0iMjMuNSIvPjwvZz48cGF0aCBkPSJNMzEuOTggMjguMDAxbDMuNjIuMDAzYS40LjQgMCAwMS4yNTguNzA3bC01LjU3NyA1LjE3MWEuNS41IDAgMDEtLjY0NiAwbC01LjQ5NC01LjE3NWEuNC40IDAgMDEuMjYtLjcwNWgzLjU4NWEzNjkuNTIgMzY5LjUyIDAgMDAwLTUuMTQ1Yy0uMDE3LTEuNjcuNDY2LTQuNDM3LTEuOTgtNy44NTcgNS44NTMgMCA2LjAzNSA1LjkwOCA2LjAwNSA3Ljg1Ny0uMDIgMS4yOTktLjAzIDMuMDEzLS4wMyA1LjE0NHpNMTYuMDIgMjFsLTMuNjItLjAwM2EuNC40IDAgMDEtLjI1OC0uNzA3bDUuNTc3LTUuMTcxYS41LjUgMCAwMS42NDYgMGw1LjQ5NCA1LjE3NWEuNC40IDAgMDEtLjI2LjcwNWgtMy41ODVhMzY5LjUyIDM2OS41MiAwIDAwMCA1LjE0NWMuMDE3IDEuNjctLjQ2NiA0LjQzNyAxLjk4IDcuODU3LTUuODUzIDAtNi4wMzUtNS45MDgtNi4wMDUtNy44NTcuMDItMS4yOTkuMDMtMy4wMTMuMDMtNS4xNDR6IiBmaWxsPSIjQzdDN0M3Ii8+PC9nPjwvc3ZnPg==);
}
#cg1 {
    justify-content: center;
    width: 35%;
}
#grido1 {
    width: 100%;
}
#aze {
    width: 80%;
}
.bohdi {
    width: 100%;
    display: flex;
    justify-content: center;
}
#di {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#fm {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.wr {
    width: 80%;
    margin-left: 5px;
}
@media (min-width:300px) and (max-width:1000px) {
 .grid2 {
    display: none;
 }   
 .wr {
    width: 100%;
 }
 .grid1 {
    width: 100%;
 }
 .separator {
    display: none;
 }
 .twahachtha {
    width: 92%;
    font-size: 14px;
 }
 .rd {
    width: 100%;
    display: flex;
    justify-content: start;
    padding-left: 0px;
 }
 .nssit {
    width: 100%;
    justify-content: end;
    display: flex;
    padding-left: 0px;
 }
 .lift {
    font-size: 14px;
 }
 
 .containergrids {
    display: flex;
    justify-content: center;
    width: 80%;
    padding-left: 20px;
    padding-right: 20px;
 }
 .lite {
    font-size: 30px;
 }
 .divsbmt {
    width: 100%;
    justify-content: center;
 }
 .sbmtbtn {
    width: 100%;
 }
 footer {
    display: none;
 }
 #cg1 {
    width: 95%;
 }
 #aze {
    width: 100%;
 }
}