.services-container {
    height: clamp(1px, 21.615vw, 830px);
}

.service-container {
    display: flex;
    flex-wrap: wrap;
}

.service-item {
    flex: 0 0 33.3333%;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 clamp(1px, 4.6vw, 174px);
    justify-items: start;
    align-items: start;
    position: relative;
    z-index: 2;
}

.custom-list li::marker {
    content: "●";
    color: #CC9934;
    font-size: clamp(1px, 1.25vw, 48px) !important;
}

.services-grid-icon {
    width: clamp(1px, 59.219vw, 2374px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 clamp(1px, 1.1vw, 40px);
    justify-items: end;
    align-items: start;
    position: relative;
    z-index: 1;
}

.services-item-img:nth-child(1) .services-img img {
    width: clamp(1px, 7.448vw, 286px);
    height: auto;
    margin-top: clamp(1px, 0.520834vw, 20px);
}

.services-item-img:nth-child(2) .services-img img {
    width: clamp(1px, 4.532vw, 174px);
    height: auto;
    margin-top: clamp(1px, 1.40625vw, 54px);
}

.services-item-img:nth-child(3) .services-img img {
    width: clamp(1px, 8.594vw, 330px);
    height: auto;
    margin-top: clamp(1px, 1.145831vw, 44px);
}

.journey-video video {
    width: clamp(1px, 57.032vw, 2190px);
    height: auto;
    object-fit: cover;
}

.service-img {
    width: auto;
    height: clamp(1px, 11.198vw, 430px);
    border-radius: clamp(1px, 0.782vw, 30px);
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: clamp(1px, 0.782vw, 30px);
}

.service-card {
    width: clamp(1px, 22.761vw, 874px);
    height: clamp(1px, 26.042vw, 1000px);
    position: relative;
    overflow: hidden;
}

.service-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #5D0013;
	color: #FFFFFF;
    opacity: 0;
    overflow-y: auto;
    visibility: hidden;
    transition: all 0.4s ease;
    text-align: start;
    border-radius: clamp(1px, 0.782vw, 30px);
}

.service-hover::-webkit-scrollbar {
    display: none !important;
}


.service-card:hover .service-hover {
    opacity: 1;
    visibility: visible;
}


/* Our School Management System */

.sms-item-img:nth-child(1) .sms-img img,
.sms-item-img:nth-child(3) .sms-img img {
    width: clamp(1px, 10.1042vw, 388px);
    height: auto;
    margin-bottom: clamp(1px, 2.083331vw, 80px);
}

.sms-item-img:nth-child(2) .sms-img img {
    width: clamp(1px, 9.74vw, 374px);
    height: auto;
    margin-top: clamp(1px, 4.166665vw, 160px);
}

.swiper-pagination {
    position: relative;
    text-align: start;
    width: clamp(1px, 10.417vw, 400px);
}

.swiper-pagination-progress {
    height: clamp(1px, 0.417vw, 16px);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 6.77px;
    margin-top: clamp(1px, 0.417vw, 16px);
}

.swiper-pagination-progressbar {
    height: clamp(1px, 0.417vw, 16px);
    background-color: white;
    border-radius: 6.77px;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    display: none !important;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    display: none !important;
}

.swiper-button-next,
.swiper-button-prev {
    display: block;
    position: relative;
    top: auto !important;
    right: 0;
    width: clamp(1px, 3.021vw, 116px);
    height: clamp(1px, 3.021vw, 116px);
    margin-top: 0 !important;
    z-index: 10;
}

.swiper-button-next img,
.swiper-button-prev img {
    width: 100%;
    height: 100%;
}

.see-img {
    position: relative;
    width: clamp(1px, 29.4271vw, 1130px);
    height: clamp(1px, 18.2292vw, 700px);
    overflow: hidden;
}

.see-img .image-wrapper img {
    width: clamp(1px, 29.4271vw, 1130px);
    height: clamp(1px, 18.2292vw, 700px);
    object-fit: cover;
}

.swiper-slide:hover .see-img .image-wrapper {
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    transition: all ease 1s;
}

.swiper-slide:hover .see-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    z-index: 1;
    transition: transform 0.5s ease;
    opacity: 0.75;

}

.swiper-slide:hover .see-img .see-content {
    position: absolute;
    width: clamp(1px, 29.4271vw, 1130px);
    bottom: 0;
    z-index: 2;
    display: block !important;
    transition: transform 0.5s ease;
}

.swiper-slide:hover .see-title-content {
    opacity: 0;
}

/* technical support & capacity building  */

.services-item-img:nth-child(1) .technical-img img {
    width: clamp(1px, 8.9063vw, 342px);
    height: auto;
    margin-top: clamp(1px, 0.625vw, 24px);
}

.services-item-img:nth-child(2) .technical-img img {
    width: clamp(1px, 6.563vw, 252px);
    height: auto;
    margin-top: clamp(1px, 1.40625vw, 54px);
}

.services-item-img:nth-child(3) .technical-img img {
    width: clamp(1px, 8.282vw, 318px);
    height: auto;
    margin-top: clamp(1px, 1.145831vw, 44px);
}

/* Project Management */
.services-item-img:nth-child(1) .project-img img {
    width: clamp(1px, 8.646vw, 332px);
    height: auto;
    margin: clamp(1px, 1.302081vw, 50px);
}

.services-item-img:nth-child(2) .project-img img {
    width: clamp(1px, 6.9271vw, 266px);
    height: auto;
    margin-top: clamp(1px, 0.520834vw, 20px);
}

.services-item-img:nth-child(3) .project-img img {
    width: clamp(1px, 5.2084vw, 200px);
    height: auto;
    margin-top: clamp(1px, 1.145831vw, 44px);
}

/* IT STRATEGY & CONSULTING */

.services-item-img:nth-child(1) .it-img img {
    width: clamp(1px, 9.4271vw, 362px);
    height: auto;
    margin: clamp(1px, 1.458331vw, 50px) clamp(1px, 1.302081vw, 50px) 0 0;
}

.services-item-img:nth-child(2) .it-img img {
    width: clamp(1px, 6.3021vw, 242px);
    height: auto;
    margin-top: clamp(1px, 2.864581vw, 110px);
}

.services-item-img:nth-child(3) .it-img img {
    width: clamp(1px, 7.2396vw, 278px);
    height: auto;
    margin-top: clamp(1px, 1.458331vw, 56px);
}

/* CLOUD & SYSTEMS INTEGRATION */

.services-item-img:nth-child(1) .cloud-img img {
    width: clamp(1px, 6.823vw, 262px);
    height: auto;
    margin-top: clamp(1px, 1.5625vw, 60px);
}

.services-item-img:nth-child(2) .cloud-img img {
    width: clamp(1px, 8.907vw, 342px);
    height: auto;
    margin-top: clamp(1px, 1.458331vw, 56px);
}

.services-item-img:nth-child(3) .cloud-img img {
    width: clamp(1px, 5.4688vw, 210px);
    height: auto;
    margin-top: clamp(1px, 2.5vw, 96px);
}

/* CYBERSECURITY & RISK MANAGEMENT  */

.services-item-img:nth-child(1) .cyber-img img {
    width: clamp(1px, 8.334vw, 320px);
    height: auto;
    margin-top: clamp(1px, 1.5625vw, 60px);
}

.services-item-img:nth-child(2) .cyber-img img {
    width: clamp(1px, 6.771vw, 260px);
    height: auto;
    margin-top: clamp(1px, 2.864581vw, 110px);
}

.services-item-img:nth-child(3) .cyber-img img {
    width: clamp(1px, 7.188vw, 276px);
    height: auto;
    margin-top: clamp(1px, 2.5vw, 96px);
}

.service-item-inner {
    transition: transform 0.3s ease;
}

.service-item-inner:hover h2,
.service-item-inner:hover ul {
    transform: scale(1.05);
}

.service-item-inner:hover h2 {
    color: #CC9934 !important;
}

.service-item-inner:hover .custom-list p {
    font-family: Lato Regular;
}

/* Optional: hover effect */
/* .solution-img img:hover {
  transform: scale(1.05);
} */

.service-title {
    height: clamp(1px, 5.9375vw, 228px);
    background-color: #DDDDDD;
    border-radius: clamp(1px, 0.782vw, 30px);
}


@media (max-width:767px) {
    .services-container {
        background-image: url('../../images/custom/Services/Frame 4 (1).png') !important;
        background-repeat: no-repeat;
        height: 100%;
    }

    .sis-bg,
    .craa-bg,
    .lms-bg,
    .faim-bg,
    .patp-bg,
    .pafm-bg {
        width: clamp(1px, 84.884vw, 1660px);
        height: 100%;
    }

    .see-container {
        height: 100%;
    }

    .see-img,
    .see-img .image-wrapper img {
        width: clamp(1px, 75.117vw, 1130px);
        height: clamp(1px, 66.05vw, 996px);
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: clamp(1px, 13.49vw, 116px);
        height: clamp(1px, 13.49vw, 116px);
    }

    .swiper-slide:hover .see-img .see-content {
        width: 100%;
    }

    .accordion-item.active .accordion-bg {
        background-image: none !important;
        border-radius: clamp(1px, 6vw, 50px);
        padding: clamp(.5rem, 9.30232vw, 3rem);
    }

    .a-rounded-top .accordion-header {
        border-radius: clamp(1px, 6vw, 50px) clamp(1px, 6vw, 50px) 0 0 !important;
    }

    .continuous,
    .a-rounded-bottom .accordion-header {
        border-radius: 0 0 clamp(1px, 6vw, 50px) clamp(1px, 6vw, 50px) !important;

    }

    .accordion-header {
        height: clamp(1px, 41.861vw, 360px);
    }

    .accordion-item.active .accordion-header h3,
    .accordion-item.active .accordion-header label {
        font-size: clamp(1px, 6.51162vw, 96px) !important;
    }

    .why-container {
        height: 100%;
    }

    .partner-container {
        background-image: url('../../images/custom/Services/Frame 1707481482.png') !important;
        background-repeat: no-repeat;
        height: clamp(1px, 142.791vw, 1396px);
    }

    .services-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    .services-grid-icon,
    .sms-img {
        display: none !important;
    }

    .custom-list li::marker {
        font-size: clamp(1px, 4.62vw, 70px) !important;
    }

    .journey-video video {
        width: 100%;
    }

    .service-item-inner {
        display: flex;
        position: relative;
    }

    .innov-border {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-left: 2px solid #583F3B;
    }

    .innov-line {
        width: 50px;
        height: 2px;
        background-color: #583F3B;
        margin-top: clamp(1px, 3.48837vw, 30px);
        position: relative;
    }

    .innov-line::after {
        content: "";
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: clamp(1px, 2.791vw, 24px);
        height: clamp(1px, 2.791vw, 24px);
        background-color: #583F3B;
        border-radius: 50%;
    }

    .service-item-inner:first-child .innov-border {
        margin-top: clamp(1px, 3.48837vw, 30px);
    }

    .service-item:last-child .innov-border::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -8px;
        width: clamp(1px, 3.49vw, 30px);
        height: clamp(1px, 3.49vw, 30px);
        border: 3px solid #583F3B;
        border-radius: 50%;
        background-color: #fff;
    }

    .service-item {
        flex: 100%;
    }

    .service-card {
        width: 100%;
        height: 100%;
    }

    .service-img {
        height: clamp(1px, 34.884vw, 430px);
        border-radius: clamp(1px, 3vw, 30px);
    }

    .service-img img,
    .service-hover {
        border-radius: clamp(1px, 3vw, 30px);
    }

    .service-title {
        height: clamp(1px, 14vw, 228px);
        border-radius: clamp(1px, 3vw, 30px);
    }

}