*
{ 
    margin: 0; 
    padding: 0; 
    color: #2b373f; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}


:root { 
     --text-blue-button: #0a51e8; 
     --text-blue-button2: #094fe7; 
     --text-color: #061833; 
     --text-color-light: #80a3b7; 
     --text-color-light2: #a2a7b1; 
     --gradient-blue: #dee7fd; 
     --gradient-pink: #f0f5fd; 
     --lavender: #c6c2ba; 
     --card-color: #1b2947; 
     --footer-color: #06183a; 
     --footer-color2: #041f56;

     --font-xs: 0.75rem; 
     --font-small: 0.875rem; 
     --font-normal: 1rem; 
     --font-medium: 1.125rem; 
     --font-large: 1.5rem; 
     --font-xl: 2rem; 
     --font-heading: 2.5rem; 
     --weight-regular: 400; 
     --weight-medium: 500; 
     --weight-bold: 700; 
}  
     
.services-hero 
{ 
    width: 100%;
} 

/* BANNER IMAGE CONTAINER */ 
/* =====================================================
   SERVICES BANNER
   ===================================================== */

.services-banner {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(6, 24, 51, 0.15);
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0.6) 60%,
        powderblue 100%
    );
}

.services-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
    
}


/* =====================================================
   SERVICES TITLE ANIMATION
   ===================================================== */

.services-banner h1 {
    position: absolute;
    top: 90%;
    transform: translateY(-50%);
    font-size: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--text-color);
    letter-spacing: -0.5px;
    z-index: 2;

    /* Initial state */
    opacity: 0;
    transform:
        translateY(calc(-50% + 45px))
        scale(0.92);

    animation:
        servicesMainTitleIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.15s
        forwards;
}


/* =====================================================
   SERVICES TITLE KEYFRAMES
   ===================================================== */

@keyframes servicesMainTitleIn {

    0% {
        opacity: 0;
        transform:
            translateY(calc(-50% + 45px))
            scale(0.92);
    }

    55% {
        opacity: 1;
        transform:
            translateY(calc(-50% - 5px))
            scale(1.03);
    }

    75% {
        transform:
            translateY(calc(-50% + 2px))
            scale(0.99);
    }

    100% {
        opacity: 1;
        transform:
            translateY(-50%)
            scale(1);
    }
}

.services-banner::after 
{ 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 50%; 
    background: linear-gradient(to bottom, transparent 0%, powderblue 100%); 
    z-index: 1; 
    pointer-events: none; 
} 

/* CENTERED TEXT CONTAINER */

.services-hero-container 
{ 
    max-width: 90%; 
    margin: -2px auto 0 auto; 
    padding: 60px 20px 20px;
    background: transparent; 
} 

/* TWO-COLUMN LAYOUT (Left Heading + Right Text) */ 
    
.services-content-row 
{ 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 70px; 
    position: relative; 
} 
    
/* LEFT COLUMN (Headings & Tick Points) */
/* This is the right half of the 2-column text section. */ 

.services-left-col 
{
    flex: 0 0 40%;
} 

/* The main large blue title on the left. */ 

.services-left-col h2 
{ 
    font-size: 3.5rem;
    line-height: 1.15; 
    font-weight: var(--weight-bold); 
    color: var(--text-color); 
    margin-bottom: 35px; 
} 
    
/* The blue highlight part of the title. */
    
.services-left-col h2 span 
{ 
    color: var(--text-blue-button2);
} 
 
/* The sub-heading above the tick points. */ 

.tick-container h3 
{
    font-size: var(--font-large); 
    font-weight: 700; 
    color: #2b373f; 
    margin-bottom: 20px; 
} 
    
/* The list of 5 tick points on the left. */ 
    
.services-points {
    list-style: none;
    padding: 0; 
    margin: 0;
} 
 
.services-points li
{
    display: flex;
    align-items: center; 
    gap: 14px; 
    font-size: var(--font-normal); 
    color: var(--text-color); 
    margin-bottom: 18px; 
} 
      
/* This creates the green circular checkmark icon */ 

.services-points li::before 
{ 
    content: "✓"; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    color: var(--footer-color); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-weight: var(--weight-bold); 
    flex-shrink: 0; 
    background-color: var(--text-blue-button); 
}

/* RIGHT COLUMN (Paragraphs & Promise Points) */
/* This is the right half of the 2-column text section. */ 

.services-right-col 
{ 
    flex: 0 0 55%;
} 

/* The paragraph text describing the services. */ 

.services-right-col p 
{ 
    font-size: var(--font-normal); 
    line-height: 2; 
    color: var(--text-color); 
    margin-bottom: 10px; 
    text-align: justify; 
}

/* heading and its 5 points on the right side. */ 

.right-key-area { 
    margin-top: 25px;
} 

.right-key-area h3 {
    font-size: var(--font-xl);
    font-weight: 700; 
    color: var(--text-color); 
    margin-bottom: 25px; 
    text-align: left; 
} 
    
/* The grid that displays the 5 promise points. */ 
    
.right-points
{ 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    column-gap: 60px; 
    row-gap: 22px; 
    margin-top: 20px; 
}
    
    
/* Each individual promise point */ 

.point { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    font-size: var(--font-normal); 
    color: var(--text-blue-button2); 
    font-weight: 500; 
    text-align: left;
} 
 
/* The blue tick circle next to each promise point. */ 

.point span { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    color: var(--text-blue-button2); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    font-weight: bold; 
} 



/* SERVICES GRID (The 8 Service Cards) */
/* This wraps the entire services card section. */ 

.services-grid-section { 
    padding: 15px 20px 100px 20px; 
    display: flex; 
    justify-content: center; 
} 

/* Centers the 8-card grid inside the page. */ 

.services-grid-container { 
    max-width: 90%; 
    margin: 0 auto; 
    width: 100%; 
    text-align: center; 
} 

/* The main title above the cards. */

.services-grid-title { 
    font-size: 34px; 
    font-weight: 700; 
    color: var(--text-color); 
    line-height: 1.3; 
    margin-bottom: 60px; 
    position: relative;  
    display: inline-block;
    padding: 0 30px; 
}


/* The Left Sparkle */ 

.services-grid-title::before { 
    content: "✦•╌๑⋅⋯"; 
    position: absolute; 
    left: -120px;  
    top: 62%; 
    transform: translateY(-50%); 
    font-size: 25px; 
    opacity: 0.8; 
} 

/* The Right Sparkle */ 

.services-grid-title::after { 
    content: "⋯⋅๑╌•✦"; 
    position: absolute; 
    right: -120px; 
    top: 62%; 
    transform: translateY(-50%); 
    font-size: 25px; 
    opacity: 0.8; 
} 

/* The grid layout */ 

.services-grid-wrapper { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
} 

/* INDIVIDUAL SERVICE CARD */
/* The white card */ 

.service-card { 
    background: #ffffff; 
    border-radius: 16px; 
    padding: 20px 15px; 
    box-shadow:
        0 8px 25px rgba(6, 24, 51, 0.08),
        0 2px 6px rgba(6, 24, 51, 0.04); 
    text-align: left; 
    transition: all 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    position: relative;
    border-left: 4px solid rgba(10, 81, 232, 0.55);

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-left-color 0.3s ease;
} 

.service-card:hover {
    transform: translateY(-7px);
    background-color: #e0e7ed;
    border-left-color: #0a51e8;

    box-shadow:
        0 18px 40px rgba(6, 24, 51, 0.12),
        0 0 0 1px rgba(10, 81, 232, 0.08);
}

.service-card:hover h4 { 
    color: #1a1a1a; 
} 

.service-card:hover p { 
    color: var(--text-color); 
} 

/* Text styling inside the card. */ 

.service-card h4 { 
    font-size: 16px; 
    font-weight: 700; 
    color: var(--text-color); 
    line-height: 1.3; 
} 

.service-card p { 
    font-size: 12px; 
    color: var(--text-color); 
    line-height: 1.5; 
    margin: 0; 
} 

/* CARD IMAGE AREA */
/* fixed height box that holds the card image. */ 

.card-image-box { 
    width: 100%; 
    height: 140px; 
    border-radius: 12px; 
    overflow: hidden; 
    position: relative;
    margin-top: auto;
} 

/* Makes the image fill the box perfectly. */ 

.card-image-box img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

/* CARD ARROW */ 

.card-arrow { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    width: 32px; 
    height: 32px; 
    background: #2b373f; 
    border: 1px solid #e0e0e0; 
    border-radius: 50%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    font-size: 14px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
    color: #ffffff; 
    text-decoration: none; 
    opacity: 1; 
    visibility: visible; 
    transition: all 0.3s ease; 
} 

/* ===== ARROW GLOW (ONLY WHEN HOVERING THE ARROW) ===== */ 

.card-arrow:hover { 
    background: var(--text-color); 
    border: none; 
    color: #ffffff; 
    box-shadow: 0 0 15px rgba(6, 24, 51, 0.5); 
    transform: scale(1.05); 
    cursor: pointer; 
} 

.highlight-blue{ 
    color: var(--text-blue-button2); 
} 

/* RESPONSIVE FOR SERVICE CARDS */
/* On tablets, 4 cards become 2 cards per row. */ 

@media (max-width: 992px) { 
    .services-grid-wrapper { 
        grid-template-columns: repeat(2, 1fr); 
    } 
} 

/* On phones, 2 cards become 1 card per row. */ 

@media (max-width: 600px) { 
    .services-grid-wrapper { 
        grid-template-columns: 1fr; 
    } 

    .services-grid-title { 
        font-size: 28px; 
    } 
} 

body { 
    background: linear-gradient(270deg, powderblue, snow); 
    min-height: 100vh; 
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
} 

/* FLOATING BUBBLES CONTAINER */
/* This holds the 30 floating blue bubbles. */ 

.particle-bg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    z-index: 0; 
    pointer-events: none; 
} 

/* Each individual bubble. */ 

.particle { 
    position: absolute; 
    background: #0a51e8; 
    border-radius: 50%; 
    opacity: 0.22; 
    animation: floatParticle 15s infinite ease-in-out; 
} 

.particle:nth-child(1) { 
    width: 8px; 
    height: 8px; 
    top: 8%; 
    left: 3%; 
    animation-duration: 13s; 
} 

.particle:nth-child(2) { 
    width: 12px; 
    height: 12px; 
    top: 18%; 
    left: 12%; 
    animation-duration: 17s; 
} 

.particle:nth-child(3) { 
    width: 6px; 
    height: 6px; 
    top: 32%; 
    left: 5%; 
    animation-duration: 14s; 
} 

.particle:nth-child(4) { 
    width: 10px; 
    height: 10px; 
    top: 48%; 
    left: 15%; 
    animation-duration: 19s; 
} 

.particle:nth-child(5) { 
    width: 5px; 
    height: 5px; 
    top: 65%; 
    left: 7%; 
    animation-duration: 16s; 
} 

.particle:nth-child(6) { 
    width: 9px; 
    height: 9px; 
    top: 82%; 
    left: 18%; 
    animation-duration: 21s; 
} 

.particle:nth-child(7) { 
    width: 7px; 
    height: 7px; 
    top: 92%; 
    left: 5%; 
    animation-duration: 15s; 
} 

.particle:nth-child(8) { 
    width: 13px; 
    height: 13px; 
    top: 12%; 
    left: 28%; 
    animation-duration: 20s; 
} 

.particle:nth-child(9) { 
    width: 6px; 
    height: 6px; 
    top: 28%; 
    left: 35%; 
    animation-duration: 12s; 
} 

.particle:nth-child(10) { 
    width: 10px; 
    height: 10px; 
    top: 44%; 
    left: 27%; 
    animation-duration: 18s; 
} 

.particle:nth-child(11) { 
    width: 5px; 
    height: 5px; 
    top: 58%; 
    left: 38%; 
    animation-duration: 15s; 
} 

.particle:nth-child(12) { 
    width: 11px; 
    height: 11px; 
    top: 76%; 
    left: 30%; 
    animation-duration: 22s; 
} 

.particle:nth-child(13) { 
    width: 7px; 
    height: 7px; 
    top: 90%; 
    left: 40%; 
    animation-duration: 17s; 
} 

.particle:nth-child(14) { 
    width: 9px; 
    height: 9px; 
    top: 7%; 
    left: 48%; 
    animation-duration: 16s; 
}

.particle:nth-child(15) { 
    width: 14px; 
    height: 14px; 
    top: 22%; 
    left: 58%; 
    animation-duration: 23s; 
} 

.particle:nth-child(16) { 
    width: 6px; 
    height: 6px; 
    top: 38%; 
    left: 50%; 
    animation-duration: 13s; 
} 

.particle:nth-child(17) { 
    width: 10px; 
    height: 10px; 
    top: 54%; 
    left: 62%; 
    animation-duration: 19s; 
} 

.particle:nth-child(18) { 
    width: 5px; 
    height: 5px; 
    top: 70%; 
    left: 52%; 
    animation-duration: 15s; 
} 

.particle:nth-child(19) { 
    width: 8px; 
    height: 8px; 
    top: 86%; 
    left: 65%; 
    animation-duration: 21s; 
} 

.particle:nth-child(20) { 
    width: 12px; 
    height: 12px; 
    top: 95%; 
    left: 55%; 
    animation-duration: 18s; 
} 

.particle:nth-child(21) { 
    width: 7px; 
    height: 7px; 
    top: 10%; 
    left: 72%; 
    animation-duration: 14s; 
} 

.particle:nth-child(22) { 
    width: 11px; 
    height: 11px; 
    top: 25%; 
    left: 84%; 
    animation-duration: 20s; 
} 

.particle:nth-child(23) { 
    width: 5px; 
    height: 5px; 
    top: 40%; 
    left: 74%; 
    animation-duration: 16s; 
} 

.particle:nth-child(24) { 
    width: 9px; 
    height: 9px; 
    top: 55%; 
    left: 90%; 
    animation-duration: 22s; 
} 

.particle:nth-child(25) { 
    width: 13px; 
    height: 13px; 
    top: 68%; 
    left: 78%; 
    animation-duration: 17s; 
} 

.particle:nth-child(26) { 
    width: 6px; 
    height: 6px; 
    top: 80%; 
    left: 94%; 
    animation-duration: 13s; 
} 

.particle:nth-child(27) { 
    width: 8px; 
    height: 8px; 
    top: 92%; 
    left: 82%; 
    animation-duration: 19s; 
} 

.particle:nth-child(28) { 
    width: 10px; 
    height: 10px; 
    top: 15%; 
    left: 95%; 
    animation-duration: 24s; 
} 

.particle:nth-child(29) { 
    width: 5px; 
    height: 5px; 
    top: 52%; 
    left: 3%; 
    animation-duration: 12s; 
} 

.particle:nth-child(30) { 
    width: 14px; 
    height: 14px; 
    top: 74%; 
    left: 96%; 
    animation-duration: 20s; 
} 

@keyframes floatParticle { 
    0% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.16; 
    } 

    25% { 
        transform: translate(35px, -35px) scale(1.15); 
        opacity: 0.28; 
    } 

    50% { 
        transform: translate(70px, 25px) scale(0.9); 
        opacity: 0.20; 
    } 

    75% { 
        transform: translate(-25px, 60px) scale(1.08); 
        opacity: 0.26; 
    } 

    100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.16; 
    } 
}


/* =====================================================
   SERVICE DETAIL MODAL (Pop-up window)
   ===================================================== */

/* The dark overlay that appears behind the modal. */

.service-modal-overlay { 
    position: fixed; 
    inset: 0; 
    width: 100%; 
    height: 100vh; 
    background: rgba(0, 0, 0, 0.55); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 30px; 
    
    opacity: 0; 
    visibility: hidden; 
    
    transition: 
        opacity 0.35s ease, 
        visibility 0.35s ease; 
        
    z-index: 9999; 
    overflow-y: auto;
} 


/* When the .active class is added via JS, the modal appears. */

.service-modal-overlay.active {
    opacity: 1; 
    visibility: visible;
}


/* =====================================================
   MODAL POP-UP BOX
   ===================================================== */

.service-modal {
    position: relative; 
    width: 100%; 
    max-width: 1000px; 
    max-height: 92vh; 
    
     background:
        radial-gradient(
            circle at 20% 20%,
            rgba(10, 81, 232, 0.18) 0%,
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 25%,
            rgba(125, 190, 220, 0.22) 0%,
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(190, 220, 235, 0.28) 0%,
            transparent 38%
        ),
        #ffffff;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;


    border-radius: 24px; 
     
    clip-path: inset(0 round 24px); 
    display: grid; 
    grid-template-columns: 1fr; 
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25); 
    
    /* NEW OPENING ANIMATION */
    transform: translateY(35px) scale(0.94);
    opacity: 0;
    
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
        
    flex-shrink: 0; 
    padding: 40px 55px 50px; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 


/* When opened, the modal slides upward and scales into place. */

.service-modal-overlay.active .service-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}


/* =====================================================
   MODAL CONTENT LAYOUT
   ===================================================== */

.service-modal-content {
    display: contents;
}

/* =====================================================
   MODAL SERVICE TITLE ANIMATION
   ===================================================== */

.service-modal-content h2 {
    grid-row: 1;
    margin: 0;
    padding: 0 55px;
    color: #0b52e8;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;

    /* Hidden before modal opens */
    opacity: 0;
    transform: translateY(30px) scale(0.96);
}


/* Animate the service title when modal opens */

.service-modal-overlay.active .service-modal-content h2 {
    animation: modalServiceTitleIn 0.7s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.15s
        both;
}


/* Heading animation */

@keyframes modalServiceTitleIn {

    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =====================================================
   UNDERLINE OF THE TITLE
   ===================================================== */

.modal-line {
    grid-row: 2;
    width: 75px; 
    height: 5px; 
    background: #125bea; 
    border-radius: 10px; 
    margin: 20px auto 25px;

    /* LINE ANIMATION */
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;

    transition:
        opacity 0.5s ease 0.3s,
        transform 0.5s ease 0.3s;
}


/* Line expands when modal opens. */

.service-modal-overlay.active .modal-line {
    opacity: 1;
    transform: scaleX(1);
}


/* =====================================================
   MODAL IMAGE
   ===================================================== */

.service-modal-image {
    grid-row: 3; 
    width: 100%; 
    min-height: 300px; 
    max-height: 400px; 
    background: transparent;  
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0; 
    overflow: hidden; 
    margin: 0 0 35px; 
    
    border-radius: 20px;
    box-shadow:
        0 18px 45px rgba(6, 24, 51, 0.15),
        0 0 0 1px rgba(10, 81, 232, 0.08);

    /* IMAGE ANIMATION */
    opacity: 0;
    transform: translateY(25px) scale(0.98);

    transition:
        opacity 0.7s ease 0.35s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
         
} 


/* Image appears after title and underline. */

.service-modal-overlay.active .service-modal-image {
    opacity: 1;
    transform: translateY(0) scale(1);
}


.service-modal-image img {
    width: 100%; 
    height: 100%; 
    max-height: 370px; 
    object-fit: cover; 
    display: block;
    transition: transform 0.6s ease; 

}


/* =====================================================
   MODAL "DETAILED INSIGHT" HEADING
   ===================================================== */

.service-modal-content h3 {
    grid-row: 4;
    margin: 0 0 18px;
    color: #071b3a; 
    font-size: 26px; 
    font-weight: 700; 
    line-height: 1.3;

    /* HEADING ANIMATION */
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.6s ease 0.5s,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}


/* Detailed Insight heading appears. */

.service-modal-overlay.active .service-modal-content h3 {
    opacity: 1;
    transform: translateY(0);
}


/* =====================================================
   MODAL DESCRIPTION TEXT
   ===================================================== */

#modalServiceDescription {
    grid-row: 5; 
    margin: 0; 
    color: var(--text-color); 
    font-size: 17px; 
    line-height: 1.8; 
    font-weight: 400;

    /* DESCRIPTION ANIMATION */
    opacity: 0;
    transform: translateY(15px);

    transition:
        opacity 0.6s ease 0.6s,
        transform 0.6s ease 0.6s;
}


/* Description appears. */

.service-modal-overlay.active #modalServiceDescription {
    opacity: 1;
    transform: translateY(0);
}


#modalServiceDescription p {
    color: var(--text-color);
    margin: 0 0 20px; 
}

#modalServiceDescription p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   MODAL FEATURES LIST
   ===================================================== 

.modal-features { 
    grid-row: 6; 
    margin-top: 30px; 
    display: flex; 
    flex-direction: column;
    gap: 14px; 
    padding-bottom: 10px;

     FEATURES ANIMATION 
    opacity: 0;
    transform: translateY(15px);

    transition:
        opacity 0.6s ease 0.7s,
        transform 0.6s ease 0.7s;
} */
.modal-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 35px;
}

/* Features appear. */

.service-modal-overlay.active .modal-features {
    opacity: 1;
    transform: translateY(0);
}


/*.modal-feature {
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
}
 */
.modal-feature {
    background: rgba(10, 81, 232, 0.045);
    border: 1px solid rgba(10, 81, 232, 0.10);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.modal-feature:hover {
    transform: translateY(-3px);
    background: rgba(10, 81, 232, 0.08);
    box-shadow: 0 8px 20px rgba(6, 24, 51, 0.08);
}


/*.modal-feature span {
    color: #125bea; 
    font-size: 20px; 
    font-weight: bold; 
    flex-shrink: 0; 
}
*/

.modal-feature span {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: #0a51e8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
/*.modal-feature p {
    margin: 0; 
    color: var(--text-color); 
    font-size: 16px; 
    line-height: 1.5; 
} */

.modal-feature p {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}
/* =====================================================
   MODAL CLOSE BUTTON
   ===================================================== */

.modal-close {
    position: absolute;
    top: 18px;
    right: 20px;

    padding: 0;
    margin: 0;

    background: transparent;
    color: #061833;

    border: none;
    outline: none;

    font-size: 30px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    z-index: 20;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.modal-close:hover {
    background: transparent;
    color: #0a51e8;

    box-shadow: none;

    transform: scale(1.1);
}


/* =====================================================
   RESPONSIVE FOR MODAL (Mobile screens)
   ===================================================== */

@media (max-width: 768px)
{
    .service-modal-overlay
    { 
        padding: 15px; 
        align-items: flex-start;
    } 

    .service-modal
    { 
        max-width: 100%;
        max-height: 95vh; 
        margin: 20px 0; 
        padding: 30px 25px 35px; 
        border-radius: 18px; 
    } 
    
    .service-modal-close 
    { 
        top: 12px;
        right: 12px; 
        width: 40px; 
        height: 40px; 
        font-size: 23px; 
    } 
        
    .service-modal-content h2 
    { 
        padding: 0 35px; 
        font-size: 28px;
    } 
        
    .modal-line
    {
        margin: 16px auto 22px;
    }
    
    
    .service-modal-image
    { 
        min-height: 220px; 
        max-height: 300px; 
        padding: 10px; 
        margin-bottom: 28px;
    }
    
    
    .service-modal-image img 
    { 
        max-height: 280px;
    } 
    
    .service-modal-content h3 {
    position: relative;
    padding-left: 18px;
    margin-top: 10px;
}

.service-modal-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 5px;
    height: 28px;
    border-radius: 5px;
    background: #0a51e8;
}
    #modalServiceDescription 
    { 
        font-size: 16px; 
        line-height: 1.7; 
    } 
    
    .modal-features 
    { 
        margin-top: 25px; 
        gap: 12px; 
    } 
    
    .modal-feature p 
    { 
        font-size: 15px;
    } 
}


/* =====================================================
   SERVICES SECTION SCROLL ANIMATION
   ===================================================== */

/* Initial state - hidden and slightly shifted */

/* ---------- LEFT COLUMN ---------- */

.services-content-row .services-left-col {

    opacity: 0;

    transform: translateX(-35px);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- RIGHT COLUMN ---------- */

.services-content-row .services-right-col {

    opacity: 0;

    transform: translateX(35px);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- WHEN SECTION ENTERS VIEW ---------- */

.services-content-row.animate-in .services-left-col,
.services-content-row.animate-in .services-right-col {

    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   3. LEFT SIDE CONTENT STAGGER
   ========================================================= */


/* Main Unlocking Growth heading */

.services-content-row .services-left-col h2 {

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0.15s;
}


.services-content-row.animate-in .services-left-col h2 {

    opacity: 1;

    transform: translateY(0);
}


/* Tick container */

.services-content-row .services-left-col .tick-container {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0.35s;
}


.services-content-row.animate-in .services-left-col .tick-container {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   4. RIGHT SIDE PARAGRAPHS
   ========================================================= */

.services-content-row .services-right-col > p {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


/* First paragraph */

.services-content-row.animate-in .services-right-col > p:nth-of-type(1) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.15s;
}


/* Second paragraph */

.services-content-row.animate-in .services-right-col > p:nth-of-type(2) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.30s;
}


/* =========================================================
   5. WHAT WE PROMISE SECTION
   =========================================================
   Heading + promise points appear after the paragraph.
   ========================================================= */


/* Promise heading */

.services-content-row .right-key-area {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


.services-content-row.animate-in .right-key-area {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.45s;
}


/* Promise points - initial */

.services-content-row .right-key-area .point {

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Promise point 1 */

.services-content-row.animate-in .right-key-area .point:nth-child(1) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.55s;
}


/* Promise point 2 */

.services-content-row.animate-in .right-key-area .point:nth-child(2) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.65s;
}


/* Promise point 3 */

.services-content-row.animate-in .right-key-area .point:nth-child(3) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.75s;
}


/* Promise point 4 */

.services-content-row.animate-in .right-key-area .point:nth-child(4) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.85s;
}


/* Promise point 5 */

.services-content-row.animate-in .right-key-area .point:nth-child(5) {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.95s;
}


/* =========================================================
   6. COMPREHENSIVE SOLUTIONS HEADING
   =========================================================
   Hidden until the cards section enters viewport.
   ========================================================= */

.services-grid-title {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Activated by JavaScript */

.services-grid-title.animate-heading {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   7. SERVICE CARDS
   =========================================================
   Cards are hidden initially and appear when the section
   enters the viewport.
   ========================================================= */

.service-card {

    opacity: 0;

    transform:
        translateY(35px)
        scale(0.98);

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   8. CARD VISIBLE STATE
   ========================================================= */

.service-card.animate-card {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   9. CARD STAGGER
   =========================================================
   Each card appears slightly after the previous one.
   ========================================================= */

.service-card.animate-card:nth-child(1) {
    transition-delay: 0.05s;
}

.service-card.animate-card:nth-child(2) {
    transition-delay: 0.12s;
}

.service-card.animate-card:nth-child(3) {
    transition-delay: 0.19s;
}

.service-card.animate-card:nth-child(4) {
    transition-delay: 0.26s;
}

.service-card.animate-card:nth-child(5) {
    transition-delay: 0.33s;
}

.service-card.animate-card:nth-child(6) {
    transition-delay: 0.40s;
}

.service-card.animate-card:nth-child(7) {
    transition-delay: 0.47s;
}

.service-card.animate-card:nth-child(8) {
    transition-delay: 0.54s;
}


/* 10. CARD IMAGE */

.card-image-box img {

    opacity: 1;

    transform: none;

    transition: none;
}


/* =========================================================
   11. CARD HOVER
   =========================================================
   Keep your existing hover effect working normally.
   ========================================================= */

.service-card:hover {

    transform: translateY(-7px);

    background-color: #e0e7ed;

    border-left-color: #0a51e8;

    box-shadow:
        0 18px 40px rgba(6, 24, 51, 0.12),
        0 0 0 1px rgba(10, 81, 232, 0.08);
}
.service-modal-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   12. MODAL SCROLLBARS
   ========================================================= */

.service-modal-overlay,
.service-modal {

    scrollbar-width: none;

    -ms-overflow-style: none;
}


.service-modal-overlay::-webkit-scrollbar,
.service-modal::-webkit-scrollbar {

    display: none;
}


/* =========================================================
   13. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .services-banner h1,

    .services-content-row .services-left-col,
    .services-content-row .services-right-col,
    .services-content-row .services-left-col h2,
    .services-content-row .services-left-col .tick-container,
    .services-content-row .services-right-col > p,
    .services-content-row .right-key-area,
    .services-content-row .right-key-area .point,

    .services-grid-title,
    .service-card {

        opacity: 1;

        transform: none;

        transition: none;

        animation: none;
    }
}
.services-grid-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.services-grid-section .research-wave-bg {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 45%;

    overflow: hidden;
    pointer-events: none;

    z-index: 0;
}

.services-grid-section .research-wave-bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center bottom;

    opacity: 0.8;
}

.services-grid-section .services-grid-container {
    position: relative;
    z-index: 2;
}
/* Mobile View Fix: Prevent card title from overlapping the arrow icon */
@media (max-width: 1150px) {
    .service-card h4 { padding-right: 45px !important; }
}