/* =====================
   Base & Fonts
===================== */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Inter:var(--v0-dev-inter-regular-font-weight),var(--v0-dev-inter-medium-font-weight),400,var(--v0-dev-semantic-heading-1-font-weight),600|Geist:var(--v0-dev-semantic-heading-3-font-weight),var(--v0-dev-geist-semibold-font-weight),var(--v0-dev-semantic-input-font-weight),var(--v0-dev-geist-regular-font-weight),400,600");
:root {
  --primary-color: #3498db;
  font-family: "Glancyr", var(--font-primary);

  /* --- Logo visual tuning --- */
  --logo-base-size: 72px;   /* physical box height, controls navbar height */
  --logo-scale: 2.39;       /* visual scale — smaller than before (was 1.6) */
  --logo-offset-y: 6px;     /* move logo slightly downward to prevent top cut */
}

/* make sure nothing clips the logo */
#navbar,
#navbar > .container {
  overflow: visible;
}

#navbar .logo-wrap {
  height: var(--logo-base-size);
  display: flex;
  align-items: center;
  overflow: visible;
}

/* scale + nudge down; keep growth aligned to left */
#navbar .logo-img {
  height: var(--logo-base-size);
  width: auto;
  display: block;
  transform-origin: left top; /* grow from top-left corner */
  transform: translateY(var(--logo-offset-y))
             scale(var(--logo-scale));
  will-change: transform;
  transition: transform 0.3s ease;
}

/* on scroll: subtle shrink and adjust offset */
#navbar.scrolled .logo-img {
  transform: translateY(calc(var(--logo-offset-y) * 0.8))
             scale(calc(var(--logo-scale) * 0.92));
}

body {
    margin: 0;
    font-family: "Helvetica Now Display", sans-serif;
}

.font-glancyr {
    font-family: "Glancyr", sans-serif;
}
/* Ensure text color overrides */
.text-color-white-solid {
    color: #ffffff !important;
}
/* =====================
   Navbar
===================== */
/* =====================
   Navbar
===================== */
.navbar {
    background-color: rgba(0, 0, 0, 0.6) !important; /* always semi-transparent black */
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* On scroll — slightly darker for depth */
.navbar-scrolled {
    background-color: rgba(0, 0, 0, 0.85) !important; /* deeper black when scrolled */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Nav links */
.nav-link {
    color: #fff !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #f1c640 !important; /* goldish hover glow */
}


.nav-link:hover {
    color: #f1c640 !important;
}
/* Add this in your CSS */
.navbar-scrolled {
    background-color: rgba(0, 0, 0, 0.85); /* semi-transparent black */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* subtle shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* =====================
   Updated Button (Figma Style)
===================== */
.btn-gradient {
    display: inline-block;
    padding: 0.25rem; /* outer border space */
    background: linear-gradient(90deg, #2aaa2d 0%, #f1c640cc 100%);
    border-radius: 2.5rem;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.btn-gradient .btn-text {
    color: #fff !important;
    font-family: "Glancyr", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    margin: 0;
    padding: 0.5rem 1.5rem;
    display: block;
    text-align: center;
}

.btn-gradient:hover,
.btn-gradient:focus {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-gradient:hover .btn-text,
.btn-gradient:focus .btn-text {
    color: #fff !important;
}

/* =====================
   Gradient Text
===================== */
.text-gradient {
    background: linear-gradient(
        90deg,
        #2aaa2d 0%,
        rgba(241, 198, 64, 0.8) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =====================
   Mobile Navbar Drawer
===================== */
@media (max-width: 1650px) {
    .navbar-collapse {
        background-color: #000;
        padding: 1rem;
    }
}
/* Hide scrollbar but keep scrolling */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* limit to 3 lines */
    overflow: hidden;
    line-clamp: 3; /* modern draft property */
    text-overflow: ellipsis; /* optional */
}
.clamp-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* limit to 5 lines */
    overflow: hidden;
    line-clamp: 5; /* modern draft property */
    text-overflow: ellipsis; /* optional */
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

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

.animate-slide {
    animation: slide 20s linear infinite;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.clamp-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* limit to 5 lines */
    overflow: hidden;
    line-clamp: 5; /* modern draft property */
    text-overflow: ellipsis; /* optional */
}
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: #16a34a #f1f1f1; /* green + light background */
}

.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #16a34a;
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.shine-card {
    position: relative;
    overflow: hidden; /* keeps shine inside */
}

.shine-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
}

.shine-card:hover::before {
    animation: shine 0.8s ease forwards;
}

@keyframes shine {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}
.flip-card {
    perspective: 1000px; /* depth */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
}

.flip-card-back {
    transform: rotateY(180deg);
}
@keyframes shake {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    20% {
        transform: translate(-2px, 0) rotate(-1deg);
    }
    40% {
        transform: translate(2px, 0) rotate(1deg);
    }
    60% {
        transform: translate(-2px, 0) rotate(-1deg);
    }
    80% {
        transform: translate(2px, 0) rotate(1deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.hover-shake:hover {
    animation: shake 0.5s ease-in-out;
}