/*******************************/
/********* General CSS *********/
/*******************************/
* {
 
    box-sizing:border-box;
}


/* new sector page css */

.sec-full{
    background-color:#FFF7F5;
}
.mysector{
       width: 80%;
    height: 350px;
    margin: auto;
    Position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
}
#sector1{
    Background-image: url(images/residentiasl1.jpg);
}
#sector2{
    Background-image: url(images/commecial1.jpg);
}
#sector3{
    Background-image: url(images/retail.jpg);
}
#sector4{
    Background-image: url(images/54ek6O_3C8L0EJYI-oWFFUJpUmzPbhlmnUIQ72NgaHU.jpg);
}
#sector5{
    Background-image: url(images/HEALTHCARE.jpg);
}
#sector6{
    Background-image: url(images/hospital12.jpg);
}
#sector7{
    Background-image: url(images/government.jpg);
}
#sector8{
    Background-image: url(images/aviation.jpg);
}
#sector9{
    Background-image: url(images/villcommunity.jpg);
}
#sector10{
    Background-image: url(images/banking.jpg);
}

.mysectorText{
        font-weight: 700;
    padding: 10px 60px 10px 10px;
    color: #F75929;
    font-size: 24px;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    display: block;
    
    left:-30px;
    position: absolute;
    top: 30px;
    background-color: #fff;
    border-radius: 5px;
}

@media only screen and (max-width: 1100px){
    .mysector{
        width:95%;
    }
    .mysectorText{
        
    left:0px;
    
    }
    
}










@media only screen and (max-width: 1100px){
.line {
   
    width: 30px !important;
    
}


.mobile {
    display: flex;
    flex-direction: column;
    height: 70px;
    width: 100%;
    box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
    margin-bottom: 10px;
    top: 0;
    position: sticky;
    background: #fff;
    z-index: 1;
}
}

/*******************************/
/******** Sector CSS *********/
/*******************************/
.sector_banner {
    background-image: url(images/Sectors%20Page%20Header.jpg);

    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

.sector_header {
    margin: 0;

    padding: 119px 0 40px 0;
}

.sector_header h1 {
    margin: 0;
    padding: 0;
    font-size: 60px;
    font-weight: 600;
    color: #000;
}

.sector_header h4 {
    margin: 18px auto;
    font-size: 30px;
    color: #000;
    font-weight: 400;
    width: 50%;
}

.service_color {
    background: #f75a02;
    text-align: center;
    padding: 25px 0;
}

.filter-button {
    font-size: 17px;
    border-radius: 5px;
    text-align: center;
    padding: 10px 15px;
    color:#000;
    font-weight:600;

}

.active,
.filter-button:hover {
    font-size: 16px;

    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #000;

}


.btn-default:active .filter-button:active {
    background-color: #000;
    color: white;
}

.para {
    position: relative;
}

.left-sector {
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    left: -93px;
    padding-left: 130px;
    padding-right: 100px;
    text-align: justify;
    padding-top: 40px;
    padding-bottom: 40px;
}

.left-sector h3,
.left-sectors h3 {
    font-weight: 700;
    padding: 10px;
    color: #F75929;
    font-size: 24px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: block;
    width: 213px;
    margin-bottom: 20px;
}

.left-sector h3 i,
.left-sectors h3 i {
    color: #000;
    font-size: 30px;
}

.left-sector p {
    color: #000;
    margin-top: 36px;
    font-weight:700;
        letter-spacing:1px;
}

.left-sectors p {
    text-align: justify;
    color: #000;
    margin-top: 36px;
    /* letter-spacing: 0.5px; */
    line-height: 1.7;
    font-weight:700;
        letter-spacing:1px;
}

.bg-color_1 {
    background: #F75A02;
    padding: 0 50px 40px 0;
    display: block;
    margin: 80px auto;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.right-sector-img img {
    width: 425px;
    height: 468px;
    display: block;
    float: left;
    margin-left: 0px;
    position: absolute;
    top: -50px;
    left: -130px;
}


.col-lg-8 img {
    min-width: 100%;
    position: relative;
    left: 15px;
}

.sector_bg-color {
    background: #F75A02;
    position: relative;
    left: 40px;
}

section.sector_2 {
    position: relative;
    margin-bottom: 60px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.left-sectors {
    position: absolute;
    left: 85px;
    top: 60px;
    width: 550px;
    height: 380px;
    background: #fff;
    padding: 30px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


.sector_bottom {
    background: #FFA500;
    padding: 20px 0;
}

.sector_bottom h2 {
    font-size: 28px;
    color: #fff;
    font-weight: 500;
    margin: 0;
}

.btn_service {
    background: #fff;
    color: #000;
    padding: 7px 10px;
    border-radius: 0;
    display: block;
    width: 180px;
}

.btn_service i {
    margin-left: 8px;
}

.f-right {
    float: right;
}


/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {}


/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1130px) {
    .left-sector {
        background: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        left: -93px;
        padding-left: 105px;
        padding-right: 45px;
        text-align: justify;
        padding-top: 40px;
        padding-bottom: 17px;
    }

}


/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    .left-sector {
        background: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        left: -93px;
        padding-left: 120px;
        padding-right: 10px;
        text-align: justify;
        padding-top: 40px;
        padding-bottom: 0px;
    }

    .right-sector-img img {
        width: 425px;
        height: 432px;
        position: absolute;
        top: -50px;
        left: -125px;
    }

    .left-sectors {
        position: absolute;
        left: 70px;
        top: 35px;
        width: 415px;
        height: 325px;
        background: #fff;
        padding: 30px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

    .left-sectors p {
        text-align: justify;
        color: #000;
        margin-top: 36px;
        font-size: 15px;
        line-height: 1.4;
    }

}


/* small mobile :320px. */
@media (max-width: 767px) {
    .sector_header h4 {
 
    width: 80%;
}
    .left-sector {
        left: 25px;
        padding-top: 40px;
        padding-bottom: 25px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .left-sector p {
        padding: 0px 10px;
        font-weight:700;
        letter-spacing:1px;
        font-weight:700;
        letter-spacing:1px;
    }

    .right-sector-img img {
        width: 100%;
        height: 100%;
        margin-left: 25px;
        position: relative;
        top: 27px;
        left: 26px;
        margin: 0 auto;
    }

    .left-sectors {
        position: absolute;
        left: auto;
        top: 0px;
        width: auto;
        height: 380px;
        background: #fff;
        padding: 30px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

    .col-lg-8 img {
        max-width: 90%;
        position: relative;
        left: 15px;
        top: 384px;
    }

    .services_bottom {
        background: #ffa500;
        padding: 20px 0;
        margin-top: 410px;
    }

    .col-lg-8 img {
        max-width: 100%;
        position: relative;
        left: 0px;
        top: 384px;
    }



}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 450px
    }

}