/*=========================================================
  WordPress Website Maintenance Hero Banner
  CSS Part 1
  Layout • Typography • Responsive Structure
=========================================================*/

:root{

    --primary:#2563eb;
    --secondary:#0f172a;
    --accent:#38bdf8;
    --light:#ffffff;
    --text:#dbe7ff;
    --border:rgba(255,255,255,.12);

    --gradient:
        linear-gradient(135deg,#0f172a 0%,#16213e 35%,#1d4ed8 100%);

}

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

.wp-maintenance-hero{

    position:relative;
    overflow:hidden;

    background:var(--gradient);

    padding:120px 0;

    min-height:760px;

    display:flex;
    align-items:center;

    isolation:isolate;

}

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

.maintenance-container{

    width:min(1320px,92%);
    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:80px;

    align-items:center;

    position:relative;
    z-index:5;

}

/*=========================================================
 Background Layer
=========================================================*/

.hero-bg{

    position:absolute;
    inset:0;

    overflow:hidden;

    z-index:1;

}

/*=========================================================
 Animated Grid
=========================================================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.35;

}

/*=========================================================
 Left Side
=========================================================*/

.maintenance-left{

    position:relative;

    z-index:10;

}

/*=========================================================
 Tag
=========================================================*/

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

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

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

    border-radius:60px;

    color:#fff;

    font-size:14px;

    font-weight:600;

    backdrop-filter:blur(14px);

    margin-bottom:30px;

}

.hero-tag i{

    color:#4ade80;

}

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

.maintenance-left h1{

    color:#fff;

    font-size:62px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:28px;

    letter-spacing:-1px;

}

.maintenance-left h1 span{

    display:block;

    color:#60a5fa;

}

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

.maintenance-left p{

    color:var(--text);

    font-size:18px;

    line-height:1.9;

    margin-bottom:24px;

    max-width:720px;

}

.maintenance-left strong{

    color:#fff;

}

/*=========================================================
 Buttons
=========================================================*/

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:45px;

}

/* Primary */

.primary-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#fff;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    padding:18px 34px;

    border-radius:60px;

    font-weight:700;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

    box-shadow:

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

}

.primary-btn svg{

    width:20px;
    height:20px;

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-5px);

}

.primary-btn:hover svg{

    transform:translateX(6px);

}

/* Secondary */

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

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

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

    backdrop-filter:blur(14px);

    padding:18px 34px;

    border-radius:60px;

    font-weight:600;

    transition:.35s;

}

.secondary-btn:hover{

    background:#fff;

    color:#0f172a;

}

/*=========================================================
 Right Side
=========================================================*/

.maintenance-right{

    display:flex;

    justify-content:center;

    position:relative;

}

/*=========================================================
 Glass Card
=========================================================*/

.maintenance-card{

    width:100%;

    max-width:520px;

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

    backdrop-filter:blur(24px);

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

    border-radius:28px;

    padding:42px;

    position:relative;

    overflow:hidden;

    box-shadow:

    0 35px 60px rgba(0,0,0,.35);

}

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

.card-top{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-weight:600;

    margin-bottom:45px;

}

.status-dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#22c55e;

}

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

.maintenance-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    margin-bottom:55px;

}

.icon-circle{

    width:120px;
    height:120px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#38bdf8);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:48px;

    position:relative;

    z-index:5;

}

/*=========================================================
 Features
=========================================================*/

.maintenance-features{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

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

    padding:18px;

    border-radius:18px;

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

}

.feature-icon{

    width:58px;
    height:58px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:15px;

    background:linear-gradient(135deg,#2563eb,#38bdf8);

    color:#fff;

    font-size:22px;

}

.feature-text h4{

    color:#fff;

    margin:0 0 6px;

    font-size:18px;

    font-weight:700;

}

.feature-text p{

    margin:0;

    color:#dbe7ff;

    line-height:1.7;

    font-size:15px;

}

/*=========================================================
 Bottom Wave
=========================================================*/

.hero-wave{

    position:absolute;

    left:0;
    bottom:-2px;

    width:100%;

    color:#ffffff;

    line-height:0;

    z-index:2;

}

.hero-wave svg{

    display:block;

    width:100%;

    height:110px;

}

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

@media(max-width:1024px){

.maintenance-container{

grid-template-columns:1fr;

gap:60px;

}

.maintenance-left{

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.maintenance-left h1{

font-size:50px;

}

}

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

@media(max-width:768px){

.wp-maintenance-hero{

padding:90px 0;

min-height:auto;

}

.maintenance-left h1{

font-size:38px;

}

.maintenance-left p{

font-size:16px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;

justify-content:center;

}

.maintenance-card{

padding:28px;

}

.feature-item{

flex-direction:column;

align-items:flex-start;

}

.icon-circle{

width:95px;
height:95px;

font-size:38px;

}

}


/*=========================================================
  WordPress Website Maintenance Hero Banner
  CSS Part 2
  Premium Animations & Interactive Effects
=========================================================*/

/*=========================================================
  Floating Shapes
=========================================================*/

.floating-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(2px);
    opacity:.18;
    animation:floatAnimation 14s ease-in-out infinite;
}

.shape1{
    width:220px;
    height:220px;
    top:-70px;
    left:-70px;
    background:linear-gradient(135deg,#3b82f6,#06b6d4);
    animation-duration:16s;
}

.shape2{
    width:180px;
    height:180px;
    top:18%;
    right:8%;
    background:linear-gradient(135deg,#60a5fa,#2563eb);
    animation-duration:13s;
}

.shape3{
    width:280px;
    height:280px;
    bottom:-120px;
    right:-80px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    animation-duration:18s;
}

.shape4{
    width:140px;
    height:140px;
    bottom:22%;
    left:6%;
    background:linear-gradient(135deg,#38bdf8,#0ea5e9);
    animation-duration:11s;
}

.shape5{
    width:90px;
    height:90px;
    top:55%;
    left:45%;
    background:#ffffff;
    opacity:.08;
    animation-duration:9s;
}

/*=========================================================
  Background Glow
=========================================================*/

.hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
    animation:pulseGlow 8s ease-in-out infinite;
}

.glow1{
    width:520px;
    height:520px;
    top:-180px;
    right:-120px;
    background:rgba(59,130,246,.28);
}

.glow2{
    width:450px;
    height:450px;
    bottom:-150px;
    left:-120px;
    background:rgba(14,165,233,.22);
    animation-delay:2s;
}

/*=========================================================
  Mouse Spotlight
=========================================================*/

.mouse-light{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,255,255,.16) 0%,
        rgba(255,255,255,.05) 40%,
        transparent 70%);
    transform:translate(-50%,-50%);
    pointer-events:none;
    transition:
        left .08s linear,
        top .08s linear;
    mix-blend-mode:screen;
    z-index:2;
}

/*=========================================================
  Animated Grid
=========================================================*/

.hero-grid{
    animation:gridMove 18s linear infinite;
}

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

.maintenance-card::before{

    content:"";

    position:absolute;

    top:-150%;

    left:-60%;

    width:60%;

    height:300%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:rotate(25deg);

    animation:glassShine 9s linear infinite;

}

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

.maintenance-card{
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.maintenance-card:hover{

    transform:
        translateY(-12px)
        rotateX(2deg);

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

}

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

.icon-ring{

    position:absolute;

    border-radius:50%;

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

}

.ring1{

    width:160px;
    height:160px;

    animation:ringRotate 14s linear infinite;

}

.ring2{

    width:210px;
    height:210px;

    border-style:dashed;

    animation:ringReverse 20s linear infinite;

}

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

.icon-circle{

    animation:
        iconFloat 4s ease-in-out infinite,
        iconPulse 3s ease infinite;

}

/*=========================================================
  Feature Cards
=========================================================*/

.feature-item{

    transition:
        transform .35s,
        background .35s,
        border-color .35s;

}

.feature-item:hover{

    transform:translateX(10px);

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

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

}

.feature-icon{

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

}

.feature-item:hover .feature-icon{

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

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

}

/*=========================================================
  Hero Tag
=========================================================*/

.hero-tag{

    transition:
        transform .35s,
        background .35s;

}

.hero-tag:hover{

    transform:translateY(-4px);

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

}

/*=========================================================
  Buttons
=========================================================*/

.primary-btn,
.secondary-btn{

    position:relative;

    overflow:hidden;

}

.primary-btn::before,
.secondary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.8s;

}

.primary-btn:hover::before,
.secondary-btn:hover::before{

    left:120%;

}

.primary-btn:hover{

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

}

.secondary-btn:hover{

    box-shadow:
        0 18px 35px rgba(255,255,255,.15);

}

/*=========================================================
  Text Reveal
=========================================================*/

.maintenance-left h1,
.maintenance-left p,
.hero-buttons,
.hero-tag{

    animation:fadeUp .9s ease both;

}

.maintenance-left p:nth-of-type(1){

    animation-delay:.2s;

}

.maintenance-left p:nth-of-type(2){

    animation-delay:.4s;

}

.hero-buttons{

    animation-delay:.55s;

}

/*=========================================================
  Floating Animations
=========================================================*/

@keyframes floatAnimation{

    0%,100%{

        transform:
            translateY(0)
            translateX(0);

    }

    50%{

        transform:
            translateY(-30px)
            translateX(20px);

    }

}

@keyframes pulseGlow{

    0%,100%{

        transform:scale(1);

        opacity:.22;

    }

    50%{

        transform:scale(1.18);

        opacity:.35;

    }

}

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(60px);

    }

}

@keyframes glassShine{

    from{

        left:-70%;

    }

    to{

        left:170%;

    }

}

@keyframes ringRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes ringReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

@keyframes iconFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes iconPulse{

    0%,100%{

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

    }

    70%{

        box-shadow:
        0 0 0 18px rgba(59,130,246,0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
            translateY(35px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}