@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Slab:wght@400;700&display=swap');

* {
     margin: 0;
     padding: 0;
     outline: none;
     border: none;
     text-decoration: none;
     box-sizing: border-box;
 }

::-webkit-scrollbar {
     width: 10px;
 }

::-webkit-scrollbar-track {
     box-shadow: inset 0 0 5px rgb(255, 255, 255);
     border-radius: 5px;
 }

::-webkit-scrollbar-thumb {
     background: magenta;
     border-radius: 10px;
 }

.logo {
     width: 200px;
 }

 /* -------- femme formulair --------- */
#femme-top {
     background: url('/image/back1.jpg');
     background-position: center center;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-size: cover;
     font-family: Calibri;
 }

#femme-top .titl {
     font-weight: 400;
     padding-top: 0;
     font-family: 'Noto Nastaliq Urdu', serif;
 }

#femme-top #svg_form_time {
     height: 15px;
     max-width: 80%;
     margin: 40px auto 20px;
     display: block;
 }

#femme-top #svg_form_time circle,
#femme-top #svg_form_time rect {
     fill: white;
 }

#femme-top .button {
     background: magenta;
     border-radius: 5px;
     padding: 15px 25px;
     display: inline-block;
     margin: 10px;
     font-weight: bold;
     color: rgb(255, 255, 255);
     cursor: pointer;
    transition: all 0.3s linear;
    box-shadow: 0px 2px 5px rgb(0, 0, 0, 0.5);
 }

#femme-top .button:hover {
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3), 0 0 30px rgba(255, 0, 255, 0.3), 0 0 40px rgba(255, 0, 255, 0.3);
    background: rgba(255, 0, 255, 0.2) ;
    font-size: 1.1rem;
    border: 1px solid magenta;
    color: #000;
 }

#femme-top button {
     border: none;
 }

#femme-top button:hover {
    background: rgba(255, 0, 255, 0.5) !important;
    color: #000 !important;
 }

#femme-top .disabled {
     display: none;
 }

#femme-top section {
     padding: 50px 20px 20px 20px;
     max-width: 50%;
     height: 50%;
     margin: 30px auto;
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
     border-radius: 10px;
     transition: transform 0.2s ease-in-out;
 }

#femme-top label {
     font-size: 20px !important;
     margin-bottom: 10px;
 }

#femme-top .input,
#femme-top select {
     width: 100%;
     margin: 7px 0px;
     display: inline-block;
     padding: 12px 25px;
     box-sizing: border-box;
     border-radius: 5px;
     border: 1px solid lightgrey;
     font-size: 1em;
     font-family: inherit;
     background: white;
     outline: none;
 }

#femme-top input[type=number]::-webkit-inner-spin-button,
#femme-top input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 }

#femme-top p {
     text-align: justify;
     margin-top: 0;
 }

#femme-top .text {
     margin-top: -35px;
 }

@media (max-width:500px) {
     .logo {
         width: 150px;
     }

     #femme-top .titl {
         font-size: 1.3rem;
         line-height: 35px;
     }

     #femme-top section {
         max-width: 90%;
         margin-top: -30px;
     }
 }

 /* -------- inscription formulair --------- */
#finscription-top {
     background: url('/image/islamique.jpg');
     background-position: center center;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-size: cover;
     font-family: Calibri;
 }

#finscription-top .incscrpt {
     font-family: 'Noto Nastaliq Urdu', serif;
 }

#finscription-top .all {
     margin: 20px 0 30px 0;
 }

#finscription-top .top {
     margin-top: -70px;
 }

#finscription-top .text {
    color: rgb(148, 0, 148);
    text-decoration: none;
    transition: all 0.5s linear !important;
    border-radius: 3px;
    padding-left:3px;
    font-size: 1.1rem;
    padding-right:7px;
 }

#finscription-top .text:hover {
    font-size: 1.2rem;
    border-bottom: 2px solid rgb(148, 0, 148);
 }

#finscription-top button {
     background: magenta ;
     color: #ffffff;
     transition: all 0.5s linear ;
 }

#finscription-top button:hover {
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3), 0 0 30px rgba(255, 0, 255, 0.3), 0 0 40px rgba(255, 0, 255, 0.3);
    background: rgba(255, 0, 255, 0.2) ;
    font-size: 1.1rem;
    border: 1px solid magenta;
    color: #000 !important;
 }

#finscription-top input:invalid:required,
#finscription-top select:invalid:required,
#finscription-top textarea:invalid:required {
     border-bottom: 3px solid magenta !important;
     outline: none !important;
 }

#finscription-top .info {
     color: #000000 !important;
 }

#finscription-top .card {
     background: rgba(255, 255, 255, 0.6) !important;
     backdrop-filter: blur(10px) !important;
 }

 #finscription-top .box {
     width: 17px;
     height: 17px;
     border-radius: 200px;
 }

 #finscription-top input[type=number]::-webkit-inner-spin-button,
 #finscription-top input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 }

 /* -------- fphoto formulair --------- */

 #fphoto-top {
     background-image: url('/image/backgd.jpg');
     background-position: center center;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-size: cover;
     overflow-x: hidden;
     font-family: Calibri;
 }

 #fphoto-top .title {
     color: #000 !important;
     font-size: 2rem;
     font-family: 'Noto Nastaliq Urdu', serif;
 }

 #fphoto-top .btn {
    background: magenta;
    transition: all 0.5s linear;
    color: #ffffff;
}

 #fphoto-top .up {
    cursor: pointer;
    background: magenta;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    transition: all 0.5s linear;
 }

 #fphoto-top .btn:hover,
 #fphoto-top .up:hover {
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3), 0 0 30px rgba(255, 0, 255, 0.3), 0 0 40px rgba(255, 0, 255, 0.3);
    background: rgba(255, 0, 255, 0.2) ;
    font-size: 1.2rem;
    border: 1px solid magenta;
    color: #000;
 }

 #fphoto-top .imf {
     background: magenta;
     border-radius: 10px;
 }

 
 #fphoto-top .upload-image {
     background: rgb(255, 255, 255);
     border-radius: 10px;
     border: 0.5px solid magenta;
 }

 @media (max-width:500px) {

     #fphoto-top .title {
         font-size: 1.2rem !important;
         line-height: 35px;
     }

     #fphoto-top .bst {
         font-size: .8rem;
     }
 }