/* Lexend */
@font-face {
  font-family: "Lexend";
  src: url("font/ttf/lexend-mega-latin-500-normal.ttf");
  font-weight: 700;
}
/* Lexend-nav */
@font-face {
  font-family: "Lexend-nav";
  src: url("font/ttf/lexend-mega-latin-300-normal.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Calibri";
  src: url("font/calibri.woff2") format("woff2"),
    url("font/calibri.woff") format("woff"),
    url("font/calibri.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Navbar Base */
.navbar {
  transition: all 0.3s ease;
}

/* Transparent navbar with backdrop blur on scroll */
.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

/* Nav links style */
.navbar-nav .nav-link {
  position: relative;
  color: #fff;
  transition: all 0.3s ease;
}

/* Hover underline animation */
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: #f5bd07;
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
  width: 100%;
}

/* ===== Mobile Navbar Styles ===== */
@media (max-width: 991px) {
  /* White background when mobile menu opens */
  .navbar-collapse.show {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    transition: all 0.3s ease;
    border-radius: 0 0 12px 12px;
    padding: 10px 15px;
  }

  /* Change link colors for white background */
  .navbar-nav .nav-link {
    color: #000 !important;
  }

  .navbar-nav .nav-link::after {
    background-color: #f5bd07;
  }

  /* Adjust toggler appearance */
  .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.2);
  }

  .navbar-toggler-icon {
    filter: invert(0);
  }
}

/* ===== Optional: Navbar transition when switching scroll state ===== */
.navbar {
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease,
    padding 0.3s ease;
}


/* crousel  */
/* Fix unwanted horizontal scroll or right-side gap only for carousel */
html,
body {
  overflow-x: hidden !important;
}

/* Carousel wrapper fix */
#ftlCarousel {
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Inner carousel items */
#ftlCarousel .carousel-inner {
  width: 100%;
  overflow: hidden;
}

/* Each slide and image */
#ftlCarousel .carousel-item {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#ftlCarousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep captions responsive */
#ftlCarousel .carousel-caption {
  padding: 0 15px;
}

/* --- OPTIONAL: improve text sizing on small screens --- */
@media (max-width: 768px) {
  #ftlCarousel h1 {
    font-size: 1.8rem;
  }
  #ftlCarousel p {
    font-size: 1rem;
  }
  #ftlCarousel a.btn {
    font-size: 0.9rem;
    padding: 10px 18px;
  }
}

.carousel-item img {
  max-width: 100%;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* about section  */

/* Reel video hover effect */
.video-container:hover .video-overlay i {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

.video-overlay {
  pointer-events: none;
}

.video-container video {
  border-radius: 1rem;
  object-fit: cover;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .video-container {
    width: 220px;
    height: 392px; /* maintain 9:16 ratio */
  }
}

/* service section  */

/* Card hover effect */
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.service-card h5 {
  font-family: "Playwrite AU VIC", cursive;
}

.icon-wrapper {
  transition: transform 0.3s;
}

.service-card:hover .icon-wrapper {
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .icon-wrapper {
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
  }
}

/* client section  */

.client-logo {
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: grayscale(100%);
}

.client-wrapper:hover .client-logo {
  transform: scale(1.1);
  filter: grayscale(0%);
}

.client-wrapper {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.client-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

/* line  */
.sketch-underline {
  position: relative;
  display: inline-block;
}

.sketch-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px; /* distance from text */
  width: 100%;
  height: 10px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="10"><path d="M0 5 Q20 0 40 5 T100 5" stroke="red" stroke-width="3" fill="transparent" stroke-linecap="round"/></svg>')
    no-repeat;
  background-size: 100% 100%;
}