/*=========================================================
    Homepage Section 03
    Complete Website Solutions
    Part 1
=========================================================*/

/*==============================
    CSS Variables
==============================*/

:root{

    --hpsec03-primary:#2563EB;
    --hpsec03-primary-light:#3B82F6;
    --hpsec03-primary-dark:#1D4ED8;

    --hpsec03-bg:#0F172A;
    --hpsec03-bg-light:#172554;

    --hpsec03-card-bg:rgba(255,255,255,.08);
    --hpsec03-card-border:rgba(255,255,255,.12);

    --hpsec03-white:#FFFFFF;
    --hpsec03-text:#CBD5E1;
    --hpsec03-heading:#F8FAFC;

    --hpsec03-radius:22px;

    --hpsec03-shadow:
        0 12px 40px rgba(0,0,0,.22);

    --hpsec03-shadow-hover:
        0 25px 70px rgba(37,99,235,.28);

    --hpsec03-transition:.45s ease;

}

/*==============================
    Section
==============================*/

#hpsec03-process{

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(37,99,235,.20),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(59,130,246,.18),
    transparent 40%),

    var(--hpsec03-bg);

    padding:130px 20px;

}

/*==============================
    Decorative Background
==============================*/

#hpsec03-process::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-220px;

    right:-180px;

    border-radius:50%;

    background:

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

    pointer-events:none;

}

#hpsec03-process::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-160px;

    bottom:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(59,130,246,.14),
    transparent 72%);

    pointer-events:none;

}

/*==============================
    Container
==============================*/

.hpsec03-container{

    position:relative;

    max-width:1180px;

    margin:auto;

    z-index:2;

}

/*==============================
    Header
==============================*/

.hpsec03-header{

    text-align:center;

    max-width:860px;

    margin:0 auto 90px;

}

/*==============================
    Subtitle
==============================*/

.hpsec03-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    margin-bottom:24px;

    border-radius:100px;

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

    border:1px solid rgba(59,130,246,.30);

    color:#93C5FD;

    font-size:.92rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/*==============================
    Heading
==============================*/

.hpsec03-title{

    margin:0;

    color:var(--hpsec03-heading);

    font-size:clamp(2.4rem,5vw,4rem);

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1px;

}

/*==============================
    Description
==============================*/

.hpsec03-description{

    margin-top:28px;

    color:var(--hpsec03-text);

    font-size:1.12rem;

    line-height:1.9;

}

/*==============================
    Timeline
==============================*/

.hpsec03-timeline{

    position:relative;

    width:100%;

    max-width:900px;

    margin:0 auto;

    padding:20px 0;

}

/*==============================
    Vertical Line
==============================*/

.hpsec03-line{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:5px;

    height:100%;

    border-radius:50px;

    background:

    linear-gradient(

        to bottom,

        rgba(37,99,235,.20),

        rgba(59,130,246,.90),

        rgba(37,99,235,.20)

    );

    overflow:hidden;

}

/*==============================
    Animated Progress Line
==============================*/

.hpsec03-line::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:0;

    border-radius:inherit;

    background:

    linear-gradient(

        to bottom,

        #60A5FA,

        #2563EB

    );

    box-shadow:

    0 0 30px rgba(59,130,246,.80);

    transition:height .35s linear;

}

/*==============================
    Timeline Item
==============================*/

.hpsec03-step{

    position:relative;

    display:flex;

    justify-content:center;

    margin-bottom:70px;

}

/*==============================
    Initial Animation
==============================*/

.hpsec03-step{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.hpsec03-step.hpsec03-visible{

    opacity:1;

    transform:translateY(0);

}

/*==============================
    Remove Last Margin
==============================*/

.hpsec03-step:last-child{

    margin-bottom:0;

}



/*=========================================================
    Homepage Section 03
    Complete Website Solutions
    CSS Part 2A
    Timeline Cards • Typography • Expand Layout
=========================================================*/

/*=========================================================
    Timeline Card
=========================================================*/

.hpsec03-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:28px;

    width:100%;

    max-width:760px;

    padding:34px;

    border:none;

    outline:none;

    cursor:pointer;

    text-align:left;

    border-radius:var(--hpsec03-radius);

    background:var(--hpsec03-card-bg);

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

    backdrop-filter:blur(18px);

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

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

    transition:
    transform var(--hpsec03-transition),
    box-shadow var(--hpsec03-transition),
    border-color var(--hpsec03-transition),
    background var(--hpsec03-transition);

    overflow:hidden;

    z-index:2;

}

/*=========================================================
    Decorative Border Glow
=========================================================*/

.hpsec03-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:
    linear-gradient(
        135deg,
        rgba(59,130,246,.45),
        rgba(255,255,255,.05),
        rgba(59,130,246,.15)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

/*=========================================================
    Card Background Overlay
=========================================================*/

.hpsec03-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        rgba(255,255,255,0)

    );

    opacity:.75;

    pointer-events:none;

}

/*=========================================================
    Number Circle
=========================================================*/

.hpsec03-number{

    position:relative;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:82px;

    height:82px;

    border-radius:50%;

    font-size:1.35rem;

    font-weight:800;

    color:#fff;

    background:

    linear-gradient(

        135deg,

        var(--hpsec03-primary-light),

        var(--hpsec03-primary)

    );

    box-shadow:

    0 15px 40px rgba(37,99,235,.35);

    transition:

    transform .45s ease,

    box-shadow .45s ease;

}

/*=========================================================
    Inner Ring
=========================================================*/

.hpsec03-number::before{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

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

}

/*=========================================================
    Content Area
=========================================================*/

.hpsec03-content{

    flex:1;

    min-width:0;

}

/*=========================================================
    Heading
=========================================================*/

.hpsec03-content h3{

    margin:0;

    color:var(--hpsec03-heading);

    font-size:1.55rem;

    font-weight:700;

    line-height:1.35;

}

/*=========================================================
    Short Description
=========================================================*/

.hpsec03-short{

    margin-top:12px;

    margin-bottom:0;

    color:#BFDBFE;

    font-size:1rem;

    font-weight:600;

    line-height:1.7;

}

/*=========================================================
    Expand Area
=========================================================*/

.hpsec03-expand{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .55s ease;

}

/*=========================================================
    Expand Wrapper
=========================================================*/

.hpsec03-expand > *{

    overflow:hidden;

}

/*=========================================================
    Expanded Paragraph
=========================================================*/

.hpsec03-expand p{

    margin:22px 0 0;

    color:var(--hpsec03-text);

    font-size:1rem;

    line-height:1.9;

}

/*=========================================================
    Active Card
=========================================================*/

.hpsec03-card.active .hpsec03-expand{

    grid-template-rows:1fr;

}

/*=========================================================
    Active Number Circle
=========================================================*/

.hpsec03-card.active .hpsec03-number{

    transform:scale(1.08);

}

/*=========================================================
    Accent Line
=========================================================*/

.hpsec03-content::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin-top:22px;

    border-radius:100px;

    background:

    linear-gradient(

        90deg,

        var(--hpsec03-primary),

        #60A5FA

    );

    transition:width .35s ease;

}

/*=========================================================
    Active Accent Line
=========================================================*/

.hpsec03-card.active .hpsec03-content::after{

    width:130px;

}

/*=========================================================
    Card Spacing
=========================================================*/

.hpsec03-step:last-child .hpsec03-card{

    margin-bottom:0;

}



/*=========================================================
    Homepage Section 03
    Complete Website Solutions
    CSS Part 2B-1
    Premium Hover Effects • Glow • Ripple • Interactions
=========================================================*/

/*=========================================
    Card Hover
=========================================*/

.hpsec03-card:hover{

    transform:translateY(-12px);

    border-color:rgba(59,130,246,.45);

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

    box-shadow:
        var(--hpsec03-shadow-hover),
        0 0 0 1px rgba(59,130,246,.12);

}

/*=========================================
    Active Card
=========================================*/

.hpsec03-card.active{

    transform:translateY(-8px);

    border-color:rgba(96,165,250,.55);

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

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

}

/*=========================================
    Border Glow Animation
=========================================*/

.hpsec03-card:hover::before,

.hpsec03-card.active::before{

    background:
    linear-gradient(
        135deg,
        rgba(96,165,250,.85),
        rgba(255,255,255,.08),
        rgba(37,99,235,.45)
    );

}

/*=========================================
    Glass Overlay
=========================================*/

.hpsec03-card:hover::after,

.hpsec03-card.active::after{

    opacity:1;

}

/*=========================================
    Number Hover
=========================================*/

.hpsec03-card:hover .hpsec03-number{

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

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

}

/*=========================================
    Number Active
=========================================*/

.hpsec03-card.active .hpsec03-number{

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

}

/*=========================================
    Number Glow Ring
=========================================*/

.hpsec03-number::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(96,165,250,.15);

    opacity:0;

    transform:scale(.85);

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

}

.hpsec03-card:hover .hpsec03-number::after,

.hpsec03-card.active .hpsec03-number::after{

    opacity:1;

    transform:scale(1.08);

}

/*=========================================
    Heading Animation
=========================================*/

.hpsec03-content h3{

    transition:
        color .35s ease,
        transform .35s ease;

}

.hpsec03-card:hover h3,

.hpsec03-card.active h3{

    color:#FFFFFF;

    transform:translateX(4px);

}

/*=========================================
    Short Description
=========================================*/

.hpsec03-short{

    transition:
        color .35s ease,
        transform .35s ease;

}

.hpsec03-card:hover .hpsec03-short,

.hpsec03-card.active .hpsec03-short{

    color:#DBEAFE;

    transform:translateX(4px);

}

/*=========================================
    Expanded Paragraph
=========================================*/

.hpsec03-expand p{

    transition:
        color .35s ease;

}

.hpsec03-card:hover .hpsec03-expand p{

    color:#E2E8F0;

}

/*=========================================
    Accent Bar
=========================================*/

.hpsec03-card:hover .hpsec03-content::after{

    width:120px;

}

/*=========================================
    Timeline Connection Glow
=========================================*/

.hpsec03-step:hover::before{

    content:"";

    position:absolute;

    left:50%;

    top:-25px;

    transform:translateX(-50%);

    width:18px;

    height:18px;

    border-radius:50%;

    background:#60A5FA;

    box-shadow:
        0 0 20px rgba(59,130,246,.90),
        0 0 45px rgba(59,130,246,.45);

    z-index:5;

}

/*=========================================
    Ripple Effect
=========================================*/

.hpsec03-card{

    isolation:isolate;

}

.hpsec03-card .hpsec03-ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:hpsec03Ripple .8s linear;

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

    pointer-events:none;

    z-index:1;

}

/*=========================================
    Floating Shadow
=========================================*/

.hpsec03-card:hover{

    filter:drop-shadow(0 20px 35px rgba(0,0,0,.18));

}

/*=========================================
    Slight Scale
=========================================*/

.hpsec03-card:hover .hpsec03-content{

    transform:translateY(-2px);

    transition:transform .35s ease;

}

/*=========================================
    Cursor
=========================================*/

.hpsec03-card{

    cursor:pointer;

}

/*=========================================
    Prevent Text Selection
=========================================*/

.hpsec03-card,
.hpsec03-number{

    user-select:none;

    -webkit-user-select:none;

}





/*=========================================================
    Homepage Section 03
    Complete Website Solutions
    CSS Part 2B-2
    Accessibility • Performance • Final Polish
=========================================================*/


/*=========================================================
    Keyboard Focus
=========================================================*/

.hpsec03-card:focus{

    outline:none;

}

.hpsec03-card:focus-visible{

    border-color:#60A5FA;

    box-shadow:
        0 0 0 4px rgba(96,165,250,.20),
        0 25px 70px rgba(37,99,235,.30);

}

/*=========================================================
    Active State
=========================================================*/

.hpsec03-card.active{

    border-color:rgba(96,165,250,.55);

}

/*=========================================================
    Improve Rendering
=========================================================*/

.hpsec03-card,
.hpsec03-number,
.hpsec03-content{

    will-change:
        transform,
        opacity;

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

    transform:translateZ(0);

}

/*=========================================================
    Smooth Typography
=========================================================*/

.hpsec03-title,
.hpsec03-content h3,
.hpsec03-description,
.hpsec03-expand p{

    text-rendering:optimizeLegibility;

}

/*=========================================================
    Better Paragraph Spacing
=========================================================*/

.hpsec03-expand p:last-child{

    margin-bottom:0;

}

/*=========================================================
    Selection Color
=========================================================*/

#hpsec03-process ::selection{

    background:#2563EB;

    color:#fff;

}

#hpsec03-process ::-moz-selection{

    background:#2563EB;

    color:#fff;

}

/*=========================================================
    Scroll Margin
=========================================================*/

#hpsec03-process{

    scroll-margin-top:120px;

}

/*=========================================================
    Improve Button Behaviour
=========================================================*/

.hpsec03-card{

    appearance:none;

    -webkit-appearance:none;

    touch-action:manipulation;

}

/*=========================================================
    Prevent Image Overflow
=========================================================*/

.hpsec03-card img{

    max-width:100%;

    display:block;

}

/*=========================================================
    Hover Transition
=========================================================*/

.hpsec03-card,
.hpsec03-number,
.hpsec03-content,
.hpsec03-content h3,
.hpsec03-short,
.hpsec03-expand,
.hpsec03-content::after{

    transition:
        all .35s ease;

}

/*=========================================================
    Reduce Motion
=========================================================*/

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

    .hpsec03-card,
    .hpsec03-step,
    .hpsec03-number,
    .hpsec03-content,
    .hpsec03-expand,
    .hpsec03-line::before{

        animation:none !important;

        transition:none !important;

        transform:none !important;

    }

}

/*=========================================================
    Large Desktop Refinement
=========================================================*/

@media (min-width:1400px){

    .hpsec03-container{

        max-width:1280px;

    }

    .hpsec03-card{

        max-width:820px;

    }

}

/*=========================================================
    Scroll Animation State
=========================================================*/

.hpsec03-step{

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

}

.hpsec03-step.hpsec03-visible{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
    Loading State
=========================================================*/

.hpsec03-loading .hpsec03-card{

    opacity:.85;

    pointer-events:none;

}

/*=========================================================
    Active Timeline Marker
=========================================================*/

.hpsec03-card.active .hpsec03-number{

    animation:hpsec03Pulse 2.5s infinite;

}

/*=========================================================
    Final Glass Enhancement
=========================================================*/

.hpsec03-card{

    overflow:hidden;

}

.hpsec03-card::before{

    transition:
        opacity .35s ease,
        background .35s ease;

}

/*=========================================================
    High DPI Shadow
=========================================================*/

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi){

    .hpsec03-card{

        box-shadow:
            0 18px 45px rgba(0,0,0,.18);

    }

}

/*=========================================================
    Small Desktop Adjustment
=========================================================*/

@media (max-width:1200px){

    .hpsec03-card{

        max-width:720px;

    }

}

/*=========================================================
    Ripple Layer
=========================================================*/

.hpsec03-ripple{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    opacity:.45;

}

/*=========================================================
    Utility Class
=========================================================*/

.hpsec03-hidden{

    display:none !important;

}

/*=========================================================
    End of Part 2B-2
=========================================================*/










/*=========================================================
    Homepage Section 03
    CSS Part 3A
    Large Desktop & Laptop Responsive
=========================================================*/

/*=========================================================
    Large Desktop (1600px+)
=========================================================*/

@media (min-width:1600px){

    .hpsec03-container{

        max-width:1320px;

    }

    .hpsec03-header{

        max-width:920px;

        margin-bottom:100px;

    }

    .hpsec03-card{

        max-width:840px;

        padding:40px;

    }

    .hpsec03-title{

        font-size:4.25rem;

    }

    .hpsec03-description{

        font-size:1.18rem;

    }

}


/*=========================================================
    Desktop (1400px - 1599px)
=========================================================*/

@media (max-width:1599px){

    .hpsec03-container{

        max-width:1200px;

    }

    .hpsec03-card{

        max-width:800px;

    }

}


/*=========================================================
    Laptop
=========================================================*/

@media (max-width:1280px){

    #hpsec03-process{

        padding:110px 40px;

    }

    .hpsec03-container{

        max-width:1100px;

    }

    .hpsec03-header{

        margin-bottom:80px;

    }

    .hpsec03-card{

        max-width:720px;

        padding:30px;

    }

    .hpsec03-number{

        width:74px;

        height:74px;

        font-size:1.25rem;

    }

    .hpsec03-content h3{

        font-size:1.45rem;

    }

}


/*=========================================================
    Small Laptop
=========================================================*/

@media (max-width:1100px){

    #hpsec03-process{

        padding:100px 30px;

    }

    .hpsec03-card{

        max-width:680px;

    }

    .hpsec03-header{

        margin-bottom:70px;

    }

}


/*=========================================================
    Improve Timeline Spacing
=========================================================*/

@media (min-width:1025px){

    .hpsec03-step{

        margin-bottom:80px;

    }

}


/*=========================================================
    Better Hover Experience
=========================================================*/

@media (hover:hover){

    .hpsec03-card:hover{

        transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .35s ease,

        background .35s ease;

    }

}


/*=========================================================
    Decorative Background Scaling
=========================================================*/

@media (max-width:1400px){

    #hpsec03-process::before{

        width:520px;

        height:520px;

    }

    #hpsec03-process::after{

        width:420px;

        height:420px;

    }

}


/*=========================================================
    Better Reading Width
=========================================================*/

@media (min-width:1200px){

    .hpsec03-expand p{

        max-width:95%;

    }

}


/*=========================================================
    Prevent Overflow
=========================================================*/

.hpsec03-card{

    word-break:normal;

    overflow-wrap:break-word;

}


/*=========================================================
    Smooth Layout
=========================================================*/

.hpsec03-content{

    width:100%;

}


/*=========================================================
    Timeline Line
=========================================================*/

.hpsec03-line{

    transition:

    background .4s ease,

    box-shadow .4s ease;

}


/*=========================================================
    Better Shadow Rendering
=========================================================*/

.hpsec03-card{

    transform-style:preserve-3d;

}


/*=========================================================
    GPU Optimization
=========================================================*/

.hpsec03-step{

    contain:layout paint;

}


/*=========================================================
    End Part 3A
=========================================================*/




/*=========================================================
    Homepage Section 03
    CSS Part 3B
    Tablet Responsive (1024px - 768px)
=========================================================*/

/*=========================================================
    Tablet Landscape
=========================================================*/

@media (max-width:1024px){

    #hpsec03-process{

        padding:90px 30px;

    }

    .hpsec03-container{

        max-width:900px;

    }

    .hpsec03-header{

        max-width:760px;

        margin-bottom:65px;

    }

    .hpsec03-title{

        font-size:clamp(2.2rem,5vw,3.2rem);

    }

    .hpsec03-description{

        font-size:1.05rem;

        line-height:1.8;

    }

    .hpsec03-timeline{

        max-width:760px;

    }

    .hpsec03-step{

        margin-bottom:60px;

    }

    .hpsec03-card{

        max-width:650px;

        padding:28px;

        gap:22px;

    }

    .hpsec03-number{

        width:70px;

        height:70px;

        font-size:1.2rem;

    }

    .hpsec03-content h3{

        font-size:1.35rem;

    }

    .hpsec03-short{

        font-size:.98rem;

    }

    .hpsec03-expand p{

        font-size:.97rem;

        line-height:1.8;

    }

}

/*=========================================================
    Tablet Portrait
=========================================================*/

@media (max-width:900px){

    #hpsec03-process{

        padding:80px 25px;

    }

    .hpsec03-header{

        margin-bottom:55px;

    }

    .hpsec03-timeline{

        max-width:680px;

    }

    .hpsec03-card{

        max-width:600px;

        padding:26px;

        gap:20px;

    }

    .hpsec03-number{

        width:66px;

        height:66px;

        font-size:1.15rem;

    }

    .hpsec03-content h3{

        font-size:1.28rem;

    }

    .hpsec03-line{

        width:4px;

    }

}

/*=========================================================
    Small Tablet
=========================================================*/

@media (max-width:768px){

    #hpsec03-process{

        padding:75px 22px;

    }

    .hpsec03-container{

        max-width:100%;

    }

    .hpsec03-header{

        max-width:100%;

        margin-bottom:50px;

    }

    .hpsec03-subtitle{

        font-size:.82rem;

    }

    .hpsec03-title{

        font-size:2rem;

        line-height:1.25;

    }

    .hpsec03-description{

        font-size:1rem;

    }

    .hpsec03-timeline{

        max-width:100%;

    }

    .hpsec03-step{

        margin-bottom:50px;

    }

    .hpsec03-card{

        max-width:100%;

        padding:24px;

        gap:18px;

    }

    .hpsec03-number{

        width:62px;

        height:62px;

        font-size:1.05rem;

    }

    .hpsec03-content h3{

        font-size:1.18rem;

    }

    .hpsec03-short{

        font-size:.95rem;

    }

    .hpsec03-expand p{

        font-size:.95rem;

        line-height:1.75;

    }

}

/*=========================================================
    Touch Devices
=========================================================*/

@media (hover:none){

    .hpsec03-card:hover{

        transform:none;

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

    }

    .hpsec03-card:hover .hpsec03-number{

        transform:none;

    }

    .hpsec03-card:hover h3{

        transform:none;

    }

    .hpsec03-card:hover .hpsec03-short{

        transform:none;

    }

}

/*=========================================================
    Better Touch Target
=========================================================*/

@media (pointer:coarse){

    .hpsec03-card{

        min-height:110px;

    }

}

/*=========================================================
    End Part 3B
=========================================================*/







/*=========================================================
    Homepage Section 03
    CSS Part 4
    Keyframes • Final Polish • Accessibility
    Performance Optimizations
=========================================================*/


/*=========================================================
    Timeline Ripple Animation
=========================================================*/

@keyframes hpsec03Ripple{

    0%{

        transform:scale(0);

        opacity:.65;

    }

    100%{

        transform:scale(4);

        opacity:0;

    }

}


/*=========================================================
    Number Pulse
=========================================================*/

@keyframes hpsec03Pulse{

    0%{

        transform:scale(1);

        box-shadow:
        0 0 0 0 rgba(37,99,235,.45);

    }

    70%{

        transform:scale(1.06);

        box-shadow:
        0 0 0 16px rgba(37,99,235,0);

    }

    100%{

        transform:scale(1);

        box-shadow:
        0 0 0 0 rgba(37,99,235,0);

    }

}


/*=========================================================
    Fade Up
=========================================================*/

@keyframes hpsec03FadeUp{

    from{

        opacity:0;

        transform:
        translateY(60px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


/*=========================================================
    Floating Card
=========================================================*/

@keyframes hpsec03Float{

    0%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-4px);

    }

    100%{

        transform:
        translateY(0);

    }

}


/*=========================================================
    Blue Glow
=========================================================*/

@keyframes hpsec03Glow{

    0%{

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

    }

    50%{

        box-shadow:
        0 0 35px rgba(59,130,246,.38);

    }

    100%{

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

    }

}


/*=========================================================
    Shine Animation
=========================================================*/

@keyframes hpsec03Shine{

    from{

        transform:
        translateX(-120%);

    }

    to{

        transform:
        translateX(220%);

    }

}


/*=========================================================
    Card Shine
=========================================================*/

.hpsec03-card::after{

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.10),

        transparent

    );

}

.hpsec03-card:hover::after{

    animation:
    hpsec03Shine
    1.2s linear;

}


/*=========================================================
    Floating Number
=========================================================*/

.hpsec03-card:hover .hpsec03-number{

    animation:
    hpsec03Float
    2s ease-in-out infinite;

}


/*=========================================================
    Timeline Glow
=========================================================*/

.hpsec03-line{

    animation:

    hpsec03Glow

    4s ease-in-out infinite;

}


/*=========================================================
    Active Timeline
=========================================================*/

.hpsec03-card.active{

    animation:

    hpsec03FadeUp

    .45s ease;

}


/*=========================================================
    Better Scroll Behaviour
=========================================================*/

html{

    scroll-behavior:smooth;

}


/*=========================================================
    Focus Ring
=========================================================*/

.hpsec03-card:focus-visible{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(96,165,250,.25),

    0 18px 55px rgba(37,99,235,.35);

}


/*=========================================================
    Active State
=========================================================*/

.hpsec03-card:active{

    transform:
    scale(.985);

}


/*=========================================================
    Prevent Tap Highlight
=========================================================*/

.hpsec03-card{

    -webkit-tap-highlight-color:

    transparent;

}


/*=========================================================
    Hardware Acceleration
=========================================================*/

.hpsec03-card,

.hpsec03-number,

.hpsec03-content,

.hpsec03-step{

    transform:

    translateZ(0);

}


/*=========================================================
    Better Image Rendering
=========================================================*/

.hpsec03-card img{

    image-rendering:auto;

}


/*=========================================================
    GPU Layer
=========================================================*/

.hpsec03-card{

    perspective:1000px;

}


/*=========================================================
    Font Rendering
=========================================================*/

#hpsec03-process{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*=========================================================
    Remove Button Outline
=========================================================*/

.hpsec03-card::-moz-focus-inner{

    border:0;

}


/*=========================================================
    High Contrast Mode
=========================================================*/

@media (prefers-contrast:more){

    .hpsec03-card{

        border:2px solid #FFFFFF;

    }

    .hpsec03-title,

    .hpsec03-content h3{

        color:#FFFFFF;

    }

    .hpsec03-description,

    .hpsec03-expand p{

        color:#FFFFFF;

    }

}


/*=========================================================
    Print Styles
=========================================================*/

@media print{

    #hpsec03-process{

        background:#FFFFFF !important;

        color:#000000;

    }

    .hpsec03-card{

        box-shadow:none;

        border:1px solid #CCCCCC;

        background:#FFFFFF;

        break-inside:avoid;

    }

    .hpsec03-line{

        display:none;

    }

}


/*=========================================================
    Reduced Motion
=========================================================*/

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

    *{

        scroll-behavior:auto !important;

    }

    .hpsec03-card,

    .hpsec03-number,

    .hpsec03-line,

    .hpsec03-step{

        animation:none !important;

        transition:none !important;

    }

}


/*=========================================================
    Final Polish
=========================================================*/

.hpsec03-card{

    contain:layout style paint;

}

.hpsec03-step{

    isolation:isolate;

}

.hpsec03-expand{

    will-change:grid-template-rows;

}

.hpsec03-line::before{

    will-change:height;

}

.hpsec03-card:hover{

    z-index:20;

}

.hpsec03-card.active{

    z-index:25;

}


/*=========================================================
    End of Homepage Section 03 CSS
=========================================================*/