/* ==========================================
   MODERN SERVICE CARDS (MATCHING DESIGN)
=========================================== */
.main-services-bottom{
	background-color: #D9E6FF;
	position: relative;
    z-index: 0;
}
/* Base Card Styles */
.cv-modern-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    transition: all 0.4s ease;
    overflow: hidden;
}

/* Card Body Layout */
.cv-modern-body {
    padding: 40px 35px 30px;
    flex-grow: 1; /* Pushes footer to the bottom */
}

/* Icon Circle */
.cv-modern-icon {
    width: 80px;
    height: 80px;
    background-color: #f4f5f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.cv-icon-img {
    max-width: 60px;
    max-height: 60px;
    transition: all 0.4s ease;
}

/* Typography */
.cv-modern-title {
    font-size: 22px;
    font-weight: 700;
    color: #2b3543;
    margin-bottom: 15px;
    transition: all 0.4s ease;
}

.cv-modern-title a {
    color: var(--color-2);
    text-decoration: none;
}

.cv-modern-text {
    font-size: 18px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0;
    transition: all 0.4s ease;
}

/* Card Footer */
.cv-modern-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 35px;
    border-top: 1px solid #e5e5e5;
    transition: all 0.4s ease;
}

.cv-modern-link {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid #2b3543;
    padding-bottom: 2px;
    transition: all 0.4s ease;
}

.cv-modern-link span {
    font-weight: 900;
    font-size: 16px;
}

.cv-modern-index {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-2);
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

/* ==========================================
   HOVER EFFECTS (Dark & Green Gradient)
=========================================== */

.cv-modern-card:hover {
    /* Recreates the dark background with green glow at bottom */
    background: linear-gradient(150deg, #101c24 40%, #0e3552 100%);
    border-color: transparent;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    transform: translateY(-5px);
    transition: all 0.3s ease-in-out 0.1s;
}

/* Invert icon and make circle green */
.cv-modern-card:hover .cv-modern-icon {
    background-color: #cda85f;
}

/* If your icons are dark by default, this turns them white on hover */
.cv-modern-card:hover .cv-icon-img {
    filter: brightness(0) invert(1); 
}

/* Change text to white/light grey */
.cv-modern-card:hover .cv-modern-title,
.cv-modern-card:hover .cv-modern-index, .cv-modern-card:hover .cv-modern-title a {
    color: #ffffff;
}

.cv-modern-card:hover .cv-modern-text {
    color: #c4d1da;
}

/* Subtly change footer border color */
.cv-modern-card:hover .cv-modern-footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Update Learn More Link */
.cv-modern-card:hover .cv-modern-link {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* ==========================================
   PARALLAX & SLIDING TEXT SECTION
=========================================== */
.cv-parallax-video-section {
    position: relative;
    /*height: 75vh;*/
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #111;
    aspect-ratio: 1920 / 911;
    overflow: hidden;
    width: 100%;
}

/* Parallax Background Effect */
.cv-parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed; /* This creates the Parallax effect */
    background-position: center;
    background-size: cover;
    z-index: 1;
}

/* Overlay to darken image */
.cv-parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(14, 25, 34, 0.6); /* Dark blue/grey overlay */
    z-index: 2;
}

/* Infinite Sliding Text (Marquee) */
.cv-sliding-text-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 3;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none; /* So it doesn't block clicks on the button */
}

.cv-sliding-text {
    display: inline-block;
    font-size: clamp(60px, 10vw, 150px); /* Responsive font size */
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    animation: slideTextMarquee 40s linear infinite; /* Adjust speed here */
}

@keyframes slideTextMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Slides exactly half its width to loop */
}

/* ==========================================
   ROTATING PLAY BUTTON STYLES
=========================================== */
.cv-play-center-wrapper {
    position: relative;
    z-index: 4; /* Above the text and overlay */
}

.cv-play-btn-animated {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    text-decoration: none;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.cv-play-btn-animated:hover {
    transform: scale(1.05); /* Slight pop on hover */
}

/* Dark transparent circle base */
.cv-play-dark-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(33, 44, 53, 0.85); /* Dark matching color from image */
    backdrop-filter: blur(5px);
    border-radius: 50%;
    z-index: 1;
}

/* SVG Text Rotation Animation */
.cv-rotating-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    animation: spinCircleText 12s linear infinite; /* Continuous slow spin */
}

@keyframes spinCircleText {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Inner Green Play Icon */
.cv-play-icon-inner {
    position: relative;
    z-index: 3;
    width: 55px;
    height: 55px;
    background-color: #cda85f; /* Brand Green */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding-left: 0px; /* Optically center the play triangle */
    box-shadow: 0 4px 15px rgb(205 168 95 / 72%);
    transition: all 0.3s ease;
}

.cv-play-btn-animated:hover .cv-play-icon-inner {
    background-color: var(--color-2);
}

/* ==========================================
   MODAL CSS (Included for completeness)
=========================================== */
.cv-video-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    visibility: hidden; opacity: 0; transition: all 0.4s ease;
}
.cv-video-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); cursor: pointer;
}
.cv-video-modal-content {
    position: relative; width: 90%; max-width: 1000px; z-index: 10000;
    transform: scale(0.9); transition: all 0.4s ease;
}
.cv-video-wrapper {
    position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000;
    border-radius: 12px; overflow: hidden;
}
.cv-video-wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
.cv-video-close-btn {
    position: absolute; top: -45px; right: 0; background: none; border: none;
    color: #fff; font-size: 30px; cursor: pointer; transition: color 0.3s ease;
}
.cv-video-close-btn:hover { color: #26b15d; }
.cv-video-modal.is-active { visibility: visible; opacity: 1; }
.cv-video-modal.is-active .cv-video-modal-content { transform: scale(1); }
@media (max-width:767.98px){
	.tj-video-image {
        aspect-ratio: 1920 / 1380;
    }
}