/*font family*/

    @font-face{
    src: url(../font/Roboto/static/roboto-regular.ttf);
    font-family: roboto-regular;
}

@font-face{
    src: url(../font/Roboto/static/roboto-medium.ttf);
    font-family: roboto-medium;
}

@font-face{
    src: url(../font/Lato/lato-regular.ttf);
    font-family: lato-regular;
}

@font-face{
    src: url(../font/Lato/lato-bold.ttf);
    font-family: lato-bold;
}


/*font family*/

/*Common css Start*/

:root{
    --rore:"roboto-regular";
    --rome:"roboto-medium";
    --lare:"lato-regular";
    --labl:"lato-bold";
    --bl: #333333;
    --wh: #ffffff;
    --as: #8e8e8e;
}

body{
    font-family: var(--rore);
    font-size: 16px;
    color: var(--as);
}

/*Common css End*/

/*Header start*/

header{
    padding: 30px 0;
}

.h_nav{}

.h_logo{
    font-family: var(--lare);
    font-size: 30px;
    font-weight: 500;
    color: var(--bl) !important;
    text-transform: uppercase;
}

.hn_btn{}

.hn_btn:focus {
    box-shadow: 0 0 0 1px;
}

.menu{}

.menu ul li a{
    margin-right: 30px;
    font-family: var(--lare);
    font-size: 16px;
    color: var(--as) !important;
    text-transform: uppercase;
    transition: .33s linear;
}

.menu ul li a:hover{
    color: var(--bl) !important;
}

.h_sr{}

.h_ddt{
    padding: 0;
    background-color: transparent !important;
    border: 0 !important;
}

.h_ddt::after {
    display: none;
}

.h_ddt_i{
    color: var(--as);
}

.h_ddt_dm{
    padding: 10px;
    --bs-dropdown-min-width: 20rem;
}

.h_ddt_dm[data-bs-popper] {
    top: 40px;
    left: -295px;
}

.h_ddt_dm_fc{
    color: var(--bl);
}

.h_ddt_dm_fc:focus {
    border-color: unset;
    box-shadow: unset;
}

.h_ddt_os{
    --bs-btn-color: var(--bl);
    --bs-btn-border-color: #dee2e6;
}

.h_ddt_os:active, .h_ddt_os:hover{
    color: var(--bl) !important;
    background-color: transparent !important;
    border-color: var(--bl) !important;
}

/*Header end*/

/*Slider start*/

.slider{
    padding: 200px 0;
    background-image: url(../images/banner.jpg);
    background-size: cover;
}

.b_text{}

.b_text h1{
    font-family: var(--labl);
    font-size: 60px;
    color: var(--wh);
}

.b_text p{
    margin: 40px 235px 50px 0;
    color: var(--wh);
}

.b_btn{
    padding: 15px 30px;
    color: var(--bl) !important;
    background-color: var(--wh) !important;
    border-radius: 0;
}

.b_btn:active{
    border-color: var(--wh) !important;
}

.c_btn{
    font-family: var(--rore);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}

.c_i{
    margin-left: 25px;
    font-size: 15px;
}

.b_i{
    color: var(--bl);    
}

.s_ind_and_bpb{}

.s_ccin {
    width: 2%;
    bottom: -71%;
    left: -11%;
}

.s_ccin .active {
    transform: scale(1.3);
}

.s_ccin [data-bs-target]{
    width: 2px;
    height: 15px;
    background-color: var(--bl);
}

.sli_c{
    height: 3%;
    width: 3%;
    top: 158%;
    color: var(--bl);
    transition: .3s linear;
}

.s_ccp{
    left: 0;
    justify-content: flex-end;
}

.s_ccn:focus, .s_ccp:focus, .s_ccn:hover, .s_ccp:hover{
    color: var(--bl) !important;
}

.s_ccn{
    left: 7%;
    justify-content: flex-start;
}

/*Slider start*/

/*Welcome start*/

.welcome{}

.vl {
    margin: 0 50%;
    height: 50px;
    border: 1px solid var(--bl);
}

.w_vl{}

.w_item{}

.c_h1{
    margin: 30px 0 0;
    font-family: var(--lare);
    font-size: 30px;
    color: var(--bl);
    text-align: center;
    text-transform: uppercase;
}

.w_h1{
    margin-top: 30px;
}

.w_p{
    margin: 50px 0 0;
}

/*Welcome end*/

/*Feature start*/

.feature{}

.f_item{
    margin: 130px 0 0;
    position: relative;
    text-align: center;
    border: 1px solid var(--as);
    transition: .33s linear;
}

.f_text{}

.f_item h2{
    margin: 70px 0 0;
    font-family: var(--labl);
    font-size: 20px;
    color: var(--bl);
    text-transform: uppercase;
}

.i_p{
    padding: 0 5px;
    position: absolute;
    top: -25px;
    left: 50%;
    font-size: 60px;
    color: var(--as);
    background-color: white;
    transition: .33s linear;
    transform: translateX(-50%);
}

.hl{
    margin: 20px auto;
    width: 50px;
    border: 1px solid var(--as);
}

.f_item p{
    margin: 0 20px;
}

.f_btn{
    padding: 35px 35px;
    color: var(--as);
    transition: .33s linear;
}

.f_i{}

.f_item:hover{
    border-color: var(--bl);
    box-shadow: 0px 20px 40px 0px #0000001A;
}

.f_item:hover .i_p{
    color: var(--bl);
}

.f_item:hover .f_btn{
    color: var(--bl) !important;
    border-color: var(--wh) !important;
}

/*Feature end*/

/*About us start*/

.about-us{
    padding: 100px 0;
}

.abu_items{}

.abu_img{
    padding-right: 45px;
}

.abu_text{}

.abu_h1{
    margin-bottom: 40px;
    font-family: var(--lare);
    font-size: 30px;
    color: var(--bl);
    text-transform: uppercase;
}

.abu_text p{
    margin: 0 20px 40px 0;
    line-height: 29px;
}

.abu_btn{
    padding: 15px 30px;
    color: var(--bl) !important;
    border: 1px solid var(--bl) !important;
    border-radius: 0;
}

/*About us end*/

/*Recent work start*/

.recent-work{
    padding-bottom: 100px;
    background-color: #f8f8f8;
}

.rw_titel{}

.rw_h1{
    padding: 0 0 170px;
}

.rwr_ci {
    margin: 0;
    bottom: 105%;
}

.rwr_ci [data-bs-target] {
    box-sizing: content-box;
    flex: unset;
    width: unset;
    height: unset;
    margin: 0 31px;
    padding: 15px 15px;
    text-indent: unset;
    cursor: pointer;
    background-color: unset;
    background-clip: unset;
    border: 1px solid transparent;
    transition: .33s linear;
}

.rwr_ci .active {
    transform: scale(1.11);
    border: 1px solid var(--bl);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.rw_ca{
    position: relative;
    margin: 30px 0 0;
}

.rw_img{
    background-color: transparent;
    opacity: 1;
    transition: .33s linear;
}

.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    font-size: 60px;
    color: transparent;
    transition: .33s linear;
}

.overlay i{
    position: absolute;
    top: 33%;
    left: 43%;
    transition: .33s linear;
}

.re_info{
    position: absolute;
    padding: 15px 30px 15px;
    background-color: transparent;
    width: 416px;
    bottom: 0px;
    transition: .33s linear;
}

.re_info h2{
    margin-bottom: 12px;
    font-family: var(--labl);
    font-size: 18px;
    color: transparent;
    text-transform: uppercase;
}

.re_info p{
    color: transparent;
}

.rw_ca:hover .overlay{
    opacity: 1;
}

.rw_ca:hover{
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: .33s linear;
}

.rw_ca:hover .re_info{
    background-color: var(--wh);
}

.rw_ca:hover .overlay i{
    font-size: 60px;
    color: var(--wh);
}

.rw_ca:hover .overlay{
    background: rgba(0, 0, 0, 0.5);
}

.rw_ca:hover .re_info h2{
    color: var(--bl);
}

.rw_ca:hover .re_info p{
    color: var(--as);
}

/*Recent work end*/

/*Why Choose start*/

.why_choose{
    padding-bottom: 100px;
}

.wc_titel{}

.wc_vl{}

.wc_h1{}

.wc_content{}

.wc_items{
    margin: 100px 0 5px;
    border-bottom: 1px solid var(--as);
    transition: .33s linear;
}

.wc_items:hover{
    border-bottom: 1px solid var(--bl);
}

.wc_hl{
    font-size: 48px;
}

.c_wcli{}

.wc_lii{
    margin: 0 !important;
}

.wc_hl{
    color: var(--as);
    transition: .33s linear;
}

.wc_items:hover .wc_hl{
    color: var(--bl);
}

.wc_lih{
    margin: 0 0 10px 20px;
}

.wc_h2{
    margin-bottom: 0;
    font-family: var(--labl);
    font-size: 18px;
    color: var(--as);
    float: inline-end;
    text-transform: uppercase;
    transition: .33s linear;
}

.wc_items:hover .wc_h2{
    color: var(--bl);
}

.wc_items p{
    margin: 35px 0;
}

/*Why Choose end*/

/*Who work with us start*/

.who-work-with-us{
    padding-bottom: 100px;
    background-image: url(../images/wwwu-bgi.jpg);
    background-size: cover;
}

.wwwu_titel{}

.wwwu_vl{}

.wwwu_h1{}

.wwwu_content{}

.wwwu_item{
    margin: 100px 0 0;
    border-radius: 0;
    --bs-card-border-width: unset;
}

.wwwu_img{}

.wwwu_img img{
    border-radius: 0;
}

.wwwu_col{}

.wwwu_text{
    padding: 20px 20px 20px 30px;
}

.wwwu_ul{
    position: absolute;
    padding: 0 0;
    top: 60px;
    left: 0;
    background-color: var(--wh);
    text-align: center;
    opacity: 0;
    list-style: none;
    transition: .3s linear;
}

.wwwu_li{
    padding: 10px 5px 5px;
    box-shadow: 1px 0 0 0 transparent;
    transition: .3s linear;
}

.wwwu_i{
    font-size: 26px;
    color: var(--as);
    text-decoration: none;
    transition: .3s linear;
}

.wwwu_a{}

.wwwu_h5{
    margin-bottom: 15px;
    font-family: var(--labl);
    font-size: 18px;
    color: var(--bl);
    text-transform: uppercase;
}

.wwwu_p{
    margin-bottom: 0;
    color: var(--as);
}

.wwwu_item:hover .wwwu_ul{
    opacity: 1;
}

.wwwu_li:hover{
    background-color: rgb(0 0 0 / 3%);
    box-shadow: 1px 0 0 0 var(--bl);
}

.wwwu_i:hover{
    color: var(--bl);
}

/*Who work with us end*/

/*Best pricing start*/

.best-pricing{
    padding-bottom: 100px;
}

.bp_titel{}

.bp_vl{}

.bp_h1{}

.bp_content{}

.bp_item{
    margin-top: 100px;
    padding: 50px 30px 40px;
    position: relative;
    border: 1px solid var(--as);
    transition: .3s linear;
}

.bp_h2{
    padding: 0 5px;
    font-family: var(--labl);
    font-size: 18px;
    color: var(--bl);
    background-color: white;
    text-transform: uppercase;
    transform: translateX(-50%);
}

.bas{
    position: absolute;
    top: -10px;
    left: 55px;
}

.sta{
    position: absolute;
    top: -10px;
    left: 80px;
}

.ent{
    position: absolute;
    top: -10px;
    left: 83px;
}

.pla{
    position: absolute;
    top: -10px;
    left: 78px;
}

.bp_p {
    margin: 30px 0 0;
}

.bp_p35{
    margin-bottom: 10px;
}

.bp_p35 span{
    color: black;
    font-size: 30px;
}

.bp_cas_i {
    display: flex;
    justify-content: center;
}



.bp_btn{
    margin-top: 40px;
    padding: 18px 28.9%;
    color: var(--as) !important;
    border: 1px solid var(--as) !important;
    border-radius: 0;
    transition: .3s linear;
}

.bp_btn i{}

.bp_item:hover{
    border: 1px solid var(--bl);
    box-shadow: 0px 20px 40px 0px #0000001A;
}

.bp_item:hover .bp_btn{
    background-color: #f8f8f8;
    color: var(--bl) !important;
    border: 1px solid var(--bl) !important;
}

/*Best pricing end*/

/*Nipro Responsive HTML Template start*/

.nrht{
    margin-bottom: 100px;
    padding: 45px 0;
    background-color: #f8f8f8;
}

.nrht_titel{}

.nrht_titel h1{
    margin: 0;
    font-size: 18px;
    color: var(--bl);
    display: inline-block;
    word-spacing: 3px;
    text-transform: uppercase;
}

.nrht_it_btn{
    margin-left: 758px;
    display: inline-flex
}

.nrht_btn{
    padding: 16px 45px;
    color: var(--bl)!important;
    border: 1px solid var(--bl)!important;
    border-radius: 0;
}

.nrht_titel h1 a i{}

/*Nipro Responsive HTML Template end*/

/*Co-Founder & COO start*/

.cofo{
    padding-bottom: 100px;
}

.cofo_car{}

.cofo_ind{
    right: 23px;
    bottom: 205px;
    margin: 0;
    flex-direction: column;
    align-items: flex-end;
}

.cofo_ind .active {
    opacity: 1;
    transform: scale(1.3);
}

.cofo_ind [data-bs-target] {
    width: 15px;
    background-color: var(--bl);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.cofo_inn{}

.cofo_content{
    padding: 40px 30px;
    border: 1px solid var(--bl);
}

.cofo_i{
    position: absolute;
    top: 41px;
    margin: 20px 0 0 20px;
    font-size: 30px;
    color: var(--bl);
}

.cofo_img{
    position: relative;
}

.cofo_text{}

.cofo_h2{
    font-family: var(--labl);
    font-size: 20px;
    color: var(--bl);
    text-transform: uppercase;
}

.cofo_p{
    margin: 15px 0;
}

.cofo_p1{
    font-size: 20px;
    color: var(--bl);
}

.cofo_p2 {
    margin: 40px 0;
}

.cofo_p3{}

.cofo_pn_btn{
    padding: 223px 35px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--wh);
    writing-mode: vertical-rl;
    border: 1px solid var(--bl);
}

.cofo_com_btn{
    position: absolute;
    right: 10px;
    color: var(--bl) !important;
    border: 0;
    transition: .3s linear;
}

.cofo_ct_p{
    top: 50px;
}

.cofo_ct_p:hover .cofo_ct_n:hover{
    color: var(--as) !important;
}

.cofo_ct_n{
    bottom: 50px;
}

/*Co-Founder & COO end*/

/*Support start*/

.support{
    padding-bottom: 100px;
    position: relative;
}

.s_form{
    justify-content: center;
    border: 1px solid var(--bl);
}

.sform_h1{
    width: 210px;
    position: absolute;
    top: -20px;
    left: 51%;
    background-color: white;
    transform: translateX(-50%);
}

.s_form_items{
    padding: 100px 200px 20px;
}

.sform_im{
    padding: 15px 0 10px 30px;
    margin-bottom: 20px;
    color: var(--as);
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid;
    border-color: #c7c0c0;
    transition: .3s linear;
}

.sform_im:focus {
    color: var(--bl);
    border-bottom: 1px solid;
    background-color: transparent;
    border-color: var(--bl);
    box-shadow: unset;
}

.sform_im::placeholder {
    color: var(--as);
    transition: .3s linear;
}

.sform_im:hover::placeholder{
    color: var(--bl);
}

.sform_ct_btn{
    display: flex;
    justify-content: center;
}

.sform_btn{
    margin-bottom: 40px;
    padding: 15px 50px;
    color: var(--bl) !important;
    border: 1px solid var(--bl) !important;
    border-radius: 0;
}

/*Support end*/

/*Footer start*/

footer{
    background-image: url(../images/footer.jpg);
    background-size: cover;
}

.footer-fast-part{}

.footer-second-part{
    padding: 40px 0;
    border-top: 1px solid;
}

.f_start{
    padding-bottom: 100px;
    text-align: center;
}

.f_vl{}

.f_h1{}

.f_p{
    margin: 40px 37%;
    color: var(--wh);
}

.f_ul{}

.f_li{}

.footera{
    font-size: 26px;
    color: var(--wh);
    border: 1px solid var(--wh);
    transition: .3s linear;
}

.footera:hover{
    color: var(--bl);
    background-color: var(--wh);
}

.f_a1{
    padding: 12px 19px;
}

.f_a2{
    padding: 12px 14px;
}

.f_a3{
    padding: 12px 12px;
}

.f_a4{
    padding: 12px 13px;
}

.f_a5{
        padding: 12px 15px;
}

.f_a6{
        padding: 12px 10px;
}

.f_icon{}

.f_end{}

.fe_p{
    color: var(--wh);
    word-spacing: 3px;
}

.fe_ul{
    float: right;
}

.fe_li{
    margin:0 0 0 40px !important;
}

.fe_a{
    color: var(--wh);
    text-decoration: none;
}

/*Footer end*/