body { background-color: #0f0f0f; font-family: 'Inter', sans-serif; }

.loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; z-index: 9999; overflow: hidden; animation: hideLoader 0.5s ease forwards; animation-delay: 1s; }

.loader span { flex: 1; background: #ff462e; transform-origin: top; animation: shrink 1s ease forwards; }

.loader span:nth-child(1) { animation-delay: 0s; }
.loader span:nth-child(2) { animation-delay: 0.15s; }
.loader span:nth-child(3) { animation-delay: 0.3s; }
.loader span:nth-child(4) { animation-delay: 0.45s; }
.loader span:nth-child(5) { animation-delay: 0.6s; }

@keyframes shrink {
	from { transform: scaleY(1); }
	to { transform: scaleY(0); }
}

@keyframes hideLoader {
	to { opacity: 0; visibility: hidden; }
}

.custom-navbar { padding: 20px 0; transition: 0.3s ease; background: transparent; }
.navbar .nav-link { font-size: 18px; transition: color 0.3s ease; }
.navbar.scrolled { background: #000; padding: 12px 0; }
.logo { height: auto; max-height: 100px; width: auto; max-width: 100%; transition: all 0.3s ease; }

.hero-section { height: 100vh; background: #000000; background-size: cover; position: sticky; top: 0; z-index: 1; }

.hero-section .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity:1; z-index: 2; }
.hero-section .hero-content { position: relative; z-index: 3; }

.hero-section .hero-content .hero-title { font-size: 5rem; font-weight: 700; line-height: 1.1; }
.hero-section .hero-content .hero-subtitle { font-size: 1.3rem; color: #aaa; }

.hero-section .hero-video-desktop{display: block;}
.hero-section .hero-video-mobile{display: none;}
/* ================= ABOUT SECTION ================= */

.about-section { background-color: #ffffff; position: relative; z-index: 2; }
.about-image-wrapper { overflow: hidden; border-radius: 20px; }
.about-image { width: 100%; transition: transform 0.4s ease; }
.about-title { font-size: 2.8rem; font-weight: 700; }
.about-text { color: #4b4b4b; font-size: 1.1rem; line-height: 1.7; }
/* ================= WORK SECTION ================= */

.work-section { background-color: #ffffff; z-index: 2; position: relative; }
.section-title { font-size: 3rem; font-weight: 700; }
.section-subtitle { color: #fcd137; font-size: 1.1rem; }
.work-card { position: relative; overflow: hidden; border-radius: 20px; cursor: pointer; background: #111; transition: transform 0.4s ease; }
.work-image { overflow: hidden; }
.work-image img { width: 100%; transition: transform 0.6s ease; }
.work-card:hover img { transform: scale(1.08); }
.work-content { padding: 20px; }
.work-content h4 { margin-bottom: 5px; }
.work-content p { color: #4b4b4b; margin-bottom: 0; }



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

.services-section { background-color: #0f0f0f; position: relative; z-index: 2; color: #ffffff; }
.service-card { position: relative; padding: 40px; background: #151515; border-radius: 20px; height: 100%; transition: all 0.4s ease; overflow: hidden; }
.service-card:hover { transform: translateY(-10px); background: #1c1c1c; }
.service-number { font-size: 4rem; font-weight: 700; color: rgba(255,255,255,0.12); position: absolute; top: 20px; right: 30px; }
.service-card h4 { font-size: 1.4rem; margin-bottom: 15px; }
.service-card p { color: #cccccc; margin-bottom: 0; }

/* ================= TESTIMONIALS ================= */

.testimonials-section { background: #0f0f0f; overflow: hidden; position: relative; z-index: 2; }
.testimonial-wrapper { position: relative; width: 100%; overflow: hidden; }
.testimonial-track { display: flex; transition: transform 0.6s ease; }
.testimonial-item { min-width: 100%; padding: 0 20%; }
.testimonial-text { font-size: 1.8rem; font-weight: 500; line-height: 1.6; margin-bottom: 30px; }
.testimonial-author { color: #aaa; font-weight: 400; }

.showcase { position: sticky; top: 0; z-index: 2; }
/* ================= FAQ ================= */
.faq-section { background: #ffffff; position: relative; z-index: 2; }
.faq-label { font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.faq-label .dot { width: 10px; height: 10px; background: #ff462e; border-radius: 50%; }
.faq-item { border-bottom: 1px solid #ddd; }
.faq-question { width: 100%; background: none; border: none; padding: 25px 0; display: flex; align-items: center; text-align: left; font-size: 18px; font-weight: 500; cursor: pointer; transition: 0.3s ease; }
.faq-number { width: 60px; color: #777; }
.faq-text { flex: 1; }
.faq-icon { font-size: 24px; transition: transform 0.3s ease; }
.faq-answer { padding: 0 0 20px 60px; color: #666; font-size: 16px; line-height: 1.6; }
/* Rotate icon when open */
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }

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

.cta-section { position: relative; padding: 140px 0; background: #eeeeee; overflow: hidden; position: relative; z-index: 2; }
.cta-overlay { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%); filter: blur(80px); z-index: 0; }
.cta-title { font-size: 4.5rem; font-weight: 700; line-height: 1.2; }
.cta-subtitle { color: #aaa; font-size: 1.2rem; }
.cta-btn { border-radius: 50px; transition: all 0.3s ease; }
.cta-btn:hover { transform: translateY(-5px); }

.custom-footer { background: #f4f4f4; color: #111; position: relative; z-index: 2; }
.footer-title { font-size: 2.5rem; font-weight: 500; }
.footer-email { font-weight: 700; text-decoration: underline; color: #000; }
.footer-desc { color: #666; max-width: 450px; }
.btn-footer { background: #ff462e; color: #fff; border-radius: 40px; padding: 12px 30px; font-weight: 500; }
.footer-menu li { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #ddd; font-size: 18px; cursor: pointer; transition: 0.3s ease; }
.footer-menu li span { color: #999; margin-right: 15px; }
.footer-menu li:hover { padding-left: 10px; }
.footer-big-text { font-size: 12vw; font-weight: 900; letter-spacing: -5px; margin: 0; }
.footer-image img { width: 300px; border-radius: 20px; object-fit: cover; }
.footer-copy { font-size: 1.2rem; color: #777; border-top: solid 1px #cccccc; padding-top: 30px; }
@media (min-width: 992px) { .contact-btn { border-radius: 50px; transition: all 0.3s ease; background: #ffffff; color: #000000; padding-left: 20px !important; padding-right: 20px !important; }
	.contact-btn:hover { background: #aaaa00; color: #ffffff; transform: translateY(-3px); }
}

@media (max-width: 991px) {
	.navbar-collapse { background: #000000; padding: 20px 0; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-top: 10px; }
	.navbar-nav { gap: 0px !important; }
	.navbar .nav-link { font-size: 18px; padding: 15px 20px; border-bottom: dashed 1px #444444; }
	.navbar .nav-item:last-child .nav-link { border-bottom: none; }
	.logo { max-height: 80px; }

	.hero-section .hero-content .hero-title { font-size: 3.5rem; }
	.section-title, .about-title, .cta-title, .footer-title { font-size: 3.5rem; }
	.footer-email { font-size: 2.2rem; }
}

@media (max-width: 576px) {
	.logo { max-height: 60px; }
	.hero-section .hero-content .hero-title { font-size: 2.5rem; }
	.section-title, .about-title, .cta-title, .footer-title { font-size: 2.5rem; }
	.footer-email { font-size: 10vw; }

	.hero-section .hero-video-desktop { display: none; }
	.hero-section .hero-video-mobile { display: block; }
}

.btn { border-radius: 50px; }



@media (max-width: 991px) {
	.footer-big-text { font-size: 15vw; text-align: center; margin-bottom: 20px; }
	.footer-image img { width: 100%; }
	.footer-copy { flex-direction: column; gap: 10px; text-align: center; font-size: 1rem; }
}