/* 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 */


legend{
    margin: 0px 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: green;
    font-size: 15px;
    padding: 0px 5px;
}

fieldset{
    border: 1px 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;
    
}

.legend_button{
    text-align: center;
    padding: 5px 30px;
    align-items: center;
    display: flex;
    color: black;
    margin: auto;
    font-size: 12px;
    letter-spacing: 1.3px;
    border: 1px solid green;
    border-radius: 10px;
    background: linear-gradient(40deg, 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;
}

.membership-dropdown, .membership-dropdown1{
   
    padding: 10px;
}

.membership-dropdown select{
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box
}

.membership-dropdown1 select{
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    padding: 3px;
    
}


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

}


/* Photo styling*/


.membership-image{
    align-items: center;
    justify-items: center;
    padding: 10px;
}
.membership-image table{
    height: 140px;
    width: 130px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(248, 245, 245);
    border-radius: 10px;
}
.photo{
    flex: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}


.membership-qualify select{
    padding: 3px;
    box-sizing: border-box;
    width: 100%;
}

.membership-qualify{
    align-items: baseline;
    justify-content: center;
    
     text-align: center;
     display: block;
    
 }
 
 .membership-part{
    display: block;
    gap: 10px;
    margin-top: 10px;
    flex-direction: row;
    padding: 0px 00px;
    align-items: baseline;
   }
   .membership-qualify-content{
    display: flex;
    margin: auto;
    padding: 10px;
    width: 59%;
    gap: 10px;
    align-items: center;
    text-align: center;
   }
   .membership-title, .membership-dropdown{
    flex: 1;
    text-align: center;
    align-items: center;
   }

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

.membership-type {
    flex: 4;
    justify-content: center;
    align-items: baseline;
    text-align: center;
   
    
}
.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: 0px 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*/

.ydug{
    display: flex;
    gap: 0px 20px;
    padding: 15px;
    margin-top: -20px;
    align-items: center;
}

.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;
    text-transform: uppercase;
}

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


.district, .upazila, .yob, .gender{
    flex: 1;
}


.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;
}

.phone-relation{
    display: flex;
    gap: 0px 20px;
    padding: 15px;
    margin-top: -20px;
}
.phone1, .relation{
    flex: 1;
}

.phone1 input, .relation select{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
}
.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; 
    align-items: center;  
}
.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;
}


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

.dob input, .dod input, .pod input{
    width: 100%;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    padding: 5px;
    margin: 5px 0px;
    text-align: center;
    text-transform: uppercase;
}

.dob, .dod, .pod{
    flex: 1;
}
/*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;
}
   


.agreement-content input[type="checkbox"] + label::before{
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid green;
}
.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;
}





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

.signature table{
    height: 100px;
    width: 100%;   
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(169, 180, 169);
    border-radius: 5px;
    background-color: white;
}

/*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{
   
    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: 15px 0px;
    justify-content: space-between;
    align-items: center;
    
}
.submit-button{
    text-align: center;
    padding: 5px 30px;
    align-items: center;
    display: flex;
    color: black;
    margin: auto;
    border: 1px solid rgb(34, 223, 213);
    border-radius: 10px;
    background: linear-gradient(40deg, rgb(82, 186, 218) 10%, rgb(114, 211, 218) 90%);;
    /*box-shadow:  10px 10px 10px aliceblue,
             -10px -10px 10px rgb(232, 242, 250); */
    text-transform: uppercase;
}

.submit-button-field{
    display: flex;
}

.submit-button:hover{
    background-image:aliceblue;
    color: rgb(27, 81, 129);
    
}



/*General Member Page styling*/
.add-member{
    margin-top: 20px;
    align-items: center;
    text-align: center;
    padding: 15px 0px;
}
.add-family-member button{
    border: 2px solid green;
    padding: 5px;
    border-radius: 10px;
    background-color: green;
    color: aliceblue;
    width: 100%;
}

/*Funeral Application styling Starts Here*/

/*Font awesome*/
.submit-button i{
    padding: 5px;
    color: rgb(29, 37, 29);
}

.submit-button i:hover{
    color: white;
}

.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;
}

.add-family-member {
    font-size: 20px ;
}
h3{
    font-size: 10px;
}
.form-header{
    display: flex;
    padding: 00px;
    gap: 10px;
}
.member-type-section{
    flex: 2;
    text-align: center;
    padding: 10px;
}
.service-type{
    flex: 2;
    text-align: center;
    padding: 10px;
}
.service-type-other{
    flex: 2;
    text-align: center;
    padding: 10px;
}
.burial-site{
    flex: 2;
    text-align: center;
    padding: 10px;
}

.member-type-section h3, .service-type h3, .service-type-other h3, .burial-site h3{
   padding: 10px;
}



.descendent-info{
    margin-top: 20px;
}

.membership-option select, .service-option select, .burial-option select {
    width: 100%;
    position: relative;
    padding: 3px; /* Adjusts padding inside the dropdown box */
    box-sizing: border-box; /* Ensures padding doesn’t change width */
    font-size: 12px; /* Adjust font size as needed */
    text-align: center;
    border: 1px solid rgb(169, 180, 169);
    
    border-radius: 5px;
    outline: none;
   

}

::placeholder{
    text-align: center;
    text-transform: capitalize;
    
}

.relation select{
    text-align: center;
    
}

.paymentinformation{
    margin-top: 20px;
}

.payment-information{
    display: block;
    padding: 15px;
}
.life-member{
    display: flex;
    gap: 10px;
    text-align: center;
    align-items: center;
    
}
.life-member-ny, .life-member-nj{
    flex: 1;
}
.life-member-ny, .life-member-nj{
    display: block;
}
.life-member-text{
    display: flex;
    padding: 10px 0px;
    gap: 5px;
}
.life-member-ny input[type=text], .life-member-nj input[type=text]{
    width: 100%;
    padding: 5px;
    border: 1px solid rgb(169, 180, 169);
   box-sizing: border-box;
    border-radius: 5px;
}

.intro{
    margin-top: 20px;
    padding: 10px;
   }

.introduction .signature input, .introduction .date input{
    width: 100%;
}
.introduction{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.signature, .date{
    flex:1;
}





/*Funeral Application styling Ends Here*/

/*Office use information part*/
.office_part{
    display: flex;
}
.membership_information{
    flex: 0 0 70%;
}

.approval{
    flex: 0 0 30%;
    
}

.signature-pad{
    padding: 15px 10px;
}

.approval_signature{
    justify-content: center;
    align-self: center;
    display: block;
    margin: auto;
    text-align: center;
}


.approved_by{
    display: block;
}

.approved_by h2{
    font-size: 16px;
    text-align: center;
}
.approval{
    display: block;
   align-items: center;
}

.signature_approve {
    padding: 5px;
    width: 100%;
    display: block;
    align-items: center;
    text-align: center;
}
.t_signature_date{
    display: flex;
    padding: 10px;
}

.t_date, .t_signature{
    flex: 0 0 50%;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.t_date input{
    padding: 5px;
    width: 100%;
    border: 1px solid gray;
    border-radius: 5px;
}

.t_date{
    padding: 50px 10px;
}

.signature_approve button{
    padding: 5px 5px;
    border: 1px solid gray;
    border-radius: 5px;
    margin: auto;
}

.member_id_details{
    display: block;
}
.life_member_1, .life_member_2, .amount_number, .amount_receipt{
    flex: 0 0 50%;
    padding: 10px;
}

.office{
    margin-top: 20px;
}
.members{
    display: flex;
}
.life_member_1 input, .life_member_2 input, .amount_receipt input, .amount_number input{
    width: 100%;
    padding: 5px;
    border: 1px solid gray;
    border-radius: 5px;
}

.amount_details{
    display: flex;
}
.amount_number, .amount_receipt{
    flex: 0 0 50%;
}

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

    .form-container{
        width: 90%;
        background-color: rgb(248, 245, 245);
        margin: auto;
        display: block;
        padding: 10px;
        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: 12px;
        color: green;
    }
    .membership-part{
        display: block;
        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;
    }

    .signature input, .date input{
        width: 90%;
        border: 1px solid rgb(169, 180, 169);
        border-radius: 5px;
        padding: 5px;
       
        text-align: center;
    }

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

    .city-state-zip, .dob-dod-pod{
        display: block;
    }

    .signature-date{
        display: block;
    }

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

    /*Funeral Styling Starts here*/

    .form-header{
        flex: flex;
      
       padding: 20px;
       
    }
    
    .members{
        display: block;
    }

    .form-header{
        display: block;
        padding: 10px;
        margin-top: 20px;
       
    }
    
    .membership-option select, .service-option select, .burial-option select {
        width: 100%;
        padding: 5px; /* Adjusts padding inside the dropdown box */
        box-sizing: border-box; /* Ensures padding doesn’t change width */
        font-size: 12px; /* Adjust font size as needed */
        text-align: center;
        border: 1px solid rgb(169, 180, 169);
       
        border-radius: 5px;
    
    }
    
    
    .member-type-section h3, .service-type h3, .service-type-other h3, .burial-site h3{
       padding: 5px 0px;
       margin-top: -10px;
       font-size: 15px;
       text-align: center;
    }

    /*Descendednt information styling starts here*/
        .descendent-info{
            margin-top: 20px;
        }

        .phone-relation{
            display: block;
        }
        
        .relation select{
            text-align: center;
        }

        .life-member{
            display: block;
        }
       .intro{
        margin-top: 20px;
       }
       .membership-qualify-content{
        display: flex;
        margin: auto;
        padding: 0px 10px;
        width: 100%;
        gap: 0px;
        align-items: center;
        text-align: center;
       }
       .membership-qualify-content{
        display: block;
        gap: 10px;
        flex-direction: row;
        padding: 0px 10px;
       }
       .membership-title{
        flex: 1;

       }

       .photo{
        margin-top: 20px;
       }
       
       .image-box img{
        
        display: flex;
        margin: auto;
        align-items:center ;
       }
       .image-file input{
        padding: 15px 0px;
        align-items: center;
        text-align: center;
        margin-left: 55px;
       
       }
       
       .image-file {
        display: block;
        margin: auto;
        align-items:center;
        text-align: center;
       }
       
       .membership-dropdown{
        flex: 1;
       }

       .signature-pad{
        border: 2px solid rgb(169, 180, 169);
        border-radius: 10px;
       }
    /*Descendednt information styling starts here*/
    
    /*Funeral styling ends here*/
    .submit-button i{
        padding: 10px;
    }
    
    .submit-button{
        padding: 0px;
        width: 100%;
        background-color: rgb(255, 255, 255);
        border: 1px solid rgb(169, 180, 169);
        border-radius: 5px;
    }
    .introduction{
        display: block;
        
        
    }
    legend{
        text-align: center;
        text-transform: uppercase;
        font-weight: 600;
        color: green;
        font-size: 15px;
        padding: 0px 5px;
    }
    .form-header-section h3{
        font-size: 12px;
    }

    .amount_details{
        display: block;
    }

    .member_id_details, .office_part, .t_signature_date{
        display: block;
    }

    .t_date{
        padding: 0px;
    }
}