/*=========================================
WEBSITE MAINTENANCE HERO
=========================================*/

.maintenance-hero{

    position: relative;

    overflow: hidden;

    padding:120px 0 90px;

    background:#ffffff;

}

/* Background Glow */

.maintenance-hero::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-120px;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(74,107,255,.12) 0%,
    rgba(74,107,255,.06) 35%,
    rgba(74,107,255,0) 72%);

    pointer-events:none;

}

.maintenance-hero::after{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-180px;

    width:420px;

    height:420px;

    background:radial-gradient(circle,
    rgba(74,107,255,.08) 0%,
    transparent 70%);

    pointer-events:none;

}

/*=========================
LAYOUT
=========================*/

.maintenance-hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

}

/*=========================
LEFT
=========================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    background:#EEF3FF;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    color:#3B5BFF;

    letter-spacing:.5px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.hero-badge svg{

    width:15px;

    height:15px;

}

.maintenance-hero-content h1{

    font-size:64px;

    font-weight:800;

    line-height:1.15;

    color:#111827;

    margin-bottom:25px;

}

.maintenance-hero-content h1 span{

    display:block;

    color:#4A6BFF;

}

.maintenance-hero-content p{

    font-size:18px;

    color:#64748B;

    line-height:1.8;

    max-width:640px;

    margin-bottom:35px;

}

/*=========================
FEATURES
=========================*/

.maintenance-features{

    display:grid;

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

    gap:18px 20px;

    margin-bottom:45px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:500;

    color:#334155;

}

.feature-item svg{

    width:18px;

    height:18px;

    color:#3B5BFF;

    stroke:#3B5BFF;

    flex-shrink:0;

}

/*=========================
BUTTONS
=========================*/

.hero-buttons{

    display:flex;

    gap:18px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:17px 34px;

    background:linear-gradient(135deg,#3B5BFF,#6D5DF6);

    color:#fff;

    border-radius:14px;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(59,91,255,.28);

}

.btn-primary svg{

    width:18px;

    height:18px;

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    background:#fff;

    color:#111827;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.btn-secondary:hover{

    border-color:#3B5BFF;

    color:#3B5BFF;

}

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

.maintenance-hero-image{

    position:relative;

    text-align:right;

}

.maintenance-hero-image img{

    width:100%;

    max-width:700px;

    display:block;

    margin-left:auto;

}

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

@media(max-width:1200px){

.maintenance-hero-content h1{

font-size:52px;

}

}

@media(max-width:991px){

.maintenance-hero{

padding:90px 0 70px;

}

.maintenance-hero-wrapper{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.maintenance-hero-content p{

margin-left:auto;

margin-right:auto;

}

.maintenance-features{

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

max-width:620px;

margin:0 auto 40px;

text-align:left;

}

.hero-buttons{

justify-content:center;

}

.maintenance-hero-image{

text-align:center;

}

.maintenance-hero-image img{

margin:auto;

max-width:560px;

}

}

@media(max-width:767px){

.maintenance-hero-content h1{

font-size:40px;

}

.maintenance-hero-content p{

font-size:16px;

}

.maintenance-features{

grid-template-columns:1fr;

gap:15px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,

.btn-secondary{

width:240px;

justify-content:center;

}

}

@media(max-width:576px){

.maintenance-hero{

padding:80px 0 60px;

}

.hero-badge{

font-size:11px;

padding:8px 14px;

}

.maintenance-hero-content h1{

font-size:34px;

}

.maintenance-hero-content p{

font-size:15px;

}

.maintenance-hero-image img{

max-width:100%;

}

}

/*=========================================
WEBSITE MAINTENANCE SERVICES
=========================================*/

.maintenance-services{

    padding:110px 0;

    background:#fff;

}

.maintenance-services .section-title{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.maintenance-services .section-title span{

    display:inline-block;

    font-size:13px;

    font-weight:700;

    color:#3B5BFF;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.maintenance-services .section-title h2{

    font-size:48px;

    font-weight:800;

    color:#111827;

    line-height:1.25;

    margin-bottom:18px;

}

.maintenance-services .section-title h2 span{

    color:#3B5BFF;

}

.maintenance-services .section-title p{

    font-size:17px;

    line-height:1.8;

    color:#64748B;

}

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

.services-grid{

    display:grid;

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

    gap:25px;

}

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

.service-card{

    background:#fff;

    border:1px solid #EEF2FF;

    border-radius:22px;

    padding:35px 28px;

    transition:.35s;

    box-shadow:0 8px 30px rgba(15,23,42,.04);

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:#D8E2FF;

    box-shadow:0 18px 45px rgba(59,91,255,.12);

}

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

.service-icon{

    width:68px;

    height:68px;

    border-radius:50%;

    background:#F3F6FF;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}

.service-icon svg{

    width:32px;

    height:32px;

    stroke:#3B5BFF;

    color:#3B5BFF;

}

/* Different Icon Colors */

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

    stroke:#6D5DF6;

    color:#6D5DF6;

}

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

    stroke:#F59E0B;

    color:#F59E0B;

}

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

    stroke:#3B82F6;

    color:#3B82F6;

}

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

    stroke:#8B5CF6;

    color:#8B5CF6;

}

/*=========================
TEXT
=========================*/

.service-card h3{

    font-size:22px;

    font-weight:700;

    color:#111827;

    margin-bottom:16px;

    line-height:1.4;

}

.service-card p{

    font-size:15px;

    color:#64748B;

    line-height:1.8;

}

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

@media(max-width:1200px){

.services-grid{

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

}

}

@media(max-width:991px){

.maintenance-services{

padding:90px 0;

}

.maintenance-services .section-title h2{

font-size:38px;

}

.services-grid{

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

}

}

@media(max-width:767px){

.services-grid{

grid-template-columns:1fr;

}

.maintenance-services .section-title{

margin-bottom:50px;

}

.maintenance-services .section-title h2{

font-size:30px;

}

.service-card{

padding:30px 24px;

}

.service-card h3{

font-size:20px;

}

}

@media(max-width:576px){

.maintenance-services{

padding:70px 0;

}

.service-icon{

width:60px;

height:60px;

}

.service-icon svg{

width:28px;

height:28px;

}

.maintenance-services .section-title h2{

font-size:28px;

}

.maintenance-services .section-title p{

font-size:15px;

}

}

/*=========================================
WHY CHOOSE US - WEBSITE MAINTENANCE
=========================================*/

.maintenance-benefits{
    padding:100px 0;
    background:#fff;
    overflow:hidden;
}

.maintenance-benefits-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

/*=========================
LEFT IMAGE
=========================*/

.maintenance-benefits-image{
    flex:1;
    text-align:center;
}

.maintenance-benefits-image img{
    width:100%;
    max-width:520px;
    display:block;
    margin:auto;
}

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

.maintenance-benefits-content{
    flex:1;
}

.section-subtitle{
    display:inline-block;
    margin-bottom:15px;
    font-size:13px;
    font-weight:700;
    color:#3B5BFF;
    text-transform:uppercase;
    letter-spacing:1px;
}

.maintenance-benefits-content h2{
    font-size:48px;
    font-weight:800;
    line-height:1.25;
    color:#111827;
    margin-bottom:40px;
}

.maintenance-benefits-content h2 span{
    display:block;
    color:#4F46E5;
}

/*=========================
BENEFITS
=========================*/

.benefits-list{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.benefit-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.benefit-item i,
.benefit-item svg{
    width:22px;
    height:22px;
    color:#3B5BFF;
    stroke:#3B5BFF;
    flex-shrink:0;
    margin-top:4px;
}

.benefit-item h4{
    font-size:20px;
    font-weight:700;
    color:#111827;
    margin-bottom:8px;
}

.benefit-item p{
    font-size:15px;
    line-height:1.8;
    color:#64748B;
    margin:0;
}

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

@media(max-width:991px){

.maintenance-benefits{
padding:80px 0;
}

.maintenance-benefits-wrapper{
flex-direction:column;
text-align:center;
}

.maintenance-benefits-content h2{
font-size:38px;
}

.benefit-item{
text-align:left;
}

}

@media(max-width:767px){

.maintenance-benefits{
padding:70px 0;
}

.maintenance-benefits-wrapper{
gap:45px;
}

.maintenance-benefits-content h2{
font-size:30px;
}

.benefit-item{
gap:14px;
}

.benefit-item h4{
font-size:18px;
}

.benefit-item p{
font-size:14px;
line-height:1.7;
}

.maintenance-benefits-image img{
max-width:380px;
}

}

@media(max-width:576px){

.maintenance-benefits-content h2{
font-size:28px;
}

.section-subtitle{
font-size:12px;
}

.benefit-item{
align-items:flex-start;
}

.benefit-item i,
.benefit-item svg{
width:20px;
height:20px;
}

.maintenance-benefits-image img{
max-width:100%;
}

}


/*=========================================
WEBSITE MAINTENANCE CTA
=========================================*/

.maintenance-cta{
    padding:90px 0;
    background:#fff;
}

.cta-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;

    padding:40px 50px;

    border-radius:24px;

    background:linear-gradient(135deg,#F6F5FF 0%,#EEF3FF 100%);

    border:1px solid #E8ECFF;
}

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

.cta-icon{
    flex-shrink:0;
}

.icon-box{
    width:95px;
    height:95px;

    background:#fff;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 15px 35px rgba(59,91,255,.08);
}

.icon-box svg{
    width:42px;
    height:42px;

    color:#4F46E5;
    stroke:#4F46E5;
}

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

.cta-content{
    flex:1;
}

.cta-content h2{
    font-size:40px;
    font-weight:800;
    color:#111827;
    margin-bottom:12px;
    line-height:1.2;
}

.cta-content p{
    font-size:17px;
    line-height:1.8;
    color:#64748B;
    max-width:520px;
}

/*=========================
BUTTONS
=========================*/

.cta-buttons{
    display:flex;
    gap:18px;
}

.cta-buttons .btn-primary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:180px;

    padding:18px 35px;

    background:linear-gradient(135deg,#3B5BFF,#6A5AF9);

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    border-radius:12px;

    transition:.3s;
}

.cta-buttons .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(59,91,255,.25);

}

.cta-buttons .btn-secondary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:180px;

    padding:18px 35px;

    background:#fff;

    color:#111827;

    border:1px solid #E5E7EB;

    border-radius:12px;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:.3s;
}

.cta-buttons .btn-secondary:hover{

    border-color:#3B5BFF;

    color:#3B5BFF;

}

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

@media(max-width:992px){

.cta-wrapper{

flex-direction:column;

text-align:center;

padding:40px 30px;

}

.cta-content p{

margin:auto;

}

}

@media(max-width:768px){

.maintenance-cta{

padding:70px 0;

}

.cta-content h2{

font-size:30px;

}

.cta-content p{

font-size:15px;

}

.cta-buttons{

flex-direction:column;

width:100%;

}

.cta-buttons a{

width:100%;

}

.icon-box{

width:80px;
height:80px;

}

.icon-box svg{

width:36px;
height:36px;

}

}

@media(max-width:576px){

.cta-wrapper{

padding:30px 20px;

border-radius:18px;

}

.cta-content h2{

font-size:26px;

}

}