:root {

    --white: #fff;

    --black: #000;

    --yelow: #eebd1f;

    --blue: #06132c;

    --brown: #be7b30;

    --open-sans: "Open Sans", serif;

    --montserrat: "Montserrat", serif;

}

body{

    font: 16px/26px var(--open-sans);

    color:var(--black);

}

#wrapper{

    position: relative;

    /*overflow: hidden;*/

    width: 100%;

    padding: 59px 31px 0;

}

.yellow-color{

    color: var(--yelow);

}

@media screen and (max-width:1400px){
.our-services .frame h3 a{font-size: 22px;}
.our-services .frame p{ min-height: 168px;}
}
 
@media screen and (max-width:1200px){
.our-services .frame p{ min-height: inherit;}
}

@media only screen and (min-width: 1399.98px){

    .container{

        max-width: 1193px;

    }

}

#header{

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    z-index: 10;

}

#header:before{

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    height: 59px;

    background: var(--white);

    content: '';

    z-index: -1;

}

#header .right-top{

    border-radius: 0 0 13px 13px;

    background: var(--yelow);

    padding: 16px 24px 17px 40px;

    position: relative;

    margin: 0 12% 0 1%;

}

#header .logo{

    max-width: 199px;

    display: block;

    padding: 7px 0 6px;

}

#header .right-top:before {

    position: absolute;

    left: -29px;

    top: -24px;

    bottom: 0;

    content: '';

    background: var(--yelow);

    width: 80px;

    border-radius: 10px;

    transform: rotate(62deg);

    margin: 0;

    height: 60px;

    z-index: -1;

}

#header .right-top:after {

    position: absolute;

    right: -22px;

    top: -40px;

    bottom: 0;

    content: '';

    background: var(--yelow);

    width: 99px;

    border-radius: 10px;

    transform: rotate(31deg);

    margin: 0;

    height: 78px;

    z-index: -1;

}

#header .right-top .contact{

    display: flex;

    justify-content: center;

}

#header .right-top .info,

#header .right-top .social{

    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    gap: 52px;

}

#header .right-top .social{

    gap: 17px;

}

#header .right-top .info a,

#header .right-top .social a{

    text-decoration: none;

    color: var(--white);

    transition: all ease 0.5s;

}

#header .right-top .info a,

#header .right-top .social a{

    font-size: 16px;

    line-height: 1.2;

    font-weight: bold;

}

#header .right-top .social a{

    font-size: 20px;

}

#header .right-top .info a:hover,

#header .right-top .social a:hover{

    color: var(--black);

}

#header .nav-area .navbar-collapse{

    justify-content: center;

}

@media only screen and (min-width: 767.98px){

    #header .close-toggler{

        display: none;

    }

    #header .nav-area .nav-item:hover .dropdown-menu{

        display: block;

    }

    #header .nav-area .nav-item:hover .dropdown-menu .dropdown-item:hover{

        background: #eebd1f;

        color: #fff;

    }

}

#header .nav-area .navbar-nav .nav-link{

    font-size: 16px;

    font-weight: bold;

    text-transform: uppercase;

    color: var(--black);

}

#header .nav-area .navbar-nav .nav-link.active,

#header .nav-area .navbar-nav .nav-link:hover{

    color: var(--yelow);

}

#header .nav-area .navbar-nav{

    flex-grow: 1;

    gap: 10px;

    justify-content: center;

    padding: 14px 0 18px;

}

#header .right-bottom{

    position: relative;

}

#header .right-bottom:after{

    position: absolute;

    left: 0;

    right: 123px;

    top: -2px;

    bottom: 0;

    content: '';

    background: var(--white);

    z-index: -1;

}

#header .right-bottom:before{

    position: absolute;

    right: 100%;

    top: -2px;

    bottom: 0;

    content: '';

    background: var(--white);

    z-index: -1;

    width: 1000%;

    margin-right: -2px;

}

#header .right-bottom .btn-area{

    position: absolute;

    left: 100%;

    top: 0;

    min-width: 215px;

    margin: 25px 0 0 -25px;

}

.btn-primary{

    background: var(--yelow);

    border: 0;

    font: bold 14px/1.2 var(--montserrat);

    max-width: 252px;

    border-radius: 30px;

    padding: 8px 8px 8px 29px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.btn-primary .ico{

    width: 41px;

    height: 41px;

    border-radius: 100%;

    background: var(--white);

    color: var(--black);

    display: inline-block;

    vertical-align: middle;

    padding: 11px 0;
    margin-left:18px;

}

.btn-primary .txt{

    display: inline-block;

    vertical-align: middle;

}

.btn-primary:hover{

    background: var(--blue);

}

.about-area .btn-primary{

    box-shadow: 0px 7px 16px -2px rgba(0,0,0,0.29);

    -webkit-box-shadow: 0px 7px 16px -2px rgba(0,0,0,0.29);

    -moz-box-shadow: 0px 7px 16px -2px rgba(0,0,0,0.29);

}

#header .right-bottom .nav-area{

    margin-right: 108px;

    position: relative;

}

#header .right-bottom .nav-area:before{

    background: url(../images/bg-overlay.png) no-repeat;

    background-size: cover;

    width: 115px;

    height: 99px;

    content: '';

    position: absolute;

    left: 100%;

    top: -9px;

    margin-left: -16px;

    pointer-events: none;

    z-index: -1;

}

.hero-section{

    min-height: 944px; 

    background-size: cover !important;

    background-position: center;

    border-radius: 30px;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

    padding-bottom: 57px;

    position: relative;

}

.hero-section .curve,

.breadcrumbs .curve{

    width: 30px;

    height: 30px;

    overflow: hidden;

    position: absolute;

    top: 88px;

    transform: rotate(90deg);

}

.breadcrumbs .curve{

    left: 0;

}

.hero-section .curve:before,

.breadcrumbs .curve:before{

    bottom: 0;

    left: 0;

    box-shadow: -30px 30px 0 0 #fff;

    content: "";

    display: block;

    width: 200%;

    height: 200%;

    position: absolute;

    border-radius: 50%;

}

.breadcrumbs:after{

    display: none;

}

.hero-section .caption{

    text-align: center;

    color: var(--white);

}

.hero-section .caption h1{

    margin: 0 0 25px;

    font: 800 60px/1 var(--montserrat);

}

.hero-section .caption .txt{

    max-width: 70%;

    margin: 0 auto;

    font: 700 18px/1.2 var(--open-sans);

}

.heading .miniheading{

    display: inline-block;

    font-weight: bold;

    font-family: var(--montserrat);

    text-transform: uppercase;

    color: var(--yelow);

    position: relative;

    padding-left: 22px;
    margin-bottom:0 !important;

}

.heading .miniheading:before,

.heading .miniheading:after{

    content: '';

    width: 3px;

    height: 18px;

    background: var(--yelow);

    position: absolute;

    left: 2px;

    top: 3px;

    transform: rotate(23deg);

}

.heading .miniheading:after{

    left: 12px;

}

.heading h2{

    color: var(--blue);

    font: 700 40px/1.2 var(--montserrat);

}

.heading h2 span{

    font-weight: 800;

}

.about-area{

    padding: 60px 0;

}

.about-area .heading{

    padding-right: 30px;

}

.about-area .heading h2{

    margin: 0 0 13px;

}

.about-area .info{

    display: flex;

    gap: 30px;

}

.about-area p{

    margin-bottom: 26px;

}

.about-area .info .right .list{

    margin: 0;

    padding: 15px 0 40px;

    list-style: none;

}

.about-area .info .list li{

    padding-left: 32px;

    position: relative;

    font: 700 18px/1.2 var(--open-sans);

    padding-bottom: 14px;

}

.about-area .info .list li:before{

    font-family: "Font Awesome 6 Free";

    -webkit-font-smoothing: antialiased;

    display: var(--fa-display, inline-block);

    font-style: normal;

    font-variant: normal;

    line-height: 1;

    text-rendering: auto;

    font-weight: 900;

    content: '\f058';

    position: absolute;

    left: 0;

    top: 4px;

    color: var(--yelow);

}

.about-area .img-right{

    position: relative;

    margin: 0 0 0 3px;

    padding: 7px 0 0;

}

.about-area .img-right img{

    border-radius: 280px 40px 40px 40px;

}

.about-area .img-right .caption{

    position: absolute;

    left: -50px;

    top: 0;

    width: 210px;

    height: 210px;

    border-radius: 100%;

    background: var(--brown);

    border: 10px solid var(--white);

    display: flex;

    flex-direction: column;

    text-align: center;

    justify-content: center;

    align-items: center;

    padding-bottom: 25px;

}

.about-area .img-right .caption .num{

    font: 700 72px/1 var(--open-sans);

    color: var(--white);

    padding: 0 0 3px;

}

.about-area .img-right .caption .txt{

    font: 700 18px/1.2 var(--open-sans);

    text-transform: uppercase;

    color: var(--white);

}

.our-services{

    background: #f5f6f8;

    padding: 63px 0 70px;

    border-radius: 40px;

}

.our-services .heading{

    text-align: center;

    padding-bottom: 29px;

}

.our-services .heading h2{

    font-size: 48px;

}

.our-services .heading h2 span{

    font-weight: 700;

}

.our-services .frame{

    padding: 28px;

    padding-bottom: 41px;

    background: var(--white);

    border-radius: 30px;

    text-align: center;

    position: relative;

    margin-bottom: 60px;

    transition: all ease 0.5s;

    transform: translateY(0);

}

.our-services .frame:hover{

    box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.15);

    -webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.15);

    -moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.15);

    transform: translateY(-7px);

}

.our-services .frame .img{

    overflow: hidden;

    border-radius: 15px;

    margin-bottom: 33px;

}

.our-services .frame img{

    transition: all ease 0.5s;

}

.our-services .frame:hover .img img{

    transform: scale(1.1);

}

.our-services .frame h3{

    min-height: 52px;
    font: 700 24px/1.2 var(--open-sans);
 

}

.our-services .frame h3 a{

    text-decoration: none;

    color: var(--blue);

    transition: all ease 0.5s;

}

.our-services .frame p{

    color: #5e5e5e;
    min-height: 168px;
    line-height: 24px;

}

.our-services .btn-holder{

    text-align: center;

    position: absolute;

    left: 0;

    right: 0;

    bottom: -27px;

}

.our-services .btn-holder a{

    text-decoration: none;

    color: var(--white);

    display: inline-block;

}

.our-services .btn-holder .ico{

    width: 63px;

    height: 63px;

    border-radius: 100%;

    border: 5px solid var(--white);

    background: var(--yelow);

    display: block;

    margin: 0 auto;

    font-size: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: rotate(-45deg);

    transition: all ease 0.5s;

}

.our-services .btn-holder .ico .fa-arrow-right{
    color: #fff;
}

.our-services .frame:hover .btn-holder a .ico{

    transform: none;

}
.testimonial-area.areaclients{
    margin-top: 48px;
}

.chat-area{

    background: url('../images/bg-road-paving.png') no-repeat;

    background-size: cover;

    min-height: 395px;

    border-radius: 40px;

    margin: 18px 0 40px;

    padding: 15px 0;

    display: flex;

    align-items: center;

}

.chat-area h2{

    font: 48px/59px var(--montserrat);

    color: var(--white);

}
.chat-area p{font-size: 16px;
    line-height: 26px;
    color: #fff;}

.chat-area .btn-area{

    margin-bottom: 44px;

    margin-top: 10px;

}

.chat-area .btn-area .btn-primary{

    max-width: 273px;

    margin-left: 4px;

}

.chat-area .call-area{

    text-align: center;

}

.chat-area .call-area p{

    font: 700 16px/1.2 var(--montserrat);

    color: var(--white);

    margin: 0 0 5px;

}

.chat-area .call-area a{

    text-decoration: none;

    font: 700 36px/1.2 var(--montserrat);

    color: var(--yelow);

    transition: all ease 0.5s;

}

.chat-area .call-area a:hover{

    opacity: 0.7;

}

.choose-us{

    border-radius: 40px;

    overflow: hidden;

    background: var(--brown);

}

.choose-us .img{

    margin-left: calc((100vw - 1170px) / -2);

    margin-right: -54px;

}

.choose-us .img img{

    display: block;

    width: 100%;

    height: auto;

}

.choose-us .align-right{

    padding: 82px 0 0 4px;

}
.mapbox{height:552px;}
.map-locations .align-right{padding: 60px 30px 56px 4px;}
/*.map-locations .mapbox{margin-left: calc((100vw - 1170px) / -22);}*/
.map-locations .mapbox img{max-width:100%;}

.choose-us .heading h2{

    color: var(--white);

    font-weight: normal;

    font-size: 48px;

    padding-right: 2px;

    margin: 0 0 16px;

}

.choose-us .align-right p{

    color: #ecd8c1;

    line-height: 26px;

    margin: 0 0 22px;

}
.choose-us .align-right h3{color:#fff; font-weight:bold; margin-bottom:20px;}
.choose-us .align-right .list{

    margin: 0;

    padding: 0 0 13px;

    list-style: none;

}

.choose-us .align-right .list li{

    position: relative;

    display: inline-block;

    width: 48%;

    color: var(--white);

    font: 700 20px/1.2 var(--montserrat);

    padding-left: 64px;

    padding-bottom: 29px;

}

.choose-us .align-right .list li:before{

    font-family: "Font Awesome 6 Free";

    -webkit-font-smoothing: antialiased;

    display: var(--fa-display, inline-block);

    font-style: normal;

    font-variant: normal;

    line-height: 1;

    text-rendering: auto;

    font-weight: 900;

    content: '\f00c';

    position: absolute;

    left: 0;

    top: 0;

    color: var(--white);

    font-size: 30px;

    background: var(--yelow);

    width: 43px;

    height: 43px;

    border-radius: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}
.map-locations{margin-bottom:50px;}
.map-locations .align-right .list li{padding-left: 48px;}
.map-locations .align-right .list li:before{width:31px; height: 31px; font-size: 16px;}

.choose-us .features{

    display: flex;

    gap: 29px;

    margin: 0 0 50px;

}

.choose-us .features .box{

    background: rgba(255, 255, 255, 0.2);

    border: 1px dashed var(--white);

    border-radius: 25px;

    min-height: 208px;

    padding: 30px 30px 25px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.choose-us .features .title{

    font: 700 16px/1.2 var(--open-sans);

    color: var(--white);

}

.choose-us .features .count{

    font: 700 48px/1.2 var(--montserrat);

    color: var(--white);

}

.choose-us .align-right .btn-area .btn-primary{

    max-width: 265px;

    box-shadow: 0px 7px 16px -2px rgba(0, 0, 0, 0.29);

    -webkit-box-shadow: 0px 7px 16px -2px rgba(0, 0, 0, 0.29);

    -moz-box-shadow: 0px 7px 16px -2px rgba(0,0,0,0.29);

}

.recent-projects{

    padding: 54px 0 0px;

}

.recent-projects .heading{

    text-align: center;

}

.recent-projects .heading h2{

    font-size: 48px;

    margin: 0 0 16px;

}

.recent-projects .heading p{

    font-size: 24px;

    margin: 0 0 39px;

}

.recent-projects .projects-slider{

    padding-top: 76px;

}

.recent-projects .swiper-button-next,

.recent-projects .swiper-button-prev{

    position: absolute;

    top: 30px;

    width: 40px;

    height: 40px;

    border-radius: 100%;

    background: #f9f0d1;

    left: 50%;

    font-size: 0;

    line-height: 0;

    margin-left: 5px;

}

.recent-projects .swiper-button-prev{

    margin-left: -50px;

}

.recent-projects .swiper-button-prev:before,

.recent-projects .swiper-button-next:before {

    font-family: "Font Awesome 6 Free";

    -webkit-font-smoothing: antialiased;

    display: var(--fa-display, inline-block);

    font-style: normal;

    font-variant: normal;

    line-height: 1;

    text-rendering: auto;

    font-weight: 900;

    content: '\f060';

    position: absolute;

    left: 10px;

    top: 9px;

    font-size: 20px;

    color: var(--brown);

}

.recent-projects .swiper-button-next:before{

    content: '\f061';

}

.recent-projects .swiper-button-prev:after,

.recent-projects .swiper-rtl .swiper-button-next:after,

.recent-projects .swiper-button-next:after,

.recent-projects .swiper-rtl .swiper-button-prev:after{

    display: none;

}

.recent-projects  .slick-slide {

    transition: transform 0.3s ease;

    position: relative;

}

.recent-projects .slick-slide .img img{

    padding: 0 12px;

}

.recent-projects .slick-slide .magnify,

.recent-projects .swiper-slide .magnify{

    width: 53px;

    height: 53px;

    border-radius: 100%;

    background: var(--yelow);

    position: absolute;

    right: 17px;

    top: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: var(--white);

    font-size: 24px;

    opacity: 0;

}

.recent-projects .slick-track{

    padding-bottom: 70px;

}

.recent-projects .slick-slide .caption,

.recent-projects .swiper-slide .caption{

    position: absolute;

    left: 0;

    right: 0;

    bottom: -65px;

    background: var(--black);

    max-width: 490px;

    margin: 0 auto;

    padding: 25px 33px 30px;

    border-radius: 20px;

    color: var(--white);

    opacity: 0;

    transition: all ease 0.5s;

}

.recent-projects .slick-slide.slick-center .caption,

.recent-projects .slick-slide.slick-center .magnify,

.recent-projects .swiper-slide.swiper-slide-active .caption,

.recent-projects .swiper-slide.swiper-slide-active .magnify{

    opacity: 1;

}

.recent-projects .slick-slide .caption .title,

.recent-projects .swiper-slide .caption .title{

    display: block;

    font-weight: bold;

    font-size: 24px;

    margin-bottom: 8px;

}

.recent-projects .slick-slide .caption p,

.recent-projects .swiper-slide .caption p{

    font-size: 16px;

    line-height: 24px;

    margin: 0;

}

.slick-slider{

    position: relative;

    display:block;

    box-sizing: border-box;

    -webkit-user-select: none;

       -moz-user-select: none;

        -ms-user-select: none;

            user-select: none;

    -webkit-touch-callout: none;

    -khtml-user-select: none;

    -ms-touch-action: pan-y;

        touch-action: pan-y;

    -webkit-tap-highlight-color: transparent;

}

.slick-list{

    position: relative;

    display: block;

    overflow: hidden;

    margin: 0;

    padding: 0;

}

.slick-list:focus{

    outline: none;

}

.slick-list.dragging{

    cursor: pointer;

    cursor: hand;

}

.slick-slider .slick-track,

.slick-slider .slick-list{

    -webkit-transform: translate3d(0, 0, 0);

       -moz-transform: translate3d(0, 0, 0);

        -ms-transform: translate3d(0, 0, 0);

         -o-transform: translate3d(0, 0, 0);

            transform: translate3d(0, 0, 0);

}

.slick-track{

    position: relative;

    top: 0;

    left: 0;

    display: block;

    margin-left: auto;

    margin-right: auto;

}

.slick-track:before,

.slick-track:after{

    display: table;

    content: '';

}

.slick-track:after{

    clear: both;

}

.slick-loading .slick-track{

    visibility: hidden;

}

.slick-slide{

    display: none;

    float: left;

    height: 100%;

    min-height: 1px;

}

[dir='rtl'] .slick-slide{

    float: right;

}

.slick-slide img{

    display: block;

}

.slick-slide.slick-loading img{

    display: none;

}

.slick-slide.dragging img{

    pointer-events: none;

}

.slick-initialized .slick-slide{

    display: block;

}

.slick-loading .slick-slide{

    visibility: hidden;

}

.slick-vertical .slick-slide{

    display: block;

    height: auto;

    border: 1px solid transparent;

}

.slick-arrow.slick-hidden {

    display: none;

}

.testimonial-area{

    background: #f9f0d1;

    border-radius: 40px;

    padding: 70px 0 78px;

}

.testimonial-area .heading{

    margin-bottom: 31px;

}

.testimonial-area .heading h2{

    font-weight: normal;

    color: #000;

    font-size: 48px;

}

.testimonial-area .heading h2 span{

    font-weight: bold;

}

.testimonial-area .review{

    background: var(--white);

    padding: 16px 40px 18px;

    border-radius: 15px;

    display: flex;

    gap: 30px;

    align-items: center;

    margin-right: 18%;

}

.testimonial-area .review .num{

    font: 800 48px/1.2 var(--montserrat);

}

.testimonial-area .review ul{

    margin: 0;

    padding: 0;

    list-style: none;

}

.testimonial-area .review ul li{

    display: inline-block;

    vertical-align: middle;

    color: var(--yelow);

}

.testimonial-area .review p{

    margin: 0;

    color: #505050;

    font-size: 18px;

    font-family: var(--montserrat);

    font-weight: bold;

}

.testimonial-area .carousel{

    padding: 14px 0 10px 22px;

}

.testimonial-area .carousel:before{

    position: absolute;

    left: -30px;

    top: 0;

    bottom: 0;

    width: 1px;

    border: 1px dashed #c7c0a7;

    content: '';

}

.testimonial-area .carousel .top-holder{

    display: flex;

    justify-content: space-between;

    padding-bottom: 19px;

    align-items: center;

}

.testimonial-area .carousel .icon{

    width: 60px;

    height: 60px;

    background: var(--yelow);

    border-radius: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--white);

    font-size: 28px;

}

.testimonial-area .carousel .btn-holder{

    display: flex;

    gap: 15px;

}

.testimonial-area .carousel-control-next, 

.testimonial-area .carousel-control-prev{

    position: static;

}

.testimonial-area .carousel .btn-holder button{

    width: 40px;

    height: 40px;

    background: var(--white);

    border-radius: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}

.testimonial-area .carousel .btn-holder button i{

    color: var(--brown);

}

.testimonial-area .blockquote{

    margin-bottom: 0;

}

.testimonial-area .blockquote q{

    color: #2d313a;

    font: italic 20px/32px var(--open-sans);

    display: block;

    padding-bottom: 26px;

    padding-right: 19px;

    quotes: none;

}

.testimonial-area .blockquote q:after,

.testimonial-area .blockquote q:before{

    display: none;

}

.testimonial-area .blockquote q p{

    margin: 0;

}

.testimonial-area .blockquote cite{

    display: block;

    font: 700 18px/22px var(--montserrat);

    color: #1b1b1b;

}

 



#footer{

    margin: 53px 0 40px;

    padding: 40px 0 4px;

    background: #2e2c27;

    border-radius: 40px;

    overflow: hidden;

}

#footer .logo{

    max-width: 262px;

    display: block;

    padding-bottom: 21px;

}

#footer .social{

    margin: 0;

    padding: 0;

    list-style: none;

    text-align: center

}

#footer .social li{

    display: inline-block;

    vertical-align: middle;

    margin: 0 7px;

}

#footer .social a{

    text-decoration: none;

    color: var(--white);

    font-size: 20px;

    transition: all ease 0.5s;

}

#footer .social a:hover{

    opacity: 0.7;

}

#footer h3{

    margin: 0 0 20px;

    color: var(--white);

    font: 700 18px/1.2 var(--montserrat);

}

#footer .quick-links{

    margin: 0;

    padding: 0;

    list-style: none;

}

#footer .quick-links li{

    margin-bottom: 3px;

}

#footer .quick-links a{

    text-decoration: none;

    color: #bdbdbe;

    transition: all ease 0.5s;

    font-size: 14px;

}

#footer .quick-links a:hover{

    color: var(--white);

}

#footer .info-holder{

    display: flex;

    align-items: center;

    position: relative;

    padding-left: 36px;

    padding-bottom: 21px;

}

#footer .info-holder .txt{

    display: block;

    color: #898885;

    font-size: 14px;

    line-height: 1;

}

#footer .info-holder a,

#footer .info-holder .office-hours{

    text-decoration: none;

    color: var(--white);

    font-size: 14px;

    transition: all ease 0.5s;

}

#footer .info-holder a:hover{

    opacity: 0.7;

}

#footer .info-holder .tel{

    font-size: 20px;

    font-weight: 600;

}

#footer .info-holder .ico{

    position: absolute;

    left: 5px;

    top: 5px;

    color: var(--yelow);

    font-size: 20px;

}

#footer .quick-links.add li:first-child,

#footer .quick-links.add li:nth-child(2){

    width: 48%;

    display: inline-block;

}

#footer .border-top{

    margin: 16px 0 0;

    border-top: 3px solid var(--white) !important;

}

#footer .border-top p{

    margin-top: 17px;

    color: var(--white);

    color: #9a9a9a;

    font-size: 14px;

}

#footer .border-top p a{

    text-decoration: none;

    color: #9a9a9a;

}

#footer .border-top p a:hover{

    text-decoration: underline;

    color: var(--white);

}

.breadcrumbs{

    min-height: 290px;

    background: url('../images/asphalt-road-repair.png') no-repeat center center;

    background-size: cover;

    border-radius: 30px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    z-index: 1;

}

.breadcrumbs.services{

    background-image: url(../images/bg-our-services.jpg);

}

.breadcrumbs.about{

    background-image: url(../images/bg-about-us.jpg);

}

.breadcrumbs.contact{

    background-image: url(../images/bg-contact-us.jpg);

}

.breadcrumbs.work{

    background-image: url(../images/bg-our-work.jpg);

}

.breadcrumbs::before{

    background: rgba(0, 0, 0, 0.5);

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    content: '';

    z-index: -1;

}

.breadcrumbs h1{

    text-align: center;

    color: var(--white);

    margin: 0 0 30px;

}

.breadcrumbs .breadcrumbs-area{

    text-align: center;

}

.breadcrumbs .breadcrumbs-area .sub-menu{

    margin: 0;

    padding: 16px 40px;

    list-style-type: none;

    background: var(--yelow);

    min-width: 350px;

    display: inline-block;

    min-height: 30px;

    line-height: 30px;

    clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);

}

.breadcrumbs .breadcrumbs-area .sub-menu li{

    display: inline-block;

    color: var(--white);

}

.breadcrumbs .breadcrumbs-area .sub-menu li a:after {

    content: "\f101";

    position: relative;

    margin: 0 10px;

    font-weight: 600;

    font-size: 15px;

    color: #fff;

    font-family: 'Font Awesome 6 Free';

}

.breadcrumbs .breadcrumbs-area .sub-menu li a:hover{

    color: var(--black);

}

.breadcrumbs .breadcrumbs-area .sub-menu a{

    text-decoration: none;

    color: var(--white);

    transition: all ease 0.5s;

}

.projects-slider.unslick{

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    padding-top: 0;

}

.projects-slider.unslick .item {

    flex: 0 0 calc(25% - 20px); 

    box-sizing: border-box;

}

.projects-slider.unslick .magnify,

.projects-slider.unslick .caption{

    display: none;

}

.projects-slider.unslick .item .img img{

    cursor: pointer;

    transition: all ease 0.5s;

    transform: scale(1.1);

}

.projects-slider.unslick .item .img{

    overflow: hidden;

    border-radius: 12px;

}

.projects-slider.unslick .item:hover .img img{

    transform: scale(1);

}

.contact-page{

    padding: 60px 0;

    background: var(--seashell);

}

.contact-page .img-logo{

    max-width: 35px;

    margin: 0 auto 10px;

}

.contact-page .title-area .main-title{

    font-size: 36px;

}

.contact-page .contact-box,

.contact-page .contact-form{

    padding: 15px;

}

.contact-page .contact-box .small-title{

    margin-bottom: 10px;

}

.contact-page .contact-box .main-title{

    font-size: 33px;

    line-height: 1;

    font-weight: bold;

    margin-bottom: 25px;

}

.contact-page .contact-box .text p{

    margin-bottom: 40px;

}

.contact-page .contact-box .box{

    border: 2px solid #dbe3df;

    border-radius: 8px;

    padding: 20px 15px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

}

.contact-page .contact-box .box .ico{

    color: var(--yelow);

    font-size: 35px;

    min-width: 60px;

    min-height: 50px;

    text-align: center;

}

.contact-page .contact-box .box .txt{

    padding-left: 20px;

}

.contact-page .contact-box .box .txt address{

    margin: 0;

}

.contact-page .contact-box .box .title{

    display: block;

    font-size: 18px;

    padding-bottom: 5px;

}

.contact-page .contact-box .box .txt p{

    margin: 0;

    color: var(--black);

}

.contact-page .contact-box .box .txt .link{

    text-decoration: none;

    color: var(--black);

    transition: all ease 0.5s;

}



.contact-page .contact-box .box .txt .link:hover{

    opacity: 0.7;

}

.contact-page .contact-form{

    background: var(--white-color);

    box-shadow: 4px 19px 73px #f1f1f1;

    padding: 50px;

    border-radius: 10px;

}

.contact-page .contact-form label{

    display: block;

    font-size: 14px;

    font-weight: 500;

    margin-bottom: 2px;

}

.contact-page .contact-form .form-control,

.contact-page .contact-form .form-select{

    height: 40px;

    font-size: 14px;

    box-shadow: none;

    margin-bottom: 14px;

}

.contact-page .contact-form label sup{

    color: #ff0000;

}

.contact-page .contact-form textarea.form-control{

    min-height: 130px;

    resize: none;

}

.contact-page .contact-form .btn-submit{

    color: var(--white-color);

    text-transform: uppercase;

    background: var(--yelow);

    border-radius: 10px;

    font: 700 16px / 1.2 var(--open-sans);

    padding: 19px 34px;

    transition: 0.5s;

    border: 0;

    width: 100%;

}

.contact-page .contact-form .btn-submit:hover{

    background: var(--black);

    color: var(--white);

}

.map-holder {

    border-radius: 20px;

    overflow: hidden;

}

.map-inner iframe {

    border: 0;

    width: 100%;

    height: 350px;

}



@media only screen and (min-width: 768px){

    .recent-projects .swiper {

        width: 100%;

        max-width: 2000px;

        padding: 80px 60px 70px 60px;

    }

    .recent-projects .swiper-slide {

        width: 318px; 

        height: 480px;

        border-radius: 20px;

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 24px;

        font-weight: bold;

        transition: width 0.9s ease, background 0.4s ease;

    }

    .recent-projects .swiper-slide-active {

        width: 678px; 

        z-index: 2;

        height: 480px;

    }

    .recent-projects .swiper-slide img{

        height: 480px;

        object-fit: cover;

        border-radius: 20px;

    }

}



@media only screen and (max-width: 1900px){

    .choose-us .img img{

        height: 989px;

        object-fit: cover;

    }

}

@media only screen and (max-width: 1650px){

    #header .right-bottom .btn-area{

        margin-left: -44px;

    }

}

@media only screen and (max-width: 1399.98px){

    #header .right-bottom .btn-area {

        margin-left: -144px;

    }

    #header .right-bottom:after{

        right: 240px;

    }

    #header .right-bottom .nav-area:before{

        left: auto;

        right: 21px;

    }

    #header .nav-area .navbar-nav{

        justify-content: flex-start;

    }

    .chat-area{

        padding: 15px 20px;

    }

    .choose-us .img {

        margin-left: calc((100vw - 1177px) / -2);

        margin-right: 0;

    }

    .choose-us .align-right{

        padding-left: 0;

    }

    .choose-us .align-right .list li{

        padding-right: 40px;

    }

    .recent-projects .slick-slide .caption,

    .recent-projects .swiper-slide .caption{

        padding: 15px 20px;

    }

    .chat-area .btn-area{

        display: flex;

        justify-content: center;

    }

    .chat-area .btn-area .btn-primary{

        flex-grow: 1;

    }

}

@media only screen and (max-width: 1199.98px){

    #header .right-top{

        margin: 0 5% 0 3%;

    }
    
    #header .nav-area .navbar-nav .nav-link{
        padding-right: 4px;
        padding-left: 4px;
        font-size: 14px;
    }
    
    #header .nav-area .navbar-nav{

        gap: 6px;

    }

    #header .right-bottom .btn-area{

        margin-left: -169px;

        top: -6px;

    }

    #header .btn-area .btn-primary{

        padding: 8px 10px;
font-size: 14px;
        max-width: 155px;

    }
    .btn-primary .ico{width: 35px;
    height: 35px; padding:0; line-height: 35px;}

    .our-services .frame h3{

        min-height: 58px;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .chat-area h3,

    .choose-us .heading h2{

        font-size: 42px;

        line-height: 1.2;

    }

    .choose-us .align-right{

        padding-top: 50px;

    }

    .choose-us .features .count{

        font-size: 38px;

    }

    .choose-us .features .box{

        padding: 15px;

        flex: 1;

    }

    .choose-us .align-right .list li{

        font-size: 18px;

    }

    .choose-us .img {

        margin-left: calc((100vw - 967px) / -2);

    }

    

    .recent-projects .slick-slide .caption,

    .recent-projects .swiper-slide .caption{

        left: 15px;

        right: 15px;

    }

    .recent-projects .slick-slide.slick-current .caption,

    .recent-projects .slick-slide.slick-current .magnify{

        opacity: 1;

    }

    .contact-page .contact-box .box .txt .link{

        word-break: break-all;

    }

}

@media only screen and (max-width: 991.98px){

    #wrapper{

        padding: 120px 15px 0;

    }
    #header .right-top .info a .txt{

        display: none;

    }

    #header .right-top:before,

    #header .right-top:after,

    #header .right-bottom:after,

    #header .right-bottom:before,

    #header:before,

    #header .right-bottom .btn-area,

    #header .right-bottom .nav-area:before,

    .hero-section .curve,
    .breadcrumbs .curve{

        display: none;

    }

    #header .right-top .info,

    #header .right-top .social{

        gap: 20px;

    }

    #header .right-top .info a{

        font-size: 20px;

    }

    #header .right-top{

        margin: 0;

        padding: 35px 20px;

    }

    #header .right-top .contact {

        display: flex;

        justify-content: flex-start;

        gap: 30px;

    }

    #header .right-bottom .nav-area{

        margin-right: 0;

    }

    #header .navbar-toggler{

        position: absolute;

        right: 16px;

        top: -69px;

        background: var(--white);

    }

    #header .logo{

        max-width: 140px;

    }

    .hero-section{

        min-height: 600px;

    }

    .hero-section .caption h1{

        font-size: 50px;

    }

    .hero-section .caption .txt{

        max-width: 100%;

        font-weight: normal;

    }

    .about-area .img-right{

        padding: 0;

        margin: 60px 0 0;

    }

    .about-area .img-right img{

        display: block;

        margin: 0 auto;

    }

    .about-area .img-right .caption{

        left: 10px;

    }

    .our-services{

        padding-bottom: 20px;

    }

    .our-services .heading h2{

        font-size: 38px;

    }

    .our-services .frame{

        padding: 10px;

        padding-bottom: 41px;

    }

    .our-services .frame h3{

        min-height: inherit;

    }

    .chat-area h3{

        text-align: center;

        font-size: 32px;

    }

    .chat-area .btn-area{

        margin: 10px 0;

    }

    .choose-us .img{

        margin-left: 0;

        display: none;

    }

    .choose-us .align-right .list li {

        padding-right: 20px;

    }

    .choose-us .align-right{

        padding-bottom: 40px;

    }

    .recent-projects .slick-slide .caption,

    .recent-projects .swiper-slide .caption{

        bottom: 20px;

    }

    .testimonial-area .heading h2{

        font-size: 38px;

    }

    .testimonial-area .review{

        margin-right: 8%;

    }

    .testimonial-area .review{

        padding: 15px 30px;

    }

    .testimonial-area .carousel{

        padding-left: 0;

    }

    #footer .quick-links.add li:first-child,

    #footer .quick-links.add li:nth-child(2){

        width: 100%;

    }

    #header .close-toggler {

        background: none;

        color: #fff;

        padding: 5px;

        border: none;

        margin-top: 10px;

        font-size: 24px;

        position: absolute;

        top: 0;

        right: 15px;

        display: block;

    }

    #header .navbar-collapse{

        position: fixed;

        height: auto !important;

        right: 0;

        top: 0;

        bottom: 0;

        width: 64%;

        padding-right: 3rem;

        padding-left: 3rem;

        padding-top: 58px;

        background: rgba(0,0,0,0.8);

        z-index: 999;

    }

    #header .navbar .nav-item{

        margin: 0;

    }

    #header .nav-area .navbar-nav .nav-link{

        font-size: 16px;

        padding: 10px 5px;

        color: var(--white);

    }

    body.nav-active{

        overflow: hidden;

    }

    .contact-page .contact-box .box .txt{

        padding-left: 10px;

    }

    .contact-page .contact-form{

        padding: 30px 20px;

    }

    .contact-page .contact-box .box{

        padding-left: 5px;

    }

    #header .navbar .dropdown-menu{

        background: transparent;

        padding: 0;

        border: 0;

    }

    #header .navbar .dropdown-menu .dropdown-item{

        font-size: 16px;

        padding: 5px 25px;

        color: var(--white);

        text-transform: uppercase;

        font-weight: bold;

    }

}

@media only screen and (max-width: 767.98px){

    #header .right-top{

        display: none;

    }

    .hero-section .caption h1{

        font-size: 30px;

        line-height: 34px;

    }

    .hero-section .caption .txt{

        line-height: 24px;

    }

    .about-area .heading h2{

        font-size: 28px;

    }

    .about-area .info{

        flex-direction: column;

    }

    .about-area .info .img img{

        width: 100%;

    }

    .our-services .frame,

    .our-services .frame .img{

        border-radius: 12px;

    }

    .our-services .frame h3{

        min-height: 58px;

    }

    #footer .social{

        padding-bottom: 40px;

    }

    #footer .border-top{

        padding-top: 15px;

    }

    #footer .border-top p{

        margin: 0;

        text-align: center;

    }

    .breadcrumbs .curve{

        display: none;

    }

    .breadcrumbs{

        min-height: 250px;

    }

    .breadcrumbs .breadcrumbs-area .sub-menu{

        min-width: 250px;

        padding-top: 5px;

        padding-bottom: 5px;

    }

    .contact-page{

        padding: 30px 0;

    }

    .contact-page .contact-box .main-title{

        font-size: 20px;

    }

    .contact-page .contact-box .small-title{

        margin: 0;

        display: inline-block !important;

    }

    .breadcrumbs h1{

        margin-bottom: 50px;

    }

    .choose-us .align-right,

    .testimonial-area{

        padding: 35px 20px;

    }

    .testimonial-area .carousel:before{

        display: none;

    }

    .recent-projects .swiper {

      width: 100%;

      padding: 60px 20px 40px;

      box-sizing: border-box;

    }

    

    .recent-projects .swiper-slide {

      width: 100%; 

      height: auto;

      font-size: 18px;

      border-radius: 15px;

    }

    

    .recent-projects .swiper-slide img {

      width: 100%;

      height: auto;

      border-radius: 15px;

    }

}

@media only screen and (max-width: 575.98px){

    .about-area .img-right img,

    .our-services .frame img{

        width: 100%;

    }

    .testimonial-area .review{

        margin-right: 0;

        margin-bottom: 20px;

    }

    #footer{

        text-align: center;

        padding-bottom: 20px;

    }

    #footer .logo{

        margin: 0 auto;

    }

    #footer .info-holder .txt,

    #footer .info-holder{

        text-align: left;

    }

    #footer .quick-links.add{

        max-width: 180px;

        margin: 0 auto;

    }

    #footer .info-holder a{

        word-break: break-all;

    }

    #footer .social{

        padding-bottom: 10px;

    }

    #footer h3{

        border-top: 1px solid #898885;

        padding: 20px 0 0;

        margin-top: 25px;

    }

    .testimonial-area .review{

        flex-direction: column;

        gap: 0;

        justify-content: center;

        text-align: center;

        padding: 20px 10px;

    }

    .testimonial-area{

        padding-top: 40px;

        padding-bottom: 20px;

    }

    .our-services{

        padding-top: 40px;

    }

    .our-services .heading h2,

    .chat-area h3,

    .choose-us .heading h2,

    .recent-projects .heading h2{

        font-size: 28px;

    }

    .chat-area h3{

        font-size: 22px;

    }

    .btn-primary{

        font-size: 14px;

    }

    .chat-area .call-area p{

        font-size: 14px;

    }

    .chat-area .call-area a{

        font-size: 26px;

    }

    .choose-us .align-right p,

    .recent-projects .heading p{

        margin-bottom: 15px;

    }

    .choose-us .align-right .list li{

        display: flex;

        align-items: center;

        width: 100%;

        padding: 5px 0;

        font-size: 14px;

    }

    .choose-us .align-right .list li:before{

        width: 20px;

        height: 20px;

        font-size: 14px;

        position: static;

        margin-right: 10px;

    }

    .choose-us .features{

        flex-direction: column;

        gap: 10px;

    }

    .choose-us .features .box{

        min-height: 110px;

    }

    .choose-us .features{

        margin-bottom: 20px;

    }

    .recent-projects{

        padding-bottom: 0;

    }

    .recent-projects .slick-track{

        padding-bottom: 20px;

    }

    .recent-projects .heading p{

        font-size: 16px;

    }

    .recent-projects .projects-slider {

        padding-top: 46px;

    }

    .recent-projects .slick-slide .img img{

        padding: 0 3px;

    }

    .recent-projects .slick-slide .caption,

    .recent-projects .swiper-slide .caption{

        display: none;

    }

    .recent-projects .slick-slide .magnify,

    .recent-projects .swiper-slide .magnify{

        width: 25px;

        height: 25px;

        font-size: 12px;

        top: 10px;

    }

    .recent-projects .slick-arrow{

        width: 30px;

        height: 30px;

    }

    .recent-projects .slick-arrow.slick-prev:before, 

    .recent-projects .slick-arrow.slick-next:before{

        font-size: 14px;

        top: 6px;

        left: 7px;

    }

    .our-services .frame .img{

        padding-bottom: 15px;

    }

    .our-services .frame h3{

        min-height: inherit;

        margin-bottom: 12px;

    }

    .testimonial-area .heading h2{

        font-size: 28px;

    }

    .testimonial-area .blockquote q{

        font-size: 16px;

        line-height: 24px;

        padding-right: 0;

    }

    .testimonial-area .blockquote cite{

        font-size: 14px;

    }

    #footer{

        margin-top: 30px;

    }

    .breadcrumbs{

        min-height: 200px;

    }

    .breadcrumbs.services{

        margin-bottom: 30px;

    }

}







.gallery-wrap .filters {

    position: relative;

    text-align: center;

}

.gallery-wrap .filters li {

    position: relative;

    display: inline-block;

    cursor: pointer;

    background: transparent;

    padding: 12px 20px;

    border-radius: 30px;

    font-weight: bold;

    font-size: 14px;

    color: #7a7a7a;

    margin: 0 5px 5px 0;

    text-transform: uppercase;

    display: inline-block;

    border: 1px solid #cdcdcd;

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease-out;

    -ms-transition: all 0.5s ease-out;

    -o-transition: all 0.5s ease-out;

    transition: all 0.5s ease-out;

}

.gallery-wrap .filters li:hover, .gallery-wrap .filters li.active {

    color: #fff;

    background: #eebd1f; border-color:#eebd1f;

}

.gallery-wrap .filters li .txt {

    position: relative;

    display: block;

    z-index: 1;

}

.filter-tabs{display: flex  ;

        align-items: center;

        overflow: auto;

        white-space: nowrap;

        justify-content: center;

    }





@media screen and (max-width:990px){

    .filter-tabs{ 

        justify-content: left;

    }

}







/* New Stylings */

.services-detail{

    padding-top: 30px;

}

.services-detail p img{

    float: left;

    margin-right: 25px;

    width: auto;

    margin-bottom: 15px;

    object-fit: cover;

    height: 270px;

    border-radius: 15px;

}

.list-icon{

    margin: 0;

    padding: 0 0 13px;

    list-style: none;

    font-size: 16px;

    line-height: 1.2;

}

.list-icon li{

    padding-left: 25px;

    padding-bottom: 10px;

    position: relative;

    color: #000;

}

.list-icon li:before{

    font-size: 18px;

    font-family: "Font Awesome 6 Free";

    -webkit-font-smoothing: antialiased;

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    line-height: 1;

    text-rendering: auto;

    font-weight: 900;

    content: '\f058';

    position: absolute;

    left: 0;

    top: 1px;

    color: #eebd1f;

}


.otherservices{
    background: #F1F1F1;
    border-radius: 15px;
    padding: 40px 30px;
}
.otherservices h4{font-size: 24px; font-weight: 700; margin-bottom: 25px;}

.service-list{
    margin: 0;
    list-style: none;
    padding: 0;
}

.service-list li{
    position: relative;
}

.service-list li a{
    text-decoration: none;
    font-size: 18px;
    display: block;
font-weight: 600;
    padding:10px 0;
    padding-right: 33px;

    color: #000;

    position: relative;

    transition: all ease 0.5s;

}

.service-list li a:after{

    content: "\f061";

    position: absolute;

    right: 10px;

    top: 50%;

    margin: 0 10px;
    font-size: 18px;

    color: #000;

    font-family: 'Font Awesome 6 Free';

    transform: translateY(-50%);

    transition: all ease 0.5s;

}

.service-list li a.active,

.service-list li a.active:after,

.service-list li a:hover,

.service-list li a:hover:after{

    color: #eebd1f;

}


.service-list li a.active:after,
.service-list li a:hover:after{

    right: 5px;

}

.sitebarcta{background: #2e2c27; padding: 40px 30px; border-radius: 15px; margin-top: 30px; text-align: center;}
.sitebarcta .btn-area{margin-top: 15px;}
.sitebarcta .btn-area .btn-primary{max-width:none;}
.sitebarcta .btn-area .btn-primary:hover{background: #cfcfcf; color: #000;}
.sitebarcta h5{font-size: 24px; color: #fff; font-weight: 700;}
.sitebarcta p{color: #fff; margin-bottom: 5px;}
.sitebarcta .call-area{margin-top: 15px;}
.call-area a{font-size: 30px; text-decoration: none; color:var(--yelow); font-weight: 700;}

.main-btn {display: inline-flex;  justify-content: center; }
.main-btn a span{max-width:inherit !important; padding-right: 15px;}
.main-btn a{max-width: inherit !important;}
.main-btn a:hover{background:#fff; color:#000;}
.main-btn a:hover .ico{background:#000; color:#fff;}




/*.services-detail .feature-img{*/

/*  margin-bottom: 20px;*/

/*  height: 250px;*/

/*  border-radius: 20px;*/

/*  overflow: hidden;*/

/*}*/

/*.services-detail .feature-img img{*/

/*  width: 100%;*/

/*  height: 100%;*/

/*  object-fit: fill;*/

/*}*/

.services-detail .feature-img{

    margin-bottom: 20px; 

    border-radius: 10px;

    overflow: hidden;

}

.services-detail .feature-img img{

    width: 100%;
    object-fit: cover;

}

.services-detail p a{

    text-decoration: underline;

    color: #eebd1f

}

.services-detail p a:hover{

    text-decoration: none;

}

@media only screen and (max-width: 767.98px){

    .services-detail {

        padding-top: 0;

    }

    .service-list{

        margin-bottom: 30px;

    }

    .services-detail .heading h2{

        font-size: 28px;

    }

}





/** additional css **/
.breadcrumbs.location{
    background-image: url(../images/bg-our-location.jpg);
}
.breadcrumbs.blogs{
    background-image: url(../images/bg-blog.jpg);
}
.location-area,
.listing-details,
.blog-details,
.blog-listing{
    padding: 60px 0;
}
.location-area .heading,
.blog-listing .heading{
    margin-bottom: 50px;
}
.location-area .heading .title,
.blog-listing .heading .title{
    margin-bottom: 15px;
}
.location-area .locations-name{
    position: relative;
    margin-bottom: 24px;
}
.location-area .locations-name .link{
    position: relative;
    padding: 18px 30px 18px 80px;
    background: #f1f1f1;
    border-radius: 16px;
    display: block;
    text-decoration: none;
    transition: all ease 0.5s;
}
.location-area .locations-name .link.active,
.location-area .locations-name .link:hover{
    background: #06132c;
}
.location-area .locations-name .link.active .name,
.location-area .locations-name .link:hover .name{
    color: #fff;
}
.location-area .locations-name .name{
    font: 600 18px/1.2 "Montserrat", serif;
    color: #1b1a1a;
}
.location-area .locations-name .ico{
    font-size: 30px;
    color: #eebd1f;
    position: absolute;
    left: 30px;
    top: 15px;
}
.listing-details .feature-img,
.blog-details .feature-img{
    margin-bottom: 30px;
}
.listing-details h2,
.blog-details h2{
    font: 600 36px/1.2 "Montserrat", serif;
    margin-bottom: 20px;
}
.listing-details h3,
.blog-details h3{
    font: 600 28px/1.2 "Montserrat", serif;
    margin-bottom: 10px;
}
.listing-details h4,
.blog-details h4{
    font: 600 24px/1.2 "Montserrat", serif;
    margin-bottom: 10px;
}
.listing-details .location-widget{
    background: #f1f1f1;
    padding: 24px 29px;
    border-radius: 15px;
    margin-bottom: 30px;
}
.listing-details .location-widget .title,
.blog-details .recent-widget .title{
    display: block;
    color: #eebd1f;
    font: 600 24px/1.2 "Montserrat", serif;
    margin-bottom: 25px;
}
.listing-details .location-widget .locations{
    padding: 0;
    margin: 0;
    list-style: none;
}
.listing-details .location-widget .locations li{
    margin-bottom: 14px;
}
.listing-details .location-widget .locations a{
    display: block;
    background: #fff;
    border-radius: 14px;
    padding: 16px 23px 16px 60px;
    text-decoration: none;
    color: #1b1a1a;
    position: relative;
    transition: all ease 0.5s;
}
.listing-details .location-widget .locations .ico{
    font-size: 24px;
    color: #eebd1f;
    position: absolute;
    left: 25px;
    top: 16px;
}
.listing-details .location-widget .locations .name{
    font: 600 16px/1.2 "Montserrat", serif;
}
.listing-details .location-widget .locations a.active,
.listing-details .location-widget .locations a:hover{
    background: #06132c;
    color: #fff;
}
.blog-details .cta-widget,
.listing-details .cta-widget{
    background: #2e2c27;
    padding: 30px 22px;
    border-radius: 15px;
    text-align: center;
    color: #fff;
    font-family: "Open Sans", serif;
}
.listing-details .cta-widget .title,
.blog-details .cta-widget .title{
    display: block;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 15px;
}
.listing-details .cta-widget p,
.blog-details .cta-widget p{
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 15px;
}
.listing-details .cta-widget .btn-contact,
.blog-details .cta-widget .btn-contact{
    background: #eebd1f;
    display: block;
    padding: 9px 7px 9px 23px;
    text-decoration: none;
    color: #fff;
    border-radius: 30px;
    position: relative;
    text-align: left;
    margin-bottom: 15px;
    transition: all ease 0.5s;
}
.listing-details .cta-widget .btn-contact:hover,
.blog-details .cta-widget .btn-contact:hover{
    background: #fff;
    color: #000;
}
.listing-details .cta-widget .btn-contact:hover .ico,
.blog-details .cta-widget .btn-contact:hover .ico{
    background: #000;
    color: #fff;
}
.listing-details .cta-widget .btn-contact .ico,
.blog-details .cta-widget .btn-contact .ico{
    width: 34px;
    height: 34px;
    border-radius: 100%;
    background: #fff;
    display: inline-block;
    color: #000;
    font-size: 18px;
    line-height: 34px;
    position: absolute;
    right: 7px;
    top: 4px;
    text-align: center;
    transition: all ease 0.5s;
}
.listing-details .cta-widget .btn-contact .text,
.blog-details .cta-widget .btn-contact .text{
    font-size: 16px;
    font-weight: 600;
}
.listing-details .cta-widget .tel,
.blog-details .cta-widget .tel{
    text-decoration: none;
    color: #eebd1f;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    transition: all ease 0.5s;
}
.listing-details .cta-widget .tel:hover,
.blog-details .cta-widget .tel:hover{
    color: #fff;
}
.blog-details .blog-info{
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.blog-details .blog-info li:first-child{
    padding-left: 0;
}
.blog-details .blog-info li{
    display: inline-block;
    vertical-align: top;
    padding: 0 23px;
    position: relative;
}
.blog-details .blog-info li:first-child:before{
    display: none;
}
.blog-details .blog-info li:before{
    position: absolute;
    left: -1px;
    top: 5px;
    height: 18px;
    width: 1px;
    background: #000;
    content: '';
}
.blog-details .blog-info a{
    color: #000;
    text-decoration: none;
    font: 16px/20px "Open Sans", serif;
    transition: all ease 0.5s;
}
.blog-details .blog-info i{
    color: #eebd1f;
    margin-right: 3px;
}
.blog-details .blog-info .txt{
    transition: all ease 0.5s;
}
.blog-details .blog-info i,
.blog-details .blog-info .txt,
.blog-details .blog-info .date{
    vertical-align: middle;
    display: inline-block;
}
.blog-details .blog-info a:hover .txt{
    color: #eebd1f;
}
.blog-details .recent-widget {
    background: #f1f1f1;
    padding: 24px 22px;
    border-radius: 15px;
    margin-bottom: 30px;
}
.blog-details .recent-posts{
    margin: 0;
    padding: 0;
    list-style: none;
}
.blog-details .recent-posts li{
    overflow: hidden;
    margin-bottom: 30px;
}
.blog-details .recent-posts li:last-child{
    margin-bottom: 8px;
}
.blog-details .recent-posts .img{
    float: left;
    max-width: 125px;
    margin-right: 20px;
}
.blog-details .recent-posts .img img{
    display: block;
    max-width: 100%;
    height: auto;
    transition: all ease 0.5s;
}
.blog-details .recent-posts .img a:hover img{
    opacity: 0.7;
}
.blog-details .recent-posts .txt{
    overflow: hidden;
}
.blog-details .recent-posts h3{
    margin-bottom: 5px;
    color: #1b1a1a;
    font: 600 20px/1.2 "Montserrat", serif;
}
.blog-details .recent-posts a{
    text-decoration: none;
    color: #1b1a1a;
    transition: all ease 0.5s;
}
.blog-details .recent-posts a:hover{
    color: #eebd1f;
}
.blog-details .recent-posts time{
    font: 16px/1.2 "Open Sans", serif;
}
.blog-listing .list-frame{
    background: #f1f1f1;
    border-radius: 12px;
    padding-bottom: 25px;
    margin-bottom: 26px;
}
.blog-listing .list-frame .img{
    position: relative;
}
.blog-listing .list-frame .img img{
    display: block;
    max-width: 100%;
    transition: all ease 0.5s;
}
.blog-listing .list-frame .img a:hover img{
    opacity: 0.7;
}
.blog-listing .list-frame .img .date{
    position: absolute;
    right: 22px;
    bottom: -14px;
    background: #eebd1f;
    padding: 7px 13px;
    border-radius: 10px;
}
.blog-listing .list-frame .date span{
    display: block;
    color: #fff;
}
.blog-listing .list-frame .date .num{
    font: 600 14px/1.2 "Montserrat", serif;
}
.blog-listing .list-frame .date .month{
    font: 600 12px/1.2 "Montserrat", serif;
    text-transform: uppercase;
}
.blog-listing .list-frame .text{
    padding: 28px 14px 20px 22px;
}
.blog-listing .list-frame .text h2{
    margin-bottom: 0;
    font: 600 16px/26px "Montserrat", serif;
}
.blog-listing .list-frame .text h2 a{
    color: #1b1a1a;
    text-decoration: none;
    transition: all ease 0.5s;
}
.blog-listing .list-frame .text h2 a:hover{
    color: #eebd1f;
}
.blog-listing .list-frame .btn{
    margin: 0 22px;
}
.blog-listing .list-frame .btn .ico{
    width: 31px;
    height: 31px;
    padding: 6px 0;
}
@media only screen and (max-width: 1199.98px){
    .listing-details .location-widget .locations a{
        padding: 16px 20px 16px 40px;
    }
    .listing-details .location-widget .locations .ico{
        left: 15px;
    }
    .listing-details .cta-widget .title,
    .blog-details .cta-widget .title{
        font-size: 23px;
    }
    .blog-details .recent-widget{
        padding: 24px 15px;
    }
    .blog-details .recent-posts .img{
        margin-right: 15px;
    }
    .blog-details .recent-posts h3{
        font-size: 16px;
    }
    .blog-details .recent-posts time{
        font-size: 14px;
    }
}
@media only screen and (max-width: 991.98px){
    .our-services .frame p{
 
    min-height: inherit; 

}
    .map-locations .mapbox{height:auto; margin-left: inherit; background:#eee; text-align:center;}
    .location-area .locations-name .link{
        padding: 18px 20px 18px 50px;
    }
    .mapbox{height:400px;}
    .mapbox iframe{height:400px;}
    .location-area .locations-name .name{
        font-size: 16px;
    }
    .location-area .locations-name .ico{
        left: 18px;
        font-size: 26px;
        top: 18px;
    }
    .listing-details .location-widget .title{
        font-size: 22px;
        margin-bottom: 15px;
    }
    .listing-details .location-widget{
        padding: 20px 15px;
    }
    .listing-details .location-widget .locations .name{
        font-size: 14px;
    }
    .listing-details .location-widget .locations .ico{
        font-size: 22px;
        top: 10px;
    }
    .listing-details .location-widget .locations a {
        padding: 10px 20px 14px 40px;
    }
    .map-locations .align-right {
    padding: 60px;
}
}
@media only screen and (max-width: 767.98px){
    .location-area,
    .listing-details,
    .blog-details,
    .blog-listing{
        padding: 40px 0 20px;
    }
    .listing-details .feature-img,
    .blog-details .feature-img{
        margin-bottom: 20px;
    }
    .location-area .heading{
        margin-bottom: 30px;
    }
    .location-area .heading h2{
        font-size: 28px;
    }
    .listing-details h2,
    .blog-details h2{
        margin-bottom: 10px;
        font-size: 20px;
    }
    .location-area .locations-name{
        margin-bottom: 20px;
    }
    .listing-details h3,
    .blog-details h3{
        font-size: 18px;
    }
    .listing-details h4,
    .blog-details h4{
        font-size: 16px;
    }
    .blog-details .blog-info li{
        padding: 0 10px;
        font-size: 14px;
    }
    .blog-details .blog-info a{
        font-size: 14px;
    }
    .blog-details .blog-info li:before{
        left: -3px;
    }
    .blog-listing .heading{
        margin-bottom: 25px;
    }
    .blog-listing .heading h2{
        font-size: 22px;
    }
}
@media only screen and (max-width: 575.98px){
    .blog-details .recent-posts .img{
        max-width: 115px;
        margin-right: 10px;
    }
    .blog-details .recent-posts h3{
        margin-bottom: 0;
    }
    .blog-listing .list-frame .img img{
        width: 100%;
    }
}
.listing-details h2 {font-weight: bold;}
.blog-details .feature-img img{
    display: block;
    max-width: 100%;
    height: auto;
}
.blog-details .cta-widget {
     position: sticky;
     top: 10px;
     z-index: 100;
}




/****************************************************
        Service Details
****************************************************/
.services-card {
            background-color: #f5f1e8;
            border-radius: 20px;
            padding: 45px;
            margin-bottom: 20px;
        }
.service-detailswrp{padding-top:70px;}
        .services-title {
            color: #2d3748;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 25px; 
            border-bottom: 1px solid #d1cec3;
            padding-bottom: 15px;
        }
.serviceinnerlist h2{display:none;}
.serviceinnerlist p{min-height:inherit !important;}
.service-item{position: relative;}
        .service-item a{
            background-color: white;
            border-radius: 8px;
            padding: 15px 20px;
            padding-right: 30px;
            margin-bottom: 12px;
            font-weight: 600;
            color: #2d3748;
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
            text-decoration: none;
            display:block;
        }
        .npcont-service-hero{position: relative;}
.npcont-service-hero:before{
    content: "";
    background: #000;
    background: linear-gradient(0deg, rgb(0 0 0 / 80%) 0%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 30px;
    
}
        .service-item a:hover { 
           background-color: #f4c430;
            color: #2d3748;
        }

        .service-item a.active {
            background-color: #f4c430;
            color: #2d3748;
            
        }
.list-none{list-style: none; padding: 0;}
        .service-item:after {
                content: '●';
    position: absolute;
    right: 12px;
    color: white;
    font-size: 22px;
    top: 50%;
    line-height: 0;
    margin-top: -3px;
        }
.service-item:hover:after{color: #fff;}
        .quote-card {
            background-color: #2d3748;
            border-radius: 20px;
            padding: 45px;
            color: white; 
            z-index: 99;
            position: relative;
        }

        .quote-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 15px;
            line-height:34px;
        }

        .quote-subtitle {
            font-size: 1rem;
            margin-bottom: 25px;
            opacity: 0.9;
        }

        .contact-btn {
            background-color: #f4c430;
            color: #2d3748;
            border: none;
            border-radius: 50px;
            padding: 12px 30px;
            font-weight: 600;
            font-size: 1rem;
            transition: transform 0.2s, background-color 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .contact-btn:hover {
            background-color: #e5b520;
            transform: translateX(5px);
        }

        .contact-btn::after {
            content: '→';
            font-size: 1.2rem;
        }

        .phone-section {
            background-color: white;
            border-radius: 20px;
            padding:60px 30px 30px 30px;
            text-align: center;
            box-shadow: 0 0 15px rgb(0 0 0 / 13%);
            margin-top: -30px; 
        }

        .phone-icon { 
            margin-bottom: 20px;
        }

        .phone-label {
            color: #666;
            font-size: 16px;
            margin-bottom: 8px;
        }

        .phone-number {
            color: #f4c430;
            font-size: 34px;
            font-weight: 700;
        }
        .phone-number:hover{color: #000;}

        @media (max-width: 576px) {
            .services-card {
                padding: 20px 15px;
            }

            .services-title {
                font-size: 1.25rem;
            }

            .service-item {
                padding: 12px 15px;
                font-size: 0.95rem;
            }

            .quote-card {
                padding: 25px 20px;
            }

            .quote-title {
                font-size: 1.5rem;
            }

            .phone-number {
                font-size: 1.5rem;
            }
        }





.npcont-service-hero{padding:180px 50px 50px 50px; border-radius: 30px; background-size: cover !important;}
.npcont-service-hero h1{font-size: 42px; font-weight: bold; color: #fff;}
.npcont-service-hero p{font-size: 18px; color: #fff; font-weight: bold;}
.hero-info{max-width: 550px; z-index: 99;
    position: relative;}
.service-delInfo h2{font-weight: bold; margin-top: 20px;}
.service-delInfo h3{font-weight: bold; font-size: 22px;}
.list {
    margin: 0;
    padding: 15px 0 0px;
    list-style: none;
}
.list li {
    padding-left: 32px;
    position: relative;
    font: 600 18px / 1.2 var(--open-sans);
    padding-bottom: 14px;
}
 .list li:before {
    font-family: "Font Awesome 6 Free";
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    font-weight: 900;
    content: '\f058';
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--yelow);
}




.process-card {
  position: relative;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  height: 100%;
}

.process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.icon-wrapper img {  
  margin-bottom: 15px; 
}

.step-number {
  position: absolute;
  top: 40px;
  right: 25px;
  font-size: 80px;
  font-weight: 700;
  color: rgba(0,0,0,0.05);
  pointer-events: none;
}
.galleryImg img{border-radius: 10px;}
 .readbtn{display: flex;}
 .readbtn a:hover{background: #06132c; color: #fff;}
  .readbtn a:hover .ico{background: #fff; color: #000;}

@media (max-width: 767px) {
  .step-number {
    font-size: 50px;
    top: 15px;
    right: 15px;
  }
  .process-card {
    padding: 20px;
  }
}
 

img{max-width: 100%}
.service-map .align-right{padding: 50px;}
.service-map .mapbox{height: auto;}
.service-map .mapbox img{width: 100%;}
.service-map .align-right .list li{width: 32%;}
.services-container{position: sticky; top: 0;}
  .faq-section{margin-top:20px;}
  .accordion-item{margin-bottom: 20px; border: none;}
.accordion-button{border: 1px solid #dee2e6 !important; background: #fff;}
.accordion-button.collapsed{border-bottom-width: 1px; font-weight: 700;}
.accordion-item:last-of-type .accordion-button.collapsed, .accordion-item:first-of-type .accordion-button{border-radius: 0;}
.accordion-collapse{border: none !important; border-top: none;}
.accordion-button.collapsed{border-radius: 5px !important;}
.accordion-button:not(.collapsed){background-color: #eebd1f; color: #fff; font-weight: 700; border-color: #eebd1f !important; border-radius: 5px !important;}
/*.accordion-button:not(.collapsed)::after{background-image:url(../images/arrow.svg)}*/
.accordion-button:focus{border: none; box-shadow: none;}
.accordion-button h3{margin-bottom: 0; font-size: 18px;}

    .cta-panel {
      background: #272d40;
      color: #fff;
      border-radius: 18px;
      padding: 32px 80px;
      margin: 28px 0 40px;
      text-align: center;
    }
    .cta-panel h2 {
      color: #fff;
    }
    .cta-panel p {
      color: #fff;
      margin: 0 0 18px;
    }
    
    /* container width tweaks */
    @media (min-width: 992px){
      .narrow { max-width: 860px; }
    }

@media (max-width: 990px){
.service-delInfo{margin-top: 30px;}
.galleryImg{text-align: center;}
.service-map .align-right .list li{width: 50%;}
}

@media (max-width: 600px){
.npcont-service-hero h1{font-size: 30px;}
.npcont-service-hero p{font-size: 16px;}
.service-map .align-right p, .service-map .heading h2{text-align: left !important;}
.service-map .align-right .list li{width: 100%;}
.service-map .align-right {
    padding:40px 25px;
}
.cta-panel{padding: 15px 15px 30px 15px;}
}


@media (max-width: 480px){
.npcont-service-hero h1{font-size: 24px;}
.npcont-service-hero p{font-size: 16px;}
.npcont-service-hero{padding: 100px 30px 30px 30px;}
.service-delInfo h3{font-size: 18px;}
.service-delInfo h2{font-size: 22px !important;}
}

.areaservice{background: none;}
      .areaservice .frame{background: #f6f6f6;}
      .areaclients{padding: 40px 20px;}
      .areaclients{text-align: center;}
      .areaclients .carousel .top-holder, .areaclients .carousel .btn-holder{justify-content: center;}
      .areaclients .carousel .btn-holder{margin-top: 35px;}
      .areaclients .carousel:before{display: none;}