@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Bahnschrift';
    src: url('../font/bahnschrift/Bahnschrift.woff2') format('woff2'),
        url('../font/bahnschrift/Bahnschrift.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root{
    --orange: #e99a23;
    --green: #79ad44;
    --white: #ffffff;
    --black:#000000;
    --sapgreen: #435233;
    --mediumGreen: #4c9200;
    --deepyellow: #ffac11;
    --deepGreen: #1e3c00;
    --gray: #d2d2da;
    --barlow: 'Barlow', sans-serif;
    --bahnschrift : 'Bahnschrift';
    --interTight: 'Inter Tight', sans-serif;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--barlow);
    color: var(--black);
}
ul{
    list-style: none;
    padding-left: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
.paratext P{
    font-family: var(--barlow);
    font-size: 1.1rem;
    line-height: 1.4;
    font-weight: 500;
}
.whitepara p{
    color: var(--white);
}
.title h3{
    color: #4c9300;
    font-family: var(--bahnschrift);
    text-transform: uppercase;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0;
}
.title p{
    color: #5f5f5f;
    font-family: var(--bahnschrift);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.3;
}
.titleBlack p{
    color: var(--black);
    text-transform: capitalize;
    font-size: 1.5rem;
    font-weight: 700;
}
/***********===========================
header section css start 
===========================*************/
header{
    position: absolute;
    top: 3%;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
}
.navbar-nav {
    background-color: var(--white);
    padding: 0.7rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 3px 6px 7px 0px #939393;
    justify-content: space-between;
    border-radius: 5px;
    transition: all 0.3s ease-in;
}
.logo,
.header-Btn{  
    display: block;
    width: 20%;
    text-align: center;
}
.logo img{
    width: 160px;
}
.menusection{
    width: 55%;
}
.menusection ul{
    display: flex;
    gap: 25px;
    justify-content: space-evenly;
}
.menusection ul li a{
    font-family: var(--barlow);
    text-transform: capitalize;
    color: var(--black);
    font-weight: 600;
    font-size: 1.2rem;
    padding: 0 0.6rem ;
    position: relative;
    transition: all 0.2s ease-in;
}
.menusection ul li.active a,
.menusection ul li:hover a{
    color: var(--green);
    transition: all 0.2s ease-in;
    font-weight: 700;
}
.menusection ul li a:after{
    content: '';
    width: 0%;
    height: 3px;
    background-color: var(--orange);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    transition: all 0.3s ease-in;
}
.menusection ul li.active a:after,
.menusection ul li:hover a:after{
    width: 100%;
    transition: all 0.3s ease-in;
}
.menusection ul li:nth-child(5) a{
    text-transform: uppercase;
}
.header-Btn a{
    text-transform: uppercase;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--black);
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border: 2px solid var(--orange);
    border-radius: 50px;
    transition: all 0.3s ease-in;
}
.header-Btn a:hover{
    transition: all 0.3s ease-in;
    background-color: var(--orange);
    color: var(--white);
}

/************ header section css start   ***************/

/***********=====================
 banner section css strat  
=====================****************/
.banner{
    /* height: 700px; */
    overflow: hidden;
    clip-path: polygon(0 86%, 50% 100%, 100% 86%, 100% 0%, 0% 0%);
    position: relative;
}
.banner:before{
    content: '';
    background-color: var(--black);
    opacity: 30%;
    position: absolute;
    width: 100%;
    height: 12%;
    top: 0;
    z-index: 3;
    left: 0;
    right: 0;
}
.banner img{
    width: 100%;
}
.banner-text{
    position: absolute;
    width: 100%;
    height: 40%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto 0;
    text-align: right;
}
.banner-text h1 {
    font-size: 3.8rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--white);
    filter: drop-shadow(3px 3px 4px #2c2c2c);
    line-height: 1;
    font-family: var(--bahnschrift);
}
.banner-text p {
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--white);
    filter: drop-shadow(3px 3px 4px #2c2c2c);
    line-height: 1.2;
    font-family: var(--barlow);
}
.banner-text h1 .orange{
    color: var(--orange);
    font-weight: 600;
}
.banner-text h1 .green{
    color: #92d050;
    font-weight: 600;
}
.btn-banner{
    display: flex;
    gap: 15px;
    justify-content: end;
}
.btn-banner .orange_btn{
    padding: 0.6rem 2.5rem;
    border: 1px solid var(--orange);
    font-family: var(--barlow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    border-radius:50px ;
    color: var(--black);
    background-color: var(--orange);
    transition: all 0.3s ease-in;
    font-weight: 500;
}
.btn-banner .orange_btn:hover{
    transition: all 0.3s ease-in;
    background-color: transparent;
    color: var(--orange);
}
.btn-banner .white_btn{
    padding: 0.6rem 2.5rem;
    border: 1px solid var(--white);
    font-family: var(--barlow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    border-radius:50px ;
    color: var(--black);
    background-color: var(--white);
    transition: all 0.3s ease-in;
    font-weight: 500;
}
.btn-banner .white_btn:hover{
    transition: all 0.3s ease-in;
    background-color: transparent;
    color: var(--white);
}
/****** end of banner section  *******/

/**************=================
aboutBox section css start
=================*************/
.aboutBox{
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    border-right: 1px solid #74b431;
}
.aboutIcon{
    width: 25%;
    text-align: center;
}
.aboutIcon img{
    filter: invert(76%) sepia(66%) saturate(2850%) hue-rotate(346deg) brightness(97%) contrast(88%);
    width: 70px;
}
.aboutText{
    width: 70%;
    padding-right: 0.7rem;
}
.aboutText p{
    font-family: var(--barlow);
    font-weight: 600;
    color: var(--black);
    text-transform: capitalize;
    font-size: 1.6rem;
    line-height: 1.1;
}
.aboutText p span{
    color: #74b431;
    font-weight: 700;
}
.aboutsection .row .col-md-4:last-child .aboutBox{
    border-right: none;
}
/************ aboutBox section css end  *********/



/* section-heading css start  */
.section-heading{
    position: relative;
    z-index: 5;
}

.section-heading p{
    color: #5f5f5f;
    font-family: var(--bahnschrift);
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.2;
}
.section-heading h2{
    color: #191919;
    font-family: var(--barlow);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.1;
}
.section-heading h2 .headingGreen{
    color: #438200;
    font-family: var(--barlow);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.1;
    text-transform: capitalize;
    display: inline;
}
.section-heading span{
    color: #74b431;
    font-family: var(--bahnschrift);
    font-weight: 200;
    font-size: 1.2rem;
    text-transform: uppercase;
    display: block;
    line-height: 1.1;
}
.section-padding{
    padding: 2.2rem 0;
}
.section-margin{
    margin: 4rem 0;
}
.section-bottom-padding{
    padding-bottom: 1rem;
}
.section-top-padding{
    padding-top: 2rem;
}
.shadowText{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.shadowText span {
    display: block;
    font-size: 10.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--white);
    text-shadow: -1px -1px 0 #ffc874b5, 1px -1px 0 #ffc874b5, -1px 1px 0 #ffc874b5, 1px 1px 0 #ffc874b5;
}
.white-heading p,
.white-heading h2,
.white-heading span{
    color: var(--white);   
}
/* section button css start  */
.btn-section .white_btn{
    padding: 0.9rem 3.5rem;
    border: 1px solid var(--white);
    font-family: var(--barlow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    border-radius:50px ;
    color: var(--black);
    background-color: var(--white);
    transition: all 0.3s ease-in;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 5;
}
.btn-section .white_btn:hover{
    transition: all 0.3s ease-in;
    background-color: transparent;
    color: var(--white);
}
.btn-section .orange_btn{
    padding: 0.9rem 3.5rem;
    border: 1px solid var(--orange);
    font-family: var(--barlow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    border-radius:50px ;
    color: var(--black);
    background-color: var(--orange);
    transition: all 0.3s ease-in;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 5;
}
.btn-section .orange_btn:hover{
    transition: all 0.3s ease-in;
    background-color: transparent;
    color: var(--orange);
}
section .btn-section{
    padding: 2rem 0 1rem;
}
/* section btn css end  */

.section-sub-heading h3{
    font-family: var(--barlow);
    font-weight: 700;
    color: var(--black);
    font-size: 3.6rem;
    text-transform: uppercase;
    line-height: 1.1;
}
.section-sub-heading h3 span{
    display: block;
    color: #438200;
    font-size: 2.1rem;
}
/**************** section-heading css end ***************/

/****************=================
service section css start
==================***************/
/* service-slider-img section css start  */
.servicebox_slider{
    position: relative;
}

.serviceSection::before{
    content: '';
    background: url('../img/service/servicebgImage.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 70%;
    top: 60%;
    left: 0;
    right: 0;
    opacity: 11%;
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}
.serviceSection::after {
    content: '';
    background: #eb9f26;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 70%;
    top: 60%;
    left: 0;
    right: 0;
    /* opacity: 50%; */
    z-index: -2;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}
.service-slider-img{
    position: relative;
    width: 100%;
    height: 450px;
}
.service-slider-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.service-text-slider {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    transform: translateY(17%);
    z-index: 5;
    transition: all 0.3s ease-in;
}
.serviceIcon img{
    width: 70px!important;
    filter: invert(97%) sepia(15%) saturate(3470%) hue-rotate(29deg) brightness(109%) contrast(92%);
    position: relative;
    z-index: 5;
}
.service-content{
    margin: 0.7rem 0;
    position: relative;
    z-index: 5;
}
.service-heading-slider h3{
    color: var(--white);
    font-family: var(--bahnschrift);
    font-size: 1.7rem;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
}
.service-slider-text{
    margin-bottom: 1rem;
}
.service-slider-text p{
    color: var(--white);
    font-family: var(--bahnschrift);
    color: var(--white);
    font-size: 1.1rem;
    line-height: 1.3;
}
.servicebox_slider:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( to bottom, rgb(255 255 255 / 15%) 0, rgb(25 25 25 / 88%) 100%, rgb(25 25 25 / 80%) 0);
    /* box-shadow: 0px 16.18px 19.53px 1.47px rgba(25, 25, 25, 0.35); */
    z-index: 1;
    transition: all 0.3s ease-in;
}
.servicebox_slider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    outline: 2px solid var(--white);
    outline-offset: -10px;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease-in;
}
.link-slider-service{
    padding-top: 2rem;
}
.link-slider-service a{
    display: inline-block;
}
.service-text-slider:hover{
    padding: 20px 25px;
    transition: all 0.3s ease-in;
}
.servicebox_slider:hover::after {
    transform: scale(1);
    opacity: 1;
    transition: all 0.3s ease-in;
}
.servicebox_slider:hover .service-text-slider {
    transform: translateY(0);
    transition: all 0.3s ease-in;
}
.link-slider-service a{
    font-family: var(--interTight);
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: 2px;
    font-weight: 500;
}
/********** service section css start **********/

/****************===================
footer section  css start
=================***************/ 
footer {
    background-image: url(../img/footerImg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 70px;
}
footer:after{
    content: '';
    background-color:var(--deepGreen);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 88%;
}
footer .container{
    position: relative;
    z-index: 5;
}
.footer-logo img{
    width: 100%;
}
.footer-head p{
    color: var(--deepyellow);
    text-transform: capitalize;
    font-family: var(--bahnschrift);
    font-size: 1.6rem;
    font-weight: 700;
}
.footer-links ul li{
    margin-bottom: 10px;
}
.footer-links ul li,
.footer-links ul li a{
    font-size: 1rem;
    font-weight: 400;
    color: var(--white);
    text-transform: capitalize;
}

.c-footer-w.footer-links ul li a{
	text-transform:lowercase;
}

.footer-links ul li i{
	color: var(--white);
	margin-right:8px;
}
.importantlink li:nth-child(4) a{
    text-transform: uppercase;
}
.servicelink ul{
    display: flex;
    flex-wrap: wrap;
}
.servicelink ul li{
    width: 50%;
}
.powered img{
    width: 300px;
}
/******** footer section  css end  ***********/

/*************==============================
project section css start 
====================================***********/
.project-section-head{
    padding: 2rem 0;
    z-index: 5;
}
.project-section-head::after {
    position: absolute;
    content: '';
    background-image: url(../img/projectheading_image_png.png);
    width: 60%;
    height: 100%;
    top: 15%;
    right: 0;
    bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}
.project-section-head span{
    color: #213011;
}
.projectBoxImage{
    width: 100%;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
}
.projectBoxImage img{
    width: 100%;
    height: 100%;
}
.project-details{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 0.3s ease-in;
    transform-origin: center
}
.projectBox::before{
    background-color: #213011;
    opacity: 60%;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0);
    transition: all 0.3s ease-in;
    transform-origin: center;
    border-radius: 15px;
}
.projectBox::after{
    content: '';
    position: absolute;
    width: 92%;
    height: 92%;
    border-radius: 15px;
    border: 1px solid var(--white);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0);
    transition: all 0.3s ease-in;
    transform-origin: center
}
.project-content{
    z-index: 5;
    position: relative;
    text-align: center;
}
.project-type p{
    font-family: var(--barlow);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0;
}
.project-text p{
    line-height: 1.2;
    color: var(--white);
    font-family: var(--barlow);
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-bottom: 0;
}
.project-text p span{
    font-weight: 600;
    color: var(--white);
    display: block;
    font-size: 1.6rem;
}
.projectBox:hover::after,
.projectBox:hover::before,
.projectBox:hover .project-details{
    transform: scale(1);
    transition: all 0.3s ease-in;
    transform-origin: center;
}

/******* project section css end ************/

/***************==================
about-us section css start
=====================***********/
.about{
    position: relative;
}
.about::before {
    content: '';
    position: absolute;
    background-image: url(../img/aboutusheading.png);
    background-position: left;
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 70%;
    height: 12.5%;
    left: 6%;
}
.about::after {
    content: '';
    position: absolute;
    background-image: url(../img/aboutBg.png);
    background-position: left;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 83%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.about .row::after{
    content: '';
    background-color: #4a8f00;
    height: 94%;
    width: 80%;
    top: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: 15px;
}
.about .row::before {
    content: '';
    background-image: url(../img/project/truck_png.png);
    background-position: -10% 60%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 90%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 5;
    opacity: 13%;
}
.about-content {
    padding: 2rem 1.2rem 2rem 2rem;
    z-index: 5;
    position: relative;
}
.aboutImg {
    position: relative;
    z-index: 5;
    margin-top: -15%;
}
.aboutImg img{
    width: 100%;
}
/******* about-us section css end ************/

/************================
why choose us section css start
====================***********/
.whychoose::after{
    content: "";
    position: absolute;
    background-image: url(../img/whitebacGround.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: luminosity;
    opacity: 11%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.whychooseText ul li{
    padding-left: 2rem;
    position: relative;
    margin: 0.5rem 0;
}
.whychooseText ul li:after {
    content: '';
    background-color: #5eb700;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;
    top: 8px;
    transform: rotate(45deg);
}
.chooseHead p{
    font-family: var(--barlow);
    font-weight: 800;
    font-size: 1.5rem;
    color: #438200;
    text-transform: capitalize;
    line-height: 1.2;
}
.choosePara p{
    color: var(--black);
    font-family: var(--barlow);
    font-weight: 600;
    font-size: 1.1rem;
}
.whychoose .section-heading{
    position: relative;
    height: 100%;
}
.whychoose .section-heading::before {
    content: '';
    position: absolute;
    background-image: url(../img/why-choose-us.png);
    background-position: left;
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 390%;
    left: -40px;
    bottom: 0;
    margin: auto;
}

/**************why choose us section css end ***************/

/*******************==================
galleryBox section css start
======================***************/
.galleryBox{
    height: 350px;
    width: 100%;
}
.galleryBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* galleryBox section css end  */

/****************====================
conatact-section-details css start
=========================*************/
.contactBlk{
    padding-left: 180px;
    max-width: 1680px;
    position: relative;
    margin: auto;
}
.contactdetails{
    background-image: url(../img/contactBlkBg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.conatact-section-details ul{
    margin: 1rem 0;
}
.conatact-section-details ul li{
    padding: 1rem 0;
}
.conatact-section-details ul li a{
    display: flex;
    gap: 1rem;
    align-items: center;
}
.icon-contact{
    border: 1px solid var(--black);
    width: 40px;
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 50%;
}
.contact-details span{
    color: #438200;
    font-family: var(--barlow);
    font-weight: 800;
    font-size: 1.4rem;
    text-transform: uppercase;
}
.contact-details p{
    margin-bottom: 0;
    font-family: var(--barlow);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.4;
}
.contactBox {
    width: 100%;
    background-color: var(--white);
    padding: 3rem 2rem;
    margin-bottom: -100px;
    position: relative;
    z-index: 8;
}
form{
    margin-top: 1rem;
}
.inputContactBlk{
    width: 100%;
    margin: 0.7rem 0;
    padding: 0.7rem;
    border-radius: 10px;
    border: 3px solid #4c6d29;
    color: var(--black);
    font-family: var(--barlow);
    font-weight: 500;
    font-size: 1.3rem;
}
.inputContactBlk:focus{
    outline: 0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.inputContactBlk::placeholder{
    color: var(--black);
    font-family: var(--barlow);
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: capitalize;
}
.contactBtnSubmit{
    padding: 0.9rem 2.7rem;
    border: 1px solid var(--orange);
    font-family: var(--barlow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    border-radius: 50px;
    color: #305608;
    background-color: var(--orange);
    transition: all 0.3s ease-in;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 5;
}
.contactBtnSubmit:hover{
    transition: all 0.3s ease-in;
    background-color: transparent;
    color: var(--orange);
}
/* end of contact section css  */
/* sticky header css start  */
.sticky .navbar-nav{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    border-radius: 0;
    box-shadow: 2px 2px 7px 0px #93939366;
    transition: all 0.3s ease-in;
    z-index: 10;
    animation: slideDown 0.35s ease-out;
}
.sticky .logo img {
    width: 115px;
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}
/* end of sticky header  */
.banner{
    z-index: 5;
}
.sub-banner-text{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
    left: 0;
    right: 0;
    margin: auto;
}
.sub-banner-text h1{
    color: transparent;
    font-family: var(--barlow);
    font-size: 4.5rem;
    font-weight: 800;
    -webkit-text-stroke: 2px var(--orange);
    text-transform: uppercase;
    position: relative;
    line-height: 1.1;
    margin-bottom: 0;
}
.breadcrumb{
    justify-content: center;
}
.breadcrumb li,
.breadcrumb li a{
    color: var(--white);
    font-family: var(--barlow);
    font-size: 1.5rem;
    line-height: 1.1;
}
.breadcrumb-item.active {
    color: var(--white);
}
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--white);
}

/* contact page css start  */
.contact{
    line-height: 0;
    margin-top: -200px;
}
/* contact page section css end  */

/* project page section css start  */
.projects{
    background-image: url(../img/service/servicebgImage.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.inner-section-margin{
    margin-top: -70px;
    z-index: 1;
}
.projects::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--deepyellow);
    opacity: 90%;
}
.strokeText {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.strokeText span {
    display: block;
    font-size: 10.5rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    font-family: var(--barlow);
    /* text-shadow: -1px -1px 0 #ffc874b5, 1px -1px 0 #ffc874b5, -1px 1px 0 #ffc874b5, 1px 1px 0 #ffc874b5; */
    -webkit-text-stroke: 0.3px var(--white);
    margin-top: -25px;
}
.innersection-top-padding{
    padding-top: 5rem ;
    padding-bottom: 4rem;
}
/* project Box section start  */
.projectBoxInner{
    position: relative;
    z-index: 5;
    background-color: var(--white);
    border-radius: 15px 15px 0 0;
}
.projectImg{
    height: 250px;
    width: 100%;
    overflow: hidden;
    border-radius: 15px 15px 0 15px;
    position: relative;
}
.projectImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.projectName p{
    font-family: var(--barlow);
    color: var(--black);
    font-weight: 800;
    /* text-transform: capitalize; */
    font-size: 1.2rem;
    line-height: 1.2;
}
.project-about {
    padding: 20px 15px 1rem;
    text-align: center;
    height: 300px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.paratextProject p{
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    font-family: var(--barlow);
    margin: 1rem 0;
}
.projectBoxInner .btn-section {
    padding: 1rem 0;
}
.projectBoxInner .btn-section a{
    background-color: var(--green);
    color: var(--white);
    padding: 0.7rem 2rem;
    border: 1px solid var(--green);
    transition: all 0.3s ease-in;
    text-transform: capitalize;
    border-radius: 50px;
}
.projectBoxInner .btn-section a:hover{
    background-color: var(--white);
    color: var(--green);
    transition: all 0.3s ease-in;
}
.logo-img {
    background-color: var(--white);
    padding: 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 120px;
    height: 70px;
}
.logo-img img{
    object-fit: contain;
}
/* past-project sction start  */
.past-project{
    position: relative;
    background-image: url(../img/project/past_project_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* projevt page section css end  */

.section-heading-sub h3{
    text-transform: uppercase;
    color: var(--white);
    font-family: var(--bahnschrift);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
}
.section-heading-sub p{
    font-family: var(--bahnschrift);
    color: var(--deepyellow);
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1;
}
.past_project-image ul{
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}
.imageBox{
    height: 400px;
}
.imageBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}
.past_project-image ul:nth-child(odd) li:first-child{
    width: 60%;
}
.past_project-image ul:nth-child(even) li{
    width: 33.33%;
}
.past_project-image ul:nth-child(odd) li:last-child{
    width: 40%;
}
.content{
    display: none;
}
/* end of project page css  */

/* faq page css start  */
.faq_section{
    background-image: url(../img/faqBlkbg.png);
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.faq_section .strokeText span{
    -webkit-text-stroke-color: #ffc874;
    -webkit-text-stroke-width: 0.7px;
}
.faq-content-header h2{
    font-family: var(--barlow);
    font-weight: 800;
    color: #000000;
    font-size: 1.8rem;
}

.accordion-button,
.accordion-item {
    background-color: transparent!important;
    border: none;
}
.accordion-item{
    padding: 1.2rem 0;
}
.faqBlk_page .row{
    border-bottom: 1px solid #cccccc;
}
.faqBlk_page .accordion-item{
    border-bottom: 1px solid #cccccc;
}
.faqBlk_page .row:last-child{
    border-bottom: none;
}
.accordion-item:last-child{
    border-bottom: none;
}
.accordion-button{
    color: var(--mediumGreen);
    font-family: var(--barlow);
    font-weight: 600;
    font-size: 1.14rem;
}
.accordion-button:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    color: var(--mediumGreen);
}
.accordion-button:not(.collapsed)::after {
    filter: invert(70%) sepia(73%) saturate(825%) hue-rotate(333deg) brightness(102%) contrast(102%);
}
.accordion-button::after {
    filter: invert(70%) sepia(73%) saturate(825%) hue-rotate(333deg) brightness(102%) contrast(102%);
}
.accordion-body {
    padding: 1rem 1.25rem;
    background-color: var(--white);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.29);
}


/**************=================
aboutBox section css start
=================*************/
.aboutBox{
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    border-right: 1px solid #74b431;
    align-items: center;
}
.aboutIcon{
    width: 25%;
    text-align: center;
}
.aboutIcon img{
    filter: invert(76%) sepia(66%) saturate(2850%) hue-rotate(346deg) brightness(97%) contrast(88%);
    width: 70px;
}
.aboutText{
    width: 70%;
    padding-right: 0.7rem;
}
.aboutText p{
    font-family: var(--barlow);
    font-weight: 600;
    color: var(--black);
    text-transform: capitalize;
    font-size: 1.6rem;
    line-height: 1.1;
    margin-bottom: 0;
}
.aboutText p span{
    color: #74b431;
    font-weight: 700;
}
.aboutsection .row .col-md-4:last-child .aboutBox{
    border-right: none;
}
/************ aboutBox section css end  *********/



/* section-heading css start  */
.section-heading{
    position: relative;
    z-index: 5;
}

.section-heading p{
    color: #5f5f5f;
    font-family: var(--bahnschrift);
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.2;
}
.section-heading h2{
    color: #191919;
    font-family: var(--barlow);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.1;
}
.section-heading h2 .headingGreen{
    color: #438200;
    font-family: var(--barlow);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.1;
    text-transform: capitalize;
    display: inline;
}
.section-heading span{
    color: #74b431;
    font-family: var(--bahnschrift);
    font-weight: 200;
    font-size: 1.2rem;
    text-transform: uppercase;
    display: block;
    line-height: 1.1;
}
.section-padding{
    padding: 2.2rem 0;
}
.section-margin{
    margin: 4rem 0;
}
.section-bottom-padding{
    padding-bottom: 1rem;
}
.section-top-padding{
    padding-top: 2rem;
}
.shadowText{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.shadowText span {
    display: block;
    font-size: 10.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--white);
    text-shadow: -1px -1px 0 #ffc874b5, 1px -1px 0 #ffc874b5, -1px 1px 0 #ffc874b5, 1px 1px 0 #ffc874b5;
}
.white-heading p,
.white-heading h2,
.white-heading span{
    color: var(--white);   
}
/* section button css start  */
.btn-section .white_btn{
    padding: 0.9rem 3.5rem;
    border: 1px solid var(--white);
    font-family: var(--barlow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    border-radius:50px ;
    color: var(--black);
    background-color: var(--white);
    transition: all 0.3s ease-in;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 5;
}
.btn-section .white_btn:hover{
    transition: all 0.3s ease-in;
    background-color: transparent;
    color: var(--white);
}
.btn-section .orange_btn{
    padding: 0.9rem 3.5rem;
    border: 1px solid var(--orange);
    font-family: var(--barlow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    border-radius:50px ;
    color: var(--black);
    background-color: var(--orange);
    transition: all 0.3s ease-in;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 5;
}
.btn-section .orange_btn:hover{
    transition: all 0.3s ease-in;
    background-color: transparent;
    color: var(--orange);
}
section .btn-section{
    padding: 2rem 0 1rem;
}
/* section btn css end  */

.section-sub-heading h3{
    font-family: var(--barlow);
    font-weight: 700;
    color: var(--black);
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 1.1;
}
.section-sub-heading h3 span{
    display: block;
    color: #438200;
    font-size: 2.1rem;
}
/**************** section-heading css end ***************/

/****************=================
service section css start
==================***************/
/* service-slider-img section css start  */
.servicebox_slider{
    position: relative;
}

.serviceSection::before{
    content: '';
    background: url('../img/service/servicebgImage.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 70%;
    top: 60%;
    left: 0;
    right: 0;
    opacity: 11%;
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}
.serviceSection::after {
    content: '';
    background: #eb9f26;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 70%;
    top: 60%;
    left: 0;
    right: 0;
    /* opacity: 50%; */
    z-index: -2;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
}
.service-slider-img{
    position: relative;
    width: 100%;
    height: 450px;
}
.service-slider-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.service-text-slider {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    transform: translateY(17%);
    z-index: 5;
    transition: all 0.3s ease-in;
}
.serviceIcon img{
    width: 70px!important;
    filter: invert(97%) sepia(15%) saturate(3470%) hue-rotate(29deg) brightness(109%) contrast(92%);
    position: relative;
    z-index: 5;
}
.service-content{
    margin: 0.7rem 0;
    position: relative;
    z-index: 5;
}
.service-heading-slider h3{
    color: var(--white);
    font-family: var(--bahnschrift);
    font-size: 1.7rem;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
}
.service-slider-text{
    margin-bottom: 1rem;
}
.service-slider-text p{
    color: var(--white);
    font-family: var(--bahnschrift);
    color: var(--white);
    font-size: 1.1rem;
    line-height: 1.3;
}
.servicebox_slider:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( to bottom, rgb(255 255 255 / 15%) 0, rgb(25 25 25 / 88%) 100%, rgb(25 25 25 / 80%) 0);
    /* box-shadow: 0px 16.18px 19.53px 1.47px rgba(25, 25, 25, 0.35); */
    z-index: 1;
    transition: all 0.3s ease-in;
}
.servicebox_slider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    outline: 2px solid var(--white);
    outline-offset: -10px;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s ease-in;
}
.link-slider-service{
    padding-top: 2rem;
}
.link-slider-service a{
    display: inline-block;
}
.service-text-slider:hover{
    padding: 20px 25px;
    transition: all 0.3s ease-in;
}
.servicebox_slider:hover::after {
    transform: scale(1);
    opacity: 1;
    transition: all 0.3s ease-in;
}
.servicebox_slider:hover .service-text-slider {
    transform: translateY(0);
    transition: all 0.3s ease-in;
}
.link-slider-service a{
    font-family: var(--interTight);
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--white);
    letter-spacing: 2px;
    font-weight: 500;
}
/********** service section css start **********/

/****************===================
footer section  css start
=================***************/ 
footer {
    background-image: url(../img/footerImg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 70px;
}
footer:after{
    content: '';
    background-color:var(--deepGreen);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 88%;
}
footer .container{
    position: relative;
    z-index: 5;
}
.footer-logo img{
    width: 100%;
}
.footer-head p{
    color: var(--deepyellow);
    text-transform: capitalize;
    font-family: var(--bahnschrift);
    font-size: 1.6rem;
    font-weight: 700;
}
.footer-links ul li{
    margin-bottom: 10px;
}
.footer-links ul li a{
    font-size: 1rem;
    font-weight: 400;
    color: var(--white);
    text-transform: capitalize;
}
.importantlink li:nth-child(4) a{
    text-transform: uppercase;
}
.servicelink ul{
    display: flex;
    flex-wrap: wrap;
}
.servicelink ul li{
    width: 50%;
}
.powered img{
    width: 300px;
}
/******** footer section  css end  ***********/

/*************==============================
project section css start 
====================================***********/
.project-section-head{
    padding: 2rem 0;
    z-index: 5;
}
.project-section-head::after {
    position: absolute;
    content: '';
    background-image: url(../img/projectheading_image_png.png);
    width: 60%;
    height: 100%;
    top: 15%;
    right: 0;
    bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}
.project-section-head span{
    color: #213011;
}
.projectBoxImage{
    width: 100%;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
}
.projectBoxImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 20%;
}
.project-details{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 0.3s ease-in;
    transform-origin: center
}
.projectBox::before{
    background-color: #213011;
    opacity: 60%;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0);
    transition: all 0.3s ease-in;
    transform-origin: center;
    border-radius: 15px;
}
.projectBox::after{
    content: '';
    position: absolute;
    width: 92%;
    height: 92%;
    border-radius: 15px;
    border: 1px solid var(--white);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0);
    transition: all 0.3s ease-in;
    transform-origin: center
}
.project-content{
    z-index: 5;
    position: relative;
    text-align: center;
}
.project-type p{
    font-family: var(--barlow);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0;
}
.project-text p{
    line-height: 1.2;
    color: var(--white);
    font-family: var(--barlow);
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-bottom: 0;
}
.project-text p span{
    font-weight: 600;
    color: var(--white);
    display: block;
    font-size: 1.6rem;
}
.projectBox:hover::after,
.projectBox:hover::before,
.projectBox:hover .project-details{
    transform: scale(1);
    transition: all 0.3s ease-in;
    transform-origin: center;
}

/******* project section css end ************/

/***************==================
about-us section css start
=====================***********/
.about{
    position: relative;
}
.about::before {
    content: '';
    position: absolute;
    background-image: url(../img/aboutusheading.png);
    background-position: left;
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 70%;
    height: 12.5%;
    left: 6%;
}
.about::after {
    content: '';
    position: absolute;
    background-image: url(../img/aboutBg.png);
    background-position: left;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 83%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.about .row::after{
    content: '';
    background-color: #4a8f00;
    height: 94%;
    width: 80%;
    top: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: 15px;
}
.about .row::before {
    content: '';
    background-image: url(../img/project/truck_png.png);
    background-position: -10% 60%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 90%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 5;
    opacity: 13%;
}
.about-content {
    padding: 2rem 1.2rem 2rem 2rem;
    z-index: 5;
    position: relative;
}
.aboutImg {
    position: relative;
    z-index: 5;
    margin-top: -15%;
}
.aboutImg img{
    width: 100%;
}
/******* about-us section css end ************/

/************================
why choose us section css start
====================***********/
/* .whychoose::after{
    content: "";
    position: absolute;
    background-image: url(../img/whitebacGround.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: luminosity;
    opacity: 11%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}
.whychooseText ul li{
    padding-left: 2rem;
    position: relative;
    margin: 0.5rem 0;
}
.whychooseText ul li:after {
    content: '';
    background-color: #5eb700;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;
    top: 8px;
    transform: rotate(45deg);
}
.chooseHead p{
    font-family: var(--barlow);
    font-weight: 800;
    font-size: 1.5rem;
    color: #438200;
    text-transform: capitalize;
    line-height: 1.2;
}
.choosePara p{
    color: var(--black);
    font-family: var(--barlow);
    font-weight: 600;
    font-size: 1.1rem;
}
.whychoose .section-heading{
    position: relative;
}
.whychoose .section-heading::before {
    content: '';
    position: absolute;
    background-image: url(../img/why-choose-us.png);
    background-position: left;
    top: 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 50%;
    height: 50%;
    left: 4%;
    bottom: 0;
    margin: auto;
} */

/**************why choose us section css end ***************/

/*******************==================
galleryBox section css start
======================***************/
.galleryBox{
    height: 350px;
    width: 100%;
}
.galleryBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* galleryBox section css end  */

/****************====================
conatact-section-details css start
=========================*************/
.contactBlk{
    padding-left: 180px;
    max-width: 1680px;
    position: relative;
    margin: auto;
}
.contactdetails{
    background-image: url(../img/contactBlkBg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.conatact-section-details ul{
    margin: 1rem 0;
}
.conatact-section-details ul li{
    padding: 1rem 0;
}
.conatact-section-details ul li a{
    display: flex;
    gap: 1rem;
    align-items: center;
}
.icon-contact{
    border: 1px solid var(--black);
    width: 40px;
    height: 40px;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 50%;
}
.contact-details span{
    color: #438200;
    font-family: var(--barlow);
    font-weight: 800;
    font-size: 1.4rem;
    text-transform: uppercase;
}
.contact-details p{
    margin-bottom: 0;
    font-family: var(--barlow);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.4;
}
.contactBox {
    width: 100%;
    background-color: var(--white);
    padding: 3rem 2rem;
    margin-bottom: -100px;
    position: relative;
    z-index: 8;
}
form{
    margin-top: 1rem;
}
.inputContactBlk{
    width: 100%;
    margin: 0.7rem 0;
    padding: 0.7rem;
    border-radius: 10px;
    border: 3px solid #4c6d29;
    color: var(--black);
    font-family: var(--barlow);
    font-weight: 500;
    font-size: 1.3rem;
}
.inputContactBlk:focus{
    outline: 0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.inputContactBlk::placeholder{
    color: var(--black);
    font-family: var(--barlow);
    font-size: 1.3rem;
    font-weight: 500;
    text-transform: capitalize;
}
.contactBtnSubmit{
    padding: 0.9rem 2.7rem;
    border: 1px solid var(--orange);
    font-family: var(--barlow);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    border-radius: 50px;
    color: #305608;
    background-color: var(--orange);
    transition: all 0.3s ease-in;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 5;
}
.contactBtnSubmit:hover{
    transition: all 0.3s ease-in;
    background-color: transparent;
    color: var(--orange);
}
/* end of contact section css  */
/* sticky header css start  */
.sticky .navbar-nav{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    border-radius: 0;
    box-shadow: 2px 2px 7px 0px #93939366;
    transition: all 0.3s ease-in;
    z-index: 10;
    animation: slideDown 0.35s ease-out;
}
.sticky .logo img {
    width: 115px;
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}
/* end of sticky header  */
.banner{
    z-index: 5;
}
.sub-banner-text{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 20%;
    left: 0;
    right: 0;
    margin: auto;
}
.sub-banner-text h1{
    color: transparent;
    font-family: var(--barlow);
    font-size: 4.5rem;
    font-weight: 800;
    -webkit-text-stroke: 2px var(--orange);
    text-transform: uppercase;
    position: relative;
    line-height: 1.1;
    margin-bottom: 0;
}
.breadcrumb{
    justify-content: center;
}
.breadcrumb li,
.breadcrumb li a{
    color: var(--white);
    font-family: var(--barlow);
    font-size: 1.5rem;
    line-height: 1.1;
}
.breadcrumb-item.active {
    color: var(--white);
}
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--white);
}

/* contact page css start  */
.contact{
    line-height: 0;
    margin-top: -200px;
}
/* contact page section css end  */

/* project page section css start  */
.projects{
    background-image: url(../img/service/servicebgImage.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.inner-section-margin{
    margin-top: -70px;
    z-index: 1;
}
.projects::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--deepyellow);
    opacity: 90%;
}
.strokeText {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}
.strokeText span {
    display: block;
    font-size: 10.5rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    font-family: var(--barlow);
    /* text-shadow: -1px -1px 0 #ffc874b5, 1px -1px 0 #ffc874b5, -1px 1px 0 #ffc874b5, 1px 1px 0 #ffc874b5; */
    -webkit-text-stroke: 0.3px var(--white);
    margin-top: -25px;
}
.innersection-top-padding{
    padding-top: 5rem ;
    padding-bottom: 4rem;
}
/* project Box section start  */
.projectBoxInner{
    position: relative;
    z-index: 5;
    background-color: var(--white);
    border-radius: 15px 15px 0 0;
}
.projectImg{
    height: 250px;
    width: 100%;
    overflow: hidden;
    border-radius: 15px 15px 0 15px;
    position: relative;
}
.projectImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.projectName p{
    font-family: var(--barlow);
    color: var(--black);
    font-weight: 800;
    /* text-transform: capitalize; */
    font-size: 1.2rem;
    line-height: 1.2;
}
.project-about {
    padding: 20px 15px 1rem;
    text-align: center;
    height: 300px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.paratextProject p{
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
    font-family: var(--barlow);
    margin: 1rem 0;
}
.projectBoxInner .btn-section {
    padding: 1rem 0;
}
.projectBoxInner .btn-section a{
    background-color: var(--green);
    color: var(--white);
    padding: 0.7rem 2rem;
    border: 1px solid var(--green);
    transition: all 0.3s ease-in;
}
.projectBoxInner .btn-section a:hover{
    background-color: var(--white);
    color: var(--green);
    transition: all 0.3s ease-in;
}
.logo-img {
    background-color: var(--white);
    padding: 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 120px;
    height: 70px;
}
.logo-img img{
    object-fit: contain;
}
/* past-project sction start  */
.past-project{
    position: relative;
    background-image: url(../img/project/past_project_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* projevt page section css end  */

.section-heading-sub h3{
    text-transform: uppercase;
    color: var(--white);
    font-family: var(--bahnschrift);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}
.section-heading-sub p{
    font-family: var(--bahnschrift);
    color: var(--deepyellow);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1;
}
.past_project-image ul{
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}
.imageBox{
    height: 400px;
}
.imageBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}
.past_project-image ul:nth-child(odd) li:first-child{
    width: 60%;
}
.past_project-image ul:nth-child(even) li{
    width: 33.33%;
}
.past_project-image ul:nth-child(odd) li:last-child{
    width: 40%;
}
.content{
    display: none;
}
/* end of project page css  */

/* faq page css start  */
.faq_section{
    background-image: url(../img/faqBlkbg.png);
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.faq_section .strokeText span{
    -webkit-text-stroke-color: #ffc874;
    -webkit-text-stroke-width: 0.7px;
}
.faq-content-header h2{
    font-family: var(--barlow);
    font-weight: 800;
    color: #000000;
    font-size: 1.8rem;
}

.accordion-button,
.accordion-item {
    background-color: transparent!important;
    border: none;
}
.accordion-item{
    padding: 1.2rem 0;
}

.accordion-item:last-child{
    border-bottom: none;
}
.accordion-button{
    color: var(--mediumGreen);
    font-family: var(--barlow);
    font-weight: 600;
    font-size: 1.14rem;
}
.accordion-button:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    color: var(--mediumGreen);
}
.accordion-button:not(.collapsed)::after {
    filter: invert(70%) sepia(73%) saturate(825%) hue-rotate(333deg) brightness(102%) contrast(102%);
}
.accordion-button::after {
    filter: invert(70%) sepia(73%) saturate(825%) hue-rotate(333deg) brightness(102%) contrast(102%);
}
.accordion-body {
    padding: 1rem 1.25rem;
    background-color: var(--white);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.29);
}

 
/* faq page css end  */

/* service page css start  */
.service_section{
    background-image: url(../img/service/service_page_section_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.service_section .strokeText span {
    -webkit-text-stroke: 0.5px #ffc874;
}
.content-para p span{
    color: var(--mediumGreen);
    font-weight: 700;
}
.imgBox img{
    width: 100%;
}
.serviceBox-header p{
    font-size: 1.8rem;
    text-transform: uppercase;
    font-family: var(--bahnschrift);
    color: #4c9300;
    font-weight: 700;
    position: relative;
}
.serviceBox-header p::after{
    position: absolute;
    content: '';
    background-color: #fba832;
    height: 3px;
    width: 15%;
    bottom: 0;
    left: 0;
}
.service_full_section .row:nth-child(even){
    flex-direction: row-reverse;
}
/* service page css end  */
/* earthworks section css :start  */
.earthworks_service{
    background-image: url(../img/earthworks/earthworks_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.serviceBox-header span{
    display: block;
    color: #000000;
    font-family: var(--barlow);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
}
.earthworks_service{
    background-image: url(../img/earthworks/earthservice.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.earthworksBox {
    padding-left: 60px;
    height: 250px;
    width: 100%;
    padding: 20px 25px 20px 99px;
    position: relative;
    display: flex;
    align-items: center;
}
.earth_one:after{
    content: '';
    background-image: url(../img/earthworks/earth_one.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.earthBox-content{
    position: relative;
    z-index: 5;
}
/* .earth_one{
    background-image: url(../img/earthworks/earth_one.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 220px;
    position: relative;
} */
.box-haed p {
    color: #000000;
    font-family: var(--barlow);
    font-size: 1.1rem;
    text-transform: capitalize;
    font-weight: 800;
    margin-bottom: 0.6rem;
}
.earthBox-content .paratext  p{
    font-size: 0.9rem;
}
.earth_two:after{
    content: '';
    background-image: url(../img/earthworks/earth_two.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.earth_three:after{
    content: '';
    background-image: url(../img/earthworks/earth_three.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.earth_four:after{
    content: '';
    background-image: url(../img/earthworks/earth_four.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.earth_five:after{
    content: '';
    background-image: url(../img/earthworks/earth_five.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.earth_Six:after{
    content: '';
    background-image: url(../img/earthworks/earth_six.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.earth_seven:after{
    content: '';
    background-image: url(../img/earthworks/earth_seven.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.facilityBox{
    background-image: url(../img/earthworks/facitity-section-bg.jpg);
    position: relative;
    height: 100%;
}
.facility-content{
    padding: 25px  35px 25px 35px;
    position: relative;
    height: 100%;
}
.facilityBox_green::after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    height: 100%;
    background-color: #6da450;
}
.facilityBox_orange::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    height: 100%;
    background-color: #f0a356;
}
.facility-content_green:before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 15%;
    height: 10px;
    background-color: #63a122;
}
.facility-content_green::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15%;
    height: 10px;
    background-color: #63a122;
}
.facility-content_orange:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 15%;
    height: 10px;
    background-color: #f4922f;
}
.facility-content_orange::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 15%;
    height: 10px;
    background-color: #f4922f;
}

/* earthworks css section end  */

/* landscaping-service page css start  */
.landscaping-service{
    background-image: url(../img/landscaping/landscapingaboutbg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.landscapin_service{
    background-image: url(../img/landscaping/landscapingService_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.service_content_landscaping{
    background-color: #ffffff;
    width: 90%;
    margin-left: auto;
    position: relative;
    margin-top: -80px;
    padding: 25px 20px;
    height: 400px;
    border-radius: 15px 0 15px 15px;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.48);
    text-align: right;
}
.greenText{
    color: var(--green);
}
.sub-para p{
    font-weight: 500;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.6rem;
}
.rightul li{
    margin: 0.6rem 0 0rem;
    padding-right: 25px ;
    position: relative;
}
.rightul li:after{
    content: '';
    background-image: url(../img/earthworks/yellowarroe.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 15px;
    height: 15px;
    right: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.galley_section_bg{
    background-image: url(../img/gallery_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
/* landscaping-service page css end  */

/* gallery page css start  */
/* Main CSS */
.grid-wrapper > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.grid-wrapper > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    object-position: 50% 10%;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-auto-rows: 350px;
	grid-auto-flow: dense;
}
.grid-wrapper .wide {
	grid-column: span 2;
}
.grid-wrapper .tall {
	grid-row: span 2;
}
.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}
/* gallery page css end  */

/* planthire_about css start  */
.planthire_about{
    background-image: url(../img/plant_hire/plantHireAboutBg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.plantHire_service{
    background-image: url(../img/plant_hire/plantHireService.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.plantService_image{
    width: 100%;
    height: 250px;
}
.plant_hire_service_box{
    position: relative;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 12px 0px rgba(25, 25, 25, 0.29);
}
.plantService_image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}
.plantService_content{
    padding: 20px 10px;
    height: 270px;
}
.plantBox-icon{
    width: 100px;
    height: 100px;
    margin: auto;
    position: relative;
    margin-top: -50px;
}

.plantBox-icon img{
    width: 100%;
}
.plantBox-About{
    background-color: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(25, 25, 25, 0.29);
    padding: 25px 20px 25px 80px;
    border-radius: 15px;
    position: relative;
    z-index: 5;
    height: 100%;
}
.yellowBox:before{
    content: '';
    position: absolute;
    left: 0;
    width: 10%;
    height: 100%;
    top:0;
    bottom: 0;
    background-color: #edce3f;
    z-index: 5;
    border-radius: 15px 0 0 15px;
}  
.BlueBox:before{
    content: '';
    position: absolute;
    left: 0;
    width: 10%;
    height: 100%;
    top:0;
    bottom: 0;
    background-color: #437085;
    z-index: 5;
    border-radius: 15px 0 0 15px;
}  
.yellowBox::after {
    content: '';
    position: absolute;
    right: -20px;
    width: 25px;
    height: 25px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    /* background-color: #fff; */
    background-image: url(../img/plant_hire/arrow.png);
    /* box-shadow: 0px 0px 12px 0px rgba(25, 25, 25, 0.29); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -1;
    /* transform: rotate(45deg); */
    filter: drop-shadow(4px 0 2px rgba(25, 25, 25, 0.29));
}

/* planthire_about css end   */

/* pavement css start here    */
.pavement_about_txt{
    position: relative;
    padding-left: calc((100% - 1170px)/ 2 + 15px);
}
.pavement_service{
    background-image: url(../img/pavment/pavementAboutBg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.pavement-Service_box {
    padding: 20px;
    position: relative;
    filter: drop-shadow(2px 1px 6px rgba(25, 25, 25, 0.29));
}
.pavementContentBox {
    background-color: var(--white);
    width: 100%;
    position: relative;
    height: 340px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.icon {
    padding: 0 20px 10px;
}
.icon img{
    width: 65px;
}
.polygone:after{
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    bottom: 0;
    position: absolute;
    z-index: -1;
}
.skyPolygone::after{
    background-image: url(../img/pavment/SkyHexagonebg.png);
}
.orangePolygone::after{
    background-image: url(../img/pavment/orangeHexagonebg.png);
}
.yellowPolygone::after{
    background-image: url(../img/pavment/yellowHexagonebg.png);
}
/* pavement css end  */

/* graoundWorks css start  */
.graoundWorks{
    background-image: url(../img/groundworks/groundWorks_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.groundWorks_service{
    background-image: url(../img/groundworks/groundWorks_service_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.groundWorks_box{
    padding: 20px;
    position: relative;
}
.groundWorks_box_service{
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0px 0px 12px 0px rgba(25, 25, 25, 0.29);
    padding: 30px 20px;
    text-align: right;
    position: relative;
    z-index: 1;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}
.groundWorks_box:before{
    content: '';
    position: absolute;
    right: 0;
    height: 85%;
    width: 85%;
    top: 0;
    border-radius: 10px;
    z-index: 1;
}
.groundWorks_box::after{
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    height: 85%;
    width: 85%;
    bottom: 0;
    z-index: 3;
}
.YellowG::before{
    background-color: #f2b013;
}
.YellowG::after{
    background-image: url(../img/groundworks/yellowArrow.png);
}
.RedG::before{
    background-color: #ff6952;
}
.RedG::after{
    background-image: url(../img/groundworks/redArrow.png);
}
.BlueG::before{
    background-color: #0c88fa;
}
.BlueG::after{
    background-image: url(../img/groundworks/BlueArrow.png);
}
.lightGrayBlueG::before{
    background-color: #587297;
}
.lightGrayBlueG::after{
    background-image: url(../img/groundworks/grayBluebg.png);
}
.parsiveBlueG::before{
    background-color: #0c6881;
}
.parsiveBlueG::after{
    background-image: url(../img/groundworks/parsiveBlueArrow.png);
}
.greenG::before{
    background-color: #7fa53a;
}
.greenG::after{
    background-image: url(../img/groundworks/greenArrow.png);
}
.blackG::before{
    background-color: #383c45;
}
.blackG::after{
    background-image: url(../img/groundworks/blackArrow.png);
}

/* graoundWorks css end  */

/****** centerParcs page css start  *****/
.centerParcs{
    background-image:url(../img/centerPars/CenterParsbg.jpg) ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: relative;
}
.sub-green-heading h2{
    font-size: 1.7rem;
    color: #4c9300;
    font-family: var(--barlow);
}
.service_centerParcs{
    background-image:url(../img/centerPars/centerparcs_service_bg.jpg) ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: relative;
}
.serviceCom {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.46);
    padding: 1.4rem 0.3rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-top: -50px;
    padding-top: 3rem;
    height: 290px;
}
.serviceCom::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15px;
}

.numberPng {
    position: relative;
    width: 70%;
    margin: auto;
    padding: 10px;
    height: 77px;
    /* margin-top: -40px; */
}
.numberPng:after{
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.numberPng:after{
    background-image:url(../img/centerPars/service_one.png) ;
}
.numberPngTwo:after{
    background-image:url(../img/centerPars/service_two.png) ;
}
.numberPngThree:after{
    background-image:url(../img/centerPars/service_three.png) ;
}
.numberPngFour:after{
    background-image:url(../img/centerPars/service_four.png) ;
}
.numberPngFive:after{
    background-image:url(../img/centerPars/service_five.png) ;
}
.numberPngSix:after{
    background-image:url(../img/centerPars/service_six.png) ;
}
.numberPngSeven:after{
    background-image:url(../img/centerPars/service_seven.png) ;
}
.numberPngEight:after{
    background-image:url(../img/centerPars/service_eight.png);
}
.numberPngNine:after{
    background-image:url(../img/centerPars/service_nine.png);
}
.numberPngTen:after{
    background-image:url(../img/centerPars/service_ten.png);
}
.serviceOne:after{
    background-color: #4fbdb7;
}
.serviceTwo:after{
    background-color: #ffbc57;
}
.serviceThree:after{
    background-color: #fb8068;
}
.serviceFour:after{
    background-color: #8d73b0;
}
.serviceFive:after{
    background-color: #78c4d2;
}
.serviceSix:after{
    background-color: #72838d;
}
.serviceSeven:after{
    background-color: #85d481;
}
.serviceEight:after{
    background-color: #7fc1fe;
}
.serviceNine:after{
    background-color: #f88082;
}
.serviceTen:after{
    background-color: #3169a7;
}



.numberPng p {
    color: #ffffff;
    font-family: var(--barlow);
    position: relative;
    z-index: 5;
    font-weight: 800;
    margin-bottom: 0;
    font-size: 1.8rem;
    line-height: 1.5;
}
.servIcon{
    padding: 10px;
    text-align: center;
}
.servIcon img{
    width: 50px;
    margin: auto;
    position: relative;
}
/* centerParcs page css end  */

/* about page css start  */
.our-journey .strokeText span {
    display: block;
    font-size: 8.5rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    font-family: var(--barlow);
    /* text-shadow: -1px -1px 0 #ffc874b5, 1px -1px 0 #ffc874b5, -1px 1px 0 #ffc874b5, 1px 1px 0 #ffc874b5; */
    -webkit-text-stroke: 0.3px #4c9300;
    margin-top: -20px;
}
.imageBox {
    box-shadow: 8.817px 12.135px 16px 0px rgba(25, 25, 25, 0.45);
    width: 100%;
    transform: skew(-8deg);
    overflow: hidden;
    height: 450px;
    margin-top: -75px;
    position: relative;
}
.imageBox img {
    width: 100%;
    transform: skew(8deg) scale(1.5);
}
.our-journey .row{
    position: relative;
} 
.our-journey .row:after {
    content: '';
    width: 80%;
    right: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    background-color: #4c9300;
    z-index: -1;
    transform: skewX(-8deg);
    box-shadow: 7.053px 9.708px 12px 0px rgba(25, 25, 25, 0.35);
}
.about_content{
    padding-left: 2.8rem;
    padding-right: 2rem;
}
.yellowPara p{
    color: #ffa010;
    font-weight: 600;
}
.our-journey .row{
    margin-top: 4rem;
}
/* our team section css start  */
.teamBox{
    padding: 20px;
    position: relative;
}
.teamBox::before {
    position: absolute;
    content: "";
    background-image: url(../img/about/arrow_up.png);
    top: 0;
    right: 0;
    width: 100%;
    height: 50%;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.teamBox::after {
    position: absolute;
    content: "";
    background-image: url(../img/about/arrow_down.png);
    bottom: 10%;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
.teamYellowBox {
    background-color: #fde760;
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
    height: 300px;
    position: relative;
    z-index: 1;
}
.number_point p {
    color: #4c9300;
    font-family: var(--bahnschrift);
    font-size: 3.9rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.1;
    text-align: right;
    margin-right: -40px;
}

.team-expartBox {
    background-color: #fff;
    box-shadow: 0px 0px 12px 0px rgba(25, 25, 25, 0.35);
    height: 100%;
}
.expartsImage {
    background-color: #faf1e8;
    clip-path: polygon(0 0, 100% 0%, 100% 84%, 0% 100%);
    padding: 20px 25px 35px;
    text-align: center;
    height: 278px;
}
.expartsImageBox{
    height: 278px;
}
.expartsImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.projectName span{
    font-family: var(--bahnschrift);
    font-size: 1.2rem;
    font-weight: 500;
    color: #4c9300;
    position: relative;
}
.projectName span:after {
    content: '';
    background-color: #ffa010;
    position: absolute;
    bottom: -8px;
    width: 70px;
    height: 2px;
    left: 0;
    right: 0;
    margin: auto;
}
.name p{
    margin-bottom: 0.3rem;
}
.expart-content{
    padding: 1.3rem 1rem;
    text-align: center;
}
.expart-content .paratext{
    margin: 0.7rem 0;
}
.expart-content p a{
    color: var(--black);
    transition: all 0.3s ease-in;
}
.expart-content p a:hover{
    color: #4c9300;
    transition: all 0.3s ease-in;
}
.quaoteBoxSection{
    background-image: url(../img/about/background_image_yellow.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 25px;
    text-align: center;
}
.quaotePara p{
    color: var(--black);
    font-family: var(--barlow);
    font-size: 1.5rem;
    text-transform: uppercase;
    font-style: italic;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 0;
}
.green-stroke span{
    -webkit-text-stroke-width: 0.6px;
    -webkit-text-stroke-color: #4c930075;
}

/* future plan section start  */
.plan_div .plan_content_box:nth-child(even){
    margin: 0 auto 0 0;
    flex-direction:row-reverse;
}

.plan_div .plan_content_box:nth-child(even) .plan_content{
    text-align:left;
}

.plan_div .plan_content_box:nth-child(even) .plan_content ul li{
    padding-right:0;
    padding-left:20px;
}

.plan_div .plan_content_box:nth-child(even) .plan_content ul li:after{
    right:inherit;
    left:0;
}

.plan_div .plan_content_box:nth-child(even) .plan_header:before{
    background:#4c9300;
}

.plan_div .plan_content_box:nth-child(even) .plan_header:after{
    left:-10px;
    right:inherit;
    background:#4c9300;
}
    
.plan_div .plan_content_box:last-child .plan_header:before{
    background:#74aee0;
}

.plan_div .plan_content_box:last-child .plan_header:after{
    right:-10px;
    background:#74aee0;
}
    
    
    
    
.plan_content_box{
    width: 75%;
    padding: 25px 20px;
    position: relative;
}
/* .plan_image{
    width: 25%;
}
.plan_image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 100%;
} */
.plan_content{
    /* width: 75%; */
    text-align: right;
    position: relative;
    height: 215px;
    display: flex;
    flex-direction: column;
    margin:71px 0 0;
}
.plan_header{
    position:relative;
}
.plan_header:before{
    content: '';
    background-color: var(--deepyellow);
    height: 4px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.plan_header:after{
    content: '';
    background-color: var(--deepyellow);
    height: 13px;
    width: 13px;
    border-radius:50%;
    position: absolute;
    bottom: -5px;
    right: -10px;
}

.plan_header p {
    font-size: 1.9rem;
    font-weight: 700;
    font-family: var(--bahnschrift);
    position: relative;
    margin-bottom: 0;
    padding-bottom: 1rem;
}

.plan_content ul{ padding-top:12px; }

.plan_content ul li {
    position:relative;
    font-size:16px;
    font-weight: 500;
    font-family: var(--barlow);
    margin-bottom:10px;
    padding-right:20px;
}

.plan_content ul li:after{
    content: '';
    background-color:#2a41ff;
    height: 10px;
    width: 10px;
    position: absolute;
    transform:rotate(45deg);
    top:0;
    bottom: 0;
    right: 0;
    margin:auto 0;
}


.plan_content_box{
    max-width:835px;
    margin:0 0 0 auto;
    display:flex;
}

/* about page css end  */

/********=============== closeBtn  css start  ===============******/
.closeBtn {
    position: absolute;
    right: 10%;
    top: 3%;
    font-size: 1.8rem;
    display: none;
}
.bannerOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, #073f0e96, transparent 80%),
          linear-gradient(to right, #00000026, transparent 80%);
    display: none;
}
.menuBtn{
    display: none;
}
/********=============== closeBtn  css end ===============******/