@import url('https://fonts.googleapis.com/css2?family=Charm&family=Share+Tech+Mono&display=swap');
                    /*  
  font-family: 'Charm',
  cursive;
  font-family: 'Share Tech Mono',
  monospace;
  
  */
                    
                    * {
                        margin: 0;
                        padding: 0;
                        input::-webkit-outer-spin-button,
                        input::-webkit-inner-spin-button {
                            -webkit-appearance: none;
                            margin: 0;
                        }
                    }
                    
                    @font-face {
                        font-family: myFirstFont;
                        src: url(Fontstyle/Moontank-gxrlp.otf);
                    }
                    
                    body {
                        background-color: #F5F7FF;
                        background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82.42 180h-1.415L0 98.995v-2.827L6.167 90 0 83.833V81.004L81.005 0h2.827L90 6.167 96.167 0H98.996L180 81.005v2.827L173.833 90 180 96.167V98.996L98.995 180h-2.827L90 173.833 83.833 180H82.42zm0-1.414L1.413 97.58 8.994 90l-7.58-7.58L82.42 1.413 90 8.994l7.58-7.58 81.006 81.005-7.58 7.58 7.58 7.58-81.005 81.006-7.58-7.58-7.58 7.58zM175.196 0h-25.832c1.033 2.924 2.616 5.59 4.625 7.868C152.145 9.682 151 12.208 151 15c0 5.523 4.477 10 10 10 1.657 0 3 1.343 3 3v4h16V0h-4.803c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.093.292-2.117.803-3h10.394-13.685C161.18.938 161 1.948 161 3v4c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.76 0 5 2.24 5 5v2h4v-4h2v4h4v-4h2v4h2V0h-4.803zm-15.783 0c-.27.954-.414 1.96-.414 3v2.2c-1.25.254-2.414.74-3.447 1.412-1.716-1.93-3.098-4.164-4.054-6.612h7.914zM180 17h-3l2.143-10H180v10zm-30.635 163c-.884-2.502-1.365-5.195-1.365-8 0-13.255 10.748-24 23.99-24H180v32h-30.635zm12.147 0c.5-1.416 1.345-2.67 2.434-3.66l-1.345-1.48c-1.498 1.364-2.62 3.136-3.186 5.14H151.5c-.97-2.48-1.5-5.177-1.5-8 0-12.15 9.84-22 22-22h8v30h-18.488zm13.685 0c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 148h8.01C21.26 148 32 158.742 32 172c0 2.805-.48 5.498-1.366 8H0v-32zm0 2h8c12.15 0 22 9.847 22 22 0 2.822-.53 5.52-1.5 8h-7.914c-.567-2.004-1.688-3.776-3.187-5.14l-1.346 1.48c1.09.99 1.933 2.244 2.434 3.66H0v-30zm15.197 30c-1.037-1.793-2.976-3-5.197-3-2.22 0-4.16 1.207-5.197 3h10.394zM0 32h16v-4c0-1.657 1.343-3 3-3 5.523 0 10-4.477 10-10 0-2.794-1.145-5.32-2.992-7.134C28.018 5.586 29.6 2.924 30.634 0H0v32zm0-2h2v-4h2v4h4v-4h2v4h4v-2c0-2.76 2.24-5 5-5 4.418 0 8-3.582 8-8s-3.582-8-8-8V3c0-1.052-.18-2.062-.512-3H0v30zM28.5 0c-.954 2.448-2.335 4.683-4.05 6.613-1.035-.672-2.2-1.16-3.45-1.413V3c0-1.04-.144-2.046-.414-3H28.5zM0 17h3L.857 7H0v10zM15.197 0c.51.883.803 1.907.803 3 0 3.314-2.686 6-6 6S4 6.314 4 3c0-1.093.292-2.117.803-3h10.394zM109 115c-1.657 0-3 1.343-3 3v4H74v-4c0-1.657-1.343-3-3-3-5.523 0-10-4.477-10-10 0-2.793 1.145-5.318 2.99-7.132C60.262 93.638 58 88.084 58 82c0-13.255 10.748-24 23.99-24h16.02C111.26 58 122 68.742 122 82c0 6.082-2.263 11.636-5.992 15.866C117.855 99.68 119 102.206 119 105c0 5.523-4.477 10-10 10zm0-2c-2.76 0-5 2.24-5 5v2h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-4h-2v4h-4v-2c0-2.76-2.24-5-5-5-4.418 0-8-3.582-8-8s3.582-8 8-8v-4c0-2.64 1.136-5.013 2.946-6.66L72.6 84.86C70.39 86.874 69 89.775 69 93v2.2c-1.25.254-2.414.74-3.447 1.412C62.098 92.727 60 87.61 60 82c0-12.15 9.84-22 22-22h16c12.15 0 22 9.847 22 22 0 5.61-2.097 10.728-5.55 14.613-1.035-.672-2.2-1.16-3.45-1.413V93c0-3.226-1.39-6.127-3.6-8.14l-1.346 1.48C107.864 87.987 109 90.36 109 93v4c4.418 0 8 3.582 8 8s-3.582 8-8 8zM90.857 97L93 107h-6l2.143-10h1.714zM80 99c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm20 0c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6z' fill='%23000000' fill-opacity='0.02' fill-rule='evenodd'/%3E%3C/svg%3E");
                    }
                    
                    nav {
                        background-color: rgb(0, 0, 0);
                        padding: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                    
                    nav img {
                        color: white;
                        height: 50px;
                        width: 50px;
                        box-shadow: red 10px, 10px, 10px;
                    }
                    
                    @media only screen and (max-width: 600px) {
                        .menu_section {
                            display: none;
                        }
                        form .Personal_Details {
                            flex-direction: column;
                            width: 100%;
                        }
                        .select-box {
                            width: 100%;
                        }
                        .sub_line {
                            width: 50%;
                        }
                        form .Personal_Details input {
                            width: 100%;
                        }
                        .contact_details div {
                            display: flex;
                            flex-direction: column;
                        }
                        .version {
                            display: none;
                        }
                        .made {
                            font-size: 10px;
                            margin-left: 10px;
                        }
                        /*------------------------------------------------------------------*/
                    }
                    
                    .logo_section {
                        display: flex;
                        align-items: center;
                    }
                    
                    .fir_logo {
                        border-radius: 15px;
                    }
                    
                    .logo_text {
                        color: white;
                        margin-left: 10px;
                        display: flex;
                        flex-direction: column;
                    }
                    
                    .logo_text .jofs {
                        color: rgb(255, 0, 0);
                        font-size: 30px;
                        font-weight: 600;
                        font-family: monospace;
                    }
                    
                    .logo_text .logo_name {
                        font-size: 20px;
                        font-weight: 600;
                        font-family: monospace;
                    }
                    
                    .menu_section ul {
                        display: block;
                        display: flex;
                        color: white;
                        list-style: none;
                    }
                    
                    .menu_section a {
                        cursor: pointer;
                        font-weight: 700;
                        font-family: monospace;
                        font-size: 20px;
                        color: white;
                        margin-left: 10px;
                        text-decoration: none;
                    }
                    
                    .menu_section :hover {
                        color: gray;
                    }
                    
                    .button-1 {
                        align-items: center;
                        background-color: #fff;
                        border-radius: 12px;
                        box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, .1) 0 6px 20px;
                        box-sizing: border-box;
                        color: #121212;
                        cursor: pointer;
                        display: inline-flex;
                        flex: 1 1 auto;
                        font-family: Inter, sans-serif;
                        font-size: 1.2rem;
                        font-weight: 700;
                        justify-content: center;
                        line-height: 1;
                        margin: 0;
                        outline: none;
                        padding: 1rem 1.2rem;
                        text-align: center;
                        text-decoration: none;
                        transition: box-shadow .2s, -webkit-box-shadow .2s;
                        white-space: nowrap;
                        border: 0;
                        user-select: none;
                        -webkit-user-select: none;
                        touch-action: manipulation;
                    }
                    
                    .button-1:hover {
                        scale: 1.1;
                        color: red;
                    }
                    
                    .admin_btn:hover {
                        color: red;
                    }
                    
                    .admin_btn {
                        align-items: center;
                        background-color: #fff;
                        border-radius: 5px;
                        box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, .1) 0 6px 20px;
                        box-sizing: border-box;
                        color: #121212;
                        cursor: pointer;
                        display: inline-flex;
                        font-family: Inter, sans-serif;
                        font-size: 1.0rem;
                        font-weight: 700;
                        justify-content: center;
                        line-height: 1;
                        margin: 10px;
                        outline: none;
                        padding: 5px;
                        text-align: center;
                        text-decoration: none;
                        transition: box-shadow .2s, -webkit-box-shadow .2s;
                        white-space: nowrap;
                        border: 0;
                        user-select: none;
                        -webkit-user-select: none;
                        touch-action: manipulation;
                    }
                    /*==================== TopBar================*/
                    
                    .page_title {
                        height: 50px;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    
                    .page_title span {
                        font-family: sans-serif;
                        font-size: 30px;
                        font-weight: 800;
                        color: blcak;
                    }
                    
                    .Top_bar {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                    }
                    
                    .Top_bar .T1 {
                        font-weight: 800;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 2em;
                        text-align: center;
                    }
                    
                    .Top_bar .T2 {
                        font-weight: 800;
                        font-family: sans-serif;
                        font-size: 20px;
                        text-align: center;
                    }
                    
                    .Top_bar .T3 {
                        font-family: Helvetica;
                        font-size: 20px;
                        text-align: center;
                    }
                    
                    #regitser_btn {
                        margin-top: 50px;
                    }
                    
                    footer {
                        font-family: 'Share Tech Mono';
                        color: white;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        background-color: black;
                        height: 50px;
                        width: 100%;
                        bottom: 0%;
                        position: fixed;
                    }
                    
                    .version a {
                        cursor: pointer;
                        text-decoration: none;
                        color: white;
                        padding-left: 10px;
                    }
                    
                    .made a {
                        color: whitesmoke;
                        cursor: pointer;
                        padding-right: 10px;
                        text-decoration: none;
                    }
                    
                    .made :hover {
                        color: rgb(255, 0, 0);
                    }
                    /*----------------Complain Form Css ---------------*/
                    
                    .complain_form {
                        display: flex;
                        justify-content: center;
                        margin-top: 2%;
                        margin-bottom: 20%;
                        height: auto;
                    }
                    
                    .form_title {
                        font-weight: 700;
                        font-size: 30px;
                        font-family: sans-serif;
                    }
                    
                    .Sub_title {
                        color: rgb(81, 81, 81);
                        font-weight: 500;
                        font-size: 20px;
                        font-family: sans-serif;
                    }
                    
                    hr {
                        border: 2px solid rgb(189, 187, 187);
                        border-radius: 10px;
                        width: 100%;
                    }
                    
                    .form_box {
                        background-color: white;
                        padding: 25px;
                        border-radius: 20px;
                        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
                        width: 100%;
                        margin-left: 5%;
                        margin-right: 5%;
                        padding-right: 10%;
                    }
                    /*-----------Personal_Details-------------*/
                    
                    form .Personal_Details {
                        display: flex;
                        align-items: center;
                        margin-top: 20px;
                        justify-content: space-between;
                        width: 80%;
                    }
                    
                    .red_span {
                        color: red;
                    }
                    
                    input {
                        background-color: #eee;
                        border-width: 0px;
                        padding: 12px 15px;
                        margin: 8px 0;
                        border-radius: 10px;
                    }
                    
                    select {
                        background-color: #eee;
                        border: none;
                        padding: 12px 15px;
                        border-radius: 10px;
                    }
                    /*-----------Address-------------*/
                    
                    .addrees {
                        width: 100%;
                        margin-right: 10%;
                    }
                    
                    .addrees div input {
                        width: 30%;
                        margin-right: 5%;
                    }
                    /*--------------Contact details--------------*/
                    
                    .contact_details div div {
                        display: grid;
                        flex-direction: column;
                        float: left;
                        width: 50%;
                    }
                    
                    .contact_details div div input {
                        width: fit-content;
                    }
                    
                    .contact_details div div phone_number {
                        width: fit-content;
                    }
                    
                    .contact_details:after {
                        content: "";
                        display: table;
                        clear: both;
                    }
                    /*--------------Identity_Attachment--------------*/
                    
                    .identity input {
                        width: auto;
                    }
                    
                    .identity select {
                        width: auto;
                    }
                    /*--------------Complain Details*--------------*/
                    
                    textarea {
                        font-size: 20px;
                        margin-bottom: 30px;
                    }
                    
                    @media print {
                        body {
                            font-size: 12pt;
                        }
                        .red_span {
                            color: red;
                            font-weight: 800;
                        }
                        .form_box {
                            width: 80%;
                            margin: 0 auto;
                        }
                        nav {
                            display: none;
                        }
                        footer {
                            display: none;
                        }
                    }