/* ===================================================
   Service Detail Pages
   Inspire Global Services
=================================================== */

.service-overview-section{
    padding:70px 0;
}

/* Hero */

.service-hero-card{

    background:#fff;
    border-radius:20px;
    padding:50px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid #eef2f7;
    margin-bottom:50px;
}

.service-detail-image{

    max-width:280px;
    transition:.4s;
}

.service-detail-image:hover{

    transform:scale(1.05);
}

.service-badge{

    display:inline-block;
    background:#eef4ff;
    color:#0d6efd;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
}

.service-title{

    font-size:42px;
    font-weight:700;
    color:#222;
    margin-bottom:20px;
}

.service-description{

    color:#5f6d7a;
    line-height:1.9;
    /* text-align:justify; */
    font-size:17px;
}

/* Tags */

.service-tags{

    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.service-tags span{

    border:1px solid #dee2e6;
    padding:10px 18px;
    border-radius:40px;
    font-size:14px;
    background:#fff;
    transition:.3s;
}

.service-tags span:hover{

    background:#0d6efd;
    color:#fff;
    border-color:#0d6efd;
}

/* Section Card */

.section-icon{

    width:70px;
    height:70px;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    margin-bottom:20px;
}

.modern-section-card{

    background:#fff;
    border-radius:20px;
    padding:40px;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.modern-section-card h3{

    font-weight:700;
    margin-bottom:20px;
}

.modern-section-card p{

    color:#666;
    line-height:1.9;
}

/* Solution Cards */

.solution-card{

    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.35s;
    text-align:center;
    height:100%;
}

.solution-card:hover{

    transform:translateY(-8px);
}

.solution-card i{

    font-size:42px;
    color:#0d6efd;
    margin-bottom:20px;
}

.solution-card h5{

    font-weight:700;
    margin-bottom:15px;
}

.solution-card p{

    color:#666;
    line-height:1.8;
}

/* Capability */

.capability-card{

    background:#fff;
    border-radius:16px;
    padding:30px;
    text-align:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
    height:100%;
}

.capability-card:hover{

    background:#0d6efd;
    color:#fff;
}

.capability-card:hover i{

    color:#fff;
}

.capability-card i{

    font-size:34px;
    color:#0d6efd;
    margin-bottom:18px;
}

.capability-card h5{

    font-size:18px;
    font-weight:600;
}

/* Industry */

.industry-grid{

    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
}

.industry-grid span{

    padding:12px 24px;
    border-radius:50px;
    border:1px solid #dfe6ec;
    background:#fff;
    transition:.3s;
}

.industry-grid span:hover{

    background:#0d6efd;
    color:#fff;
}

/* Benefits */

.benefit-modern-card{

    background:#fff;
    border-radius:18px;
    padding:35px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

.benefit-modern-card:hover{

    transform:translateY(-8px);
}

.benefit-modern-card h5{

    font-weight:700;
    margin-bottom:18px;
}

.benefit-modern-card p{

    color:#666;
    line-height:1.8;
}

/* Section Heading */

.service-overview-section h2{

    font-weight:700;
    margin-bottom:15px;
}

.service-overview-section .text-muted{

    font-size:17px;
}

/* Mobile */

@media(max-width:992px){

.service-hero-card{

padding:35px;

}

.service-title{

font-size:34px;

}

.service-detail-image{

max-width:220px;
margin-bottom:30px;

}

}

@media(max-width:768px){

.service-title{

font-size:28px;

}

.service-description{

font-size:16px;

}

.modern-section-card{

padding:25px;

}

.solution-card,
.capability-card,
.benefit-modern-card{

padding:25px;

}

}


/* ============================================
   AI Solution Cards
============================================ */

.solution-card{

    position:relative;
    overflow:hidden;
}

.solution-card::before{

    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#0d6efd,#6f42c1);
}

.solution-card:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(13,110,253,.18);
}

/* ============================================
   Capability Cards
============================================ */

.capability-card{

    border:1px solid #edf2f7;
}

.capability-card:hover{

    background:#0d6efd;
    border-color:#0d6efd;
}

.capability-card:hover h5{

    color:#fff;
}

.capability-card:hover i{

    transform:scale(1.15);
}

.capability-card i{

    transition:.3s;
}

/* ============================================
   Industry Pills
============================================ */

.industry-grid span{

    font-weight:500;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.industry-grid span:hover{

    transform:translateY(-3px);
}

/* ============================================
   Benefit Cards
============================================ */

.benefit-modern-card{

    position:relative;
    overflow:hidden;
}

.benefit-modern-card::after{

    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:4px;
    background:#0d6efd;
    transform:scaleX(0);
    transition:.35s;
}

.benefit-modern-card:hover::after{

    transform:scaleX(1);
}

/*==================================================
DATABASE HERO
==================================================*/

.database-hero{

    position:relative;

    padding:90px 0;

    background:linear-gradient(135deg,#07162e,#0b3057);

    overflow:hidden;

}

.database-hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:rgba(0,184,217,.08);

    border-radius:50%;

    top:-250px;

    right:-250px;

}

.database-hero .service-title{

    color:#fff;

    font-size:52px;

    font-weight:700;

    line-height:1.2;

}

.database-hero .service-title span{

    color:#35d0ff;

}

.database-hero .service-description{

    color:#d7e8ff;

    margin-top:25px;

    font-size:18px;

    line-height:1.9;

}

.database-hero .service-badge{

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

    color:#35d0ff;

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

}

.technology-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}

.technology-tags span{

    background:#83defa;

    padding:10px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    color:#0b3057;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    transition: .3s;

}

.technology-tags i{

    color:#00b8d9;

    margin-right:8px;

}

.hero-image{

    max-width:450px;

    animation:floatImage 4s ease-in-out infinite;

}

.database-illustration{

    position:relative;

}

.floating-card{

    position:absolute;

    background:#fff;

    padding:14px 20px;

    border-radius:15px;

    font-weight:600;

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

}

.floating-card i{

    color:#00b8d9;

    margin-right:8px;

}

.card-one{

    top:30px;

    left:0;

}

.card-two{

    bottom:70px;

    left:20px;

}

.card-three{

    top:45%;

    right:-20px;

}

@keyframes floatImage{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/*==================================================
DATABASE CHALLENGES
==================================================*/

.section-subtitle{

    display:inline-block;

    background:#e8f6ff;

    color:#0077b6;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:15px;

}

.section-title{

    font-size:40px;

    font-weight:700;

    color:#0b3057;

    margin-bottom:20px;

}

.section-description{

    max-width:850px;

    margin:auto;

    color:#dee3e7;

    line-height:1.8;

    font-size:17px;

}

.challenge-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    text-align:center;

    height:100%;

    transition:.35s;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    border-top:4px solid transparent;

}

.challenge-card:hover{

    transform:translateY(-10px);

    border-top:4px solid #00b8d9;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.challenge-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#eef8ff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.challenge-icon i{

    font-size:32px;

    color:#00b8d9;

}

.challenge-card h5{

    font-weight:700;

    margin-bottom:18px;

    color:#0b3057;

}

.challenge-card p{

    color:#6c757d;

    line-height:1.8;

    margin:0;

}

.challenge-card:hover .challenge-icon{

    background:#00b8d9;

}

.challenge-card:hover .challenge-icon i{

    color:#fff;

}

/*=========================================
DATABASE SERVICE CARDS
=========================================*/

.dba-service-card{

    background:#fff;
    border-radius:20px;
    padding:35px;
    height:100%;

    box-shadow:0 10px 35px rgba(0,0,0,.07);

    transition:.35s;

    border-top:4px solid transparent;

}

.dba-service-card:hover{

    transform:translateY(-10px);

    border-top:4px solid #00b8d9;

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

}

.service-icon{

    width:75px;
    height:75px;

    background:#eef8ff;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.service-icon i{

    font-size:32px;

    color:#00b8d9;

}

.dba-service-card:hover .service-icon{

    background:#00b8d9;

}

.dba-service-card:hover .service-icon i{

    color:#fff;

}

.dba-service-card h4{

    font-weight:700;

    color:#0b3057;

    margin-bottom:15px;

}

.dba-service-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:20px;

}

.dba-service-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.dba-service-card ul li{

    margin-bottom:12px;

    color:#555;

}

.dba-service-card ul li i{

    color:#00b8d9;

    margin-right:10px;

}

/*==================================================
TECHNOLOGY SECTION
==================================================*/

.technology-section{

    background:#f8fbff;

}

.technology-card{

    background:#fff;

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    border-bottom:4px solid transparent;

}

.technology-card:hover{

    transform:translateY(-8px);

    border-bottom:4px solid #00b8d9;

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

}

.technology-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    background:#eef8ff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.technology-icon i{

    font-size:34px;

    color:#00b8d9;

}

.technology-card:hover .technology-icon{

    background:#00b8d9;

}

.technology-card:hover .technology-icon i{

    color:#fff;

}

.technology-card h5{

    font-weight:700;

    color:#0b3057;

    margin-bottom:15px;

}

.technology-card p{

    color:#666;

    line-height:1.8;

    margin:0;

    font-size:15px;

}

/*==================================================
SERVICE PROCESS
==================================================*/

.service-process-section{

    background:#ffffff;

}

.process-timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.process-timeline::before{

    content:"";

    position:absolute;

    left:35px;

    top:0;

    bottom:0;

    width:3px;

    background:#d8ecff;

}

.process-item{

    display:flex;

    position:relative;

    margin-bottom:45px;

}

.process-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#00b8d9;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

    z-index:2;

    box-shadow:0 10px 25px rgba(0,184,217,.25);

}

.process-content{

    margin-left:30px;

    background:#fff;

    padding:28px;

    border-radius:18px;

    flex:1;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.35s;

}

.process-content:hover{

    transform:translateY(-6px);

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

}

.process-content h4{

    font-weight:700;

    color:#0b3057;

    margin-bottom:12px;

}

.process-content p{

    color:#666;

    line-height:1.8;

    margin:0;

}

/* Mobile */

@media(max-width:768px){

.process-timeline::before{

left:25px;

}

.process-icon{

width:50px;
height:50px;
font-size:20px;

}

.process-content{

margin-left:20px;
padding:20px;

}

}


/*==========================================
HORIZONTAL PROCESS
==========================================*/

.process-section{

    background:#f8fbff;

}

.horizontal-process{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:18px;

    flex-wrap:nowrap;

}

.process-step{

    width:180px;

    text-align:center;

    position:relative;

}

.step-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#eef8ff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.step-icon i{

    font-size:32px;

    color:#00b8d9;

}

.process-step:hover .step-icon{

    background:#00b8d9;

    transform:translateY(-8px);

}

.process-step:hover .step-icon i{

    color:#fff;

}

.process-step h5{

    margin-top:20px;

    font-weight:700;

    color:#0b3057;

}

.process-step p{

    margin-top:10px;

    color:#666;

    line-height:1.7;

    font-size:14px;

}

.process-arrow{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:32px;

}

.process-arrow i{

    color:#00b8d9;

    font-size:28px;

}

/* Mobile */

@media(max-width:992px){

.horizontal-process{

flex-wrap:wrap;

}

.process-arrow{

display:none;

}

.process-step{

width:45%;

margin-bottom:30px;

}

}

@media(max-width:576px){

.process-step{

width:100%;

}

}

/*======================================
DATABASE PROCESS
======================================*/

.process-section{

    background:#ffffff;

}

.process-wrapper{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-top:70px;

}

.process-line{

    position:absolute;

    top:35px;

    left:8%;

    width:84%;

    height:4px;

    background:#dcecf7;

    z-index:0;

}

.process-node{

    position:relative;

    width:16%;

    text-align:center;

    z-index:2;

}

.process-circle{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background:#ffffff;

    border:4px solid #00b8d9;

    color:#00b8d9;

    font-size:24px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.process-fa{

    margin-top:25px;

    font-size:34px;

    color:#00b8d9;

    transition:.35s;

}

.process-node h5{

    margin-top:18px;

    font-weight:700;

    color:#0b3057;

}

.process-node p{

    margin-top:15px;

    font-size:14px;

    line-height:1.8;

    color:#666;

}

.process-node:hover .process-circle{

    background:#00b8d9;

    color:#fff;

    transform:translateY(-10px) scale(1.08);

}

.process-node:hover .process-fa{

    color:#0b3057;

    transform:scale(1.15);

}

/* Mobile */

@media(max-width:992px){

.process-wrapper{

display:block;

}

.process-line{

display:none;

}

.process-node{

width:100%;

margin-bottom:50px;

}

}


/*=================================================
SUPPORT DASHBOARD
=================================================*/

.support-dashboard{

    max-width:420px;

    margin:auto;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

}

.dashboard-header{

    background:#111827;

    color:#fff;

    padding:12px 18px;

    font-size:15px;

    font-weight:600;

}

.status-live{

    color:#22c55e;

    animation:pulse 1.5s infinite;

}

.dashboard-body{

    padding:18px;

}

.dashboard-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

    padding-bottom:10px;

    font-size:14px;

    border-bottom:1px solid #eef2f7;

}

.dashboard-subtitle{

    margin-bottom:25px;

    color:#0b3057;

    font-weight:700;

}

.metric{

    margin-bottom:15px;

}

.metric-title{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

    font-weight:600;

    font-size:13px;

}

.metric-title i{

    color:#10b981;

    margin-right:8px;

}

.progress{

     height:6px;

    border-radius:20px;

    background:#edf2f7;

}

.progress-bar{

    border-radius:20px;

}

.mini-stat{

    background:#f8fbff;

    border-radius:15px;

    padding:12px 8px;

    transition:.35s;

}

.mini-stat:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.mini-stat i{

    color:#10b981;

    font-size:18px;

    margin-bottom:10px;

}

.mini-stat h4{

    margin:8px 0;

    font-size:20px;

    color:#0b3057;

}

.mini-stat small{

    color:#6b7280;

}

.section-divider{

    margin:15px 0;

    border-top:1px solid #edf2f7;

}

@keyframes pulse{

0%{

opacity:.5;

transform:scale(.9);

}

50%{

opacity:1;

transform:scale(1.2);

}

100%{

opacity:.5;

transform:scale(.9);

}

}


/* Managed Support Theme */

.challenge-card:hover{

    border-top:4px solid #10b981;

}

.challenge-icon{

    background:#ecfdf5;

}

.challenge-icon i{

    color:#10b981;

}

.challenge-card:hover .challenge-icon{

    background:#10b981;

}

.challenge-card:hover .challenge-icon i{

    color:#ffffff;

}


/*==============================================
MANAGED SUPPORT SERVICE CARDS
==============================================*/

.support-service-card{

    background:#ffffff;

    border-radius:20px;

    padding:35px;

    height:100%;

    transition:.35s;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    border-top:4px solid transparent;

}

.support-service-card:hover{

    transform:translateY(-10px);

    border-top:4px solid #10b981;

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

}

.support-icon{

    width:75px;

    height:75px;

    border-radius:18px;

    background:#ecfdf5;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

    transition:.35s;

}

.support-icon i{

    font-size:32px;

    color:#10b981;

}

.support-service-card:hover .support-icon{

    background:#10b981;

}

.support-service-card:hover .support-icon i{

    color:#fff;

}

.support-service-card h4{

    color:#0f172a;

    font-weight:700;

    margin-bottom:15px;

}

.support-service-card p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:20px;

}

.support-service-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.support-service-card ul li{

    margin-bottom:12px;

    color:#475569;

}

.support-service-card ul li i{

    color:#10b981;

    margin-right:10px;

}

/*======================================
SUPPORT COVERAGE
======================================*/

.support-coverage{

    background:#f8fbff;

}

.coverage-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    text-align:center;

    height:100%;

    transition:.35s;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    border-bottom:4px solid transparent;

}

.coverage-card:hover{

    transform:translateY(-8px);

    border-bottom:4px solid #10b981;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.coverage-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#ecfdf5;

    display:flex;

    justify-content:center;

    align-items:center;

}

.coverage-icon i{

    font-size:34px;

    color:#10b981;

}

.coverage-card:hover .coverage-icon{

    background:#10b981;

}

.coverage-card:hover .coverage-icon i{

    color:#fff;

}

.coverage-card h5{

    margin-bottom:15px;

    font-weight:700;

    color:#0f172a;

}

.coverage-card p{

    color:#64748b;

    line-height:1.8;

    font-size:15px;

}

/*=========================================
SUPPORT PROCESS
=========================================*/

.support-process{

    background:#ffffff;

}

.process-flow{

    display:flex;

    justify-content:space-between;

    position:relative;

    margin-top:70px;

}

.flow-line{

    position:absolute;

    top:40px;

    left:7%;

    width:86%;

    height:4px;

    background:#d1fae5;

    z-index:0;

}

.flow-item{

    width:16%;

    text-align:center;

    position:relative;

    z-index:2;

}

.flow-circle{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#fff;

    border:4px solid #10b981;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.flow-circle i{

    font-size:30px;

    color:#10b981;

}

.flow-item:hover .flow-circle{

    background:#10b981;

    transform:translateY(-10px);

}

.flow-item:hover .flow-circle i{

    color:#fff;

}

.flow-item h5{

    margin-top:20px;

    font-weight:700;

    color:#0f172a;

}

.flow-item p{

    margin-top:12px;

    font-size:14px;

    color:#64748b;

    line-height:1.7;

}

/* Responsive */

@media(max-width:992px){

.process-flow{

display:block;

}

.flow-line{

display:none;

}

.flow-item{

width:100%;

margin-bottom:50px;

}

}

/*======================================
WHY INSPIREGS
======================================*/

.why-inspiregs{

    background:#f8fbff;

}

.why-card{

    background:#fff;

    border-radius:20px;

    padding:35px 30px;

    text-align:center;

    height:100%;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    border-top:4px solid transparent;

}

.why-card:hover{

    transform:translateY(-10px);

    border-top:4px solid #10b981;

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

}

.why-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#ecfdf5;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.why-icon i{

    font-size:34px;

    color:#10b981;

}

.why-card:hover .why-icon{

    background:#10b981;

}

.why-card:hover .why-icon i{

    color:#fff;

}

.why-card h5{

    margin-bottom:15px;

    font-weight:700;

    color:#0f172a;

}

.why-card p{

    color:#64748b;

    line-height:1.8;

    margin:0;

}


/*==========================================
CLOUD HERO
==========================================*/

.cloud-hero{

    background:linear-gradient(135deg,#f8fcff,#e0f2fe);

    padding:90px 0;

    overflow:hidden;

}

.cloud-hero .service-title{

    font-size:52px;

    font-weight:700;

    color:#0f172a;

}

.cloud-hero .service-title span{

    color:#0284c7;

}

.cloud-hero .service-description{

    margin-top:25px;

    color:#475569;

    font-size:18px;

    line-height:1.9;

}

/*============================*/

.cloud-architecture{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.10);

    max-width:460px;

    margin:auto;

}

.cloud-header{

    background:#0284c7;

    color:#fff;

    padding:16px 20px;

    font-weight:600;

    font-size:18px;

}

.cloud-header i{

    margin-right:10px;

}

.architecture-body{

    padding:30px;

    text-align:center;

}

/*============================*/

.cloud-node{

    display:inline-flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:130px;

    height:90px;

    background:#f8fbff;

    border:2px solid #dbeafe;

    border-radius:16px;

    margin:auto;

    transition:.35s;

}

.cloud-node:hover{

    transform:translateY(-6px);

    border-color:#0284c7;

    box-shadow:0 12px 30px rgba(2,132,199,.15);

}

.cloud-node i{

    font-size:28px;

    color:#0284c7;

    margin-bottom:10px;

}

.internet{

    width:160px;

}

.load{

    width:170px;

}

.database{

    width:160px;

}

.backup{

    width:180px;

}

/*============================*/

.architecture-row{

    display:flex;

    justify-content:center;

    gap:30px;

    margin:20px 0;

}

.connector{

    width:4px;

    height:25px;

    background:#93c5fd;

    margin:10px auto;

}

.connector.short{

    height:18px;

}

/*============================*/

@media(max-width:992px){

.cloud-architecture{

margin-top:50px;

}

.cloud-hero .service-title{

font-size:40px;

}

.architecture-row{

flex-direction:column;

align-items:center;

}

}


/*==========================================
HERO CLOUD ARCHITECTURE
==========================================*/

.hero-cloud-architecture{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.10);

    max-width:460px;

    margin:auto;

}

.hero-cloud-header{

    background:#0284c7;

    color:#fff;

    padding:16px 20px;

    font-size:18px;

    font-weight:600;

}

.hero-cloud-header i{

    margin-right:10px;

}

.hero-architecture-body{

    padding:30px;

    text-align:center;

}

/* Nodes */

.hero-cloud-node{

    width:130px;

    height:90px;

    margin:auto;

    background:#f8fbff;

    border:2px solid #dbeafe;

    border-radius:16px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.hero-cloud-node:hover{

    transform:translateY(-5px);

    border-color:#0284c7;

    box-shadow:0 10px 25px rgba(2,132,199,.15);

}

.hero-cloud-node i{

    font-size:26px;

    color:#0284c7;

    margin-bottom:8px;

}

/* Special Sizes */

.hero-cloud-node.internet{

    width:160px;

}

.hero-cloud-node.load{

    width:170px;

}

.hero-cloud-node.database{

    width:160px;

}

.hero-cloud-node.backup{

    width:180px;

}

/* Connectors */

.hero-connector{

    width:3px;

    height:22px;

    background:#93c5fd;

    margin:10px auto;

}

.hero-connector.short{

    height:16px;

}

/* App Servers */

.hero-architecture-row{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:18px 0;

}

/* Responsive */

@media(max-width:992px){

.hero-cloud-architecture{

margin-top:40px;

}

.hero-architecture-row{

flex-direction:column;

align-items:center;

gap:15px;

}

}


/*==========================================
CLOUD CHALLENGES
==========================================*/

.cloud-challenges{

    background:#ffffff;

}

.cloud-challenge-card{

    position:relative;

    background:#fff;

    border-radius:20px;

    padding:35px;

    height:100%;

    transition:.35s;

    overflow:hidden;

    border:1px solid #e2e8f0;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.cloud-challenge-card:hover{

    transform:translateY(-10px);

    border-color:#0ea5e9;

    box-shadow:0 18px 40px rgba(14,165,233,.18);

}

.challenge-number{

    position:absolute;

    top:18px;

    right:20px;

    font-size:38px;

    font-weight:700;

    color:#e0f2fe;

}

.challenge-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#e0f2fe;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    transition:.35s;

}

.challenge-icon i{

    font-size:30px;

    color:#0284c7;

}

.cloud-challenge-card:hover .challenge-icon{

    background:#0284c7;

}

.cloud-challenge-card:hover .challenge-icon i{

    color:#fff;

}

.cloud-challenge-card h5{

    font-weight:700;

    color:#0f172a;

    margin-bottom:15px;

}

.cloud-challenge-card p{

    color:#64748b;

    line-height:1.8;

    margin:0;

}

/*==================================================
CLOUD SERVICES
==================================================*/

.cloud-services{

    background:#ffffff;

}

.cloud-service-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.35s;

    border-top:4px solid transparent;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

.cloud-service-card:hover{

    transform:translateY(-10px);

    border-top:4px solid #0ea5e9;

    box-shadow:0 20px 45px rgba(14,165,233,.18);

}

.cloud-service-card .service-icon{

    width:75px;

    height:75px;

    background:#e0f2fe;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    transition:.35s;

}

.cloud-service-card .service-icon i{

    font-size:30px;

    color:#0284c7;

}

.cloud-service-card:hover .service-icon{

    background:#0284c7;

}

.cloud-service-card:hover .service-icon i{

    color:#fff;

}

.cloud-service-card h4{

    color:#0f172a;

    font-weight:700;

    margin-bottom:15px;

}

.cloud-service-card p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:18px;

}

.cloud-service-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.cloud-service-card li{

    margin-bottom:10px;

    color:#475569;

}

.cloud-service-card li i{

    color:#0ea5e9;

    margin-right:10px;

}

/*==========================================
Cloud Ecosystem
==========================================*/

.cloud-capabilities{

    background:#f8fbff;

}

.cloud-ecosystem{

    position:relative;

    width:700px;

    height:700px;

    margin:70px auto;

}

/* Center */

.cloud-center{

    position:absolute;

    left:50%;

    top:50%;

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

    width:190px;

    height:190px;

    background:linear-gradient(135deg,#0ea5e9,#2563eb);

    border-radius:50%;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:0 20px 50px rgba(14,165,233,.35);

    z-index:5;

}

.cloud-center i{

    font-size:54px;

    margin-bottom:15px;

}

.cloud-center h4{

    font-weight:700;

}

.cloud-center small{

    opacity:.9;

}

/* Node */

.cloud-node{

    position:absolute;

    width:140px;

    height:140px;

    background:#fff;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

    border:2px solid #dbeafe;

}

.cloud-node:hover{

    transform:scale(1.08);

    background:#0ea5e9;

    color:#fff;

    border-color:#0ea5e9;

}

.cloud-node i{

    font-size:34px;

    color:#0284c7;

    margin-bottom:12px;

    transition:.35s;

}

.cloud-node:hover i{

    color:#fff;

}

.cloud-node h6{

    font-weight:600;

    margin:0;

}

/* Positions */

.top{

left:280px;
top:0;

}

.top-right{

right:70px;
top:90px;

}

.right{

right:0;
top:280px;

}

.bottom-right{

right:70px;
bottom:90px;

}

.bottom{

left:280px;
bottom:0;

}

.bottom-left{

left:70px;
bottom:90px;

}

.left{

left:0;
top:280px;

}

.top-left{

left:70px;
top:90px;

}

/* Connector Lines */

.cloud-ecosystem::before,
.cloud-ecosystem::after{

content:"";

position:absolute;

left:50%;
top:50%;

width:420px;

height:420px;

border:2px dashed #bfdbfe;

border-radius:50%;

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

}

/* Responsive */

@media(max-width:768px){

.cloud-ecosystem{

width:100%;
height:auto;

display:grid;

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

gap:20px;

}

.cloud-center{

position:relative;

left:auto;
top:auto;

transform:none;

margin:auto;

grid-column:1/3;

margin-bottom:20px;

}

.cloud-node{

position:relative;

left:auto;
right:auto;
top:auto;
bottom:auto;

margin:auto;

}

.cloud-ecosystem::before{

display:none;

}

}


/*==========================================
Cloud Journey
==========================================*/

.cloud-process{

    background:#ffffff;

}

.cloud-journey{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.journey-step{

    width:180px;

    background:#fff;

    border-radius:18px;

    padding:25px;

    text-align:center;

    transition:.35s;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    border-top:4px solid transparent;

}

.journey-step:hover{

    transform:translateY(-10px);

    border-top:4px solid #0ea5e9;

}

.journey-icon{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:18px;

    border-radius:50%;

    background:#e0f2fe;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.journey-icon i{

    font-size:30px;

    color:#0284c7;

}

.journey-step:hover .journey-icon{

    background:#0284c7;

}

.journey-step:hover .journey-icon i{

    color:#fff;

}

.journey-step h5{

    font-weight:700;

    margin-bottom:12px;

}

.journey-step p{

    color:#64748b;

    font-size:14px;

    line-height:1.7;

}

.journey-arrow{

    font-size:28px;

    color:#0ea5e9;

}

@media(max-width:992px){

.journey-arrow{

display:none;

}

.journey-step{

width:100%;

}

}


/*==========================================
Business Benefits
==========================================*/

.business-benefits{

    background:#f8fbff;

}

.benefit-item{

    display:flex;

    gap:20px;

    margin-bottom:35px;

}

.benefit-item i{

    color:#0ea5e9;

    font-size:30px;

    margin-top:8px;

}

.benefit-item h5{

    font-weight:700;

    margin-bottom:10px;

}

.benefit-item p{

    color:#64748b;

    line-height:1.8;

}

.benefits-panel{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.panel-header{

    background:#0284c7;

    color:#fff;

    padding:18px 25px;

    font-weight:600;

}

.panel-header i{

    margin-right:10px;

}

.panel-body{

    padding:30px;

}

.outcome{

    margin-bottom:28px;

}

.outcome span{

    display:block;

    font-weight:600;

    margin-bottom:10px;

}

.progress{

    height:10px;

    border-radius:30px;

}


/*==========================================
Cloud FAQ
==========================================*/

.cloud-faq{

    background:#f8fbff;

}

.cloud-faq .accordion-item{

    border:none;

    border-radius:16px;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.cloud-faq .accordion-button{

    font-weight:600;

    font-size:17px;

    padding:22px;

    background:#fff;

}

.cloud-faq .accordion-button:not(.collapsed){

    background:#0284c7;

    color:#fff;

}

.cloud-faq .accordion-button:focus{

    box-shadow:none;

}

.cloud-faq .accordion-body{

    padding:22px;

    line-height:1.9;

    color:#64748b;

}