/*banner*/

.rima-banner{
    padding-top: 200px;
    padding-bottom: 160px;
}


.rima-banner .container-fluid{
    padding-inline: 100px;
}

.col-banner-image{
    position: relative;
}

.section_slider{
    background-color: #ccc;
    /*height: 500px;*/
    padding: 0.7rem;
    border-radius: 208px 240px 0px 0px;
    /*background-image: url(../images/customer-back.jpg);*/
}

.section_slider:hover {
    /*border-radius: 0px;*/
    background-image: url(../images/customer-back.jpg);
}
.section_slider:hover .each-project img {
    /*border-radius: 0px;*/
    filter: grayscale(0);
}
.banner-shape{
    position: absolute;
    bottom: -1%;
    z-index: -1;
    transform: translate(-66%, -73%);
    transition: 1.5s;
    opacity: 0;
}

.banner-shape.loaded{
    transform: translate(0);
    transition: 1.5s;
    opacity: 1;
}


.banner-extra1{
    position: inherit;
    bottom: 11%;
    right: 45%;
    transform: translate(-91%, -81%);
    transition: 1s;
    opacity: 0;
}

.banner-extra1.loaded{
    transform: translate(0);
    transition: 1s;
    opacity: 1;
}

.banner-extra2{
    position: inherit;
    bottom: 40%;
    left: 61%;
    transform: translate(45%, 45%);
    transition: 1.4s;
    opacity: 0;
}

.banner-extra2.loaded{
    transform: translate(0);
    transition: 1.4s;
    opacity: 1;
}

.banner-extra3{
    position: inherit;
    top: -30%;
    left: -0%;
    transform: translate(45%, 45%);
    transition: 1.4s;
    opacity: 0;
}

.banner-extra3.loaded{
    transform: translate(0);
    transition: 1.4s;
    opacity: 1;
}

.banner-image{
    width: 640px;
    height: 640px;
    opacity: 0;
    transform: scale(.4);
    transition: .7s;
}

.banner-image.loaded{
    opacity: 1;
    transform: scale(1);
    transition: .7s;
}

.banner-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.rima-text p{
    color: var(--text-color);
    /*font-size: 17px;*/
}


.banner-content{
    transition: .7s;
    transform: translateX(180%) scale(.2);
}

.banner-content.loaded{
    transform: translateX(0%) scale(1);
    transition: .7s;
}


.banner-content .rima-text p{
    margin-bottom: 40px;
}


.rima-text h5{
    color: #4d4d4d;
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 10px;
}

.about-content .rima-title{
    margin-bottom: 30px;
}


/*banner*/




/*about*/

.about-sec{
    padding-block: 90px;
}

.about-sec .container-fluid{
    position: relative;
}

.about-sec .container-fluid::before{
    position: absolute;
    content: '';
    width: 800px;
    height: 800px;
    top: -262px;
    background-image: url(../images/light2.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: -20%;
    z-index: -1
}

.about-sec .row{
    align-items: center;
}

.col-about-image{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.about-image{
    width: 600px;
    height: 600px;
    opacity: 0;
    transform: scale(.4);
    transition: .7s;
}

.about-image.loaded{
    opacity: 1;
    transform: scale(1);
    transition: .7s;
}


.about-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.about-shape{
    position: absolute;
    bottom: 0%;
    z-index: -1;
    left: 12%;
    opacity: 0;
    transition: 1.5s;
    transform: translate(105%, -121%);
}

.about-shape.loaded{
    opacity: 1;
    transition: 1.5s;
    transform: translate(0);
}


.about-extra1{
    position: inherit;
    top: 22%;
    left: -0%;
    transition: 1.4s;
    opacity: 0;
    transform: translate(47%, -46%);
}

.about-extra1.loaded{
    transition: 1.4s;
    opacity: 1;
    transform: translate(0);
}


.about-extra2{
    position: inherit;
    bottom: 3%;
    right: 40%;
    transition: 1.4s;
    opacity: 0;
    transform: translate(-73%, 71%);
}


.about-extra2.loaded{
    transition: 1.4s;
    opacity: 1;
    transform: translate(0);
}




.about-content{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}


.about-content .rima-btn{
    align-self: flex-end;
    margin-block: 22px;
}

/*about*/



/*our projects*/


.our-projects .container-fluid-title{

    padding-inline: 100px;
}

.all-projects{
    width: 100%;
}

.our-projects .rima-title{
    margin-bottom: 26px;
}

.each-project{
    width: 100%;
    height: 348px;
}

.each-project img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 208px 240px 0px 0px;
    border: 3px solid #ffffff;
    filter: grayscale(0.3);
}

.projects-row{
    margin-bottom: 20px;
}

.project-reverse-row{
    justify-content: flex-end;
    position: relative;
}

.container-pro{
    padding-inline: 20px;
}


.project-shape{
    position: absolute;
    left: -21%;
    bottom: -63%;
    z-index: -1;
    transform: translate(-66%, -73%);
    transition: 1.5s;
    opacity: 0;
}

.project-shape.loaded{
    transform: translate(0);
    transition: 1.5s;
    opacity: 1;
}


.project-extra1 {
    position: inherit;
    top: 11%;
    left: 18%;
    transition: 1.2s;
    opacity: 0;
    transform: translate(137%, 118%);
}

.project-extra1.loaded{
    transition: 1.2s;
    opacity: 1;
    transform: translate(0);
}


.project-extra2{
    position: inherit;
    top: 28%;
    left: 21%;
    transform: translate(-29%, -5%);
    transition: 1.4s;
    opacity: 0;
}

.project-extra2.loaded{
    transition: 1.4s;
    opacity: 1;
    transform: translate(0);
}

/*our projects*/






/*customers*/


.our-customers{
    padding-block: 130px 90px;
}

.our-customers .container-fluid{
    position: relative;
}

.our-customers .container-fluid:before{
    position: absolute;
    content: '';
    width: 800px;
    height: 800px;
    top: -62px;
    background-image: url(../images/light3.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: -25%;
    z-index: -1;
}


.our-customers .row{
    align-items: center;
}





.col-customer-image{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.customer-image{
    width: 600px;
    height: 600px;
    opacity: 0;
    transform: scale(.4);
    transition: .7s;
}

.customer-image.loaded{
    opacity: 1;
    transform: scale(1);
    transition: .7s;
}


.customer-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.customer-shape{
    position: absolute;
    bottom: 0%;
    z-index: -1;
    left: 12%;
    opacity: 0;
    transition: 1.5s;
    transform: translate(105%, -121%);
}

.customer-shape.loaded{
    opacity: 1;
    transition: 1.5s;
    transform: translate(0);
}


.customer-extra1{
    position: inherit;
    bottom: -6%;
    right: 53%;
    transition: 1.4s;
    opacity: 0;
    transform: translate(47%, -46%);
}

.customer-extra1.loaded{
    transition: 1.4s;
    opacity: 1;
    transform: translate(0);
}


.customer-box{
    background-image: url(../images/customer-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0px 4px 2px 14px #ebebeb9e;
    position: relative;
}


.customer-box:before{
    position: absolute;
    content: '';
    width: 250px;
    height: 250px;
    transform: rotate(78deg);
    background: #E2BBF6;
    background: linear-gradient(90deg, rgba(226, 187, 246, 1) 0%, rgba(132, 109, 144, 1) 100%);
    z-index: -1;
    border-radius: 20px;
    top: -54px;
    right: 153px;
}



/*customers*/




/*blogs*/

.blogs{
    padding-block: 100px;
}

.blogs .container-fluid-title{
    padding-inline: 100px;
}

.each-blog{
    position: relative;
}

.each-blog::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    background: #000000;
    background: linear-gradient(0deg, rgb(0 0 0 / 81%) 24%, rgb(26 26 26 / 51%) 50%, rgb(255 255 255 / 0%) 100%);
    z-index: 1;
    /*height: 0;*/
    /*transition: .6s;*/
}


.blog-view{
    width: 100px;
    height: 100px;
    background-color: var(--shape-color2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0  0 50px 50px ;
    position: absolute;
    top: 0;
    left: 40px;
    opacity: 0;
    transition: .5s;
    z-index: 2;
}

.blog-content{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    color: #ffffff !important;
    bottom: 0;
    z-index: 2;
    font-size: 17px;
    align-items: center;
    justify-content: center;
}

.all-blogs{
    margin-top: 26px;
}

.blog-img{
    width: 100%;
    height: 450px;
    position: relative;
}

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

.blog-text {
    position: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: fit-content;
    width: 90%;
    bottom: 36px;
}


@media screen and (min-width: 768px){
    .swiper-slide:hover .blog-view{
        opacity: 1;
        transition: .5s;
    }

    .swiper-slide:hover .blog-content{
        opacity: 1;
        transition: .5s;
    }

    /*.each-blog:hover::before{*/
    /*    height: 100%;*/
    /*    transition: .6s;*/
    /*}*/
}







/*blogs*/




















/*responsive*/
/*responsive*/
/*responsive*/
/*responsive*/



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

    .rima-banner {
        padding-top: 120px;
        padding-bottom: 160px;
    }

    .banner-shape svg {
        width: 1317px;
        height: 1136px;
    }

    .banner-extra1 svg{
        width: 247px;
        height: 213px;
    }

    .banner-extra2 svg{
        width: 247px;
        height: 213px;
    }

    .banner-extra3 svg{
        width: 1267px;
        height: 999px;
    }

    .banner-image {
        width: 528px;
        height: 528px;
    }


    .about-image {
        width: 528px;
        height: 528px;
    }

    .about-shape svg{
        width: 934px;
        height: 896px;
    }

    .about-extra1 svg{
        width: 370px;
        height: 386px;
    }

    .about-extra2 svg{
        width: 158px;
        height: 211px;
    }




    .project-shape svg{
        width: 1975px;
        height: 1232px;
    }

    .project-extra1 svg{
        width: 320px;
        height: 202px;
    }

    .project-extra2 svg{
        width: 350px;
        height: 136px;
    }

    .project-extra1 {
        top: 40%;
    }





    .customer-image {
        width: 510px;
        height: 510px;
    }

    .customer-shape svg{
        width: 1309px;
        height: 684px;
    }

    .customer-extra1 svg{
        width: 305px;
        height: 138px;
    }




}

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

}

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

    .blogs .container-fluid-title {
        padding-inline: 22px;
    }

    .our-projects .container-fluid-title {
        padding-inline: 22px;
    }

    .rima-banner .container-fluid {
        padding-inline: 22px;
    }

    .banner-content .rima-title {
        margin-bottom: 17px;
    }

    .each-project {
        width: 100%;
        height: 257px;
    }

    .rima-banner {
        padding-top: 120px;
        padding-bottom: 30px;
    }


    .col-about-content{
        order: -1;
    }

    .col-about-image {
        justify-content: center;
    }

    .about-shape {
        left: 24%;
    }

    .about-sec .container-fluid{
        padding-inline: 22px;
    }


    .customer-shape svg {
        width: 1002px;
        height: 571px;
    }

    .customer-extra1 svg {
        width: 305px;
        height: 138px;
    }

    .customer-image {
        width: 408px;
        height: 420px;
    }

    .col-customer-image {
        justify-content: center;
    }

    .customer-shape {
        left: 36%;
    }

    .col-customer-image{
        display: none;
    }


}

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

    .rima-text h5 {
        font-size: 19px;
        padding-bottom: 2px;
    }

    .banner-shape svg {
        width: 1065px;
        height: 924px;
    }

    .banner-extra1 svg {
        width: 185px;
        height: 146px;
    }

    .banner-extra2 svg {
        width: 195px;
        height: 178px;
    }

    .banner-extra3 svg {
        width: 956px;
        height: 770px;
    }

    .banner-image {
        width: 357px;
        height: 356px;
    }

    .about-sec {
        padding-block: 45px 64px;
    }

    .each-project {
        width: 100%;
        height: 237px;
    }

    .blog-content {
        opacity: 1;
    }

    .blog-view {
        opacity: 1;
    }

    .project-shape{
        display: none;
    }


    .about-shape svg {
        width: 752px;
        height: 753px;
    }

    .about-extra1 svg {
        width: 268px;
        height: 337px;
    }

    .about-extra2 svg {
        width: 111px;
        height: 202px;
    }

    .about-image {
        width: 401px;
        height: 401px;
    }

    .about-image {
        width: 394px;
        height: 335px;
    }

    .about-shape svg {
        width: 680px;
        height: 651px;
    }

    .about-extra1 svg {
        width: 233px;
        height: 319px;
    }

    .about-shape {
        left: 30%;
    }

    .about-extra2 svg {
        width: 100px;
        height: 181px;
    }

    .blog-view {
        width: 78px;
        height: 78px;
    }

    .blog-view svg{
        width: 20px;
        height: 20px;
    }

    .blog-content {
        width: 100%;
        height: fit-content;
    }

    .blog-img {
        height: 352px;
    }

}

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

    .rima-banner {
        padding-top: 50px;
    }

    .container-pro {
        padding-inline: 0;
    }

    .blogs {
        padding-block: 64px 50px;
    }


}

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

    .banner-shape svg {
        width: 867px;
        height: 764px;
    }

    .banner-extra1 svg {
        width: 90px;
        height: 102px;
    }

    .banner-extra2 svg {
        width: 138px;
        height: 121px;
    }

    .banner-extra3 svg {
        width: 771px;
        height: 629px;
    }

    .banner-image {
        width: 309px;
        height: 298px;
    }

    .each-project {
        width: 100%;
        height: 153px;
    }

    .about-shape svg {
        width: 634px;
        height: 598px;
    }

    .about-extra1 svg {
        width: 203px;
        height: 302px;
    }

    .about-extra2 svg {
        width: 100px;
        height: 181px;
    }

    .about-image {
        width: 193px;
        height: 256px;
    }

    .about-shape {
        left: 15%;
    }

}

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

}

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

    .banner-image {
        width: 252px;
        height: 264px;
    }

}






/*responsive*/
/*responsive*/
/*responsive*/