:root{

/* DARK THEME */

--bg:#020617;
--surface:#0f172a;
--card:#1e293b;
--text:#ffffff;
--secondary:#cbd5e1;
--border:#334155;
--accent:#ff8c1a;

}

body.light-theme{

/* LIGHT THEME */

--bg:#ffffff;
--surface:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--secondary:#64748b;
--border:#e2e8f0;
--accent:#ff8c1a;

}

/* APPLY VARIABLES */

body{
background:var(--bg);
color:var(--text);
transition:0.3s;
}

.theatre-card{
background:var(--card);
}

.movie-card{
background:var(--card);
}

.book-btn{
background:var(--accent);
color:white;
}

body{
margin:0;
font-family:'Poppins', sans-serif;
background:var(--bg);
color:var(--text);
}

html{
scroll-behavior:smooth;
}

html,body{
overflow-x:hidden;
}
/* NAVBAR */

/* HEADER */

.header{
width:100%;
background:var(--bg);
position:sticky;
top:0;
z-index:999;
}

/* TOP HEADER */

.top-header{
width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 0;
}

/* LOGO */

.logo img{
height:60px;
cursor:pointer;
  border-radius: 10px;
}

/* SEARCH */

.search-container{
position:relative;
width:420px;
}

.search-container input{
width:100%;
padding:10px 40px 10px 15px;
border-radius:10px;
border:none;
background:#f1f5f9;
color:#111;
font-size:14px;
}

.search-icon{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
font-size:14px;
}

/* ACTIONS */

.header-actions{
display:flex;
align-items:center;
gap:12px;
}

/* CITY */

.city-container input{
width:140px;
padding:9px;
border-radius:10px;
border:none;
background:#f1f5f9;
color:#111;
font-size:14px;
}

/* BUTTONS */

.theme-toggle{
background:#0f172a;
border:none;
padding:8px 12px;
border-radius:8px;
color:white;
cursor:pointer;
}

.profile-icon{
width:36px;
height:36px;
background:#0f172a;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
cursor:pointer;
color:white;
}

/* NAV BAR */

.nav-bar{
border-top:1px solid rgba(255,255,255,0.05);
border-bottom:1px solid rgba(255,255,255,0.05);
}

/* NAV MENU */

.nav-menu{
width:1200px;
margin:auto;
display:flex;
gap:30px;
padding:10px 0;
}

/* NAV MENU LINKS */

.nav-menu a{
text-decoration:none;
color:#cbd5e1;
font-size:15px;
padding:8px 14px;
border-radius:6px;
position:relative;
transition:0.25s;
}

/* HOVER ORANGE BOX */

.nav-menu a:hover{
background:#ff8c1a;
color:white;
}

/* ACTIVE PAGE (OPTIONAL) */

.nav-menu a.active{
background:#ff8c1a;
color:white;
}
.nav-menu a::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0;
height:2px;
background:#ff8c1a;
transition:0.3s;
}

.nav-menu a:hover::after{
width:100%;
}

/* ---------- TABLET (1024px) ---------- */

@media (max-width:1024px){

.top-header{
width:95%;
}

.nav-menu{
width:95%;
gap:18px;
}

.search-container{
width:280px;
}

.city-container input{
width:110px;
}

}


/* ---------- GLOBAL FIX ---------- */

html, body{
max-width:100%;
overflow-x:hidden;
margin:0;
font-family:'Poppins', sans-serif;
background:var(--bg);
color:var(--text);
}

/* ---------- HEADER ---------- */

.header{
width:100%;
background:var(--bg);
position:sticky;
top:0;
z-index:999;
}

/* ---------- TOP HEADER ---------- */

.top-header{
max-width:1200px;
width:95%;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 0;
flex-wrap:wrap;
gap:10px;
}

/* ---------- LOGO ---------- */

.logo img{
height:60px;
cursor:pointer;
border-radius:10px;
}

/* ---------- SEARCH ---------- */

.search-container{
position:relative;
max-width:420px;
width:100%;
}

.search-container input{
width:100%;
padding:10px 40px 10px 15px;
border-radius:10px;
border:none;
background:#f1f5f9;
color:#111;
font-size:14px;
}

.search-icon{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
font-size:14px;
}

/* ---------- HEADER ACTIONS ---------- */

.header-actions{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

/* ---------- CITY INPUT ---------- */

.city-container input{
max-width:140px;
width:100%;
padding:9px;
border-radius:10px;
border:none;
background:#f1f5f9;
color:#111;
font-size:14px;
}

/* ---------- BUTTONS ---------- */

.theme-toggle{
background:#0f172a;
border:none;
padding:8px 12px;
border-radius:8px;
color:white;
cursor:pointer;
}

.profile-icon{
width:36px;
height:36px;
background:#0f172a;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
cursor:pointer;
color:white;
}

/* ---------- NAV BAR ---------- */

.nav-bar{
border-top:1px solid rgba(255,255,255,0.05);
border-bottom:1px solid rgba(255,255,255,0.05);
overflow:hidden;
}

/* ---------- NAV MENU ---------- */

.nav-menu{
max-width:1200px;
width:95%;
margin:auto;
display:flex;
gap:30px;
padding:10px 0;
}

/* ---------- NAV LINKS ---------- */

.nav-menu a{
text-decoration:none;
color:#cbd5e1;
font-size:15px;
padding:8px 14px;
border-radius:6px;
position:relative;
transition:0.25s;
white-space:nowrap;
}

/* HOVER */

.nav-menu a:hover{
background:#ff8c1a;
color:white;
}

/* ACTIVE */

.nav-menu a.active{
background:#ff8c1a;
color:white;
}

/* UNDERLINE */

.nav-menu a::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
width:0;
height:2px;
background:#ff8c1a;
transition:0.3s;
}

.nav-menu a:hover::after{
width:100%;
}

/* ---------- TABLET ---------- */

@media (max-width:1024px){

.top-header{
width:95%;
}

.nav-menu{
width:95%;
gap:18px;
}

.search-container{
max-width:300px;
}

}

/* ---------- MOBILE ---------- */

@media (max-width:768px){

.top-header{
flex-direction:column;
align-items:flex-start;
padding:10px;
}

.logo img{
height:50px;
}

/* SEARCH FULL WIDTH */

.search-container{
width:100%;
order:2;
}

/* ACTIONS */

.header-actions{
width:100%;
display:flex;
justify-content:space-between;
}

/* CITY */

.city-container input{
max-width:120px;
}

/* NAV MENU SCROLL */

.nav-menu{
width:100%;
overflow-x:auto;
white-space:nowrap;
gap:12px;
padding:10px;
scrollbar-width:none;
}

.nav-menu::-webkit-scrollbar{
display:none;
}

.nav-menu a{
flex:0 0 auto;
font-size:14px;
padding:8px 12px;
}

}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

.top-header{
gap:12px;
}

.header-actions{
gap:8px;
}

.city-container input{
max-width:100px;
font-size:13px;
}

.theme-toggle{
padding:6px 10px;
font-size:13px;
}

.profile-icon{
width:32px;
height:32px;
}

.nav-menu a{
font-size:13px;
padding:7px 10px;
}

}

/* HERO */

/* HERO SLIDER */

.hero-slider{

position:relative;
width:100%;
height:520px;

overflow:hidden;

}


/* SLIDES */

.slides{

display:flex;
width:100%;
height:100%;

}


.slide{

min-width:100%;
height:100%;

position:relative;

display:none;

}

.slide.active{

display:block;

}


.slide img{

width:100%;
height:100%;

object-fit:cover;

}


/* OVERLAY CONTENT */

.hero-content{

position:absolute;

top:50%;
left:80px;

transform:translateY(-50%);

color:white;

max-width:500px;

}


.hero-content h1{

font-size:48px;
margin-bottom:10px;

}


.hero-content p{

font-size:18px;
margin-bottom:20px;

}


/* BUTTONS */

.hero-buttons{

display:flex;
gap:12px;

}


.hero-btn{

padding:12px 22px;

border-radius:8px;

text-decoration:none;

font-size:15px;

}


.hero-btn.primary{

background:#f28c28;
color:white;

}


.hero-btn.secondary{

border:1px solid white;
color:white;

}


/* ARROWS */

.slider-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

background:rgba(0,0,0,0.4);

border:none;

color:white;

font-size:24px;

padding:10px 14px;

cursor:pointer;

border-radius:6px;

}


.prev{

left:20px;

}

.next{

right:20px;

}


/* DOTS */

.slider-dots{

position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

display:flex;
gap:8px;

}


.dot{

width:10px;
height:10px;

background:white;

opacity:0.5;

border-radius:50%;

cursor:pointer;

}

.dot.active{

opacity:1;

}






/* SECTION */

/* CATEGORIES SECTION */

.categories-section{

padding:60px 40px;
max-width:1300px;
margin:auto;

}


/* TITLE */

.section-title{

text-align:center;
font-size:34px;
margin-bottom:40px;
font-weight:600;

}


/* FLEXIBLE GRID */

.categories-wrapper{

display:grid;

/* auto responsive grid */

grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));

gap:22px;

}


/* CARD */

.category-card{

display:flex;
align-items:center;
gap:14px;

padding:20px 24px;

border-radius:14px;

background:rgba(255,255,255,0.05);

backdrop-filter:blur(10px);

cursor:pointer;

transition:all 0.3s ease;

font-size:17px;

justify-content:center;

}


/* ICON */

.cat-icon{

width:42px;
height:42px;

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

background:#1e293b;

border-radius:50%;

font-size:18px;

}


/* HOVER */

.category-card:hover{

transform:translateY(-6px);

background:rgba(255,255,255,0.1);

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

}

/* ---------- TABLET ---------- */

@media (max-width:1024px){

.categories-section{
padding:50px 25px;
}

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

.categories-wrapper{
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.category-card{
padding:18px 20px;
font-size:16px;
}

}


/* ---------- MOBILE ---------- */

@media (max-width:768px){

.categories-section{
padding:40px 20px;
}

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

.categories-wrapper{
grid-template-columns:1fr;
gap:16px;
}

.category-card{
padding:16px 18px;
font-size:15px;
gap:10px;
}

.cat-icon{
width:36px;
height:36px;
font-size:16px;
}

}


/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

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

.category-card{
padding:14px 16px;
font-size:14px;
}

.cat-icon{
width:32px;
height:32px;
font-size:14px;
}

}


/* MOVIES */

.movie-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
padding:0 60px;

}

.movie-card{

background:#1e293b;
border-radius:12px;
overflow:hidden;

}

.movie-card img{

width:100%;
height:300px;
object-fit:cover;

}

.movie-info{

padding:15px;

}

.book-btn{

display:inline-block;
margin-top:10px;
background:#f28c28;
padding:10px 16px;
border-radius:6px;
text-decoration:none;
color:white;

}

/* ---------- TABLET ---------- */

@media (max-width:1024px){

.movie-grid{
grid-template-columns:repeat(2,1fr);
padding:0 30px;
gap:25px;
}

.movie-card img{
height:260px;
}

}
/* ---------- MOBILE ---------- */

@media (max-width:768px){

.movie-grid{
grid-template-columns:1fr;
padding:0 20px;
gap:20px;
}

.movie-card img{
height:240px;
}

.movie-info{
padding:14px;
}

.book-btn{
padding:9px 14px;
font-size:14px;
}

}
/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

.movie-card img{
height:210px;
}

.movie-info h3{
font-size:16px;
}

.book-btn{
width:100%;
text-align:center;
}

}


/* EVENTS */

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

.events{
max-width:1200px;
margin:auto;
padding:80px 20px;
}

/* TITLE */

.section-title{
text-align:center;
font-size:32px;
margin-bottom:40px;
}

/* GRID */

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

/* CARD */

.event-card{
background:#1e293b;
border-radius:12px;
overflow:hidden;
transition:0.3s;
display:flex;
flex-direction:column;
height:100%;
}

.event-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 35px rgba(0,0,0,0.5);
}

/* IMAGE */

.event-card img{
width:100%;
height:180px;
object-fit:cover;
}

/* INFO */

.event-info{
padding:18px;
flex:1;
display:flex;
flex-direction:column;
}

.event-info h3{
font-size:18px;
margin-bottom:8px;
}

.event-location{
font-size:14px;
color:#cbd5e1;
margin-bottom:6px;
}

.event-extra{
font-size:13px;
color:#94a3b8;
margin-bottom:10px;
}

/* TAG */

.event-tag{
display:inline-block;
font-size:12px;
background:#0f172a;
color:#ff8c1a;
padding:4px 8px;
border-radius:5px;
margin-bottom:12px;
}

/* BUTTON */

.book-btn{
margin-top:auto;
display:block;
text-align:center;
padding:10px;
background:#ff8c1a;
color:white;
text-decoration:none;
border-radius:6px;
font-size:14px;
transition:0.3s;
}

.book-btn:hover{
background:#ffa733;
}

/* ---------- TABLET ---------- */

@media (max-width:1024px){

.event-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:768px){

.events{
padding:60px 20px;
}

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

.event-grid{
grid-template-columns:1fr;
gap:20px;
max-width:420px;
margin:auto;
}

.event-card img{
height:200px;
}

.book-btn{
padding:12px;
font-size:15px;
}

}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

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

.event-card img{
height:180px;
}

}


.upcoming-section{
padding:80px 60px;
background:var(--bg);
}

.section-title{
font-size:32px;
font-weight:700;
color:var(--text);
margin-bottom:40px;
}

.upcoming-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.upcoming-card{
background:var(--card);
border-radius:14px;
overflow:hidden;
transition:0.4s;
box-shadow:0px 10px 30px rgba(0,0,0,0.15);
}

.upcoming-card:hover{
transform:translateY(-8px);
}

.poster{
position:relative;
height:320px;
overflow:hidden;
}

.poster img{
width:100%;
height:100%;
object-fit:cover;
}

.release-badge{
position:absolute;
bottom:10px;
left:10px;
background:#ff7a00;
color:white;
padding:6px 12px;
font-size:13px;
border-radius:6px;
}

.movie-info{
padding:18px;
}

.movie-info h3{
color:var(--text);
font-size:18px;
margin-bottom:6px;
}

.movie-info p{
font-size:14px;
color:var(--secondary-text);
margin-bottom:14px;
}

.remind-btn{
width:100%;
padding:10px;
border:none;
border-radius:8px;
background:#ff7a00;
color:white;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.remind-btn:hover{
background:#ff9a2a;
}

.events-section{
padding:70px 60px;
background:var(--bg);
}

.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}

.section-header h2{
font-size:28px;
color:var(--text);
}

.section-header a{
color:#ff4d6d;
font-weight:600;
text-decoration:none;
}

.events-slider{
display:flex;
gap:25px;
overflow-x:auto;
scrollbar-width:none;
}

.events-slider::-webkit-scrollbar{
display:none;
}

.event-card{
width:220px;
flex-shrink:0;
}

.event-img{
position:relative;
height:300px;
border-radius:10px;
overflow:hidden;
}

.event-img img{
width:100%;
height:100%;
object-fit:cover;
}

.promo{
position:absolute;
top:10px;
right:10px;
background:#ff4d4d;
color:white;
font-size:11px;
padding:4px 8px;
border-radius:4px;
}

.event-date{
position:absolute;
bottom:0;
left:0;
width:100%;
background:rgba(0,0,0,0.85);
color:white;
font-size:14px;
padding:8px;
}

.event-info{
margin-top:10px;
}

.event-info h3{
font-size:16px;
color:var(--text);
margin-bottom:5px;
}

.event-info p{
font-size:14px;
color:var(--secondary-text);
}

/* SECTION */

.tt-laugh-section{
padding:80px 60px;
background:var(--bg);
text-align:center;
}

/* TITLE */

.tt-laugh-title{
font-size:34px;
font-weight:700;
color:var(--text);
margin-bottom:50px;
}

/* GRID */

.tt-laugh-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

/* CARD */

.tt-laugh-card{
background:var(--card);
border-radius:16px;
overflow:hidden;
transition:0.3s;
}

.tt-laugh-card:hover{
transform:translateY(-8px);
}

/* IMAGE */

.tt-laugh-img{
position:relative;
height:250px;
overflow:hidden;
}

.tt-laugh-img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* DATE BADGE */

.tt-laugh-date{
position:absolute;
bottom:12px;
left:12px;
background:#ff7a00;
color:#fff;
padding:6px 12px;
border-radius:6px;
font-size:13px;
}

/* INFO */

.tt-laugh-info{
padding:20px;
text-align:left;
}

.tt-laugh-info h3{
font-size:18px;
color:var(--text);
margin-bottom:6px;
}

.tt-laugh-info p{
font-size:14px;
color:var(--secondary-text);
}

/* ---------- TABLET ---------- */

@media (max-width:1024px){

.tt-laugh-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.tt-laugh-section{
padding:70px 30px;
}

.tt-laugh-img{
height:230px;
}

}
/* ---------- MOBILE ---------- */

@media (max-width:768px){

.tt-laugh-section{
padding:60px 20px;
}

.tt-laugh-title{
font-size:26px;
margin-bottom:35px;
}

.tt-laugh-grid{
grid-template-columns:1fr;
gap:20px;
max-width:420px;
margin:auto;
}

.tt-laugh-card{
width:100%;
}

.tt-laugh-img{
height:210px;
}

.tt-laugh-info{
padding:18px;
}

.tt-laugh-info h3{
font-size:17px;
}

.tt-laugh-info p{
font-size:13px;
}

}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

.tt-laugh-title{
font-size:22px;
}

.tt-laugh-img{
height:190px;
}

.tt-laugh-info{
padding:16px;
}

}


/* HOST SECTION */

.tt-host-section{
padding:90px 60px;
background:var(--bg);
text-align:center;
}

/* TITLE */

.tt-host-title{
font-size:36px;
font-weight:700;
color:var(--text);
margin-bottom:12px;
}

/* SUBTITLE */

.tt-host-subtitle{
max-width:750px;
margin:auto;
font-size:16px;
color:var(--secondary-text);
margin-bottom:60px;
line-height:1.6;
}

/* GRID */

.tt-host-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

/* CARD */

.tt-host-card{
background:var(--card);
padding:35px 25px;
border-radius:16px;
transition:0.3s;
}

.tt-host-card:hover{
transform:translateY(-8px);
}

/* ICON */

.tt-host-icon{
font-size:38px;
margin-bottom:18px;
}

/* CARD TEXT */

.tt-host-card h3{
color:var(--text);
font-size:20px;
margin-bottom:10px;
}

.tt-host-card p{
font-size:14px;
color:var(--secondary-text);
line-height:1.6;
}

/* BUTTON */

.tt-host-btn-area{
margin-top:50px;
}

.tt-host-btn{
background:#ff7a00;
color:white;
padding:14px 32px;
font-size:16px;
font-weight:600;
border-radius:8px;
text-decoration:none;
transition:0.3s;
}

.tt-host-btn:hover{
background:#ff9333;
}
/* ---------- TABLET ---------- */

@media (max-width:1024px){

.tt-host-section{
padding:80px 30px;
}

.tt-host-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.tt-host-title{
font-size:32px;
}

}

/* ---------- MOBILE ---------- */

@media (max-width:768px){

.tt-host-section{
padding:60px 20px;
}

.tt-host-title{
font-size:26px;
}

.tt-host-subtitle{
font-size:14px;
margin-bottom:40px;
}

.tt-host-grid{
grid-template-columns:1fr;
gap:20px;
max-width:420px;
margin:auto;
}

.tt-host-card{
padding:28px 22px;
text-align:center;
}

.tt-host-icon{
font-size:34px;
}

.tt-host-card h3{
font-size:18px;
}

.tt-host-card p{
font-size:13px;
}

.tt-host-btn{
display:block;
width:100%;
max-width:320px;
margin:auto;
padding:12px;
font-size:15px;
}

}
/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

.tt-host-title{
font-size:22px;
}

.tt-host-icon{
font-size:30px;
}

.tt-host-card{
padding:24px 18px;
}

.tt-host-btn{
font-size:14px;
}

}

/* -------------  OFFERS SECTION ------------ */

.tt-offers-section{
padding:90px 60px;
background:var(--bg);
text-align:center;
}

.tt-offers-title{
font-size:36px;
font-weight:700;
color:var(--text);
margin-bottom:50px;
}

/* GRID */

.tt-offers-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

/* OFFER CARD */

.tt-offer-card{
background:linear-gradient(135deg,#ff7a00,#ff3d3d);
border-radius:16px;
padding:30px;
color:white;
text-align:left;
transition:0.3s;
}

.tt-offer-card:hover{
transform:translateY(-8px);
}

/* CONTENT */

.tt-offer-content h3{
font-size:22px;
margin-bottom:10px;
}

.tt-offer-content p{
font-size:14px;
opacity:0.9;
margin-bottom:20px;
}

/* BOTTOM AREA */

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

/* CODE */

.tt-offer-code{
background:white;
color:#ff3d3d;
padding:6px 12px;
border-radius:6px;
font-size:13px;
font-weight:600;
}

/* BUTTON */

.tt-offer-btn{
background:white;
color:#ff3d3d;
border:none;
padding:8px 16px;
border-radius:6px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.tt-offer-btn:hover{
background:#f1f1f1;
}

/* ---------- TABLET ---------- */

@media (max-width:1024px){

.tt-offers-section{
padding:80px 30px;
}

.tt-offers-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}

.tt-offers-title{
font-size:32px;
}

}
/* ---------- MOBILE ---------- */

@media (max-width:768px){

.tt-offers-section{
padding:60px 20px;
}

.tt-offers-title{
font-size:26px;
margin-bottom:35px;
}

.tt-offers-grid{
grid-template-columns:1fr;
gap:20px;
max-width:420px;
margin:auto;
}

.tt-offer-card{
padding:24px 20px;
}

.tt-offer-content h3{
font-size:18px;
}

.tt-offer-content p{
font-size:13px;
}

.tt-offer-bottom{
flex-direction:column;
align-items:flex-start;
gap:12px;
}

.tt-offer-code{
font-size:12px;
}

.tt-offer-btn{
width:100%;
padding:10px;
font-size:14px;
}

}
/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

.tt-offers-title{
font-size:22px;
}

.tt-offer-card{
padding:20px 18px;
}

.tt-offer-content h3{
font-size:17px;
}

}
@media (hover:none){

.tt-offer-card:active{
transform:scale(0.97);
box-shadow:0 10px 25px rgba(0,0,0,0.35);
}

}


/* FOOTER */

/* FOOTER */

.footer{
background:#020617;
padding:40px 0 20px;
border-top:3px solid #ff8c1a;
}

/* CONTAINER */

.footer-container{
width:1200px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
align-items:flex-start;
padding-bottom:20px;
border-bottom:1px solid rgba(255,255,255,0.1);
}

/* LOGO */

.footer-logo{
width:150px;
border-radius:10px;
margin-bottom:10px;
}

/* DESCRIPTION */

.footer-desc{
font-size:14px;
color:#cbd5e1;
line-height:22px;
max-width:320px;
}

/* SOCIAL */

.footer-col h4{
margin-bottom:12px;
font-size:16px;
}

.social-icons{
display:flex;
gap:10px;
}

.social-icons a{
  text-decoration: none;
width:36px;
height:36px;
background:#0f172a;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
color:white;
transition:0.3s;
}

.social-icons a:hover{
background:#ff8c1a;
transform:translateY(-3px);
}

/* LINKS */

.footer-links{
display:flex;
flex-direction:column;
gap:10px;
}

.footer-links a{
text-decoration:none;
color:#cbd5e1;
font-size:14px;
transition:0.3s;
}

.footer-links a:hover{
color:#ff8c1a;
}

/* BOTTOM */

.footer-bottom{
text-align:center;
padding-top:15px;
font-size:14px;
color:#cbd5e1;
}

.dev-credit{
margin-top:5px;
}

.acp-box{
background:#ff8c1a;
color:white;
padding:4px 10px;
border-radius:6px;
text-decoration:none;
font-weight:600;
margin-left:5px;
}

/* ---------- TABLET ---------- */

@media (max-width:1024px){

.footer-container{
width:95%;
grid-template-columns:1fr 1fr;
gap:30px;
}

.footer-desc{
max-width:100%;
}

}
/* ---------- MOBILE ---------- */

@media (max-width:768px){

.footer{
padding:40px 20px 20px;
}

.footer-container{
width:100%;
grid-template-columns:1fr;
gap:25px;
text-align:center;
}

/* LOGO CENTER */

.footer-logo{
margin:auto;
margin-bottom:10px;
}

/* DESCRIPTION */

.footer-desc{
max-width:100%;
margin:auto;
}

/* SOCIAL */

.social-icons{
justify-content:center;
}

/* LINKS */

.footer-links{
align-items:center;
}

.footer-links a{
font-size:14px;
}

/* BOTTOM */

.footer-bottom{
font-size:13px;
line-height:1.6;
}

}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

.footer-logo{
width:130px;
}

.footer-desc{
font-size:13px;
line-height:20px;
}

.footer-col h4{
font-size:15px;
}

.social-icons a{
width:32px;
height:32px;
}

.footer-links a{
font-size:13px;
}

}





/* -------- MOVIE DETAILS  --------  */

.movie-hero{

height:520px;

background-size:cover;
background-position:center;

position:relative;

}

.hero-overlay{

background:linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0.3));

height:100%;

display:flex;
align-items:center;

}

.hero-container{

display:flex;

gap:40px;

max-width:1200px;

margin:auto;

color:white;

}

.hero-poster img{

width:220px;

border-radius:10px;

}

.hero-info h1{

font-size:36px;

margin-bottom:15px;

}

.rating-box{

background:black;

padding:10px 14px;

border-radius:8px;

display:inline-block;

margin-bottom:15px;

}

.ticket-btn{

background:#f28c28;

padding:12px 24px;

color:white;

border-radius:8px;

text-decoration:none;

display:inline-block;

margin-top:15px;

}


/* LIGHT THEME QUICK FIX */

body.light-theme{
background:#f8fafc;
color:#0f172a;
}

/* HEADER */
body.light-theme .header{
background:white;
}

/* NAV TEXT */
body.light-theme .nav-menu a{
color:#475569;
}

/* SEARCH */
body.light-theme .search-container input{
background:white;
color:#111;
border:1px solid #e2e8f0;
}

/* CITY INPUT */
body.light-theme .city-container input{
background:white;
color:#111;
border:1px solid #e2e8f0;
}

/* CARDS */
body.light-theme .movie-card,
body.light-theme .event-card,
body.light-theme .category-card,
body.light-theme .theatre-card{
background:white;
color:#111;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* CATEGORY ICON */
body.light-theme .cat-icon{
background:#f1f5f9;
}

/* FOOTER */
body.light-theme .footer{
background:#0f172a;
color:white;
}

/* BUTTON */
body.light-theme .book-btn{
background:#ff8c1a;
color:white;
}



/* ===============================
   GLOBAL RESPONSIVE FIX
   =============================== */

@media (max-width:768px){

/* CONTAINER FIX */

.top-header,
.nav-menu,
.events,
.event-container,
.movie-details-container,
.footer-container,
.categories-section,
.events-list,
.featured-events,
.cast-section,
.crew-section,
.reviews-section,
.about-movie,
.things-know,
.review-wrapper{
width:95%;
margin:auto;
}

/* HEADER */

.top-header{
flex-direction:column;
gap:10px;
}

.search-container{
width:100%;
}

.city-container input{
width:100%;
}

/* NAV */

.nav-menu{
overflow-x:auto;
gap:18px;
padding:12px;
}

/* HERO */

.hero-slider{
height:320px;
}

.hero-content{
left:20px;
right:20px;
max-width:100%;
}

.hero-content h1{
font-size:26px;
}

.hero-content p{
font-size:14px;
}

/* MOVIE GRID */

.movie-grid{
grid-template-columns:repeat(2,1fr);
gap:16px;
padding:0 10px;
}

/* EVENT GRID */

.event-grid,
.events-grid,
.release-grid{
grid-template-columns:repeat(2,1fr);
gap:16px;
}

/* MOVIE DETAILS */

.movie-details-container{
flex-direction:column;
align-items:center;
text-align:center;
}

.movie-poster img{
width:220px;
height:auto;
}

/* EVENT PAGE */

.event-container{
flex-direction:column;
}

.event-book{
position:relative;
top:0;
}

/* CAST */

.cast-grid{
justify-content:center;
gap:20px;
}

/* THINGS TO KNOW */

.things-grid{
grid-template-columns:1fr;
}

/* SHOWTIMES */

.showtimes-container{
width:95%;
}

.date-row{
overflow-x:auto;
}

/* SEAT SELECTION */

.seat-wrapper{
width:95%;
overflow-x:auto;
}

/* REVIEW PAGE */

.review-grid{
grid-template-columns:1fr;
}

/* FOOTER */

.footer-container{
flex-direction:column;
gap:30px;
text-align:center;
}

.social-icons{
justify-content:center;
}

}

/* ===============================
   SMALL PHONE FIX
   =============================== */

@media (max-width:480px){

.hero-slider{
height:260px;
}

.hero-content h1{
font-size:22px;
}

.hero-content p{
font-size:13px;
}

.movie-grid,
.event-grid,
.events-grid{
grid-template-columns:1fr;
}

/* SEATS */

.seat{
width:28px;
height:28px;
font-size:10px;
}

.row-name{
font-size:12px;
}

.screen{
width:200px;
font-size:12px;
}

/* BUTTON */

.book-btn{
padding:8px 12px;
font-size:12px;
}

}