/*==========================
PRICING SECTION
==========================*/

.pricing-section{

padding:140px 0;

background:#050505;

position:relative;

overflow:hidden;

}

/*==========================
BACKGROUND
==========================*/

.pricing-section::before{

content:"";

position:absolute;

top:-300px;
right:-300px;

width:700px;
height:700px;

border-radius:50%;

background:radial-gradient(circle,#2563EB20,transparent 70%);

filter:blur(90px);

animation:floatGlow 10s linear infinite;

}

.pricing-section::after{

content:"";

position:absolute;

left:-250px;
bottom:-250px;

width:600px;
height:600px;

border-radius:50%;

background:radial-gradient(circle,#2563EB18,transparent 70%);

filter:blur(80px);

animation:floatGlow2 12s linear infinite;

}

@keyframes floatGlow{

50%{

transform:translateY(40px) scale(1.2);

}

}

@keyframes floatGlow2{

50%{

transform:translateX(50px) scale(1.1);

}

}

/*==========================
CONTAINER
==========================*/

.pricing-container{

width:min(1300px,92%);

margin:auto;

position:relative;

z-index:2;

}

/*==========================
HEADING
==========================*/

.pricing-heading{

text-align:center;

margin-bottom:90px;

}

.pricing-tag{

display:inline-flex;

padding:10px 22px;

border-radius:50px;

background:#111;

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

color:#6EA8FF;

letter-spacing:3px;

font-size:13px;

margin-bottom:24px;

}

.pricing-heading h2{

font-size:64px;

font-weight:800;

color:#fff;

line-height:1.1;

margin-bottom:18px;

}

.pricing-heading h2 span{

color:#2563EB;

}

.pricing-heading p{

max-width:700px;

margin:auto;

color:#9d9d9d;

font-size:18px;

line-height:1.8;

}

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

.pricing-wrapper{

display:grid;

grid-template-columns:420px 1fr;

gap:70px;

align-items:center;

}

/*==========================
SERVICE LIST
==========================*/

.service-list{

display:flex;

flex-direction:column;

gap:18px;

}

.service-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:28px;

background:#0a0a0a;

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

border-radius:24px;

cursor:pointer;

transition:.45s;

}

.service-item h3{

color:#fff;

font-size:22px;

margin-bottom:8px;

}

.service-item p{

color:#8d8d8d;

font-size:15px;

line-height:1.7;

}

.service-item span{

font-size:28px;

color:#2563EB;

transition:.4s;

}

.service-item:hover{

transform:translateX(14px);

border-color:#2563EB;

background:#101826;

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

}

.service-item:hover span{

transform:translateX(8px);

}

.service-item.active{

background:#111d35;

border-color:#2563EB;

}
/*==========================
PRICING CARD
==========================*/

.pricing-preview{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:720px;

perspective:1800px;

}

.price-card{

position:absolute;

width:100%;

max-width:560px;

padding:50px;

border-radius:32px;

background:rgba(15,15,15,.82);

backdrop-filter:blur(30px);

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

box-shadow:

0 40px 120px rgba(0,0,0,.45),

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

display:none;

overflow:hidden;

transform-style:preserve-3d;

transition:.6s;

}

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

.price-card.active{

display:block;

animation:cardReveal .8s cubic-bezier(.22,1,.36,1);

}

@keyframes cardReveal{

0%{

opacity:0;

transform:translateY(60px) rotateX(18deg) scale(.92);

}

100%{

opacity:1;

transform:translateY(0) rotateX(0) scale(1);

}

}

/*==========================
BLUE GLOW
==========================*/

.price-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

border-radius:50%;

background:radial-gradient(circle,#2563EB55,transparent 70%);

filter:blur(60px);

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

}

@keyframes glowMove{

50%{

transform:translate(-30px,40px) scale(1.2);

}

}

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

.price-card small{

display:block;

color:#6EA8FF;

letter-spacing:3px;

font-size:13px;

margin-bottom:18px;

}

.price-card h1{

font-size:72px;

font-weight:900;

color:#fff;

margin-bottom:10px;

}

.price-card h3{

font-size:28px;

color:#fff;

margin-bottom:35px;

}

.price-card ul{

display:flex;

flex-direction:column;

gap:18px;

margin-bottom:45px;

}

.price-card li{

list-style:none;

color:#d7d7d7;

font-size:17px;

padding-left:8px;

}

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

.price-card a{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:60px;

background:#2563EB;

color:#fff;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.price-card a:hover{

transform:translateY(-6px);

background:#3B82F6;

box-shadow:

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

}

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

.price-card:hover{

transform:

rotateX(5deg)

rotateY(-5deg)

translateY(-12px);

box-shadow:

0 60px 150px rgba(0,0,0,.55),

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

}
/*=========================================
PREMIUM HOVER EFFECTS
=========================================*/

.price-card{

position:relative;

transition:
transform .6s cubic-bezier(.22,1,.36,1),
box-shadow .6s;

overflow:hidden;

}

/* Animated Shine */

.price-card::after{

content:"";

position:absolute;

top:-120%;

left:-60%;

width:40%;

height:320%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.18),

transparent

);

transform:rotate(25deg);

transition:1s;

pointer-events:none;

}

.price-card:hover::after{

left:160%;

}

/* Floating */

.price-card.active{

animation:floating 5s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/* Premium Border */

.price-card::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:32px;

background:linear-gradient(

135deg,

rgba(37,99,235,.8),

transparent,

rgba(37,99,235,.5)

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

/* Mouse Glow */

.price-card .mouse-glow{

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:radial-gradient(circle,

rgba(37,99,235,.25),

transparent 70%);

pointer-events:none;

opacity:0;

transition:.25s;

filter:blur(25px);

}

.price-card:hover .mouse-glow{

opacity:1;

}

/* Price Animation */

.price-card h1{

transition:.4s;

}

.price-card:hover h1{

transform:scale(1.08);

color:#60A5FA;

text-shadow:

0 0 25px rgba(37,99,235,.5);

}

/* List Animation */

.price-card li{

transition:.35s;

}

.price-card:hover li{

transform:translateX(8px);

color:#fff;

}

/* Button */

.price-card a{

position:relative;

overflow:hidden;

}

.price-card a::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transition:.7s;

}

.price-card a:hover::before{

left:100%;

}
/*==========================================
PREMIUM SCROLL REVEAL
==========================================*/

.reveal-pricing{

opacity:0;

transform:translateY(80px);

transition:1s cubic-bezier(.22,1,.36,1);

}

.reveal-pricing.show{

opacity:1;

transform:translateY(0);

}

/*==========================================
ACTIVE SERVICE INDICATOR
==========================================*/

.service-item{

position:relative;

overflow:hidden;

}

.service-item::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:0;

background:#2563EB;

transition:.45s;

border-radius:20px;

}

.service-item.active::before,

.service-item:hover::before{

height:100%;

}

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

.pricing-section{

background-image:

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

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

background-size:45px 45px;

}

/*==========================================
FLOATING ORBS
==========================================*/

.pricing-orb{

position:absolute;

border-radius:50%;

filter:blur(80px);

pointer-events:none;

opacity:.25;

animation:orbFloat 12s ease-in-out infinite;

}

.pricing-orb.one{

width:320px;

height:320px;

background:#2563EB;

top:8%;

left:6%;

}

.pricing-orb.two{

width:240px;

height:240px;

background:#3B82F6;

bottom:10%;

right:5%;

animation-delay:3s;

}

@keyframes orbFloat{

0%,100%{

transform:translateY(0) scale(1);

}

50%{

transform:translateY(-40px) scale(1.15);

}

}

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

@media(max-width:991px){

.pricing-wrapper{

grid-template-columns:1fr;

gap:40px;

}

.service-list{

order:2;

}

.pricing-preview{

order:1;

min-height:520px;

}

.price-card{

max-width:100%;

padding:35px;

}

.price-card h1{

font-size:52px;

}

.pricing-heading h2{

font-size:42px;

}

}

@media(max-width:576px){

.pricing-section{

padding:90px 0;

}

.service-item{

padding:20px;

border-radius:18px;

}

.service-item h3{

font-size:18px;

}

.service-item p{

font-size:14px;

}

.price-card{

padding:25px;

border-radius:24px;

}

.price-card h1{

font-size:42px;

}

.price-card h3{

font-size:22px;

}

.price-card li{

font-size:15px;

}

.price-card a{

width:100%;

justify-content:center;

}

.pricing-heading h2{

font-size:34px;

}

.pricing-heading p{

font-size:15px;

}

}
/* Ripple */

.price-card a{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

width:15px;

height:15px;

border-radius:50%;

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

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

animation:ripple .7s linear;

}

@keyframes ripple{

to{

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

opacity:0;

}

}