@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
}

.services{
    position:relative;
    width:100%;
    height:calc(100vh - 95px);
    min-height:650px;
    max-height:900px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#ffffff;
    padding:45px 0 20px;
    box-sizing:border-box;
}

.services-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.services-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(201,162,39,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(201,162,39,.035) 1px,transparent 1px);
    background-size:50px 50px;
}

.services-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
}

.services-glow-one{
    width:430px;
    height:430px;
    top:-240px;
    left:-170px;
    background:rgba(201,162,39,.10);
}

.services-glow-two{
    width:450px;
    height:450px;
    right:-200px;
    bottom:-250px;
    background:rgba(201,162,39,.10);
}

.services-container{
    position:relative;
    width:min(92%,1400px);
    height:100%;
    margin:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    z-index:5;
}

.services-header{
    text-align:center;
    max-width:900px;
    margin:0 auto 28px;
}

.services-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 18px;
    margin-bottom:10px;
    background:#ffffff;
    border:1px solid rgba(201,162,39,.35);
    color:#C9A227;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:2px;
}

.services-header h2{
    margin:0 0 7px;
    color:#071A35;
    font-size:clamp(2.8rem,4vw,4rem);
    line-height:1;
    font-weight:800;
    letter-spacing:-2px;
}

.services-header h2 span{
    color:#C9A227;
}

.services-header h3{
    margin:0 0 10px;
    color:#111111;
    font-size:1.25rem;
    line-height:1.3;
    font-weight:700;
}

.services-header p{
    max-width:850px;
    margin:auto;
    color:#4f5d70;
    font-size:.88rem;
    line-height:1.55;
}

.services-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px 35px;
    width:100%;
}

.service-card{
    position:relative;
    text-align:center;
    padding:15px 20px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(201,162,39,.20);
    transition:.4s ease;
    box-sizing:border-box;
    opacity:0;
    transform:translateY(25px);
}

.service-card:hover{
    transform:translateY(-8px);
    background:#ffffff;
    border-color:#C9A227;
    box-shadow:0 22px 45px rgba(15,23,42,.09);
}

.service-icon{
    width:92px;
    height:92px;
    margin:0 auto 10px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #111111;
    background:#ffffff;
    color:#B8860B;
    font-size:32px;
    transition:.4s ease;
}

.service-card:hover .service-icon{
    background:#B8860B;
    color:#ffffff;
    border-color:#B8860B;
    transform:translateY(-4px);
}

.service-card h4{
    margin:0 0 7px;
    color:#C9A227;
    font-size:1rem;
    line-height:1.25;
    font-weight:800;
}

.service-card p{
    max-width:280px;
    margin:auto;
    color:#222222;
    font-size:.72rem;
    line-height:1.5;
}

.services-visible .service-card{
    opacity:1;
    transform:translateY(0);
    transition:
        opacity .6s ease,
        transform .6s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.services-visible .service-card:nth-child(1){
    transition-delay:.05s;
}

.services-visible .service-card:nth-child(2){
    transition-delay:.12s;
}

.services-visible .service-card:nth-child(3){
    transition-delay:.19s;
}

.services-visible .service-card:nth-child(4){
    transition-delay:.26s;
}

.services-visible .service-card:nth-child(5){
    transition-delay:.33s;
}

.services-visible .service-card:nth-child(6){
    transition-delay:.40s;
}

@media(max-width:1200px){

    .services{
        height:auto;
        min-height:100vh;
        max-height:none;
        padding:80px 0;
    }

    .services-container{
        height:auto;
    }

    .services-list{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .services{
        padding:70px 0;
    }

    .services-header{
        margin-bottom:35px;
    }

    .services-header h2{
        font-size:2.8rem;
    }

    .services-header h3{
        font-size:1.05rem;
    }

    .services-header p{
        font-size:.82rem;
    }

    .services-list{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

    .service-card{
        padding:15px 10px;
    }

    .service-icon{
        width:72px;
        height:72px;
        font-size:25px;
    }

    .service-card h4{
        font-size:.82rem;
    }

    .service-card p{
        font-size:.66rem;
    }
}

@media(max-width:480px){

    .services{
        padding:60px 0;
    }

    .services-container{
        width:92%;
    }

    .services-header{
        margin-bottom:28px;
    }

    .services-header h2{
        font-size:2.4rem;
    }

    .services-header h3{
        font-size:1rem;
    }

    .services-header p{
        font-size:.78rem;
        line-height:1.6;
    }

    .services-list{
        grid-template-columns:repeat(3,1fr);
        gap:12px;
    }

    .service-card{
        padding:12px 6px;
    }

    .service-icon{
        width:58px;
        height:58px;
        font-size:20px;
        border-width:1.5px;
        margin-bottom:8px;
    }

    .service-card h4{
        font-size:.7rem;
        line-height:1.2;
    }

    .service-card p{
        font-size:.56rem;
        line-height:1.35;
    }
}