/* Basic Reset */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}



/* Form Styling*/
.form-container{
    width: 55%;
    background-color: rgb(248, 245, 245);
    margin: auto;
    display: block;
    padding: 20px;
    border-radius: 15px;
}

.logo{
    margin-top: 00px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo img{
    height: 100px;

}

.form-title{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.form-title{
    text-align: center;
    color: green;
}
/*end of logo and form title syling */

fieldset{
    border: 3px solid green;
    border-radius: 5px;
    border-style: groove;
    margin-top: 20px;
    border-radius: 10px;
background: #ffffff;
box-shadow:  5px 5px 10px #bfbfbf,
             -5px -5px 10px #ffffff;
   
}

.form_container{
    background-color:aliceblue;
   
}
.form_header_part{
    display: block;
    align-items: center;
}


.logo{
    flex: 100%;
    align-items: center;
}
.logo img{
    height: 150px;
    width: 150px;
    margin: auto;
}
.company_name_b h1{
    font-family: 'SolaimanLipi', sans-serif;
    font-size:40px; 
    color: green;    
    letter-spacing: 3px;                                     
}
.form_title{
    flex: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.form_name{
    padding: 10px 5px;
    
}

.form_header button{
    text-align: center;
    padding: 10px 50px;
    align-items: center;
    display: flex;
    margin: auto;
    border: 2px solid green;
    border-radius: 50px;
    border-style: inset;
    background: aliceblue;
    box-shadow:  5px 5px 5px aliceblue,
             -5px -5px 5px rgb(232, 242, 250);
}

.legend_button{
    text-align: center;
    padding: 5px 30px;
    align-items: center;
    display: flex;
    font-size: 9px;
    color: black;
    margin: auto;
    border: 1px solid green;
    border-radius: 10px;
    background: linear-gradient(90deg, rgb(99, 199, 230) 10%, rgb(114, 211, 218) 90%);;
    /*box-shadow:  10px 10px 10px aliceblue,
             -10px -10px 10px rgb(232, 242, 250); */
    text-transform: uppercase;
}

legend{
    margin: 0px 30px;
    text-transform: uppercase;
    font-weight: 600;
    color: green;
    font-size: 12px;
}
.membership-part{
    display: flex;
    padding: 0px;

}


.membership-dropdown{
    display: block;
    padding: 10px;
}

.membership-dropdown select{
    border: 2px solid green;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}


.membership-content{
    margin-left: 10px;
    display: block;
}
.membership-content input[type="radio"]{
    margin-bottom: 10px;

}

.district, .upazila, .yob, .gender{
    flex: 1;
}
.district-field select{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
    text-align: center;
   
}


/* Photo styling*/


.membership-image{
    align-items: center;
    justify-items: center;
    padding: 10px;
}
.membership-image{
    height: 140px;
    width: 130px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(248, 245, 245);
    border-radius: 10px;
}
.photo{
    flex: 0.5;
    align-items: baseline;
}



.membership-qualify{
    align-items: baseline;
    justify-content: center;
     flex: 8;
    
 }

 .membership-qualify-title, .membership-title{
    margin-bottom: 0px;
    padding: 10px;
    align-items: baseline;
 }

.membership-selection {
    flex: 5;
    justify-content: center;
    align-items: baseline;
    
}
.membership-part h1{
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 10;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/*Personal information styling*/

/*Name part styling*/

.personal-information{
    margin-top: 20px;
}
.name{
    display: flex;
    gap: 20px;
    padding: 15px;
}

.first-name input, .mid-name input, .last-name input{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
}
.first-name{
    flex: 4;
    
}
.mid-name{
    flex: 2;
}
.last-name{
    flex: 4;
}

/*Year of Birth, district, upazila styling*/

.ydu{
    display: flex;
    gap: 0px 20px;
    padding: 15px;
    margin-top: -20px;
}

.yob-field input, .district-field input, .upazila-field input{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
}


.district{
    flex: 3;
}
.upazila{
    flex: 3;
}
.yob{
    flex: 2;
}

.phone-email{
    display: flex;
    gap: 0px 20px;
    padding: 15px;
    margin-top: -20px;  
}

.phone input, .email input{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
}
.phone, .email{
    flex: 1;
}

.address{
    display: flex;
    gap: 0px 20px;
    padding: 15px;
    margin-top: -20px; 
}
.address input{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
    align-items: baseline;
}
.address-line{
    flex: 1;
    
}
.city-state-zip{
    display: flex;
    gap: 0px 20px;
    padding: 15px;
    margin-top: -20px;   
}
.city input, .state input, .zip input{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
    
}
.city{
    flex: 4;
}
.state{
    flex: 1;
}
.zip{
    flex: 3;
}

/*Spouse information*/

.spouse-information {
    margin-top: 20px;
    display: block;
}
    
.spouse-name{
    display: flex;
    gap: 0px 20px;
    padding: 15px;
}
.spouse-first-name input, .spouse-last-name input, .spouse-mid-name input{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
}

.spouse-first-name{
    flex: 4;
    
}
.spouse-mid-name{
    flex: 2;
}
.spouse-last-name{
    flex: 4;
}
/*Agreement and signature  date field styling*/

.tandc{
    margin-top: 20px;
}
.agreement-content{
    padding: 15px;
    justify-content: center;
    align-items: baseline;
    text-align: baseline;
}

.agreement-content p{
    font-size: 12px;
    text-align: justify;
}

.terms{
    margin-top: 30px;
}

.signature-date{
    display: flex;
    gap: 0px 20px;
    padding: 15px;
}
.signature input, .date input{
    width: 50%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;  
    text-align: center;
}
.signature-date{
    align-items: center;
    margin: auto;
}


.date{
    flex: 2;
    text-align: center;
}


/*Payment method styling*/

.payment{
    margin-top: 20px;
}

.payment-method{
    display: flex;
    flex: wrap;
    gap: 0px 20px;
    padding: 15px;
    justify-content: space-between;
    align-items: baseline;
}

.cash, .money-order, .checks, .zelle-quick{
    display: flex;
    align-items: baseline;
   
}
.cash, .checks {
    flex:2.5;
    margin: 0px 00px;
}

.money-order, .zelle-quick{
    flex: 4.6;
}


.cash input, .money-order input, .checks input, .zelle-quick input, .payment-ref{
   
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;  
    text-align: center;
    margin-right: 10px;
}


.input-field input{
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;  
    text-align: center;
    margin-right: 10px;
}
.submit{
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
.submit-button{
    padding: 10px 10px;
    width: 70%;
    background-color: rgb(255, 255, 255);
    border: 1px solid green;
    border-radius: 5px;
}
.preview-submit {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
    margin-top: 20px;
}
.request-preview-button {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.submit-button:hover{
    background-color: green;
    color: aliceblue;
}

.submit-button-field{
    align-items: center;
    justify-content: center;
   
}

/*General Member Page styling*/
.add-member{
    align-items: center;
    text-align: center;
    padding: 20px;
}
.add-family-member button{
    border: 2px solid green;
    padding: 10px;
    border-radius: 100px;
    background-color: green;
    color: aliceblue;
}
.upload-image input{
   text-align: center;
}
.signature {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.signature-pad {
    width: 100%;
    height: 200px;
    border: 2px solid rgb(169, 180, 169);
}
.signature-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 20px;
    color: red;
    cursor: pointer;
    text-decoration: none;
}
.same_above{

    padding: 15px 10px;

  }
  .first_row select{
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid rgb(172, 212, 247);
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;
}

  .office_use{
    display: flex;
    padding: 0px  15px;
    margin-top: 10px;
    margin-bottom: 15px;
    align-items: center;
}
.first_row{
    display: block;
}

.first_column input, .second_column input{
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid rgb(172, 212, 247);
    border-radius: 5px;
    width: 100%;
    
    text-transform: uppercase;
}

.first_column{
    flex: 0 0 70%;
}
.second_column{
    flex: 0 0 30%;
}
.second_column{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.first_row{
    display: flex;
    gap: 20px;
    padding: 0px 15px;
    justify-content: center;
    align-items: center;
    
  }

  .div_signature{
    margin: 10px 0px;
    border: 1px solid green;
    height: 150px;
  }

  .approved_by_person select{
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid rgb(172, 212, 247);
    border-radius: 5px;
    text-align: center;
    text-transform: uppercase;}

  .item_1{
    flex: 1;}

.action_button_approve{
    padding: 10px 25px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgb(18, 87, 62) 10%, rgb(52, 179, 29) 90%);;
    /*box-shadow:  10px 10px 10px aliceblue,
             -10px -10px 10px rgb(232, 242, 250); */
    text-transform: uppercase;
    font-size: 15px;
    color: #ffffff;
}
.action_button_reject{
    padding: 10px 25px;
    border-radius: 10px;
    background: red;
    /*box-shadow:  10px 10px 10px aliceblue,
             -10px -10px 10px rgb(232, 242, 250); */
    text-transform: uppercase;
    font-size: 15px;
    color: #ffffff;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {

    .form{
        width: 100%;
        margin: auto;
        background-color: aliceblue;
    }
    .signature-date{
        display: flex;
        flex-direction: column;
    }

    .form_header_part{
        display: block;
        align-items: center;
    }
    .logo{
        display: block;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
   
    .form_title h1{
        font-size: 13px;
        padding: 5px 10px;
    }
    .form_title p{
        font-size: 12px;
        padding: 5px 0px;
    }
    .upload-file, .image_div{
        text-align: center;
     }
     .upload-file{
         margin-left: 56px;
     }

    .form-container{
        width: 95%;
        background-color: rgb(248, 245, 245);
        margin: auto;
        display: block;
        padding: 20px;
        border-radius: 15px;
    }
    .membership-type, .membership-qualify-content, .membership-photo{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .personal-information{
        margin-top: 30px;
    }
    .form-title h1{
        font-size: 15px;
        color: black;
    }
    .membership-part{
        flex: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: auto;
    }
    .membership-selection,.membership-qualify, .membership-photo{
        flex: 1 1 100%;
    }
    .membership-qualify-title{
        margin-bottom:-15px ;
    }

    .name{
        display: block;
        
    }
    .ydu{
        display: block;
    }
    .phone-email{
        display: block;
    }
    .city-state-zip{
        display: block;
    }
    .spouse-information{
        margin-top: 30px;
    }
    .spouse-name{
        display: block;
    }
    .payment-method{
        display: block;
    }

    .payment{
        margin-top: 30px;
    }
    .cash, .money-order, .checks, .zelle-quick{
        flex-direction: column;
        flex: 1;
        display: block;
        
    }

    .signature-date{
        display: block;
    }

    .cash input, .money-order input, .checks input, .zelle-quick input{
        margin-right: 20px;
    }

    .office_use{
        display: block;
    }

    .approve_by, .a_signature{
        display: block;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 5px 0px;
    }

    .first_row{
        display: block;}


}