/* ===== Services Hero ===== */
.services-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: 180px 20px 220px;
    background-color: #032550;
    background-image: linear-gradient(180deg, rgba(3,37,80,0.83) 0%, rgba(3,37,80,0.81) 100%),
                      url('../assets/images/Services-Hero.jpg');
    background-size: cover;
    background-position: bottom center;
    text-align: center;
}
.services-hero .container {
    position: relative;
    z-index: 1;
}
.services-hero-content {
    max-width: 750px;
    margin: 0 auto;
}
.services-hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2rem, 5vw, 40px);
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.services-hero-wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 0;
    z-index: 1;
}
.services-hero-wave-bottom svg {
    display: block;
    width: 100%;
    height: 90px;
}

/* ===== Full-Service Solutions Section ===== */
.services-solutions {
    padding: 60px 0 50px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f8fc 100%);
}
.services-solutions .section-header {
    margin-bottom: 50px;
}
.services-solutions .section-header h2 {
    font-size: clamp(1.75rem, 4vw, 38px);
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 20px;
}
.solutions-subtitle {
    color: var(--color-teal) !important;
    font-size: 1.2rem !important;
    font-weight: 600;
    line-height: 1.4;
    max-width: 780px;
    margin: 0 auto;
}
.solutions-subtitle em {
    font-style: italic;
}

/* 3 Service Cards Row */
.service-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.service-card {
    background: var(--color-white);
    border-radius: 10px;
    padding: 36px 24px;
    text-align: center;
    box-shadow: 0 0 48px 10px rgba(106,133,156,0.1);
    transition: transform 300ms ease, box-shadow 300ms ease;
    cursor: default;
}
.service-card:hover {
    transform: scale(1.04);
    box-shadow: 0 0 48px 10px rgba(106,133,156,0.3);
}

/* Icon swap on hover */
.service-card-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    position: relative;
}
.service-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.service-card-icon .icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 300ms ease;
}
.service-card-icon .icon-default {
    transition: opacity 300ms ease;
}
.service-card:hover .icon-default {
    opacity: 0;
}
.service-card:hover .icon-hover {
    opacity: 1;
}

.service-card h3 {
    font-size: 30px;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 12px;
}
.service-card p {
    color: var(--color-gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 260px;
    margin: 0 auto;
}

.services-solutions .section-ctas {
    margin-top: 40px;
}

/* ===== How Can We Help — 12 Video Types ===== */
.services-types {
    padding: 70px 0 80px;
    background: #f8f8fc;
}
.services-types .section-header {
    margin-bottom: 50px;
}
.services-types .section-header h2 {
    font-size: clamp(1.75rem, 4vw, 38px);
    font-weight: 600;
    color: var(--color-teal);
    margin-bottom: 20px;
}
.types-subtitle {
    color: var(--color-gray-600) !important;
    font-size: 1.1rem !important;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}
.types-subtitle em {
    font-style: italic;
}

/* Video Type Grid (3 columns) */
.video-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.video-type-card {
    background: var(--color-white);
    border-radius: 10px;
    padding: 36px 24px;
    text-align: center;
    box-shadow: 0 0 48px 10px rgba(106,133,156,0.1);
    transition: transform 300ms ease, box-shadow 300ms ease;
    cursor: default;
}
.video-type-card:hover {
    transform: scale(1.04);
    box-shadow: 0 0 48px 10px rgba(106,133,156,0.3);
}

.video-type-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
}
.video-type-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-type-card h3 {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: 10px;
}
.video-type-card p {
    color: var(--color-gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 240px;
    margin: 0 auto;
}

/* ===== Services CTA Section ===== */
.services-cta-section {
    padding: 60px 0 80px;
    background: #f8f8fc;
}
.services-cta-box {
    background: linear-gradient(150deg, rgba(0,116,170,0.9) 25%, rgba(173,209,65,0.9) 115%),
                url('../assets/images/Video-Project-Corporate-videography.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 100px 40px 80px;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}
.services-cta-box h2 {
    color: var(--color-white);
    font-size: clamp(1.5rem, 3.5vw, 38px);
    font-weight: 600;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

.services-cta-box .section-ctas {
    margin-top: 0;
}

/* ===== Footer override (wave + position) ===== */
.footer {
    position: relative;
    padding-top: 120px;
    margin-top: -1px;
}
.footer-wave-top {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    line-height: 0;
    z-index: 1;
}
.footer-wave-top svg {
    display: block;
    width: 100%;
    height: 90px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .service-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .video-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-hero {
        padding: 120px 20px 160px;
    }
    .service-cards-row {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .video-type-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .services-cta-box {
        padding: 60px 24px 50px;
    }
}