/*=========================================================
  WordPress Maintenance Section 2
  Complete WordPress Website Maintenance Solutions
  Part 1 - Layout, Cards & Desktop Styling
=========================================================*/

/*=============================
 Root Variables
==============================*/

:root{

    --wpm-primary:#2563eb;
    --wpm-primary-dark:#1d4ed8;
    --wpm-secondary:#60a5fa;
    --wpm-light:#eff6ff;
    --wpm-bg:#ffffff;
    --wpm-text:#1f2937;
    --wpm-text-light:#6b7280;
    --wpm-border:#e5e7eb;
    --wpm-radius:22px;

    --wpm-shadow-sm:0 10px 30px rgba(37,99,235,.08);
    --wpm-shadow-md:0 20px 45px rgba(37,99,235,.12);
    --wpm-shadow-lg:0 30px 70px rgba(37,99,235,.18);

    --wpm-transition:.45s ease;

}


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

.wp-maintenance-solutions-section{

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

}


/*=============================
 Animated Background
==============================*/

.wp-maintenance-solutions-section::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-180px;
    top:-180px;

    border-radius:50%;

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

    animation:maintenanceFloatOne 12s infinite alternate ease-in-out;

    pointer-events:none;

}


.wp-maintenance-solutions-section::after{

    content:"";

    position:absolute;

    right:-180px;
    bottom:-180px;

    width:450px;
    height:450px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(96,165,250,.08),
    transparent 70%);

    animation:maintenanceFloatTwo 15s infinite alternate ease-in-out;

    pointer-events:none;

}


@keyframes maintenanceFloatOne{

    from{

        transform:translateY(0px)
        scale(1);

    }

    to{

        transform:translateY(70px)
        scale(1.15);

    }

}


@keyframes maintenanceFloatTwo{

    from{

        transform:translateY(0px);

    }

    to{

        transform:translateY(-70px);

    }

}



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

.wp-maintenance-solutions-container{

    position:relative;

    z-index:2;

    max-width:1350px;

    margin:auto;

}



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

.wp-maintenance-solutions-heading{

    text-align:center;

    max-width:900px;

    margin:0 auto 70px;

}


.wp-maintenance-section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:100px;

    font-size:14px;

    font-weight:700;

    color:var(--wpm-primary);

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

    margin-bottom:20px;

    letter-spacing:.5px;

}


.wp-maintenance-solutions-heading h2{

    margin-bottom:25px;

    color:var(--wpm-text);

    font-size:clamp(34px,5vw,52px);

    line-height:1.15;

    font-weight:800;

}


.wp-maintenance-solutions-heading p{

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

    line-height:1.9;

    font-size:18px;

}



/*=============================
 Two Column Layout
==============================*/

.wp-maintenance-interactive-wrapper{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:50px;

    align-items:start;

}



/*=============================
 Left Navigation
==============================*/

.wp-maintenance-navigation{

    display:flex;

    flex-direction:column;

    gap:18px;

    position:sticky;

    top:100px;

}



/*=============================
 Navigation Cards
==============================*/

.wp-maintenance-nav-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:20px;

    padding:24px;

    border:none;

    border-radius:22px;

    width:100%;

    cursor:pointer;

    overflow:hidden;

    text-align:left;

    background:#fff;

    transition:var(--wpm-transition);

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

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

}


/*=============================
 Animated Gradient Border
==============================*/

.wp-maintenance-nav-card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:22px;

    background:linear-gradient(
    135deg,
    transparent,
    rgba(37,99,235,.45),
    transparent);

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

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.5s;

}


.wp-maintenance-nav-card:hover::before{

    opacity:1;

}



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

.wp-maintenance-nav-card::after{

    content:"";

    position:absolute;

    left:0;

    top:18px;

    bottom:18px;

    width:5px;

    border-radius:50px;

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

    transform:scaleY(0);

    transition:.4s;

}


.wp-maintenance-nav-card:hover::after,
.wp-maintenance-nav-card.active::after{

    transform:scaleY(1);

}



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

.wp-maintenance-nav-card:hover{

    transform:translateY(-8px);

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

}



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

.wp-maintenance-nav-card.active{

    background:linear-gradient(
    135deg,
    #ffffff,
    #f7fbff);

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

}



/*=============================
 Icon Box
==============================*/

.wp-maintenance-nav-icon{

    width:70px;

    height:70px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    font-size:28px;

    color:var(--wpm-primary);

    background:linear-gradient(
    135deg,
    rgba(37,99,235,.10),
    rgba(96,165,250,.20));

    transition:.45s;

}


.wp-maintenance-nav-card:hover .wp-maintenance-nav-icon{

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

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

    color:#fff;

}



/*=============================
 Text Area
==============================*/

.wp-maintenance-nav-content{

    flex:1;

}


.wp-maintenance-nav-content h3{

    margin:0 0 6px;

    color:var(--wpm-text);

    font-size:20px;

    font-weight:700;

    transition:.35s;

}


.wp-maintenance-nav-content span{

    display:block;

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

    font-size:15px;

    line-height:1.5;

}



/*=============================
 Arrow
==============================*/

.wp-maintenance-nav-arrow{

    font-size:18px;

    color:var(--wpm-primary);

    transition:.45s;

}


.wp-maintenance-nav-card:hover .wp-maintenance-nav-arrow{

    transform:translateX(8px);

}



/*=============================
 Active Typography
==============================*/

.wp-maintenance-nav-card.active h3{

    color:var(--wpm-primary);

}


.wp-maintenance-nav-card.active .wp-maintenance-nav-arrow{

    transform:translateX(8px);

}



/*=============================
 Ripple Layer
(JS will animate this)
==============================*/

.wp-maintenance-nav-card .ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:rippleAnimation .6s linear;

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

    pointer-events:none;

}


@keyframes rippleAnimation{

    to{

        transform:scale(4);

        opacity:0;

    }

}



/*=========================================================
  WordPress Maintenance Section 2
  Complete WordPress Website Maintenance Solutions
  Part 2 - Right Panel, Animations & Responsive Design
=========================================================*/


/*=========================================================
  Right Content Panel
=========================================================*/

.wp-maintenance-content-area{

    position:relative;

    overflow:hidden;

    background:#ffffff;

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

    border-radius:30px;

    padding:55px;

    min-height:720px;

    box-shadow:var(--wpm-shadow-md);

    transition:all .45s ease;

}


.wp-maintenance-content-area::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

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

    background-size:300% 100%;

    animation:maintenanceGradientMove 6s linear infinite;

}


@keyframes maintenanceGradientMove{

    from{

        background-position:0% 50%;

    }

    to{

        background-position:100% 50%;

    }

}



/*=========================================================
 Floating Glow
=========================================================*/

.wp-maintenance-content-area::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    top:-150px;
    right:-120px;

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

    animation:maintenanceGlow 10s ease-in-out infinite alternate;

    pointer-events:none;

}


@keyframes maintenanceGlow{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.25);

    }

}



/*=========================================================
 Individual Content Panels
=========================================================*/

.wp-maintenance-content-item{

    display:none;

    animation:maintenanceFade .55s ease;

}


.wp-maintenance-content-item.active{

    display:block;

}


@keyframes maintenanceFade{

    from{

        opacity:0;

        transform:translateY(25px);

        filter:blur(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

        filter:blur(0);

    }

}



/*=========================================================
 Icon
=========================================================*/

.wp-maintenance-content-icon{

    width:90px;
    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    border-radius:24px;

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

    color:#fff;

    font-size:36px;

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

    animation:maintenanceIconFloat 3s ease-in-out infinite;

}


@keyframes maintenanceIconFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}



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

.wp-maintenance-content-item h3{

    margin-bottom:22px;

    font-size:36px;

    line-height:1.25;

    color:var(--wpm-text);

    font-weight:800;

}



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

.wp-maintenance-content-item p{

    font-size:18px;

    line-height:2;

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

}



/*=========================================================
 Optional List
=========================================================*/

.wp-maintenance-content-item ul{

    margin-top:35px;

    padding:0;

    list-style:none;

}


.wp-maintenance-content-item li{

    position:relative;

    padding-left:38px;

    margin-bottom:18px;

    color:var(--wpm-text);

    font-size:17px;

    line-height:1.8;

}


.wp-maintenance-content-item li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    width:24px;

    height:24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--wpm-primary);

    font-size:13px;

    font-weight:700;

}



/*=========================================================
 Scroll Animation Support
=========================================================*/

.wp-maintenance-solutions-section.reveal{

    opacity:1;

    transform:translateY(0);

}


.wp-maintenance-solutions-section{

    opacity:0;

    transform:translateY(60px);

    transition:all .9s ease;

}



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

.wp-maintenance-content-area:hover{

    transform:translateY(-5px);

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

}



/*=========================================================
 Focus Accessibility
=========================================================*/

.wp-maintenance-nav-card:focus{

    outline:none;

}


.wp-maintenance-nav-card:focus-visible{

    box-shadow:
    0 0 0 4px rgba(37,99,235,.18),
    var(--wpm-shadow-lg);

}



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

@media (max-width:1300px){

    .wp-maintenance-interactive-wrapper{

        grid-template-columns:330px 1fr;

        gap:35px;

    }

}



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

@media (max-width:1024px){

    .wp-maintenance-solutions-section{

        padding:90px 20px;

    }

    .wp-maintenance-interactive-wrapper{

        grid-template-columns:1fr;

        gap:35px;

    }

    .wp-maintenance-navigation{

        position:relative;

        top:auto;

    }

    .wp-maintenance-content-area{

        min-height:auto;

        padding:40px;

    }

}



/*=========================================================
 Mobile
=========================================================*/

@media (max-width:768px){

    .wp-maintenance-solutions-heading{

        margin-bottom:45px;

    }

    .wp-maintenance-solutions-heading h2{

        font-size:34px;

    }

    .wp-maintenance-solutions-heading p{

        font-size:16px;

        line-height:1.8;

    }

    .wp-maintenance-nav-card{

        padding:18px;

    }

    .wp-maintenance-nav-icon{

        width:58px;
        height:58px;

        font-size:22px;

        border-radius:16px;

    }

    .wp-maintenance-nav-content h3{

        font-size:18px;

    }

    .wp-maintenance-nav-content span{

        font-size:14px;

    }

    .wp-maintenance-content-area{

        padding:30px;

        border-radius:24px;

    }

    .wp-maintenance-content-icon{

        width:75px;
        height:75px;

        font-size:30px;

    }

    .wp-maintenance-content-item h3{

        font-size:28px;

    }

    .wp-maintenance-content-item p{

        font-size:16px;

        line-height:1.9;

    }

}



/*=========================================================
 Small Mobile
=========================================================*/

@media (max-width:480px){

    .wp-maintenance-solutions-section{

        padding:70px 15px;

    }

    .wp-maintenance-solutions-heading h2{

        font-size:30px;

    }

    .wp-maintenance-nav-card{

        gap:14px;

        padding:16px;

    }

    .wp-maintenance-nav-arrow{

        display:none;

    }

    .wp-maintenance-nav-icon{

        width:52px;
        height:52px;

        font-size:20px;

    }

    .wp-maintenance-content-area{

        padding:24px;

    }

    .wp-maintenance-content-item h3{

        font-size:24px;

    }

    .wp-maintenance-content-item p{

        font-size:15px;

        line-height:1.8;

    }

}



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

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

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

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}