/* MAIN SIDEBAR WRAPPER */
.ongoing-sidebar {
    width: 250px;
    position: fixed;
    right: 20px;
    top: 150px;
    background: #fbfbfbff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.18);
    z-index: 999;
    overflow: hidden; /* removes scrollbars completely */
    height:400px;
}

/* HEADER WITH DIFFERENT COLOR */
.sidebar-header {
    background: #009ACF;
    padding: 12px;
    text-align: center;
}

.sidebar-header h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

/* MARQUEE AREA (Increased Height) */
.marquee-box {
    height: 420px;   /* increased height */
    padding: 12px;
}

/* ITEM BOX */
.ongoing-item {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e2e2;
}

.ongoing-item img {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 8px;
}

.ongoing-item p {
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
    font-weight: 500;
    color: #333;
}

/* Close Button */
.close-sidebar {
    position: absolute;
    right: 8px;
    top: 6px;
    font-size: 25px;
    font-weight: bold;
    color: #e86a40ff;
    cursor: pointer;
    z-index: 9999;
}
.close-sidebar:hover {
    color: #b30000;
}

/* MOBILE RESPONSIVE */
@media(max-width: 768px){
    .ongoing-sidebar {
        position: relative;
        width: 100%;
        right: 0;
        top: 0;
        margin-top: 20px;
        box-shadow: none;
    }

    .marquee-box {
        height: auto;
    }
}
.service-card {
    background: #0097a7;
    border-radius: 15px;
    padding: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    transition: 0.35s ease;
    width: 100%;
    min-height: 300px; /* smaller height */
}

/* Top part shorter */
.service-card .top-section {
    background: #00a7bd; /* default */
    padding: 25px 20px 75px;  /* reduced */
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
    position: relative;
    height: 140px; /* reduced height */
    box-shadow: 0 10px 20px rgba(126, 190, 199, 0.8);
}

/* === GRID COLOR VARIANTS === */
.service-card.color-1 .top-section { background: #00a7bd; } /* Teal */
/* .service-card.color-2 .top-section { background: #ff8a42eb; } */
.service-card.color-2 .top-section { background: #F2412D; } 
/* .service-card.color-2 .top-section { background: #009ACF; }  */

.service-card.color-3 .top-section { background: #6a4cff; } /* Purple */
.service-card.color-4 .top-section { background: #008060; } /* Green */
.service-card.color-5 .top-section { background: #0067d9; } /* Blue */
.service-card.color-6 .top-section { background: #d9278d; } /* Pink */

/* OPTIONAL: make shadow match color tone (premium look) */
/* .service-card.color-1 .top-section { box-shadow: 0 6px 20px rgba(147, 185, 190, 0.64); }
.service-card.color-2 .top-section { box-shadow: 0 6px 20px rgba(254, 134, 59, 0.52); } */
.service-card.color-3 .top-section { box-shadow: 0 6px 20px rgba(106, 76, 255, 0.4); }
.service-card.color-4 .top-section { box-shadow: 0 6px 20px rgba(0,128,96,0.35); }
.service-card.color-5 .top-section { box-shadow: 0 6px 20px rgba(0,103,217,0.35); }
.service-card.color-6 .top-section { box-shadow: 0 6px 20px rgba(217,39,141,0.35); }

/* Circle image */
.service-card .circle-img {
    width: 200px;   /* reduced */
    height: 200px;  /* reduced */
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid #fff;
    margin: 0 auto;
    position: absolute;
    bottom: -120px; /* fixed overlap */
    left: 50%;
    transform: translateX(-50%);
}
.serve-img{
    
    width: 200px;  
    height: 200px;  

}

/* Title inside teal */
.service-card .title-text {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    
}

/* White title box */
.service-card .bottom-box {
    margin-top: 100px; /* adjusted for circle */
    background: #fff;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 17px;  /* smaller */
    font-weight: 600;
    color: #003366;
    border: 1px solid #eaeaea;
}

/* Expandable content */
.service-card .hover-content {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 10px 10px;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 18px;
    
}

.service-card:hover .hover-content {
    max-height: 250px; /* expansion on hover */
    padding: 15px 18px 20px;
}

/* Lift on hover */
.service-card:hover {
    transform: translateY(-6px);
}

.hover-content ul li {
    list-style: none;
    position: relative;
    padding-left: 20px;
    color: #004766;
    
}

/* Green tick before every <li> */
.hover-content ul li:before {
    content: "\2713"; /* tick mark */
    color: #004766;   /* green */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 768px) {
    .service-card:hover .hover-content {
        max-height: 250px;
        padding: 15px 18px 20px;
    }
    .service-card .title-text {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    
}
}

/* FULL SECTION */
.vmv-section {
    width: 100%;
}

/* BLUE BANNER CONTENT */
.vmv-banner {
    background: linear-gradient(180deg, #0c1b3d, #062b61);
    padding: 50px 20px;
    color: #fff;
}

.vmv-small-text {
    font-size: 18px;
    color: #dbe3f3;
    max-width: 900px;
    margin: 0 auto 15px auto;
}

.vmv-main-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffdd33;
    max-width: 900px;
    margin: 0 auto 15px auto;
    line-height: 1.3;
}

/* ------------------------------------------------------ */
/*      PROFESSIONAL GRID CARDS (VISION | MISSION | VALUES) */
/* ------------------------------------------------------ */

.pro-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 35px 20px;
    text-align: center;
    transition: 0.35s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    border-top: 6px solid transparent;
}

/* Card Hover */
.pro-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* Icon wrapper (circle) */
.pro-icon-wrap {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Icons */
.pro-icon {
    width: 60px;
}

/* Title */
.pro-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.7px;
    margin-top: 5px;
    color: #1b2d41;
}

/* Description text */
.pro-desc {
    font-size: 14px;
    color: #4a5865;
    margin-top: 10px;
    line-height: 1.6;
}

/* Colored Card Variants */
.pro-vision {
    border-top-color: #00a7bd;
    background: linear-gradient(to bottom, #e9faff, #ffffff);
}

.pro-mission {
    border-top-color: #0067d9;
    background: linear-gradient(to bottom, #e8f0ff, #ffffff);
}

.pro-values {
    border-top-color: #7b4cff;
    background: linear-gradient(to bottom, #f3ecff, #ffffff);
}

/* Responsive */
@media(max-width: 768px) {

    .vmv-main-title {
        font-size: 24px;
    }

    .vmv-small-text {
        font-size: 16px;
    }

    .pro-card {
        padding: 30px 15px;
    }

    .pro-icon-wrap {
        width: 75px;
        height: 75px;
    }

    .pro-icon {
        width: 40px;
    }
}
/* Support Box should be slightly up */
.support-box {
    margin-top: -20px;   /* moves support box up */
    z-index: 10;
    position: relative;
}
.support-box-content {
    font-size: 11px !important;     /* Reduce font size */
    line-height: 1.6;                /* Adjust spacing */
}
.support-box h4 {
    font-size: 20px !important;      /* Keep title readable */
}
/* Director image slightly lower */
.director-img-wrap {
    margin-top: 20px;    /* moves image down */
    position: relative;
    z-index: 5;
}

/* Message slightly lower */
.director-message {
    margin-top: 40px;    /* moves text down */
}
.director-message p {
    font-size: 16px !important;   /* reduce text size */
    line-height: 1.7;            /* improve readability */
    /* color: #263238; */
    color: #004766; 
}

/* Support box overlaps image */
.support-box {
    margin-left: -40px;  /* overlap effect */
}
.my-contact{
    color:red;
}
.my-contact:hover{
    background: #095372ff;
    color:white;
}

/* Mobile adjustments */
@media(max-width: 991px){
    .support-box,
    .director-img-wrap,
    .director-message {
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
}


/* MAIN DIVISION */
.projects-main-section {
    background: linear-gradient(180deg, #0c1b3d, #0645a4ff);
    height: 210px;  
    position: relative;
    overflow: hidden;
    padding: 15px 0;
    width: 100%;
    margin: auto;        /* CENTER DIVISION */
    /* border-radius: 10px; */
}

/* TITLE */
.projects-title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* MARQUEE AREA */
.projects-marquee {
    position: relative;
    z-index: 10;
    width: 100%;
    overflow: hidden;
}

/* FLEX ROW INSIDE MARQUEE */
.projects-row {
    display: flex;
    gap: 15px;
    align-items: center;
    padding-left: 20px;
}

/* IMAGES */
.project-img {
    height: 160px;       /* Increased height */
    width: auto;
    border-radius: 8px;
    object-fit: cover;
    transition: .3s;
}

.project-img:hover {
    transform: scale(1.06);
}

/* MOBILE */
@media(max-width: 768px){
    .projects-main-section {
        height: 200px;
        width: 95%;
    }
    .project-img {
        height: 120px;
    }
    .projects-title {
        font-size: 22px;
    }
    
}
.testimonial-carousel{
 width:100%;   
}
@media (max-width: 576px){
    .testimonial-carousel .testimonial-item {
        margin: auto;
        width: 100%;
    }

    .testimonial-carousel img{
        height: 260px!important;
        object-fit: cover;
    }

    .testimonial-carousel div {
        font-size: 18px!important;
    }
}