/* =========================== section-project =========================== */
.section-project{background-size: cover;background-position: center top;background-repeat: no-repeat;position: relative;}
.section-project::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, #293239 73.33588181880482%, #556F73 100%);opacity: 0.9;z-index: 1;pointer-events: none;}
.section-project .container{position: relative;z-index: 2;}
.project-content{position: relative;}
.project-content:after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../images/experience-shape.png); background-size: 10% 70%; background-position: left 5% center; background-repeat: no-repeat; pointer-events: none; opacity: 0.5;}
.section-project .project-content .heading-style-2{color: var(--off-white);font-family: var(--ITCAvantGardeProBk-reg);max-width: 450px;}
.section-project .project-content .heading-style-2 span{font-family: var(--ITCAvantGardeProBk-bold);}
.section-project .project-content p{color: var(--off-white);font-family: var(--NeuzeitSbook);}

.project-cards-wrap{row-gap: 86px;}
.feature-project-image-wrap::after { background: rgba(72, 88, 98, 0.776); opacity: 0; transition: all 0.3s ease;content: ""; position: absolute; inset: 0;height: 100%;width: 100%; }
.feature-project-card:hover .feature-project-image-wrap::after { opacity: 1; }
.feature-project-card:hover .feature-project-content h3 a { text-decoration: none; }
.feature-project-card:hover .project-arrow { opacity:1; }

.feature-project-content .heading-style-3 a { color: var(--off-white) !important; text-decoration: none; }
.feature-project-card:hover .feature-project-content h3 a { text-decoration: underline; }
.feature-project-content .heading-style-4{color:var(--gray) !important;}

/* =========================== section-project gallery =========================== */
.image-gallery { column-count: 3; column-gap: 20px; }
/* .image-gallery { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row dense;} */
.image-gallery .gallery-item { display: block; width: 100%; margin-bottom: 20px; break-inside: avoid; overflow: hidden; }
.image-gallery .gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.image-gallery .gallery-item:hover img { transform: scale(1.04);}

/* ================================================== Project detail page ================================================ */


/* =========================== section-service-delivery =========================== */
.section-service-delivery{background-size: 60% auto;background-position: left bottom;background-repeat: no-repeat;position: relative;}

.service-delivery-content-left > div{margin-bottom: 30px;}
.service-delivery-content-left .p-big{color: var(--gray-01);font-family: var(--NeuzeitSbook);}
.service-delivery-content-left .heading-style-3{color: var(--green);font-family: var(--ITCAvantGardeProMD-med);font-weight: 700;margin-top:14px;}
.service-delivery-content-left .service-delivery-logo{padding: 30px 55px;display: inline-block; background-color: rgba(63, 79, 90, 1); border-radius: 15px; box-shadow: -8px 9px 15px 0px rgb(0 0 0 / 38%);}
.service-delivery-content-left .service-delivery-logo img{max-width: 128px;max-height: 71px;}


.service-delivery-content-right p,
.service-delivery-content-right div,
.service-delivery-content-right ul li,
.service-delivery-content-right h6{font-family: var(--NeuzeitSbook);font-size: 18px;line-height: 26px;color: var(--gray-02);margin-bottom:36px;}
.service-delivery-content-right p strong,
.service-delivery-content-right ul li strong,
.service-delivery-content-right div strong,
.service-delivery-content-right h6{font-weight: 600;display:block;}

.service-delivery-content-right ul li strong{display: inline-block;}
.service-delivery-content-right h6{margin-bottom: 14px;}
.service-delivery-content-right ul{padding-left: 20px;}
.service-delivery-content-right ul li{list-style: disc;margin-bottom: 8px;}
/* =========================== section-project-images =========================== */
.section-project-images{background: linear-gradient(90deg, #3F4F5A 74.56986276726974%, #556F73 100%);overflow: hidden;}

.section-project-images .container-fluid { padding-left: 0; padding-right: 0; }
.project-images-slider { overflow: visible; }
.project-images-slider .swiper-wrapper { align-items: center; }
.project-images-slider .swiper-slide { width: 78%; transition: all 0.45s ease; opacity: 0.55;}

.project-images-slider .swiper-slide-active { opacity: 1; }
.project-images-slider .swiper-slide-prev,
.project-images-slider .swiper-slide-next { opacity: 0.82; }
.project-image-card { display: block; border-radius: 24px; overflow: hidden; text-decoration: none; box-shadow: none; }
.project-image-card img { width: 100%; height: 625px; object-fit: cover; display: block; border-radius: 24px; }

.project-images-prev{transform: rotate(180deg);}

.project-images-controls { margin: 50px auto 0; padding: 0 40px; display: flex; align-items: center; gap: 24px; }
.project-images-arrow { width: 35px; height: 35px; border-radius: 50%; background: #f3f3f3; color: #6b7b84; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.3s ease; }
.project-images-arrow:hover { background: #425560; }
.project-images-arrow:hover img{ filter: brightness(0) saturate(100%) invert(71%) sepia(8%) saturate(269%) hue-rotate(163deg) brightness(94%) contrast(84%); }

.project-images-pagination { display: flex; align-items: center;width: 100%; }
.project-images-pagination .swiper-pagination-bullet { flex: 1; height: 7px; background: #cfd3d6; border-radius: 0; opacity: 1; margin: 0 !important; transition: all 0.3s ease; }
.project-images-pagination .swiper-pagination-bullet-active { background: #6f7b83; }


/* ================================================== media query start ================================================ */
@media screen and (max-width:1199px){

    /* =========================== section-project =========================== */
    /* cards */
    .project-cards-wrap{row-gap: 60px;}
    /* ================================================== Project detail page ================================================ */
    
    
    /* =========================== section-service-delivery =========================== */
    .service-delivery-content-left > div{margin-bottom: 26px;}
    .service-delivery-content-left .service-delivery-logo{padding: 24px 40px;}
    .service-delivery-content-left .service-delivery-logo img{max-width: 110px;}
    .service-delivery-content-right p,    
    .service-delivery-content-right div,
    .service-delivery-content-right ul li,
    .service-delivery-content-right h6{font-size: 17px;margin-bottom:32px;}
    
    .service-delivery-content-right ul li,
    .service-delivery-content-right h6{margin-bottom: 12px;}

    /* =========================== section-project-images =========================== */
    .project-image-card img { height: 505px;}
    .project-images-controls { margin: 40px auto 0;}
    
    
}
@media screen and (max-width:991px){
    /* =========================== section-project =========================== */
    /* cards */
    .project-cards-wrap{row-gap: 40px;}
    /* =========================== section-project gallery =========================== */
    .image-gallery { column-gap: 12px; }
    .image-gallery .gallery-item { margin-bottom: 12px;}

     /* ================================================== Project detail page ================================================ */
    
     /* =========================== section-service-delivery =========================== */
    .service-delivery-content-left > div{margin-bottom: 24px;}
    .service-delivery-content-left .service-delivery-logo{padding: 20px 30px;}
    .service-delivery-content-left .service-delivery-logo img{max-width: 90px;}
    .service-delivery-content-right p,
    .service-delivery-content-right div,
    .service-delivery-content-right ul li,
    .service-delivery-content-right h6{font-size: 16px;line-height: 24px;margin-bottom:26px;}
    .service-delivery-content-right ul li,
    .service-delivery-content-right h6{margin-bottom: 10px;}
    
    /* =========================== section-project-images =========================== */
    .project-image-card{border-radius: 15px;}
    .project-image-card img { height: 380px; border-radius: 15px; }
    .project-images-controls { margin: 30px auto 0;padding:0;}
}
@media screen and (max-width:767px){    
    /* =========================== section-project =========================== */
    /* cards */
    .project-cards-wrap{row-gap: 30px;--bs-gutter-x: 12px;}
    .project-content{row-gap: 20px;}
    /* =========================== section-project gallery =========================== */
    .image-gallery { column-gap: 14px;column-count: 2;}
    .image-gallery .gallery-item { margin-bottom: 14px;}

    /* ================================================== Project detail page ================================================ */
    
    /* =========================== section-service-delivery =========================== */
    .service-delivery-content{row-gap: 20px;}
    .service-delivery-content-left .heading-style-3{margin-top: 4px;}
    .service-delivery-content-left > div{margin-bottom: 14px;}
    .service-delivery-content-left .service-delivery-logo{padding: 18px 28px;}
    .service-delivery-content-left .service-delivery-logo img{max-width: 86px;}
    .service-delivery-content-right p,
    .service-delivery-content-right div,
    .service-delivery-content-right ul li,
    .service-delivery-content-right h6{font-size: 15px;line-height: 22px;margin-bottom:16px;}

    .service-delivery-content-right ul li,
    .service-delivery-content-right h6{margin-bottom: 8px;}
    
    /* =========================== section-project-images =========================== */
    .project-image-card img { height: 300px;}
    .project-images-controls { margin: 20px auto 0;padding:0;}
    .project-images-pagination .swiper-pagination-bullet{height: 5px;}
    .project-images-controls{gap:12px;}
    .project-images-arrow { width: 30px; height: 30px;}
}
@media screen and (max-width:575px){
    .project-content:after{background-size: 10vh 70%;}
    
    /* =========================== section-project gallery =========================== */
    .image-gallery { column-gap: 12px;column-count: 1;}
    .image-gallery .gallery-item { margin-bottom: 12px;}
    /* ================================================== Project detail page ================================================ */    
    /* =========================== section-project-images =========================== */
    .project-image-card img { height: 250px;}
}