* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --orange: #f2a722;
    --orange1: #b94724;
    --red: #b80606
}

body {
    font-family: 'Hind',sans-serif;
    font-size: 16px;
    line-height: 24px;
    overflow-x: hidden;
    font-weight: 400;
    color: #494949
}

    body::after {
        content: '';
        background: url(images/background-pattern.webp);
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1
    }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #373637
}

h2 {
    letter-spacing: -1px
}

a {
    color: #0d0d0d;
    cursor: pointer
}

.sp-sticky {
    width: 100%;
    height: auto;
    display: block;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease
}

.sp-sticky-child {
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease
}

ul {
    list-style-type: none
}

a {
    text-decoration: none
}

.ncontainer {
    width: 90%;
    margin: 0 auto
}

.container {
    width: 80%;
    margin: 0 auto
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.pt0 {
    padding-top: 0 !important
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important
}

.justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important
}

.side-menu-wrap {
    padding-top: 140px;
    width: 300px;
    position: fixed;
    left: -100%;
    top: 0;
    background: #fff;
    height: 100%;
    -webkit-box-shadow: 0 1px 5px 0 rgb(83 83 83 / .2);
    box-shadow: 0 1px 5px 0 rgb(83 83 83 / .2);
    overflow-y: auto;
    z-index: 9999;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s
}

    .side-menu-wrap.opened {
        left: 0;
        transition: .8s;
        -webkit-transition: .8s;
        -moz-transition: .8s;
        -ms-transition: .8s;
        -o-transition: .8s
    }

p {
    text-align: left
}

.main-menu .sub-menu li {
    line-height: 24px
}

.main-menu .sub-menu a {
    text-transform: capitalize
}

.side-menu-logo {
    border-bottom: 2px solid #FE8204
}

.header-sticky .side-menu-wrap {
    padding-top: 95px
}

.side-menu-nav .main-menu > li {
    position: relative;
    border-bottom: 1px solid #ccc
}

    .side-menu-nav .main-menu > li > a > i {
        color: #03328E
    }

.side-menu-nav .main-menu .sub-menu {
    border-top: 1px solid #e65224;
    background: #fff;
    display: none
}

    .side-menu-nav .main-menu .sub-menu li {
        border-bottom: 1px solid #eee
    }

    .side-menu-nav .main-menu .sub-menu a {
        padding: 15px 18px;
        display: block;
        color: #212529;
        font-weight: 500;
        font-size: 16px;
        transition: .4s;
        -webkit-transition: .4s;
        -moz-transition: .4s;
        -ms-transition: .4s;
        -o-transition: .4s
    }

        .side-menu-nav .main-menu .sub-menu a i {
            color: #03328E
        }

    .side-menu-nav .main-menu .sub-menu ~ i {
        position: absolute;
        padding: 17px 11px;
        right: 0;
        top: 0;
        border-left: 1px solid #ccc
    }

.home-page .vlink {
    align-items: center;
    justify-content: center;
}

.side-menu-nav .main-menu .sub-menu a:hover {
    background: #b80606;
    color: #fff
}

.side-menu-nav .main-menu > li > a {
    color: #212529;
    padding: 13px 30px 13px 10px;
    font-weight: 600;
    display: block;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s
}

.side-menu-wrap .side-menu-close {
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    width: 30px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0
}

.side-menu-close {
    height: 43px;
    width: 43px;
    background: var(--sblue);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%
}

    .side-menu-close span {
        height: 2px;
        width: 20px;
        background: #e65224;
        position: relative;
        opacity: 1;
        transition: .4s;
        -webkit-transition: .4s;
        -moz-transition: .4s;
        -ms-transition: .4s;
        -o-transition: .4s
    }

        .side-menu-close span:nth-child(1) {
            top: -5px
        }

        .side-menu-close span:nth-child(3) {
            bottom: -5px
        }

    .side-menu-close.closed span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
        -webkit-transform: translateY(7px) rotate(45deg);
        -moz-transform: translateY(7px) rotate(45deg);
        -ms-transform: translateY(7px) rotate(45deg);
        -o-transform: translateY(7px) rotate(45deg)
    }

    .side-menu-close.closed span:nth-child(2) {
        opacity: 0
    }

    .side-menu-close.closed span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
        -webkit-transform: translateY(-7px) rotate(-45deg);
        -moz-transform: translateY(-7px) rotate(-45deg);
        -ms-transform: translateY(-7px) rotate(-45deg);
        -o-transform: translateY(-7px) rotate(-45deg)
    }

.custom-overlay {
    position: fixed;
    left: 0;
    top: 0;
    background: rgb(0 0 0 / .4);
    z-index: 12500;
    visibility: hidden;
    opacity: 0;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
    background-color: #fff0
}

.custom-overlay.show {
    visibility: visible;
    opacity: 1;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s
}

.justify-content-center {
    -ms-flex-pack: justify !important;
    justify-content: center !important
}

.flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important
}

.flex-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important
}

.d-block {
    display: block !important
}

.d-none {
    display: none !important
}

@media (min-width:1100px) {
    .flex-lg-row {
        -ms-flex-direction: row !important;
        flex-direction: row !important
    }

    .align-items-lg-center {
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .d-lg-block {
        display: block !important
    }

    .d-lg-none {
        display: none !important
    }

    .sub-menu {
        display: none
    }
}

.sp-sticky {
    width: 100%;
    height: auto;
    display: block;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease
}

.sp-active {
    padding: 5px 0;
    box-shadow: rgb(0 0 0 / 10%) 0 2px 4px
}

header {
    background: #fff;
    padding: 0 0 0
}

.header-logo svg {
    width: 220px
}

.sp-active svg {
    width: 180px
}

header svg {
    transition: all 0.3s ease;
    width: 240px
}

header .container {
    position: relative
}

.orange {
    color: var(--orange1)
}

footer a:hover {
    color: var(--red)
}

.orange1 {
    color: var(--orange1)
}

.copyright .left span {
    padding: 0 0 0 5px
}

header .container::after {
    content: '';
    position: absolute;
    right: 0;
    top: -20px;
    background: url(images/colors.webp) no-repeat;
    width: 100%;
    height: 9px;
    transition: all 0.3s ease;
    background-position: right
}

.angdown svg {
    transform: rotate(450deg) !important
}

.side-menu-nav svg {
    transition: all .1s linear
}

header .main-menu > li > a {
    padding: 0 1.8vw;
    color: #000;
    font-size: 15px;
    display: flex !important;
    align-items: center;
    height: 90px;
    transition: all 0.3s ease
}

.main-menu a span {
    position: relative;
    display: flex;
    text-transform: uppercase;
    font-weight: 500
}

.main-menu a.active span::after, .main-menu a:hover span::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 10px;
    background-size: contain;
    margin-top: -10px;
    transition: all 0.3s linear
}

.main-menu a:hover {
    color: var(--red)
}

footer {
    background: #f1ede8
}

.fwrap {
    display: grid;
    grid-template-columns: 26% 20% 15% 22%;
    padding: 70px 0;
    justify-content: space-between
}

.copyright .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid #666
}

footer h2 {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 20px;
    display: none
}

.flinks li {
    margin-bottom: 10px;
    text-transform: capitalize
}

    .flinks li:last-child {
        margin-bottom: 0
    }

footer img {
    margin-bottom: 20px
}

.fcname {
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 15px;
    color: #373637
}

.cinfo p {
    margin-bottom: 5px
}

.sicons svg {
    width: 24px;
    height: 24px
}

.sicons {
    display: flex;
    margin-top: 15px
}

    .sicons svg path {
        fill: var(--orange1)
    }

    .sicons .youtube svg, .sicons .twitter svg {
        width: 28px;
        height: 28px
    }

    .sicons li {
        padding: 0 15px 0 0
    }

.enquiry {
    padding: 30px 0;
    position: relative
}

    .enquiry::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right,#f2a722 50%,#f47e20 50%);
        z-index: 2
    }

    .enquiry::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right,#f37022 50%,#e65326 50%);
        z-index: 2
    }

    .enquiry, .enquiry a {
        color: #fff
    }

        .enquiry p {
            font-size: 30px;
            line-height: 1.1;
            font-weight: 500
        }

.egrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px 100px;
    position: relative;
    z-index: 9
}

.enquiry p:last-child {
    text-align: center;
    display: flex;
    justify-content: center
}

.enquiry a {
    background: var(--red);
    padding: 12px 30px 10px;
    transition: all 0.3s linear;
    font-size: 20px;
    border: 1px solid #fff;
    z-index: 1
}

.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: #fff0;
    position: relative;
    z-index: 1
}

    .owl-carousel .owl-stage {
        position: relative;
        -ms-touch-action: pan-Y;
        touch-action: manipulation;
        -moz-backface-visibility: hidden
    }

        .owl-carousel .owl-stage:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0
        }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0)
    }

    .owl-carousel .owl-wrapper, .owl-carousel .owl-item {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0)
    }

    .owl-carousel .owl-item {
        position: relative;
        min-height: 1px;
        float: left;
        -webkit-backface-visibility: hidden;
        -webkit-tap-highlight-color: #fff0;
        -webkit-touch-callout: none
    }

        .owl-carousel .owl-item img {
            display: block;
            width: 100%
        }

    .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {
        display: none
    }

    .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {
        cursor: pointer;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot {
        background: none;
        color: inherit;
        border: none;
        padding: 0 !important;
        font: inherit
    }

    .owl-carousel.owl-loaded {
        display: block
    }

    .owl-carousel.owl-loading {
        opacity: 0;
        display: block
    }

    .owl-carousel.owl-hidden {
        opacity: 0
    }

    .owl-carousel.owl-refresh .owl-item {
        visibility: hidden
    }

    .owl-carousel.owl-drag .owl-item {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .owl-carousel.owl-grab {
        cursor: move;
        cursor: grab
    }

    .owl-carousel.owl-rtl {
        direction: rtl
    }

        .owl-carousel.owl-rtl .owl-item {
            float: right
        }

.no-js .owl-carousel {
    display: block
}

.owl-height {
    transition: height 500ms ease-in-out
}

.banner {
    height: 800px;
    color: #fff;
    position: relative;
    overflow: hidden
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

    .swiper-fade .swiper-slide .swiper-slide {
        pointer-events: none
    }

.swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-slide .bg {
    opacity: 0
}

.swiper-slide-active .bg {
    opacity: 1
}

.swiper-pagination-bullet {
    margin: 0 8px;
    background: #e65326 !important;
    opacity: .8
}

.swiper-pagination-bullet-active {
    background: #fff !important
}

.swiper-pagination {
    bottom: 90px;
    display: flex;
    justify-content: center;
    width: 100%
}

.swiper-button-prev::after, .swiper-button-next::after {
    display: none
}

.swiper-button-prev {
    left: 30px
}

.swiper-button-next {
    right: 30px
}

.textWrapper .bh1 {
    color: #fff;
    font-size: 60px;
    line-height: 52px;
    font-weight: 600
}

.bh1 span {
    font-weight: 500
}

.swiper .swiper-wrapper .swiper-slide {
    display: flex;
    height: 85%;
    align-items: center;
    justify-content: center;
    background-position: right !important;
    background-size: cover !important
}

.cbtn, .modal1 .cbtn {
    padding: 8px 22px;
    display: inline-flex;
    margin-top: 20px;
    text-transform: uppercase;
    transition: all 0.3s linear;
    font-size: 15px
}

.swiper a {
    position: absolute;
    right: -20px;
    border: 0 solid #6a6b6a;
    z-index: auto
}

.pspace3 {
    padding: 30px 0
}

.pspace5 {
    padding: 50px 0
}

.sblue {
    color: var(--sblue)
}

.mb1 {
    margin-bottom: 15px
}

.f20 {
    font-size: 20px
}

.pspace {
    padding: 100px 0
}

.hproducts {
    background: #f2f8fd
}

.textWrapper .d-flex {
    align-items: center;
    justify-content: space-between;
    width: 90%;
    z-index: 9
}

.textWrapper p {
    width: 50%;
    font-size: 27px;
    line-height: 28px
}

.plus::after {
    content: "+";
    display: inline-block
}

.swiper a:hover {
    background: #e65326
}

    .swiper a:hover::before {
        border-bottom-color: #e65326
    }

.swiper a::before {
    content: '';
    border-left: 14px solid #fff0;
    position: absolute;
    border-right: 14px solid #fff0;
    border-bottom: 21px solid #940808;
    top: -9px;
    right: -4px;
    transform: rotate(90deg);
    z-index: -1;
    transition: all 0.3s ease
}

.kplus::after {
    content: "K";
    display: inline-block
}

.certslider .owl-dots {
    display: none;
    margin-top: 10px
}

.owl-carousel .owl-dot {
    background-color: #ccc !important;
    padding: 5px !important;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    margin: 0 10px;
    outline: 0
}

.clogo {
    position: relative;
    overflow: hidden
}

.ch2 {
    font-size: 40px;
    line-height: 30px;
    letter-spacing: -1px
}

.habt {
    display: grid;
    grid-template-columns: 45% 50%;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px
}

.tright {
    text-align: right
}

.habt p {
    margin: 0 0 20px
}

.islider .owl-item img {
    width: auto;
    margin-left: auto
}

.lfont {
    font-size: 80px;
    position: relative;
    opacity: .1;
    margin-right: 100px;
    color: #323131;
    transition: all 0.3s ease;
    margin-top: 30px
}

    .lfont:hover {
        color: var(--blue);
        opacity: .3
    }

.habt2 {
    display: flex;
    justify-content: flex-end
}

    .habt2 p {
        text-align: center;
        padding-left: 8%;
        position: absolute
    }

.habout {
    padding: 0 0 100px
}

.hblog {
    overflow-x: hidden;
    padding-bottom: 0
}

.hbloglist .owl-item {
    background: #fff;
    transition: all 0.3s ease;
    position: relative
}

    .hbloglist .owl-item::after, .clientlist .c1::after {
        content: '';
        position: absolute;
        background: #e1d8ce;
        width: 100%;
        height: 4px;
        left: 0;
        bottom: 0
    }

    .hbloglist .owl-item::before, .clientlist .c1::before {
        content: '';
        position: absolute;
        background: #f47e20;
        width: 100%;
        height: 4px;
        left: 0;
        bottom: 0;
        z-index: 1;
        transform: scaleX(0);
        transition: all 0.4s ease
    }

    .hbloglist .owl-item:hover:before, .clientlist .c1:hover:before {
        transform: scaleX(1)
    }

.hbloglist .owl-stage {
    display: flex
}

.hbloglist p {
    margin: 20px 0 80px
}

.ch3 {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -1px
}

.blogdesc a {
    position: absolute;
    bottom: 30px;
    border: 1px solid #b9b7b3
}

.hbloglist, .hproject {
    padding-top: 20px;
    margin-bottom: 30px
}

.rslider .owl-dots {
    display: block !important;
    text-align: center;
    margin-top: 20px
}

.actdot .owl-dot.active {
    background-color: var(--red) !important
}

.hbloglist .owl-stage-outer, .rslider .owl-stage-outer {
    overflow: visible
}

.hbloglist .owl-item, .rslider .owl-item {
    opacity: 0;
    transition: opacity 500ms;
    background: #f1ede8;
    padding: 0 20px 20px
}

    .hbloglist .owl-item.active, .rslider .owl-item.active {
        opacity: 1
    }

.rname {
    margin-top: 15px;
    font-weight: 500;
    color: var(--red)
}

.hbloglist .owl-dots button, .rslider .owl-dots button {
    background-color: #b9b8b4 !important
}

.htesti .lfont {
    text-align: right
}

.rslider {
    margin: 40px auto 0
}

.habt a {
    margin-top: 10px
}

.grey {
    background: #f4f4f4
}

.rcrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.htesti .owl-dots {
    text-align: right
}

.htesti h2 {
    margin-bottom: 25px
}

.clientslider img {
    filter: grayscale(1);
    transition: all 0.3s ease;
    width: auto !important;
    margin: 0 auto
}

.clientslider .owl-item:hover img, .clientslider .bslide:hover img {
    filter: grayscale(0)
}

.certslider .icon, .bimg img, .transeff {
    transition: all 0.3s ease
}

.certslider .slide1:hover .icon {
    transform: scale(1.1)
}

.carrows svg {
    width: 28px;
    height: 28px
}

.habt .linec {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden
}

.fade {
    transition: opacity .15s linear
}

    .fade:not(.show) {
        opacity: 0
    }

.abtext {
    display: flex;
    align-items: center;
    gap: 20px 75px
}

    .abtext h2 {
        border-right: 1px solid #ccc;
        padding-right: 75px
    }

    .abtext p {
        display: flex;
        justify-content: flex-end
    }

.islider .owl-nav {
    display: none
}

    .islider .owl-nav button.owl-prev {
        position: absolute;
        left: 10px;
        top: 50%;
        display: block;
        padding: 0 .3em !important;
        font-size: 2em;
        margin: 0;
        cursor: pointer;
        color: #323131;
        transform: translate(-50%,-50%)
    }

    .islider .owl-nav button.owl-next {
        position: absolute;
        right: -40px;
        top: 50%;
        display: block;
        padding: 0 .3em !important;
        font-size: 2em;
        margin: 0;
        cursor: pointer;
        color: #323131;
        transform: translate(-50%,-50%)
    }

.trow .t2 {
    position: relative;
    overflow: hidden
}

.islider .owl-dots, .pslider .owl-dots {
    text-align: center
}

.sub-banner {
    height: 200px;
    background: #ccc;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    background-size: cover
}

.breadcrumb {
    display: flex;
    list-style-type: none;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0
}

    .breadcrumb svg {
        margin: 0 5px
    }

    .breadcrumb li {
        font-size: 15px;
        display: flex;
        align-items: center
    }

.op5 {
    opacity: .8
}

    .op5:hover {
        opacity: 1
    }

.sub-banner h1 {
    color: #fff;
    font-size: 34px;
    line-height: 36px;
    font-weight: 400
}

.center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

.vm-cards h2 {
    color: var(--blue);
    font-size: 30px
}

.backButton {
    cursor: pointer;
    position: fixed;
    bottom: 3rem;
    right: 2rem;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    transition: transform 0.55s cubic-bezier(.215,.61,.355,1),opacity 0.55s cubic-bezier(.215,.61,.355,1)
}

.backButton__bg {
    position: absolute;
    z-index: -1;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    background: #f1ba58
}

.backButton:hover .backButton__bg {
    background-color: var(--red)
}

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

    .backButton__icon__wrap svg {
        width: 20px;
        height: 20px
    }

.sse {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: fixed;
    display: none;
    opacity: 1;
    bottom: 20%;
    justify-content: center;
    z-index: 999;
    background: #b80606;
    right: 0;
    font-weight: 600;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
    transform: rotate(180deg)
}

    .sse:hover {
        background: var(--red)
    }

        .sse:hover a {
            color: #fff
        }

    .sse a {
        padding: 30px 10px;
        color: #fff
    }

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.show {
    display: flex;
    opacity: 1;
    align-items: center
}

.modal {
    background: rgb(0 0 0 / 50%);
    z-index: 9999999
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0
}

.fade {
    transition: opacity .15s linear
}

.modal.right.fade.show .modal-dialog {
    right: 0
}

.modal.right.fade .modal-dialog {
    right: -500px;
    -webkit-transition: opacity .3s linear,right .5s ease;
    -moz-transition: opacity .3s linear,right .5s ease;
    -o-transition: opacity .3s linear,right .5s ease;
    transition: opacity .3s linear,right .5s ease;
    bottom: 0
}

.modal.right .modal-dialog {
    position: fixed;
    padding: margin:auto;
    height: auto;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.modal-content {
    background: #fff
}

.modal-title {
    width: 100%;
    font-size: 26px
}

.col-md-12 {
    width: 100%
}

.modal1 .modal-body {
    padding: 15px
}

.modal-header {
    border-bottom: 1px solid #c1c1c1;
    padding: 18px 20px
}

.modal.right .close {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    outline: 0;
    text-shadow: none;
    opacity: .8;
    color: #000;
    font-size: 26px;
    background: #fff0;
    border: 0
}

    .modal.right .close:hover {
        opacity: 1
    }

.contactpage .sse {
    display: none !important
}

.fcol1 .nowrap {
    color: var(--sblue);
    transition: all 0.3s ease
}

    .fcol1 .nowrap:hover {
        color: var(--blue)
    }

.enbtn {
    background: var(--red);
    position: relative
}

header .main-menu .enbtn {
    height: auto !important;
    padding: 10px 12px 6px;
    color: #fff;
    z-index: 1
}

img {
    max-width: 100%
}

.enbtn::after, .ltalk::after, .cbtn::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: var(--orange);
    transition: all 0.5s ease;
    z-index: -1
}

header .main-menu .enbtn:hover::after, .ltalk:hover::after, .cbtn:hover::after, .cbtn1:hover::after {
    width: 100%
}

.ltalk {
    position: relative
}

.cinfo {
    margin-top: 15px
}

.clientslider {
    width: 95%;
    margin: 60px auto 0
}

.carrows .owl-prev, .carrows .owl-next {
    position: absolute;
    top: 45%;
    left: -20px
}

.carrows .owl-next {
    right: -20px;
    left: auto
}

.hbloglist h3 {
    color: #e65326;
    margin-top: 25px
}

.bimg {
    position: relative;
    overflow: hidden;
    display: flex
}

.hbloglist .owl-item:hover img {
    transform: scale(1.1)
}

.testimonials {
    background: url(images/pattern-3.webp) no-repeat;
    background-size: cover;
    overflow: hidden
}

.rslider .owl-item {
    background: #f5f2ed;
    padding: 40px;
    transition: all 0.3s ease
}

    .rslider .owl-item:hover {
        background: #fffbf5;
        box-shadow: 0 6px 10px rgb(0 0 0 / 15%)
    }

.rslider .f20 {
    color: var(--orange1);
    font-weight: 600
}

.tc {
    text-align: center
}

.rslider::after {
    content: '';
    position: absolute;
    background: url(images/quote.png) no-repeat;
    width: 60px;
    height: 50px;
    right: 0;
    top: -65px;
    background-size: contain
}

.wicon {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 40px 0;
    margin-top: 60px
}

    .wicon .item p {
        text-align: center
    }

    .wicon .bimg {
        justify-content: center;
        margin-bottom: 10px
    }

    .wicon img {
        transform: scale(.9)
    }

    .wicon .item:hover img {
        transform: scale(1)
    }

    .wicon p {
        width: 50%;
        margin: 0 auto;
        line-height: 20px
    }

.vmbtn .bimg {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px
}

    .vmbtn .bimg div {
        background: #f58640;
        border-radius: 50%;
        padding: 10px;
        display: flex;
        transition: all 0.3s ease
    }

.vmbtn svg {
    width: 30px;
    height: 30px
}

    .vmbtn svg path {
        fill: #fff
    }

.vmbtn:hover .bimg div {
    background: var(--red)
}

.vmbtn:hover a {
    color: var(--red)
}

.vmbtn a {
    display: flex;
    justify-content: center
}

.wus .container {
    position: relative
}

    .wus .container::after {
        content: '';
        position: absolute;
        background: url(images/colors.webp) no-repeat;
        right: 0;
        bottom: -100px;
        width: 100%;
        height: 9px;
        background-position: right
    }

.hprod {
    position: relative;
    background: url(images/pattern-1.webp) no-repeat;
    background-size: cover
}

.hprow, .hprow1 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.hp1, .hpr1 {
    width: 25%
}

.hp2 {
    width: 72%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px
}

.hpr2 {
    width: 72%
}

.hp21, .hpr2 {
    position: relative;
    display: flex;
    overflow: hidden
}

    .hp21 h3, .hpr2 h3 {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 10px 20px;
        background: #6e6e6e
    }

.hprow img, .hprow1 img {
    width: 100%;
    transition: all 0.3s ease
}

.hprow1 {
    margin-top: 20px
}

.hp1 {
    background: #f47e20;
    position: relative
}

.hprod h3 {
    color: #fff
}

.hp1::after, .hpr1::after {
    content: '';
    position: absolute;
    bottom: 0;
    background: url(images/paver-block-pattern.webp) no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    background-position: bottom center
}

.hp1 h3, .hpr1 h3, .lph2 {
    font-size: 34px;
    padding: 30px 20px 20px;
    line-height: 32px
}

.hpr1 {
    background: #f2a722;
    position: relative
}

.hpr3 h3 {
    z-index: 999;
    position: relative
}

.hpr1::after {
    background: url(images/wall-pattern.webp) no-repeat;
    background-size: contain;
    background-position: bottom center
}

.hp21:hover img, .hpr2:hover img {
    transform: scale(1.05)
}

.ch4 {
    font-size: 26px;
    font-weight: 600
}

.lph2 {
    color: #fff
}

.facts {
    display: flex;
    justify-content: center;
    margin: 20px 0 100px;
    border-bottom: 1px solid #d3ccc4
}

.awrap {
    width: 80%;
    margin: 0 auto
}

.count {
    font-size: 36px;
    color: #d7753b;
    margin-bottom: 5px;
    font-weight: 600
}

.fdata p {
    text-align: left;
    padding: 10px 20px 0
}

.cbtn1 {
    background: var(--red);
    border: 1px solid #b9b7b3;
    position: relative;
    color: #fff;
    z-index: 1
}

.facts .fdata:nth-child(2) .count {
    color: #e65326
}

.facts .fdata:nth-child(3) .count {
    color: #c38719
}

.facts .fdata:nth-child(4) .count {
    color: #e65326
}

.textWrapper {
    background: url(images/brick-pattern.webp) no-repeat;
    background-size: cover;
    margin: 0 auto;
    padding: 40px 50px;
    width: 80%;
    bottom: -50px;
    display: flex;
    align-items: center;
    text-align: left;
    position: absolute;
    z-index: 9
}

.banner::after {
    content: '';
    position: absolute;
    background: url(images/tt.png) no-repeat;
    background-size: contain;
    width: 250px;
    height: 135px;
    left: 0;
    bottom: 100px;
    z-index: 9
}

.facts .fdata {
    width: 25%;
    padding-bottom: 25px
}

    .facts .fdata:nth-child(2) {
        border-left: 1px solid #d3ccc4;
        border-right: 1px solid #d3ccc4
    }

    .facts .fdata:nth-child(3) {
        border-right: 1px solid #d3ccc4
    }

.hprod h2 {
    margin-bottom: 40px
}

.swiper-button-prev span, .swiper-button-next span {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff0;
    position: absolute;
    border: solid 2px #fff;
    border-left: 0;
    border-bottom: 0;
    transition: all 0.3s ease
}

.swiper-button-next span {
    transform: rotate(45deg);
    right: 50%
}

    .swiper-button-prev span::before, .swiper-button-next span::after {
        background-image: none !important
    }

.swiper-button-prev span {
    transform: rotate(-135deg);
    left: 50%
}

.swiper-button-prev:hover span:after, .swiper-button-next:hover span:after {
    width: calc(20px - 4px)
}

.swiper-button-prev span:after, .swiper-button-next span:after {
    content: "";
    position: absolute;
    background-color: #fff;
    width: 0;
    height: 2px;
    transition: all 0.3s ease;
    transform: rotate(-45deg)
}

.enquiry p {
    font-size: 38px;
    letter-spacing: -1px
}

.habt1 {
    display: flex
}

    .habt1 img {
        object-fit: cover;
        height: auto
    }

.carrows i {
    transition: all 0.3s ease;
    background: #fff;
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%)
}

.hblog .carrows .owl-prev, .hblog .carrows .owl-next {
    top: 47%
}

.hblog .carrows .owl-prev {
    left: -30px
}

.hblog .carrows .owl-next {
    right: -30px
}

.nowrap {
    white-space: nowrap
}

footer ul li {
    margin-bottom: 12px
}

    footer ul li:last-child, .sicons li {
        margin-bottom: 0
    }

.sp-active .container::after {
    transform: scaleY(0)
}

.aslide .container {
    position: relative
}

.pslides img {
    width: 100%;
    object-fit: cover
}

.pslides {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding-bottom: 25px;
    z-index: 1
}

.swiper-slide img {
    transform: scale(.85);
    transition: all 0.3s ease;
    border-radius: 20px
}

.swiper-slide-active img {
    transform: scale(1)
}

.pslides .swiper-pagination {
    bottom: 0
}

    .pslides .swiper-pagination .swiper-pagination-bullet-active {
        width: 20px !important;
        border-radius: 10px !important;
        background: var(--red) !important
    }

.pslides .swiper-pagination-bullet {
    background: #b9b8b4 !important;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transition: all 0.3s ease
}

.pslides .swiper-button-prev, .pslides .swiper-button-next {
    position: absolute
}

    .pslides .swiper-button-next span::after, .pslides .swiper-button-prev span::after {
        display: none !important;
        width: 0px !important
    }

.pslides span {
    width: 40px;
    height: 40px;
    background: #ffffffbf;
    border-radius: 50%;
    transform: none;
    border: 0px !important;
    box-shadow: 0 0 2px #7e7e7e
}

.pslides .swiper-button-prev {
    left: 0
}

.pslides .swiper-button-next {
    right: 0
}

.pslides svg path {
    fill: #494949
}

.pt-0 {
    padding-top: 0
}

.pirow {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    text-align: center;
    gap: 20px
}

.imgzoom {
    position: relative;
    overflow: hidden
}

.pirow h2 {
    padding: 15px 10px 10px
}

.imgzoom img {
    transition: all 0.3s ease;
    display: flex;
    margin: 0 auto;
    position: relative
}

.pr1:hover .imgzoom img {
    transform: scale(1)
}

.gbg1 {
    background: #eff1f2
}

.pr1 img {
    transform: scale(.85)
}

.imgzoom {
    background: #fff
}

.w80 {
    width: 80%;
    margin: 0 auto
}

.bcbg {
    background: #eff1f2
}

.mb3 {
    margin-bottom: 50px
}

.wcus {
    display: grid;
    grid-template-columns: 30% 60%;
    justify-content: space-between;
    margin-bottom: 20px
}

.w75 {
    width: 75%;
    margin: 0 auto
}

.yicon, .yicon a {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 9;
    justify-content: center;
    text-align: center
}

    .yicon .button.is-play {
        position: absolute;
        z-index: 9;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px 0;
        margin-top: 20px
    }

.button-icon {
    border-radius: 8px;
    width: 75px;
    height: 50px;
    display: flex;
    background: #fff;
    align-items: center;
    justify-content: center;
    background: red;
    transition: all 0.3s ease-out
}

.hbg {
    background: linear-gradient(to bottom,transparent 33%,#f1ede8 30%);
    padding-bottom: 70px
}

.mt0 {
    margin: 0
}

.pb-3 {
    padding-bottom: 60px
}

.qpolicy {
    display: grid;
    grid-template-columns: 55% 40%;
    justify-content: space-between;
    align-items: center
}

    .qpolicy img {
        box-shadow: 0 0 4px rgb(0 0 0 / .15)
    }

    .qpolicy .owl-item {
        opacity: 0
    }

        .qpolicy .owl-item.active {
            opacity: 1
        }

    .qpolicy .owl-stage-outer {
        overflow: visible
    }

.mb2 {
    margin-bottom: 20px
}

.qsec {
    position: relative;
    overflow: hidden;
    padding: 20px 0
}

.qpolicy .carrows .owl-prev, .qpolicy .carrows .owl-next {
    top: 45%
}

.infraslider .owl-dots {
    margin: 5px 0 50px;
    text-align: center
}

.infraslider .owl-dot.active {
    width: 20px;
    border-radius: 10px
}

.infraslider .owl-dot {
    transition: all 0.3s ease
}

.carrows .owl-prev:hover i, .carrows .owl-next:hover i {
    background: var(--red)
}

.carrows .owl-prev:hover path, .carrows .owl-next:hover path {
    fill: #fff
}

.brbg {
    background: #f1ede8
}

.owl-dot.active {
    background: var(--red) !important
}

.atestimonials .rslider::after, .rmbtn {
    display: none
}

.pslides .swiper-button-prev:hover span, .pslides .swiper-button-next:hover span {
    background: #fff
}

.dropdown-menu {
    background: #fff;
    position: absolute;
    transition: all .3s ease;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    width: 1050px;
    border-radius: 0;
    display: block;
    left: -300px;
    padding: 20px 30px;
    box-shadow: 0 0 5px rgb(0 0 0 / 15%);
    transform: translateY(20px)
}

.dmenu:hover .dropdown-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible
}

.dmenu {
    position: relative
}

.dmwrap a {
    text-align: center;
    line-height: 20px
}

.dropdown-menu .row {
    justify-content: space-between;
    align-items: flex-start
}

.dropdown-menu .dm1:first-child > div {
    display: grid;
    grid-template-columns: 46% 46%;
    gap: 20px 20px
}

.dmwrap div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.dm1 > a {
    font-size: 20px;
    font-weight: 500;
    color: var(--orange1);
    margin-bottom: 10px;
    display: flex
}

.dm1 {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    width: 23%
}

.row .dm1:nth-child(2) img, .row .dm1:nth-child(3) img {
    height: auto;
    margin-bottom: 4px
}

.row .dm1:last-child div, .row .dm1:nth-child(2) div {
    text-align: center
}

.sp-active .wl img {
    width: 180px
}

.pbm, .mlevel, .bwm {
    position: relative
}

    .pbm a, .bwm a {
        padding: 12px 18px !important
    }

    .pbm.active i svg, .bwm.active i svg {
        transform: rotate(450deg) !important
    }

.wl img {
    transition: all 0.3s ease;
    width: 240px
}

.sp-active .wl img {
    width: 180px
}

.c-frm .row {
    padding: 60px;
    background-color: #fff;
    border-radius: 5px
}

.justify-center {
    justify-content: space-between
}

.cnt-dtl {
    width: 60%
}

.cnt-frm {
    width: 37%
}

.fg-btn {
    display: flex;
    align-items: center;
    gap: 20px
}

.dtl-cnt p:first-child {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 2px
}

.fg-btn .form-control {
    height: auto;
    transition: 0.4s ease-out;
    width: 160px;
    background-color: #f67f20;
    color: #fff
}

    .fg-btn .form-control:hover {
        cursor: pointer;
        background-color: var(--red);
        color: #fff
    }

.form-control {
    display: block;
    width: 100%;
    height: 45px;
    outline: 0;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Hind',sans-serif;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: 5px;
    box-shadow: none
}

#form textarea {
    height: 100px;
    resize: none
}

#form .form-group {
    width: 100%;
    margin: 0 auto 15px
}

.fg-btn {
    flex-wrap: wrap;
    width: auto
}

#form .f-row {
    padding: 50px;
    border-radius: 5px;
    background-color: #e1d8ce;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.cnt-add {
    display: flex;
    flex-wrap: wrap;
    row-gap: 40px;
    justify-content: space-between
}

.cnt-dtl {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.dtl-lst {
    display: flex;
    gap: 20px
}

.dtl-icn {
    width: 40px;
    height: 40px;
    background-color: #f67f20;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center
}

    .dtl-icn svg {
        display: inline-flex
    }

.dtl-cnt {
    width: 80%
}

.effect {
    filter: drop-shadow(0 22px 12px #ccc)
}

.map {
    margin-top: 50px
}

.cnt-dtl h2 {
    margin-bottom: 40px
}

.f-hadds, .dtl-lst {
    width: 48%
}

    .f-hadds .dtl-lst {
        width: 100%
    }

.mt {
    margin-top: 93px
}

.b5, .contactpage .enquiry {
    display: none
}

.sub-banner {
    background: linear-gradient(to right,#00000020,#00000014),url(images/project-banner.webp);
    background-position: center;
    background-size: cover
}

.mbtn, .pmbtn {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    position: relative;
    font-weight: 500
}

.atestimonials, .wus {
    overflow-x: hidden
}

.mbtn::after, .pmbtn::after {
    content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" viewBox="0 0 24 24"%3E%3Cpath fill="%235e5e5e" d="M6.41 6L5 7.41L9.58 12L5 16.59L6.41 18l6-6z"%2F%3E%3Cpath fill="%235e5e5e" d="m13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z"%2F%3E%3C%2Fsvg%3E');
    position: absolute;
    right: -22px;
    top: 1px
}

.psrow {
    grid-template-columns: repeat(4,1fr);
    gap: 40px
}

    .psrow img {
        transform: scale(1)
    }

    .psrow .pr1 {
        text-align: left
    }

    .psrow h2 {
        padding: 0
    }

    .psrow p {
        margin: 10px 0 5px
    }

    .psrow .pr1:hover img {
        transform: scale(1.2)
    }

    .psrow img {
        transition-duration: 1.2s
    }

.pr1 {
    position: relative
}

#carouselHeader h2 {
    text-align: center;
    padding: 10px
}

.psrow .pr1 h2, .psrow .pr1 p {
    padding-left: 10px !important
}

.psrow .pr1 h2 {
    padding-bottom: 10px !important
}

.cpr .modal-header {
    position: absolute;
    right: 0;
    z-index: 9;
    border: 0;
    padding: 0;
    background: #fff0
}

.cpr .modal-content {
    position: relative
}

.cpr .close {
    border: 0;
    background: var(--red);
    padding: 12px 14px;
    font-weight: 600;
    color: #fff;
    transition: all 0.3s ease
}

    .cpr .close:hover {
        background: var(--orange)
    }

.cpr .item img {
    width: 100% !important;
    height: 500px !important;
    object-fit: cover
}

.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto
}

.cpr .carrows .owl-prev {
    left: 20px
}

.cpr .carrows .owl-next {
    right: 20px
}

.cpr .carrows .owl-prev, .cpr .carrows .owl-next {
    top: 45%
}

.project-slide .carousel-indicators {
    bottom: 30px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 999;
    display: flex;
    justify-content: center
}

    .project-slide .carousel-indicators button {
        border: medium none;
        border-radius: 0;
        float: middle;
        height: 60px;
        margin-bottom: -10px;
        margin-left: 0;
        margin-right: 5px !important;
        margin-top: 0;
        width: 100px;
        border-radius: 3px
    }

    .project-slide .carousel-indicators img {
        border: 2px solid #b8770d;
        border-radius: 3px;
        float: left;
        height: 60px;
        left: 0;
        width: 100px;
        opacity: .7;
        object-fit: cover
    }

    .project-slide .carousel-indicators .active img {
        border: 2px solid #fca311;
        opacity: 1
    }

.carousel-control {
    color: #b8770d;
    opacity: .5
}

    .carousel-control:hover, .carousel-control:focus {
        color: #fca311;
        opacity: 1
    }

    .carousel-control.left, .carousel-control.right {
        background: none !important;
        filter: none !important;
        progid: none !important
    }

.carousel {
    position: relative
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden
}

@media (transform-3d),(-webkit-transform-3d) {
    .carousel-inner > .item {
        -webkit-transition: -webkit-transform .6s ease-in-out;
        -o-transition: -o-transform .6s ease-in-out;
        transition: transform .6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px
    }
}

.carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img {
    display: block;
    max-width: 100%;
    height: auto
}

@media (transform-3d),(-webkit-transform-3d) {
    .carousel-inner > .item.active, .carousel-inner > .item.next.left, .carousel-inner > .item.prev.right {
        left: 0;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev {
    display: block
}

.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out
}

    .carousel-item-next, .carousel-item-prev, .carousel-item.active {
        display: block
    }

.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease
}

.carousel-control-next {
    right: 0
}

.carousel-control-prev {
    left: 0
}

.carousel-item img {
    width: 100% !important;
    height: 500px
}

.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out
}

.psrow .pr1 {
    cursor: pointer
}

    .psrow .pr1:hover h2 {
        color: var(--orange1)
    }

    .psrow .pr1 h2 {
        transition: all 0.3s ease;
        display: inline-flex;
        position: relative;
        overflow: hidden
    }

    .psrow .pr1:hover h2::after {
        width: 100%
    }

    .psrow .pr1 h2::after {
        content: '';
        position: absolute;
        left: 0;
        background: var(--orange1);
        width: 0;
        height: 1px;
        bottom: 0;
        transition: all 0.5s ease
    }

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9
}

.carousel-control-next, .carousel-control-prev {
    cursor: pointer
}

@media (prefers-reduced-motion:reduce) {
    .carousel-item {
        transition: none
    }
}

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: block
}

    .active.carousel-item-right, .carousel-item-next:not(.carousel-item-left) {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }

    .active.carousel-item-left, .carousel-item-prev:not(.carousel-item-right) {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }

.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    -webkit-transform: none;
    transform: none
}

    .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {
        z-index: 1;
        opacity: 1
    }

.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {
    z-index: 0;
    opacity: 0;
    transition: opacity 0s .6s
}

@media (prefers-reduced-motion:reduce) {
    .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {
        transition: none
    }
}

.modal1 .modal-content {
    background: url(images/pattern-1.webp);
    background-size: 300%;
    position: relative;
    background-position: bottom
}

.modal2 .modal-dialog {
    max-width: 600px !important
}

.modal2 .close {
    position: absolute;
    border: 0;
    background: #fff0;
    font-size: 30px;
    left: auto;
    right: 15px
}

.modal1 .close {
    position: absolute;
    right: 10px;
    border: 0;
    background: #fff0;
    font-size: 30px;
    top: 10px
}

.modal1 .form-group {
    margin-bottom: 15px
}

.textarea .form-control {
    height: 80px
}

.submit.fg-btn {
    width: 100%;
    justify-content: flex-end
}

.modal1 .modal-content {
    display: grid;
    grid-template-columns: 40% 60%;
    border-radius: 10px
}

.modal1 .popimg {
    display: flex
}

.modal1 img {
    border-radius: 10px 0 0 10px
}

.modal1 .modal-body {
    padding: 20px
}

.clientslider .owl-prev:hover path, .clientslider .owl-next:hover path {
    fill: var(--red)
}

.clientslider .owl-prev {
    left: -40px
}

.clientslider .owl-next {
    right: -40px
}

.clientlist {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px
}

    .clientlist img {
        width: 200px;
        margin: 0 auto;
        height: auto
    }

    .clientlist .c1 {
        background: #f1ede8;
        text-align: center;
        display: flex;
        padding: 15px 0;
        position: relative
    }

        .clientlist .c1::before, .clientlist .c1::after {
            height: 3px
        }

.pb0 {
    padding-bottom: 0px !important
}

.vmcnt1, .abtsec .mbtn {
    display: none
}

#seeMore {
    display: inline-flex;
    margin-top: 40px
}

.close {
    cursor: pointer
}

.mbtn:hover {
    color: var(--red)
}

    .mbtn:hover::after {
        filter: invert(10%) sepia(8%) saturate(6890%) hue-rotate(344deg) brightness(94%) contrast(105%)
    }

.infraslider .owl-prev, .infraslider .owl-next {
    top: 43%
}

.pslides img:hover {
    cursor: zoom-in
}

.dmenu > i {
    width: 100%;
    display: flex;
    justify-content: flex-end
}

    .dmenu > i::after {
        content: '';
        position: absolute;
        border-left: 1px solid #ccc;
        width: 2px;
        height: 100%;
        right: 36px
    }

.projects {
    background: linear-gradient(to right,#00000020,#00000014),url(images/project-banner.jpg);
    background-position: center;
    background-size: cover
}

.aboutbanner {
    background: linear-gradient(to right,#00000020,#00000014),url(images/contact-us-banner.png);
    background-position: center;
    background-size: cover
}

.contactbanner {
    background: linear-gradient(to right,#00000020,#00000014),url(images/about-us-1.png);
    background-position: center;
    background-size: cover
}

.abtpage .atestimonials {
    padding-top: 10px
}

.hpr3:after {
    background: url(images/u-drainpattern.webp) no-repeat
}

.budrain {
    background: url(images/udrain.webp) !important;
    background-position: center;
    background-size: cover
}

section.sub-banner.bwimg.lb.imgar {
    background: url(images/lego-block-wall.webp);
}

.bwimg {
    background: url(images/prestress-boundary-walls.webp);
    background-position: center;
    background-size: cover
}

.npimg {
    background: url(images/normal-paver.webp);
    background-position: center;
    background-size: cover
}

.gpimg {
    background: url(images/grass-paver.webp);
    background-position: center;
    background-size: cover
}

.ksimg {
    background: url(images/kerb-stone-paver-blocks.webp);
    background-position: center;
    background-size: cover
}

.sbpimg {
    background: url(images/shot-blasted-paver.webp);
    background-position: center;
    background-size: cover
}

.imgar::after {
    content: '';
    position: absolute;
    left: 0;
    background: linear-gradient(to right,rgb(0 0 0 / 20%),rgb(0 0 0 / 10%));
    width: 100%;
    height: 100%;
    z-index: 0
}

.imgar h1 {
    position: relative;
    z-index: 9
}

.qtrow {
    display: grid;
    grid-template-columns: 47% 47%;
    justify-content: space-between
}

.lines {
    line-height: 30px
}

.whatsapp {
    position: fixed;
    right: 2rem;
    bottom: 10rem;
    z-index: 999
}

    .whatsapp svg {
        width: 40px;
        height: 40px
    }

.senq {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    left: 0%;
    background: var(--red);
    padding: 10px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.3s ease-out;
    opacity: 0
}

.pr1:hover .senq {
    bottom: 0
}

.pr1 {
    position: relative
}

.rslider .owl-stage {
    display: flex
}

.pr1:hover .senq {
    opacity: 1
}

footer svg {
    width: 250px
}

.st0 {
    display: none
}

.st1 {
    display: inline;
    fill: #F36F26
}

.st2 {
    display: inline;
    fill: #E55325
}

.st3 {
    display: inline;
    fill: #F5A820
}

.st4 {
    display: inline;
    fill: #F57F20
}

.st5 {
    display: inline;
    fill: #F58020
}

.st6 {
    display: inline;
    fill: #F07125
}

.st7 {
    display: inline;
    fill: #F3712A
}

.st8 {
    display: inline;
    fill: #E35426
}

.st9 {
    display: inline;
    fill: #F57F22
}

.st10 {
    display: inline;
    fill: #F6A72B
}

.st11 {
    fill: #E55325
}

.st12 {
    fill: #F36F26
}

.st13 {
    fill: #F57F20
}

.st14 {
    fill: #F5A820
}

.st15 {
    fill: #F08121
}

.st16 {
    fill: #DE5826
}

.st17 {
    fill: #F58020
}

.st18 {
    fill: #F36F27
}

.st19 {
    fill: #59595C
}

.st20 {
    fill: #626465
}

.st21 {
    fill: none;
    stroke: #EB5426;
    stroke-width: 5.5336;
    stroke-miterlimit: 10
}

.whatsapp {
    position: fixed;
    right: 2rem;
    bottom: 10rem;
    z-index: 99
}

.wus .vmbtn {
    position: relative
}

.slist {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border-top: 1px solid #ccc
}

.pr1 li {
    padding: 10px 0
}

.slist1 {
    display: grid;
    grid-template-columns: repeat(1,1fr)
}

.pr1 {
    background: #fff
}

.pslist .pr1 ul {
    border-top: 1px solid #ccc
}

.mt5 {
    margin-top: 50px
}

.pmbtn {
    display: none
}

.wus .vmbtn {
    position: absolute;
    right: 105px;
    bottom: 20px
}

.wcus h3 {
    font-size: 20px;
    line-height: 24px
}

.u-drain .vmcnt {
    display: block
}

#whatsapp {
    display: none
}

.modal2 .modal-body {
    position: relative
}

.hauto {
    height: auto
}

.breadcrumb a span {
    color: #000
}

.vlink {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.button.is-play {
    position: absolute
}

.button-icon {
    border-radius: 8px;
    width: 75px;
    height: 50px;
    display: flex;
    background: #fff;
    align-items: center;
    justify-content: center;
    background: red;
    transition: all 0.5s ease-out
}

.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: .8
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box
}

    .mfp-container:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle
    }

.mfp-align-top .mfp-container:before {
    display: none
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045
}

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto
}

.mfp-ajax-cur {
    cursor: progress
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in
}

.mfp-auto-cursor .mfp-content {
    cursor: auto
}

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.mfp-loading.mfp-figure {
    display: none
}

.mfp-hide {
    display: none !important
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -.8em;
    left: 8px;
    right: 8px;
    z-index: 1044
}

    .mfp-preloader a {
        color: #CCC
    }

        .mfp-preloader a:hover {
            color: #FFF
        }

.mfp-s-ready .mfp-preloader {
    display: none
}

.mfp-s-error .mfp-content {
    display: none
}

button.mfp-close, button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: #fff0;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: 0;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: .65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial,Baskerville,monospace
}

    .mfp-close:hover, .mfp-close:focus {
        opacity: 1
    }

    .mfp-close:active {
        top: 1px
    }

.mfp-close-btn-in .mfp-close {
    color: #333
}

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap
}

.mfp-arrow {
    position: absolute;
    opacity: .65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: #fff0
}

    .mfp-arrow:active {
        margin-top: -54px
    }

    .mfp-arrow:hover, .mfp-arrow:focus {
        opacity: 1
    }

    .mfp-arrow:before, .mfp-arrow:after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 35px;
        margin-left: 35px;
        border: medium inset #fff0
    }

    .mfp-arrow:after {
        border-top-width: 13px;
        border-bottom-width: 13px;
        top: 8px
    }

    .mfp-arrow:before {
        border-top-width: 21px;
        border-bottom-width: 21px;
        opacity: .7
    }

.mfp-arrow-left {
    left: 0
}

    .mfp-arrow-left:after {
        border-right: 17px solid #FFF;
        margin-left: 31px
    }

    .mfp-arrow-left:before {
        margin-left: 25px;
        border-right: 27px solid #3f3f3f
    }

.mfp-arrow-right {
    right: 0
}

    .mfp-arrow-right:after {
        border-left: 17px solid #FFF;
        margin-left: 39px
    }

    .mfp-arrow-right:before {
        border-left: 27px solid #3f3f3f
    }

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px
}

    .mfp-iframe-holder .mfp-content {
        line-height: 0;
        width: 100%;
        max-width: 900px
    }

    .mfp-iframe-holder .mfp-close {
        top: -40px
    }

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%
}

    .mfp-iframe-scaler iframe {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 8px rgb(0 0 0 / .6);
        background: #000
    }

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto
}

.mfp-figure {
    line-height: 0
}

    .mfp-figure:after {
        content: '';
        position: absolute;
        left: 0;
        top: 40px;
        bottom: 40px;
        display: block;
        right: 0;
        width: auto;
        height: auto;
        z-index: -1;
        box-shadow: 0 0 8px rgb(0 0 0 / .6);
        background: #444
    }

    .mfp-figure small {
        color: #bdbdbd;
        display: block;
        font-size: 12px;
        line-height: 14px
    }

    .mfp-figure figure {
        margin: 0
    }

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-wrap: break-word;
    padding-right: 36px
}

.mfp-image-holder .mfp-content {
    max-width: 100%
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer
}

@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgb(0 0 0 / .6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box
    }

        .mfp-img-mobile .mfp-bottom-bar:empty {
            padding: 0
        }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgb(0 0 0 / .6);
        position: fixed;
        text-align: center;
        padding: 0
    }
}

@media all and (max-width:900px) {
    .mfp-arrow {
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }

    .mfp-arrow-left {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0
    }

    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px
    }
}

.mfp-bg, .mfp-wrap {
    z-index: 999999
}

.imgmc picture {
    width: 100%;
    display: flex
}

.lph2 {
    margin-bottom: 0px !important
}

.rtable {
    overflow-x: auto
}

    .rtable table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
        background-color: #fff0;
        border-collapse: collapse
    }

table, td, th, table thead th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center
}

    table th {
        font-size: 18px;
        color: #fff;
        background-color: #e65326;
        font-Weight: normal
    }

.u-drain .owl-carousel .owl-item img {
    max-width: 100%;
    width: auto !important;
    margin: auto
}

.u-drain .owl-dots {
    text-align: center
}

.pov.owl-theme .owl-dots .owl-dot span, .pov1.owl-theme .owl-dots .owl-dot span {
    height: auto
}

.pov, .pov1 {
    padding: 30px 0
}

.fb::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 16 16'%3E%3Cpath fill='%23353535' fill-rule='evenodd' d='M3.2 14.9a2.064 2.064 0 0 1-2.065-2.065v-9.6A2.064 2.064 0 0 1 3.2 1.17h9.6a2.064 2.064 0 0 1 2.065 2.065v9.6A2.064 2.064 0 0 1 12.8 14.9zm8.39-5.8h-1.45v4.8h2.67a1.066 1.066 0 0 0 1.066-1.066v-9.6a1.066 1.066 0 0 0-1.066-1.066h-9.6a1.066 1.066 0 0 0-1.066 1.066v9.6A1.066 1.066 0 0 0 3.21 13.9h5.33V9.1h-1.6V7.5h1.6v-.859c0-1.63.793-2.34 2.14-2.34c.635 0 .976.046 1.14.069h.01V5.9h-.922c-.465 0-.685.2-.751.6a2 2 0 0 0-.023.317V7.5h1.68l-.228 1.6z' clip-rule='evenodd'/%3E%3C/svg%3E")
}

.sicons a {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    overflow: hidden
}

    .sicons a::after {
        filter: invert(34%) sepia(49%) saturate(1758%) hue-rotate(344deg) brightness(86%) contrast(88%)
    }

.twitter::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 16 16'%3E%3Cpath fill='%23353535' d='M9.294 6.928L14.357 1h-1.2L8.762 6.147L5.25 1H1.2l5.31 7.784L1.2 15h1.2l4.642-5.436L10.751 15h4.05zM7.651 8.852l-.538-.775L2.832 1.91h1.843l3.454 4.977l.538.775l4.491 6.47h-1.843z'/%3E%3C/svg%3E")
}

.instagram::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23353535' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' color='%23353535'%3E%3Cpath d='M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12'/%3E%3Cpath d='M16.5 12a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m1.008-5.5h-.01'/%3E%3C/g%3E%3C/svg%3E")
}

.linkedin::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%23353535' fill-rule='evenodd' d='M5 1.25a2.75 2.75 0 1 0 0 5.5a2.75 2.75 0 0 0 0-5.5M3.75 4a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.5 0m-1.5 4A.75.75 0 0 1 3 7.25h4a.75.75 0 0 1 .75.75v13a.75.75 0 0 1-.75.75H3a.75.75 0 0 1-.75-.75zm1.5.75v11.5h2.5V8.75zM9.25 8a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 .75.75v.434l.435-.187a7.8 7.8 0 0 1 2.358-.595C20.318 7.4 22.75 9.58 22.75 12.38V21a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1-.75-.75v-7a1.25 1.25 0 0 0-2.5 0v7a.75.75 0 0 1-.75.75h-4a.75.75 0 0 1-.75-.75zm1.5.75v11.5h2.5V14a2.75 2.75 0 1 1 5.5 0v6.25h2.5v-7.87c0-1.904-1.661-3.408-3.57-3.234a6.3 6.3 0 0 0-1.904.48l-1.48.635a.75.75 0 0 1-1.046-.69V8.75z' clip-rule='evenodd'/%3E%3C/svg%3E")
}

.youtube::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23353535' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M22.54 6.42a2.77 2.77 0 0 0-1.945-1.957C18.88 4 12 4 12 4s-6.88 0-8.595.463A2.77 2.77 0 0 0 1.46 6.42C1 8.148 1 11.75 1 11.75s0 3.602.46 5.33a2.77 2.77 0 0 0 1.945 1.958C5.121 19.5 12 19.5 12 19.5s6.88 0 8.595-.462a2.77 2.77 0 0 0 1.945-1.958c.46-1.726.46-5.33.46-5.33s0-3.602-.46-5.33ZM9.75 15.021V8.48l5.75 3.271z'/%3E%3C/svg%3E")
}

.vtestimonials {
    display: flex;
    gap: 20px
}

    .vtestimonials .button.is-play {
        position: absolute;
        width: 100%;
        bottom: 20px;
        z-index: 9
    }

.vlink {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
    color: #fff
}

.vtestimonials .button.is-play .button-icon {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: #fff0;
    padding: 20px 10px 20px 20px;
    gap: 0 30px
}

.vtestimonials svg {
    width: 30px;
    height: 30px;
    margin-left: 2px
}

.vtestimonials .vlink::after {
    content: '';
    position: absolute;
    width: 100%;
    height: auto;
    background: linear-gradient(to top,rgb(0 0 0 / 80%) 0%,transparent 35%)
}

.vtestimonials .vtname {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px
}

.vtestimonials p {
    font-size: 20px
}

.vtestimonials .vlink:hover svg path {
    fill: #fff
}

.vtestimonials span {
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease
}

.vtestimonials .vlink:hover span {
    border-color: red;
    background: red
}

.mvonly {
    display: none
}

@media (min-width:2400px) {
    .banner::after {
        display: none
    }
}

@media (max-width:2399px) and (min-width:2200px) {
    .banner::after {
        height: 155px
    }
}

@media (max-width:2199px) and (min-width:2000px) {
    .banner::after {
        height: 145px
    }
}

@media (min-width:2000px) {
    .container {
        width: 1600px
    }

    .banner {
        height: 80vh
    }
}

@media (max-width:1800px) {
    .banner::after {
        height: 130px
    }

    .b1, .b2 {
        display: none
    }

    .wus .vmbtn {
        right: 95px
    }
}

@media (max-width:1700px) {
    .fwrap {
        grid-template-columns: 26% 20% 15% 25%
    }

    .banner::after {
        width: 220px;
        height: 120px
    }

    .awrap, .w75 {
        width: 85%
    }

    .wus .vmbtn {
        right: 85px
    }

    .cnt-add .dtl-lst:nth-child(3) {
        width: 30%
    }

    .f-hadds .dtl-lst {
        width: 100% !important
    }

    .cnt-add .dtl-lst:nth-child(4) {
        width: 55%
    }
}

@media (max-width:1650px) {
    .wicon p {
        width: 60%
    }
}

@media (max-width:1600px) {
    .banner {
        height: 720px
    }

        .banner::after {
            height: 115px
        }

    .awrap {
        width: 90%
    }

        .awrap .cbtn1 {
            margin-top: 0
        }

    .c-frm .row {
        padding: 60px 50px
    }

    #form .f-row {
        padding: 35px
    }

    .cnt-frm {
        width: 35%
    }

    .cnt-dtl {
        width: 65%
    }

    .w80 {
        width: 90%
    }

    .wus .vmbtn {
        right: 75px
    }
}

@media (max-width:1520px) {
    .banner {
        height: 700px
    }
}

@media (max-width:1550px) {
    .banner::after {
        height: 115px
    }

    .banner::after {
        bottom: 150px
    }

    .textWrapper {
        bottom: 0
    }

    .swiper-pagination {
        bottom: 120px
    }
}

@media (max-width:1500px) {
    .container {
        width: 85%
    }

    .fwrap {
        grid-template-columns: 26% 20% 12% 26%
    }

    .banner {
        height: 640px
    }

        .banner::after {
            bottom: 95px;
            height: 110px
        }

    .textWrapper {
        bottom: 0
    }

    .banner::after {
        bottom: 140px
    }

    header .main-menu > li > a {
        padding: 0 1.6vw
    }
}

@media (max-width:1400px) {
    .banner::after {
        height: 110px;
        left: -20px
    }

    .awrap {
        width: 100%
    }

    .fcol3 .addr br {
        display: none
    }

    .cnt-dtl {
        width: 63%
    }

    .dtl-cnt p:first-child {
        line-height: 20px
    }

    .psrow {
        gap: 20px
    }

    .textWrapper p {
        width: 42%;
        font-size: 24px;
        line-height: 26px
    }

    .wus .vmbtn {
        right: 65px
    }
}

@media (max-width:1350px) {
    .fwrap {
        grid-template-columns: 26% 20% 10% 27%
    }

    .b4, .b3 {
        display: none
    }

    header .main-menu > li > a {
        padding: 0 1.6vw
    }

    header .main-menu > li > a {
        padding: 0 1.3vw
    }
}

@media (max-width:1300px) {
    .wicon p {
        width: 70%
    }

    .f-hadds, .dtl-lst {
        width: 100%
    }

    .imgar {
        background-position: right
    }

    .cnt-dtl, .cnt-frm {
        width: 50%
    }

    .wcus {
        grid-template-columns: 100%
    }

        .wcus h2, .wcus h3 {
            margin-bottom: 20px
        }

    .wcus {
        margin: 0
    }

    .clientslider {
        margin-top: 40px;
        width: 93%
    }

    .cnt-add .dtl-lst:nth-child(3), .cnt-add .dtl-lst:nth-child(4) {
        width: 100%
    }
}

@media (max-width:1250px) {
    .container {
        width: 90%
    }

    .fwrap {
        grid-template-columns: 26% 20% 10% 27%
    }

    .dropdown-menu {
        left: -345px;
        top: 90px
    }
}

@media (max-width:1199px) {
    .fcname {
        font-size: 18px
    }

    .certrow {
        grid-template-columns: 40% 55%
    }

    .banner::after {
        display: none
    }

    .banner {
        height: 500px
    }

    .textWrapper .bh1 {
        font-size: 50px;
        line-height: 50px
    }

    .textWrapper p {
        font-size: 20px;
        line-height: 22px
    }

    .swiper-pagination {
        bottom: 45px
    }

    .textWrapper {
        padding: 20px;
        width: 90%
    }

        .textWrapper p {
            width: 55%
        }

    .w80, .w75 {
        width: 100%
    }

    .wus .vmbtn {
        right: 55px
    }
}

@media (max-width:1180px) {
    header .main-menu > li > a {
        padding: 0 1.2vw
    }
}

@media (min-width:1100px) {
    .header-sticky .main-menu > li > a {
        height: 85px
    }

    header .wl {
        position: absolute;
        top: 0
    }

    header .main-menu > li > a {
        height: 120px
    }
}

@media (max-width:1100px) {
    .fwrap {
        grid-template-columns: 26% 20% 10% 27%
    }

    .mhide, .dropdown-menu {
        display: none
    }

    .sse {
        bottom: 15rem
    }

    .wus .vmbtn {
        right: 45px
    }

    .mvonly {
        display: block
    }
}

@media (max-width:1050px) {
    .vm-cards p {
        height: 185px
    }

    .vm-cards > .bg1 > .icon {
        width: 100px
    }

    .vm-cards .bg1 {
        gap: 0 25px
    }

    .wicon p {
        width: 90%
    }
}

@media (max-width:991px) {
    .fwrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px
    }

    .stickycol, header .container::after {
        display: none
    }

    .fcol1, .fcol3 {
        width: 40%
    }

    .textWrapper .bh1 {
        font-size: 40px;
        line-height: 40px
    }

    .industry-page .owl-carousel .owl-item img {
        width: auto;
        margin: 0 auto
    }

    .habt p {
        margin-bottom: 20px
    }

    .habt {
        align-items: normal
    }

    .hp21 h3, .hpr2 h3 {
        padding: 8px 15px;
        font-size: 18px
    }

    .hprow, .hprow1, .hp2 {
        gap: 10px
    }

    .hprow1 {
        margin-top: 10px
    }

    header {
        padding: 10px 0
    }

    footer img {
        margin-bottom: 0
    }

    .cnt-dtl {
        width: 50%
    }

    .cnt-frm {
        width: 48%
    }

    .c-frm .row {
        padding: 50px 30px
    }

    .psrow {
        grid-template-columns: repeat(3,1fr)
    }

    .sub-banner {
        height: 150px
    }

    .clientslider .owl-prev {
        left: -30px
    }

    .clientslider .owl-next {
        right: -30px
    }

    .clientlist {
        grid-template-columns: repeat(4,1fr)
    }

    .hbg {
        background: linear-gradient(to bottom,#fff 28%,#f1ede8 20%)
    }

    .pslist .pirow {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (min-width:901px) {
    .cpr .modal-dialog {
        max-width: 800px !important;
        margin: 0 auto
    }

    .modal-dialog {
        max-width: 800px !important;
        margin: 0 auto
    }
}

@media (max-width:900px) and (min-width:700px) {
    .modal-dialog {
        max-width: 700px !important;
        margin: 0 auto
    }

    .modal1 .modal-content {
        grid-template-columns: 45% 55%
    }
}

@media (max-width:900px) {
    .textWrapper p {
        width: 60%;
        padding-right: 1%
    }

    .habt {
        grid-template-columns: 100%;
        gap: 30px 0
    }

    .habt1 img {
        width: 100%
    }

    .facts {
        margin-bottom: 60px
    }

    .cnt-dtl, .cnt-frm {
        width: 100%
    }

    .c-frm .row {
        gap: 40px 0
    }

    .dtl-cnt p:last-child {
        width: 70%
    }

    .pirow h2 {
        font-size: 18px;
        line-height: 1
    }

    .wus .vmbtn {
        right: 30px
    }
}

@media (max-width:850px) {
    .copyright .container {
        flex-wrap: wrap;
        justify-content: center
    }

    .textWrapper .d-flex {
        flex-wrap: wrap
    }

    .textWrapper p {
        width: 100%;
        padding-right: 5%
    }

    .textWrapper .bh1 br, .vmbtn {
        display: none
    }

    .textWrapper .bh1 {
        margin-bottom: 10px
    }

    .textWrapper {
        padding: 20px 20px 40px
    }

    .wicon img {
        width: auto !important
    }

    .wicon .owl-dots {
        text-align: center;
        margin-top: 20px
    }

    .wus .vmbtn {
        display: flex;
        position: relative;
        bottom: 0;
        right: 0;
        align-items: center;
        justify-content: center;
        flex-direction: row-reverse;
        margin-top: 20px
    }

        .wus .vmbtn .bimg {
            display: inline-flex;
            margin: 0;
            width: auto;
            height: auto
        }

        .wus .vmbtn svg {
            width: 20px;
            height: 20px
        }

        .wus .vmbtn .bimg div {
            background: #fff0
        }

        .wus .vmbtn svg path {
            fill: #0d0d0dbd
        }

        .wus .vmbtn:hover path {
            fill: var(--red)
        }
}

@media (min-width:768px) and (max-width:991px) {
    .cpr .modal-dialog {
        max-width: 700px !important;
        margin: 0 auto
    }
}

@media (max-width:767px) {
    .swiper a {
        display: none
    }

    .textWrapper .bh1, .enquiry p {
        font-size: 30px;
        line-height: 30px
    }

    .fdata .f20 {
        font-size: 18px;
        line-height: 20px
    }

    .breadcrumb {
        padding: 10px 20px
    }

    .textWrapper, .hp1, .hpr1, .hp2, .hpr2 {
        width: 100%
    }

    .swiper .swiper-wrapper .swiper-slide {
        height: 95%
    }

    .swiper-pagination {
        display: none
    }

    .hprow, .hprow1 {
        flex-wrap: wrap
    }

    .hp1::after, .hpr1::after {
        display: none
    }

    .hp1 h3, .hpr1 h3, .lph2 {
        color: var(--orange1);
        padding: 0;
        margin-bottom: 10px
    }

    .hp1, .hpr1 {
        background: #fff0
    }

    .hprow1 {
        margin-top: 40px
    }

    .pspace {
        padding: 60px 0
    }

    .wus .container::after {
        bottom: -60px
    }

    .wicon, .clientslider {
        margin-top: 20px
    }

    .hblog .carrows .owl-prev {
        left: -20px
    }

    .hblog .carrows .owl-next {
        right: -20px
    }

    .hblog .carrows .owl-prev, .hblog .carrows .owl-next {
        top: 37%
    }

    .hblog {
        padding-bottom: 0px !important
    }

    .hbloglist {
        margin-bottom: 0
    }

    .pspace.pt-0 {
        padding-top: 0
    }

    .aslide {
        padding-bottom: 10px !important
    }

    .ch3, .wcus h3 {
        font-size: 20px;
        line-height: 22px
    }

    .pirow {
        grid-template-columns: repeat(2,1fr)
    }

    .button-icon {
        width: 60px;
        height: 42px
    }

    .w75 .mbtn {
        margin-bottom: 20px
    }

    .w75 .vmcnt, .wcus h3 {
        margin-bottom: 0
    }

    .w75 .vmcnt {
        margin-top: 10px
    }

    .qpolicy {
        grid-template-columns: 100%
    }

    .qsec {
        padding: 0;
        margin-bottom: 20px
    }

    .project-slide .carousel-indicators img, .project-slide .carousel-indicators button {
        width: 80px;
        height: 50px
    }

    .hbg {
        margin-top: 10px;
        background: linear-gradient(to bottom,#fff 24%,#f1ede8 20%)
    }

    .infraslider .owl-prev, .infraslider .owl-next {
        top: 40%
    }

    .imgar {
        background-position: -350px 0
    }

    .lines {
        line-height: 26px
    }

    .cnt-add {
        row-gap: 30px
    }

    .vtestimonials p {
        font-size: 16px
    }

    .vtestimonials .vtname {
        font-size: 20px;
        margin-bottom: 3px
    }

    .vtestimonials span {
        width: 45px;
        height: 45px
    }

    .vtestimonials svg {
        width: 25px;
        height: 25px
    }
}

@media (max-width:700px) and (min-width:300px) {
    .modal1 .popimg {
        display: none
    }

    .modal1 .modal-content {
        grid-template-columns: 100%
    }

    .modal-dialog {
        width: 75%;
        margin: 0 auto
    }

    .clientlist {
        grid-template-columns: repeat(3,1fr)
    }
}

@media (max-width:700px) {
    .ch2 {
        font-size: 34px;
        line-height: 36px
    }

    .fcol1, .fcol3 {
        width: 48%
    }

    .imgar {
        background-position: -450px 0
    }
}

@media (max-width:650px) {
    .vtestimonials .button.is-play {
        height: 100%;
        bottom: 0
    }

        .vtestimonials .button.is-play .button-icon {
            height: 100%;
            justify-content: center
        }

            .vtestimonials .button.is-play .button-icon div {
                position: absolute;
                bottom: 15px
            }

    .vtestimonials p {
        text-align: center
    }
}

@media (max-width:600px) {
    .dtl-cnt p:last-child {
        width: 90%
    }

    .infraslider .owl-prev, .infraslider .owl-next {
        top: 34%
    }

    .enquiry a {
        font-size: 18px;
        padding: 8px 20px 6px
    }

    .pslist .pirow {
        grid-template-columns: repeat(1,1fr)
    }
}

@media (min-width:576px) {
    .cpr .modal-dialog {
        max-width: 500px;
        margin: 0 auto
    }

    .modal-dialog {
        max-width: 800px;
        margin: 0 auto
    }
}

@media (max-width:575px) {
    footer .iconshow svg.mb2 {
        display: none
    }

    .iconshow {
        order: 4
    }

    .fcol1, .fcol3 {
        width: 100%
    }

    .grid2 {
        flex-wrap: wrap;
        gap: 10px 0
    }

    footer h2 {
        display: block
    }

    .fwrap {
        padding: 40px 0
    }

    .backButton {
        display: none !important
    }

    .count {
        font-size: 30px
    }

    .fdata p {
        padding: 10px 10px 0
    }

    .facts .fdata {
        padding-bottom: 10px
    }

    .qlinks, .plinks, .grid2 {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.75s ease-out
    }

    footer h2 {
        border-bottom: 1px solid #666;
        font-size: 20px;
        padding-bottom: 5px
    }

    footer .ph:after, footer .qlh:after, footer .cuh:after {
        content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="22" height="22" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40"%3E%3Cg transform="rotate(-90 20 20)"%3E%3Cpath fill="%23323131" d="M24.96 32.601L12.371 19.997l.088-.088l12.507-12.52a.661.661 0 0 0-.01-.921a.645.645 0 0 0-.458-.182a.653.653 0 0 0-.465.186l-13.004 13.02a.63.63 0 0 0-.176.49a.656.656 0 0 0 .18.523l13.014 13.031c.244.23.659.233.921-.02a.658.658 0 0 0-.008-.915z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        width: 25px;
        float: right
    }

    footer .iclose.qlh:after, footer .iclose.cuh:after, footer .iclose.ph:after {
        content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="22" height="22" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40"%3E%3Cg transform="rotate(90 20 20)"%3E%3Cpath fill="%23323131" d="M24.96 32.601L12.371 19.997l.088-.088l12.507-12.52a.661.661 0 0 0-.01-.921a.645.645 0 0 0-.458-.182a.653.653 0 0 0-.465.186l-13.004 13.02a.63.63 0 0 0-.176.49a.656.656 0 0 0 .18.523l13.014 13.031c.244.23.659.233.921-.02a.658.658 0 0 0-.008-.915z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        width: 25px
    }

    .line {
        border-right: 2px solid #fafafa
    }

    .plinks.open, .grid2.open, .qlinks.open {
        height: auto;
        max-height: 500px;
        transition: max-height 0.75s ease-in !important
    }

    .fwrap {
        padding: 25px 0 20px
    }

    .fwrap {
        gap: 0
    }

    .plinks li, .qlinks li, .fcname {
        margin-bottom: 10px !important
    }

    footer h2 {
        margin-bottom: 20px
    }

    header img {
        width: 200px
    }

    .sp-active .wl img {
        width: 140px
    }

    .header-sticky .side-menu-wrap {
        padding-top: 75px
    }

    .side-menu-wrap {
        padding-top: 110px
    }

    .hbg {
        background: linear-gradient(to bottom,#fff 20%,#f1ede8 20%)
    }

    .cpr .modal-dialog {
        max-width: 95%;
        margin: 0 auto
    }

    .plinks li:last-child, .qlinks li:last-child {
        margin-bottom: 20px !important
    }

    .imgar {
        background-position: -500px 0
    }

    .hp21 h3, .hpr2 h3 {
        width: 100%;
        position: relative;
        bottom: 0
    }

    .hp21, .hpr2 {
        flex-wrap: wrap;
        background: #6e6e6e
    }
}

@media (max-width:480px) {
    .dtl-cnt p:last-child {
        width: 100%
    }

    .map {
        margin-top: 20px
    }

    .c-frm .row {
        padding: 0 0;
        background: #fff0
    }

    .cnt-dtl {
        padding: 20px 0
    }

    .copyright .container p {
        text-align: center
    }

    .copyright .container a {
        white-space: nowrap
    }

    .effect {
        filter: none
    }

    .cnt-dtl h2 {
        margin-bottom: 10px
    }

    #form .f-row {
        border-radius: 0;
        padding: 20px 10px
    }

    .enquiry p {
        font-size: 20px;
        line-height: 20px
    }

    .banner {
        height: 400px
    }

    .cbtn {
        padding: 6px 18px
    }

    .ch2 {
        font-size: 28px;
        line-height: 28px
    }

    .ch3 {
        font-size: 22px;
        line-height: 20px
    }

    .wus .container::after, .vmcnt, .infraslider .owl-dots {
        display: none
    }

    .rslider .owl-dots {
        margin-top: 10px
    }

    .rslider {
        width: 100%
    }

    .submit input {
        width: 150px
    }

    .sse {
        bottom: 0px !important;
        transform: none !important;
        writing-mode: horizontal-tb !important;
        width: 100%;
        text-align: center;
        grid-template-columns: repeat(2,1fr);
        justify-content: space-around;
        flex-direction: row-reverse
    }

    .copyright {
        padding-bottom: 40px
    }

    .contactpage .copyright {
        padding-bottom: 0
    }

    .side-menu-wrap {
        width: 100%
    }

    .dtl-icn svg {
        width: 20px
    }

    .dtl-lst {
        gap: 10px
    }

    .dtl-icn {
        width: 30px;
        height: 30px
    }

    .fn20 {
        font-size: 18px
    }

    .dtl-cnt {
        width: 90%
    }

    .textWrapper span, .textWrapper .bh1 {
        font-size: 25px
    }

    .hbloglist p, .t1 p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden
    }

    .sub-banner {
        height: 120px
    }

    .breadcrumb {
        padding: 10px
    }

    .fdcnt, .sncnt, .gmcnt, .agcnt, .otherscnt {
        display: none
    }

    .othersl, .agl, .gml, .snl, .fdl {
        display: flex
    }

    .fdcnt ul, .sncnt ul, .gmcnt ul, .agcnt ul, .otherscnt ul {
        margin-bottom: 10px
    }

    .abtsec .mbtn {
        display: inline-flex
    }

    .textWrapper p {
        display: none
    }

    .textWrapper .d-flex {
        justify-content: center;
        width: 100%
    }

    .textWrapper {
        padding: 10px;
        bottom: 0
    }

        .textWrapper .bh1 {
            margin-bottom: 0;
            text-align: center
        }

    .facts .fdata {
        width: 50%;
        padding: 10px 10px
    }

    .facts {
        flex-wrap: wrap
    }

        .facts .fdata:nth-child(2) {
            border-right: 0
        }

    .facts {
        border-bottom: 0
    }

        .facts .fdata:nth-child(3) {
            border-right: 0
        }

        .facts .fdata:nth-child(4) {
            border-left: 1px solid #d3ccc4
        }

        .facts .fdata:nth-child(3), .facts .fdata:nth-child(4) {
            border-top: 1px solid #d3ccc4
        }

    .hprow img, .hprow1 img {
        height: 200px;
        object-fit: cover;
        object-position: left bottom
    }

    .hp21 h3, .hpr2 h3 {
        width: 100%;
        text-align: center
    }

    .pspace {
        padding: 40px 0
    }

    .rslider::after, .enquiry {
        display: none
    }

    .rslider {
        margin-top: 20px
    }

        .rslider .owl-item {
            padding: 20px
        }

    .hblog .carrows .owl-prev, .hblog .carrows .owl-next {
        position: relative
    }

    .hbloglist .owl-nav, .hproject .owl-nav {
        text-align: right;
        padding: 20px 20px 0
    }

    .hblog .carrows .owl-prev {
        left: 0
    }

    .side-menu-wrap {
        padding-top: 85px
    }

    .header-sticky .side-menu-wrap {
        padding-top: 65px
    }

    .swiper .swiper-wrapper .swiper-slide {
        height: 100%
    }

    .facts {
        margin: 0 0 40px
    }

    .habt {
        margin-top: 0
    }

    .hp1 h3, .hpr1 h3, .lph2 {
        font-size: 24px;
        margin-bottom: 0
    }

    .hprod h2 {
        margin-bottom: 20px;
        margin-top: 20px
    }

    .pirow h2 {
        font-size: 16px;
        padding: 10px
    }

    .pirow {
        gap: 10px
    }

    .w80 .ch3, .wcus h3 {
        font-size: 17px
    }

    .sub-banner h1 {
        font-size: 26px;
        line-height: 1
    }

    .mpb25 {
        padding-bottom: 25px
    }

    .brbg .mb3 {
        margin-bottom: 20px
    }

    .psrow .pr1 h2 {
        padding: 0;
        font-size: 18px
    }

    .project-slide .carousel-indicators img, .project-slide .carousel-indicators button {
        width: 70px;
        height: 50px
    }

    .modal-dialog {
        width: 90%
    }

    .modal1 .modal-body {
        padding: 10px
    }

    .clientslider .owl-prev {
        left: -20px
    }

    .clientslider .owl-next {
        right: -25px
    }

    .clientlist {
        grid-template-columns: repeat(2,1fr)
    }

    .habt .linec {
        -webkit-line-clamp: 3
    }

    .aslide h1 {
        margin-bottom: 30px
    }

    .infraslider .owl-nav, .infraslider .owl-prev, .infraslider .owl-next {
        position: relative
    }

    .infraslider .owl-prev, .infraslider .owl-next {
        left: auto;
        right: 0
    }

    .infraslider .owl-nav {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
        gap: 15px
    }

    .infraslider img {
        height: 300px;
        object-fit: cover;
        object-position: center
    }

    .mcenter h2, .mcenter h3 {
        text-align: center
    }

    .sse a {
        display: flex;
        justify-content: center;
        padding: 10px
    }

    .pslides span {
        width: 30px;
        height: 30px
    }

    .pslides .swiper-button-next, .pslides .swiper-button-prev {
        top: 45%
    }

    .pslides svg {
        width: 20px
    }

    .contactbanner {
        background-position: left
    }

    .aboutbanner {
        background-position: right
    }

    .imgar {
        background-position: -400px 0
    }

    .lines {
        line-height: 22px
    }

    .whatsapp {
        bottom: 3rem;
        right: .75rem
    }

        .whatsapp svg {
            width: 36px;
            height: 36px
        }

    .senq {
        padding: 5px
    }

    .header-logo svg {
        width: 170px
    }

    .sp-active svg {
        width: 130px
    }

    header {
        padding: 8px 0
    }

    .habout {
        padding-top: 10px
    }

    .whatsapp {
        right: 1rem;
        bottom: 4rem
    }

    .pmbtn {
        display: inline-flex
    }

    .pmcnt1 {
        display: none
    }

    .hp2 {
        grid-template-columns: repeat(1,1fr)
    }

    .bslide1 {
        background: url(images/normal-paver-blocks-mobile.webp) !important
    }

    .bslide2 {
        background: url(images/shot-blast-paver-blocks-mobile.webp) !important
    }

    .bslide3 {
        background: url(images/grass-block-pavers-mobile.webp) !important
    }

    .bslide4 {
        background: url(images/prestress-compound-wall-mobile.webp) !important
    }

    .u-drain .hproject {
        padding: 0 15px
    }

        .u-drain .hproject .owl-prev {
            left: -5px
        }

        .u-drain .hproject .owl-next {
            right: -5px
        }

    .vtestimonials {
        flex-wrap: wrap;
        flex-direction: column
    }

        .vtestimonials img {
            width: 100%
        }

        .vtestimonials span {
            width: 60px;
            height: 60px
        }

        .vtestimonials svg {
            width: 35px;
            height: 35px
        }
}

@media (max-width:420px) {
    .project-slide .carousel-indicators img, .project-slide .carousel-indicators button {
        width: 50px;
        height: 40px
    }

    .hbg {
        background: linear-gradient(to bottom,#fff 17%,#f1ede8 4%)
    }

    .imgar {
        background-position: -430px 0
    }
}

@media (max-width:400px) {
    .g-recaptcha {
        transform: scale(.9);
        transform-origin: 0 0
    }

    .pirow {
        grid-template-columns: repeat(1,1fr)
    }

    .infraslider img {
        height: 260px
    }

    .imgar {
        background-position: -450px 0
    }

    .resident {
        grid-template-columns: repeat(2,1fr) !important
    }
}

@media (max-width:380px) {
    .hp21 h3, .hpr2 h3 {
        padding: 8px
    }

    .hbg {
        background: linear-gradient(to bottom,#fff 15%,#f1ede8 14%)
    }

    .imgar {
        background-position: -470px 0
    }
}

@media (max-width:350px) {
    .pslider .owl-next {
        right: -10px
    }

    .breadcrumb li {
        font-size: 14px
    }

    .imgar {
        background-position: -490px 0
    }

    .cnt-add .dtl-lst:nth-child(4) a {
        font-size: 15px
    }
}

@media (max-width:340px) {
    .hp21 h3, .hpr2 h3 {
        font-size: 16px
    }

    .cform iframe {
        transform: scale(.85);
        margin-left: -23px
    }

    .g-recaptcha {
        transform: scale(.85)
    }

    .cnt-add .dtl-lst:nth-child(4) a {
        font-size: 14px
    }
}