:root{
    --box-shadow-color: grey;

}



.calculator_bond{
    width:100%;
    height:auto;
    box-sizing:border-box;
    /*background:blue;*/
    /*border:2px solid blue;*/
    background:white;
    position:relative;
    z-index:3;
    display:flex;
    justify-content: center;
    padding:50px 0;

}


.calculator_bond_center{
    width:90%;
    height:auto;
    /*border:3px solid purple;*/
    margin-top:30px;
    max-width:1700px;
    display:flex;

}

.load_bond_left{
    width:60%;
    height:auto;
    /*border:4px solid black;*/
    padding:10px 0;
}




.load_attributes{
    display:flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;

}

.load_parameters{
    width:90%;
    height:auto;
    display:flex;
    align-items: center;
    column-gap: 30px;
    justify-content: center;
}

.load_appliance_gti{
    width:35%;
    height:auto;
    padding:7px 0;
    /*border:2px solid red;*/
    display:flex;
    justify-content: center;
    align-items:center;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 1px darkgreen;
    color:darkgreen;
    text-align: center;
    font-size:15px;

}

.load_appliance_gti.head, .load_quality_gti.head, .load_load_gti.head{
    background:var(--button-color);
    color:white;
    box-shadow: 1px 3px 2px 1px darkgreen;

}

.load_quality_gti{
    width:20%;
    height:auto;
    padding:7px 0;
   
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 1px darkgreen;
    color:darkgreen;
    font-size:15px;
}

.quantity_number_variable{
    display:flex;
   justify-content:flex-end;


    width:100%;
    /*background:red;*/
    /*height:40px;*/
}

.quantity_number_text{
    /*display:none;*/

}

.load_number_x{
    width: 50%;
    color:black;
    display:none;
    margin-right:10px;

    outline:none;
    border:none;
}


.load_load_gti{
    width:20%;
    height:auto;
    padding:7px 0;
     /* border:2px solid brown; */
    display:flex;
    justify-content: center;
    align-items:center;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 1px darkgreen;
    color:darkgreen;
    font-size:15px;
}


.load_number_variable{
    display:none;
}







.checked_load{
    border:2px solid rgb(151, 228, 8);
    background:red;
}




/* create custom check box */

/* Hide the default checkbox */

.check_box{
    display:flex;
    justify-content: center;
    align-items: center;
    width:24px;
    height: 24px;
    border:3px solid darkgreen;
    cursor: pointer;
    border-radius: 5px;
}

.check_box.active{
    border: 3px solid darkgreen;
}

.checked_icon{
    opacity:0;
    transition:all 0.2s linear;
}

.checked_icon.active{
    opacity:1;
    transition:all 0.2s linear;
}


.checked_icon img{
    width:20px;
    height:20px;
}






.load_bond_right_center{
    width:90%;
    height:auto;
    padding:10px 0;
    border:2px solid var(--button-color);
    border-radius: 20px;
}


.load_bond_right{

    width:35%;
    height:auto;
    /*border:4px solid green;*/
    display:flex;
    justify-content: center;

}

.load_bond_right_center{
    display:flex;
    flex-direction: column;
    align-items: center;
    row-gap:30px;
}

.total_load_bond_text{
    margin-top:25px;
}

.down_arrow_icon img{
    width:20px;
    height:15px;
}

.hr_line{
    width:80%;
    height:2px;
    background:green;
}

.capacity_all{
    width:100%;
    height:auto;
    padding:10px 0;
    display:flex;
    flex-direction: column;
    align-items: center;
    /*row-gap:10px;*/
}

.capacity_load_title{
    width:80%;
    height:40px;
    border-radius:5px;
    background:var(--button-color);
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
}

.capacity_load_value{
    background: #e7eae7;
    width:80%;
    height:40px;
    display:flex;
    justify-content: center;
    align-items: center;
}







@media screen and (max-width:1500px){
   .calculator_bond_center{ max-width:1300px; }
}


@media screen and (max-width:1000px){
    .calculator_bond_center{
        flex-direction: column;
        row-gap: 50px;
    }

    .load_bond_left{
        width:100%;
    }

    .load_bond_right{
        width:100%;
        margin-bottom:100px;
    }

    .calculator_bond{

    }

    .load_bond_right{
        margin-bottom:0;
    }



}


@media screen and (max-width:700px){
    .load_appliance_gti, .quantity_number_text, .load_number_text{
        font-size:13px;
        text-align: center;
    }
}



@media screen and (max-width:450px){

    .calculator_bond_center, .load_bond_left{
        width:100%;
        /*background: red;*/
        /*justify-content: center;*/
        align-items: center;
    }

    .load_bond_right{
        width:90%;
    }

    .check_box{
        width:15px;
        height:15px;
    }

    .checked_icon img{
        width:12px;
        height:12px;
    }

    .load_parameters{
        column-gap:10px;
    }

    .load_appliance_gti, .load_load_gti, .load_quality_gti{
        font-size:14px;
    }
    .quantity_number_text, .load_number_text{
        font-size:10px;
        text-align: center;
    }

    .calculator_bond{
        padding-top:15px;
    }


}


.contact_form_bond{
    width:100%;
    box-sizing:border-box;
    height:auto;
    /*border:2px solid blue;*/
    background:white;
    display:flex;
    justify-content: center;

}

.contact_form_center{
    width:82%;
    height:auto;
    /*border:3px solid red;*/
    padding:40px 0;
    display:flex;

}

.contact_form_left{
    width:55%;
    height:600px;
    /*border:2px solid black;*/
    display:flex;
    flex-direction: column;
    row-gap:20px;
}

.contact_cnt{
    width:80%;
    height: 40px;
    /*border:2px solid blue;*/
    display:flex;
    align-items: center;
    column-gap:10px;
}

.contact_cnt_icon{
    width:40px;
    height:40px;
    /*background:red;*/
    display:flex;
    justify-content: center;
    align-items: center;
}

.contact_cnt_icon img{
    width:30px;

}

#telephone_icon img{
    width:17px;
    transform:rotate(30deg);

}

#contact_cnt_title{
    font-weight:700;
    font-size:20px;
}

/*Pseudo Pseudo */
#contact_cnt_title::after{
    content:'';
    width:105px;
    height:3px;
    background: green;
    position: absolute;
    margin-bottom:-28px;
    margin-left:0;

}

#contact_cnt_inst{
    font-size:28px;
    font-weight:600;
}

#contact_cnt_fu_inst{
    font-size:19px;
    font-weight:500;
    line-height: 25px;
    margin-bottom:10px;
}






.contact_form_right{
    width:45%;
    height:600px;
    /*border:3px solid green;*/
}





















/*contact section */


:root{
    --vh: 1vh;

}











/* Beginning Modal box */ /* Beginning Modal box */
#processing {
    display:none;
}
#processing img{
    width:25px;
}


.dboxx{
    position:fixed;
    background:rgba(154, 151, 151, 0.7) !important;
    width:100%;
    height:100%;
    z-index: 8;
    align-items: center;
    justify-content: center;
    display:none;
    transform:scale(0,0);



}

.dbox_inside{
    width:100%;
    height:300px;
    /*background:;*/
    max-width:400px;
    /* border:3px solid rgb(118, 131, 242); */
    background:white;
    transform:scale(0,0);



}

.icons{
    width:100%;
    height:40px;
    /* background:yellow; */
    display: flex;
    align-items: center;
    margin-top:10px;
}

.left_icon{
    width:50%;
    margin-left:20px;
}

.close_button{
    width:50%;
    display:flex;
    justify-content: flex-end;
    margin-right:20px;
}

.close_button button{
    width:60px;
    height: 30px;
    background:red;
    color:white;
    border:none;
    cursor:pointer;
}

.close_button button:hover{
    background:rgb(248, 16, 16);
}



.center_icon{
    width: 100%;
    display:flex;
    justify-content: center;
    margin-bottom:10px;
}
.center_icon img{
    width:50px;
    height:50px;
}


.d_first{
    width:100%;
    text-align: center;
    font-size:30px;
    padding:10px 0;
    font-weight: bold;
    color:rgb(2, 24, 76);
}

.d_sec{
    width:100%;
    text-align: center;
    font-size:18px;
    margin-top:20px;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: "Montserrat", sans-serif;
    color:rgb(2, 24, 76);
}



@media screen and (max-width:450px){
    .dbox_inside{
        width:100%;
        height:300px;
        /*background:;*/
        max-width:350px;
        /*        margin-left:-10px;*/

    }

    .d_first{
        font-size:25px;
    }
}

@media screen and (max-width:365px){
    .dbox_inside{
        width:100%;
        height:300px;
        /*background:;*/
        max-width:320px;
        margin-left:-10px;

    }

    .d_first{
        font-size:22px;
    }

    .d_sec{
        font-size:15px;
    }
}






/* End Modal box */ /* End Modal box */







/*Beginning of Contact form*/


.bottom_contact_right {
    width: 100%;
    height: auto;
    /*border:2px solid blue;*/
    display:flex;
    flex-direction: column;
    row-gap: 25px;
    align-items: center;
    background: #d0f4d0;
    padding-top:30px;
    padding-bottom:50px;
}


.b_c_l_tl{
    width:90%;
    height:auto;
    /*border:2px solid red;*/
    display:flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    padding:5px 0;
    /*background:white;*/
    text-align: center;

}

#have_pj{
    font-size:27px;
    font-weight: bold;
}

#send_us{
    font-size:18px;
    color:var(--text_color);
    line-height:30px;
}

.b_c_l_fm{
    width:90%;
    height:auto;
    /*border:2px solid red;*/
    display:flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    padding:5px 0;
    background:white;
    text-align: center;

}

.b_c_l_fm input{

    width:95%;
    height:30px;
    outline: none;
    border:0;


}

.b_c_l_fm ::placeholder{
    /*color:red;*/
    font-size:15px;
}

.b_c_l_fm textarea{
    outline:none;
    border:0;
    width:95%;
}
.contact_form_title_head{
    font-weight: bold;
    font-size:20px;
    letter-spacing:0.5px;
    /*background:red;*/
    /*width:100%;*/
    color:var(--button-color);
}


/*Pseudo element for underline*/
.contact_form_title_head::after{
    content: '';
    width:90px;
    height:3px;
    background: var(--button-color);
    display:block;
    margin:0 auto;
    position:relative;
    top:5px;
}

.button_container{
    width:90%;
    height: auto;
    padding:10px 0 5px 0;
}

button{
    width:140px;
    height:40px;
    background: var(--button-color);
    border:none;
    color:white;
    font-weight: 520;
    cursor: pointer;
    border-radius:5px;
    font-size:14px;
    letter-spacing: 0.5px;
    display:flex;
    justify-content: center;
    align-items: center
}

button:hover {
    background: var(--button-hover-color);

}



/* Mobile view for contact section */

@media screen and (max-width: 900px){
    .contact_bond{
        width:90%;
        /*background:red;*/
        height:auto;
        padding:20px 0 20px 0;
    }

    .top_contact_bond{
        flex-direction: column-reverse;
        width:100%;
        height:auto;
    }

    .top_contact_left{
        width:100%;
    }

    .top_contact_right{
        height:400px;
        width:100%;
    }






    .bottom_contact_bond {
        width: 100%;
        height:auto;
        flex-direction: column;
        row-gap: 100px;

    }

    .bottom_contact_left{
        width:95%;

    }



    .bottom_contact_right{
        width:100%;

    }


}



@media screen and (max-width: 700px) {



    .contact_form_title_head{
        font-size:22px;
    }

    .contact_address{
        font-size:20px;
    }



    #have_pj{
        font-size:18px;
    }

    #send_us{
        font-size:15px;
    }


}



@media screen and (max-width: 500px) {

    #contact_cnt_inst{
        font-size:18px;
    }

    .contact_cnt_icon img{
        width:20px;
    }

    #telephone_icon img{
        width:12px;
    }

    .top_contact_bond{
        padding-top: 0;
    }

    .top_contact_left{
        padding-top: 0 !important;

    }


    .contact_bond{
        padding-top:0;
    }



    #contact_title_head{
        margin-top:0;
        margin-bottom: -15px;
        font-size:18px;
    }
    .top_contact_right{
        height:350px;
    }


    .contact_form_title_head{
        font-size:18px;
    }

    .contact_address{
        font-size:14px;
    }

    .contact_address_subtitle{
        font-size:12px;

    }

    #have_pj{
        font-size:16px;
        line-height: 25px;
        margin-bottom:-20px;
    }

    #send_us{
        font-size:14px;

    }



}

@media screen and (max-width: 550px){
    #contact_cnt_fu_inst{
        font-size:14px;
        /*background:red;*/
        width:100%;
    }

   .contact_cnt{
       font-size:13px;
   }

   #contact_cnt_title{
       font-size:18px;
   }

    /*Pseudo Pseudo */
    #contact_cnt_title::after{
        content:'';
        width:104px;
        height:3px;
        background: green;
        position: absolute;
        margin-bottom:-28px;
        margin-left:0;

    }
}



@media screen and (max-width: 400px) {

    .top_contact_right{
        height:250px;
    }



    .contact_form_title_head{
        font-size:16px;
    }

    .contact_address{
        font-size:13px;
    }

    .contact_address_subtitle{
        font-size:12px;
    }

    #have_pj{
        font-size:16px;
    }

    #send_us{
        font-size:13px;
        line-height: 20px;
    }



}














@media screen and (max-width: 1000px ){

    .contact_form_bond{
        padding-top:0;
        /*background:red;*/
        margin-top:0;
    }
    .contact_form_center{
        flex-direction: column;

    }

    .contact_form_left{
        width:100%;
        height:auto;
        padding-bottom:50px;
    }

    .contact_form_right{
        width:100%;
        height:auto;
        padding-bottom:50px;
    }
}























/*End of Contact */