
: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 0px 10px 0px;
    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 */
















.black_vail_about{
    width:100%;

    background: rgb(0,0,0, 0.7);
    position: absolute;
    z-index:1;
    top:0;

    /*top:0;*/
    /*display: none;*/

}

/* Option B: clamp size between 600px and 720px, prefer the viewport height */
.black_vail_about,
.about_center_bond_xa {
    height: clamp(600px, 100vh, 720px);
    box-sizing: border-box;

}








/*Beginning of Dashboard */

.dashboard_about{
    width:100%;

    /*background: red;*/

    display:flex;
    align-items: center;
    justify-content: center;
    height:600px;
    /*height:100vh;*/
    flex-direction: column;
    row-gap: 15px;
    /*display:none;*/






}

.about_center_bond_xa {
    width: 100%;
    position:fixed;


    background-image: url("../../images/board_room.png");
    background-size:cover;
    object-fit: contain;
    background-repeat: no-repeat;
    background-position: center;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
    top:0;
    z-index:-1;




}
.about_title_bd{
    text-align:center;
    font-size:68px;
    font-weight: bold;
    color:white;
    position:relative;
    z-index:5;
}

.about_sub_title_bd{
    text-align: center;
    font-size:25px;
    font-weight:bold;
    color:var(--button-color);
    position:relative;
    z-index:5;
}

@media screen and (max-width:900px){
    .about_title_bd {

        font-size: 48px;
    }

    .about_sub_title_bd {

        font-size: 25px;

    }


    .dashboard_about {
        row-gap: 15px;
    }
}

@media screen and (max-width:600px){
    .about_title_bd {

        font-size: 28px;
    }

    .about_sub_title_bd {

        font-size: 20px;

    }


    .dashboard_about {
        row-gap: 15px;
    }

    .black_vail_about,
    .about_center_bond_xa {
        height: clamp(200px, 100vh, 400px);
        box-sizing: border-box;

    }

    .dashboard_about{
        /*background:red;*/
        height:300px;
        margin-bottom:50px;
    }

}


@media screen and (max-width:500px){
    .about_title_bd {

        font-size: 25px;
        margin-top:100px;
    }

    .about_sub_title_bd {

        font-size: 18px;

    }


    .dashboard_about {
        row-gap: 15px;
    }


}



@media screen and (max-width:450px){
    .about_title_bd {

        font-size: 23px;
        margin-top:100px;
    }

    .about_sub_title_bd {

        font-size: 16px;

    }


    .dashboard_about {
        row-gap: 15px;
    }


}










/*Beginning of Contact */

.contact_bond_container_top{
    width:100%;
    height:auto;
    background: white;
    display:flex;

    align-items: center;
    justify-content: center;
    padding:50px 0px 50px 0px;
    position:relative;
    z-index: 5;
}



.contact_bond{
    width:100%;
    height: auto;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.top_contact_bond{
    width:80%;
    /*height:auto;*/
    height:600px;
    /*background: yellow;*/
    display:flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: center;
    padding:50px 0px 50px 0px;
    row-gap: 20px;
    position:relative;
    z-index: 5;
}


.top_contact_left{

    width: 50%;
    height: 90%;
    /*background: blue;*/
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 30px;

}

.t_c_l_cn{
    width:90%;
    height:80px;
    /*border:2px solid red;*/
    display:flex;
    justify-content: center;
    align-items: center;
    column-gap: 15px;

}

.contact_title_head{
    font-weight: bold;
    font-size:20px;
    letter-spacing: 0.5px;
    color:var(--button-color);
}

/*Pseudo element for underline*/
.contact_title_head::after{
    content: '';
    width:160px;
    height:3px;
    background: var(--button-color);
    display:block;
    margin:0 auto;
    position:relative;
    top:5px;
}

.address_icon{
    width:70px;
    height: 60px;
    background: #f1e7dc;
    display:flex;
    align-items: center;
    justify-content: center;
}

.address_icon img{
    width:30px;
}

#address_icon img{
    width:30px !important;
}

.contact_address_bond{
    display:flex;
    flex-direction: column;
    row-gap: 5px;
    width:100%;

}

.contact_address{
    font-weight: bold;


}


.contact_address_subtitle{
    color:var(--text_color);
}


.top_contact_right{
    width:50%;
    height:82%;
    /*background:brown;*/
    background-image:url("/images/Copilot_20251107_102740.png");
    background-repeat: no-repeat;
    /*background-size:100% 100%;*/
    /*object-fit: contain;*/
    background-size:cover;


}






.contact_bond_container_bottom{
    width:100%;
    height:auto;
    background: #f3f3ff;
    display:flex;

    align-items: center;
    justify-content: center;
    padding:20px 0px 20px 0px;
    position:relative;
    z-index: 5;
}




.bottom_contact_bond{
    width:80%;
    /*height:auto;*/
    height:600px;
    /*background: #f3f3ff;*/
    display:flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: center;
    padding:50px 0px 50px 0px;
    row-gap: 20px;
    position:relative;
    z-index: 5;
}

.bottom_contact_left{
    width:50%;
    height:450px;
    border:4px solid var(--button-color);
}





.bottom_contact_right {
    width: 50%;
    height: 100%;
    /*border:2px solid blue;*/
    display:flex;
    flex-direction: column;
    row-gap: 25px;
    justify-content: center;
    align-items: center;
}


.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 0px 5px 0px;
    /*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 0px 5px 0px;
    background:white;
    text-align: center;

}

.b_c_l_fm input{

    width:95%;
    height:30px;
    outline: none;
    border:0px;


}

.b_c_l_fm ::placeholder{
    /*color:red;*/
    font-size:15px;
}

.b_c_l_fm textarea{
    outline:none;
    border:0px;
    width:95%;
}
.contact_form_title_head{
    font-weight: bold;
    font-size:20px;
    letter-spacing: 0.5px;
    /*background:red;*/
    /*width:100%;*/
    color:var(--button-color);
}


/*Psedo 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 0px 5px 0px;
}

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 0px 20px 0px;
    }

    .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) {


    .top_contact_bond{
        padding-top: 0px;
    }

    .top_contact_left{
        padding-top: 0px !important;

    }


    .contact_bond{
        padding-top:0px;
    }



    #contact_title_head{
        margin-top:0px;
        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: 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;
    }



}






/*End of Contact */







































