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

.services{

    padding:120px 0;

    background:#f8fafc;

}


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

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-header .section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-header .section-title{

    font-size:46px;

    line-height:1.2;

    color:var(--secondary);

    margin-bottom:22px;

}

.section-header .section-description{

    font-size:17px;

    line-height:1.9;

    color:var(--text);

}


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

.services-grid{

    display:grid;

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

    gap:35px;

}


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

.service-card{

    background:#ffffff;

    border-radius:22px;

    padding:45px 35px;

    position:relative;

    overflow:hidden;

    transition:.4s ease;

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

    box-shadow:0 12px 35px rgba(0,0,0,.06);

}


/* ==========================================
   TOP ACCENT
========================================== */

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s ease;

}


/* ==========================================
   CARD HOVER
========================================== */

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 22px 50px rgba(0,0,0,.12);

}

.service-card:hover::before{

    transform:scaleX(1);

}


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

.service-icon{

    width:82px;

    height:82px;

    border-radius:20px;

    background:rgba(234,88,12,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    transition:.4s ease;

}

.service-icon i{

    font-size:42px;

    color:var(--primary);

    transition:.4s ease;

}

.service-card:hover .service-icon{

    background:var(--primary);

    transform:rotate(-8deg);

}

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

    color:#fff;

    transform:scale(1.15);

}

/* ==========================================
   CARD TITLE
========================================== */

.service-card h3{

    font-size:24px;

    color:var(--secondary);

    margin-bottom:18px;

    line-height:1.3;

}


/* ==========================================
   CARD DESCRIPTION
========================================== */

.service-card p{

    font-size:16px;

    line-height:1.8;

    color:var(--text);

    margin-bottom:30px;

}


/* ==========================================
   LEARN MORE LINK
========================================== */

.service-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

    font-size:16px;

    transition:.35s ease;

}

.service-link span{

    transition:.35s ease;

}

.service-link:hover span{

    transform:translateX(8px);

}

/* ==========================================
   RESPONSIVE - LARGE LAPTOP
========================================== */

@media (max-width:1200px){

    .services-grid{

        gap:28px;

    }

    .service-card{

        padding:40px 28px;

    }

    .section-header .section-title{

        font-size:40px;

    }

}


/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width:992px){

    .services{

        padding:100px 0;

    }

    .services-grid{

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

        gap:30px;

    }

    .section-header{

        margin-bottom:60px;

    }

    .section-header .section-title{

        font-size:36px;

    }

    .service-card{

        padding:35px 28px;

    }

    .service-icon{

        width:74px;

        height:74px;

    }

    .service-icon img{

        width:38px;

        height:38px;

    }

}


/* ==========================================
   RESPONSIVE - MOBILE
========================================== */

@media (max-width:768px){

    .services{

        padding:80px 0;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-header .section-title{

        font-size:30px;

    }

    .section-header .section-description{

        font-size:16px;

    }

    .service-card{

        padding:32px 25px;

    }

    .service-card h3{

        font-size:22px;

    }

    .service-card p{

        font-size:15px;

    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width:480px){

    .services{

        padding:70px 0;

    }

    .section-header .section-title{

        font-size:26px;

    }

    .section-header .section-description{

        font-size:15px;

    }

    .service-card{

        padding:28px 22px;

        border-radius:18px;

    }

    .service-icon{

        width:66px;

        height:66px;

        border-radius:16px;

    }

    .service-icon img{

        width:34px;

        height:34px;

    }

    .service-card h3{

        font-size:20px;

    }

    .service-link{

        font-size:15px;

    }

}


/* ==========================================
   ACCESSIBILITY
========================================== */

.service-card:focus-within{

    outline:2px solid var(--primary);

    outline-offset:4px;

}


/* ==========================================
   REDUCED MOTION
========================================== */

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

    .service-card,
    .service-icon,
    .service-link,
    .service-link span{

        transition:none !important;

    }

}