/* ==========================================================
   VISIT ATLANTA FORME
   Premium Gen-Z UI
   Version : 1.0
========================================================== */

/* ===========================
   GOOGLE FONT
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* ===========================
   CSS VARIABLES
=========================== */

:root{

    --primary:#0D6EFD;
    --secondary:#FFB87A;
    --dark:#081C3A;
    --black:#111111;
    --white:#ffffff;

    --gray:#6C757D;
    --light:#F5F7FB;

    --success:#22C55E;

    --glass:rgba(255,255,255,.12);

    --glass-border:rgba(255,255,255,.25);

    --radius:20px;

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

    --transition:.35s ease;

    --container:1280px;

}

/* ===========================
RESET
=========================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:#ffffff;

color:#111;

overflow-x:hidden;

line-height:1.7;

}

/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

::-webkit-scrollbar-thumb{

background:#0D6EFD;

border-radius:20px;

}

/* ===========================
SELECTION
=========================== */

::selection{

background:#0D6EFD;

color:#fff;

}

/* ===========================
IMAGE
=========================== */

img{

max-width:100%;

display:block;

}

/* ===========================
LINK
=========================== */

a{

text-decoration:none;

color:inherit;

}

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

ul{

list-style:none;

}

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

section{

padding:110px 0;

position:relative;

overflow:hidden;

}

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

.container{

width:90%;

max-width:var(--container);

margin:auto;

}

/* ===========================
TYPOGRAPHY
=========================== */

h1,
h2,
h3,
h4{

font-family:'Poppins',sans-serif;

font-weight:700;

color:#081C3A;

}

h1{

font-size:72px;

line-height:1.1;

}

h2{

font-size:52px;

}

h3{

font-size:30px;

}

p{

font-size:17px;

color:#555;

}

/* ===========================
BUTTONS
=========================== */

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

background:linear-gradient(135deg,#0D6EFD,#3A9BFF);

color:#fff;

border-radius:60px;

font-weight:600;

transition:.35s;

box-shadow:

0 10px 30px rgba(13,110,253,.25);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 18px 40px rgba(13,110,253,.35);

}

.btn-secondary{

display:inline-flex;

align-items:center;

gap:12px;

padding:16px 28px;

border-radius:60px;

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

backdrop-filter:blur(18px);

color:#fff;

transition:.3s;

}

.btn-secondary:hover{

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

}

/* ===========================
LOADER
=========================== */

#loader{

position:fixed;

inset:0;

background:#081C3A;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.5s;

}

.loader-logo{

text-align:center;

}

.loader-logo span{

display:block;

letter-spacing:8px;

font-size:15px;

color:#ffffff;

text-transform:uppercase;

}

.loader-logo h2{

font-size:58px;

color:#FFB87A;

}

/* ===========================
PROGRESS BAR
=========================== */

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(to right,#FFB87A,#0D6EFD);

z-index:99999;

}

/* ===========================
HEADER
=========================== */

header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

transition:.4s;

}

.navbar{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

width:90%;

max-width:1280px;

margin:auto;

}

header.scrolled{

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

backdrop-filter:blur(20px);

box-shadow:

0 10px 35px rgba(0,0,0,.08);

}

.logo a{

font-size:32px;

font-weight:800;

font-family:Poppins;

color:#fff;

}

header.scrolled .logo a{

color:#081C3A;

}

.logo span{

color:#FFB87A;

}

.nav-menu{

display:flex;

gap:35px;

}

.nav-menu a{

font-weight:600;

color:#fff;

transition:.3s;

position:relative;

}

header.scrolled .nav-menu a{

color:#081C3A;

}

.nav-menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:#FFB87A;

transition:.3s;

}

.nav-menu a:hover::after{

width:100%;

}

.nav-right{

display:flex;

align-items:center;

gap:18px;

}

.search-btn{

width:48px;

height:48px;

border-radius:50%;

border:none;

cursor:pointer;

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

color:#fff;

backdrop-filter:blur(15px);

transition:.3s;

}

header.scrolled .search-btn{

background:#f4f4f4;

color:#081C3A;

}

.search-btn:hover{

transform:rotate(10deg);

}

.mobile-toggle{

display:none;

font-size:28px;

cursor:pointer;

color:#fff;

}

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

.hero{

height:100vh;

display:flex;

align-items:center;

padding-top:100px;

color:#fff;

}

.hero video{

position:absolute;

width:100%;

height:100%;

left:0;

top:0;

object-fit:cover;

z-index:-3;

}

.hero .overlay{

position:absolute;

inset:0;

background:

linear-gradient(

120deg,

rgba(8,28,58,.88),

rgba(8,28,58,.55)

);

z-index:-2;

}

.hero::before{

content:"";

position:absolute;

right:-180px;

top:-180px;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(

rgba(255,184,122,.45),

transparent 70%

);

filter:blur(60px);

}

.hero-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

align-items:center;

gap:80px;

}

.hero-tag{

display:inline-block;

padding:10px 20px;

border-radius:40px;

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

backdrop-filter:blur(18px);

margin-bottom:25px;

letter-spacing:2px;

font-size:14px;

font-weight:600;

}

.hero h1{

color:#fff;

margin-bottom:25px;

}

.hero p{

font-size:20px;

color:#f2f2f2;

max-width:620px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

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

.glass-card{

padding:40px;

border-radius:30px;

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

backdrop-filter:blur(25px);

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

box-shadow:

0 20px 50px rgba(0,0,0,.2);

}

.glass-card h3{

color:#fff;

margin-bottom:20px;

}

.rating{

font-size:18px;

color:#FFD54F;

margin-bottom:35px;

}

.rating span{

display:block;

margin-top:10px;

color:#fff;

font-size:15px;

}

.hero-stats{

display:grid;

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

gap:25px;

}

.hero-stats h2{

color:#fff;

font-size:38px;

}

.hero-stats p{

color:#ddd;

font-size:15px;

}

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

.hero::after{

content:"";

position:absolute;

left:-150px;

bottom:-150px;

width:400px;

height:400px;

background:

radial-gradient(

rgba(104,201,255,.3),

transparent

);

filter:blur(60px);

border-radius:50%;

}

/* ===========================
UTILITY
=========================== */

.text-center{

text-align:center;

}

.mt-5{

margin-top:50px;

}

.mb-5{

margin-bottom:50px;

}

/* ==========================================================
   PART 2A
   STATISTICS
========================================================== */

.statistics{

    background:#ffffff;

    position:relative;

}

.statistics::before{

    content:"";

    position:absolute;

    top:-200px;

    right:-150px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(13,110,253,.06),
        transparent 70%
    );

    pointer-events:none;

}

.statistics .container{

    display:grid;

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

    gap:30px;

}

.stat-box{

    background:#fff;

    border-radius:28px;

    padding:50px 30px;

    text-align:center;

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

    border:1px solid rgba(0,0,0,.04);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.stat-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(13,110,253,.04),
        rgba(104,201,255,.02)
    );

    opacity:0;

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(13,110,253,.12);

}

.stat-box:hover::before{

    opacity:1;

}

.stat-box h2{

    font-size:56px;

    color:var(--primary);

    margin-bottom:12px;

    font-weight:800;

}

.stat-box p{

    color:#777;

    font-size:16px;

    font-weight:500;

}

/* ==========================================================
   EXPLORE
========================================================== */

#explore{

    background:var(--light);

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(13,110,253,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}

.section-title h2{

    margin-bottom:20px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}

/* ==========================================================
   EXPLORE GRID
========================================================== */

.explore-grid{

    display:grid;

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

    gap:35px;

}

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

.explore-card{

    position:relative;

    height:420px;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

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

    cursor:pointer;

    transition:.4s;

}

.explore-card:hover{

    transform:
    translateY(-14px)
    rotateX(4deg);

}

.explore-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.explore-card:hover img{

    transform:scale(1.08);

}

.explore-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(8,28,58,.92),

        rgba(8,28,58,.15),

        transparent

    );

    z-index:2;

}

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

.explore-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    color:#fff;

    z-index:5;

}

.explore-content span{

    display:inline-block;

    padding:8px 18px;

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

    backdrop-filter:blur(12px);

    border-radius:999px;

    margin-bottom:18px;

    font-size:13px;

    letter-spacing:1px;

}

.explore-content h3{

    color:#fff;

    margin-bottom:12px;

    font-size:30px;

}

.explore-content p{

    color:#e8e8e8;

    margin-bottom:22px;

}

.explore-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#FFB87A;

    font-weight:700;

}

.explore-content a i{

    transition:.35s;

}

.explore-card:hover a i{

    transform:translateX(8px);

}

/* ==========================================================
   CATEGORY ICON
========================================================== */

.category-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(16px);

    margin-bottom:25px;

    font-size:30px;

}

/* ==========================================================
   GLASS LABEL
========================================================== */

.glass-label{

    position:absolute;

    top:25px;

    right:25px;

    padding:10px 18px;

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

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

    backdrop-filter:blur(15px);

    border-radius:999px;

    color:#fff;

    font-size:13px;

    z-index:5;

}

/* ==========================================================
   CARD BORDER GLOW
========================================================== */

.explore-card::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:28px;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.15),

        transparent,

        rgba(104,201,255,.12)

    );

    opacity:0;

    transition:.35s;

}

.explore-card:hover::after{

    opacity:1;

}

/* ==========================================================
   FLOATING DECORATION
========================================================== */

.floating-peach{

    position:absolute;

    width:18px;

    height:18px;

    background:#FFB87A;

    border-radius:50%;

    opacity:.35;

    animation:floating 7s ease infinite;

}

.floating-blue{

    position:absolute;

    width:14px;

    height:14px;

    background:#68C9FF;

    border-radius:50%;

    opacity:.25;

    animation:floating 9s ease infinite;

}

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

#explore::before{

    content:"";

    position:absolute;

    left:-200px;

    bottom:-200px;

    width:450px;

    height:450px;

    background:

    radial-gradient(

        rgba(255,184,122,.15),

        transparent

    );

    border-radius:50%;

}

#explore::after{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(104,201,255,.12),

        transparent

    );

}

/* ==========================================================
   PREMIUM HOVER
========================================================== */

.explore-card:hover .category-icon{

    transform:scale(1.08);

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

}

.explore-card:hover h3{

    letter-spacing:.5px;

}

.explore-card:hover{

    box-shadow:

    0 40px 80px rgba(0,0,0,.18);

}

/* ==========================================================
   BADGE
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#ffffff;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

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

}

.badge i{

    color:#FFB87A;

}

/* ==========================================================
   PART 2A
   STATISTICS
========================================================== */

.statistics{

    background:#ffffff;

    position:relative;

}

.statistics::before{

    content:"";

    position:absolute;

    top:-200px;

    right:-150px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(13,110,253,.06),
        transparent 70%
    );

    pointer-events:none;

}

.statistics .container{

    display:grid;

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

    gap:30px;

}

.stat-box{

    background:#fff;

    border-radius:28px;

    padding:50px 30px;

    text-align:center;

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

    border:1px solid rgba(0,0,0,.04);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.stat-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(13,110,253,.04),
        rgba(104,201,255,.02)
    );

    opacity:0;

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(13,110,253,.12);

}

.stat-box:hover::before{

    opacity:1;

}

.stat-box h2{

    font-size:56px;

    color:var(--primary);

    margin-bottom:12px;

    font-weight:800;

}

.stat-box p{

    color:#777;

    font-size:16px;

    font-weight:500;

}

/* ==========================================================
   EXPLORE
========================================================== */

#explore{

    background:var(--light);

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(13,110,253,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}

.section-title h2{

    margin-bottom:20px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}

/* ==========================================================
   EXPLORE GRID
========================================================== */

.explore-grid{

    display:grid;

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

    gap:35px;

}

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

.explore-card{

    position:relative;

    height:420px;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

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

    cursor:pointer;

    transition:.4s;

}

.explore-card:hover{

    transform:
    translateY(-14px)
    rotateX(4deg);

}

.explore-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.explore-card:hover img{

    transform:scale(1.08);

}

.explore-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(8,28,58,.92),

        rgba(8,28,58,.15),

        transparent

    );

    z-index:2;

}

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

.explore-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    color:#fff;

    z-index:5;

}

.explore-content span{

    display:inline-block;

    padding:8px 18px;

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

    backdrop-filter:blur(12px);

    border-radius:999px;

    margin-bottom:18px;

    font-size:13px;

    letter-spacing:1px;

}

.explore-content h3{

    color:#fff;

    margin-bottom:12px;

    font-size:30px;

}

.explore-content p{

    color:#e8e8e8;

    margin-bottom:22px;

}

.explore-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#FFB87A;

    font-weight:700;

}

.explore-content a i{

    transition:.35s;

}

.explore-card:hover a i{

    transform:translateX(8px);

}

/* ==========================================================
   CATEGORY ICON
========================================================== */

.category-icon{

    width:75px;

    height:75px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(16px);

    margin-bottom:25px;

    font-size:30px;

}

/* ==========================================================
   GLASS LABEL
========================================================== */

.glass-label{

    position:absolute;

    top:25px;

    right:25px;

    padding:10px 18px;

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

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

    backdrop-filter:blur(15px);

    border-radius:999px;

    color:#fff;

    font-size:13px;

    z-index:5;

}

/* ==========================================================
   CARD BORDER GLOW
========================================================== */

.explore-card::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:28px;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.15),

        transparent,

        rgba(104,201,255,.12)

    );

    opacity:0;

    transition:.35s;

}

.explore-card:hover::after{

    opacity:1;

}

/* ==========================================================
   FLOATING DECORATION
========================================================== */

.floating-peach{

    position:absolute;

    width:18px;

    height:18px;

    background:#FFB87A;

    border-radius:50%;

    opacity:.35;

    animation:floating 7s ease infinite;

}

.floating-blue{

    position:absolute;

    width:14px;

    height:14px;

    background:#68C9FF;

    border-radius:50%;

    opacity:.25;

    animation:floating 9s ease infinite;

}

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

#explore::before{

    content:"";

    position:absolute;

    left:-200px;

    bottom:-200px;

    width:450px;

    height:450px;

    background:

    radial-gradient(

        rgba(255,184,122,.15),

        transparent

    );

    border-radius:50%;

}

#explore::after{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(104,201,255,.12),

        transparent

    );

}

/* ==========================================================
   PREMIUM HOVER
========================================================== */

.explore-card:hover .category-icon{

    transform:scale(1.08);

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

}

.explore-card:hover h3{

    letter-spacing:.5px;

}

.explore-card:hover{

    box-shadow:

    0 40px 80px rgba(0,0,0,.18);

}

/* ==========================================================
   BADGE
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#ffffff;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

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

}

.badge i{

    color:#FFB87A;

}

/* ==========================================================
   PART 2B-2A
   FEATURED DESTINATIONS
========================================================== */

#places{

    position:relative;

    padding:140px 0;

    background:linear-gradient(
        180deg,
        #f7f9fc 0%,
        #ffffff 100%
    );

    overflow:hidden;

}

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

#places::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(104,201,255,.12),
        transparent 72%
    );

}

#places::after{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-180px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,184,122,.18),
        transparent 70%
    );

}

/* ===========================
SECTION HEADER
=========================== */

.places-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:70px;

    gap:50px;

}

.places-header .left{

    max-width:650px;

}

.places-header span{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(13,110,253,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}

.places-header h2{

    margin-bottom:20px;

}

.places-header p{

    color:#666;

}

.places-header .btn-primary{

    white-space:nowrap;

}

/* ===========================
MASONRY GRID
=========================== */

.destination-grid{

    display:grid;

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

    gap:28px;

}

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

.destination-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    min-height:340px;

    background:#ddd;

    cursor:pointer;

    box-shadow:

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

    transition:.45s;

}

.destination-card:hover{

    transform:

    translateY(-14px);

    box-shadow:

    0 35px 70px rgba(0,0,0,.18);

}

/* ===========================
GRID SIZE
=========================== */

.destination-large{

    grid-column:span 8;

    min-height:620px;

}

.destination-medium{

    grid-column:span 4;

}

.destination-half{

    grid-column:span 6;

}

.destination-small{

    grid-column:span 3;

}

/* ===========================
IMAGE
=========================== */

.destination-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.2s;

}

.destination-card:hover img{

    transform:scale(1.08);

}

/* ===========================
OVERLAY
=========================== */

.destination-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(8,28,58,.94),

        rgba(8,28,58,.35),

        transparent

    );

    z-index:2;

}

/* ===========================
CONTENT
=========================== */

.destination-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    z-index:5;

    color:#fff;

}

.destination-content h3{

    color:#fff;

    font-size:34px;

    margin-bottom:12px;

}

.destination-content p{

    color:#f2f2f2;

    margin-bottom:22px;

}

.destination-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--secondary);

    font-weight:700;

}

.destination-content a i{

    transition:.35s;

}

.destination-card:hover a i{

    transform:translateX(8px);

}

/* ===========================
CATEGORY BADGE
=========================== */

.destination-badge{

    position:absolute;

    top:25px;

    left:25px;

    z-index:5;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

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

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

    backdrop-filter:blur(14px);

    color:#fff;

    font-size:13px;

    font-weight:600;

}

/* ===========================
RATING
=========================== */

.destination-rating{

    position:absolute;

    top:25px;

    right:25px;

    z-index:5;

    padding:10px 16px;

    border-radius:999px;

    background:#fff;

    color:#111;

    font-weight:700;

    box-shadow:

    0 15px 35px rgba(0,0,0,.15);

}

.destination-rating i{

    color:#FFC107;

    margin-right:5px;

}

/* ===========================
LOCATION
=========================== */

.destination-location{

    display:flex;

    align-items:center;

    gap:10px;

    color:#e8e8e8;

    margin-bottom:14px;

    font-size:15px;

}

.destination-location i{

    color:var(--secondary);

}

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

.destination-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:999px;

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

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

    backdrop-filter:blur(18px);

    color:#fff;

    font-weight:600;

}

.destination-button:hover{

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

}

/* ===========================
GLASS INFO
=========================== */

.destination-info{

    position:absolute;

    bottom:25px;

    right:25px;

    z-index:5;

    padding:16px 22px;

    border-radius:18px;

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

    backdrop-filter:blur(16px);

    color:#fff;

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

}

.destination-info h4{

    color:#fff;

    margin-bottom:5px;

}

.destination-info span{

    font-size:13px;

    opacity:.9;

}

/* ===========================
BORDER GLOW
=========================== */

.destination-card::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:30px;

    background:

    linear-gradient(

        135deg,

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

        transparent,

        rgba(104,201,255,.12)

    );

    opacity:0;

    transition:.4s;

}

.destination-card:hover::after{

    opacity:1;

}

/* ===========================
ICON
=========================== */

.destination-icon{

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(18px);

    font-size:24px;

    margin-bottom:20px;

}

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

.destination-card:hover .destination-icon{

    transform:scale(1.08);

}

.destination-card:hover h3{

    letter-spacing:.4px;

}

.destination-card:hover .destination-badge{

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

}

.destination-card:hover .destination-rating{

    transform:translateY(-4px);

}

/* ==========================================================
   PART 2B-2B-1
   PREMIUM CTA + DECORATION
========================================================== */


/* ===========================
DESTINATION CTA
=========================== */

.destination-cta{

    position:relative;

    overflow:hidden;

    border-radius:34px;

    padding:70px 60px;

    background:

    linear-gradient(
        135deg,
        #081C3A,
        #0D6EFD
    );

    color:#fff;

    margin-top:70px;

    box-shadow:
    0 35px 80px rgba(13,110,253,.22);

}

.destination-cta::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,255,255,.12),

        transparent 72%

    );

}

.destination-cta::after{

    content:"";

    position:absolute;

    left:-150px;

    bottom:-150px;

    width:350px;

    height:350px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,184,122,.22),

        transparent 70%

    );

}

.destination-cta .content{

    position:relative;

    z-index:3;

    max-width:650px;

}

.destination-cta h2{

    color:#fff;

    font-size:54px;

    line-height:1.1;

    margin-bottom:25px;

}

.destination-cta p{

    color:#f3f3f3;

    font-size:18px;

    margin-bottom:35px;

}

/* ===========================
CTA BUTTON GROUP
=========================== */

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.cta-buttons .btn-secondary{

    border-color:rgba(255,255,255,.28);

}

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

.cta-floating{

    position:absolute;

    right:60px;

    top:50%;

    transform:translateY(-50%);

    width:280px;

    padding:28px;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:
    0 25px 60px rgba(0,0,0,.18);

}

.cta-floating h3{

    color:#fff;

    font-size:38px;

    margin-bottom:10px;

}

.cta-floating span{

    color:#ffffff;

    opacity:.9;

    display:block;

    margin-bottom:18px;

}

.cta-floating ul{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.cta-floating li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

}

.cta-floating li i{

    color:#FFB87A;

}

/* ===========================
GRADIENT ORB
=========================== */

.gradient-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    pointer-events:none;

}

.orb-blue{

    width:220px;

    height:220px;

    background:rgba(104,201,255,.35);

    top:60px;

    left:120px;

}

.orb-peach{

    width:260px;

    height:260px;

    background:rgba(255,184,122,.28);

    bottom:50px;

    right:180px;

}

/* ===========================
FLOATING DOTS
=========================== */

.dot{

    position:absolute;

    border-radius:50%;

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

}

.dot.blue{

    width:12px;

    height:12px;

    background:#68C9FF;

}

.dot.peach{

    width:16px;

    height:16px;

    background:#FFB87A;

}

.dot.white{

    width:8px;

    height:8px;

    background:#ffffff;

}

/* ===========================
PREMIUM TAG
=========================== */

.destination-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

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

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

    color:#fff;

    font-size:14px;

    margin-bottom:20px;

}

/* ===========================
PREMIUM DIVIDER
=========================== */

.section-divider{

    width:120px;

    height:4px;

    border-radius:999px;

    background:

    linear-gradient(

        90deg,

        #FFB87A,

        #68C9FF

    );

    margin:35px 0;

}

/* ===========================
LIGHT GRID
=========================== */

.light-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(

        rgba(255,255,255,.04) 1px,

        transparent 1px

    ),

    linear-gradient(

        90deg,

        rgba(255,255,255,.04) 1px,

        transparent 1px

    );

    background-size:45px 45px;

    mask-image:

    radial-gradient(

        circle,

        #fff 20%,

        transparent 90%

    );

}

/* ===========================
SHINE EFFECT
=========================== */

.destination-card .shine{

    position:absolute;

    top:-150%;

    left:-40%;

    width:80px;

    height:300%;

    background:

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

    transform:

    rotate(25deg);

    transition:1s;

    z-index:4;

}

.destination-card:hover .shine{

    left:140%;

}

/* ===========================
GLOW BORDER
=========================== */

.destination-card:hover{

    border:1px solid rgba(104,201,255,.25);

}

/* ===========================
ICON BADGE
=========================== */

.icon-badge{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(

        135deg,

        #0D6EFD,

        #68C9FF

    );

    color:#fff;

    font-size:26px;

    box-shadow:
    0 20px 45px rgba(13,110,253,.25);

}

/* ===========================
IMAGE MASK
=========================== */

.image-mask{

    overflow:hidden;

    border-radius:inherit;

}

.image-mask img{

    transition:1.2s;

}

.image-mask:hover img{

    transform:scale(1.1);

}

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

.shadow-xl{

    box-shadow:

    0 40px 90px rgba(0,0,0,.15);

}

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

.text-gradient{

    background:

    linear-gradient(

        90deg,

        #FFB87A,

        #68C9FF

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* ===========================
SOFT GLASS
=========================== */

.soft-glass{

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

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

    backdrop-filter:blur(16px);

}

/* ===========================
HOVER EFFECT
=========================== */

.destination-cta:hover{

    transform:translateY(-6px);

}

.cta-floating:hover{

    transform:translateY(-50%) scale(1.03);

}

.destination-card:hover .icon-badge{

    transform:rotate(10deg) scale(1.08);

}

/* ==========================================================
   PART 2B-2B-2A
   MASONRY & CTA RESPONSIVE
========================================================== */


/* ===========================
<= 1400px
=========================== */

@media (max-width:1400px){

.destination-grid{

    gap:24px;

}

.destination-large{

    min-height:560px;

}

.destination-card{

    border-radius:26px;

}

.destination-content{

    left:28px;
    right:28px;
    bottom:28px;

}

.destination-content h3{

    font-size:30px;

}

.destination-cta{

    padding:60px 50px;

}

.cta-floating{

    width:250px;

    right:40px;

}

}


/* ===========================
<= 1200px
=========================== */

@media (max-width:1200px){

.destination-grid{

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

}

.destination-large,
.destination-medium,
.destination-half,
.destination-small{

    grid-column:span 1;

}

.destination-large{

    min-height:520px;

}

.destination-card{

    min-height:360px;

}

.destination-cta{

    display:flex;

    flex-direction:column;

    gap:50px;

}

.cta-floating{

    position:relative;

    right:auto;
    top:auto;

    transform:none;

    width:100%;

}

.destination-cta h2{

    font-size:46px;

}

}


/* ===========================
<= 992px
=========================== */

@media (max-width:992px){

.places-header{

    flex-direction:column;

    align-items:flex-start;

    gap:30px;

}

.places-header .btn-primary{

    width:220px;

    justify-content:center;

}

.destination-grid{

    gap:22px;

}

.destination-card{

    min-height:340px;

}

.destination-content{

    left:24px;
    right:24px;
    bottom:24px;

}

.destination-content h3{

    font-size:28px;

}

.destination-content p{

    font-size:15px;

}

.destination-badge{

    top:18px;
    left:18px;

}

.destination-rating{

    top:18px;
    right:18px;

}

.destination-info{

    display:none;

}

.destination-cta{

    padding:50px 40px;

}

.destination-cta h2{

    font-size:40px;

}

.destination-cta p{

    font-size:17px;

}

.cta-buttons{

    flex-wrap:wrap;

}

}


/* ===========================
<= 768px
=========================== */

@media (max-width:768px){

.destination-grid{

    grid-template-columns:1fr;

}

.destination-large,
.destination-medium,
.destination-half,
.destination-small{

    grid-column:auto;

}

.destination-card{

    min-height:340px;

}

.destination-content{

    left:22px;
    right:22px;
    bottom:22px;

}

.destination-content h3{

    font-size:26px;

}

.destination-location{

    font-size:14px;

}

.destination-button{

    width:100%;

    justify-content:center;

}

.destination-cta{

    text-align:center;

    padding:45px 30px;

}

.destination-cta .content{

    max-width:100%;

}

.destination-tag{

    margin-left:auto;
    margin-right:auto;

}

.section-divider{

    margin-left:auto;
    margin-right:auto;

}

.cta-buttons{

    justify-content:center;

}

.cta-buttons a{

    width:100%;

    justify-content:center;

}

.cta-floating{

    text-align:left;

}

}


/* ===========================
<= 576px
=========================== */

@media (max-width:576px){

.destination-card{

    min-height:300px;

    border-radius:22px;

}

.destination-content{

    left:18px;
    right:18px;
    bottom:18px;

}

.destination-content h3{

    font-size:22px;

}

.destination-content p{

    font-size:14px;

}

.destination-badge{

    padding:8px 14px;

    font-size:12px;

}

.destination-rating{

    padding:8px 12px;

    font-size:13px;

}

.destination-button{

    padding:14px 18px;

    font-size:14px;

}

.destination-icon{

    width:52px;
    height:52px;

    font-size:20px;

}

.destination-cta{

    padding:36px 24px;

    border-radius:26px;

}

.destination-cta h2{

    font-size:32px;

}

.destination-cta p{

    font-size:15px;

}

.cta-floating{

    padding:22px;

}

.cta-floating h3{

    font-size:30px;

}

}


/* ===========================
<= 400px
=========================== */

@media (max-width:400px){

.destination-card{

    min-height:280px;

}

.destination-content h3{

    font-size:20px;

}

.destination-content p{

    font-size:13px;

}

.destination-location{

    font-size:13px;

}

.destination-button{

    font-size:13px;

}

.destination-tag{

    font-size:12px;

}

.destination-cta{

    padding:30px 20px;

}

.destination-cta h2{

    font-size:28px;

}

.cta-floating{

    padding:18px;

    border-radius:20px;

}

.cta-floating h3{

    font-size:26px;

}

.cta-floating li{

    font-size:14px;

}

}

/* ==========================================================
   PART 2B-2B-2B-1
   FINAL UTILITIES & VISUAL POLISH
==========================================================*/

/* ===========================
   SECTION SPACING
=========================== */

.section-sm{
    padding:80px 0;
}

.section-lg{
    padding:160px 0;
}

.section-dark{
    background:#081C3A;
    color:#fff;
}

.section-light{
    background:#F8FAFC;
}

/* ===========================
   GRID UTILITIES
=========================== */

.grid{
    display:grid;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

/* ===========================
   FLEX UTILITIES
=========================== */

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

/* ===========================
   GAP
=========================== */

.gap-10{gap:10px;}
.gap-15{gap:15px;}
.gap-20{gap:20px;}
.gap-25{gap:25px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-60{gap:60px;}

/* ===========================
   MARGIN
=========================== */

.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}
.mt-80{margin-top:80px;}

.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}
.mb-80{margin-bottom:80px;}

/* ===========================
   WIDTH
=========================== */

.w-100{
    width:100%;
}

.max-600{
    max-width:600px;
}

.max-700{
    max-width:700px;
}

.max-800{
    max-width:800px;
}

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

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

.text-white{
    color:#fff;
}

.text-primary{
    color:var(--primary);
}

.text-secondary{
    color:var(--secondary);
}

/* ===========================
   RADIUS
=========================== */

.radius-sm{
    border-radius:16px;
}

.radius-md{
    border-radius:24px;
}

.radius-lg{
    border-radius:34px;
}

.radius-full{
    border-radius:999px;
}

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

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

.shadow-md{
    box-shadow:0 20px 45px rgba(0,0,0,.10);
}

.shadow-lg{
    box-shadow:0 35px 70px rgba(0,0,0,.15);
}

.shadow-primary{
    box-shadow:0 25px 60px rgba(13,110,253,.20);
}

/* ===========================
   GLASS
=========================== */

.glass{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.18);
}

.glass-dark{
    background:rgba(8,28,58,.55);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
}

/* ===========================
   HOVER LIFT
=========================== */

.hover-lift{
    transition:.35s ease;
}

.hover-lift:hover{
    transform:translateY(-10px);
}

/* ===========================
   HOVER SCALE
=========================== */

.hover-scale{
    transition:.35s ease;
}

.hover-scale:hover{
    transform:scale(1.04);
}

/* ===========================
   HOVER GLOW
=========================== */

.hover-glow{
    transition:.35s ease;
}

.hover-glow:hover{
    box-shadow:
    0 25px 70px rgba(13,110,253,.20);
}

/* ===========================
   BORDER GRADIENT
=========================== */

.border-gradient{

    position:relative;

}

.border-gradient::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:inherit;

    background:

    linear-gradient(
        135deg,
        rgba(13,110,253,.40),
        rgba(255,184,122,.35)
    );

    opacity:0;

    transition:.35s;

    z-index:-1;

}

.border-gradient:hover::before{

    opacity:1;

}

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

.card{

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.04);

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

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

}

/* ===========================
   ICON WRAPPER
=========================== */

.icon-wrapper{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #0D6EFD,
        #68C9FF
    );

    color:#fff;

    font-size:28px;

}

/* ===========================
   IMAGE
=========================== */

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-rounded{

    border-radius:30px;

}

/* ===========================
   DIVIDER
=========================== */

.divider{

    width:100%;

    height:1px;

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

    margin:40px 0;

}

/* ===========================
   BADGE
=========================== */

.badge-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(13,110,253,.10);

    color:var(--primary);

    font-weight:600;

}

.badge-secondary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,184,122,.18);

    color:#A45500;

    font-weight:600;

}

/* ===========================
   FOCUS ACCESSIBILITY
=========================== */

a:focus-visible,
button:focus-visible{

    outline:3px solid rgba(13,110,253,.45);

    outline-offset:4px;

    border-radius:10px;

}

/* ===========================
   SMOOTH IMAGE RENDERING
=========================== */

img{

    image-rendering:auto;

    backface-visibility:hidden;

    transform:translateZ(0);

}

/* ===========================
   SELECTION
=========================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ==========================================================
   PART 2B-2B-2B-2A
   Browser Compatibility & Performance
========================================================== */


/* ==========================================================
   GPU ACCELERATION
========================================================== */

.gpu,
.card,
.destination-card,
.explore-card,
.glass-card,
.btn-primary,
.btn-secondary{

    transform:translateZ(0);

    backface-visibility:hidden;

    perspective:1000px;

    will-change:transform;

}

/* ==========================================================
   OPTIMIZED TRANSITION
========================================================== */

.transition-fast{

    transition:.25s ease;

}

.transition{

    transition:.35s ease;

}

.transition-slow{

    transition:.6s ease;

}

/* ==========================================================
   OBJECT FIT
========================================================== */

.object-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.object-contain{

    object-fit:contain;

}

/* ==========================================================
   ASPECT RATIO
========================================================== */

.ratio-16x9{

    aspect-ratio:16/9;

}

.ratio-square{

    aspect-ratio:1;

}

.ratio-portrait{

    aspect-ratio:4/5;

}

/* ==========================================================
   OVERFLOW
========================================================== */

.overflow-hidden{

    overflow:hidden;

}

.overflow-visible{

    overflow:visible;

}

/* ==========================================================
   POSITION
========================================================== */

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}

/* ==========================================================
   Z INDEX
========================================================== */

.z-1{

    z-index:1;

}

.z-5{

    z-index:5;

}

.z-10{

    z-index:10;

}

.z-50{

    z-index:50;

}

.z-100{

    z-index:100;

}

/* ==========================================================
   CURSOR
========================================================== */

.pointer{

    cursor:pointer;

}

.cursor-default{

    cursor:default;

}

/* ==========================================================
   OPACITY
========================================================== */

.opacity-0{

    opacity:0;

}

.opacity-50{

    opacity:.5;

}

.opacity-75{

    opacity:.75;

}

.opacity-100{

    opacity:1;

}

/* ==========================================================
   VISIBILITY
========================================================== */

.hidden{

    display:none;

}

.invisible{

    visibility:hidden;

}

.visible{

    visibility:visible;

}

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

.line-2{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.line-3{

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* ==========================================================
   IMAGE OPTIMIZATION
========================================================== */

img{

    user-select:none;

    -webkit-user-drag:none;

    image-rendering:auto;

}

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

button{

    border:none;

    outline:none;

    font:inherit;

    cursor:pointer;

}

/* ==========================================================
   INPUT
========================================================== */

input,
textarea,
select{

    font:inherit;

    outline:none;

}

/* ==========================================================
   TOUCH DEVICE
========================================================== */

a,
button{

    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;

}

/* ==========================================================
   SMOOTH FONT
========================================================== */

body{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

/* ==========================================================
   SCROLL OFFSET
========================================================== */

section{

    scroll-margin-top:120px;

}

/* ==========================================================
   BACKDROP SUPPORT
========================================================== */

@supports (backdrop-filter:blur(20px)){

.glass,
.glass-card,
.soft-glass{

    backdrop-filter:blur(20px);

}

}

/* ==========================================================
   FALLBACK
========================================================== */

@supports not (backdrop-filter:blur(20px)){

.glass,
.glass-card,
.soft-glass{

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

}

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

*{

animation-duration:.01ms !important;

animation-iteration-count:1 !important;

transition-duration:.01ms !important;

scroll-behavior:auto !important;

}

}

/* ==========================================================
   HIGH CONTRAST
========================================================== */

@media (prefers-contrast:more){

.btn-primary{

    border:2px solid #fff;

}

.glass-card{

    border:2px solid rgba(255,255,255,.5);

}

}

/* ==========================================================
   DARK MODE PREPARATION
========================================================== */

body.dark{

    background:#081C3A;

    color:#fff;

}

body.dark .card{

    background:#102548;

}

body.dark p{

    color:#d6d6d6;

}

/* ==========================================================
   PART 2B-2B-2B-2B
   FINAL PRODUCTION POLISH
========================================================== */

/* ===========================
   DISPLAY UTILITIES
=========================== */

.d-block{display:block;}
.d-inline{display:inline;}
.d-inline-block{display:inline-block;}
.d-flex{display:flex;}
.d-grid{display:grid;}
.d-none{display:none;}

/* ===========================
   ALIGNMENT
=========================== */

.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}

.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.justify-end{justify-content:flex-end;}

/* ===========================
   BORDER UTILITIES
=========================== */

.border{
    border:1px solid rgba(0,0,0,.08);
}

.border-light{
    border:1px solid rgba(255,255,255,.15);
}

.border-primary{
    border:1px solid rgba(13,110,253,.25);
}

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

.bg-white{
    background:#fff;
}

.bg-light{
    background:#F8FAFC;
}

.bg-primary{
    background:var(--primary);
    color:#fff;
}

.bg-dark{
    background:var(--dark);
    color:#fff;
}

.bg-gradient-primary{
    background:linear-gradient(
        135deg,
        var(--primary),
        #68C9FF
    );
    color:#fff;
}

.bg-gradient-peach{
    background:linear-gradient(
        135deg,
        var(--secondary),
        #FFD8B3
    );
}

/* ===========================
   POSITION HELPERS
=========================== */

.top-0{top:0;}
.right-0{right:0;}
.bottom-0{bottom:0;}
.left-0{left:0;}

/* ===========================
   WIDTH HELPERS
=========================== */

.w-auto{width:auto;}
.h-auto{height:auto;}
.min-vh-100{min-height:100vh;}

/* ===========================
   ANIMATION DELAYS
=========================== */

.delay-1{animation-delay:.1s;}
.delay-2{animation-delay:.2s;}
.delay-3{animation-delay:.3s;}
.delay-4{animation-delay:.4s;}
.delay-5{animation-delay:.5s;}

/* ===========================
   LOADING STATE
=========================== */

.loading{

    pointer-events:none;

    opacity:.6;

    filter:grayscale(.2);

}

/* ===========================
   SKELETON
=========================== */

.skeleton{

    background:linear-gradient(
        90deg,
        #f2f2f2 25%,
        #e8e8e8 37%,
        #f2f2f2 63%
    );

    background-size:400% 100%;

    animation:skeleton-loading 1.4s ease infinite;

}

@keyframes skeleton-loading{

    0%{
        background-position:100% 0;
    }

    100%{
        background-position:-100% 0;
    }

}

/* ===========================
   LAZY IMAGE
=========================== */

img[data-src]{

    opacity:0;

    transition:opacity .6s ease;

}

img.loaded{

    opacity:1;

}

/* ===========================
   SCROLLBAR FIREFOX
=========================== */

html{

    scrollbar-width:thin;

    scrollbar-color:var(--primary) #ececec;

}

/* ===========================
   DISABLE IMAGE DRAG
=========================== */

img{

    pointer-events:auto;

    -webkit-user-drag:none;

}

/* ===========================
   SAFE SVG
=========================== */

svg{

    display:block;

    max-width:100%;

}

/* ===========================
   HR STYLE
=========================== */

hr{

    border:none;

    height:1px;

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

    margin:50px 0;

}

/* ===========================
   TABLE DEFAULT
=========================== */

table{

    width:100%;

    border-collapse:collapse;

}

table th,
table td{

    padding:14px;

    text-align:left;

    border-bottom:1px solid rgba(0,0,0,.08);

}

/* ===========================
   LIST RESET
=========================== */

.list-clean{

    list-style:none;

    margin:0;

    padding:0;

}

/* ===========================
   HORIZONTAL SCROLL
=========================== */

.scroll-x{

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

/* ===========================
   NO SELECT
=========================== */

.no-select{

    user-select:none;

}

/* ===========================
   POINTER EVENTS
=========================== */

.pe-none{

    pointer-events:none;

}

.pe-auto{

    pointer-events:auto;

}

/* ===========================
   PRINT STYLES
=========================== */

@media print{

    header,
    footer,
    video,
    .btn-primary,
    .btn-secondary,
    #loader,
    #progressBar{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

        font-size:12pt;

    }

    a{

        color:#000;

        text-decoration:underline;

    }

    img{

        max-width:100%;

        page-break-inside:avoid;

    }

    section{

        padding:25px 0;

        page-break-inside:avoid;

    }

}

/* ===========================
   FINAL SMOOTHNESS
=========================== */

html{

    scroll-padding-top:120px;

}

body{

    overflow-x:hidden;

}

/* ===========================
   FINAL FOCUS STATES
=========================== */

button:focus-visible,
a:focus-visible,
input:focus-visible{

    outline:3px solid rgba(13,110,253,.35);

    outline-offset:4px;

}

/* ===========================
   END OF FILE
========================================================== */

/* ==========================================================
   PART 2C
   PREMIUM EFFECTS & MICRO INTERACTIONS
========================================================== */


/* ===========================
   SECTION DECORATION
=========================== */

.section-decoration{

    position:absolute;

    pointer-events:none;

    z-index:0;

}

.decoration-circle{

    width:420px;

    height:420px;

    border-radius:50%;

    filter:blur(80px);

    opacity:.15;

}

.decoration-blue{

    background:#68C9FF;

}

.decoration-peach{

    background:#FFB87A;

}

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

.mesh-background{

    position:absolute;

    inset:0;

    opacity:.04;

    background-image:

    linear-gradient(rgba(13,110,253,.15) 1px, transparent 1px),

    linear-gradient(90deg, rgba(13,110,253,.15) 1px, transparent 1px);

    background-size:40px 40px;

}

/* ===========================
   FLOATING GLASS
=========================== */

.glass-floating{

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

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

    backdrop-filter:blur(18px);

    border-radius:24px;

    transition:.4s;

}

.glass-floating:hover{

    transform:translateY(-8px);

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

}

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

.image-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

}

.image-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.image-card:hover img{

    transform:scale(1.08);

}

.image-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(8,28,58,.75),

        rgba(8,28,58,.15),

        transparent

    );

    opacity:.85;

    transition:.35s;

}

.image-card:hover::before{

    opacity:1;

}

/* ===========================
   IMAGE CONTENT
=========================== */

.image-content{

    position:absolute;

    left:28px;

    right:28px;

    bottom:28px;

    z-index:5;

    color:#fff;

}

.image-content h3{

    color:#fff;

    margin-bottom:12px;

}

.image-content p{

    color:#ececec;

}

/* ===========================
   GRADIENT BORDER
=========================== */

.gradient-border{

    position:relative;

}

.gradient-border::after{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:inherit;

    background:linear-gradient(

        135deg,

        rgba(104,201,255,.45),

        rgba(255,184,122,.45)

    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.35s;

}

.gradient-border:hover::after{

    opacity:1;

}

/* ===========================
   SOFT SHADOW
=========================== */

.shadow-soft{

    box-shadow:

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

}

.shadow-soft:hover{

    box-shadow:

    0 35px 70px rgba(0,0,0,.14);

}

/* ===========================
   ICON BOX
=========================== */

.icon-box{

    width:80px;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:24px;

    background:linear-gradient(

        135deg,

        #0D6EFD,

        #68C9FF

    );

    color:#fff;

    font-size:32px;

    transition:.35s;

}

.icon-box:hover{

    transform:rotate(-6deg) scale(1.08);

}

/* ===========================
   LINK ANIMATION
=========================== */

.link-arrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--primary);

}

.link-arrow i{

    transition:.35s;

}

.link-arrow:hover i{

    transform:translateX(8px);

}

/* ===========================
   BADGE GLASS
=========================== */

.badge-glass{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

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

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

    backdrop-filter:blur(15px);

}

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

.card-glow{

    transition:.35s;

}

.card-glow:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 70px rgba(13,110,253,.18);

}

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

.reveal{

    overflow:hidden;

}

.reveal span{

    display:block;

    transform:translateY(100%);

    animation:revealText .9s ease forwards;

}

@keyframes revealText{

    to{

        transform:translateY(0);

    }

}

/* ===========================
   HOVER OVERLAY
=========================== */

.hover-overlay{

    position:relative;

    overflow:hidden;

}

.hover-overlay::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(13,110,253,.08);

    opacity:0;

    transition:.35s;

}

.hover-overlay:hover::after{

    opacity:1;

}

/* ===========================
   DIVIDER TITLE
=========================== */

.title-divider{

    width:90px;

    height:4px;

    border-radius:999px;

    margin:20px 0;

    background:linear-gradient(

        90deg,

        var(--secondary),

        var(--primary)

    );

}

/* ===========================
   FLOAT DECORATIONS
=========================== */

.float-small{

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

}

.float-medium{

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

}

.float-large{

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

}

/* ===========================
   STAGGER DELAYS
=========================== */

.delay-100{animation-delay:.1s;}
.delay-200{animation-delay:.2s;}
.delay-300{animation-delay:.3s;}
.delay-400{animation-delay:.4s;}
.delay-500{animation-delay:.5s;}

/* ==========================================================
   PART 3A-1A
   EVENTS SECTION FOUNDATION
========================================================== */

/* ===========================
   EVENTS
=========================== */

#events{

    position:relative;

    padding:140px 0;

    background:linear-gradient(
        180deg,
        #081C3A 0%,
        #102548 100%
    );

    overflow:hidden;

}

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

#events::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(104,201,255,.18),
        transparent 72%
    );

    filter:blur(30px);

}

#events::after{

    content:"";

    position:absolute;

    bottom:-220px;

    right:-220px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,184,122,.20),
        transparent 72%
    );

    filter:blur(30px);

}

/* ===========================
GRID DECORATION
=========================== */

.events-grid-bg{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

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

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

    background-size:42px 42px;

}

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

.events-wrapper{

    position:relative;

    z-index:5;

}

/* ===========================
SECTION HEADER
=========================== */

.events-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:50px;

    margin-bottom:70px;

}

.events-header-left{

    max-width:700px;

}

.events-header span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

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

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

    color:#68C9FF;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.events-header h2{

    color:#fff;

    font-size:58px;

    line-height:1.1;

    margin-bottom:22px;

}

.events-header p{

    color:#d8d8d8;

    font-size:18px;

}

/* ===========================
HEADER ACTION
=========================== */

.events-header-right{

    display:flex;

    align-items:center;

    gap:18px;

}

/* ===========================
FILTER
=========================== */

.event-filter{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:45px;

}

.event-filter button{

    padding:12px 24px;

    border-radius:999px;

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

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

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.event-filter button:hover{

    background:linear-gradient(
        135deg,
        #0D6EFD,
        #68C9FF
    );

    transform:translateY(-3px);

}

.event-filter button.active{

    background:linear-gradient(
        135deg,
        #0D6EFD,
        #68C9FF
    );

}

/* ===========================
EVENT GRID
=========================== */

.events-grid{

    display:grid;

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

    gap:30px;

}

/* ===========================
FEATURED GRID
=========================== */

.events-grid.featured{

    margin-top:60px;

}

/* ===========================
TITLE DIVIDER
=========================== */

.events-divider{

    width:120px;

    height:4px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #FFB87A,
        #68C9FF
    );

    margin-top:25px;

}

/* ===========================
SECTION BADGE
=========================== */

.events-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

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

    color:#fff;

    backdrop-filter:blur(16px);

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

}

.events-badge i{

    color:#FFB87A;

}

/* ===========================
LIGHT EFFECT
=========================== */

.events-light{

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:#68C9FF;

    opacity:.18;

    filter:blur(80px);

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

}

.events-light.left{

    top:120px;

    left:-100px;

}

.events-light.right{

    bottom:60px;

    right:-120px;

}

/* ==========================================================
   PART 3A-1A
   EVENTS SECTION FOUNDATION
========================================================== */

/* ===========================
   EVENTS
=========================== */

#events{

    position:relative;

    padding:140px 0;

    background:linear-gradient(
        180deg,
        #081C3A 0%,
        #102548 100%
    );

    overflow:hidden;

}

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

#events::before{

    content:"";

    position:absolute;

    top:-220px;

    left:-220px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(104,201,255,.18),
        transparent 72%
    );

    filter:blur(30px);

}

#events::after{

    content:"";

    position:absolute;

    bottom:-220px;

    right:-220px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,184,122,.20),
        transparent 72%
    );

    filter:blur(30px);

}

/* ===========================
GRID DECORATION
=========================== */

.events-grid-bg{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:

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

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

    background-size:42px 42px;

}

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

.events-wrapper{

    position:relative;

    z-index:5;

}

/* ===========================
SECTION HEADER
=========================== */

.events-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:50px;

    margin-bottom:70px;

}

.events-header-left{

    max-width:700px;

}

.events-header span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:999px;

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

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

    color:#68C9FF;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.events-header h2{

    color:#fff;

    font-size:58px;

    line-height:1.1;

    margin-bottom:22px;

}

.events-header p{

    color:#d8d8d8;

    font-size:18px;

}

/* ===========================
HEADER ACTION
=========================== */

.events-header-right{

    display:flex;

    align-items:center;

    gap:18px;

}

/* ===========================
FILTER
=========================== */

.event-filter{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:45px;

}

.event-filter button{

    padding:12px 24px;

    border-radius:999px;

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

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

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.event-filter button:hover{

    background:linear-gradient(
        135deg,
        #0D6EFD,
        #68C9FF
    );

    transform:translateY(-3px);

}

.event-filter button.active{

    background:linear-gradient(
        135deg,
        #0D6EFD,
        #68C9FF
    );

}

/* ===========================
EVENT GRID
=========================== */

.events-grid{

    display:grid;

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

    gap:30px;

}

/* ===========================
FEATURED GRID
=========================== */

.events-grid.featured{

    margin-top:60px;

}

/* ===========================
TITLE DIVIDER
=========================== */

.events-divider{

    width:120px;

    height:4px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #FFB87A,
        #68C9FF
    );

    margin-top:25px;

}

/* ===========================
SECTION BADGE
=========================== */

.events-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

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

    color:#fff;

    backdrop-filter:blur(16px);

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

}

.events-badge i{

    color:#FFB87A;

}

/* ===========================
LIGHT EFFECT
=========================== */

.events-light{

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:#68C9FF;

    opacity:.18;

    filter:blur(80px);

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

}

.events-light.left{

    top:120px;

    left:-100px;

}

.events-light.right{

    bottom:60px;

    right:-120px;

}

/* ==========================================================
   PART 3A-1B-1
   EVENT CARD FOUNDATION
========================================================== */

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

.event-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:#ffffff;

    min-height:460px;

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

    transition:.45s ease;

    cursor:pointer;

}

.event-card:hover{

    transform:
    translateY(-12px);

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

}

/* ===========================
   EVENT IMAGE
=========================== */

.event-image{

    position:relative;

    height:460px;

    overflow:hidden;

}

.event-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.2s ease;

}

.event-card:hover .event-image img{

    transform:scale(1.08);

}

/* ===========================
   IMAGE OVERLAY
=========================== */

.event-image::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        to top,

        rgba(8,28,58,.94),

        rgba(8,28,58,.35),

        transparent

    );

}

.event-image::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:3;

    background:

    linear-gradient(

        135deg,

        rgba(104,201,255,.08),

        rgba(255,184,122,.08)

    );

    opacity:0;

    transition:.35s;

}

.event-card:hover .event-image::after{

    opacity:1;

}

/* ===========================
   EVENT CONTENT
=========================== */

.event-content{

    position:absolute;

    left:30px;

    right:30px;

    bottom:30px;

    z-index:5;

    color:#fff;

}

.event-content h3{

    color:#fff;

    font-size:30px;

    line-height:1.2;

    margin-bottom:14px;

}

.event-content p{

    color:#e6e6e6;

    margin-bottom:18px;

    font-size:15px;

}

/* ===========================
   DATE BADGE
=========================== */

.event-date{

    position:absolute;

    top:22px;

    left:22px;

    width:78px;

    height:90px;

    border-radius:22px;

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

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

    backdrop-filter:blur(18px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:6;

    box-shadow:

    0 20px 40px rgba(0,0,0,.15);

}

.event-date strong{

    font-size:30px;

    line-height:1;

    color:#fff;

    font-weight:800;

}

.event-date span{

    margin-top:8px;

    font-size:13px;

    color:#ffffff;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* ===========================
   CATEGORY BADGE
=========================== */

.event-category{

    position:absolute;

    top:24px;

    right:24px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

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

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

    backdrop-filter:blur(16px);

    color:#fff;

    font-size:13px;

    font-weight:600;

    z-index:6;

}

.event-category i{

    color:#FFB87A;

}

/* ===========================
   EVENT STATUS
=========================== */

.event-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(34,197,94,.18);

    border:1px solid rgba(34,197,94,.35);

    color:#D8FFE5;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.event-status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22C55E;

}

/* ===========================
   FEATURED LABEL
=========================== */

.event-featured{

    position:absolute;

    top:120px;

    left:22px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #FFB87A,
        #FFC857
    );

    color:#081C3A;

    font-size:13px;

    font-weight:700;

    z-index:6;

    box-shadow:
    0 15px 35px rgba(255,184,122,.35);

}

.event-featured i{

    font-size:12px;

}

/* ===========================
   GLASS CORNER
=========================== */

.event-corner{

    position:absolute;

    right:-50px;

    bottom:-50px;

    width:180px;

    height:180px;

    border-radius:50%;

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

    filter:blur(40px);

    z-index:1;

}

/* ==========================================================
   PART 3A-1B-1
   EVENT CARD FOUNDATION
========================================================== */

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

.event-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:#ffffff;

    min-height:460px;

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

    transition:.45s ease;

    cursor:pointer;

}

.event-card:hover{

    transform:
    translateY(-12px);

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

}

/* ===========================
   EVENT IMAGE
=========================== */

.event-image{

    position:relative;

    height:460px;

    overflow:hidden;

}

.event-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.2s ease;

}

.event-card:hover .event-image img{

    transform:scale(1.08);

}

/* ===========================
   IMAGE OVERLAY
=========================== */

.event-image::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        to top,

        rgba(8,28,58,.94),

        rgba(8,28,58,.35),

        transparent

    );

}

.event-image::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:3;

    background:

    linear-gradient(

        135deg,

        rgba(104,201,255,.08),

        rgba(255,184,122,.08)

    );

    opacity:0;

    transition:.35s;

}

.event-card:hover .event-image::after{

    opacity:1;

}

/* ===========================
   EVENT CONTENT
=========================== */

.event-content{

    position:absolute;

    left:30px;

    right:30px;

    bottom:30px;

    z-index:5;

    color:#fff;

}

.event-content h3{

    color:#fff;

    font-size:30px;

    line-height:1.2;

    margin-bottom:14px;

}

.event-content p{

    color:#e6e6e6;

    margin-bottom:18px;

    font-size:15px;

}

/* ===========================
   DATE BADGE
=========================== */

.event-date{

    position:absolute;

    top:22px;

    left:22px;

    width:78px;

    height:90px;

    border-radius:22px;

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

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

    backdrop-filter:blur(18px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:6;

    box-shadow:

    0 20px 40px rgba(0,0,0,.15);

}

.event-date strong{

    font-size:30px;

    line-height:1;

    color:#fff;

    font-weight:800;

}

.event-date span{

    margin-top:8px;

    font-size:13px;

    color:#ffffff;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* ===========================
   CATEGORY BADGE
=========================== */

.event-category{

    position:absolute;

    top:24px;

    right:24px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

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

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

    backdrop-filter:blur(16px);

    color:#fff;

    font-size:13px;

    font-weight:600;

    z-index:6;

}

.event-category i{

    color:#FFB87A;

}

/* ===========================
   EVENT STATUS
=========================== */

.event-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(34,197,94,.18);

    border:1px solid rgba(34,197,94,.35);

    color:#D8FFE5;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.event-status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22C55E;

}

/* ===========================
   FEATURED LABEL
=========================== */

.event-featured{

    position:absolute;

    top:120px;

    left:22px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #FFB87A,
        #FFC857
    );

    color:#081C3A;

    font-size:13px;

    font-weight:700;

    z-index:6;

    box-shadow:
    0 15px 35px rgba(255,184,122,.35);

}

.event-featured i{

    font-size:12px;

}

/* ===========================
   GLASS CORNER
=========================== */

.event-corner{

    position:absolute;

    right:-50px;

    bottom:-50px;

    width:180px;

    height:180px;

    border-radius:50%;

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

    filter:blur(40px);

    z-index:1;

}

/* ==========================================================
   PART 3A-1B-2A
   EVENT META + CTA
========================================================== */

/* ===========================
   EVENT META
=========================== */

.event-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:22px;

}

.event-meta-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:rgba(255,255,255,.92);

    font-size:14px;

}

.event-meta-item i{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--secondary);

    backdrop-filter:blur(12px);

    flex-shrink:0;

}

/* ===========================
   EVENT FOOTER
=========================== */

.event-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    margin-top:24px;

}

/* ===========================
   EVENT PRICE
=========================== */

.event-price{

    display:flex;

    flex-direction:column;

}

.event-price span{

    font-size:13px;

    color:rgba(255,255,255,.72);

    margin-bottom:4px;

}

.event-price strong{

    font-size:26px;

    color:#ffffff;

    font-weight:800;

}

.event-price.free strong{

    color:#22C55E;

}

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

.event-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 22px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--primary),
        #68C9FF
    );

    color:#fff;

    font-weight:700;

    font-size:14px;

    box-shadow:
    0 15px 35px rgba(13,110,253,.28);

    transition:.35s ease;

}

.event-button i{

    transition:.35s ease;

}

.event-button:hover{

    transform:translateY(-4px);

    box-shadow:
    0 22px 45px rgba(13,110,253,.38);

}

.event-button:hover i{

    transform:translateX(6px);

}

/* ===========================
   ATTENDEES
=========================== */

.event-attendees{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:24px;

}

.attendee-stack{

    display:flex;

}

.attendee-stack img{

    width:40px;

    height:40px;

    border-radius:50%;

    object-fit:cover;

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

    margin-left:-12px;

    transition:.35s ease;

}

.attendee-stack img:first-child{

    margin-left:0;

}

.event-card:hover .attendee-stack img{

    transform:translateY(-4px);

}

.attendee-count{

    color:#ffffff;

    font-size:14px;

    font-weight:600;

}

/* ===========================
   EVENT TAGS
=========================== */

.event-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:22px;

}

.event-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

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

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:12px;

    font-weight:600;

}

.event-tag i{

    color:var(--secondary);

}

/* ===========================
   EVENT SEPARATOR
=========================== */

.event-divider{

    width:100%;

    height:1px;

    margin:24px 0;

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

}

/* ===========================
   QUICK ACTION
=========================== */

.event-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.event-icon-btn{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

    color:#fff;

    backdrop-filter:blur(12px);

    transition:.35s ease;

}

.event-icon-btn:hover{

    transform:translateY(-3px);

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

}

/* ==========================================================
   PART 3A-1B-2B-1
   FEATURED EVENT CARD
========================================================== */

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

.event-card.featured{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    min-height:560px;

    background:linear-gradient(
        135deg,
        #081C3A,
        #102548
    );

    overflow:hidden;

}

.event-card.featured .event-image{

    height:100%;

}

.event-card.featured .event-content{

    position:relative;

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

    padding:50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* ===========================
   FEATURED LABEL
=========================== */

.featured-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    width:max-content;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #FFB87A,
        #FFD38D
    );

    color:#081C3A;

    font-size:13px;

    font-weight:700;

    margin-bottom:22px;

    box-shadow:
    0 15px 35px rgba(255,184,122,.35);

}

.featured-label i{

    color:#081C3A;

}

/* ===========================
   FEATURED TITLE
=========================== */

.event-card.featured h3{

    font-size:42px;

    line-height:1.1;

    margin-bottom:20px;

}

.event-card.featured p{

    font-size:17px;

    color:#d8d8d8;

    max-width:520px;

}

/* ===========================
   FEATURED IMAGE MASK
=========================== */

.featured-image-mask{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(8,28,58,.15)
    );

    z-index:4;

}

/* ===========================
   FEATURED CORNER
=========================== */

.featured-corner{

    position:absolute;

    top:-60px;

    right:-60px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(104,201,255,.16);

    filter:blur(40px);

    z-index:1;

}

/* ===========================
   DECORATIVE LINES
=========================== */

.featured-lines{

    position:absolute;

    bottom:30px;

    right:30px;

    width:120px;

    height:120px;

    border:2px dashed rgba(255,255,255,.15);

    border-radius:50%;

    z-index:2;

}

/* ===========================
   FEATURED INFO STRIP
=========================== */

.featured-strip{

    display:flex;

    gap:24px;

    margin-top:30px;

    flex-wrap:wrap;

}

.featured-strip .item{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:14px;

}

.featured-strip .item i{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--secondary);

}

/* ===========================
   FEATURED STATS
=========================== */

.featured-stats{

    display:grid;

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

    gap:18px;

    margin-top:35px;

}

.featured-stat{

    padding:18px;

    border-radius:18px;

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

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

    backdrop-filter:blur(14px);

    text-align:center;

}

.featured-stat h4{

    color:#fff;

    font-size:26px;

    margin-bottom:6px;

}

.featured-stat span{

    color:#d8d8d8;

    font-size:13px;

}

/* ===========================
   FEATURED BADGE
=========================== */

.featured-badge{

    position:absolute;

    top:24px;

    right:24px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:999px;

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

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

    color:#fff;

    backdrop-filter:blur(14px);

    z-index:6;

}

/* ===========================
   IMAGE DECORATION
=========================== */

.featured-ring{

    position:absolute;

    left:40px;

    bottom:40px;

    width:90px;

    height:90px;

    border-radius:50%;

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

    z-index:4;

}

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

.featured-glow{

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:rgba(255,184,122,.18);

    filter:blur(70px);

    bottom:-100px;

    left:-80px;

    z-index:0;

}

/* ==========================================================
   PART 3A-1B-2B-2A
   ADVANCED HOVER & MICRO INTERACTIONS
========================================================== */

/* ===========================
   EVENT CARD TRANSITION
=========================== */

.event-card{

    transform-style:preserve-3d;

    will-change:transform;

}

.event-card:hover{

    transform:
        translateY(-14px)
        rotateX(2deg)
        rotateY(-2deg);

}

/* ===========================
   SHINE EFFECT
=========================== */

.event-card .shine{

    position:absolute;

    top:-150%;

    left:-45%;

    width:90px;

    height:300%;

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

    transform:rotate(25deg);

    transition:1s ease;

    z-index:4;

    pointer-events:none;

}

.event-card:hover .shine{

    left:145%;

}

/* ===========================
   CONTENT REVEAL
=========================== */

.event-content > *{

    transition:.35s ease;

}

.event-card:hover .event-content h3{

    transform:translateY(-2px);

    letter-spacing:.3px;

}

.event-card:hover .event-content p{

    color:#ffffff;

}

/* ===========================
   BADGE HOVER
=========================== */

.event-date,
.event-category,
.event-featured{

    transition:.35s ease;

}

.event-card:hover .event-date{

    transform:translateY(-4px) scale(1.04);

}

.event-card:hover .event-category{

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

}

.event-card:hover .event-featured{

    transform:scale(1.05);

}

/* ===========================
   ICON ANIMATION
=========================== */

.event-meta-item i,
.event-icon-btn,
.event-button i{

    transition:.35s ease;

}

.event-card:hover .event-meta-item i{

    transform:rotate(-10deg) scale(1.08);

}

.event-icon-btn:hover{

    transform:translateY(-3px) rotate(8deg);

}

.event-button:hover i{

    transform:translateX(6px);

}

/* ===========================
   ATTENDEE EFFECT
=========================== */

.event-card:hover .attendee-stack img{

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

}

.event-card:hover .attendee-stack img:nth-child(2){

    transition-delay:.05s;

}

.event-card:hover .attendee-stack img:nth-child(3){

    transition-delay:.1s;

}

.event-card:hover .attendee-stack img:nth-child(4){

    transition-delay:.15s;

}

/* ===========================
   GLOW OVERLAY
=========================== */

.event-glow{

    position:absolute;

    inset:auto;

    width:220px;

    height:220px;

    right:-60px;

    bottom:-60px;

    border-radius:50%;

    background:rgba(104,201,255,.16);

    filter:blur(70px);

    opacity:0;

    transition:.5s ease;

    pointer-events:none;

}

.event-card:hover .event-glow{

    opacity:1;

}

/* ===========================
   BORDER GLOW
=========================== */

.event-card::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        rgba(104,201,255,.25),
        rgba(255,184,122,.20)
    );

    opacity:0;

    transition:.35s ease;

    z-index:0;

    pointer-events:none;

}

.event-card:hover::after{

    opacity:1;

}

/* ===========================
   TITLE UNDERLINE
=========================== */

.event-content h3{

    position:relative;

}

.event-content h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        #68C9FF
    );

    transition:.35s ease;

}

.event-card:hover h3::after{

    width:90px;

}

/* ===========================
   FLOATING DOTS
=========================== */

.event-dot{

    position:absolute;

    width:10px;

    height:10px;

    border-radius:50%;

    background:#68C9FF;

    opacity:.35;

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

    pointer-events:none;

}

.event-dot.peach{

    background:#FFB87A;

}

.event-dot.small{

    width:6px;

    height:6px;

}

/* ===========================
   FEATURED CARD ENHANCEMENT
=========================== */

.event-card.featured:hover{

    transform:
        translateY(-16px)
        scale(1.01);

}

.event-card.featured:hover .featured-stat{

    transform:translateY(-4px);

}

.featured-stat{

    transition:.35s ease;

}

.featured-strip .item{

    transition:.35s ease;

}

.event-card.featured:hover .featured-strip .item{

    transform:translateX(3px);

}

/* ===========================
   PARALLAX IMAGE FEEL
=========================== */

.event-card:hover .event-image img{

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

}