html {
max-width: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #05010f;
color: white;
cursor: none;
/* Humne yahan se overflow-x hata diya hai taaki double scrollbar na bane */
}
@font-face {
font-family: 'best';
src: url('fonts/best.ttf') format('truetype');
}
/* =========================
PREMIUM NAVBAR
========================= */
.navbar{
width: 100%;
padding: 20px 7%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background:
linear-gradient(
to right,
rgba(5,1,15,0.95),
rgba(25,10,50,0.85)
);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* =========================
LEFT LOGO AREA
========================= */
.logo-area{
display: flex;
align-items: center;
gap: 18px;
}
/* CIRCLE LOGO */
.nav-logo{
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgb(189, 166, 15);
transition: 0.4s;
}
.nav-logo:hover{
transform: scale(1.08);
box-shadow:
0 0 30px rgba(139,92,246,0.8),
0 0 60px rgba(139,92,246,0.5);
}
/* LOGO TEXT */
.logo-text{
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 2px;
font-family: 'Teko', sans-serif;
color: #d4af37;
}
/* =========================
CENTER GLASS NAV
========================= */
.nav-center{
position: absolute;
left: 60%;
transform: translateX(-50%);
padding: 18px 45px;
border-radius: 60px;
background:
rgba(255,255,255,0.05);
backdrop-filter: blur(20px);
border: 1.5px solid rgba(255,255,255,0.22);
box-shadow:
inset 0 0 15px rgba(255,255,255,0.06),
0 0 30px rgba(139,92,246,0.25);
}
/* WATER BORDER FLOW */
.nav-center{
position: absolute;
overflow: hidden;
}
/* FLOW ONLY ON BORDER */
.nav-center::before{
content: '';
position: absolute;
inset: 0;
border-radius: 60px;
padding: 1.5px;
background:
linear-gradient(
90deg,
transparent,
#926cea,
transparent
);
background-size: 200% 100%;
animation: borderFlow 4s linear infinite;
/* SHOW ONLY BORDER */
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* FLOW ANIMATION */
@keyframes borderFlow{
0%{
background-position: -200% 0;
}
100%{
background-position: 200% 0;
}
}
/* NAV LINKS */
.nav-links{
display: flex;
align-items: center;
gap: 45px;
list-style: none;
}
.nav-links a{
text-decoration: none;
color: white;
font-size: 1.08rem;
font-weight: 500;
transition: 0.3s;
position: relative;
}
/* HOVER */
.nav-links a:hover{
color: #d4af37;
text-shadow:
0 0 12px rgba(212,175,55,0.8);
}
/* UNDERLINE */
.nav-links a::after{
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 0%;
height: 2px;
background: #d4af37;
transition: 0.4s;
}
.nav-links a:hover::after{
width: 100%;
}
/* =========================
BUTTON
========================= */
.talk-btn{
padding: 14px 34px;
border-radius: 14px;
border: 1px solid rgba(139,92,246,0.8);
background: transparent;
color: white;
font-size: 1rem;
cursor: pointer;
transition: 0.4s;
box-shadow:
0 0 20px rgba(139,92,246,0.3);
}
.talk-btn:hover{
background: #8b5cf6;
transform: translateY(-3px);
box-shadow:
0 0 30px rgba(139,92,246,0.7);
}
/* =========================
HERO SECTION
========================= */
.hero{
width: 100%;
min-height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 70px 8% 0;
position: relative;
overflow: hidden;
}
/* Background Glow */
.hero::before{
content: '';
position: absolute;
width: 500px;
height: 500px;
background: #8b5cf6;
border-radius: 50%;
filter: blur(150px);
top: -100px;
right: -100px;
opacity: 0.4;
}
.hero::after{
content: '';
position: absolute;
width: 400px;
height: 400px;
background: #5b21b6;
border-radius: 50%;
filter: blur(150px);
bottom: -100px;
left: -100px;
opacity: 0.3;
}
/* LEFT SIDE */
.hero-left{
width: 50%;
z-index: 2;
}
.welcome-text{
color: #8b5cf6;
font-family: 'best';
letter-spacing: 6px;
font-size: 4.9rem;
-webkit-text-stroke: 0.8px #8b5cf6;
line-height: 0.3;
margin-bottom: 30px;
text-shadow:
0 0 10px rgba(212, 175, 55, 0),
0 0 25px rgba(139,92,246,0.5),
0 0 45px rgba(212,175,55,0.35);
}
.hero-left h1{
font-size: 8rem;
margin-top: 2px;
line-height: 100px;
color: #d4af37;
font-family: 'Teko', sans-serif;
text-shadow: 0 0 20px rgba(212,175,55,0.5);
}
@media(max-width:768px){
.hero-left h1{
font-size:3rem;
line-height:1;
}
.welcome-text{
font-size:2rem;
line-height:1;
}
.description{
font-size:0.9rem;
line-height:1.7;
}
}
.description{
margin-top: 05px;
width: 100%;
color: rgba(255, 255, 255, 0.866);
line-height: 30px;
font-size: 1.25rem;
}
/* HERO BUTTONS */
.hero-buttons{
margin-top: 25px;
display: flex;
gap: 20px;
}
.work-btn,
.connect-btn{
padding: 14px 32px;
border-radius: 10px;
border: none;
cursor: pointer;
font-size: 1rem;
transition: 0.3s;
}
.work-btn{
background: #8b5cf6;
color: white;
box-shadow: 0 0 20px rgba(139,92,246,0.5);
}
.work-btn:hover{
transform: translateY(-5px);
box-shadow: 0 0 35px #8b5cf6;
}
.connect-btn{
background: transparent;
border: 1px solid #d4af37;
color: #d4af37;
}
.connect-btn:hover{
background: #d4af37;
color: black;
transform: translateY(-5px);
}
/* RIGHT SIDE */
.hero-right{
width: 45%;
display: flex;
justify-content: center;
position: relative;
z-index: 2;
}
.hero-right img{
width: 930px;
filter: drop-shadow(0 0 40px rgba(139,92,246,0.8));
animation: floatLogo 4s ease-in-out infinite;
}
/* FLOAT ANIMATION */
@keyframes floatLogo{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-20px);
}
100%{
transform: translateY(0px);
}
}
/* =========================
ABOUT SECTION
========================= */
.about{
width: 100%;
min-height: 100vh;
padding: 100px 8%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 80px;
position: relative;
}
/* LEFT IMAGE */
.about-image{
width: 40%;
display: flex;
justify-content: center;
}
.about-image img{
width: 550px;
border-radius: 30px;
border: 2px solid rgba(139,92,246,0.4);
box-shadow:
0 0 10px rgba(139,92,246,0.5),
0 0 60px rgba(139,92,246,0.3);
transition: 0.5s;
}
.about-image img:hover{
transform: scale(1.03);
box-shadow:
0 0 40px rgba(139,92,246,0.8),
0 0 80px rgba(139,92,246,0.5);
}
/* RIGHT CONTENT */
.about-content{
width: 55%;
}
.section-subtitle{
color: #8b5cf6;
letter-spacing: 3px;
text-align: center;
margin-bottom: 30px;
font-family: 'best';
font-size: 4.9rem;
-webkit-text-stroke: 0.8px #8b5cf6;
line-height: 0.5;
text-shadow:
0 0 10px rgba(212, 175, 55, 0),
0 0 25px rgba(139,92,246,0.5),
0 0 45px rgba(212,175,55,0.35);
}
.section-subtitle::before{
right: 105%;
}
.section-subtitle::after{
left: 105%;
transform: rotate(180deg);
}
.about-content h2{
font-size: 3.5rem;
color: #d4af37;
font-family: 'Teko', sans-serif;
line-height: 60px;
margin-bottom: 25px;
text-shadow:
0 0 10px rgba(212,175,55,0.4);
}
.about-text{
color: rgba(255,255,255,0.7);
line-height: 32px;
margin-bottom: 40px;
}
/* CARDS */
.about-cards{
display: flex;
gap: 20px;
}
.card{
flex: 1;
padding: 30px 20px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
border-radius: 20px;
text-align: center;
transition: 0.4s;
box-shadow:
0 0 20px rgba(139,92,246,0.1);
}
.card:hover{
transform: translateY(-10px);
border-color: #8b5cf6;
box-shadow:
0 0 30px rgba(139,92,246,0.4);
}
.card h3{
font-size: 2rem;
color: #d4af37;
margin-bottom: 10px;
}
.card p{
color: rgba(255,255,255,0.7);
}
.skills{
scroll-margin-top: 140px;
}
/* =========================
WORK SECTION
========================= */
.work{
width: 100%;
min-height: auto;
padding: 80px 8% 10px;
}
/* HEADING */
.work-heading{
text-align: center;
margin-bottom: 30px;
}
.work-heading h2{
font-size: 3.5rem;
font-family: 'Teko', sans-serif;
color: #d4af37;
margin-top: 20px;
text-shadow:
0 0 10px rgba(212,175,55,0.4);
}
/* GALLERY */
.work-gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
/* CARD */
.work-card{
position: relative;
overflow: hidden;
border-radius: 25px;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.08);
transition: 0.5s;
box-shadow:
0 0 20px rgba(139,92,246,0.1);
}
.work-card:hover{
transform: translateY(-10px);
box-shadow:
0 0 40px rgba(139,92,246,0.5);
}
/* IMAGE */
.work-card img{
width: 100%;
height: 500px;
object-fit: cover;
transition: 0.5s;
}
.work-card:hover img{
transform: scale(1.1);
}
/* OVERLAY */
.work-overlay{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
background:
linear-gradient(
transparent,
rgba(0,0,0,0.95)
);
transform: translateY(100px);
transition: 0.5s;
}
.work-card:hover .work-overlay{
transform: translateY(0);
}
/* TEXT */
.work-overlay h3{
color: #d4af37;
font-size: 1.5rem;
margin-bottom: 10px;
}
.work-overlay p{
color: rgba(255,255,255,0.7);
margin-bottom: 20px;
}
/* BUTTON */
.work-overlay button{
padding: 12px 24px;
background: #8b5cf6;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: 0.3s;
box-shadow:
0 0 20px rgba(139,92,246,0.4);
}
.work-overlay button:hover{
transform: translateY(-3px);
box-shadow:
0 0 30px rgba(139,92,246,0.7);
}
/* =========================
CONTACT SECTION
========================= */
.contact{
width: 100%;
min-height: auto;
padding: 100px 8%;
}
/* HEADING */
.contact-heading{
text-align: center;
margin-bottom: 70px;
}
.contact-heading h2{
font-size: 3.5rem;
font-family: 'Teko', sans-serif;
color: #d4af37;
margin-top: 20px;
text-shadow:
0 0 10px rgba(212,175,55,0.4);
}
/* CONTAINER */
.contact-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
/* CARD */
.contact-card{
padding: 40px 30px;
border-radius: 25px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
text-align: center;
transition: 0.5s;
box-shadow:
0 0 20px rgba(139,92,246,0.1);
}
.contact-card:hover{
transform: translateY(-10px);
border-color: #8b5cf6;
box-shadow:
0 0 40px rgba(139,92,246,0.4);
}
/* TEXT */
.contact-card h3{
color: #d4af37;
font-size: 1.8rem;
margin-bottom: 15px;
}
.contact-card p{
color: rgba(255,255,255,0.7);
margin-bottom: 25px;
line-height: 28px;
}
/* BUTTON */
.contact-card a{
display: inline-block;
padding: 12px 28px;
text-decoration: none;
background: #8b5cf6;
color: white;
border-radius: 10px;
transition: 0.4s;
box-shadow:
0 0 20px rgba(139,92,246,0.4);
}
.contact-card a:hover{
transform: translateY(-5px);
box-shadow:
0 0 35px rgba(139,92,246,0.7);
}
/* =========================
FOOTER
========================= */
/* =========================
FOOTER
========================= */
.footer {
width: 100vw; /* Forces the background to span the full viewport width */
margin-left: calc(-50vw + 50%); /* Pulls the block flush to the left edge */
margin-right: calc(-50vw + 50%); /* Pulls the block flush to the right edge */
padding: 30px 0;
background: rgba(10,10,25,.95);
border-top: 1px solid rgba(212,175,55,.25);
backdrop-filter: blur(15px);
text-align: center;
position: relative;
bottom: 0;
}
.footer::before{
content: "";
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 150px;
background: radial-gradient(
circle,
rgba(139,92,246,0.25),
transparent 70%
);
filter: blur(40px);
}
.footer h2{
color: #d4af37;
font-size: 3rem;
font-family: 'Teko', sans-serif;
letter-spacing: 3px;
}
.footer p{
color: rgba(255,255,255,0.75);
margin-bottom: 18px;
}
.footer-line{
width: 300px;
height: 2px;
margin: 18px auto;
background: linear-gradient(
to right,
transparent,
#d4af37,
#8b5cf6,
transparent
);
}
.footer span{
color: rgba(255,255,255,0.55);
}
/* =========================
GSAP START STATES
========================= */
.hero-left,
.hero-right,
.about-image,
.about-content,
.work-card,
.contact-card{
opacity: 0;
}
/* HERO */
.hero-left{
transform: translateY(80px);
}
.hero-right{
transform: scale(0.8);
}
/* ABOUT */
.about-image{
transform: translateX(-100px);
}
.about-content{
transform: translateX(100px);
}
/* CARDS */
.work-card,
.contact-card{
transform: translateY(80px);
}
/* =========================
MOUSE GLOW EFFECT
========================= */
.mouse-glow{
width: 350px;
height: 350px;
background: radial-gradient(
circle,
rgba(139,92,246,0.35) 0%,
rgba(139,92,246,0.15) 30%,
transparent 70%
);
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
filter: blur(20px);
transition:
transform 0.08s linear;
}
/* =========================
LOADER
========================= */
.loader{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #05010f;
display: flex;
justify-content: center;
align-items: center;
z-index: 99999;
overflow: hidden;
}
.loader{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.loader-logo{
width: 180px;
height: 180px;
border-radius: 50%;
border: 2px solid rgb(189, 166, 15);
object-fit: cover;
opacity: 0;
animation: fadeInLogo 1s ease forwards;
}
@keyframes fadeInLogo{
to{ opacity: 1; }
}
/* LOADER TEXT */
.loader h1{
color: #d4af37;
font-family: 'Teko', sans-serif;
font-size: 4rem;
letter-spacing: 8px;
text-shadow:
0 0 15px rgba(212,175,55,0.6),
0 0 30px rgba(212,175,55,0.5);
opacity: 0;
line-height: 0.85;
}
/* =========================
PARTICLES
========================= */
.particles{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
/* INDIVIDUAL PARTICLE */
.particle{
position: absolute;
width: 8px;
height: 8px;
background: rgba(139,92,246,0.7);
border-radius: 50%;
box-shadow:
0 0 15px rgba(139,92,246,0.8),
0 0 30px rgba(139,92,246,0.5);
animation: floatParticle linear infinite;
}
/* FLOAT ANIMATION */
@keyframes floatParticle{
0%{
transform:
translateY(100vh)
scale(0);
opacity: 0;
}
20%{
opacity: 1;
}
80%{
opacity: 1;
}
100%{
transform:
translateY(-120vh)
scale(1.2);
opacity: 0;
}
}
/* =========================
CUSTOM CURSOR
========================= */
.custom-cursor{
width: 25px;
height: 25px;
border: 2px solid #8b5cf6;
border-radius: 50%;
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 999999;
transition:
transform 0.1s ease,
width 0.3s ease,
height 0.3s ease,
background 0.3s ease;
box-shadow:
0 0 15px rgba(139,92,246,0.8),
0 0 30px rgba(139,92,246,0.5);
}
/* CURSOR HOVER EFFECT */
.custom-cursor.active{
width: 60px;
height: 60px;
background: rgba(139,92,246,0.15);
border-color: #d4af37;
box-shadow:
0 0 30px rgba(212,175,55,0.8),
0 0 50px rgba(212,175,55,0.5);
}
/* =========================
RESPONSIVE DESIGN
========================= */
@media screen and (max-width: 992px){
/* NAVBAR */
.navbar{
padding: 20px 5%;
}
.nav-links{
gap: 20px;
}
/* HERO */
.hero{
flex-direction: column;
justify-content: center;
text-align: center;
padding-top: 120px;
gap: 50px;
}
.hero-left,
.hero-right{
width: 100%;
}
.hero-left h1{
font-size: 4rem;
line-height: 70px;
}
.description{
width: 100%;
}
.hero-buttons{
justify-content: center;
}
.hero-right img{
width: 350px;
}
/* ABOUT */
.about{
flex-direction: column;
text-align: center;
}
.about-image,
.about-content{
width: 100%;
}
.about-content h2{
font-size: 2.5rem;
line-height: 50px;
}
.about-cards{
flex-direction: column;
}
/* WORK */
.work-heading h2{
font-size: 2.5rem;
}
/* CONTACT */
.contact-heading h2{
font-size: 2.5rem;
}
}
/* =========================
MOBILE DEVICES
========================= */
@media screen and (max-width: 600px){
/* NAVBAR */
.navbar{
flex-direction: column;
gap: 20px;
}
.logo{
font-size: 1.2rem;
}
.nav-links{
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.nav-links a{
font-size: 0.9rem;
}
/* HERO */
.hero{
padding: 140px 5% 80px;
}
.welcome-text{
font-size: 0.8rem;
}
.hero-left h1{
font-size: 3rem;
line-height: 55px;
}
.tagline{
font-size: 1.1rem;
}
.description{
font-size: 0.95rem;
line-height: 28px;
}
.hero-buttons{
flex-direction: column;
}
.work-btn,
.connect-btn{
width: 100%;
}
.hero-right img{
width: 260px;
}
/* ABOUT */
.about{
padding: 80px 5%;
}
.about-image img{
width: 260px;
}
.about-content h2{
font-size: 2rem;
line-height: 40px;
}
/* WORK */
.work{
padding: 80px 5%;
}
.work-heading h2{
font-size: 2rem;
}
.work-card img{
height: 400px;
}
/* CONTACT */
.contact{
padding: 80px 5%;
}
.contact-heading h2{
font-size: 2rem;
}
/* FOOTER */
.footer{
padding: 40px 5%;
}
.footer h2{
font-size: 1.5rem;
}
/* CURSOR */
.custom-cursor{
display: none;
}
/* MOUSE GLOW */
.mouse-glow{
display: none;
}
}
/* =========================
SCROLL PROGRESS BAR
========================= */
.progress-bar{
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
z-index: 9999999;
background:
linear-gradient(
to right,
#8b5cf6,
#d4af37
);
box-shadow:
0 0 10px #8b5cf6,
0 0 20px #8b5cf6,
0 0 30px #d4af37;
}
/* =========================
VIDEO CARD
========================= */
.video-card video{
width: 100%;
max-height: 700px;
object-fit: cover;
transition: 0.5s;
display: block;
}
/* VIDEO DARK EFFECT */
.video-card::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(
transparent,
rgba(0,0,0,0.4)
);
z-index: 1;
pointer-events: none;
}
/* OVERLAY ABOVE VIDEO */
.video-card .work-overlay{
z-index: 2;
}
/* =========================
REELS SECTION
========================= */
.work-subheading{
font-size: 2rem;
color: #d4af37;
margin-bottom: 40px;
letter-spacing: 3px;
text-shadow:
0 0 10px rgba(212,175,55,0.4);
}
/* =========================
FILMS HEADER
========================= */
.films-header{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 01px;
}
/* =========================
FILMS SECTION
========================= */
.films-section{
position: relative;
padding: 20px 2%;
width: 100%;
}
/* =========================
FILM CARD
========================= */
.film-card{
width: 520px;
min-width: 520px;
height: 290px;
border-radius: 24px;
overflow: hidden;
position: relative;
background: #111;
flex-shrink: 0;
transition: transform 0.35s ease;
}
.film-card:hover{
transform: scale(1.03);
}
.film-card video{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.films-grid{
display: flex;
gap: 24px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding: 55px 55px;
scrollbar-width: none;
}
.films-grid::-webkit-scrollbar{
display: none;
}
/* =========================
HOTSTAR STYLE ARROWS
========================= */
.film-side-arrow{
position: absolute;
top: 58%;
transform: translateY(-50%);
width: 68px;
height: 68px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(20,20,20,0.72);
backdrop-filter: blur(10px);
color: white;
font-size: 42px;
z-index: 50;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s ease;
}
/* LEFT */
.film-side-arrow.left{
left: 35px;
}
/* RIGHT */
.film-side-arrow.right{
right: 35px;
}
.film-side-arrow:hover{
transform: translateY(-50%) scale(1.08);
background: rgba(139,92,246,0.92);
box-shadow:
0 0 30px rgba(139,92,246,0.45);
}
/* MOBILE REELS */
@media screen and (max-width: 992px){
.reels-grid{
grid-template-columns: 1fr;
}
.reel-card video{
height: 550px;
}
.film-card{
width: 88vw;
min-width: 88vw;
aspect-ratio: 16 / 9;
height: 240px;
}
.film-card video{
height: 100%;
}
}
/* =========================
VIDEO POPUP
========================= */
.video-popup{
position: fixed;
inset: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.88);
backdrop-filter: blur(12px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
z-index: 99999;
transition: 0.4s ease;
}
/* ACTIVE */
.video-popup.active{
opacity: 1;
visibility: visible;
}
/* VIDEO */
.popup-video{
width: auto;
height: auto;
max-width: 92%;
max-height: 85vh;
border-radius: 24px;
object-fit: contain;
border: 2px solid rgba(140,100,255,0.5);
box-shadow:
0 0 25px rgba(140,100,255,0.35),
0 0 60px rgba(110,70,255,0.2);
background: black;
}
/* REELS = vertical */
.reels-row .popup-video{
height: 85vh;
width: auto;
}
/* FILMS = original cinematic size */
.films-grid .popup-video{
width: 90%;
height: auto;
max-height: 80vh;
}
/* CLOSE BUTTON */
.close-popup{
position: absolute;
top: 25px;
right: 30px;
font-size: 34px;
color: white;
cursor: pointer;
z-index: 100000;
transition: 0.3s ease;
}
.close-popup:hover{
transform: rotate(90deg) scale(1.1);
color: #9f7bff;
}
/* HOVER EFFECT */
.close-popup:hover{
color: #8b5cf6;
transform: scale(1.1);
}
.close-popup:hover{
color: #8b5cf6;
transform: scale(1.1);
}
/* =========================
VIDEO INSTRUCTIONS
========================= */
.video-instruction{
display: inline-block;
margin-top: 15px;
font-size: 0.8rem;
color: rgba(255,255,255,0.7);
padding: 8px 14px;
border-radius: 30px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
letter-spacing: 1px;
}
/* SHOW NORMAL CURSOR IN POPUP */
.video-popup{
cursor: auto;
}
.video-popup *{
cursor: auto;
}
/* HIDE CUSTOM CURSOR */
.video-popup.active ~ .custom-cursor{
opacity: 0;
}
/* FORCE CURSOR */
.video-popup,
.video-popup *{
cursor: auto;
}
.close-popup{
cursor: pointer !important;
}
/* =========================
SCROLL REVEAL
========================= */
.reveal{
opacity: 0;
transform:
translateY(120px);
transition: all 1s ease;
}
/* ACTIVE REVEAL */
.reveal.active{
opacity: 1;
transform:
translateY(0);
}
/* =========================
FLOATING NAVBAR EFFECT
========================= */
.navbar{
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* hidden state */
.navbar.hide{
transform: translateY(-120%);
}
/* visible enhanced state */
.navbar.show{
transform: translateY(0);
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
/* glow upgrade when scrolling */
.navbar.glow{
background: rgba(10, 5, 25, 0.6);
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(139,92,246,0.2);
}
/* =========================
PREMIUM NAVBAR SHRINK EFFECT
========================= */
.navbar{
transition: all 0.4s ease;
}
/* NORMAL STATE */
.navbar{
padding: 25px 8%;
}
/* SHRUNK STATE */
.navbar.shrink{
padding: 15px 8%;
background: rgba(5, 1, 15, 0.6);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(139,92,246,0.25);
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.navbar.shrink .logo{
font-size: 1.2rem;
}
.skill-top{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
/* LEFT SIDE (ICON + NAME) */
.skill-left{
display: flex;
align-items: center;
gap: 12px;
}
.skill-left img{
width: 38px;
height: 38px;
object-fit: contain;
display: block;
}
/* NAME */
.skill-left h3{
margin: 0;
font-size: 1.1rem;
color: white;
}
/* PERCENT */
.skill-top span{
color: #d4af37;
font-weight: 600;
}
/* =========================
SKILLS SECTION
========================= */
.skills-container{
display: grid;
grid-template-columns: repeat(10, 1fr);
justify-items: center;
align-items: center;
max-width: 1600px;
margin: auto;
row-gap: 35px;
}
.skill-circle:nth-child(1){
grid-column: 1 / span 2;
}
.skill-circle:nth-child(2){
grid-column: 3 / span 2;
}
.skill-circle:nth-child(3){
grid-column: 5 / span 2;
}
.skill-circle:nth-child(4){
grid-column: 7 / span 2;
}
.skill-circle:nth-child(5){
grid-column: 9 / span 2;
}
.skill-circle:nth-child(6){
grid-column: 2 / span 2;
}
.skill-circle:nth-child(7){
grid-column: 4 / span 2;
}
.skill-circle:nth-child(8){
grid-column: 6 / span 2;
}
.skill-circle:nth-child(9){
grid-column: 8 / span 2;
}
@media(max-width: 1100px){
.skills-container{
grid-template-columns: repeat(3, 1fr);
}
}
@media(max-width: 700px){
.skills-container{
grid-template-columns: repeat(2, 1fr);
gap: 35px;
}
}
/* SKILL CIRCLE */
.skill-circle{
position: relative;
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
transition:
transform 0.5s ease,
opacity 0.5s ease,
filter 0.5s ease;
background: transparent !important;
box-shadow: none !important;
}
.skill-circle:nth-child(n+6){
margin-top: -35px;
}
/* SVG */
.circle{
position: absolute;
width: 200px;
height: 200px;
transform: rotate(-90deg);
}
.circle{
filter: none !important;
}
/* BACK CIRCLE */
.circle .bg{
fill: none;
stroke: rgba(255,255,255,0.08);
stroke-width: 10;
}
/* PROGRESS */
.circle .progress{
fill: none;
stroke: #8b5cf6;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 314;
stroke-dashoffset: 314;
transition:
stroke-dashoffset 1.5s ease;
}
/* CENTER CONTENT */
.skill-center{
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
/* ICON */
.skill-center img{
width: 42px;
height: 42px;
object-fit: contain;
margin-bottom: 12px;
}
/* TITLE */
.skill-center h3{
color: white;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 6px;
}
/* PERCENT */
.skill-center span{
color: #d4af37;
font-size: 1.1rem;
font-weight: 500;
}
/* HOVER EFFECT */
.skills-container:hover .skill-circle{
transform: scale(0.9);
opacity: 1;
filter: none;
}
/* ACTIVE */
.skills-container .skill-circle:hover{
transform: scale(1.12);
z-index: 10;
}
/* GLOW UNDER CIRCLE */
.skill-circle::after{
content: '';
position: absolute;
bottom: 15px;
width: 90px;
height: 18px;
background:
radial-gradient(
circle,
rgba(139,92,246,0.7),
transparent 70%
);
filter: blur(12px);
opacity: 0;
transition: 0.5s;
}
/* SHOW GLOW */
.skill-circle:hover::after{
opacity: 1;
}
@media(max-width:768px){
.skill-circle{
width:180px;
height:180px;
}
.circle{
width:140px;
height:140px;
}
}
@keyframes glowPulse{
from{
filter:
drop-shadow(0 0 5px #8b5cf6);
}
to{
filter:
drop-shadow(0 0 25px #8b5cf6)
drop-shadow(0 0 40px #8b5cf6);
}
}
/* CENTER CONTENT */
.skill-center{
text-align: center;
z-index: 2;
}
.skill-center img{
width: 52px;
height: 52px;
object-fit: contain;
margin-bottom: 8px;
filter:
drop-shadow(0 0 8px rgba(234, 196, 75, 0.749));
}
.skill-center h3{
font-size: 1rem;
color: white;
}
.skill-center span{
color: #d4af37;
}
.skills-heading{
text-align: center;
margin-bottom: 70px;
}
.skills-heading h2{
font-size: 3.5rem;
font-family: 'Teko', sans-serif;
color: #d4af37;
margin-top: 15px;
}
.skills-heading .section-subtitle{
color: #8b5cf6;
letter-spacing: 6px;
}
/* =========================
TWO LINE TYPING TEXT
========================= */
.typing-text{
font-size: 6rem;
font-weight: 700;
line-height: 95px;
color: #d4af37;
letter-spacing: 3px;
text-shadow:
0 0 12px rgba(212,175,55,0.8),
0 0 30px rgba(212,175,55,0.5);
}
/* FIRST + SECOND LINE */
.typing-line{
display: block;
overflow: hidden;
white-space: nowrap;
border-right: none;
}
/* THE */
.typing-line.first{
width: 3ch;
animation:
typingFirst 4s steps(3) infinite,
glowText 2s ease-in-out infinite alternate;
}
/* CINECLICKS */
.typing-line.second{
width: 10ch;
animation:
typingSecond 4s steps(10) infinite,
glowText 2s ease-in-out infinite alternate;
animation-delay: 0.5s;
}
/* FIRST LINE */
@keyframes typingFirst{
0%{
width: 0;
}
20%{
width: 3ch;
}
60%{
width: 3ch;
}
100%{
width: 0;
}
}
/* SECOND LINE */
@keyframes typingSecond{
0%{
width: 0;
}
25%{
width: 0;
}
45%{
width: 10ch;
}
70%{
width: 10ch;
}
100%{
width: 0;
}
}
/* GLOW */
@keyframes glowText{
from{
text-shadow:
0 0 10px rgba(212,175,55,0.5),
0 0 20px rgba(212,175,55,0.3);
}
to{
text-shadow:
0 0 20px rgba(212,175,55,0.9),
0 0 45px rgba(212,175,55,0.7);
}
}
/* CURSOR */
.cursor-line{
color: white;
animation: blink 0.8s infinite;
}
/* BLINK */
@keyframes blink{
50%{
opacity: 0;
}
}
/* =========================
SOCIAL ICONS
========================= */
.social-icons{
display: flex;
align-items: center;
gap: 20px;
margin-top: 25px;
}
.social-icons a{
width: 55px;
height: 55px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
text-decoration: none;
color: white;
font-size: 1.8rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
transition: 0.4s;
box-shadow:
0 0 15px rgba(92, 125, 246, 0);
}
/* HOVER */
.social-icons a:hover{
transform: translateY(-8px) scale(1.1);
color: #d4af37;
border-color: #8b5cf6;
box-shadow:
0 0 25px rgba(139,92,246,0.5),
0 0 40px rgba(139,92,246,0.3);
}
/* MOBILE */
@media screen and (max-width: 600px){
.social-icons{
justify-content: center;
margin-top: 20px;
flex-wrap: wrap;
}
}
/* REMOVE LINK UNDERLINE */
.hero-buttons a,
.navbar a{
text-decoration: none;
}
/* =========================
GLASSMORPHISM TOP BUTTON
========================= */
#topBtn{
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #ffffff;
font-size: 32px;
font-weight: bold;
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 999;
box-shadow:
0 0 20px rgba(138, 92, 246, 0),
inset 0 0 10px rgba(255,255,255,0.05);
transition: all 0.4s ease;
}
/* ROTATE ONLY THE TEXT */
#topBtn span{
display: inline-block;
transform: rotate(-90deg);
}
/* HOVER */
#topBtn:hover{
transform: translateY(-6px) scale(1.08);
background: rgba(255,255,255,0.12);
box-shadow:
0 0 25px rgba(138, 92, 246, 0.751),
0 0 45px rgba(138, 92, 246, 0.722);
}
/* Mobile */
@media(max-width:768px){
#topBtn{
width: 52px;
height: 52px;
font-size: 24px;
right: 18px;
bottom: 18px;
}
}
/* =========================
CONTACT CONTAINER
========================= */
.contact-container{
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
gap: 40px;
margin-top: 70px;
}
/* =========================
CONTACT CARDS
========================= */
.contact-card{
width: 250px;
padding: 45px 30px;
text-align: center;
border-radius: 30px;
background:
rgba(255,255,255,0.03);
border:
1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(18px);
position: relative;
overflow: hidden;
transition: 0.5s;
box-shadow:
0 0 25px rgba(139,92,246,0.12);
}
/* GLOW EFFECT */
.contact-card::before{
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 180px;
height: 180px;
background:
radial-gradient(
circle,
rgba(139,92,246,0.28),
transparent 70%
);
filter: blur(15px);
pointer-events: none;
}
/* HOVER */
.contact-card:hover{
transform:
translateY(-10px);
border-color:
rgba(139,92,246,0.4);
box-shadow:
0 0 40px rgba(139,92,246,0.3);
}
/* ICON */
.contact-icon{
width: 70px;
margin-bottom: 22px;
filter:
drop-shadow(0 0 18px rgba(139,92,246,0.5));
}
/* TITLE */
.contact-card h3{
color: #d4af37;
font-size: 2rem;
margin-bottom: 25px;
text-shadow:
0 0 12px rgba(212,175,55,0.45);
}
/* BUTTON */
.contact-card a{
display: inline-block;
margin-top: 10px;
padding: 15px 35px;
border-radius: 16px;
text-decoration: none;
color: white;
font-weight: 600;
background:
linear-gradient(
135deg,
#8b5cf6,
#6d28d9
);
transition: 0.4s;
box-shadow:
0 0 25px rgba(139,92,246,0.35);
}
/* BUTTON HOVER */
.contact-card a:hover{
transform:
translateY(-5px);
box-shadow:
0 0 40px rgba(139,92,246,0.6);
}
/* =========================
MESSAGE BOX
========================= */
.message-box{
width: 100%;
max-width: 1100px;
margin: 40px auto 0;
padding: 65px;
border-radius: 35px;
background:
linear-gradient(
145deg,
rgba(18,10,40,0.92),
rgba(8,5,25,0.95)
);
border:
1px solid rgba(139,92,246,0.15);
position: relative;
overflow: hidden;
box-shadow:
0 0 60px rgba(139,92,246,0.12);
backdrop-filter: blur(22px);
animation:
boxFloat 6s ease-in-out infinite;
}
/* FLOAT ANIMATION */
@keyframes boxFloat{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-8px);
}
100%{
transform: translateY(0px);
}
}
/* TOP GLOW */
.message-box::before{
content: '';
position: absolute;
top: -140px;
right: -140px;
width: 320px;
height: 320px;
background:
radial-gradient(
circle,
rgba(139,92,246,0.35),
transparent 70%
);
filter: blur(30px);
animation:
glowMove 8s linear infinite;
pointer-events: none;
}
/* BOTTOM GLOW */
.message-box::after{
content: '';
position: absolute;
bottom: -160px;
left: -160px;
width: 350px;
height: 350px;
background:
radial-gradient(
circle,
rgba(212,175,55,0.18),
transparent 70%
);
filter: blur(40px);
animation:
glowMove2 10s linear infinite;
pointer-events: none;
}
/* GLOW ANIMATIONS */
@keyframes glowMove{
0%{
transform: rotate(0deg) scale(1);
}
50%{
transform: rotate(180deg) scale(1.1);
}
100%{
transform: rotate(360deg) scale(1);
}
}
@keyframes glowMove2{
0%{
transform: translateX(0px);
}
50%{
transform: translateX(30px);
}
100%{
transform: translateX(0px);
}
}
/* HEADING */
.message-box h3{
text-align: center;
font-size: 3.5rem;
font-family: 'Teko', sans-serif;
margin-bottom: 50px;
color: #d4af37;
text-shadow:
0 0 18px rgba(212,175,55,0.6);
animation:
textGlow 3s ease-in-out infinite;
}
/* HEADING GLOW */
@keyframes textGlow{
0%{
text-shadow:
0 0 10px rgba(212,175,55,0.4);
}
50%{
text-shadow:
0 0 28px rgba(246, 241, 92, 0.579);
}
100%{
text-shadow:
0 0 10px rgba(212,175,55,0.4);
}
}
/* FORM */
.message-box form{
display: flex;
flex-direction: column;
gap: 28px;
}
/* INPUT ROW */
.input-row{
display: flex;
gap: 25px;
}
/* BOTH INPUTS */
.input-row input{
width: 100%;
}
/* INPUTS */
.message-box input,
.message-box textarea{
width: 100%;
padding: 20px 24px;
border-radius: 18px;
border:
1px solid rgba(255,255,255,0.08);
background:
rgba(255,255,255,0.04);
color: white;
font-size: 1rem;
outline: none;
transition: 0.4s;
backdrop-filter: blur(10px);
position: relative;
}
/* PLACEHOLDER */
.message-box input::placeholder,
.message-box textarea::placeholder{
color:
rgba(255,255,255,0.45);
}
/* INPUT HOVER */
.message-box input:hover,
.message-box textarea:hover{
transform:
translateY(-3px);
border-color:
rgba(139,92,246,0.4);
box-shadow:
0 0 18px rgba(139,92,246,0.15);
}
/* FOCUS */
.message-box input:focus,
.message-box textarea:focus{
border-color: #8b5cf6;
transform:
scale(1.01);
box-shadow:
0 0 25px rgba(139,92,246,0.35);
}
/* TEXTAREA */
.message-box textarea{
min-height: 180px;
resize: none;
}
/* BUTTON */
.message-box button{
padding: 18px;
border: none;
border-radius: 18px;
background:
linear-gradient(
135deg,
#8b5cf6,
#6d28d9
);
color: white;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: 0.4s;
box-shadow:
0 0 30px rgba(139,92,246,0.35);
position: relative;
overflow: hidden;
}
/* BUTTON SHINE EFFECT */
.message-box button::before{
content: '';
position: absolute;
top: 0;
left: -120%;
width: 100%;
height: 100%;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
transition: 0.6s;
}
.message-box button:hover::before{
left: 120%;
}
/* BUTTON HOVER */
.message-box button:hover{
transform:
translateY(-5px) scale(1.02);
box-shadow:
0 0 45px rgba(139,92,246,0.6);
}
/* MOBILE */
@media screen and (max-width: 768px){
.message-box{
padding: 40px 22px;
}
.message-box h3{
font-size: 2rem;
}
.input-row{
flex-direction: column;
gap: 20px;
}
.contact-card{
width: 100%;
}
.contact-container{
flex-direction: column;
align-items: center;
}
}
/* =========================
FORM ACTION BUTTONS
========================= */
.form-actions{
display: flex;
gap: 20px;
justify-content: space-between;
}
/* both buttons */
.form-actions button{
flex: 1;
padding: 18px;
border-radius: 18px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: 0.4s;
border: none;
}
/* send button (first one) */
.form-actions button[type="submit"]{
background: linear-gradient(135deg, #8b5cf6, #6d28d9);
color: white;
box-shadow: 0 0 30px rgba(139,92,246,0.35);
}
/* clear button */
#clearFormBtn{
background: transparent;
border: 1px solid rgba(212,175,55,0.6);
color: #d4af37;
}
#clearFormBtn:hover{
background: #d4af37;
color: black;
transform: translateY(-4px);
}
/* =========================
REELS SECTION
========================= */
.reels-section{
padding: 05px 5%;
position: relative;
}
.section-title-line {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
}
.section-title-line h2 {
font-size: 32px;
color: #d4af37;
font-family: 'Cinzel', serif;
letter-spacing: 3px;
white-space: nowrap;
margin: 0;
text-shadow: 0 0 10px rgba(212,175,55,0.4);
}
.stl-bar {
flex: 1;
height: 1px;
max-width: 250px;
background: linear-gradient(to right, transparent, rgba(212,175,55,0.7));
}
.stl-bar:last-child {
background: linear-gradient(to left, transparent, rgba(212,175,55,0.7));
}
/* =========================
ROW WRAPPER
========================= */
.reel-row-wrapper{
position: relative;
margin-bottom: 70px;
}
/* =========================
ROW
========================= */
.reels-row{
display: flex;
gap: 25px;
margin-bottom: 20px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
}
.reels-row::-webkit-scrollbar{
display: none;
}
/* =========================
VIDEO CARD
========================= */
.video-card{
position: relative;
border-radius: 25px;
overflow: hidden;
flex-shrink: 0;
cursor: pointer;
background: #111;
transition: 0.5s ease;
}
/* Featured Reels Size */
.reels-row .video-card{
width: 350px;
min-width: 250px;
height: 550px;
}
/* REELS HOVER */
.reel-card:hover{
transform: scale(1.05);
z-index: 5;
}
/* VERTICAL REELS */
.reel-card video{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 25px;
}
/* =========================
FILM CARD SIZE
========================= */
.film-card{
width: 520px;
min-width: 520px;
height: 290px;
}
/* FILMS HOVER */
.film-card:hover{
transform: scale(1.03);
z-index: 5;
}
/* VIDEO */
.video-card video{
width: 100%;
height: 100%;
object-fit: cover;
}
/* OVERLAY */
.video-overlay{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 25px;
background:
linear-gradient(
to top,
rgba(0,0,0,0.95) 10%,
rgba(0,0,0,0.15) 55%,
transparent 100%
);
z-index: 2;
}
/* TITLE */
.video-overlay h3{
color: #fff;
font-size: 24px;
margin-bottom: 0;
transform: translateY(35px);
transition: 0.4s ease;
}
/* DESCRIPTION */
.video-overlay p{
color: rgba(255,255,255,0.78);
font-size: 13px;
line-height: 1.5;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
border-radius: 14px;
width: fit-content;
margin-top: 12px;
opacity: 0;
transform: translateY(20px);
transition: 0.4s ease;
}
/* HOVER EFFECT */
.video-card:hover .video-overlay h3{
transform: translateY(0);
}
.video-card:hover .video-overlay p{
opacity: 1;
transform: translateY(0);
}
/* GLOW */
.video-card::after,
.photo-card::after,
.thumb-card::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
transition: 0.4s ease;
}
.video-card:hover::after,
.photo-card:hover::after,
.thumb-card:hover::after{
box-shadow:
inset 0 0 0 2px rgba(138,92,246,0.6);
}
/* =========================
SCROLL BUTTONS
========================= */
.scroll-btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 58px;
height: 58px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06);
backdrop-filter: blur(14px);
color: #fff;
font-size: 34px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 20;
transition: 0.35s ease;
}
.scroll-btn:hover{
background: rgba(138,92,246,0.45);
border-color: rgba(138,92,246,0.7);
transform: translateY(-50%) scale(1.1);
}
.scroll-btn.left{
left: -25px;
}
.scroll-btn.right{
right: -25px;
}
/* =========================
MOBILE
========================= */
@media(max-width:768px){
.film-card{
width: 88vw;
min-width: 88vw;
height: 220px;
}
.section-title h2{
font-size: 34px;
}
}
/* =========================
FINAL VIDEO POPUP FIX
========================= */
body.popup-open{
overflow: hidden;
}
/* VIDEO CENTER */
.popup-video{
width: auto;
max-width: 92vw;
max-height: 88vh;
border-radius: 28px;
object-fit: contain;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow:
0 0 30px rgba(138,92,246,0.25),
0 0 80px rgba(138,92,246,0.12),
inset 0 0 20px rgba(255,255,255,0.03);
padding: 6px;
transition: 0.4s ease;
}
/* CLOSE BUTTON */
.close-popup{
position: absolute;
top: 25px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(15px);
border: 1px solid rgba(255,255,255,0.18);
color: white;
font-size: 34px;
font-weight: 300;
cursor: pointer;
z-index: 1000000;
transition: 0.3s ease;
box-shadow:
0 0 20px rgba(255,255,255,0.08);
}
/* HOVER */
.close-popup:hover{
background: rgba(138,92,246,0.5);
transform: scale(1.08);
}
/* BUTTONS */
.scroll-btn{
background: rgba(255,255,255,0.08);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.15);
box-shadow:
0 0 20px rgba(255,255,255,0.05);
}
/* ARROW */
.scroll-btn span{
color: white;
font-size: 34px;
line-height: 1;
}
/* INSTRUCTION GLASS */
.video-overlay p{
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
backdrop-filter: blur(14px);
border-radius: 14px;
}
/* MOBILE */
@media(max-width:768px){
.popup-video{
max-width: 95vw;
max-height: 78vh;
}
.close-popup{
width: 50px;
height: 50px;
font-size: 28px;
top: 18px;
right: 18px;
}
}
.video-popup.active{
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
/* =========================
PHOTO SECTION
========================= */
.photo-section,
.thumbnail-section{
width: 100%;
padding: 20px 5%;
position: relative;
}
.photo-row-wrapper{
position: relative;
display: flex;
align-items: center;
}
.photo-row{
display: flex;
gap: 25px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 20px 10px;
scrollbar-width: none;
}
.photo-row::-webkit-scrollbar{
display: none;
}
.photo-card{
min-width: 120px;
height: 400px;
border-radius: 28px;
overflow: hidden;
position: relative;
cursor: pointer;
flex-shrink: 0;
background: #111;
transition: 0.5s;
}
.photo-card img{
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.6s;
}
.photo-overlay{
position: absolute;
inset: 0;
background:
linear-gradient(
transparent,
rgba(0,0,0,0.9)
);
display: flex;
align-items: flex-end;
padding: 25px;
opacity: 0;
transition: 0.5s;
}
.photo-overlay h3{
color: white;
font-size: 1.5rem;
font-weight: 700;
}
.photo-card:hover img{
transform: scale(1.1);
}
.photo-card:hover{
box-shadow:
0 0 35px rgba(140, 0, 255, 0);
transform: translateY(-10px);
}
.photo-card:hover .photo-overlay{
opacity: 1;
}
/* =========================
THUMBNAILS
========================= */
.thumb-grid{
display: grid;
grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));
gap: 30px;
margin-top: 10px;
}
.thumb-card{
border-radius: 24px;
cursor: pointer;
position: relative;
transition: 0.5s;
background: #111;
}
.thumb-card img{
width: 100%;
display: block;
transition: 0.6s;
}
.thumb-card:hover img{
transform: scale(1.08);
}
.thumb-card:hover{
transform: translateY(-10px);
box-shadow:
0 0 40px rgba(132,0,255,0.45);
}
/* =========================
THUMBNAIL SECTION
========================= */
.thumbnail-section{
margin-top: 20px;
padding-top: 50px;
padding-left: 05px;
padding-right: 05px;
}
.thumbnail-section .reel-row-wrapper {
margin-top: 20px;
}
.thumb-card{
min-width: 350px;
height: 250px;
margin-bottom: 20px;
border-radius: 24px;
overflow: hidden;
position: relative;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.15);
transition: 0.4s ease;
flex-shrink: 0;
background: #111;
}
.thumb-card img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 24px;
transition: 0.5s ease;
}
.thumb-card:hover{
transform: scale(1.04);
box-shadow: 0 0 40px rgba(129, 87, 255, 0);
}
.thumb-card:hover img{
transform: scale(1.08);
}
/* SAME ARROW POSITION */
.photo-row-wrapper,
.thumb-row-wrapper,
.reel-row-wrapper{
position: relative;
}
.photo-row-wrapper .scroll-btn,
.reel-row-wrapper .scroll-btn{
top: 50%;
transform: translateY(-50%);
}
.photo-row-wrapper .scroll-btn.left,
.reel-row-wrapper .scroll-btn.left{
left: -35px;
}
.photo-row-wrapper .scroll-btn.right,
.reel-row-wrapper .scroll-btn.right{
right: -35px;
}
.photo-row-wrapper,
.reel-row-wrapper{
width: 100%;
margin: 0;
}
@media(max-width: 768px){
.thumb-card { min-width: 80vw; height: 200px; }
}
/* =========================
PERFECT CENTER IMAGE POPUP
========================= */
.image-popup{
position: fixed !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 40px;
background: rgba(0,0,0,0.95);
backdrop-filter: blur(12px);
z-index: 999999999 !important;
opacity: 0;
visibility: hidden;
transition: 0.35s ease;
overflow: hidden;
}
/* ACTIVE */
.image-popup.active{
opacity: 1;
visibility: visible;
}
/* IMAGE */
.popup-image{
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
max-width: 99vw;
max-height: 88vh;
object-fit: contain;
border-radius: 20px;
display: block;
margin: auto;
box-shadow:
0 0 35px rgba(139,92,246,0.5);
}
/* CLOSE BUTTON */
.close-image-popup{
position: absolute;
top: 20px;
right: 30px;
font-size: 42px;
color: white;
z-index: 1000000000;
cursor: pointer;
}
/* VIDEO */
.popup-video{
width: 82%;
max-width: 1200px;
max-height: 85vh;
border-radius: 28px;
object-fit: cover;
border: 2px solid rgba(138,43,226,0.7);
box-shadow:
0 0 25px rgba(138,43,226,0.45),
0 0 60px rgba(0,255,255,0.15);
transform: scale(0.85);
transition: 0.4s ease;
}
/* OPEN ANIMATION */
.video-popup.active .popup-video{
transform: scale(1);
}
/* CLOSE BUTTON */
.close-popup{
position: absolute;
top: 35px;
right: 45px;
font-size: 34px;
color: white;
cursor: pointer;
z-index: 999999;
transition: 0.3s ease;
}
.close-popup:hover{
transform: rotate(90deg) scale(1.1);
color: #a855f7;
}
/* MOBILE */
@media(max-width:768px){
.popup-video{
width: 94%;
border-radius: 20px;
}
.close-popup{
top: 18px;
right: 22px;
font-size: 28px;
}
}
/* =========================
VERTICAL REELS
========================= */
.popup-video.vertical-video{
width: auto;
height: 118vh;
max-width: 1020px;
object-fit: contain;
}
.close-popup{
display: none;
}
.video-popup.active .close-popup{
display: flex;
}
.photo-overlay{
pointer-events: none;
}
.thumb-card *{
pointer-events: none;
}
.thumb-card img{
pointer-events: auto;
}
/* =========================================
FINAL IMAGE POPUP FIX
========================================= */
#imagePopup{
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
background: rgba(0,0,0,0.92) !important;
backdrop-filter: blur(12px);
z-index: 999999999 !important;
opacity: 0;
visibility: hidden;
transition: 0.4s ease;
overflow: hidden;
padding: 40px;
}
/* ACTIVE */
#imagePopup.active{
opacity: 1 !important;
visibility: visible !important;
}
/* IMAGE */
#imagePopup .popup-image{
max-width: 92vw !important;
max-height: 88vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border-radius: 24px;
display: block;
margin: auto;
position: static !important;
transform: scale(1) !important;
box-shadow:
0 0 40px rgba(139,92,246,0.45),
0 0 80px rgba(139,92,246,0.18);
}
/* CLOSE BUTTON */
#imagePopup .close-image-popup{
position: absolute !important;
top: 25px !important;
right: 30px !important;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.15);
color: white;
font-size: 34px;
cursor: pointer;
z-index: 1000000000 !important;
transition: 0.3s ease;
box-shadow:
0 0 25px rgba(139,92,246,0.25);
}
/* HOVER */
#imagePopup .close-image-popup:hover{
transform: scale(1.08) rotate(90deg);
background: rgba(139,92,246,0.25);
box-shadow:
0 0 35px rgba(139,92,246,0.5);
}
/* =====================================
FORCE FIX IMAGE POPUP
===================================== */
#imagePopup{
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
display: none;
justify-content: center !important;
align-items: center !important;
background: rgba(0,0,0,0.94) !important;
z-index: 999999999 !important;
overflow: hidden !important;
}
/* ACTIVE */
#imagePopup.active{
display: flex !important;
}
/* IMAGE */
#imagePopup .popup-image{
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-width: 90vw !important;
max-height: 88vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border-radius: 22px !important;
margin: 0 !important;
padding: 0 !important;
transform: scale(0.92);
box-shadow:
0 0 40px rgba(139,92,246,0.45);
}
/* CLOSE BUTTON */
#imagePopup .close-image-popup{
position: fixed !important;
top: 22px !important;
right: 28px !important;
width: 58px;
height: 58px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);
color: white;
font-size: 34px;
z-index: 1000000000 !important;
cursor: pointer;
}
/* =========================
PROTECT IMAGES & VIDEOS
========================= */
img,
video{
user-select: none;
-webkit-user-drag: none;
pointer-events: auto;
}
.video-card:hover{
box-shadow: none !important;
filter: none !important;
}
.video-card:hover::before{
opacity: 0 !important;
background: none !important;
}
.video-card:hover::after{
box-shadow: inset 0 0 0 2px rgba(138,92,246,0.6) !important;
}
.reel-video{
object-fit: cover;
}
/* =============================================
ADD THIS TO THE BOTTOM OF YOUR style.css
REPLACES ALL OLD REVIEWS CSS
============================================= */
/* SECTION */
.rev-section {
padding: 80px 0 60px;
margin-top: -120px;
position: relative;
overflow: hidden;
}
.rev-section::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 700px; height: 300px;
background: radial-gradient(ellipse, rgba(138,43,226,0.1) 0%, transparent 70%);
pointer-events: none;
}
/* HEADER */
.rev-header {
text-align: center;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.rev-script {
font-family: 'best';
font-size: 4.9rem;
color: #8b5cf6;
line-height: 1;
margin-bottom: 6px;
}
.rev-title {
font-family: 'Cinzel', serif;
font-size: 22px;
color: #f5c842;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 14px;
}
.rev-line {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.rev-line-bar {
width: 70px; height: 1px;
background: linear-gradient(to right, transparent, #f5c842);
}
.rev-line-bar.r {
background: linear-gradient(to left, transparent, #f5c842);
}
.rev-line-diamond {
width: 8px; height: 8px;
background: #f5c842;
transform: rotate(45deg);
}
.rev-tagline {
margin-top: 12px;
font-size: 12px;
letter-spacing: 2px;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
}
/* TRACK OUTER - FADE EDGES */
.rev-track-outer {
position: relative;
overflow: hidden;
}
.rev-track-outer::before,
.rev-track-outer::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 3;
pointer-events: none;
}
.rev-track-outer::before {
left: 0;
background: linear-gradient(to right, #05010f 0%, transparent 100%);
}
.rev-track-outer::after {
right: 0;
background: linear-gradient(to left, #05010f 0%, transparent 100%);
}
/* SCROLLING TRACK */
.rev-track {
display: flex;
gap: 22px;
width: max-content;
padding: 10px 30px 20px;
animation: revScroll 40s linear infinite;
cursor: grab;
user-select: none;
}
.rev-track.paused {
animation-play-state: paused !important;
}
@keyframes revScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* CARD */
.rev-card {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 280px;
background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(138,43,226,0.06));
border: 1px solid rgba(245,200,66,0.1);
border-radius: 18px;
padding: 22px 20px 18px;
transition: border-color 0.3s, transform 0.35s;
}
.rev-card:hover,
.rev-card.active {
border-color: rgba(138,92,246,0.6);
transform: translateY(-6px);
}
/* STARS */
.rev-stars {
color: #f5c842;
font-size: 14px;
letter-spacing: 3px;
margin-bottom: 10px;
}
/* QUOTE MARK */
.rev-quote {
font-family: 'Cinzel', serif;
font-size: 40px;
color: #f5c842;
line-height: 0.7;
margin-bottom: 01px;
opacity: 0.6;
}
/* REVIEW TEXT */
.rev-text {
font-size: 13px;
color: rgba(255,255,255,0.6);
line-height: 1.75;
margin-bottom: 18px;
flex: 1;
}
/* SEPARATOR */
.rev-sep {
height: 1px;
background: linear-gradient(to right, rgba(245,200,66,0.3), transparent);
margin-bottom: 14px;
}
/* FOOTER ROW */
.rev-footer {
display: flex;
align-items: center;
gap: 11px;
}
/* PROFILE PHOTO WRAPPER */
.rev-avatar-img {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid rgba(245,200,66,0.35);
overflow: hidden;
flex-shrink: 0;
position: relative;
box-shadow: 0 0 12px rgba(245,200,66,0.2);
}
/* ACTUAL PHOTO */
.rev-avatar-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
/* FALLBACK INITIALS (shows if no photo) */
.rev-avatar-fallback {
width: 100%;
height: 100%;
border-radius: 50%;
display: none; /* hidden by default, shown via onerror */
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
position: absolute;
top: 0; left: 0;
}
/* NAME */
.rev-name {
font-size: 13px;
font-weight: 600;
color: #f5f5f5;
line-height: 1.2;
}
/* ROLE */
.rev-role {
font-size: 11px;
color: rgba(245,200,66,0.55);
margin-top: 3px;
letter-spacing: 0.5px;
}
/* HINT BAR */
.rev-hint {
text-align: center;
margin-top: 30px;
font-size: 11px;
color: rgba(255,255,255,0.2);
letter-spacing: 2px;
text-transform: uppercase;
}
.rev-hint-dot {
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: #f5c842;
opacity: 0.4;
vertical-align: middle;
margin: 0 8px;
}
/* MOBILE */
@media (max-width: 768px) {
.rev-card {
width: 240px;
padding: 18px 16px 14px;
}
.rev-script {
font-size: 32px;
}
.rev-title {
font-size: 16px;
}
}
.stl-bar {
flex: 1;
height: 3px;
background: linear-gradient(to right, transparent, rgb(212, 175, 55));
max-width: 150px;
}
.stl-bar:last-child {
background: linear-gradient(to left, transparent, rgb(212, 175, 55));
}
.contact{
padding-bottom:40px !important;
}
.contact-container{
margin-bottom:0 !important;
}
.message-box{
margin-bottom:0 !important;
}
footer{
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block;
}
/* Ensures the body stretches fully to the bottom if the screen is taller than the content */
html, body {
min-height: 100vh;
}
section{
min-height:auto !important;
}
/* =========================================
PERFECT SECTION GAPS (REELS -> FILMS -> PHOTOS)
========================================= */
/* 1. Gap from bottom of Reels to 'Short Films' Heading */
.reels-section .reel-row-wrapper:last-child {
margin-bottom: 55px !important;
}
/* 2. Gap from bottom of Films to 'Photos & Posters' Heading */
.films-grid {
padding-bottom: 35px !important; /* 35px padding here... */
}
.photo-section {
padding-top: 20px !important; /* ...plus 20px padding here = 55px total gap */
}
@media(max-width: 768px){
.nav-center, .talk-btn { display: none; }
.scroll-btn.left { left: 5px; }
.scroll-btn.right { right: 5px; }
.hamburger {
display: flex;
flex-direction: column;
gap: 5px;
background: transparent;
border: none;
cursor: pointer;
z-index: 99999;
}
.hamburger span {
display: block;
width: 28px;
height: 2px;
background: #d4af37;
border-radius: 2px;
transition: 0.3s;
}
.nav-mobile-menu {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background: rgba(5,1,15,0.97);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
z-index: 9998;
transform: translateX(100%);
transition: 0.4s ease;
}
.nav-mobile-menu.open {
transform: translateX(0);
}
.nav-mobile-menu a {
color: white;
font-size: 1.5rem;
text-decoration: none;
font-family: 'Cinzel', serif;
letter-spacing: 3px;
}
.nav-mobile-menu .talk-btn-mobile {
padding: 14px 34px;
border-radius: 14px;
border: 1px solid rgba(139,92,246,0.8);
background: transparent;
color: white;
font-size: 1rem;
margin-top: 10px;
}
}
@media(min-width: 769px){
.hamburger { display: none; }
.nav-mobile-menu { display: none; }
}
/* =========================================
Mobile Menu Base Styles (OUTSIDE media query)
========================================= */
.nav-mobile-menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100vh;
background-color: #fff; /* Apne hisaab se color change kar lena */
transform: translateX(100%); /* Hidden by default */
transition: transform 0.4s ease-in-out;
z-index: 9999;
display: flex;
flex-direction: column;
padding: 20px;
}
/* Jab active class lagegi tab slide in hoga */
.nav-mobile-menu.active {
transform: translateX(0);
}
.mobile-menu-header {
display: flex;
justify-content: flex-end;
}
.close-btn {
font-size: 40px;
background: none;
border: none;
cursor: pointer;
color: #333;
}
.mobile-nav-links {
list-style: none;
margin-top: 50px;
padding: 0;
text-align: center;
}
.mobile-nav-links li {
margin: 20px 0;
}
.mobile-nav-links a {
text-decoration: none;
font-size: 24px;
color: #333;
}
/* Hamburger default hidden for desktop */
.hamburger {
display: none;
cursor: pointer;
flex-direction: column;
gap: 5px;
}
.hamburger span {
width: 30px;
height: 3px;
background-color: #333;
transition: 0.3s;
}
/* Purani media query ko hata kar ye wala daal de */
@media (max-width: 768px) {
.navbar {
position: relative; /* Hamburger ko right side align karne ke liye mandatory hai */
display: flex;
justify-content: center; /* Logo ko mobile pe ekdum center mein rakhega */
align-items: center;
padding: 15px 20px; /* Height normal rakhega taaki content upar aa jaye */
min-height: 70px; /* Ek standard height fix kar di */
width: 100%;
box-sizing: border-box;
}
.nav-center, .talk-btn {
display: none; /* Desktop elements ko hide kiya */
}
.hamburger {
display: flex !important; /* Mobile pe icon dikhega */
position: absolute; /* Logo se alag karke free kiya */
right: 20px; /* Right side se thoda gap */
top: 50%; /* Vertically perfectly center karne ke liye */
transform: translateY(-50%);
z-index: 1000; /* Taaki kisi cheez ke peeche na chupe */
}
.nav-mobile-menu {
position: fixed;
top: 0;
left: 0; /* right: 0 ki jagah left: 0 kar de taaki screen ke kone se lock ho jaye */
width: 100%;
height: 100vh;
box-sizing: border-box; /* Padding ko andar hi rakhega */
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.nav-mobile-menu.active {
transform: translateX(0);
}
/* Reel, Film, Photo, Thumbnail wale headings ko mobile pe set karne ke liye */
.work-section h3,
.work-item h3,
.work-card h3,
.work-section h4,
.work-card h4 {
font-size: 18px !important; /* Mobile ke hisaab se perfect compact size */
line-height: 1.3 !important; /* Lines ke beech ka gap sahi rakhega */
margin-top: 12px !important; /* Heading ke upar thoda space */
margin-bottom: 6px !important; /* Heading ke neeche thoda space */
letter-spacing: 0.5px !important;/* Text spacing ko sahi karega */
}
/* Agar heading ke upar/neeche koi bada gap aa raha hai toh usebhi adjust karo */
.work-item, .work-card {
margin-bottom: 20px !important; /* Har ek category block ke beech ka gap */
}
}
/* ==========================================================
EXACT MOBILE FIXES (JUST APPEND AT THE END OF STYLE.CSS)
========================================================== */
@media screen and (max-width: 768px) {
.loader h1 {
font-size: 2.8rem !important; /* Mobile screen ke liye perfect size */
letter-spacing: 5px !important; /* Letter gap halka sa kam */
line-height: 0.9 !important; /* Dono lines ke beech ka gap ekdum sateek */
}
/* 1. THREE BAR (HAMBURGER) & MENU FIX */
.hamburger {
display: flex !important;
z-index: 10005 !important; /* Sabse upar dikhega */
}
.hamburger span {
pointer-events: none; /* Icon click bug fix */
}
.nav-mobile-menu {
z-index: 10004 !important;
width: 100% !important; /* Screen ke andar lock rahega */
left: 0 !important;
}
/* 2. CIRCLE RINGS FULL VISIBILITY FIX (RESET DESKTOP OVERRIDES) */
.skills {
padding: 30px 10px !important;
overflow: hidden !important;
}
.skills-container {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* Ek line me strictly 3 items */
gap: 25px 10px !important; /* Rows me 25px aur columns me 10px ka gap */
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
}
.skill-circle {
grid-column: auto !important; /* Desktop ka grid coordinate system khatam */
margin-top: 0 !important; /* Nth-child wala -35px gap poora saaf */
width: 90px !important; /* Mobile ke liye perfect balanced size */
height: 90px !important;
position: relative !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.circle {
width: 90px !important; /* SVG ring ko circle ke box me fit kiya */
height: 90px !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
transform: rotate(-90deg) !important; /* Original orientation barkarar */
}
.skill-circle::after {
display: none !important; /* Desktop ka shadow glow mobile pe hide kiya taaki overlap na ho */
}
.skill-center {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.skill-center img {
width: 20px !important; /* Icon size perfect compact */
height: 20px !important;
margin-bottom: 3px !important;
}
.skill-center h3 {
font-size: 9px !important; /* Text bilkul box ke andar set rahega */
margin-bottom: 1px !important;
white-space: nowrap !important;/* KineMaster ya VN Editor line break nahi karega */
}
.skill-center span {
font-size: 9px !important;
color: #d4af37 !important;
}
/* 3. WORK HEADINGS (REEL, FILM, PHOTO, THUMBNAIL) TEXT SIZE FIX */
.section-title h2,
.section-title-line h2,
.reels-section h2,
.films-section h2,
.photo-section h2,
.work-heading h2 {
font-size: 20px !important; /* Laptop pe bada dikhega, mobile pe ekdum perfect compact size */
letter-spacing: 1px !important;
}
.video-overlay h3,
.photo-overlay h3,
.work-overlay h3 {
font-size: 15px !important; /* Cards ke andar ka text size */
}
/* ==========================================================
FIX FOR image_fe0269.png (GAP REDUCTION FOR MOBILE)
========================================================== */
.hero {
padding-top: 50px !important; /* Top padding ko 140px se kam karke 90px kiya */
gap: 10px !important; /* Logo/upper text aur 'Welcome To' ke beech ka space tight kiya */
min-height: 85vh !important; /* 100vh ki wajah se jo extra space khich raha tha use kam kiya */
}
}
/* MOBILE START A PROJECT BUTTON TEXT COLOR FIX */
.talk-btn-mobile {
font-family: 'Cinzel', serif !important;
background: #8a2be2 !important; /* Button ko solid purple background dega */
color: #ffffff !important; /* Text ko bilkul safed dikhayega */
border: none !important; /* Extra borders hata dega */
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ==========================================================
EXACT FIXES FOR IMAGES (APPEND AT THE VERY END OF STYLE.CSS)
========================================================== */
@media screen and (max-width: 768px) {
/* 1st Image Fix (Screenshot 2026-06-01 172820.png) */
/* Yellow text 'Editing Softwares & Applications' ka size mobile me chota karne ke liye */
.skills-heading h2 {
font-size: 26px !important;
line-height: 1.2 !important;
}
/* 2nd Image Fix (Screenshot 2026-06-01 172919.png) */
/* 'My Works' aur 'Featured Reels' ke beech ka faltu gap khatam karne ke liye */
.work {
padding: 40px 8% 0px 8% !important; /* Bottom padding kam ki */
}
.section-title {
padding: 10px 8% 15px 8% !important; /* Upper aur lower padding tight ki */
}
/* 3rd Image Fix (Screenshot 2026-06-01 172951.png) */
/* 'Welcome To' ka font size bada karne aur gap kam karne ke liye */
.welcome-text {
font-size: 46px !important; /* Size increased for readability */
margin-bottom: 5px !important; /* Gap reduced between 'Welcome To' and 'THE CINECLICKS' */
}
}