/*=========================================================
Website Development Section 5
CSS Part 1
Layout • Typography • Center Orb
=========================================================*/

/*----------------------------------------
Variables
----------------------------------------*/

:root{

    --wds5-primary:#2563eb;
    --wds5-secondary:#3b82f6;
    --wds5-light:#eff6ff;
    --wds5-border:#e5e7eb;
    --wds5-text:#111827;
    --wds5-text-light:#6b7280;
    --wds5-white:#ffffff;
    --wds5-radius:30px;
    --wds5-shadow:0 30px 80px rgba(37,99,235,.08);

}

/*----------------------------------------
Section
----------------------------------------*/

.wds5-section{

    position:relative;
    overflow:hidden;
    background:#fff;
    padding:120px 20px;

}

.wds5-container{

    max-width:1400px;
    margin:auto;
    position:relative;

}

/*----------------------------------------
Background Glow
----------------------------------------*/

.wds5-section::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:50%;
    top:250px;

    transform:translateX(-50%);

    border-radius:50%;

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

    filter:blur(70px);

    pointer-events:none;

    z-index:0;

}

.wds5-section::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-150px;
    top:-100px;

    background:radial-gradient(circle,
    rgba(59,130,246,.05),
    transparent);

    filter:blur(90px);

    border-radius:50%;

}

/*----------------------------------------
Heading
----------------------------------------*/

.wds5-heading{

    position:relative;

    z-index:5;

    max-width:850px;

    margin:0 auto 90px;

    text-align:center;

}

.wds5-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:#eff6ff;

    color:var(--wds5-primary);

    font-weight:600;

    font-size:15px;

    letter-spacing:.4px;

}

.wds5-badge::before{

    content:"";

    width:10px;
    height:10px;

    border-radius:50%;

    background:var(--wds5-primary);

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

}

.wds5-heading h2{

    margin:30px 0 25px;

    font-size:58px;

    line-height:1.05;

    font-weight:800;

    color:var(--wds5-text);

}

.wds5-heading h2 span{

    display:block;

    color:var(--wds5-primary);

}

.wds5-heading p{

    max-width:760px;

    margin:auto;

    font-size:19px;

    line-height:1.9;

    color:var(--wds5-text-light);

}

/*----------------------------------------
Orbit Wrapper
----------------------------------------*/

.wds5-orbit-wrapper{

    position:relative;

    width:1000px;

    height:850px;

    margin:0 auto;

}

/*----------------------------------------
Center Orb
----------------------------------------*/

.wds5-center{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:280px;

    height:280px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

    box-shadow:
    0 25px 70px rgba(0,0,0,.08),
    0 0 0 1px rgba(37,99,235,.06);

}

/*----------------------------------------
Rotating Ring
----------------------------------------*/

.wds5-center-ring{

    position:absolute;

    inset:-15px;

    border-radius:50%;

    background:
    conic-gradient(

    var(--wds5-primary),

    transparent,

    var(--wds5-secondary),

    transparent,

    var(--wds5-primary)

    );

    animation:wds5Rotate 16s linear infinite;

    padding:3px;

    -webkit-mask:

    linear-gradient(#fff 0 0) content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

/*----------------------------------------
Center Content
----------------------------------------*/

.wds5-center-content{

    position:relative;

    z-index:2;

    text-align:center;

}

.wds5-center-content span{

    display:block;

    color:var(--wds5-primary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

}

.wds5-center-content h3{

    margin:12px 0;

    font-size:34px;

    font-weight:800;

    color:#111827;

}

.wds5-center-content p{

    margin:0;

    font-size:18px;

    color:#64748b;

}

/*----------------------------------------
Center Glow
----------------------------------------*/

.wds5-center::before{

    content:"";

    position:absolute;

    inset:-45px;

    border-radius:50%;

    background:

    radial-gradient(circle,

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

    transparent 72%);

    filter:blur(40px);

    z-index:-1;

}

.wds5-center::after{

    content:"";

    position:absolute;

    inset:20px;

    border-radius:50%;

    border:1px dashed rgba(37,99,235,.20);

    animation:wds5RotateReverse 24s linear infinite;

}

/*----------------------------------------
SVG
----------------------------------------*/

.wds5-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:1;

}

#wds5-path{

    fill:none;

    stroke:var(--wds5-primary);

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:8 8;

    opacity:.35;

}

/*----------------------------------------
Animations
----------------------------------------*/

@keyframes wds5Rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes wds5RotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

/*----------------------------------------
Selection
----------------------------------------*/

.wds5-section *::selection{

    background:#2563eb;

    color:#fff;

}


/*=========================================================
Website Development Section 5
CSS Part 2A.1
Orbit Items • Base Styling • Hover Effects
=========================================================*/

/*----------------------------------------
Orbit Item Base
----------------------------------------*/

.wds5-item{

    position:absolute;

    width:170px;

    min-height:170px;

    padding:18px;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:14px;

    text-align:center;

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

    box-shadow:
    0 18px 45px rgba(15,23,42,.08);

    border:1px solid rgba(37,99,235,.08);

    z-index:5;

    overflow:hidden;

    will-change:transform;

}

/*----------------------------------------
Animated Border Glow
----------------------------------------*/

.wds5-item::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:50%;

    background:
    conic-gradient(

    transparent,

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

    transparent,

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

    transparent

    );

    opacity:0;

    animation:wds5OrbitBorder 6s linear infinite;

    transition:opacity .35s ease;

}

.wds5-item::after{

    content:"";

    position:absolute;

    inset:2px;

    background:#ffffff;

    border-radius:50%;

    z-index:0;

}

/*----------------------------------------
Content Above Layers
----------------------------------------*/

.wds5-item>*{

    position:relative;

    z-index:2;

}

/*----------------------------------------
Icon Circle
----------------------------------------*/

.wds5-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    background:#eff6ff;

    color:#2563eb;

    transition:all .45s ease;

    box-shadow:
    inset 0 0 0 1px rgba(37,99,235,.08);

}

/*----------------------------------------
Label
----------------------------------------*/

.wds5-item span{

    font-size:15px;

    font-weight:700;

    line-height:1.45;

    color:#111827;

    transition:all .35s ease;

}

/*----------------------------------------
Hover
----------------------------------------*/

.wds5-item:hover{

    transform:
    translateY(-12px)
    scale(1.06);

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

}

.wds5-item:hover::before{

    opacity:1;

}

.wds5-item:hover .wds5-icon{

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

    background:#2563eb;

    color:#ffffff;

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

}

.wds5-item:hover span{

    color:#2563eb;

    letter-spacing:.3px;

}

/*----------------------------------------
Active State
----------------------------------------*/

.wds5-item.active{

    transform:scale(1.08);

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

}

.wds5-item.active::before{

    opacity:1;

}

.wds5-item.active .wds5-icon{

    background:#2563eb;

    color:#ffffff;

    transform:scale(1.15);

}

.wds5-item.active span{

    color:#2563eb;

}

/*----------------------------------------
Click Effect
----------------------------------------*/

.wds5-item:active{

    transform:
    scale(.96);

}

/*----------------------------------------
Focus Accessibility
----------------------------------------*/

.wds5-item:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:6px;

}

/*----------------------------------------
Floating Motion
----------------------------------------*/

.wds5-item{

    animation:wds5Float 6s ease-in-out infinite;

}

.wds5-item:nth-child(2){

    animation-delay:.3s;

}

.wds5-item:nth-child(3){

    animation-delay:.9s;

}

.wds5-item:nth-child(4){

    animation-delay:1.5s;

}

.wds5-item:nth-child(5){

    animation-delay:2.1s;

}

.wds5-item:nth-child(6){

    animation-delay:2.7s;

}

.wds5-item:nth-child(7){

    animation-delay:3.3s;

}

.wds5-item:nth-child(8){

    animation-delay:3.9s;

}

/*----------------------------------------
Animations
----------------------------------------*/

@keyframes wds5Float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes wds5OrbitBorder{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================================
Website Development Section 5
CSS Part 2A.2
Orbit Positioning + Responsive Positions
=========================================================*/

/*--------------------------------------------------
DESKTOP ORBIT POSITIONS
Center Orb = 280px
Wrapper = 1000px × 850px
---------------------------------------------------*/

/*==================================================
1. Website Speed
==================================================*/

.wds5-item[data-item="speed"]{

    top:20px;
    left:415px;

}

/*==================================================
2. Technical SEO
==================================================*/

.wds5-item[data-item="seo"]{

    top:135px;
    right:95px;

}

/*==================================================
3. Google Analytics
==================================================*/

.wds5-item[data-item="ga4"]{

    top:455px;
    right:40px;

}

/*==================================================
4. Search Console
==================================================*/

.wds5-item[data-item="gsc"]{

    bottom:15px;
    left:410px;

}

/*==================================================
5. Website Security
==================================================*/

.wds5-item[data-item="security"]{

    bottom:120px;
    left:70px;

}

/*==================================================
6. Website Migration
==================================================*/

.wds5-item[data-item="migration"]{

    top:455px;
    left:35px;

}

/*==================================================
7. Maintenance
==================================================*/

.wds5-item[data-item="support"]{

    top:135px;
    left:95px;

}

/*--------------------------------------------------
Desktop Hover Layer
---------------------------------------------------*/

.wds5-item{

    z-index:5;

}

.wds5-item:hover{

    z-index:40;

}

.wds5-item.active{

    z-index:45;

}

/*--------------------------------------------------
Prevent Overflow
---------------------------------------------------*/

.wds5-orbit-wrapper{

    overflow:visible;

}

/*--------------------------------------------------
Laptop
---------------------------------------------------*/

@media (max-width:1200px){

    .wds5-orbit-wrapper{

        width:900px;
        height:760px;

    }

    .wds5-center{

        width:250px;
        height:250px;

    }

    .wds5-item{

        width:150px;
        min-height:150px;

    }

    .wds5-item[data-item="speed"]{

        top:10px;
        left:375px;

    }

    .wds5-item[data-item="seo"]{

        top:120px;
        right:60px;

    }

    .wds5-item[data-item="ga4"]{

        top:410px;
        right:20px;

    }

    .wds5-item[data-item="gsc"]{

        bottom:5px;
        left:375px;

    }

    .wds5-item[data-item="security"]{

        bottom:105px;
        left:40px;

    }

    .wds5-item[data-item="migration"]{

        top:410px;
        left:20px;

    }

    .wds5-item[data-item="support"]{

        top:120px;
        left:60px;

    }

}

/*--------------------------------------------------
Tablet
Orbit becomes larger spacing
---------------------------------------------------*/

@media (max-width:992px){

    .wds5-orbit-wrapper{

        width:100%;
        max-width:760px;
        height:720px;

    }

    .wds5-center{

        width:220px;
        height:220px;

    }

    .wds5-item{

        width:130px;
        min-height:130px;

        padding:15px;

    }

    .wds5-icon{

        width:55px;
        height:55px;

        font-size:24px;

    }

    .wds5-item span{

        font-size:14px;

    }

    .wds5-item[data-item="speed"]{

        top:10px;
        left:50%;
        transform:translateX(-50%);

    }

    .wds5-item[data-item="seo"]{

        top:120px;
        right:15px;

    }

    .wds5-item[data-item="ga4"]{

        top:430px;
        right:0;

    }

    .wds5-item[data-item="gsc"]{

        bottom:0;
        left:50%;
        transform:translateX(-50%);

    }

    .wds5-item[data-item="security"]{

        bottom:110px;
        left:15px;

    }

    .wds5-item[data-item="migration"]{

        top:430px;
        left:0;

    }

    .wds5-item[data-item="support"]{

        top:120px;
        left:15px;

    }

}

/*--------------------------------------------------
Mobile
Switch from Orbit to Vertical Layout
---------------------------------------------------*/

@media (max-width:767px){

    .wds5-orbit-wrapper{

        height:auto;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

    }

    .wds5-center{

        position:relative;

        left:auto;
        top:auto;

        transform:none;

        width:220px;
        height:220px;

        margin-bottom:25px;

    }

    .wds5-lines{

        display:none;

    }

    .wds5-item{

        position:relative;

        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;

        width:100%;

        max-width:340px;

        min-height:95px;

        border-radius:22px;

        flex-direction:row;

        justify-content:flex-start;

        text-align:left;

        padding:20px 24px;

        gap:18px;

        animation:none;

        transform:none !important;

    }

    .wds5-item:hover{

        transform:translateY(-4px) !important;

    }

    .wds5-icon{

        flex-shrink:0;

    }

}

/*--------------------------------------------------
Small Mobile
---------------------------------------------------*/

@media (max-width:480px){

    .wds5-section{

        padding:80px 18px;

    }

    .wds5-heading h2{

        font-size:38px;

    }

    .wds5-heading p{

        font-size:17px;

    }

    .wds5-center{

        width:190px;
        height:190px;

    }

    .wds5-center-content h3{

        font-size:28px;

    }

    .wds5-item{

        max-width:100%;

        padding:18px;

    }

}



/*=========================================================
Website Development Section 5
CSS Part 2B.1
SVG Connections • Magnetic Hover • Advanced Effects
=========================================================*/

/*--------------------------------------------------
SVG Connection Layer
---------------------------------------------------*/

.wds5-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:visible;

    pointer-events:none;

    z-index:2;

}

.wds5-lines path{

    fill:none;

    stroke:var(--wds5-primary);

    stroke-width:2.2;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:12 8;

    opacity:.25;

    transition:
    stroke .45s ease,
    opacity .45s ease,
    filter .45s ease,
    stroke-width .45s ease;

}

/* Active SVG */

.wds5-lines.active path{

    opacity:1;

    stroke-width:3;

    filter:drop-shadow(0 0 10px rgba(37,99,235,.45));

}

/*--------------------------------------------------
Connection Glow
---------------------------------------------------*/

.wds5-lines::after{

    content:"";

    position:absolute;

    inset:0;

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

    pointer-events:none;

}

/*--------------------------------------------------
Hover Connection Effect
---------------------------------------------------*/

.wds5-item:hover ~ .wds5-lines path{

    opacity:.55;

    stroke:#2563eb;

}

/*--------------------------------------------------
Magnetic Hover
---------------------------------------------------*/

.wds5-item{

    transform-origin:center;

    backface-visibility:hidden;

    perspective:1000px;

    transform-style:preserve-3d;

}

/* Soft lift */

.wds5-item:hover{

    transform:

    translateY(-12px)

    rotateX(5deg)

    rotateY(-5deg)

    scale(1.05);

}

/*--------------------------------------------------
Animated Shine
---------------------------------------------------*/

.wds5-item .wds5-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:inherit;

    pointer-events:none;

}

.wds5-item .wds5-shine::before{

    content:"";

    position:absolute;

    top:-60%;

    left:-120%;

    width:80%;

    height:220%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.55),

    transparent

    );

    transform:rotate(20deg);

}

.wds5-item:hover .wds5-shine::before{

    animation:wds5Shine 1.1s linear;

}

/*--------------------------------------------------
Icon Pulse
---------------------------------------------------*/

.wds5-item:hover .wds5-icon{

    animation:wds5Pulse .9s ease;

}

/*--------------------------------------------------
Icon Glow
---------------------------------------------------*/

.wds5-icon{

    position:relative;

}

.wds5-icon::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    background:

    radial-gradient(circle,

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

    transparent 70%);

    opacity:0;

    transition:.35s;

}

.wds5-item:hover .wds5-icon::after{

    opacity:1;

}

/*--------------------------------------------------
Title Underline
---------------------------------------------------*/

.wds5-item span{

    position:relative;

}

.wds5-item span::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:2px;

    background:#2563eb;

    transform:translateX(-50%);

    transition:.4s;

}

.wds5-item:hover span::after,

.wds5-item.active span::after{

    width:70%;

}

/*--------------------------------------------------
Floating Glow Behind Item
---------------------------------------------------*/

.wds5-item::before{

    filter:blur(1px);

}

.wds5-item:hover::before{

    filter:blur(0);

}

/*--------------------------------------------------
Subtle Floating Shadow
---------------------------------------------------*/

.wds5-item{

    box-shadow:

    0 12px 35px rgba(15,23,42,.08),

    0 0 0 1px rgba(37,99,235,.05);

}

.wds5-item:hover{

    box-shadow:

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

    0 0 0 1px rgba(37,99,235,.12);

}

/*--------------------------------------------------
Center Orb Reaction
---------------------------------------------------*/

.wds5-center{

    transition:

    transform .5s ease,

    box-shadow .5s ease;

}

.wds5-orbit-wrapper:hover .wds5-center{

    transform:

    translate(-50%,-50%)

    scale(1.02);

}

/*--------------------------------------------------
Center Ring Speed
---------------------------------------------------*/

.wds5-orbit-wrapper:hover .wds5-center-ring{

    animation-duration:7s;

}

/*--------------------------------------------------
Content Fade Helper
---------------------------------------------------*/

.wds5-fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .6s ease,

    transform .6s ease;

}

.wds5-fade-up.show{

    opacity:1;

    transform:none;

}

/*--------------------------------------------------
Scale Utility
---------------------------------------------------*/

.wds5-scale{

    transform:scale(.9);

    opacity:0;

    transition:.45s;

}

.wds5-scale.show{

    transform:scale(1);

    opacity:1;

}

/*--------------------------------------------------
Keyframes
---------------------------------------------------*/

@keyframes wds5Pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.18);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes wds5Shine{

    from{

        left:-120%;

    }

    to{

        left:140%;

    }

}

/*=========================================================
Website Development Section 5
CSS Part 2B.2A
Advanced Animations • Accessibility • Motion Utilities
=========================================================*/

/*--------------------------------------------------
Section Reveal
--------------------------------------------------*/

.wds5-reveal{

    opacity:0;

    transform:translateY(60px);

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

    will-change:opacity,transform;

}

.wds5-reveal.wds5-visible{

    opacity:1;

    transform:translateY(0);

}

/*--------------------------------------------------
Fade Left
--------------------------------------------------*/

.wds5-fade-left{

    opacity:0;

    transform:translateX(-50px);

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

}

.wds5-fade-left.wds5-visible{

    opacity:1;

    transform:translateX(0);

}

/*--------------------------------------------------
Fade Right
--------------------------------------------------*/

.wds5-fade-right{

    opacity:0;

    transform:translateX(50px);

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

}

.wds5-fade-right.wds5-visible{

    opacity:1;

    transform:translateX(0);

}

/*--------------------------------------------------
Scale In
--------------------------------------------------*/

.wds5-scale-in{

    opacity:0;

    transform:scale(.85);

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

}

.wds5-scale-in.wds5-visible{

    opacity:1;

    transform:scale(1);

}

/*--------------------------------------------------
Content Switch Animation
--------------------------------------------------*/

.wds5-content{

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

}

.wds5-content.is-changing{

    opacity:0;

    transform:translateY(25px);

}

/*--------------------------------------------------
List Animation
--------------------------------------------------*/

#wds5-list{

    margin:35px 0 0;

    padding:0;

    list-style:none;

}

#wds5-list li{

    position:relative;

    padding-left:34px;

    margin-bottom:18px;

    opacity:0;

    transform:translateX(-20px);

    animation:wds5ListReveal .5s forwards;

}

#wds5-list li:nth-child(1){

    animation-delay:.10s;

}

#wds5-list li:nth-child(2){

    animation-delay:.20s;

}

#wds5-list li:nth-child(3){

    animation-delay:.30s;

}

#wds5-list li:nth-child(4){

    animation-delay:.40s;

}

#wds5-list li:nth-child(5){

    animation-delay:.50s;

}

#wds5-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#eff6ff;

    color:var(--wds5-primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:700;

}

/*--------------------------------------------------
Heading Animation
--------------------------------------------------*/

#wds5-title{

    opacity:0;

    transform:translateY(15px);

    animation:wds5Heading .6s forwards;

}

#wds5-description{

    opacity:0;

    transform:translateY(18px);

    animation:wds5Heading .8s forwards;

}

/*--------------------------------------------------
Floating Background Glow
--------------------------------------------------*/

.wds5-floating-glow{

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    pointer-events:none;

    background:

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

    filter:blur(50px);

    animation:wds5GlowMove 10s ease-in-out infinite;

}

/*--------------------------------------------------
Center Pulse
--------------------------------------------------*/

.wds5-center.active{

    animation:wds5CenterPulse 3s infinite;

}

/*--------------------------------------------------
Smooth Scroll
--------------------------------------------------*/

html{

    scroll-behavior:smooth;

}

/*--------------------------------------------------
Reduce Motion
--------------------------------------------------*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/*--------------------------------------------------
GPU Optimization
--------------------------------------------------*/

.wds5-item,
.wds5-center,
.wds5-content{

    transform:translateZ(0);

    backface-visibility:hidden;

}

/*--------------------------------------------------
Keyframes
--------------------------------------------------*/

@keyframes wds5Heading{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes wds5ListReveal{

    from{

        opacity:0;

        transform:translateX(-20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes wds5CenterPulse{

    0%{

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        transform:translate(-50%,-50%) scale(1.03);

    }

    100%{

        transform:translate(-50%,-50%) scale(1);

    }

}

@keyframes wds5GlowMove{

    0%{

        transform:translate(0,0);

    }

    25%{

        transform:translate(25px,-15px);

    }

    50%{

        transform:translate(-15px,20px);

    }

    75%{

        transform:translate(20px,10px);

    }

    100%{

        transform:translate(0,0);

    }

}


/*=========================================================
Website Development Section 5
CSS Part 2B.2B
Final Responsive Polish • Performance • Utilities
=========================================================*/

/*----------------------------------------------------------
Performance Optimization
----------------------------------------------------------*/

.wds5-section,
.wds5-container,
.wds5-orbit-wrapper,
.wds5-center,
.wds5-item,
.wds5-content{

    box-sizing:border-box;

}

.wds5-section *{

    box-sizing:border-box;

}

.wds5-item,
.wds5-center,
.wds5-center-ring,
.wds5-content,
.wds5-btn{

    will-change:transform,opacity;

}

/*----------------------------------------------------------
Image Safety
----------------------------------------------------------*/

.wds5-section img{

    max-width:100%;

    height:auto;

    display:block;

}

/*----------------------------------------------------------
Button Reset
----------------------------------------------------------*/

.wds5-item{

    -webkit-tap-highlight-color:transparent;

    user-select:none;

    touch-action:manipulation;

}

/*----------------------------------------------------------
Content Wrapper
----------------------------------------------------------*/

.wds5-content{

    max-width:1150px;

    margin:100px auto 0;

    display:grid;

    grid-template-columns:140px 1fr;

    gap:60px;

    align-items:flex-start;

}

.wds5-number{

    font-size:110px;

    line-height:1;

    font-weight:800;

    color:#2563eb10;

    user-select:none;

}

.wds5-text h3{

    font-size:42px;

    line-height:1.2;

    margin-bottom:25px;

    color:#111827;

}

.wds5-text p{

    font-size:18px;

    line-height:1.9;

    color:#6b7280;

}

/*----------------------------------------------------------
CTA
----------------------------------------------------------*/

.wds5-cta{

    margin-top:120px;

    text-align:center;

}

.wds5-cta h3{

    font-size:42px;

    margin-bottom:35px;

    color:#111827;

}

.wds5-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 36px;

    border-radius:999px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;

}

.wds5-btn:hover{

    transform:translateY(-4px);

    background:#1d4ed8;

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

}

.wds5-btn span{

    transition:transform .35s ease;

}

.wds5-btn:hover span{

    transform:translateX(6px);

}

/*----------------------------------------------------------
Desktop XL
----------------------------------------------------------*/

@media (min-width:1600px){

    .wds5-container{

        max-width:1500px;

    }

}

/*----------------------------------------------------------
Tablet
----------------------------------------------------------*/

@media (max-width:991px){

    .wds5-content{

        grid-template-columns:1fr;

        gap:25px;

        margin-top:70px;

        text-align:center;

    }

    .wds5-number{

        font-size:80px;

    }

    .wds5-text h3{

        font-size:34px;

    }

}

/*----------------------------------------------------------
Mobile
----------------------------------------------------------*/

@media (max-width:767px){

    .wds5-heading{

        margin-bottom:60px;

    }

    .wds5-heading h2{

        font-size:38px;

        line-height:1.15;

    }

    .wds5-heading p{

        font-size:17px;

    }

    .wds5-content{

        margin-top:50px;

    }

    .wds5-number{

        display:none;

    }

    .wds5-text h3{

        font-size:30px;

    }

    .wds5-text p{

        font-size:17px;

    }

    .wds5-cta{

        margin-top:80px;

    }

    .wds5-cta h3{

        font-size:30px;

    }

    .wds5-btn{

        width:100%;

        justify-content:center;

    }

}

/*----------------------------------------------------------
Small Mobile
----------------------------------------------------------*/

@media (max-width:480px){

    .wds5-section{

        padding:70px 18px;

    }

    .wds5-heading h2{

        font-size:32px;

    }

    .wds5-heading p{

        font-size:16px;

        line-height:1.8;

    }

    .wds5-text h3{

        font-size:26px;

    }

    .wds5-btn{

        padding:16px 24px;

        font-size:15px;

    }

}

/*----------------------------------------------------------
Landscape Phones
----------------------------------------------------------*/

@media (max-height:500px) and (orientation:landscape){

    .wds5-section{

        padding:60px 20px;

    }

    .wds5-orbit-wrapper{

        transform:scale(.90);

        transform-origin:top center;

    }

}

/*----------------------------------------------------------
Utility Classes
----------------------------------------------------------*/

.wds5-hidden{

    display:none !important;

}

.wds5-visible{

    opacity:1 !important;

    visibility:visible !important;

}

.wds5-text-center{

    text-align:center;

}

.wds5-no-select{

    user-select:none;

}

.wds5-shadow{

    box-shadow:0 25px 60px rgba(15,23,42,.10);

}

.wds5-rounded{

    border-radius:24px;

}

/*----------------------------------------------------------
Print
----------------------------------------------------------*/

@media print{

    .wds5-center-ring,
    .wds5-lines,
    .wds5-floating-glow{

        display:none !important;

    }

    .wds5-item{

        box-shadow:none;

        border:1px solid #ddd;

    }

}

/*=========================================================
END OF CSS
=========================================================*/