/* ========================================
   MARAGAMO Tech Solutions
   CSS: services.css
   Version: 2.1
======================================== */


/* ========================================
   SERVICES SECTION
======================================== */

.services{

    padding:110px 0;

    background:var(--navy);

}


/* ========================================
   SECTION HEADER
======================================== */

.services .section-tag{

    display:block;

    text-align:center;

    color:var(--gold);

    font-size:14px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.services .section-title{

    max-width:900px;

    margin:20px auto;

    text-align:center;

    font-size:64px;

    font-weight:800;

    line-height:1.2;

}

.services .section-description{

    max-width:700px;

    margin:0 auto 70px;

    text-align:center;

    color:var(--text-muted);

    font-size:20px;

    line-height:1.8;

}


/* ========================================
   SERVICES GRID
======================================== */

.service-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}


/* ========================================
   SERVICE CARD
======================================== */

.service-card{

    background:var(--navy-light);

    border:1px solid rgba(255,255,255,.05);

    border-radius:20px;

    padding:40px 30px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    transition:var(--transition);

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.45);

    box-shadow:0 20px 40px rgba(0,0,0,.35);

}


/* ========================================
   SERVICE ICON
======================================== */

.service-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:35px;

    background:rgba(212,175,55,.08);

    border:2px solid rgba(212,175,55,.25);

    transition:var(--transition);

}

.service-icon i{

    font-size:34px;

    color:var(--gold);

    transition:var(--transition);

}

.service-card:hover .service-icon{

    transform:rotate(8deg) scale(1.08);

    background:var(--gold);

    border-color:var(--gold);

}

.service-card:hover .service-icon i{

    color:var(--navy);

}


/* ========================================
   SERVICE TITLE
======================================== */

.service-card h3{

    color:var(--gold);

    font-size:28px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:18px;

}


/* ========================================
   SERVICE DESCRIPTION
======================================== */

.service-card p{

    color:var(--text-muted);

    font-size:16px;

    line-height:1.8;

    margin-bottom:25px;

}


/* ========================================
   SERVICE LINK
======================================== */

.service-link{

    margin-top:auto;

    color:var(--gold);

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);

}

.service-link:hover{

    color:var(--white);

}

/* ========================================
   SERVICE DETAIL
======================================== */

.service-detail{

    padding:110px 0;

    background:var(--bg-secondary);

}


.service-detail-container{

    display:grid;

    grid-template-columns:1.1fr 0.9fr;

    gap:80px;

    align-items:center;

}


/* ========================================
   SERVICE DETAIL CONTENT
======================================== */

.service-detail-content{

    max-width:650px;

}


.service-detail-content h2{

    font-size:48px;

    line-height:1.2;

    margin:0 0 25px;

    color:var(--text-light);

}


.service-detail-content > p{

    font-size:18px;

    line-height:1.8;

    color:var(--text-muted);

    margin-bottom:20px;

}


/* ========================================
   SERVICE FEATURES
======================================== */

.service-features{

    display:flex;

    flex-direction:column;

    gap:24px;

    margin-top:35px;

}


.service-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

}


.service-feature > i{

    flex-shrink:0;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:rgba(218,165,32,0.12);

    color:var(--gold);

    font-size:20px;

}


.service-feature h3{

    margin:0 0 6px;

    font-size:20px;

    color:var(--text-light);

}


.service-feature p{

    margin:0;

    font-size:16px;

    line-height:1.6;

    color:var(--text-muted);

}


/* ========================================
   SERVICE VISUAL
======================================== */

.service-detail-visual{

    display:flex;

    align-items:center;

    justify-content:center;

}


.service-visual-card{

    width:100%;

    min-height:400px;

    padding:50px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:var(--bg-primary);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,0.25);

}


.service-visual-card > i{

    width:100px;

    height:100px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    border-radius:50%;

    background:rgba(218,165,32,0.10);

    border:2px solid rgba(218,165,32,0.45);

    color:var(--gold);

    font-size:42px;

}


.service-visual-card span{

    margin-bottom:15px;

    color:var(--gold);

    font-size:14px;

    font-weight:600;

    letter-spacing:3px;

}


.service-visual-card strong{

    margin-bottom:15px;

    font-size:30px;

    color:var(--text-light);

}


.service-visual-card p{

    margin:0;

    font-size:17px;

    line-height:1.7;

    color:var(--text-muted);

}


/* ========================================
   SERVICE DETAIL RESPONSIVE
======================================== */

@media (max-width: 992px){

    .service-detail{

        padding:85px 0;

    }

    .service-detail-container{

        grid-template-columns:1fr;

        gap:55px;

    }

    .service-detail-content{

        max-width:none;

    }

}


@media (max-width: 768px){

    .service-detail{

        padding:70px 0;

    }

    .service-detail-content h2{

        font-size:38px;

    }

    .service-detail-content > p{

        font-size:17px;

    }

    .service-visual-card{

        min-height:320px;

        padding:40px 25px;

    }

}


@media (max-width: 480px){

    .service-detail-content h2{

        font-size:32px;

    }

    .service-feature{

        gap:14px;

    }

    .service-feature > i{

        width:42px;

        height:42px;

        font-size:17px;

    }

    .service-visual-card strong{

        font-size:26px;

    }

}

/* ========================================
   ALTERNATING SERVICE DETAIL
======================================== */

.service-detail-alt{
    background:var(--bg-primary);
}

/* ========================================
   SERVICES PAGE - FINAL SPACING
======================================== */

.services .service-grid {
    margin-bottom: 90px;
}

.service-detail {
    padding: 85px 0;
}

.service-detail + .service-detail {
    padding-top: 70px;
}


/* ========================================
   SERVICES CTA
======================================== */

.services-cta {
    padding: 110px 20px;
    text-align: center;
    background: var(--bg-secondary);
}

.services-cta .section-tag {
    display: block;
    margin-bottom: 20px;
}

.services-cta h2 {
    max-width: 850px;
    margin: 0 auto 25px;
    font-size: 48px;
    line-height: 1.2;
    color: var(--text-light);
}

.services-cta p {
    max-width: 700px;
    margin: 0 auto 35px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-muted);
}

.services-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
}


/* ========================================
   SERVICES CTA RESPONSIVE
======================================== */

@media (max-width: 768px) {

    .service-detail {
        padding: 70px 0;
    }

    .service-detail + .service-detail {
        padding-top: 60px;
    }

    .services-cta {
        padding: 80px 20px;
    }

    .services-cta h2 {
        font-size: 38px;
    }

}

@media (max-width: 480px) {

    .services-cta h2 {
        font-size: 32px;
    }

    .services-cta p {
        font-size: 16px;
    }

}

/* ========================================
   SUPPORT → CTA SPACING
======================================== */

#support {
    padding-bottom: 35px;
}

.services-cta {
    padding-top: 75px;
}