/*==============================
WEB HOSTING HERO
===============================*/

.hosting-hero{

position:relative;

padding:120px 0 90px;

overflow:hidden;

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

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:50px;

background:white;

box-shadow:0 10px 30px rgba(37,99,235,.10);

font-weight:600;

margin-bottom:25px;

}

.hero-badge i{

color:#2563EB;

}

.hero-title{

font-size:58px;

font-weight:800;

line-height:1.15;

color:#111827;

margin-bottom:25px;

}

.hero-title span{

color:#2563EB;

}

.hero-desc{

font-size:18px;

line-height:1.9;

color:#6B7280;

margin-bottom:35px;

}

.hero-features{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-bottom:40px;

}

.hero-feature{

background:white;

padding:12px 22px;

border-radius:50px;

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

font-weight:600;

display:flex;

align-items:center;

gap:10px;

transition:.35s;

}

.hero-feature:hover{

transform:translateY(-6px);

}

.hero-feature i{

color:#2563EB;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-primary-custom{

padding:15px 34px;

border-radius:50px;

background:#2563EB;

color:white;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.btn-primary-custom:hover{

background:#1d4ed8;

transform:translateY(-3px);

color:white;

}

.btn-outline-custom{

padding:15px 34px;

border-radius:50px;

border:2px solid #2563EB;

color:#2563EB;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.btn-outline-custom:hover{

background:#2563EB;

color:white;

}

.server-card{

background:white;

padding:35px;

border-radius:28px;

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

position:relative;

z-index:5;

}

.server-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

.server-header h5{

font-weight:700;

margin:0;

}

.server-header p{

margin:0;

color:#6B7280;

}

.status-online{

color:#10B981;

font-weight:700;

display:flex;

align-items:center;

gap:8px;

}

.server-stats{

display:grid;

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

gap:18px;

}

.stat-box{

padding:25px;

background:#F8FAFC;

border-radius:18px;

text-align:center;

transition:.35s;

}

.stat-box:hover{

transform:translateY(-6px);

}

.stat-box i{

font-size:28px;

margin-bottom:12px;

color:#2563EB;

}

.performance-bar{

margin-top:35px;

}

.bar{

height:10px;

background:#E5E7EB;

border-radius:20px;

overflow:hidden;

}

.fill{

height:100%;

width:82%;

background:linear-gradient(90deg,#2563EB,#60A5FA);

animation:loadbar 2s infinite alternate;

}

@keyframes loadbar{

from{width:60%;}

to{width:92%;}

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(60px);

opacity:.18;

}

.blob.one{

width:300px;

height:300px;

background:#2563EB;

top:-80px;

left:-100px;

}

.blob.two{

width:250px;

height:250px;

background:#60A5FA;

right:-80px;

bottom:-70px;

}

@media(max-width:991px){

.hosting-hero{

padding:70px 0;

text-align:center;

}

.hero-title{

font-size:40px;

}

.hero-desc{

font-size:16px;

}

.hero-features{

justify-content:center;

}

.hero-buttons{

justify-content:center;

}

.server-card{

margin-top:10px;

}

}

@media(max-width:576px){

.hero-title{

font-size:32px;

}

.server-stats{

grid-template-columns:1fr;

}

.hero-feature{

width:100%;

justify-content:center;

}

.btn-primary-custom,

.btn-outline-custom{

width:100%;

text-align:center;

}

}

/* ==========================================
   PREMIUM HOSTING PLANS
   PART 1 - LAYOUT & CARDS
========================================== */

.premium-plans{
    padding:100px 0;
    background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
    position:relative;
    overflow:hidden;
}

.premium-plans::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#2563EB;
    opacity:.05;
    filter:blur(120px);
    border-radius:50%;
    top:-180px;
    left:-180px;
}

.premium-plans::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    background:#60A5FA;
    opacity:.06;
    filter:blur(100px);
    border-radius:50%;
    bottom:-160px;
    right:-120px;
}

.section-heading{
    margin-bottom:70px;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    background:#EFF6FF;
    color:#2563EB;
    border-radius:40px;
    font-size:14px;
    font-weight:700;
    margin-bottom:20px;
}

.section-heading h2{
    font-size:46px;
    font-weight:800;
    color:#111827;
    margin-bottom:18px;
}

.section-heading p{
    max-width:700px;
    margin:auto;
    color:#6B7280;
    font-size:18px;
    line-height:1.8;
}

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

.hosting-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    padding:35px;

    height:100%;

    overflow:hidden;

    transition:.45s;

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

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

}

.card-glow{

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:2px;

    background:linear-gradient(
    135deg,
    #2563EB,
    #60A5FA,
    #2563EB);

    opacity:0;

    transition:.45s;

    z-index:0;

}

.card-glow::before{

    content:"";

    position:absolute;

    inset:2px;

    background:white;

    border-radius:26px;

}

.hosting-card>*{

    position:relative;

    z-index:2;

}

.hosting-card:hover{

    transform:translateY(-15px);

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

}

.hosting-card:hover .card-glow{

    opacity:1;

}

.hosting-top{

    text-align:center;

    margin-bottom:25px;

}

.plan-name{

    display:inline-block;

    font-size:18px;

    font-weight:700;

    color:#2563EB;

    margin-bottom:18px;

}

.plan-price{

    font-size:56px;

    font-weight:800;

    color:#111827;

    line-height:1;

}

.plan-price small{

    font-size:16px;

    color:#6B7280;

    font-weight:600;

}

.hosting-top p{

    margin-top:18px;

    color:#6B7280;

    font-size:15px;

}

/* =======================
 FREE DOMAIN BADGE
======================= */

.domain-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:12px;

    margin-bottom:25px;

    border-radius:50px;

    background:#ECFDF5;

    color:#16A34A;

    font-weight:700;

    font-size:14px;

    border:1px solid #BBF7D0;

}

/* =======================
 FEATURE LIST
======================= */

.feature-list{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:30px;

}

.feature{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 0;

    border-bottom:1px dashed #E5E7EB;

    font-size:15px;

    color:#374151;

}

/* =======================
 TECH ICONS
======================= */

.tech-icons{

    display:grid;

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

    gap:12px;

    margin-bottom:30px;

}

.tech{

    height:52px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    font-size:22px;

    color:#2563EB;

    transition:.35s;

}

.tech:hover{

    border-color:#2563EB;

    background:#EFF6FF;

    transform:translateY(-4px);

}

/* =======================
 BUTTON
======================= */

.plan-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    padding:16px;

    border-radius:50px;

    background:#2563EB;

    color:white;

    font-weight:700;

    transition:.35s;

}

.plan-btn:hover{

    color:white;

    background:#1D4ED8;

}

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

.featured{

    transform:scale(1.04);

    border:2px solid #2563EB;

}

.popular-ribbon{

    position:absolute;

    top:20px;

    right:-45px;

    background:#2563EB;

    color:white;

    padding:8px 55px;

    transform:rotate(45deg);

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    z-index:10;

}

/*==========================================
 PART 2
 PREMIUM ANIMATIONS
==========================================*/


/* Animated Green Tick */

.tick{

    width:22px;
    height:22px;

    min-width:22px;

    border-radius:50%;

    background:#22C55E;

    position:relative;

    box-shadow:
    0 0 0 rgba(34,197,94,.5);

    animation:tickPulse 2s infinite;

}

.tick::before{

    content:"✓";

    position:absolute;

    color:#fff;

    font-size:13px;

    font-weight:700;

    top:50%;
    left:50%;

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

}

@keyframes tickPulse{

0%{

box-shadow:0 0 0 0 rgba(34,197,94,.6);

}

70%{

box-shadow:0 0 0 10px rgba(34,197,94,0);

}

100%{

box-shadow:0 0 0 0 rgba(34,197,94,0);

}

}


/* Card Floating */

.hosting-card{

animation:cardFloat 6s ease-in-out infinite;

}

.hosting-card:nth-child(2){

animation-delay:.8s;

}

.hosting-card:nth-child(3){

animation-delay:1.5s;

}

.hosting-card:nth-child(4){

animation-delay:2.3s;

}

@keyframes cardFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}


/* Hover */

.hosting-card:hover{

transform:translateY(-18px) scale(1.02);

}


/* Moving Border Glow */

.card-glow{

background-size:300% 300%;

animation:borderMove 6s linear infinite;

}

@keyframes borderMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/* Plan Icon Animation */

.tech{

position:relative;

overflow:hidden;

}

.tech::before{

content:"";

position:absolute;

width:120%;

height:120%;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.9),

transparent

);

left:-150%;

top:0;

transition:1s;

}

.tech:hover::before{

left:150%;

}

.tech:hover{

transform:

translateY(-8px)

rotate(-6deg)

scale(1.08);

box-shadow:

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

}


/* Order Button */

.plan-btn{

position:relative;

overflow:hidden;

}

.plan-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

transform:skewX(-25deg);

}

.plan-btn:hover::before{

animation:shine .8s;

}

@keyframes shine{

100%{

left:180%;

}

}


/* Free Domain Badge */

.domain-badge{

animation:domainPulse 2.5s infinite;

}

@keyframes domainPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.04);

}

100%{

transform:scale(1);

}

}


/* Price */

.plan-price{

transition:.35s;

}

.hosting-card:hover .plan-price{

color:#2563EB;

transform:scale(1.08);

}


/* Plan Name */

.plan-name{

transition:.35s;

}

.hosting-card:hover .plan-name{

letter-spacing:1px;

}


/* Feature Hover */

.feature{

transition:.3s;

}

.feature:hover{

padding-left:10px;

color:#2563EB;

}


/* Popular Ribbon */

.popular-ribbon{

animation:ribbonGlow 3s infinite;

}

@keyframes ribbonGlow{

0%,100%{

background:#2563EB;

}

50%{

background:#1D4ED8;

}

}


/* Card Shadow */

.hosting-card:hover{

box-shadow:

0 20px 60px rgba(37,99,235,.18),

0 8px 20px rgba(0,0,0,.08);

}


/* Background Glow */

.hosting-card::after{

content:"";

position:absolute;

width:220px;

height:220px;

background:#2563EB;

opacity:.05;

border-radius:50%;

top:-100px;

right:-80px;

filter:blur(70px);

transition:.5s;

}

.hosting-card:hover::after{

opacity:.12;

transform:scale(1.2);

}

/* ==========================================
   PART 3 - RESPONSIVE + PREMIUM FINISH
========================================== */

/* Smooth transition */

.hosting-card,
.plan-btn,
.tech,
.feature,
.domain-badge,
.plan-price,
.plan-name{
    transition:all .35s ease;
}

/* Glass Reflection */

.hosting-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    transform:skewX(-20deg);
    transition:1.2s;
    z-index:3;
}

.hosting-card:hover::before{
    left:170%;
}

/* Hover Background */

.hosting-card:hover{
    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f9fbff
    );
}

/* Feature Hover */

.feature:hover .tick{
    transform:scale(1.15);
}

/* Tech Icons */

.tech i{
    transition:.35s;
}

.tech:hover i{
    transform:scale(1.25) rotate(-8deg);
}

/* Plan Button */

.plan-btn i{
    transition:.35s;
}

.plan-btn:hover i{
    transform:translateX(6px);
}

/* Domain Badge */

.domain-badge:hover{
    background:#16A34A;
    color:#fff;
    border-color:#16A34A;
}

/* Card Border */

.hosting-card{
    overflow:hidden;
}

/* Section Fade */

.premium-plans{
    animation:fadeSection .8s ease;
}

@keyframes fadeSection{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:none;

}

}

/* Featured Card */

.featured{

box-shadow:

0 20px 60px rgba(37,99,235,.20);

}

/* Better Tech Grid */

.tech{

cursor:pointer;

}

/* Nice Scroll */

html{

scroll-behavior:smooth;

}

/* ===========================
      TABLET
=========================== */

@media(max-width:991px){

.section-heading h2{

font-size:38px;

}

.section-heading p{

font-size:17px;

}

.featured{

transform:none;

}

.hosting-card{

padding:30px;

}

.plan-price{

font-size:48px;

}

.tech-icons{

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

}

}

/* ===========================
        MOBILE
=========================== */

@media(max-width:767px){

.premium-plans{

padding:70px 0;

}

.section-heading{

margin-bottom:45px;

}

.section-heading h2{

font-size:30px;

line-height:1.25;

}

.section-heading p{

font-size:15px;

line-height:1.7;

}

.hosting-card{

padding:28px 24px;

border-radius:24px;

}

.plan-price{

font-size:42px;

}

.plan-name{

font-size:18px;

}

.feature{

font-size:14px;

}

.tech-icons{

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

gap:10px;

}

.tech{

height:48px;

font-size:20px;

}

.plan-btn{

padding:14px;

font-size:15px;

}

.popular-ribbon{

right:-48px;

font-size:11px;

padding:8px 58px;

}

}

/* ===========================
      SMALL MOBILE
=========================== */

@media(max-width:480px){

.section-heading h2{

font-size:26px;

}

.plan-price{

font-size:36px;

}

.hosting-card{

padding:22px;

}

.tech{

height:44px;

font-size:18px;

}

.feature{

gap:10px;

}

.tick{

width:20px;

height:20px;

min-width:20px;

}

}

/* ===========================
      PREMIUM SHADOW
=========================== */

.hosting-card{

box-shadow:

0 8px 25px rgba(0,0,0,.04),

0 20px 60px rgba(37,99,235,.08);

}

.hosting-card:hover{

box-shadow:

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

0 35px 80px rgba(37,99,235,.15);

}

/*======================================
 WHY CHOOSE KATCLOUD
======================================*/

.why-katcloud{
    padding:100px 0;
    background:#f8fbff;
    position:relative;
    overflow:hidden;
}

.why-katcloud::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:#2563EB;
    opacity:.05;
    border-radius:50%;
    filter:blur(100px);
    top:-120px;
    left:-120px;
}

.why-katcloud::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:#60A5FA;
    opacity:.06;
    border-radius:50%;
    filter:blur(90px);
    bottom:-100px;
    right:-100px;
}

.section-heading{
    position:relative;
    z-index:2;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    background:#EFF6FF;
    color:#2563EB;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:20px;
}

.section-heading h2{
    font-size:44px;
    font-weight:800;
    color:#111827;
    margin-bottom:18px;
}

.section-heading p{
    max-width:700px;
    margin:auto;
    color:#6B7280;
    font-size:17px;
    line-height:1.8;
}

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

.why-box{

    position:relative;

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

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    padding:35px;

    height:100%;

    transition:.4s;

    overflow:hidden;

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

}

.why-box::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    transparent,
    rgba(37,99,235,.35),
    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:.4s;

}

.why-box:hover{

    transform:translateY(-12px);

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

}

.why-box:hover::before{

    opacity:1;

}

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

.icon-circle{

    width:75px;

    height:75px;

    border-radius:20px;

    background:#EFF6FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#2563EB;

    margin-bottom:25px;

    transition:.4s;

}

.why-box:hover .icon-circle{

    background:#2563EB;

    color:#fff;

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

}

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

.why-box h4{

    font-size:22px;

    font-weight:700;

    color:#111827;

    margin-bottom:15px;

}

.why-box p{

    color:#6B7280;

    line-height:1.8;

    margin:0;

}

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

.why-box::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:#2563EB;

    opacity:.05;

    right:-60px;

    bottom:-60px;

    transition:.4s;

}

.why-box:hover::after{

    transform:scale(1.3);

    opacity:.08;

}

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

@media(max-width:991px){

.section-heading h2{

font-size:36px;

}

}

@media(max-width:768px){

.why-katcloud{

padding:70px 0;

}

.section-heading h2{

font-size:30px;

}

.section-heading p{

font-size:15px;

}

.why-box{

padding:28px;

}

.icon-circle{

width:65px;

height:65px;

font-size:26px;

}

}