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

body {
font-family: 'verdena', tahoma;
background: #0b1a2b;
color: #fff;
}

/* NAVBAR */
.navbar {
display: flex;
flex-direction: column;
background: rgba(8, 18, 31, 0.7);
padding: 10px 20px;
}

.nav-top {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo-img {
height: 50px;
}

.menu-toggle {
font-size: 24px;
cursor: pointer;
}

nav {
display: none;
flex-direction: column;
margin-top: 10px;
}

nav a {
padding: 12px;
text-decoration: none;
color: white;
border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* HERO */
.hero {
  position: relative;
  height: 90vh;

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

  /* IMAGE BACKGROUND */
  background: url('../images/hero.jpg') center/cover no-repeat;

  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.6); /* controls darkness */
}

/* OVERLAY (THIS CONTROLS OPACITY) /
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:blur;
}

/* CONTENT */
.hero-content {
position: relative;
z-index: 2;
}

.hero h1 {
font-size: 60px;
margin-bottom: 20px;
}

.hero p {
font-size: 20px;
opacity: 0.8;
}

/* BUTTON */
.btn {
display: inline-block;
margin-top: 15px;
padding: 12px 25px;
background: #ff9900;
color: black;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
}

/* SERVICES */
.services {
padding: 60px 20px;
text-align: center;
}

.services h2 {
margin-bottom: 30px;
}

.service-grid {
display: grid;
gap: 20px;
}

.card {
background: #13263a;
border-radius: 10px;
overflow: hidden;
transition: 0.3s;
}

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

.card h3 {
padding: 15px;
}

.card:hover {
transform: translateY(-10px);
background: #1c3a57;
}

/* WHY */
.why {
padding: 60px 20px;
text-align: center;
}

.why-grid {
display: grid;
gap: 15px;
margin-top: 20px;
}

/* CTA */
.cta {
background: #ff9900;
color: black;
text-align: center;
padding: 50px 20px;
}

/* WHATSAPP */
.whatsapp {
position: fixed;
bottom: 15px;
right: 15px;
background: green;
padding: 12px;
border-radius: 50%;
}

/* FOOTER */
footer {
text-align: center;
padding: 10px;
background: #08121f;
}

/* DESKTOP */
@media(min-width: 768px){

.navbar {
flex-direction: row;
justify-content: space-between;
align-items: center;
}

nav {
display: flex !important;
flex-direction: row;
}

nav a {
border: none;
margin-left: 20px;
}

.service-grid {
grid-template-columns: repeat(3,1fr);
}

.hero h1 {
font-size: 40px;
}
}
nav {
display: none;
}

nav.active {
display: flex;
}
html {
scroll-behavior: smooth;
}
.gallery-preview {
padding: 60px 20px;
text-align: center;
}

.gallery-preview .btn {
margin-top: 20px;
}
.gallery {
padding: 40px;
}

.gallery-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 10px;
}

.gallery img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
transition: 0.3s;
}

.gallery img:hover {
transform: scale(1.05);
}

/* DESKTOP /
@media(min-width:768px){
.gallery-grid {
grid-template-columns: repeat(4,1fr);
}
}
/ LIGHTBOX */
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
}

#lightbox img {
max-width: 90%;
max-height: 80%;
border-radius: 10px;
}
#lightbox img {
animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
from {
transform: scale(0.7);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.filter-buttons {
text-align: center;
margin-bottom: 20px;
}

.filter-buttons button {
margin: 5px;
padding: 8px 15px;
border: none;
background: orange;
color: white;
cursor: pointer;
}
.slider-container {
position: relative;
max-width: 400px;
margin: auto;
overflow: hidden;
}

.compare-section {
  padding: 60px 20px;
  text-align: center;
}

.compare-section h2 {
  margin-bottom: 20px;
}

/* CONTAINER */
.compare-container {
  position: relative;
  max-width: 500px;
  margin: auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

/* IMAGES */
.before-img,
.after-img {
  width: 100%;
  display: block;
}

/* AFTER WRAPPER */
.after-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

/* LABELS */
.label {
  position: absolute;
  top: 10px;
  background: rgba(0,0,0,0.6);
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
}

.before-label {
  right: 10px;
}

.after-label {
  left: 10px;
}
.after-wrapper {
  animation: slideAuto 8s infinite ease-in-out;
}

@keyframes slideAuto {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}
.gallery-item p {
font-size: 13px;
margin-top: 5px;
opacity: 0.8;
}
.call-btn {
position: fixed;
bottom: 80px;
right: 15px;
background: orange;
color: white;
padding: 12px;
border-radius: 50%;
font-size: 18px;
}
.highlights {
display: flex;
justify-content: space-around;
background: orange;
padding: 15px;
font-size: 14px;
}

.highlights div {
text-align: center;
}
.highlights {
overflow: hidden;
background: orange;
padding: 15px 0;
}

.highlights-track {
display: flex;
gap: 40px;
width: max-content;
animation: scrollLeft 12s linear infinite;
}

.highlights-track div {
white-space: nowrap;
font-size: 20px;
}

/* ANIMATION */
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.highlights {
background: orange;
padding: 15px 0;
position: relative;
overflow: hidden;
}

/* WRAPPER */
.highlights-wrapper {
position: relative;
overflow: hidden;
}

/* FADE EDGES (PREMIUM LOOK) */
.highlights-wrapper::before,
.highlights-wrapper::after {
content: "";
position: absolute;
top: 0;
width: 60px;
height: 100%;
z-index: 2;
}

.highlights-wrapper::before {
left: 0;
background: linear-gradient(to right, orange, transparent);
}

.highlights-wrapper::after {
right: 0;
background: linear-gradient(to left, orange, transparent);
}

/* TRACK */
.highlights-track {
display: flex;
gap: 60px;
width: max-content;
animation: scrollLeft 14s linear infinite;
}

/* TEXT STYLE */
.highlights-track div {
white-space: nowrap;
font-size: 14px;
color: #000;
position: relative;
}

/* GLOW DOT */
.highlights-track div::before {
content: "●";
color: #ff9900;
margin-right: 8px;
text-shadow: 0 0 8px #ff9900;
}

/* ANIMATION */
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.highlights-track:active {
animation-play-state: paused;
}
.testimonials {
padding: 60px 20px;
background: #0b1a2b;
text-align: center;
}

.testimonials h2 {
margin-bottom: 30px;
}

/* CONTAINER */
.testimonial-container {
overflow: hidden;
position: relative;
}

/* TRACK */
.testimonial-track {
display: flex;
gap: 20px;
width: max-content;
animation: slideTestimonial 18s linear infinite;
}

/* CARD */
.testimonial-card {
background: #13263a;
padding: 20px;
border-radius: 10px;
width: 250px;
text-align: left;
}

.testimonial-card p {
font-size: 14px;
margin-bottom: 10px;
}

.testimonial-card h4 {
font-size: 13px;
color: #ff9900;
}

/* ANIMATION /
@keyframes slideTestimonial {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/ CONTACT HERO */
.contact-hero {
text-align: center;
padding: 50px 20px;
background: #0b1a2b;
}

.contact-hero h1 {
margin-bottom: 10px;
}

/* CONTACT OPTIONS */
.contact-options {
display: grid;
gap: 15px;
padding: 20px;
}

.contact-box {
background: #13263a;
padding: 20px;
border-radius: 8px;
text-decoration: none;
color: white;
display: block;
}

.contact-box span {
display: block;
margin-top: 5px;
font-size: 13px;
opacity: 0.8;
}

/* FORM */
.contact-form {
padding: 40px 20px;
text-align: center;
}

.contact-form form {
max-width: 400px;
margin: auto;
display: flex;
flex-direction: column;
}

.contact-form input,
.contact-form textarea {
margin: 10px 0;
padding: 12px;
border-radius: 5px;
border: none;
}

.contact-form button {
padding: 12px;
background: orange;
border: none;
color: white;
cursor: pointer;
}

/* DESKTOP /
@media(min-width:768px){
.contact-options {
grid-template-columns: repeat(3,1fr);
}
}
/ SERVICES HERO */
.services-hero {
text-align: center;
padding: 50px 20px;
background: #0b1a2b;
}

/* SERVICES LIST */
.services-list {
display: grid;
gap: 20px;
padding: 20px;
}

.service-card {
background: #13263a;
border-radius: 10px;
overflow: hidden;
text-align: center;
}

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

.service-card h2 {
margin: 10px 0;
}

.service-card p {
padding: 0 15px;
font-size: 14px;
}

.service-card .btn {
margin: 15px 0;
}

/* DESKTOP */
@media(min-width:768px){
.services-list {
grid-template-columns: repeat(3,1fr);
}
}
.about-hero {
text-align: center;
padding: 50px 20px;
background: #0b1a2b;
}

/* PROFILE */
.about-profile {
text-align: center;
padding: 40px 20px;
}

.profile-img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 5%;
border: 4px solid orange;
margin-bottom: 15px;
box-shadow: 0 0 15px rgba(255,153,0,0.6);
}

.title {
color: orange;
margin-bottom: 10px;
}

/* STORY */
.about-story {
padding: 40px 20px;
max-width: 800px;
margin: auto;
text-align: center;
}

.about-story p {
margin-bottom: 15px;
line-height: 1.6;
}

/* STATS */
.about-stats {
display: flex;
justify-content: space-around;
padding: 40px 20px;
background: #13263a;
text-align: center;
}

.about-stats h2 {
color: orange;
}

/* WHY */
.about-why {
padding: 40px 20px;
text-align: center;
}

/* MOBILE /
@media(max-width:768px){
.about-stats {
flex-direction: column;
gap: 20px;
}
}
.location-text {
font-size: 15px;
color: skyblue;
text-align: center;
margin-top: 12px;
}
/ FAQ HERO */
.faq-hero {
text-align: center;
padding: 50px 20px;
background: #0b1a2b;
}

/* FAQ SECTION */
.faq {
padding: 20px;
max-width: 800px;
margin: auto;
}

/* FAQ ITEM */
.faq-item {
background: #13263a;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
}

/* QUESTION */
.faq-question {
padding: 15px;
cursor: pointer;
font-weight: bold;
position: relative;
}

/* PLUS ICON */
.faq-question::after {
content: "+";
position: absolute;
right: 15px;
}

/* ANSWER */
.faq-answer {
display: none;
padding: 15px;
font-size: 14px;
border-top: 1px solid rgba(255,255,255,0.1);
}

/* ACTIVE STATE */
.faq-item.active .faq-answer {
display: block;
}

.faq-item.active .faq-question::after {
content: "-";
}
.main-nav a.active {
color: orange;
}
.navbar {
position: sticky;
top: 0;
z-index: 1000;
}
html {
scroll-behavior: smooth;
}
#scrollProgress {
position: fixed;
top: 0;
left: 0;
height: 4px;
width: 0%;
background: orange;
z-index: 9999;
transition: width 0.1s;
}
/* INTRO SCREEN */
#intro {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #08121f;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}

/* LOGO */
.intro-logo {
width: 80px;
margin-bottom: 15px;
animation: zoomIn 1s ease;
}

/* TEXT */
#intro h1 {
color: white;
font-size: 20px;
animation: fadeIn 2s ease;
}

/* ANIMATIONS */
@keyframes zoomIn {
from { transform: scale(0.5); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* STARS */
.stars {
color: gold;
margin-bottom: 10px;
font-size: 14px;
}

/* CLIENT INFO */
.client {
display: flex;
align-items: center;
margin-top: 15px;
}

.client img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
object-fit: cover;
}

.client h4 {
font-size: 14px;
}

.client span {
font-size: 12px;
opacity: 0.7;
}
/* WRAPPER */
.gallery-wrapper {
overflow: hidden;
position: relative;
margin-top: 20px;
}

/* TRACK */
.gallery-track {
display: flex;
gap: 15px;
width: max-content;
animation: scrollGallery 20s linear infinite;
}

/* IMAGES */
.gallery-track img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 8px;
}

/* ANIMATION /
@keyframes scrollGallery {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/ FADE EDGES */
.gallery-wrapper::before,
.gallery-wrapper::after {
content: "";
position: absolute;
top: 0;
width: 50px;
height: 100%;
z-index: 2;
}

.gallery-wrapper::before {
left: 0;
background: linear-gradient(to right, #0b1a2b, transparent);
}

.gallery-wrapper::after {
right: 0;
background: linear-gradient(to left, #0b1a2b, transparent);
}
.gallery-track:hover {
animation-play-state: paused;
}
/* BASE (hidden state) */
.fade-in,
.slide-up,
.zoom-in {
opacity: 0;
transition: all 0.8s ease;
}

/* SHOW */
.show {
opacity: 1;
transform: none;
}

/* TYPES */
.fade-in {
transform: translateY(30px);
}

.slide-up {
transform: translateY(50px);
}

.zoom-in {
transform: scale(0.9);
}
.gallery {
  padding: 40px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.3s;
}

.gallery-item img:hover {
  transform: scale(1.05);
}

/* DESKTOP */
@media(min-width:768px){
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}
.testimonial-container {
  overflow: hidden;
  position: relative;
}

.testimonial-track {
  display: flex;
  gap: 20px;
  width: max-content; /* IMPORTANT */
  animation: scrollTestimonial 20s linear infinite;
}

.testimonial-card {
  background: #13263a;
  padding: 20px;
  border-radius: 10px;
  width: 250px;
  flex-shrink: 0; /* VERY IMPORTANT */
}

/* ANIMATION */
@keyframes scrollTestimonial {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.gallery-wrapper {
  overflow: hidden;
  position: relative;
}

.gallery-track {
  display: flex;
  gap: 20px;
  width: max-content; /* VERY IMPORTANT */
  animation: scrollGallery 20s linear infinite;
}

.gallery-track img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

/* ANIMATION */
@keyframes scrollGallery {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.why-section {
  padding: 60px 20px;
  text-align: center;
}

.why-section h2 {
  margin-bottom: 30px;
  font-size: 28px;
}

/* GRID */
.why-grid {
  display: grid;
  gap: 20px;
}

/* CARD */
.why-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  padding: 25px;
  border-radius: 15px;
  transition: 0.3s;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ICON */
.why-card .icon {
  font-size: 28px;
  margin-bottom: 10px;
}

/* TEXT */
.why-card h3 {
  margin-bottom: 10px;
  color: orange;
}

.why-card p {
  font-size: 14px;
  opacity: 0.8;
}

/* HOVER EFFECT */
.why-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(255,153,0,0.4);
}

/* DESKTOP */
@media(min-width:768px){
  .why-grid {
    grid-template-columns: repeat(4,1fr);
  }
}
.location-box {
  margin: 20px auto;
  padding: 12px 20px;
  background: rgba(255,255,255,0.05);
  border-left: 4px solid orange;
  max-width: 400px;
  font-size: 14px;
  border-radius: 6px;
  text-align: center;
}
.hero h1 {
  font-size: 36px;
  font-weight: bold;
  line-height: 1.3;
}

.hero p {
  font-size: 16px;
  margin-top: 10px;
  opacity: 0.9;
}
.hero-content {
  animation: fadeUp 1s ease forwards;
}

@keyframes fadeUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.hero-buttons {
  margin-top: 20px;
}
@media(max-width:768px){
  .hero {
    height: 80vh;
    padding: 0 15px;
  }

  .hero h1 {
    font-size: 60px;
  }
  .hero h1 {
  text-shadow: 0 0 20px rgba(0,0,0,0.6);
}

  .hero p {
    font-size: 25px;
  }
}
.btn {
  transition: 0.3s;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255,153,0,0.5);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    rgba(11, 26, 43, 0.8),
    rgba(255, 153, 0, 0.2)
  );
}
.scroll-down {
  position: absolute;
  bottom: 20px;
  font-size: 20px;
  animation: bounce 1.5s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
/* TRUST BADGES */
.trust-badges {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;

  background: #13263a;
  padding: 15px;
  text-align: center;
}

.trust-item {
  background: rgba(255,255,255,0.05);
  padding: 10px 15px;
  border-radius: 5px;
  flex: 1;
  min-width: 140px;
}

/* STATS */
.stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
  padding: 40px 20px;
  background: #0b1a2b;
}

.stat h2 {
  font-size: 32px;
  color: orange;
}

.stat p {
  font-size: 14px;
  margin-top: 5px;
}

/* MOBILE */
@media(max-width:768px){
  .stats {
    flex-direction: column;
    gap: 20px;
  }
}
.cta-premium {
  background: linear-gradient(135deg, #ff9900, #ff6600);
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.cta-premium h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.cta-premium p {
  font-size: 14px;
  margin-bottom: 20px;
}

.cta-buttons .btn {
  margin: 5px;
}
.coverage {
  margin-top: 15px;
  font-size: 14px;
  color: #ccc;
}
/* LOCATION TEXT (VISIBLE + STYLED) */
.location-text {
  margin: 20px auto;
  padding: 12px 18px;
  max-width: 600px;

  font-size: 14px;
  line-height: 1.6;
  text-align: center;

  color: #fff;
  background: rgba(255,255,255,0.05);
  border-left: 4px solid orange;
  border-radius: 6px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* OPTIONAL ICON STYLE */
.location-text::before {
  content: "📍 ";
}

/* SEO PARAGRAPH (CLEAN + SUBTLE) */
.seo-text {
  max-width: 700px;
  margin: 20px auto;

  font-size: 13px;
  line-height: 1.6;
  text-align: center;

  color: #ccc;
  opacity: 0.9;
}
/* COVERAGE TEXT (UNDER HERO) */
.coverage {
  margin-top: 15px;
  font-size: 14px;
  text-align: center;

  color: #fff;
  opacity: 0.9;

  padding: 8px 14px;
  display: inline-block;

  background: rgba(0,0,0,0.4);
  border-radius: 20px;
  backdrop-filter: blur(5px);
}
.float-btn {
  position: fixed; /* MUST be fixed */
  right: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;

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

  color: white;
  font-size: 20px;
  text-decoration: none;

  z-index: 9999; /* VERY IMPORTANT */
}

.whatsapp-btn {
  bottom: 20px;
  background: #25D366;
}

.call-btn {
  bottom: 80px;
  background: orange;
}
/* BRAND WRAPPER */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* LOGO */
.logo-img {
  height: 70px;
  margin-right: 10px;
}

/* NAME */
.brand-name {
  font-size: 30px;
  font-weight: bold;
  color: white;
  text-align: center;
}

/* HOVER EFFECT */
.brand:hover .brand-name {
  color: orange;
}
.fb-page {
  margin-top: 20px;
}