/*********************************************************************
 Chennai AI Summit 2026
 Premium Attendee Guide
 File : assets/css/attendee-guide.css
*********************************************************************/

/*=========================================================
ROOT VARIABLES
=========================================================*/

:root{

--primary:#06263A;
--secondary:#0C4D78;
--accent:#00C2FF;
--gold:#FFC107;
--success:#16a34a;
--danger:#dc2626;

--white:#ffffff;
--light:#f5f9fc;
--gray:#6b7280;
--dark:#111827;

--radius:18px;

--shadow:

0 12px 40px rgba(0,0,0,.08);

--transition:.35s ease;

}

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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#f4f8fb;

color:var(--dark);

overflow-x:hidden;

}

/*=========================================================
HEADINGS
=========================================================*/

h1,h2,h3,h4,h5,h6{

font-weight:700;

}

p{

color:#5f6b76;

line-height:1.8;

}

/*=========================================================
LINKS
=========================================================*/

a{

text-decoration:none;

transition:var(--transition);

}

a:hover{

text-decoration:none;

}

/*=========================================================
IMAGES
=========================================================*/

img{

max-width:100%;

display:block;

}

/*=========================================================
PRELOADER
=========================================================*/

#preloader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#041b2d;

z-index:99999;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

}

.loader{

text-align:center;

}

.loader-ring{

width:80px;

height:80px;

border-radius:50%;

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

border-top:6px solid var(--accent);

animation:spin 1s linear infinite;

}

.loader-text{

margin-top:25px;

font-size:22px;

font-weight:700;

color:#fff;

letter-spacing:1px;

}

/*=========================================================
NAVBAR
=========================================================*/

.navbar{

background:rgba(6,38,58,.88);

backdrop-filter:blur(12px);

padding:18px 0;

transition:.4s;

}

.navbar.scrolled{

padding:10px 0;

background:#041b2d;

box-shadow:

0 10px 30px rgba(0,0,0,.15);

}

.navbar-brand{

font-size:24px;

font-weight:800;

letter-spacing:.5px;

}

.navbar-brand i{

color:var(--accent);

margin-right:8px;

}

.nav-link{

color:#fff !important;

margin-left:18px;

font-weight:500;

position:relative;

}

.nav-link:after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}

.nav-link:hover:after{

width:100%;

}

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

.btn{

border-radius:50px;

padding:13px 28px;

font-weight:600;

transition:.35s;

}

.btn-primary{

background:linear-gradient(

135deg,

var(--accent),

var(--secondary)

);

border:none;

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:

0 15px 30px rgba(0,194,255,.25);

}

.btn-warning{

color:#111;

font-weight:700;

}

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

.section-badge{

display:inline-block;

padding:8px 20px;

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

color:var(--secondary);

border-radius:30px;

font-weight:600;

margin-bottom:20px;

}

.section-title{

font-size:clamp(28px,5vw,44px);

font-weight:800;

color:var(--primary);

margin-bottom:15px;

}

.section-subtitle{

font-size:18px;

max-width:760px;

margin:auto;

color:#6b7280;

}

/*=========================================================
COMMON CARDS
=========================================================*/

.info-card,
.large-info-card,
.checklist-card,
.experience-card,
.glass-help-card,
.closing-card{

background:#fff;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

overflow:hidden;

}

.info-card:hover,
.large-info-card:hover,
.checklist-card:hover,
.experience-card:hover,
.glass-help-card:hover,
.closing-card:hover{

transform:translateY(-8px);

box-shadow:

0 20px 45px rgba(0,0,0,.12);

}

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

.hero-section{

position:relative;

min-height:100vh;

display:flex;

flex-direction:column;

align-items:stretch;

justify-content:center;

overflow:hidden;

background:
linear-gradient(
135deg,
#031b2e 0%,
#06263A 40%,
#0C4D78 100%);

color:#fff;

padding-top:120px;

padding-bottom:80px;

}

/*=========================================================
ANIMATED PARTICLES
=========================================================*/

.hero-particles{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

z-index:1;

}

.particle{

position:absolute;

border-radius:50%;

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

animation:floatParticle 12s linear infinite;

}

.p1{

width:18px;
height:18px;
left:8%;
top:80%;

animation-duration:18s;

}

.p2{

width:30px;
height:30px;
left:25%;
top:95%;

animation-duration:22s;

}

.p3{

width:12px;
height:12px;
left:45%;
top:88%;

animation-duration:14s;

}

.p4{

width:22px;
height:22px;
left:68%;
top:92%;

animation-duration:20s;

}

.p5{

width:15px;
height:15px;
left:82%;
top:96%;

animation-duration:16s;

}

.p6{

width:28px;
height:28px;
left:92%;
top:90%;

animation-duration:24s;

}

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

.hero-section .container{

position:relative;

z-index:5;

}

.hero-badge{

display:inline-block;

padding:10px 22px;

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

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

backdrop-filter:blur(10px);

border-radius:50px;

font-size:15px;

font-weight:600;

}

.hero-title{

font-size:clamp(34px,7vw,64px);

font-weight:800;

line-height:1.15;

margin-top:25px;

}

.text-gradient{

background:linear-gradient(

90deg,

#00C2FF,

#55E6FF,

#B6F4FF

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-subtitle{

font-size:21px;

max-width:650px;

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

line-height:1.9;

}

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

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:35px;

}

.hero-buttons .btn{

min-width:190px;

}

/*=========================================================
META INFORMATION
=========================================================*/

.hero-meta{

display:flex;

gap:30px;

flex-wrap:wrap;

margin-top:45px;

}

.meta-item{

display:flex;

align-items:center;

gap:10px;

font-size:17px;

font-weight:600;

color:#fff;

}

.meta-item i{

color:#00C2FF;

font-size:22px;

}

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

.hero-image{

position:relative;

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

}

.hero-image img{

    max-width:75%;
    margin:auto;
    
filter:

drop-shadow(0 35px 55px rgba(0,0,0,.35));

}

/*=========================================================
SCROLL INDICATOR
=========================================================*/

.scroll-indicator{

position:absolute;

bottom:25px;

left:50%;

transform:translateX(-50%);

z-index:20;

text-align:center;

}

.scroll-indicator a{

color:#fff;

}

.mouse{

width:32px;

height:55px;

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

border-radius:25px;

display:flex;

justify-content:center;

padding-top:10px;

margin:auto;

}

.wheel{

width:6px;

height:12px;

background:#fff;

border-radius:5px;

animation:scrollWheel 1.8s infinite;

}

.scroll-indicator p{

margin-top:10px;

font-size:13px;

letter-spacing:1px;

color:#d5e5ef;

}

/*=========================================================
FLOATING FEATURE CARDS
=========================================================*/

.floating-cards{

position:absolute;

right:4%;

bottom:40px;

display:flex;

flex-direction:column;

gap:18px;

z-index:15;

}

.feature-card{

width:100%;

padding:18px;

border-radius:18px;

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

backdrop-filter:blur(18px);

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

color:#fff;

transition:.35s;

}

.feature-card:hover{

transform:translateX(-8px);

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

}

.feature-card i{

font-size:34px;

color:#00C2FF;

margin-bottom:15px;

}

.feature-card h6{

font-size:18px;

margin-bottom:10px;

font-weight:700;

}

.feature-card p{

font-size:14px;

color:#d8ecf8;

margin:0;

}

/*=========================================================
EVENT HIGHLIGHT BOXES
=========================================================*/

.hero-highlights{

margin-top:70px;

}

.highlight-box{

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

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

backdrop-filter:blur(18px);

padding:28px;

border-radius:18px;

text-align:center;

transition:.35s;

}

.highlight-box:hover{

transform:translateY(-8px);

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

}

.highlight-box h2{

font-size:46px;

font-weight:800;

color:#00C2FF;

margin-bottom:10px;

}

.highlight-box span{

font-size:16px;

color:#fff;

letter-spacing:.5px;

}

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

.wave-divider{

position:absolute;

left:0;

bottom:-1px;

width:100%;

line-height:0;

}

.wave-divider svg{

display:block;

width:100%;

height:120px;

}

/*=========================================================
QUICK INFORMATION CARDS
=========================================================*/

.info-card{

padding:22px;

text-align:center;

position:relative;

background:#ffffff;

border-radius:20px;

overflow:hidden;

height:100%;

}

.info-card:before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
#00C2FF,
#0C4D78);

}

.info-card h4{

margin-top:25px;

color:var(--primary);

font-weight:700;

}

.info-card h5{

margin-top:10px;

font-size:24px;

font-weight:700;

color:var(--secondary);

}

.info-card p{

margin-top:15px;

font-size:15px;

}

.info-tag{

display:inline-block;

margin-top:20px;

padding:8px 18px;

background:#eef8ff;

border-radius:30px;

font-size:13px;

font-weight:600;

color:var(--secondary);

}

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

.icon-box{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:36px;

box-shadow:

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

}

/*=========================================================
LARGE INFO CARD
=========================================================*/

.large-info-card{

padding:40px;

background:#fff;

height:100%;

border-radius:22px;

position:relative;

overflow:hidden;

}

.large-info-card:before{

content:"";

position:absolute;

right:-70px;

top:-70px;

width:180px;

height:180px;

border-radius:50%;

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

}

.large-info-card h3{

margin-bottom:25px;

color:var(--primary);

font-weight:700;

}

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

.big-icon{

width:110px;

height:110px;

margin:auto;

border-radius:25px;

display:flex;

align-items:center;

justify-content:center;

font-size:46px;

color:#fff;

box-shadow:

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

}

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

.guide-list{

list-style:none;

padding:0;

margin:0;

}

.guide-list li{

padding:12px 0;

padding-left:35px;

position:relative;

font-size:16px;

border-bottom:1px dashed #e8edf3;

}

.guide-list li:last-child{

border-bottom:none;

}

.guide-list li:before{

content:"✓";

position:absolute;

left:0;

top:10px;

width:24px;

height:24px;

background:#16a34a;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:12px;

font-weight:bold;

color:#fff;

}

/*=========================================================
DRESS BOX
=========================================================*/

.dress-box{

padding:20px;

background:#f8fbfe;

border-radius:18px;

text-align:center;

transition:.35s;

}

.dress-box:hover{

transform:translateY(-6px);

background:#eef8ff;

}

.dress-box i{

font-size:34px;

margin-bottom:15px;

color:var(--secondary);

}

.dress-box h6{

font-weight:700;

margin:0;

}

/*=========================================================
WELCOME KIT
=========================================================*/

.welcome-card{

background:

linear-gradient(
135deg,
#06263A,
#0C4D78);

color:#fff;

padding:25px;

border-radius:28px;

position:relative;

overflow:hidden;

box-shadow:

0 25px 60px rgba(6,38,58,.20);

}

.welcome-card:before{

content:"";

position:absolute;

right:-80px;

bottom:-80px;

width:250px;

height:250px;

background:

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

border-radius:50%;

}

.welcome-card h2{

font-size:36px;

font-weight:700;

margin-bottom:20px;

}

.welcome-card p{

color:#d9eef9;

font-size:17px;

line-height:1.8;

}

.gift-circle{

width:140px;

height:140px;

margin:auto;

border-radius:50%;

background:

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

display:flex;

align-items:center;

justify-content:center;

font-size:58px;

color:#FFD54F;

backdrop-filter:blur(8px);

}

.kit-items{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:30px;

}

.kit-items span{

padding:12px 22px;

background:

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

border-radius:40px;

font-weight:600;

backdrop-filter:blur(8px);

transition:.35s;

}

.kit-items span:hover{

background:

rgba(255,255,255,.20);

transform:translateY(-4px);

}

/*=========================================================
REGISTRATION JOURNEY
=========================================================*/

.registration-journey{

position:relative;

padding:40px 0;

}

.journey-line{

position:absolute;

left:8%;

right:8%;

top:110px;

height:4px;

background:linear-gradient(
90deg,
#00C2FF,
#0C4D78,
#00C2FF);

border-radius:30px;

z-index:0;

}

.journey-card{

position:relative;

background:#fff;

padding:35px 25px;

border-radius:22px;

text-align:center;

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

transition:.35s;

height:100%;

z-index:5;

overflow:hidden;

}

.journey-card:hover{

transform:translateY(-10px);

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

}

.journey-card:before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
#00C2FF,
#0C4D78);

}

.journey-number{

position:absolute;

top:18px;

right:18px;

font-size:42px;

font-weight:800;

color:rgba(6,38,58,.08);

}

.journey-icon{

width:90px;

height:90px;

margin:0 auto 25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:36px;

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

}

.journey-card h4{

font-weight:700;

margin-bottom:15px;

color:var(--primary);

}

.journey-card p{

font-size:15px;

line-height:1.8;

margin-bottom:0;

}

/*=========================================================
ARRIVAL FLOW
=========================================================*/

.arrival-flow{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:18px;

padding:22px;

background:#fff;

border-radius:22px;

box-shadow:var(--shadow);

}

.flow-item{

width:170px;

padding:22px;

text-align:center;

background:#f7fbfe;

border-radius:18px;

transition:.35s;

}

.flow-item:hover{

background:#eef8ff;

transform:translateY(-8px);

}

.flow-item i{

font-size:42px;

color:var(--secondary);

margin-bottom:15px;

}

.flow-item h6{

font-weight:700;

margin:0;

}

.flow-arrow{

font-size:28px;

color:#00C2FF;

}

/*=========================================================
SUCCESS PANEL
=========================================================*/

.alert-success{

border-radius:22px;

background:linear-gradient(
135deg,
#16a34a,
#22c55e);

color:#fff;

}

.alert-success h3{

font-weight:700;

margin-bottom:15px;

}

.alert-success p{

color:#fff;

font-size:17px;

}

/*=========================================================
CHECKLIST CARDS
=========================================================*/

.checklist-card{

padding:22px;

text-align:center;

background:#fff;

position:relative;

height:100%;

border-radius:22px;

}

.checklist-card:hover{

transform:translateY(-10px);

}

.check-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

color:#fff;

margin-bottom:25px;

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

}

.checklist-card h4{

margin-bottom:18px;

font-weight:700;

color:var(--primary);

}

.checklist-card p{

font-size:15px;

line-height:1.8;

margin-bottom:25px;

}

/*=========================================================
BADGES
=========================================================*/

.required-badge,
.optional-badge,
.recommended-badge,
.special-badge{

display:inline-block;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.required-badge{

background:#fee2e2;

color:#b91c1c;

}

.optional-badge{

background:#e0f2fe;

color:#0369a1;

}

.recommended-badge{

background:#dcfce7;

color:#15803d;

}

.special-badge{

background:#ede9fe;

color:#6d28d9;

}

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

.glass-reminder{

padding:40px;

border-radius:25px;

background:linear-gradient(
135deg,
rgba(6,38,58,.95),
rgba(12,77,120,.92));

backdrop-filter:blur(15px);

color:#fff;

box-shadow:0 20px 45px rgba(6,38,58,.20);

}

.glass-reminder h3{

font-weight:700;

margin-bottom:18px;

}

.glass-reminder p{

color:#e6f5ff;

font-size:17px;

line-height:2;

}

/*=========================================================
EVENT EXPERIENCE
=========================================================*/

.experience-card{

background:#ffffff;

border-radius:22px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.experience-card:hover{

transform:translateY(-10px);

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

}

.experience-image{

height:180px;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

}

.experience-content{

padding:30px;

}

.experience-content h3{

font-size:24px;

font-weight:700;

margin-bottom:15px;

color:var(--primary);

}

.experience-content p{

font-size:15px;

line-height:1.8;

margin-bottom:25px;

}

.experience-footer{

border-top:1px solid #edf2f7;

padding-top:20px;

}

/*=========================================================
GENERAL GUIDELINES
=========================================================*/

.glass-guidelines{

background:linear-gradient(

135deg,

#ffffff,

#f7fbff

);

padding:45px;

border-radius:25px;

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

}

.guide-checklist{

list-style:none;

padding:0;

margin:0;

}

.guide-checklist li{

padding:16px 0;

font-size:17px;

border-bottom:1px dashed #dce5ec;

}

.guide-checklist li:last-child{

border-bottom:none;

}

.guide-checklist i{

margin-right:12px;

}

/*=========================================================
PREMIUM BANNER
=========================================================*/

.premium-banner{

background:

linear-gradient(

135deg,

#06263A,

#0C4D78

);

padding:60px;

border-radius:30px;

color:#fff;

overflow:hidden;

position:relative;

}

.premium-banner:before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:280px;

height:280px;

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

border-radius:50%;

}

.premium-banner h2{

font-size:40px;

font-weight:800;

margin-bottom:20px;

}

.premium-banner p{

color:#d9eef9;

font-size:18px;

max-width:800px;

margin:auto;

}

.premium-banner h1{

font-size:52px;

font-weight:800;

color:#00C2FF;

margin-top:30px;

}

/*=========================================================
FAQ
=========================================================*/

.accordion-item{

border:none;

border-radius:18px !important;

overflow:hidden;

margin-bottom:18px;

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

}

.accordion-button{

padding:22px;

font-size:18px;

font-weight:600;

background:#fff;

}

.accordion-button:not(.collapsed){

background:#eef8ff;

color:var(--primary);

box-shadow:none;

}

.accordion-button:focus{

box-shadow:none;

}

.accordion-body{

padding:25px;

font-size:16px;

line-height:1.8;

background:#fff;

}

/*=========================================================
HELP DESK
=========================================================*/

.glass-help-card{

background:

linear-gradient(

135deg,

#ffffff,

#f7fbff

);

padding:25px;

border-radius:28px;

box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.contact-box{

padding:20px;

margin-top:15px;

background:#fff;

border-radius:18px;

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

transition:.3s;

}

.contact-box:hover{

transform:translateY(-5px);

background:#eef8ff;

}

.contact-box i{

font-size:26px;

color:var(--accent);

margin-bottom:12px;

display:block;

}

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

.closing-section{

background:

linear-gradient(

135deg,

#031b2e,

#06263A,

#0C4D78

);

padding:100px 0;

color:#fff;

}

.closing-card{

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

backdrop-filter:blur(18px);

padding:60px;

border-radius:30px;

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

}

.closing-card h1{

font-size:52px;

font-weight:800;

margin-bottom:25px;

}

.closing-card p{

font-size:19px;

color:#dbeefd;

line-height:1.9;

}

.closing-card hr{

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

margin:35px 0;

}

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

.footer{

background:#041b2d;

padding:45px 0;

color:#d8e8f5;

}

.footer h4{

color:#ffffff;

font-weight:700;

margin-bottom:15px;

}

.footer p{

margin-bottom:8px;

color:#c9d8e4;

}

/*=========================================================
SMALL UTILITIES
=========================================================*/

.text-gradient{

background:linear-gradient(

90deg,

#00C2FF,

#7EE8FF

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.shadow-hover{

transition:.35s;

}

.shadow-hover:hover{

transform:translateY(-6px);

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

}

.rounded-xl{

border-radius:22px;

}

/*=========================================================
ANIMATIONS
=========================================================*/

@keyframes spin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

@keyframes heroFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}

@keyframes floatParticle{

0%{

transform:translateY(0px) translateX(0px);

opacity:.2;

}

50%{

opacity:.8;

}

100%{

transform:translateY(-1200px) translateX(120px);

opacity:0;

}

}

@keyframes scrollWheel{

0%{

opacity:0;

transform:translateY(0);

}

40%{

opacity:1;

}

80%{

transform:translateY(18px);

opacity:0;

}

100%{

opacity:0;

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .8s ease forwards;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eef5fb;

}

::-webkit-scrollbar-thumb{

background:#0C4D78;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#06263A;

}

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

::selection{

background:#00C2FF;

color:#fff;

}

/*=========================================================
BACK TO TOP BUTTON
=========================================================*/

#backToTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border-radius:50%;

background:linear-gradient(
135deg,
#00C2FF,
#0C4D78);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

cursor:pointer;

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

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

#backToTop.show{

opacity:1;

visibility:visible;

}

#backToTop:hover{

transform:translateY(-6px);

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.hero-title{

font-size:52px;

}

.floating-cards{

display:none;

}

.journey-line{

display:none;

}

}

@media(max-width:991x){

.hero-section{

padding-top:140px;

padding-bottom:70px;

text-align:center;

}

.hero-title{

font-size:46px;

}

.hero-subtitle{

font-size:18px;

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-meta{

justify-content:center;

}

.hero-image{

margin-top:50px;

}

.section-title{

font-size:38px;

}

.welcome-card{

padding:22px;

}

.premium-banner{

padding:40px;

}

.closing-card{

padding:40px;

}

.arrival-flow{

flex-direction:column;

}

.flow-arrow{

transform:rotate(180deg);

}

}

@media(max-width:768px){

.navbar-brand{

font-size:20px;

}

.hero-title{

font-size:38px;

}

.hero-subtitle{

font-size:17px;

}

.section-title{

font-size:32px;

}

.hero-meta{

flex-direction:column;

gap:15px;

}

.info-card{

padding:25px;

}

.large-info-card{

padding:25px;

}

.checklist-card{

padding:25px;

}

.experience-content{

padding:25px;

}

.glass-help-card{

padding:30px;

}

.closing-card{

padding:30px;

}

.premium-banner{

padding:30px;

}

.welcome-card{

padding:30px;

}

.gift-circle{

width:100px;

height:100px;

font-size:42px;

}

.big-icon{

width:85px;

height:85px;

font-size:36px;

}

.icon-box{

width:75px;

height:75px;

font-size:30px;

}

.flow-item{

width:100%;

}

}

@media(max-width:576px){

.hero-section{

padding-top:120px;

}

.hero-title{

font-size:30px;

}

.hero-buttons .btn{

width:100%;

}

.meta-item{

font-size:15px;

}

.section-title{

font-size:28px;

}

.highlight-box{

margin-bottom:20px;

}

.kit-items{

justify-content:center;

}

.footer{

text-align:center;

}

.footer .text-lg-end{

text-align:center !important;

margin-top:20px;

}

}

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

[data-aos]{

opacity:1;

transform:none;

}

@media (max-width:768px){

.hero-title{
    font-size:36px;
}

.section-title{
    font-size:30px;
}

.hero-subtitle{
    font-size:16px;
}

.hero-meta{
    gap:15px;
}

.hero-buttons .btn{
    width:100%;
}

.hero-image{
    margin-top:30px;
    text-align:center;
}

.hero-image img{
    max-width:75%;
}

.floating-cards{
    display:none;
}

.journey-line{
    display:none;
}

.arrival-flow{
    flex-direction:column;
}

.flow-arrow{
    transform:rotate(90deg);
}

.welcome-card,
.glass-guidelines,
.glass-reminder,
.premium-banner{
    padding:25px;
}

.info-card,
.large-info-card,
.checklist-card,
.experience-card{
    padding:22px;
}

.feature-card{
    width:100%;
}

.container{
    padding-left:18px;
    padding-right:18px;
}

}

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