.web-hosting-page{
    color:#10233d;
    background:#f8fbff
}
.hosting-hero-content{
    position:relative;
    z-index:2
}
.service-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 15px;
    border-radius:100px;
    background:#eaf7ff;
    color:#168ed0;
    font-size:14px;
    font-weight:800
}
.web-hosting-page h1{
    margin:20px 0;
    font-size:clamp(40px,5vw,65px);
    line-height:1.08;
    letter-spacing:-2.8px;
    font-weight:800;
    color:#fff;
}
.web-hosting-page h1 em{
    display:block;
    color:#15aaff;
    font-style:normal
}
.hosting-hero-content>p{
    max-width:590px;
    font-size:18px;
    line-height:1.75
}
.service-button{
    display:inline-flex;
    gap:12px;
    align-items:center;
    margin-top:26px;
    padding:16px 23px;
    border-radius:12px;
    background:#102e55;
    color:#fff;
    text-decoration:none;
    font-weight:800;
    box-shadow:0 15px 25px rgba(16,46,85,.2);
    transition:.25s
}
.service-button:hover{
    background:#15aaff;
    color:#fff;
    transform:translateY(-3px)
}
.section-heading{
    max-width:650px;
    margin:0 auto 45px;
    text-align:center;
}

.section-heading > span,
.web-hosting-cta span{
    display:inline-block;
    color:#159ee8;
    font-size:13px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.section-heading h2{
    margin:0 0 18px;
    font-size:clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight:700;
    line-height:1.2;
    letter-spacing:-1.8px;
    color:#0F172A;
}

.section-heading p{
    margin:0 auto;
    max-width:560px;
    color:#687990;
    font-size:17px;
    line-height:1.8;
}
.hosting-grid article{
    padding:30px 25px;
    border:1px solid #e0eaf4;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px #1234560a;
    transition:.25s
}
.hosting-grid article:hover{
    transform:translateY(-7px);
    border-color:#a7ddf9
}
.hosting-grid i{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:14px;
    background:#e6f7ff;
    color:#159ee8;
    font-size:20px
}
.hosting-grid h3{
    font-size:20px;
    margin:22px 0 9px
}
.hosting-grid p{
    color:#65758a;
    line-height:1.65;
    margin:0
}
.hosting-stars{
    position:absolute;
    inset:0;
    background-image:radial-gradient(#fff 1px,transparent 1px);
    background-size:30px 30px;
    opacity:.12
}
.uptime-panel{
    position:relative;
    padding:27px;
    border:1px solid #356086;
    border-radius:20px;
    background:#0f3154;
    box-shadow:0 22px 50px #0004
}
.uptime-ring{
    display:grid;
    place-items:center;
    width:155px;
    height:155px;
    margin:0 auto 22px;
    border:10px solid #73d487;
    border-left-color:#235a73;
    border-radius:50%
}
.uptime-ring b{
    font-size:30px
}
.uptime-ring span{
    font-size:11px;
    color:#a6c1d9
}
.server-line{
    display:flex;
    align-items:center;
    gap:11px;
    padding:14px 0;
    border-top:1px solid #285071;
    font-size:14px
}
.server-line i{
    color:#85df96
}
.server-line b{
    margin-left:auto;
    font-size:10px;
    color:#85df96
}
.web-hosting-page{
    font-family:Outfit,sans-serif;
    color:#10233d;
    background:#f8fbff
}
.web-hosting-shell{
    width:min(1160px,92%);
    margin:auto
}
.web-hosting-hero{
    position:relative;
    overflow:hidden;
    padding:115px 0 100px;
    background:#081d38;
    color:#fff
}
.web-hosting-layout{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center
}
.web-hosting-hero .hosting-hero-content>p{
    color:#bfd0e2
}
.web-hosting-hero .service-kicker{
    background:#153b61;
    color:#83d4ff
}
.web-hosting-hero h1 em{
    color:#7fdb93
}
.web-hosting-section{
    padding:110px 0
}
.web-hosting-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.web-hosting-cta{
    padding:60px 0;
    background:linear-gradient(100deg,#0d3154,#12669a);
    color:#fff
}
.web-hosting-cta .web-hosting-shell{
    display:flex;
    align-items:center;
    justify-content:space-between
}
.web-hosting-cta h2{
    margin:7px 0 0;
    font-size:35px
}
.web-hosting-cta a{
    padding:14px 19px;
    border:1px solid #77c7ef;
    border-radius:10px;
    color:#fff;
    font-weight:800;
    text-decoration:none
}
@media(max-width:900px){
    .web-hosting-layout{
        grid-template-columns:1fr;
        gap:50px
    }
    .web-hosting-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .web-hosting-hero,.web-hosting-section{
        padding:85px 0
    }
}
@media(max-width:570px){
    .web-hosting-grid{
        grid-template-columns:1fr
    }
    .web-hosting-cta .web-hosting-shell{
        align-items:flex-start;
        flex-direction:column
    }
    .web-hosting-cta h2{
        font-size:29px
    }
}
.hosting-lead-capture{
    padding:95px 0;
    background:radial-gradient(circle at top right,#126a87,#0f172a);
    color:#fff
}
.hosting-lead-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center
}
.hosting-lead-grid>div>span,.hosting-faq-heading>span{
    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
    color:#7dddf3
}
.hosting-lead-grid h2{
    margin:12px 0;
    font:700 clamp(28px,3vw,42px)/1.18 Sora,sans-serif;
    color:#fff;
}
.hosting-lead-grid p,.hosting-lead-grid li{
    color:#ffffffaa;
    line-height:1.7
}
.hosting-lead-grid ul{
    padding:0;
    list-style:none
}
.hosting-lead-grid li{
    margin:12px 0
}
.hosting-lead-grid li i{
    margin-right:8px;
    color:#7dddf3
}
.hosting-lead-form{
    padding:30px;
    border-radius:18px;
    background:#fff;
    color:#10233d;
    box-shadow:0 20px 45px #0003
}
.hosting-lead-form h3{
    margin:0
}
.hosting-lead-form p{
    margin:5px 0 20px;
    color:#687990;
    font-size:14px
}
.hosting-lead-form label{
    display:block;
    margin-bottom:14px;
    font-size:12px;
    font-weight:800
}
.hosting-lead-form input{
    width:100%;
    margin-top:6px;
    padding:11px;
    border:1px solid #d9e3ed;
    border-radius:7px
}
.hosting-lead-form button{
    width:100%;
    padding:13px;
    border:0;
    border-radius:8px;
    background:#159ee8;
    color:#fff;
    font-weight:800
}
.hosting-page-faq{
    padding:90px 0
}
.hosting-faq-heading{
    text-align:center;
    margin-bottom:36px
}
.hosting-faq-heading h2{
    margin:9px 0;
    font:700 34px Sora,sans-serif
}
.hosting-faq-heading p{
    color:#697b91
}
.hosting-bootstrap-faq{
    max-width:800px;
    margin:auto
}
.hosting-bootstrap-faq .accordion-item{
    overflow:hidden;
    margin-bottom:12px;
    border:1px solid #dce8ef;
    border-radius:10px
}
.hosting-bootstrap-faq .accordion-button{
    padding:19px;
    color:#10233d;
    font-weight:800;
    box-shadow:none
}
.hosting-bootstrap-faq .accordion-button:not(.collapsed){
    background:#eff9ff;
    color:#159ee8
}
.hosting-bootstrap-faq .accordion-body{
    color:#64758a;
    line-height:1.7
}
@media(max-width:800px){
    .hosting-lead-grid{
        grid-template-columns:1fr;
        gap:35px
    }
}
@media(max-width:570px){
    .hosting-lead-capture,.hosting-page-faq{
        padding:65px 0
    }
}