/* ==========================================
   Mr.aiwithmahdi
   Services Page Premium Design
   CSS Part 1
   Base + Hero
========================================== */


/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family: Vazirmatn, sans-serif;

    background:
    radial-gradient(
        circle at 15% 20%,
        rgba(212,175,55,.12),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 80%,
        rgba(0,120,255,.10),
        transparent 35%
    ),

    linear-gradient(
        180deg,
        #050505,
        #090909,
        #020202
    );

    color:#fff;

    min-height:100vh;

    overflow-x:hidden;

}


/* Links */

a{

    text-decoration:none;

    color:inherit;

}



/* Header */

header{

    width:100%;

    position:relative;

    z-index:10;

    padding:25px 0;

}



nav{

    width:90%;

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:center;

    gap:35px;

}


nav a{

    color:#ddd;

    font-size:.95rem;

    transition:.3s ease;

}



nav a:hover{

    color:#d4af37;

}



/* Main Container */


main{

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* Hero */


.services-hero{

    min-height:75vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

}



/* Glow Background */


.services-hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    background:

    radial-gradient(
        circle,
        rgba(212,175,55,.18),
        transparent 70%
    );


    filter:blur(70px);

    z-index:-1;


    animation:

    heroPulse 8s infinite alternate;

}



@keyframes heroPulse{

    from{

        transform:scale(1);

        opacity:.5;

    }


    to{

        transform:scale(1.3);

        opacity:1;

    }

}



.services-hero span{


    color:#d4af37;

    letter-spacing:3px;

    font-size:.9rem;

    margin-bottom:25px;


}



.services-hero h1{


    max-width:850px;

    font-size:4rem;

    line-height:1.4;

    background:

    linear-gradient(
        90deg,
        #fff,
        #d4af37,
        #fff3b0,
        #d4af37
    );


    background-size:300%;


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:

    goldMove 7s linear infinite;


}



@keyframes goldMove{


    0%{

        background-position:0%;

    }


    100%{

        background-position:300%;

    }

}




.services-hero p{


    max-width:750px;

    margin-top:30px;

    color:#bbb;

    line-height:2.2;

    font-size:1.1rem;


}
/* ==========================================
   Mr.aiwithmahdi
   Services Page Premium Design
   CSS Part 2
   Service Cards
========================================== */


/* Services Section */


.services-list{

    padding:100px 0;

    text-align:center;

}



.services-list h2,
.process h2{

    font-size:2.5rem;

    margin-bottom:60px;

    background:

    linear-gradient(
        90deg,
        #fff,
        #d4af37
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/* Grid */


.services-grid{


    display:grid;

    grid-template-columns:

    repeat(2,1fr);


    gap:35px;


}



/* Cards */


.service-card{


    position:relative;

    padding:45px 35px;


    border-radius:30px;


    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.08),

        rgba(255,255,255,.02)

    );


    border:

    1px solid

    rgba(255,255,255,.12);


    backdrop-filter:

    blur(25px);


    overflow:hidden;


    transition:

    .5s ease;


}



/* Card Light */


.service-card::before{


    content:"";


    position:absolute;


    width:250px;


    height:250px;


    top:-120px;


    right:-120px;


    background:


    radial-gradient(

        circle,

        rgba(212,175,55,.25),

        transparent 70%

    );


    filter:blur(30px);


    opacity:0;


    transition:.5s;


}



/* Shine */


.service-card::after{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:80%;


    height:100%;


    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );


    transform:

    skewX(-25deg);


    transition:.8s;


}



/* Hover */


.service-card:hover{


    transform:


    translateY(-15px)

    scale(1.03);


    border-color:

    rgba(212,175,55,.5);



    box-shadow:


    0 30px 80px

    rgba(0,0,0,.5),


    0 0 40px

    rgba(212,175,55,.2);


}



.service-card:hover::before{


    opacity:1;


}



.service-card:hover::after{


    left:140%;


}



/* Card Text */


.service-card h3{


    position:relative;


    z-index:2;


    font-size:1.5rem;


    margin-bottom:20px;


    color:#fff;


}



.service-card p{


    position:relative;


    z-index:2;


    color:#bbb;


    line-height:2;


    font-size:1rem;


}



/* Card Number Style */


.service-card::marker{

    color:#d4af37;

}
/* ==========================================
   Mr.aiwithmahdi
   Services Page Premium Design
   CSS Part 3
   Process + CTA
========================================== */


/* ==========================================
   PROCESS SECTION
========================================== */


.process{


    padding:100px 0;

    text-align:center;


}



.process-list{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}



/* Process Items */


.process-list div{


    position:relative;


    padding:35px 20px;


    border-radius:25px;


    background:


    linear-gradient(

    145deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.02)

    );


    border:

    1px solid

    rgba(255,255,255,.12);


    color:#fff;


    font-size:1rem;


    transition:.45s ease;


    overflow:hidden;


}



/* Step Number */


.process-list div::before{


    content:"";


    position:absolute;


    top:15px;


    right:20px;


    font-size:3rem;


    font-weight:900;


    color:


    rgba(212,175,55,.15);


}



/* Hover */


.process-list div:hover{


    transform:

    translateY(-12px);


    border-color:

    rgba(212,175,55,.5);


    box-shadow:


    0 25px 60px

    rgba(0,0,0,.45),


    0 0 30px

    rgba(212,175,55,.15);


}



/* ==========================================
   CTA SECTION
========================================== */


.services-cta{


    position:relative;


    margin:

    80px 0;


    padding:

    80px 40px;


    text-align:center;


    border-radius:40px;


    overflow:hidden;


    background:


    linear-gradient(

    135deg,

    rgba(212,175,55,.15),

    rgba(255,255,255,.05)

    );


    border:

    1px solid

    rgba(255,255,255,.15);



}



/* CTA Glow */


.services-cta::before{


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    top:50%;


    left:50%;


    transform:

    translate(-50%,-50%);


    background:


    radial-gradient(

    circle,

    rgba(212,175,55,.25),

    transparent 70%

    );


    filter:blur(60px);


}



/* CTA Text */


.services-cta h2{


    position:relative;


    z-index:2;


    font-size:2.5rem;


    line-height:1.5;


    margin-bottom:40px;


}



/* CTA Button */


.services-cta a{


    position:relative;


    z-index:2;


    display:inline-block;


    padding:

    16px 45px;


    border-radius:50px;


    background:


    linear-gradient(

    90deg,

    #d4af37,

    #fff0a8

    );


    color:#050505;


    font-weight:800;


    transition:.4s ease;


}



/* Button Hover */


.services-cta a:hover{


    transform:

    translateY(-8px)

    scale(1.05);


    box-shadow:


    0 20px 50px

    rgba(212,175,55,.35);


}



/* Smooth Appearance */


.services-list,
.process,
.services-cta{


    animation:

    fadeUp 1s ease both;


}



@keyframes fadeUp{


    from{


        opacity:0;


        transform:

        translateY(50px);


    }



    to{


        opacity:1;


        transform:

        translateY(0);


    }


}
/* ==========================================
   Mr.aiwithmahdi
   Services Page Premium Design
   CSS Part 4
   Final Responsive + Optimization
========================================== */


/* ==========================================
   TABLET
========================================== */


@media(max-width:1000px){


    nav{

        gap:20px;

    }


    .services-hero h1{

        font-size:3rem;

    }



    .services-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



    .process-list{


        grid-template-columns:

        repeat(2,1fr);


    }



}



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


@media(max-width:700px){



    main{

        width:92%;

    }



    header{

        padding:20px 0;

    }



    nav{


        flex-wrap:wrap;

        gap:15px;


    }



    nav a{


        font-size:.85rem;


    }




    /* Hero */


    .services-hero{


        min-height:65vh;


    }



    .services-hero h1{


        font-size:2rem;


        line-height:1.7;


    }



    .services-hero p{


        font-size:.95rem;


        line-height:2;


    }




    /* Services Cards */


    .services-list{


        padding:60px 0;


    }



    .services-list h2,
    .process h2{


        font-size:2rem;


        margin-bottom:35px;


    }



    .services-grid{


        grid-template-columns:

        1fr;


        gap:20px;


    }



    .service-card{


        padding:35px 25px;


        border-radius:25px;


    }



    .service-card h3{


        font-size:1.25rem;


    }



    .service-card p{


        font-size:.9rem;


    }




    /* Process */


    .process{


        padding:60px 0;


    }



    .process-list{


        grid-template-columns:

        1fr;


        gap:20px;


    }



    .process-list div{


        padding:30px 20px;


    }




    /* CTA */


    .services-cta{


        margin:50px 0;


        padding:50px 20px;


        border-radius:30px;


    }



    .services-cta h2{


        font-size:1.7rem;


        line-height:1.8;


    }



    .services-cta a{


        width:100%;


        padding:15px;


    }



}



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


@media(max-width:400px){



    .services-hero h1{


        font-size:1.7rem;


    }



    .services-hero span{


        font-size:.75rem;


    }



    .service-card{


        padding:25px 18px;


    }



    .services-cta h2{


        font-size:1.4rem;


    }



}



/* ==========================================
   PERFORMANCE
========================================== */


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



    *,
    *::before,
    *::after{


        animation-duration:.01ms!important;


        animation-iteration-count:1!important;


        transition-duration:.01ms!important;


        scroll-behavior:auto!important;


    }


}

/* ==========================================
   JS Scroll Reveal
========================================== */


.hidden{

    opacity:0;

    transform:

    translateY(50px);

    transition:

    all .8s ease;

}



.show{

    opacity:1;

    transform:
.service-card{

    display:block;

    color:inherit;

}

    translateY(0);

}
/* ==========================================
   Services Card Button
   Mr.aiwithmahdi
========================================== */


.service-card a{


    display:inline-block;


    margin-top:30px;


    padding:14px 30px;


    border-radius:50px;


    background:


    linear-gradient(

    90deg,

    #d4af37,

    #fff0a8

    );


    color:#050505;


    font-weight:800;


    font-size:.95rem;


    transition:.4s ease;


}



.service-card a:hover{


    transform:


    translateY(-5px);



    box-shadow:


    0 15px 40px

    rgba(212,175,55,.35);


}



/* Keep Card Layout Clean */


.service-card{


    display:flex;


    flex-direction:column;


}



.service-card a{


    align-self:center;


}