/* =========================
GOTHAM FONT
========================= */

@font-face{
font-family:"Gotham";
src:url("fonts/Gotham-Medium.ttf") format("truetype");
font-weight:500;
font-style:normal;
}

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

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"Gotham",sans-serif;
overflow-x:hidden;
}

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

.header{
position:fixed;
top:0;
width:100%;
height:80px;

/* ✅ change this line only */
background:rgb(255, 255, 255);

display:flex;
justify-content:flex-end;
align-items:center;
padding:0 30px;
z-index:1000;
border-top:4px solid #6b3b2a;
}

/* NAV */

.nav ul{
list-style:none;
display:flex;
gap:35px;
}

.nav a{
text-decoration:none;
color:#000;
font-size:20px;
stroke: #000;
stroke-linecap: butt;
stroke-width: 15%;
transition:.3s;
}

.nav a:hover{
color:#ff6a00;
}

/* LOGO */

.logo{
position:absolute;
left:15%;
top:140%;
transform:translate(-50%,-50%);
z-index:2000;
}

.logo img{
height:170px;
}

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

.hero{
position:relative;
width:100%;
height:100%;
overflow:hidden;

/* ✅ FIX GAP */
margin-top:15px;

/* keep thin separator */
border-bottom:5px solid rgb(255, 254, 254);
}

.hero-slider{
position:relative;
width:100%;
height:100%;
overflow:hidden;
}

.hero-track{
display:flex;
height:100%;
transition:transform .6s cubic-bezier(.77,0,.18,1);
}

.hero-track a{
min-width:100%;
height:100%;
display:block;
}

.hero-track img{
width:100%;
height:100%;
object-fit:cover;
cursor:pointer;
}

/* ARROWS */

.hero-prev,
.hero-next{

position:absolute;
top:50%;
transform:translateY(-50%);
font-size:45px;
color:white;
border:none;
z-index:50;
transition:.3s;

}

.hero-prev:hover,
.hero-next:hover{
background:rgba(0, 0, 0, 0);
}

.hero-prev{ left:20px; }
.hero-next{ right:20px; }

/* =========================
SERVICE PLACEHOLDER SECTIONS
========================= */

.service-section{
height:800px;
width:100%;
background:#f5f5f5;
border-top:1px solid #ddd;
}

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

.about-section{

position:relative;
width:100%;
min-height:500px;
display:flex;
align-items:center;

margin-top:0px;


/* 🔥 REDUCED GAP */
padding:3px 1% 1px; /* top right/left bottom */

background-image:url("Falcon\ website-05.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;

overflow:hidden;

}

/* OVERLAY */

.about-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(219, 219, 219, 0.027);

z-index:1;

}

/* CONTAINER */

.about-container{

position:relative;
z-index:2;

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

gap:100px;
width:100%;

}

/* IMAGE */
.about-image{
flex:1;
display:flex;
justify-content:center;
}

.about-image img{

width:750px;
animation:floatImage 6s ease-in-out infinite;

}

/* FLOAT ANIMATION */

@keyframes floatImage{

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

}

/* CONTENT */
.about-content{
flex:1;
max-width:820px;
}

.about-heading{
position: relative;
left: -25%;
font-size:48px;
margin-bottom:30px;
}

.about-heading span{
color:#ff8400;
}

.about-content p{
font-size:18px;
line-height:1.8;
width: 820px;
position: relative;
left: -25%;
margin-bottom:25px;
color:#000;
}

/* =========================
SCROLL ANIMATION
========================= */

.reveal-left,
.reveal-right{

opacity:0;
transition:all 1s ease;

}

.reveal-left{
transform:translateX(-80px);
}

.reveal-right{
transform:translateX(80px);
}

.reveal-left.active,
.reveal-right.active{

opacity:1;
transform:translateX(0);

}

/* GENERAL REVEAL */

.reveal{
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

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

.films-section{

padding:120px 8%;
background:#f5f5f5;

background-image:radial-gradient(#d9d9d9 1px,transparent 1px);
background-size:18px 18px;

text-align:center;

}

/* TITLE */

.films-title h2{

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

}

.films-title span{
color:#ff6a00;
}

.films-title p{
color:#666;
margin-bottom:70px;
}

/* GRID */

.films-container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;

max-width:1300px;
margin:auto;

}

/* CARD */

.film-card{

cursor:pointer;

background:rgba(255,255,255,0.6);
backdrop-filter:blur(8px);

padding:40px 30px;

border-radius:16px;

transition:.4s;

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

}

/* CARD HOVER */

.film-card:hover{

transform:translateY(-12px) scale(1.03);

box-shadow:
0 20px 40px rgba(0,0,0,0.12),
0 0 30px rgba(255,106,0,0.35);

}

/* TITLE */

.film-card h3{

display:inline-block;

padding:10px 26px;

border-radius:40px;

border:1px solid #ddd;

font-size:13px;

letter-spacing:1px;

color:#ff6a00;

margin-bottom:20px;

background:white;

}

/* TEXT */

.film-card p{

font-size:14px;
line-height:1.7;
color:#444;

}

/* =========================
SERVICE DETAIL EXPAND
========================= */

/* =========================
CLEAN SERVICE DETAIL UI
========================= */

.detail-content{

background:white;
padding:60px 80px;
border-radius:16px;

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

max-width:1200px;
margin:auto;

}

/* TITLE */

#detail-title{

text-align:center;
font-size:32px;
margin-bottom:50px;
font-weight:600;

}

/* GRID LAYOUT */

.detail-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;

}

/* BLOCK */

.detail-grid > div{

display:flex;
flex-direction:column;
gap:25px;

}

/* HEADINGS */

.detail-grid h4{

font-size:14px;
letter-spacing:1px;
text-transform:uppercase;

color:#ff6a00;

margin-bottom:10px;

}

/* ORANGE POINTER LINE */

.detail-grid h4::before{

content:"";
position:absolute;
left:0;
top:6px;

width:5px;
height:18px;

background:#ff6a00;
border-radius:2px;

}

/* TEXT */

.detail-grid p{

font-size:15px;
line-height:1.7;
color:#222;

}


/* LIST */

.detail-grid ul{

padding-left:18px;

}
.detail-grid li{
font-size:14px;
margin-bottom:6px;
}

/* VIDEO */

.detail-video{
margin-top:60px;
text-align:center;
}

.detail-video video{
width:100%;
max-width:850px;
border-radius:12px;
}

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

@media(max-width:1000px){

.detail-grid{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:600px){

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

}

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

@media(max-width:1100px){

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

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

}

@media(max-width:700px){

.films-container{
grid-template-columns:1fr;
}

.detail-grid{

display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:80px;

margin-top:40px;
text-align:left;

}

.about-container{
flex-direction:column;
text-align:center;
}

.about-image img{
width:90%;
}

}
.service-detail{

max-height:0;
opacity:0;
overflow:hidden;

transition:all .5s ease;

margin-top:0;

}

.service-detail.active{

max-height:2000px;
opacity:1;
margin-top:60px;

}
/* =========================
CONTACT SECTION
========================= */

.contact-section{

padding:120px 8%;
background:#f5f5f5;

background-image:radial-gradient(#d9d9d9 1px, transparent 1px);
background-size:18px 18px;

}

/* CONTAINER */

.contact-container{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;

max-width:1300px;
margin:auto;

align-items:center;

}

/* LEFT SIDE */

.contact-info h2{

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

}

.contact-info span{
color:#ff6a00;
}

.contact-info p{

font-size:16px;
line-height:1.7;
color:#444;
margin-bottom:20px;

}

.contact-details p{

margin-bottom:15px;
font-size:15px;

}

/* MAP */

.contact-map{

width:100%;
height:400px;

border-radius:16px;
overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,0.1);

}

/* RESPONSIVE */

@media(max-width:900px){

.contact-container{
grid-template-columns:1fr;
}

.contact-map{
height:300px;
}

}

/* FIX NAV ACTIVE */
.nav a.active{
color:#ff6a00;
}

/* REMOVE EXTRA GAP ABOVE ABOUT */

/* =========================
SERVICE CONTENT (NEW FIX)
========================= */

/* hide all individual service blocks */
.service-content{
display:none;
opacity:0;
transform:translateY(30px);
transition:all .5s ease;
}

/* show active one */
.service-content.active{
display:block;
opacity:1;
transform:translateY(0);
}
/* =========================
REALISTIC BULB GLOW
========================= */

.bulb{
position:relative;
z-index:2;
transition:all .4s ease;
}

/* GLOW ACTIVE */
.bulb.glow{

animation:
bulbFlickerReal 1.5s ease forwards,
bulbPulse 3s ease-in-out infinite 1.5s;

/* core glow */
filter:
drop-shadow(0 0 8px rgba(255,140,0,0.5))
drop-shadow(0 0 18px rgba(255,140,0,0.6))
drop-shadow(0 0 35px rgba(255,120,0,0.6))
drop-shadow(0 0 70px rgba(255,100,0,0.5));
}

/* 🔥 BACKGROUND LIGHT SPILL */
.bulb.glow::after{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

width:220px;
height:220px;

background:radial-gradient(circle,
rgba(255,140,0,0.35) 0%,
rgba(255,140,0,0.15) 40%,
transparent 70%);

filter:blur(30px);
z-index:-1;
opacity:0.8;

animation: lightSpread 3s ease-in-out infinite;
}

/* ⚡ REALISTIC FLICKER (NOT LINEAR) */
@keyframes bulbFlickerReal{

0%{opacity:0.2;}
5%{opacity:1;}
10%{opacity:0.3;}
15%{opacity:1;}
22%{opacity:0.5;}
30%{opacity:1;}
38%{opacity:0.6;}
45%{opacity:1;}
60%{opacity:0.85;}
75%{opacity:1;}
100%{opacity:1;}
}

/* ✨ SOFT BREATHING LIGHT */
@keyframes bulbPulse{

0%,100%{
filter:
drop-shadow(0 0 10px rgba(255,140,0,0.5))
drop-shadow(0 0 25px rgba(255,120,0,0.6))
drop-shadow(0 0 50px rgba(255,100,0,0.5));
}

50%{
filter:
drop-shadow(0 0 18px rgba(255,160,0,0.7))
drop-shadow(0 0 40px rgba(255,130,0,0.7))
drop-shadow(0 0 80px rgba(255,110,0,0.6));
}
}

/* 🌕 LIGHT SPREAD BREATH */
@keyframes lightSpread{

0%,100%{
opacity:0.6;
transform:translate(-50%,-50%) scale(1);
}

50%{
opacity:1;
transform:translate(-50%,-50%) scale(1.2);
}
}
/* =========================
CINEMATIC LIGHT SYSTEM
========================= */

/* 🌑 DARK AMBIENT BASE */
.about-section{
position:relative;
overflow:hidden;
}

/* 🌕 AMBIENT LIGHT LAYER */
.about-section::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:radial-gradient(circle at center,
rgba(255,140,0,0.15),
transparent 60%);

opacity:0;
transition:opacity .6s ease;

pointer-events:none;
z-index:1;
}

/* ACTIVE LIGHT ON SECTION */
.about-section.active-light::before{
opacity:1;
}

/* ✨ LIGHT AFFECTS TEXT */
.about-section.active-light .about-content{
transition:all .6s ease;
color:#111;
text-shadow:0 0 10px rgba(255,140,0,0.2);
}

/* 💡 ENHANCED BULB GLOW */
.bulb.glow{
filter:
drop-shadow(0 0 15px rgba(255,150,0,0.7))
drop-shadow(0 0 35px rgba(255,130,0,0.7))
drop-shadow(0 0 70px rgba(255,110,0,0.6))
drop-shadow(0 0 120px rgba(255,90,0,0.5));
}

/* 🌊 SUBTLE LIGHT WAVE */
.about-section.active-light::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:radial-gradient(circle at var(--x,50%) var(--y,50%),
rgba(255,140,0,0.2),
transparent 70%);

opacity:0.6;
transition:all .2s linear;

pointer-events:none;
z-index:1;
}