:root {
  --primary: #168b8b;

  --secondary: #f59e0b;

  --black: #111111;

  --white: #ffffff;

  --bg: #fafafa;

  --gray: #666666;
}

.sora-<uniquifier > {
  font-family: "Sora", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.manrope-<uniquifier > {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 8px;
}

.logos {
  display: flex;

  align-items: center;

  gap: 90px;

  width: max-content;

  animation: marquee 12s linear infinite;

  will-change: transform;
}

.brand-logo {
  height: 48px;

  width: auto;

  max-width: 160px;

  object-fit: contain;

  /* filter: grayscale(100%); */

  /* opacity: 0.65; */

  transition: 0.35s;
}

.brand-logo:hover {
  filter: none;

  opacity: 1;

  transform: scale(1.08);
}

/* Marquee Animation */

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Floating Animation */

@keyframes float {
}

/* Gradient Animation */

@keyframes gradient {
}

/* Mouse Glow */

.glow {
}

/* Glass Effect (Reusable) */

.glass {
}

/* Noise Overlay */

.noise {
}

.floating-card {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* loader */

#loader{

position:fixed;

inset:0;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

transition:.6s;

}

.loader-content{

text-align:center;

}

.loader-logo{

width:90px;

margin: auto;

height:90px;

border-radius:22px;

animation:logoFloat 1.8s ease-in-out infinite;

}

.loader-content h2{

margin-top:25px;

font-size:34px;

font-weight:700;

}

.loader-content span{

color:#0f766e;

}

.loader-content p{

margin-top:10px;

color:#888;

}

.loader-bar{

width:220px;

height:6px;

margin:35px auto 0;

background:#eee;

border-radius:20px;

overflow:hidden;

}

.loader-bar span{

display:block;

height:100%;

width:40%;

background:linear-gradient(90deg,#f97316,#0f766e);

animation:loading 1.4s linear infinite;

}

/* loader end */

.project-video {
  max-height: 300px;
  overflow: hidden;
  border-radius: 24px;
}

.project-video a {
  display: block;
  width: 100%;
  height: 100%;
}

.project-video-media {
  width: 100%;
  height: 300px;

  object-fit: cover;
  object-position: center;

  transition: 0.5s ease;
}

.project-video:hover .project-video-media {
  transform: scale(1.05);
}

/* portfolio */

.portfolio-category {
  background: #fff;

  padding: 45px;

  border-radius: 30px;

  border: 1px solid #ececec;

  transition: 0.4s;
}

.portfolio-category:hover {
  transform: translateY(-12px);

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.category-icon {
  width: 80px;

  height: 80px;

  background: #fff5eb;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 24px;

  font-size: 35px;

  margin-bottom: 30px;
}

.portfolio-category h3 {
  font-size: 32px;

  font-weight: 700;

  margin-bottom: 15px;
}

.portfolio-category p {
  color: #666;

  line-height: 1.8;

  margin-bottom: 35px;
}

.portfolio-category span {
  color: #f97316;

  font-weight: 600;
}

.video-box {
  position: relative;

  border-radius: 30px;

  overflow: hidden;

  background: #000;
}

.video-box video {
  width: 100%;

  height: 75vh;

  object-fit: contain;

  display: block;
}

.video-controls {
  position: absolute;

  left: 50%;

  bottom: 25px;

  transform: translateX(-50%);

  display: flex;

  gap: 15px;
}

.video-controls button {
  width: 55px;

  height: 55px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(20px);

  color: #fff;

  font-size: 20px;

  transition: 0.3s;
}

.video-controls button:hover {
  background: #f97316;
}