*{
    margin: 0rem;
    padding: 0rem;
}

body{
    font: normal 1em "Open Sans", sans-serif;
    background-color: transparent;
    color: #333333;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

/*------------------------------------------------------
------------        Header
------------------------------------------------*/
.header{
    height: 6.375rem;
    background-color: #19150b;
    position: fixed;
    top: 0rem;
    left: 0rem;
    right: 0rem;
    z-index: 999999;
    padding: 1.3rem 0rem;
}

.container-fluid{
    padding-left: 2rem;
}

.logo_bg{
    height: 6.4rem;
    width: 24rem;
    background-color: #fff;
    transform: skew(12deg);
    position: absolute;
    top: 0rem;
    left: -4rem;
    box-shadow: 1.9rem 0 0.1rem rgba(0,0,0,0.2);
    z-index: -999999;
}

.logo_nav__item{
    display: flex
}

.logo{
    justify-content: flex-start;
}

.logo img{
    height: 4.063rem;
    width: 13.875rem;
    
}

.nav_menu{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nav_list,
.mobile_nav{
    list-style: none;
    padding-left: 0rem;
    margin: 0rem;
}

.nav__item{
    align-items: center;
    display: inline-flex;
}

.nav__item a{
    color: #ffffff;
    font-size: 1em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0rem 1rem;
    transition: all 0.4s ease-in-out;
}

.nav__item a:hover, .nav___link a:focus, .nav___link a:active,
.nav__item a.active{
    color: #ffc107;
}

.responsive__mobile{
    position: absolute;
    right: 0rem;
    width: 4rem;
    top: 1.6rem;
}

.btn__burger{
    line-height: 3rem;
    height: 3rem;
    width: 3rem;
    background-color: #333333;
    color: #666666;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 2.5rem;
    cursor: pointer;
    display: none;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

.btn__burger:hover,
.btn__burger:focus,
.btn__burger.active{
    background-color: #00bcd4;
    color: #ffffff;
}

.responsive__mobile_nav{
    height: 12rem;
    width: 10rem;
    background-color: #ffffff;
    position: absolute;
    top: 4.8rem;
    right: 0rem;
    display: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.mobile_nav li{
    border-bottom: 0.01rem solid #f1f1f1;
}

.mobile_nav li:last-child{
    border-bottom: 0rem;
}

.mobile_nav li a{
    color: #333333;
    font-size: 0.9rem;
    text-decoration: none;
    display: block;
    padding: 0.4rem 1.2rem;
}

.mobile_nav li a:hover,
.mobile_nav li a:focus,
.mobile_nav li a.active{
    color: #00bcd4;
}

@media (max-width: 67.5rem){
    .container-fluid{
        padding-left: 0.6rem;
    }
    .logo_bg{
        width: 20rem;
    }
    .nav__item a{
        font-size: 0.9em;
    }
}

@media (max-width: 55.62rem){
    .nav_menu,
    .nav_list{
        display: none;
    }
    
    .btn__burger{
        display: block;
    }
}

/*------------------------------------------------------
------------        Section
------------------------------------------------*/
.h_slider{
    position: relative;
    margin-top: 6.4rem;
    overflow: hidden;
}

.h_aboutus h2,
.h_aboutus h4,
.aboutus h2,
.mission_vision h2,
.vision h2,
.our_team h2,
.h_services h2,
.left_tabs__container h4,
.h_products h2,
.h_projects h2,
.h_ourclients h2,
.h_contactus h2,
._breadcrumb_ h2,
.projects h1,
.gallery h1{
    color: #19150b;
    font-size: 2.2em;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 0rem;
}

.s_box{
    position: relative;
    margin-bottom: 1rem;
}

.s_box a{
    color: #333333;
    display: block;
    text-decoration: none;
}

.s_box__container,
.s_box__description{
    height: auto;
    text-align: center;
    border: 0.01rem solid #ededed;
    padding: 1rem 0rem;
}

.s_box:hover .s_box__container{
    border: 0.01rem solid #ededed;
    border-left: 0.01rem solid #ffc107;
    border-right: 0.01rem solid #ffc107;
}

.s_box__container img{
    margin: 1rem;
    transition: transform .6s ease;
    -webkit-transition: transform .6s ease;
}

.s_box:hover .s_box__container img{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

.s_box.optical_fiber:hover .s_box__container img{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.s_box__container h6{
    line-height: 1.3rem;
    font-size: 0.9em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.1rem;
    border-top: 0.01rem solid #ededed;
    padding-top: 1rem;
    margin: 0rem;
}

.s_box:hover .s_box__container h6{
    border-top: 0.01rem solid #ffc107;
}

.s_box__description{
    height: 7rem;
    width: 100%;
    font-size: 0.9rem;
    text-align: center;
    background-color: #ffffff;
    position: absolute;
    display: none;
    z-index: 999999;
    border-left: 0.01rem solid #ffc107;
    border-right: 0.01rem solid #ffc107;
    border-bottom: 0.01rem solid #ededed;
    padding: 0.38rem 1rem 0rem;
}

.s_box__description p{
    margin-bottom: 0.4rem;
}

.s_box:hover .s_box__description{
    display: block;
}

.s_box__description .btn_view__details{
    background-color: #19150b;
    color: #ffffff;
    font-size: 0.9rem;
    border-radius: 0rem;
    padding: 0.2rem;
    outline: none;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}

.s_box__description .btn_view__details:hover,
.s_box__description .btn_view__details:focus,
.s_box__description .btn_view__details:active{
    background-color: #ffc107;
    color: #19150b;
    box-shadow: none;
}

.h_aboutus h2{
    text-align: left;
    font-size: 2.2em;
    margin-bottom: 1rem;
}

.h_aboutus h4{
    text-align: left;
    font-size: 1.5em;
    font-weight: 500;
}

.h_projects{
    display: none;
}

._breadcrumb_{
    height: 10rem;
    position: relative;
    margin-top: 6.40rem;
}

._breadcrumb_ h2{
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 0rem;
}

._breadcrumb_:after{
    height: 1rem;
    width: 12rem;
    background-color: #ffc107;
    content: "";
    position: absolute;
    top: 3.9rem;
    right: 0rem;
}

._breadcrumb_ p{
    color: #999999;
    font-size: 0.9rem;
    font-style: italic;
    position: relative;
    margin-bottom: 0rem;
}

._breadcrumb_ p:after{
    height: 0.1rem;
    width: 50%;
    background-color: #ededed;
    content: "";
    position: absolute;
    bottom: 50%;
    right: 0rem;
}

._breadcrumb_ a{
    color: #999999;
    text-decoration: none;
}

._breadcrumb_ a:hover,
._breadcrumb_ a:focus,
._breadcrumb_ a:active{
    color: #ffc107;
}

._breadcrumb_ span{
    position: relative;
    padding-left: 1.3rem;
}

._breadcrumb_ span:before{
    font-family: "Flaticon__L1";
    font-weight: 600;
    font-style: italic;
    content: "\f17f";
    position: absolute;
    top: 0.2rem;
    left: 0rem;
}

@media (max-width: 78.12rem){
    ._breadcrumb_:after{
        width: 6rem;
    }
}


@media (max-width: 67.5rem){
    .s_box__container h6{
        font-size: 0.8rem;
        letter-spacing: 0.05rem;
    }

    .s_box:hover .s_box__description{
        display: none;
    }
    
    ._breadcrumb_:after{
        width: 4rem;
    }
    
    ._breadcrumb_ h2{
        font-size: 1.8rem;
    }
}

@media (max-width: 55.56rem){
    ._breadcrumb_:after{
        width: 2rem;
    }
    
    ._breadcrumb_ h2{
        font-size: 1.2rem;
    }
    
    ._breadcrumb_ p:after{
        width: 28%;
    }
}

/*------------------------------------------------------
------------        About Us
------------------------------------------------*/
.h_aboutus{
    background-color: #f7f7f7;
    border-top: 0.1rem solid #ededed;
    border-bottom: 0.1rem solid #ededed;
    padding: 1rem 0rem;
}

.h_aboutus p{
    line-height: 1.5rem;
    color: #666666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.h_aboutus p:hover, .h_aboutus p:focus{
    color: #222222;
}

.aboutus h2,
.mission_vision h2,
.vision h2{
    text-align: left;
    padding-top: 3rem;
    margin-bottom: 1rem;
}

.mission_vision h2{
    font-size: 1.8rem;
}

.aboutus p,
.mission_vision p,
.vision p{
    line-height: 1.5rem;
    font-size: 0.96rem;
    color: #666666;
    margin-bottom: 0.5rem;
}

.aboutus p:hover,
.mission_vision p:hover,
.vision p:hover{
    color: #222222;
}


/*------------------------------------------------------
------------        Our Team
------------------------------------------------*/
.our_team{
    height: auto;
}

.our_team__container{
    text-align: center;
    border-top: 0.1rem dotted #ededed;
    border-bottom: 0.1rem dotted #ededed;
}

.our_team h2{
    padding-top: 3rem;
}

.our_team__container img{
    margin: 1rem 0rem;
}

.our_team__container h6{
    text-align: center;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.01rem;
}

.our_team__container p{
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    color: #999999;
}

@media (max-width: 67.5rem){
    .aboutus h2,
    .our_team h2{
        font-size: 1.8rem;
    }
    
    .mission_vision h2{
        font-size: 1.5rem;
    }
}

/*------------------------------------------------------
------------        Our Clients
------------------------------------------------*/
.h_ourclients{
    height: auto;
}

.h_ourclients h2 strong,
.our_team h2 strong{
    color: #ffc107;
}

.h_ourclients .client__detail{
    height: 8.362rem;
    border: 0.01rem solid #e2e1e1;
    border-left: 0rem;
    border-bottom: 0rem;
    padding: 0rem;
}

.h_ourclients .client__detail:nth-child(1),
.h_ourclients .client__detail:nth-child(2),
.h_ourclients .client__detail:nth-child(3),
.h_ourclients .client__detail:nth-child(4){
    border-top: 0rem;
}

.h_ourclients .client__detail:nth-child(4n){
    border-right: 0rem;
}

.h_ourclients .client__detail .client___logo,
.h_ourclients .client__detail .client___logo.client_1,
.h_ourclients .client__detail .client___logo.client_2,
.h_ourclients .client__detail .client___logo.client_3,
.h_ourclients .client__detail .client___logo.client_4,
.h_ourclients .client__detail .client___logo.client_5,
.h_ourclients .client__detail .client___logo.client_6,
.h_ourclients .client__detail .client___logo.client_7{
    height: 6.563rem;
    background: url("../../img/client/colgate-palmolive.png") no-repeat center;
    margin: 0.9rem;
}

.h_ourclients .client__detail .client___logo.client_2{
    background: url("../../img/client/dynamic-training-solutions.png") no-repeat center;
}

.h_ourclients .client__detail .client___logo.client_3{
    background: url("../../img/client/zeeshan-autos.png") no-repeat center;
}

.h_ourclients .client__detail .client___logo.client_4{
    background: url("../../img/client/glamour-electronics.png") no-repeat center;
}

.h_ourclients .client__detail .client___logo.client_5{
    background: url("../../img/client/blackandbrownbakers.png") no-repeat center;
}

.h_ourclients .client__detail .client___logo.client_6{
    background: url("../../img/client/archroma.png") no-repeat center;
}

.h_ourclients .client__detail .client___logo.client_7{
    background: url("../../img/client/shahmurad-sugar-mills.png") no-repeat center;
}

.h_ourclients .client__detail .client___logo{
    background: url("../../img/client/client-sample.png");
}

.h_ourclients .client__detail .client___logo:hover{
    opacity: 0.5;
}

@media (max-width: 47.95rem){
    .h_ourclients .client__detail{
        border-right: 0rem;
    }
     
    .h_ourclients .client__detail:nth-child(2), 
    .h_ourclients .client__detail:nth-child(3), 
    .h_ourclients .client__detail:nth-child(4){
        border-top: 0.01rem solid #e2e1e1;
    }
}


/*------------------------------------------------------
------------        Services
------------------------------------------------*/
.services{
    height: auto;
}

.services h4{
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    padding: 1rem 0rem;
    margin: 0rem;
}

.services img{
    height: 8rem;
}

.services p{
    color: #888888;
    line-height: 1.5rem;
    font-size: 0.9rem;
    text-align: justify;
}

.services p:hover,
.services p:focus{
    color: #444444;
}

ul.left_tabs{
    width: 22%;
    list-style: none;
    padding: 0rem;
    margin: 0rem;
    display: inline-block;
    vertical-align: top;
}

ul.left_tabs li a{
    font-size: 0.9rem;
    text-decoration: none;
    display: block;
    color: #333333;
    background-color: #f8f8f8;
    padding: 1rem;
}

ul.left_tabs li:last-child a.inactive{
    border-bottom: 0.01rem solid #dedede;
}

ul.left_tabs li a:hover,
ul.left_tabs li a{
    background: #ffc107;
    border-bottom: 0.01rem solid #bb8c00;
    border-top: 0.01rem solid #bb8c00;
    cursor: pointer;
}

ul.left_tabs li a.inactive{
    color: #333333;
    background-color: #f8f8f8;
    border-top: 0.01rem solid #dedede;
    border-width: 0.01rem 0.01rem 0rem;
}

.left_tabs__container{
    width: 77%;
    display: inline-block;
    font-size: 0.9rem;
    vertical-align: top;
    padding-top: 1rem;
    padding-left: 1.5rem;
    margin-top: -1rem;
    margin-left: -0.2rem;
}

.left_tabs__container .tab_panel.inactive{
    display: none;
}

.left_tabs__container .tab_panel.active{
    display: block;
}

.left_tabs__container img{
    height: 12rem;
    padding: 1rem;
}

.left_tabs__container h4{
    font-size: 1.8rem;
    text-align: left;
    margin: 1rem 0rem;
}

.left_tabs__container p{
    line-height: 1.5rem;
    color: #666666;
}

.left_tabs__container p:hover{
    color: #222222;
}

@media (max-width: 67.5rem){
    ul.left_tabs,
    .left_tabs__container{
        width: 100%;
        padding-left: 0rem;
        margin: 0rem;
    }
    
    ul.left_tabs li{
        width: 14rem;
        display: inline-block;
    }
    
    .left_tabs__container img{
        height: 10rem;
    }
    
    .left_tabs__container h4{
        font-size: 1.6rem;
    }
}

@media (max-width: 55.56rem){
    ul.left_tabs li{
        width: 100%;
    }
}

/*------------------------------------------------------
------------        Projects
------------------------------------------------*/
.projects{
    height: 15rem;
}

.projects h1{
    font-size: 4em;
}


/*------------------------------------------------------
------------        Gallery
------------------------------------------------*/
.gallery{
    height: 15rem;
}

.gallery h1{
    font-size: 4em;
}

/*------------------------------------------------------
------------        Contact Us
------------------------------------------------*/
.contactus{
    height: auto;
}

.contact_info{
}

.contact_info h3,
.contactus_form h3{
    color: #19150b;
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.contact_info h3 strong,
.contactus_form strong{
    color: #ffc107;
}

.contact_info ul{
    list-style: none;
    padding-left: 0rem;
    margin-bottom: 0rem;
}

.contact_info ul li{
    width: 22.9rem;
    display: inline-block;
    font-size: 0.9em;
    position: relative;
    padding-left: 2rem;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 1rem;
}

.contact_info li strong{
    display: block;
    font-weight: 500;
}

.contact_info li span{
    color: #999999;
}

.contact_info ul li.info_1:before,
.contact_info ul li.info_2:before,
.contact_info ul li.info_3:before,
.contact_info ul li.info_4:before{
    font-family: "Flaticon__L2";
    color: #ffc107;
    font-size: 2.5em;
    content: "\f148";
    position: absolute;
    left: -0.6rem
}

.contact_info ul li.info_2:before{
    content: "\f146";
}

.contact_info ul li.info_3:before{
    content: "\f123";
}

.contact_info ul li.info_4:before{
    content: "\f102";
}

.contactus_form{
    position: relative;
}

.contactus_form p{
    margin-bottom: 0rem;
}

.contactus_form input[type=text],
.contactus_form input[type=email],
.contactus_form textarea{
    width: 22rem;
    font-size: 0.9em;
    border: 0px;
    border-top: 1px solid #d6d6d6;
    border-left: 1px solid #d6d6d6;
    border-right: 1px solid #d6d6d6;
    padding: 0.5rem 1.5rem;
    outline: none;
}

.contactus_form p:first-child input[type=text]{
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}

.contactus_form textarea{
    height: 15rem;
    width: 30rem;
    resize: none;
    border-bottom: 1px solid #d6d6d6;
}

.contactus_form input[type=submit]{
    background-color: #19150b;
    color: #ffffff;
    border: 0rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    cursor: pointer;
    padding: 0.6rem 2rem;
    margin-top: 1rem;
    outline: none;
}

.contactus_form input[type=submit]:hover, 
.contactus_form input[type=submit]:focus,
.contactus_form input[type=submit]:active{
    background-color: #ffc107;
    color: #19150b;
}

@media (max-width: 67.5rem){
    .contactus_form input[type=text], 
    .contactus_form input[type=email]{
        width: 15rem;
    }
    
    .contactus_form textarea{
        width: 100%;
    }
}

@media (max-width: 55.62rem){
    .contact_info ul li{
        width: 100%;
    }
    
    .contactus_form input[type=text], 
    .contactus_form input[type=email]{
        width: 15rem;
    }
}

/*------------------------------------------------------
------------        Footer
------------------------------------------------*/
footer{ }

.follow_container{
    margin-bottom: -2.4rem;
}

.follow_on_social_media{
    height: 7rem;
    width: 18rem;
    background: url("../../img/icons/social/follow_on_social_media.svg");
    display: inline-block;
}

.social__media{
    display: inline-block;
    position: absolute;
    right: 0rem;
    bottom: 2rem;
}

.st-btn.st-first,
.st-btn{
    margin-right: 0.313rem !important;
}

.st-btn.st-last{
   margin-right: 0rem !important; 
}

.footer_logo{
    height: auto;
    background-color: #ffc107;
}

.f__logo{
    background-color: #ffffff;
    text-align: center
}

.footer_links{
    height: auto;
    background-color: #19150b;
    color: #cacaca;
    padding: 3rem 0rem 2rem;
}

.footer_links h5{
    font-size: 1.1rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    border-bottom: 0.1rem dotted #100c02;
    padding-bottom: 0.8rem;
}

.footer_links p{
    line-height: 1.5rem;
    font-size: 0.96rem;
}

.footer_social{
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
    list-style: none;
}

.footer_social li a i{
    height: 40px;
    width: 40px;
    line-height: 35px;
    text-align: center;
    background-color: #ffc107;
    border: 0.125rem solid transparent;
    color: #000000;
    border-radius: 50%;
}

.footer_social li a:hover i{
    background-color: #19150b;
    border-color: #ffc107;
    color: #cacaca;
}

.f_quick__links,
.f_contact__info{
    list-style: none;
    padding: 0rem;
    margin: 0rem;
}

.f_quick__links li,
.f_contact__info li{
    display: block;
    position: relative;
    padding: 0.2rem 2rem;
    
}

.f_quick__links li{
    padding-left: 0rem;
}

.f_contact__info li{
    margin-bottom: 0.6rem;
}

.f_contact__info li.address:before,
.f_contact__info li.phone_number:before,
.f_contact__info li.email:before,
.f_contact__info li.schedule:before{
    font-family: "Flaticon__L1";
    content: "\f18d";
    position: absolute;
    top: 0.1rem;
    left: 0rem;
    font-size: 1.2rem;
}

.f_contact__info li.phone_number:before{
    content: "\f187";
}

.f_contact__info li.email:before{
    content: "\f171";
}

.f_contact__info li.schedule:before{
    content: "\f11f";
}

.f_contact__info li:hover:before{
    color: #ffc107;
}

.f_quick__links li a,
.f_contact__info li{
    color: #cacaca;
    font-size: 0.9rem;
    text-decoration: none;
}

.f_quick__links li a,
.f_contact__info li,
.f_contact__info li:before,
.footer_social li a i{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; 
}

.f_quick__links li.f__item_1:before{
    font-family: "Flaticon";
    content: "";
    position: absolute;
    left: 0.2rem;
}


.f_quick__links li a:hover, 
.f_quick__links li a:focus,
.f_quick__links li a:active{
    color: #ffc107;
}

.f_contact__info li{
    padding: 0.2rem 2rem;
    overflow: hidden;
}

.f_contact__info li.o_open{
    color: #4caf50;
}

.f_contact__info li.o_close{
    color: #ff0000;
}

@media (max-width: 67.5rem){
    .f__logo img{
        height: 5rem;    
    }
    
    .footer_links h5{
        font-size: 1rem;
    }
    
    .footer_links p,
    .f_quick__links li a,
    .f_contact__info li{
        font-size: 0.83rem;
    }
    
    .f_quick__links,
    .f_contact__info{
        margin-bottom: 1rem;
    }
}

@media (max-width: 47.95rem){
    .follow_on_social_media{
        left: -3rem;
        position: relative;
    }
    
    .social__media{
        left: 2rem;
        bottom: 2rem;
    }
}

@media(max-width: 39.37rem){
    .follow_on_social_media,
    .social__media{
        display: none;
    }
}