:root {

    --white: #fff;

    --light-green: #00be9c;

    --green: #0F6C00;

    --yellow: #FDFF8B;

    --light-gray: #646464;

    --grey: #646464;

  }





  .about-as-main {

    width: 100%;

    background-color: var(--light-green);

    padding: 180px 0px 88px;

    /* text-align: center; */

}

.main-heading {

    font-size: 48px;

    color: var(--white);

}

.about-banner-img{

    width: 100%;

    /* margin-top: 59px; */

}

.about-banner-details{

    display:flex;
}

.about-banner-img-left{

    width:50%;
}

.about-banner-right{

    width:50%;
    /* background:var(--white); */
}

.our-story-inner .cs-row{

    margin: unset;

}

.our-story-inner .c-6{

    width: 50%;

}

.our-story-inner .our-images img{

    max-width: 100%;

}

.story-info-head {

    width: 100%;

    display: flex;

    align-items: center;

    position: relative;

    margin-bottom: 39px;

}

.let-begin {

    margin-top: -130px;

    background-color: var(--green);

    color: #fff;

    padding: 20px 50px;

    position: relative;

    border-radius: 40px;

    margin-left: 30px;

}

.let-begin::after {

    width: 0;

    content: "";

    height: 0;

    border-left: 20px solid transparent;

    border-right: 20px solid transparent;

    border-top: 40px solid var(--green);

    transform: rotate(425deg);

    left: -24px;

    position: absolute;

    top: 37px;

}

.let-go-info p{

    color: white;

    font-size: 24px;

    margin-bottom: 20px;
    text-align:left;

}


.story-info {

    width: 100%;

}

.benifits-section {

    width: 100%;

    padding: 70px 0px;

    background-color: var(--green);

}

.benifits-section .oursection-header h2{

    color: #fff;

}



.benifits-section .cs-row{

    margin-top: 102px;

}

.benifits-section .Benefits-left-col p{

    color: var(--white);    

    font-size: 24px;

    line-height: 30px;

}



.Benefits-left-col {

    width: 100%;

}

.Benefits-left-col  ul{

    width:100%;

    margin-top: 20px;

    padding-left: 20px;

}

.Benefits-left-col  ul li{

    color: #fff;

    font-size: 20px;

    position: relative;

    line-height: 30px;

    margin-bottom: 10px;

    margin-right: 30px;



}

.Benefits-left-col  ul li::after{

    content: "";

    position: absolute;

    width: 5px;

    height: 5px;

    background-color: #fff;

    left: -15px;

    border-radius: 100%;

    top: 12px;

}

.Benefits-right-col{

    text-align: right;

}

.gallery-image{

    width: 100%;

    display: flex;

    flex-wrap: wrap;

}

.gallery-image .about-gallery{

    width: 50%;

}

.gallery-image .about-gallery img{

    width: 100%;

    height: 100%;

}

.about-image-galary{

    width: 100%;

    background-color: var(--yellow);

    padding: 100px 70px;

}

.heros-images {

    width: 100%;

    display: flex;

    /* margin-top: 70px; */

    padding: 50px;

    flex-wrap: wrap;

}

/* .hero-img {

    width: calc(100% / 4 - -10px);

} */

.hero-img img{

    width: 100%;

}

.hero-img {

    width: calc(100% / 4  - 40px);

    margin: 20px;

    position: relative;

}



.hero-img .effect-img img {

    width: 140px;

    bottom: 4px;

    position: absolute;

}

.hero-img .effect-img {

    position: absolute;

    width: 100%;

    height: 100%;

    content: "";

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    

    top: 0;

    visibility: hidden;

    opacity: 0;

    transition: all 0.5s ease;

}

.about-image-inner .oursection-header h2 {

    color: var(--light-green);

    margin-bottom: 90px;

}

.hero-img:nth-child(1) .effect-img{

    background-color: #FDFF8B;

}

.hero-img:nth-child(2) .effect-img{

    background-color: #0F6C00;

    

}



.hero-img:nth-child(3) .effect-img{

    background-color: #FDFF8B;

    

}



.hero-img:nth-child(4) .effect-img{

    background-color: #0F6C00;

    

}

.hero-img:nth-child(5) .effect-img{

    background-color: var(--green);

    

}

.hero-img:nth-child(6) .effect-img{

    background-color: #FDFF8B;

    

}

.hero-img:nth-child(7) .effect-img{

   
    background-color: #FDFF8B;
    

}

.hero-img:nth-child(8) .effect-img{

    background-color: var(--green); 
    
    

}

.hero-img:hover .effect-img{

    visibility: visible;

    opacity: 1;



}

/*  */

section.hierarhical-main {

    width: 100%;

    padding: 80px 0px;

    position: relative;

}



.hierarhical-inner {

    width: 100%;

    text-align: center;

}

.hierarhical-structure .oursection-header {

    width: 100%;

    margin-bottom: 60px;

    color: #000;

}

.hierarhical-structure .oursection-header h2 {

    color: #262626;

}

.our-images{

    display: flex;

    flex-wrap: wrap;

}

/* 1200px */

@media screen and (max-width:1600px){

    .story-info {

        width: 100%;
    }

    .story-info-head {

        margin-bottom: 5px;

    }

    .let-go-info p {

        margin-bottom: 13px;

    }

    .heros-images {

        padding: 16px;

    }

}

@media screen and (max-width:1440px){



    .let-go-info p {

        

        font-size: 26px;

    }

    .let-begin {
        
        padding: 20px 30px;
    }

    .about-as-main {
        padding: 150px 0px 88px;
    }

    .about-banner-img-left img{

        padding-top:4rem;
        max-width:80%;
    }




}



@media screen and (max-width:1366px){



    .main-heading {

        font-size: 30px;

    }



    .let-go-info p {

        

        margin-bottom: 8px;

        font-size:20px;

    }

    .side-img {

        

        z-index: -1;

    }

    

    .main-heading h1{

        text-align:left;

    }

}

@media screen and (max-width:1200px){

    .about-as-main {
        padding: 120px 0px 40px;
    }

    .about-banner-right{

        padding-left:20px;
    }

  
}


@media screen and (max-width:1024px){



    .let-go-info p {

        margin-bottom: 10px;

        font-size: 16px;

    }

    .let-begin h2{

        font-size: 19px;

    }

    .about-banner-img-left img{

        max-width:90%;
        padding-top:5rem;
    }



    .benifits-section .Benefits-left-col p {

        

        font-size: 20px;

        line-height: 25px;

    }



    .Benefits-left-col ul li {

        

        font-size: 18px;

        line-height: 25px;

    }



    .benifits-inner h2{



        font-size: 40px;

        margin-bottom:40px;

    }



    .benifits-section .cs-row {


        margin-top: 60px;

    }



    .hierarhical-structure h2{



        font-size:40px;

    }



    .benifits-section {

        

        padding: 50px 0px;

    }



    section.hierarhical-main {

        

        padding: 60px 0px;

    }



    .about-image-galary {

        

        padding: 60px 40px;

    }

    .hero-img {

        width: calc(100% / 4  - 12px);

        margin: 6px;

      }

      .hero-img .effect-img img {

        width: 80px;

    }

    .about-image-inner .oursection-header h2 {

        margin-bottom: 30px;

    }

    

}



@media screen and (max-width:991px){



    .our-story-section .cs-row{



        display:flex;

        flex-direction:column;

    }



    .our-story-inner .c-6{



        width:100%;

    }



    .benifits-section .cs-row{



        display:flex;

        flex-direction:column-reverse;

    }



    .benifits-inner .c-6{

        padding: 0px 15px;

        width:100%;

    }



    .Benefits-right-col {

        

        margin-bottom: 50px;

    }



    .our-images img{



        width:100%;

    }



    .let-begin::after {

      

        left: -24px;

        top: 33px;

    }



    .about-image-galary {

        padding: 50px 25px;

    }



    .about-image-inner .oursection-header h2 {

        

        margin-bottom: 50px;

    }



    .about-image-galary .oursection-header h2{



        font-size:40px;

    }

}



@media screen and (max-width:768px){



    .side-img {

        top: 70px;

        position: absolute;

        left: -2px;

        width: 21%;

    }

    .about-as-main .about-banner-img-left{

        text-align:center !important; 
    }

    .about-banner-img-left img{

        max-width:80%;
        padding-top:3rem;
    }



    .let-go-info p {

        font-size: 20px;

    }

    .about-banner-img-left img{

        max-width:80%;
    }



    .about-image-inner .cs-container {

        padding: 0px 50px;

    }

    .hero-img {

        width: calc(100% / 3  - 12px);

    }   

    .about-banner-details{

        display:flex;
        flex-direction:column;
    }

    .about-banner-img-left{

        width:100%;
        margin-bottom:2rem;
    }

    .about-banner-right{

        width:100%;
    }

}

@media screen and (max-width : 575px){

    .about-as-main {
        padding: 90px 0px 40px;
    }

     .main-heading {

        font-size: 23px;

        line-height: 39px;

    }

    .about-banner-right{

        padding-left:0px;
    }
    

    .let-begin {

        padding: 20px 25px;

    }

    .let-begin {

        margin-top: -137px;

    }

    .about-image-inner .cs-container {

        padding: 0px 10px;

    }

    .gallery-image .about-gallery {

        width: 100%;

        margin-bottom: 10px;

    }

    .hero-img {

        width: calc(100% / 2  - 12px);

    }

    .let-go-info p {

        font-size: 18px;

    }

    .main-heading img{

        display:flex;
        justify-content:center;
        align-items:center;
    }

    .benifits-section .Benefits-left-col p {

        font-size: 15px;

        line-height: 23px;

    }

    .Benefits-left-col ul li {

        font-size: 13px;

        line-height: 18px;

    }

    .Benefits-left-col  ul li::after {

        left: -12px;

        top: 6px;

    }

}

@media screen and (max-width : 414px){

    .main-heading {

        font-size: 20px;

        line-height: 35px;

    }

    .about-image-galary {

        padding: 29px 10px;

    }

    .story-info-head {

        width: 100%;

        margin-bottom: 5px;

    }

    section.hierarhical-main {

        padding: 30px 0px;

    }

}