/* =====================================
   MediaInk Advanced Components
===================================== */

/* Section Decorations */

.section{
position:relative;
}

.section::before{

content:'';

position:absolute;

top:0;
left:50%;

transform:translateX(-50%);

width:80px;
height:4px;

background:#FFD500;

border-radius:20px;

opacity:.25;

}

/* ============================
   Glass Cards
============================ */

.glass-card{

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

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

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

border-radius:24px;

box-shadow:
0 20px 50px rgba(0,0,0,.08);

}

/* ============================
   Feature Cards Advanced
============================ */

.feature-card{

position:relative;

overflow:hidden;

}

.feature-card::before{

content:'';

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,213,0,.15),
transparent
);

transition:.7s;

}

.feature-card:hover::before{

left:100%;

}

.feature-card:hover{

box-shadow:
0 25px 50px rgba(0,0,0,.12);

}

/* ============================
   Portfolio Cards Premium
============================ */

.portfolio-card{

position:relative;

overflow:hidden;

transition:.4s;

}

.portfolio-card:hover{

transform:translateY(-10px);

}

.portfolio-card::after{

content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:#FFD500;

transform:scaleX(0);

transition:.4s;

}

.portfolio-card:hover::after{

transform:scaleX(1);

}

.portfolio-card ul li{

list-style:none;

padding-left:25px;

position:relative;

}

.portfolio-card ul li::before{

content:'✓';

position:absolute;

left:0;

color:#FFD500;

font-weight:700;

}

/* ============================
   Featured LiftAds Card
============================ */

.featured{

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

}

.featured h3{

color:#111;

}

/* ============================
   Gallery Premium
============================ */

.gallery{

position:relative;

}

.gallery img{

width:100%;

height:100%;

object-fit:cover;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

}

.gallery-item::after{

content:'MediaInk Network';

position:absolute;

bottom:0;
left:0;

width:100%;

padding:18px;

background:
linear-gradient(
to top,
rgba(0,0,0,.8),
transparent
);

color:#fff;

font-size:14px;

font-weight:600;

opacity:0;

transition:.4s;

}

.gallery-item:hover::after{

opacity:1;

}

/* ============================
   Hero Glow Effects
============================ */

.hero-glow{

position:absolute;

width:500px;
height:500px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,213,0,.25),
transparent
);

filter:blur(60px);

z-index:1;

}

.hero-glow.left{

left:-150px;
top:-100px;

}

.hero-glow.right{

right:-150px;
bottom:-100px;

}

/* ============================
   Stats Hover
============================ */

.stat-card{

transition:.3s;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card h2{

transition:.3s;

}

.stat-card:hover h2{

color:#FFD500;

}

/* ============================
   CTA Premium
============================ */

.cta{

position:relative;

overflow:hidden;

}

.cta::before{

content:'';

position:absolute;

top:-150px;
right:-150px;

width:350px;
height:350px;

background:
rgba(255,213,0,.1);

border-radius:50%;

}

.cta::after{

content:'';

position:absolute;

bottom:-150px;
left:-150px;

width:350px;
height:350px;

background:
rgba(255,213,0,.08);

border-radius:50%;

}

/* ============================
   Button Shine Effect
============================ */

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:'';

position:absolute;

top:0;
left:-120%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.4),
transparent
);

transition:.6s;

}

.btn:hover::before{

left:120%;

}

/* ============================
   Floating Animation
============================ */

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}

.floating{

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

}

/* ============================
   Fade In Animation
============================ */

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(40px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

.reveal{

opacity:0;

animation:
fadeUp .8s ease forwards;

}

/* ============================
   Timeline Component
============================ */

.timeline{

position:relative;

max-width:900px;

margin:auto;

}

.timeline::before{

content:'';

position:absolute;

left:50%;

top:0;

width:3px;

height:100%;

background:#FFD500;

transform:translateX(-50%);

}

.timeline-item{

width:45%;

padding:25px;

background:#fff;

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

border-radius:18px;

margin-bottom:40px;

position:relative;

}

.timeline-item:nth-child(odd){

margin-right:auto;

}

.timeline-item:nth-child(even){

margin-left:auto;

}

.timeline-item h4{

margin-bottom:10px;

}

/* ============================
   Number Badge
============================ */

.number-badge{

width:60px;
height:60px;

display:flex;

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

background:#FFD500;

color:#111;

font-weight:800;

border-radius:50%;

margin-bottom:20px;

}

/* ============================
   Footer Links
============================ */

.footer-links{

display:flex;

justify-content:center;

gap:20px;

margin-top:20px;

flex-wrap:wrap;

}

.footer-links a{

color:#ccc;

transition:.3s;

}

.footer-links a:hover{

color:#FFD500;

}

/* ============================
   Premium Divider
============================ */

.divider{

width:120px;

height:5px;

background:#FFD500;

border-radius:30px;

margin:20px auto;

}

/* ============================
   Responsive
============================ */

@media(max-width:768px){

.timeline::before{
display:none;
}

.timeline-item{

width:100%;

margin-left:0 !important;

margin-right:0 !important;

}

.hero-glow{
display:none;
}

}