/* ============================================================
   SERVICES.CSS — Layout Only
   ============================================================
   Visual styles live in components.css.
   This file only controls positioning and layout specific
   to the services section.
   ============================================================ */

.service {
    padding: var(--section-pad-y) var(--section-pad-x);
}

/* Grid layout for the card--gradient container */
.service-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(320px, 1fr);
    gap: var(--space-6);
    padding: var(--space-10) 40px;
}

/* Left column */
.service-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 620px;
}

/* Right column */
.service-right {
    display: grid;
    gap: var(--space-5);
}

/* Card inner layout — icon left, text right */
.service-card-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
}

/* Service image */
.service-icon {
    width: 150px;
    height: 140px;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 4px;
    border-radius: var(--radius-md);
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* Icon hover — scoped to service-right so it doesn't affect other card--glass uses */
.service-right .card--glass:hover .service-icon {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px rgba(41, 199, 250, 0.45));
}

/* Responsive */
@media (max-width: 980px) {
    .service-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .service {
        padding: 56px var(--section-pad-x);
    }

    .service-layout {
        padding: var(--space-6);
    }
}

@media screen and (max-width: 600px){
    .service-icon{
        display:none
    }
}