.brandlogo-font {
  font-family: "Sargento Gorila";
  font-style: 2rem;
  padding: 25px;
}
.brandlogo-font-main {
  font-family: "Sargento Gorila";
  font-style: 2rem;
}

header {
  padding: 0 50px;
}

#header-links {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 20px 40px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.2);
  transition: all ease 0.2s;
  margin-right: -60px;
}

#header-links * {
  transition: all ease 0.2s;
  cursor: pointer;
}

#start-a-project-button {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all ease 0.2s;
}

#start-a-project-button-nav {
  border: 2px solid #2ca77a;
  padding: 15px 30px;
  box-shadow: 0 2px 20px #2ca77a;
  border-radius: 50px;
  cursor: pointer;
  transition: all ease 0.2s;
}

#start-a-project-button:hover {
  border: 1px solid #2ca77a;
}

#nav-menu {
  background: rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(5px);
  transition: all 0.3s;
}

/* Faster navbar animation on mobile */
@media (max-width: 1024px) {
  #nav-menu {
    transition: all 0.15s ease-in-out;
  }
}

.glide__slides {
  animation: movereviews 220000ms linear infinite !important;
  width: 12840px;
}

/* Slower reviews animation on mobile */
@media (max-width: 1024px) {
  .glide__slides {
    animation: movereviews 110000ms linear infinite !important;
  }
}

/* Even slower on smaller mobile devices */
@media (max-width: 640px) {
  .glide__slides {
    animation: movereviews 80000ms linear infinite !important;
  }
}

@keyframes movereviews {
  to {
    transform: translate3d(-9450px, 0px, 0px);
  }
}

.brandlogo {
  height: 200px;
  object-fit: cover;

  height: 200px;
}

@media (width < 64rem) {
  header {
    padding: 0 20px;
  }
  #inner-header {
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0px 20px;
    border-radius: 50px;
  }
  .brandlogo {
    object-fit: cover;
    height: 100px;
    width: 100px;
  }
}

/* Ensure consistent alignment on mobile */
@media (max-width: 640px) {
  header #inner-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Align hero content with header padding */
  .container.mx-auto {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Comprehensive Responsive Design Improvements */

/* Mobile-first responsive breakpoints */
@media (max-width: 640px) {
  /* Mobile-specific improvements */
  .brandlogo-font {
    padding: 15px;
    font-size: 1.5rem;
  }

  #header-links {
    padding: 15px 25px;
    margin-right: -30px;
  }

  #start-a-project-button {
    padding: 8px 16px;
    font-size: 14px;
  }

  #start-a-project-button-nav {
    padding: 12px 24px;
    font-size: 14px;
  }

  /* Better text readability on mobile */
  #about-subheader-text {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    letter-spacing: 0.025em;
  }

  #about-header-text {
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
  }

  /* Better text readability on mobile */
  #why-westarted-subheader {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem;
  }

  /* Better header spacing on mobile */
  #where-we-started-header {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-top: 2rem !important;
    padding: 0 1rem;
  }

  /* Better image sizing on mobile */
  #why-westarted-image {
    height: 300px !important;
    border-radius: 0.5rem;
    margin-top: 1rem;
  }

  /* Better container spacing on mobile */
  .max-w-\[1400px\] {
    padding: 0 1.25rem;
  }

  /* Better section spacing on mobile */
  .mt-24 {
    margin-top: 4rem !important;
  }

  /* Better button responsiveness */
  #about-cta {
    width: 100% !important;
    max-width: 280px;
  }

  #about-cta .flex {
    padding: 12px 20px !important;
  }

  /* Improved spacing for mobile */
  section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* Better video responsiveness */
  video {
    object-position: center center;
  }

  /* Improved blur effects for mobile */
  .blur-sm {
    filter: blur(4px);
  }

  .blur-md {
    filter: blur(8px);
  }

  .blur-lg {
    filter: blur(12px);
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  /* Small tablet improvements */
  .brandlogo-font {
    padding: 20px;
    font-size: 1.75rem;
  }

  #header-links {
    padding: 18px 35px;
    margin-right: -45px;
  }

  #about-subheader-text {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  /* Improved spacing for small tablets */
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Better blur effects */
  .blur-sm {
    filter: blur(8px);
  }

  .blur-md {
    filter: blur(12px);
  }

  .blur-lg {
    filter: blur(16px);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet improvements */
  .brandlogo-font {
    padding: 22px;
    font-size: 1.875rem;
  }

  #header-links {
    padding: 20px 40px;
    margin-right: -60px;
  }

  #about-subheader-text {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  /* Improved spacing for tablets */
  section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1025px) {
  /* Desktop improvements */
  .brandlogo-font {
    padding: 25px;
    font-size: 2rem;
  }

  #header-links {
    padding: 20px 40px;
    margin-right: -60px;
  }

  /* Improved spacing for desktop */
  section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Improved container max-widths for better readability */
@media (max-width: 640px) {
  .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .container {
    max-width: 640px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 768px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .container {
    max-width: 1024px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1281px) {
  .container {
    max-width: 1280px;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Improved navigation menu responsiveness */
@media (max-width: 1024px) {
  #nav-menu {
    transition: all 0.15s ease-in-out;
  }

  #nav-menu.show {
    top: 0;
  }
}

/* Better hover states for touch devices */
@media (hover: none) {
  .hover\:text-\[\#2ca77a\]:hover {
    color: #2ca77a;
  }

  .group:hover .group-hover\:opacity-100 {
    opacity: 1;
  }
}

/* Improved accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Better focus states for keyboard navigation */
@media (prefers-reduced-motion: no-preference) {
  a:focus,
  button:focus {
    outline: 2px solid #2ca77a;
    outline-offset: 2px;
  }
}

/* Ensure content is visible by default in case JS fails */
body {
  opacity: 1 !important;
  transition: opacity 0.3s ease-in-out;
}

body.loaded {
  opacity: 1 !important;
}

header {
  opacity: 1 !important;
  transform: none !important;
}

/* Prevent layout shifts during loading */
* {
  box-sizing: border-box;
}

/* Ensure smooth font loading */
@font-face {
  font-family: "acari";
  src: url("./assets/AcariSans-Regular_1.woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "acari";
  src: url("./assets/AcariSans-Medium_1.woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "acari";
  src: url("./assets/AcariSans-SemiBold_1.woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "acari";
  src: url("./assets/AcariSans-ExtraBold.woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Sargento Gorila";
  src: url("/f.woff");
  font-display: swap;
}

/* Fallback for service card videos */
video {
  opacity: 1;
}

/* Hide loading artifacts */
.no-js video {
  opacity: 0;
}

/* Brands carousel animation */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.animate-scroll-left {
  animation: scroll-left 15s linear infinite;
  will-change: transform;
}

.animate-scroll-right {
  animation: scroll-right 15s linear infinite;
  will-change: transform;
}

.animate-scroll-left:hover,
.animate-scroll-right:hover {
  animation-play-state: paused;
}

/* Faster trusted brands animation on mobile */
@media (max-width: 1024px) {
  .animate-scroll-left {
    animation: scroll-left 8s linear infinite;
  }

  .animate-scroll-right {
    animation: scroll-right 8s linear infinite;
  }
}

/* Even faster on smaller mobile devices */
@media (max-width: 640px) {
  .animate-scroll-left {
    animation: scroll-left 6s linear infinite;
  }

  .animate-scroll-right {
    animation: scroll-right 6s linear infinite;
  }
}

/* Counter animation */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter {
  animation: countUp 0.6s ease-out;
}

/* Make brand logos black and white */
.brand-logo {
  filter: grayscale(100%) brightness(0) invert(1);
  transition: filter 0.15s ease;
}

.brand-logo:hover {
  filter: grayscale(100%) brightness(0) invert(1) opacity(100%);
}