/*==================================================
  PART 2A
  Variables, Reset, Layout, Background,
  Section Header & Workflow Timeline
==================================================*/

/*==============================
ROOT VARIABLES
==============================*/

:root {

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --secondary: #06b6d4;

    --accent: #7c3aed;

    --success: #10b981;

    --white: #ffffff;

    --text-dark: #0f172a;
    --text: #334155;
    --text-light: #64748b;

    --border: rgba(255,255,255,.18);

    --glass-bg: rgba(255,255,255,.72);

    --section-bg:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #eef6ff 100%
        );

    --shadow-sm:
        0 8px 20px rgba(15,23,42,.05);

    --shadow:
        0 20px 60px rgba(37,99,235,.12);

    --shadow-lg:
        0 35px 80px rgba(15,23,42,.15);

    --radius-sm:14px;
    --radius:22px;
    --radius-lg:32px;

    --transition:.35s ease;

    --container:1320px;

}

/*==============================
RESET
==============================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    "Inter",
    sans-serif;

    color:var(--text);

    background:#fff;

    line-height:1.7;

    overflow-x:hidden;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

.wp-services-section{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:var(--section-bg);

    isolation:isolate;

}

/*==============================
CONTAINER
==============================*/

.wp-services-section .container{

    width:min(92%,var(--container));

    margin:auto;

    position:relative;

    z-index:20;

}

/*==============================
BACKGROUND GRID
==============================*/

.background-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
        rgba(37,99,235,.05) 1px,
        transparent 1px),

        linear-gradient(
        90deg,
        rgba(37,99,235,.05) 1px,
        transparent 1px);

    background-size:70px 70px;

    mask-image:
    linear-gradient(
    to bottom,
    rgba(0,0,0,.7),
    transparent);

    z-index:1;

}

/*==============================
GRADIENT BLOBS
==============================*/

.gradient-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.35;

    animation:
    floatingBlob
    14s ease-in-out infinite;

}

.blob-1{

    width:420px;
    height:420px;

    background:#3b82f6;

    top:-120px;
    left:-120px;

}

.blob-2{

    width:380px;
    height:380px;

    background:#06b6d4;

    right:-90px;
    top:25%;

    animation-delay:3s;

}

.blob-3{

    width:300px;
    height:300px;

    background:#7c3aed;

    bottom:-80px;
    left:45%;

    animation-delay:5s;

}

/*==============================
FLOATING LABELS
==============================*/

.floating-elements{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:2;

}

.floating-elements span{

    position:absolute;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(255,255,255,.7);

    backdrop-filter:blur(18px);

    color:var(--primary);

    font-weight:700;

    font-size:.8rem;

    box-shadow:var(--shadow-sm);

    animation:
    floatElement
    12s ease-in-out infinite;

}

.floating-elements span:nth-child(1){

    top:10%;
    left:8%;

}

.floating-elements span:nth-child(2){

    top:22%;
    right:10%;

}

.floating-elements span:nth-child(3){

    top:52%;
    left:6%;

}

.floating-elements span:nth-child(4){

    top:70%;
    right:12%;

}

.floating-elements span:nth-child(5){

    top:82%;
    left:22%;

}

.floating-elements span:nth-child(6){

    top:40%;
    right:24%;

}

.floating-elements span:nth-child(7){

    bottom:8%;
    right:42%;

}

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

.section-header{

    max-width:850px;

    margin:0 auto 90px;

    text-align:center;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:10px 22px;

    border-radius:60px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(16px);

    box-shadow:var(--shadow-sm);

    margin-bottom:28px;

}

.badge-icon{

    width:48px;
    height:48px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:1.25rem;

}

.section-badge span{

    color:var(--primary);

    font-weight:700;

    letter-spacing:.4px;

}

.section-title{

    font-size:clamp(2.5rem,5vw,4.3rem);

    line-height:1.15;

    color:var(--text-dark);

    font-weight:800;

    margin-bottom:28px;

}

.section-title span{

    display:block;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--accent));

    -webkit-background-clip:text;

    color:transparent;

}

.section-description{

    font-size:1.15rem;

    color:var(--text-light);

    max-width:760px;

    margin:auto;

}

/*==============================
WORKFLOW
==============================*/

.workflow-wrapper{

    position:relative;

    display:grid;

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

    gap:25px;

    margin-bottom:100px;

}

.workflow-line{

    position:absolute;

    top:38px;

    left:7%;

    right:7%;

    height:5px;

    border-radius:100px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    z-index:0;

}

.workflow-step{

    position:relative;

    z-index:2;

    text-align:center;

}

.step-circle{

    width:76px;
    height:76px;

    border-radius:50%;

    margin:auto;

    display:grid;

    place-items:center;

    color:#fff;

    font-size:1.5rem;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:0 15px 40px rgba(37,99,235,.25);

    margin-bottom:18px;

    transition:var(--transition);

}

.workflow-step:hover .step-circle{

    transform:
    translateY(-10px)
    scale(1.08);

}

.workflow-step h4{

    font-size:1rem;

    color:var(--text-dark);

    font-weight:700;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:1100px){

.workflow-wrapper{

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

row-gap:60px;

}

.workflow-line{

display:none;

}

}

@media(max-width:768px){

.wp-services-section{

padding:90px 0;

}

.section-title{

font-size:2.5rem;

}

.section-description{

font-size:1rem;

}

.workflow-wrapper{

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

gap:40px;

}

.step-circle{

width:70px;
height:70px;

font-size:1.3rem;

}

}

@media(max-width:540px){

.workflow-wrapper{

grid-template-columns:1fr;

}

.section-header{

margin-bottom:70px;

}

.section-badge{

padding:8px 16px;

}

.badge-icon{

width:42px;
height:42px;

}

}

/*==============================
KEYFRAMES
==============================*/

@keyframes floatingBlob{

0%,100%{

transform:
translate(0,0)
scale(1);

}

50%{

transform:
translate(30px,-40px)
scale(1.15);

}

}

@keyframes floatElement{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-18px);

}

}


/*==================================================
PART 2B-1
Premium Service Cards
==================================================*/

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

.services-grid{

    display:grid;

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

    gap:35px;

    position:relative;

    margin-bottom:120px;

}

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

.service-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:38px;

    border-radius:28px;

    background:var(--glass-bg);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;

    z-index:2;

}

.service-card:hover{

    transform:
    translateY(-12px);

    border-color:
    rgba(37,99,235,.35);

    box-shadow:
    var(--shadow-lg);

}

/*==============================
CARD GLOW
==============================*/

.card-glow{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(37,99,235,.22),
    transparent 70%);

    top:-140px;

    right:-120px;

    opacity:0;

    transition:.5s;

}

.service-card:hover .card-glow{

    opacity:1;

}

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

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:30px;

}

.service-icon{

    position:relative;

}

.icon-circle{

    width:78px;

    height:78px;

    border-radius:24px;

    display:grid;

    place-items:center;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    font-size:1.9rem;

    box-shadow:
    0 15px 35px
    rgba(37,99,235,.22);

    transition:.35s;

}

.service-card:hover .icon-circle{

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

}

/*==============================
TAG
==============================*/

.card-tag{

    padding:10px 18px;

    border-radius:50px;

    background:
    rgba(37,99,235,.08);

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.4px;

}

/*==============================
CONTENT
==============================*/

.card-content{

    flex:1;

}

.card-content h3{

    font-size:1.55rem;

    color:var(--text-dark);

    line-height:1.3;

    margin-bottom:20px;

    font-weight:800;

}

.card-content p{

    color:var(--text-light);

    font-size:1rem;

    line-height:1.8;

}

/*==============================
FOOTER
==============================*/

.card-footer{

    margin-top:35px;

}

.learn-more{

    display:inline-flex;

    align-items:center;

    gap:14px;

    color:var(--primary);

    font-weight:700;

    transition:.35s;

}

.learn-more:hover{

    color:var(--primary-dark);

}

.arrow{

    width:36px;

    height:36px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
    rgba(37,99,235,.12);

    transition:.35s;

}

.learn-more:hover .arrow{

    transform:translateX(6px);

    background:var(--primary);

    color:#fff;

}

/*==============================
TOP BORDER
==============================*/

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:
    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary),
    var(--accent));

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.service-card:hover::before{

    transform:scaleX(1);

}

/*==============================
BOTTOM SHADOW
==============================*/

.service-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-30px;

    transform:translateX(-50%);

    width:70%;

    height:40px;

    background:
    radial-gradient(
    rgba(37,99,235,.20),
    transparent);

    opacity:0;

    transition:.45s;

}

.service-card:hover::after{

    opacity:1;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:1100px){

.services-grid{

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

}

}

@media(max-width:768px){

.services-grid{

grid-template-columns:1fr;

gap:28px;

margin-bottom:90px;

}

.service-card{

padding:30px;

}

.card-content h3{

font-size:1.35rem;

}

.icon-circle{

width:70px;
height:70px;

font-size:1.6rem;

}

}

@media(max-width:480px){

.service-card{

padding:24px;

border-radius:22px;

}

.card-header{

margin-bottom:22px;

}

.card-content h3{

font-size:1.25rem;

}

.card-content p{

font-size:.96rem;

}

.card-tag{

font-size:.75rem;

padding:8px 14px;

}

}


/*==================================================
PART 3A
Premium Background Animations
Gradient Motion • Shimmer • Floating Effects
==================================================*/

/*=========================================
SECTION FADE
=========================================*/

.wp-services-section{

    animation:
    sectionFade 1.2s ease;

}

/*=========================================
GRID MOTION
=========================================*/

.background-grid{

    animation:
    gridMove 35s linear infinite;

}

/*=========================================
GRADIENT BLOBS
=========================================*/

.gradient-blob{

    will-change:
    transform,
    opacity;

    animation:
    blobFloat 18s ease-in-out infinite;

}

.blob-1{

    animation-delay:0s;

}

.blob-2{

    animation-delay:4s;

}

.blob-3{

    animation-delay:8s;

}

/*=========================================
FLOATING LABELS
=========================================*/

.floating-elements span{

    animation:
    floatingLabel 8s ease-in-out infinite;

    transition:
    transform .35s ease;

}

.floating-elements span:nth-child(odd){

    animation-duration:10s;

}

.floating-elements span:nth-child(even){

    animation-duration:13s;

}

.floating-elements span:nth-child(1){animation-delay:.2s;}
.floating-elements span:nth-child(2){animation-delay:1.2s;}
.floating-elements span:nth-child(3){animation-delay:2.3s;}
.floating-elements span:nth-child(4){animation-delay:3.4s;}
.floating-elements span:nth-child(5){animation-delay:4.5s;}
.floating-elements span:nth-child(6){animation-delay:5.6s;}
.floating-elements span:nth-child(7){animation-delay:6.7s;}

/*=========================================
BADGE SHIMMER
=========================================*/

.section-badge{

    overflow:hidden;

    position:relative;

}

.section-badge::before{

    content:"";

    position:absolute;

    inset:0;

    transform:
    translateX(-140%)
    skewX(-25deg);

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.65),
    transparent);

    animation:
    badgeShimmer
    6s linear infinite;

}

/*=========================================
TITLE ANIMATION
=========================================*/

.section-title{

    animation:
    titleRise
    1s ease;

}

.section-title span{

    background-size:
    250% 250%;

    animation:
    gradientShift
    8s linear infinite;

}

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

.section-description{

    animation:
    fadeUp
    1.3s ease;

}

/*=========================================
WORKFLOW
=========================================*/

.workflow-line{

    background-size:
    250%;

    animation:
    lineGlow
    6s linear infinite;

}

.workflow-step{

    animation:
    fadeScale
    .8s ease both;

}

.workflow-step:nth-child(2){animation-delay:.10s;}
.workflow-step:nth-child(3){animation-delay:.20s;}
.workflow-step:nth-child(4){animation-delay:.30s;}
.workflow-step:nth-child(5){animation-delay:.40s;}
.workflow-step:nth-child(6){animation-delay:.50s;}
.workflow-step:nth-child(7){animation-delay:.60s;}

.step-circle{

    animation:
    pulseGlow
    4s ease infinite;

}

/*=========================================
KEYFRAMES
=========================================*/

@keyframes sectionFade{

from{

opacity:0;

transform:
translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes gridMove{

0%{

background-position:
0 0,
0 0;

}

100%{

background-position:
70px 70px,
70px 70px;

}

}

@keyframes blobFloat{

0%{

transform:
translate(0,0)
scale(1);

}

25%{

transform:
translate(25px,-35px)
scale(1.08);

}

50%{

transform:
translate(-30px,25px)
scale(.96);

}

75%{

transform:
translate(30px,18px)
scale(1.05);

}

100%{

transform:
translate(0,0)
scale(1);

}

}

@keyframes floatingLabel{

0%,100%{

transform:
translateY(0)
rotate(0deg);

}

50%{

transform:
translateY(-18px)
rotate(3deg);

}

}

@keyframes badgeShimmer{

100%{

transform:
translateX(170%)
skewX(-25deg);

}

}

@keyframes gradientShift{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

@keyframes titleRise{

from{

opacity:0;

transform:
translateY(35px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes lineGlow{

0%{

filter:brightness(1);

background-position:0%;

}

50%{

filter:brightness(1.35);

background-position:100%;

}

100%{

filter:brightness(1);

background-position:0%;

}

}

@keyframes pulseGlow{

0%,100%{

box-shadow:
0 12px 30px rgba(37,99,235,.22);

}

50%{

box-shadow:
0 20px 55px rgba(37,99,235,.42);

}

}

@keyframes fadeScale{

from{

opacity:0;

transform:
translateY(35px)
scale(.9);

}

to{

opacity:1;

transform:
translateY(0)
scale(1);

}

}


/*==================================================
PART 3B
Premium Card & Button Animations
==================================================*/

/*=========================================
CARD TRANSITIONS
=========================================*/

.service-card{

    transform-style:preserve-3d;

    perspective:1200px;

    will-change:
    transform,
    box-shadow;

}

.service-card:hover{

    transform:
        translateY(-14px)
        rotateX(4deg)
        rotateY(-4deg)
        scale(1.02);

}

/*=========================================
CARD SHIMMER
=========================================*/

.service-card::before{

    overflow:hidden;

}

.service-card::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,.35) 50%,
            transparent 80%
        );

    transform:translateX(-140%);

    transition:transform .9s ease;

}

.service-card:hover::after{

    transform:translateX(140%);

}

/*=========================================
ICON ANIMATION
=========================================*/

.icon-circle{

    position:relative;

    overflow:hidden;

}

.icon-circle::before{

    content:"";

    position:absolute;

    width:180%;

    height:180%;

    background:
        radial-gradient(
            rgba(255,255,255,.45),
            transparent 65%
        );

    transform:scale(0);

    transition:.55s;

}

.service-card:hover .icon-circle::before{

    transform:scale(1);

}

.service-card:hover .icon-circle{

    animation:
        iconBounce
        .8s ease;

}

/*=========================================
TAG EFFECT
=========================================*/

.card-tag{

    transition:
        .35s ease;

}

.service-card:hover .card-tag{

    background:var(--primary);

    color:#fff;

    transform:translateY(-4px);

}

/*=========================================
TITLE EFFECT
=========================================*/

.card-content h3{

    transition:.35s;

}

.service-card:hover h3{

    color:var(--primary);

}

/*=========================================
PARAGRAPH EFFECT
=========================================*/

.card-content p{

    transition:.35s;

}

.service-card:hover p{

    color:var(--text);

}

/*=========================================
LINK ANIMATION
=========================================*/

.learn-more{

    position:relative;

}

.learn-more::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.learn-more:hover::after{

    width:100%;

}

/*=========================================
PRIMARY BUTTON
=========================================*/

.primary-btn{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    transition:
        .35s ease;

}

.primary-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.25),
            transparent
        );

    transform:translateX(-120%);

    transition:.7s;

    z-index:-1;

}

.primary-btn:hover::before{

    transform:translateX(120%);

}

.primary-btn:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 40px rgba(37,99,235,.28);

}

/*=========================================
SECONDARY BUTTON
=========================================*/

.secondary-btn{

    transition:.35s;

}

.secondary-btn:hover{

    transform:
        translateY(-4px);

}

/*=========================================
CTA FLOAT
=========================================*/

.services-cta{

    animation:
        ctaFloat
        8s ease-in-out infinite;

}

/*=========================================
BACKGROUND SHAPE
=========================================*/

.cta-background-shape{

    animation:
        rotateShape
        22s linear infinite;

}

/*=========================================
KEYFRAMES
=========================================*/

@keyframes iconBounce{

0%{

transform:
scale(.8)
rotate(-12deg);

}

40%{

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

}

70%{

transform:
scale(.96);

}

100%{

transform:
scale(1);

}

}

@keyframes ctaFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

@keyframes rotateShape{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



/*==================================================
PART 3C
Scroll Reveal • Accessibility • Performance
==================================================*/

/*=========================================
SCROLL REVEAL
=========================================*/

.reveal{

    opacity:0;

    transform:
        translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:
        opacity,
        transform;

}

.reveal.active{

    opacity:1;

    transform:
        translateY(0);

}

/*=========================================
REVEAL DIRECTIONS
=========================================*/

.reveal-left{

    opacity:0;

    transform:
        translateX(-60px);

    transition:
        .8s ease;

}

.reveal-left.active{

    opacity:1;

    transform:none;

}

.reveal-right{

    opacity:0;

    transform:
        translateX(60px);

    transition:
        .8s ease;

}

.reveal-right.active{

    opacity:1;

    transform:none;

}

.reveal-scale{

    opacity:0;

    transform:
        scale(.92);

    transition:
        .75s ease;

}

.reveal-scale.active{

    opacity:1;

    transform:
        scale(1);

}

/*=========================================
STAGGER DELAYS
=========================================*/

.service-card:nth-child(1){

transition-delay:.05s;

}

.service-card:nth-child(2){

transition-delay:.12s;

}

.service-card:nth-child(3){

transition-delay:.20s;

}

.service-card:nth-child(4){

transition-delay:.28s;

}

.service-card:nth-child(5){

transition-delay:.36s;

}

.service-card:nth-child(6){

transition-delay:.44s;

}

/*=========================================
MAGNETIC BUTTON SUPPORT
=========================================*/

.primary-btn,
.secondary-btn{

    transform-origin:center;

    will-change:transform;

}

.primary-btn.magnetic,
.secondary-btn.magnetic{

    transition:
        transform .18s linear;

}

/*=========================================
MOUSE FOLLOW GLOW
=========================================*/

.service-card{

    --mouse-x:50%;

    --mouse-y:50%;

}

.service-card::selection{

background:transparent;

}

.service-card .mouse-glow{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:0;

    transition:opacity .35s;

    background:

    radial-gradient(

        circle at var(--mouse-x) var(--mouse-y),

        rgba(255,255,255,.28),

        transparent 45%

    );

}

.service-card:hover .mouse-glow{

    opacity:1;

}

/*=========================================
FOCUS STATES
=========================================*/

a:focus-visible,
button:focus-visible{

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

    outline-offset:4px;

    border-radius:8px;

}

/*=========================================
IMAGE RENDERING
=========================================*/

img{

    image-rendering:auto;

    backface-visibility:hidden;

}

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

.service-card,
.gradient-blob,
.step-circle,
.primary-btn,
.secondary-btn{

    backface-visibility:hidden;

    transform:translateZ(0);

}

.services-grid{

    contain:layout paint;

}

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

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

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

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

.gradient-blob{

filter:none;

}

}

/*=========================================
HIGH CONTRAST
=========================================*/

@media (prefers-contrast: more){

.service-card{

border:2px solid #000;

background:#fff;

}

.section-title span{

color:var(--primary);

background:none;

}

}

/*=========================================
PRINT
=========================================*/

@media print{

.background-grid,
.gradient-blob,
.floating-elements,
.card-glow,
.cta-background-shape{

display:none;

}

.wp-services-section{

background:#fff;

padding:40px 0;

}

.service-card{

box-shadow:none;

border:1px solid #ccc;

break-inside:avoid;

}

}

/*=========================================
UTILITY ANIMATIONS
=========================================*/

.fade-in{

animation:fadeIn .8s ease forwards;

}

.zoom-in{

animation:zoomIn .8s ease forwards;

}

.float-up{

animation:floatUp 4s ease-in-out infinite;

}

.rotate-slow{

animation:rotateSlow 25s linear infinite;

}

/*=========================================
KEYFRAMES
=========================================*/

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

@keyframes floatUp{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


/* Mobile First (320px+) */
/* Base styles */

/* Small Phones */
@media (min-width: 480px) {
}

/* Large Phones */
@media (min-width: 576px) {
}

/* Tablets */
@media (min-width: 768px) {
}

/* Small Laptops */
@media (min-width: 992px) {
}

/* Desktop */
@media (min-width: 1200px) {
}

/* Large Desktop */
@media (min-width: 1400px) {
}


/* Mobile */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* Tablet */
@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Mobile */
.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.primary-btn,
.secondary-btn {
    width: 100%;
    text-align: center;
}

/* Tablet/Desktop */
@media (min-width: 768px) {
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .primary-btn,
    .secondary-btn {
        width: auto;
    }
}