:root {
    /* ==============================
     BRAND COLORS
  ============================== */
    --primary: #711928;
    --secondary: #ffca81;
    /* Primary Variations */
    --primary-dark: #54101c;
    --primary-light: #8a2a3b;
    /* Secondary Variations */
    --secondary-dark: #d9a05c;
    --secondary-light: #ffe0b0;
    /* ==============================
     TEXT COLORS
  ============================== */
    --black: #080808;
    --text: #222222;
    --text3: #2b2b2b;
    --text2: #6f6662;
    --muted: #869791;
    /* ==============================
     BACKGROUNDS
  ============================== */
    --white: #ffffff;
    --light: #f7f8f8;
    --light-bg: #fffaf5;
    /* ==============================
     BORDERS
  ============================== */
    --border: #d6d6d6;
    --border3: #eadfd5;
    /* ==============================
     OVERLAYS / EFFECTS
  ============================== */
    --overlay-light: #00000026;
    --overlay-dark: #00000080;
    /* ==============================
     UTILITY
  ============================== */
    --lastClr: transparent;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow-sm: 0 8px 25px rgba(113, 25, 40, 0.08);
    --shadow-md: 0 18px 50px rgba(113, 25, 40, 0.13);
    --shadow-lg: 0 30px 80px rgba(113, 25, 40, 0.2);
    --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

a {
    text-decoration: none;
    color: var(--white);
}

button {
    cursor: pointer;
    background: transparent;
}

.fill-btn {
    position: relative;
    width: 140px;
    height: 50px;
    font-size: 18px;
    border-radius: 8px;
    font-weight: 700;
    border: none;
    background: var(--secondary);
    color: var(--primary);
}

.empty-btn {
    position: relative;
    width: 140px;
    height: 50px;
    border-radius: 8px;
    font-weight: 700;
    background: transparent;
    border: 1px solid var(--white);
    color: var(--white);
}

body {
    height: 100vh;
    width: 100%;
    background: var(--primary);
    overflow: auto;
    font-family: 'Poppins', sans-serif;
}

body::-webkit-scrollbar {
    display: none;
}

body::-webkit-scrollbar-track {
    background: transparent;
}


/*==========================
      GOOGLE FONT
===========================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
:root {
    --black: #000000;
    --white: #ffffff;
    --hover: #FFCA81;
}

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


/*==========================
        NAVBAR
===========================*/

.custom-navbar {
    width: 96%;
    margin: 15px 0 0 2%;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 5px 0;
    transition: .4s ease;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50px;
}

.navbar-brand img {
    height: 50px;
    transition: .3s;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}


/*==========================
      NAV LINKS
===========================*/

.navbar-nav {
    gap: 12px;
}

.nav-link {
    color: #fff !important;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding: 8px 0 !important;
    transition: .3s;
}


/* Hover Color */

.nav-link:hover {
    color: var(--hover) !important;
}


/* Underline Animation */

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--hover);
    transition: .35s ease;
}

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

.nav-link.active {
    color: var(--hover) !important;
}

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


/*==========================
      DROPDOWN
===========================*/

.dropdown-menu {
    background: #000000aa;
    backdrop-filter: blur(2px);
    border: none;
    border-radius: 15px;
    padding: 10px;
    margin-top: 18px;
    min-width: 220px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .35);
}

.dropdown-item {
    color: #fff;
    padding: 12px 5px;
    border-radius: 8px;
    transition: .3s;
    font-weight: 500;
}

.dropdown-item:hover {
    background: #1d1d1d;
    color: var(--hover);
}
.dropdown-item.active {
    background: var(--secondary-light);
    color: var(--primary-dark);
}


/*==========================
      LOGIN BUTTON
===========================*/

.login-btn {
    background: var(--hover);
    color: #000;
    font-weight: 600;
    padding: 11px 28px;
    border-radius: 50px;
    transition: .35s;
    border: none;
    text-decoration: none;
}

.login-btn:hover {
    background: #fff;
    color: #000;
    transform: translateY(-3px);
}


/*==========================
      MOBILE MENU BUTTON
===========================*/

.menu-btn {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.menu-btn:hover {
    background: var(--hover);
    color: #000;
}


/*==========================
      OFFCANVAS
===========================*/

.offcanvas {
    background: #8a2a3b !important;
    width: 320px;
}

.offcanvas-header {
    height: 100px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.offcanvas-header img{
    position: relative;
    height: 60px;
    object-fit: contain;
}

.offcanvas-body {
    padding: 25px;
}

.offcanvas .nav-link {
    color: #fff !important;
    font-size: 18px;
    padding: 12px 0 !important;
}

.offcanvas .dropdown-menu {
    background: #111;
    border: none;
    margin-left: 10px;
    margin-top: 8px;
}

.offcanvas .dropdown-item {
    color: #fff;
}

.offcanvas .dropdown-item:hover {
    color: var(--hover);
}


/*==========================
      TOGGLER REMOVE
===========================*/

.navbar-toggler {
    border: none;
    box-shadow: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}


/*==========================
      RESPONSIVE
===========================*/

@media(max-width:991px) {
    .navbar {
        padding: 14px 0;
    }
    .navbar-brand img {
        height: 50px;
        padding: 0;
    }
}

@media(max-width:576px) {
     .navbar {
        padding: 5px 0;
    }
    .login-btn {
        padding: 9px 18px;
        font-size: 14px;
    }
    .menu-btn {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }
    
}

/* =========================================
   REVEAL ANIMATION SYSTEM
   ========================================= */

:root {
  --reveal-duration: 0.8s;
  --reveal-delay: 0s;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}


/* -----------------------------------------
   BASE
   ----------------------------------------- */

.reveal,
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  transition-delay: var(--reveal-delay);
  will-change: opacity, transform;
}


/* -----------------------------------------
   DEFAULT
   Fade + Bottom
   ----------------------------------------- */

.reveal,
.reveal-up,
[data-reveal="up"] {
  transform: translateY(50px);
}

.reveal.activeElement,
.reveal-up.activeElement,
[data-reveal="up"].activeElement {
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------
   FADE ONLY
   ----------------------------------------- */

.reveal-fade,
[data-reveal="fade"] {
  transform: none;
}

.reveal-fade.activeElement,
[data-reveal="fade"].activeElement {
  opacity: 1;
  transform: none;
}


/* -----------------------------------------
   FROM LEFT
   ----------------------------------------- */

.reveal-left,
[data-reveal="left"] {
  transform: translateX(-70px);
}

.reveal-left.activeElement,
[data-reveal="left"].activeElement {
  opacity: 1;
  transform: translateX(0);
}


/* -----------------------------------------
   FROM RIGHT
   ----------------------------------------- */

.reveal-right,
[data-reveal="right"] {
  transform: translateX(70px);
}

.reveal-right.activeElement,
[data-reveal="right"].activeElement {
  opacity: 1;
  transform: translateX(0);
}


/* -----------------------------------------
   FROM TOP
   ----------------------------------------- */

.reveal-top,
[data-reveal="top"] {
  transform: translateY(-50px);
}

.reveal-top.activeElement,
[data-reveal="top"].activeElement {
  opacity: 1;
  transform: translateY(0);
}


/* -----------------------------------------
   SCALE
   ----------------------------------------- */

.reveal-scale,
[data-reveal="scale"] {
  transform: scale(0.85);
}

.reveal-scale.activeElement,
[data-reveal="scale"].activeElement {
  opacity: 1;
  transform: scale(1);
}


/* -----------------------------------------
   ZOOM IN
   ----------------------------------------- */

.reveal-zoom,
[data-reveal="zoom"] {
  transform: scale(1.15);
}

.reveal-zoom.activeElement,
[data-reveal="zoom"].activeElement {
  opacity: 1;
  transform: scale(1);
}


/* -----------------------------------------
   ROTATE
   ----------------------------------------- */

.reveal-rotate,
[data-reveal="rotate"] {
  transform: translateY(40px) rotate(5deg);
}

.reveal-rotate.activeElement,
[data-reveal="rotate"].activeElement {
  opacity: 1;
  transform: translateY(0) rotate(0);
}


/* -----------------------------------------
   BLUR
   ----------------------------------------- */

.reveal-blur,
[data-reveal="blur"] {
  filter: blur(10px);
  transform: translateY(20px);
}

.reveal-blur.activeElement,
[data-reveal="blur"].activeElement {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}


/* -----------------------------------------
   STAGGER ANIMATION
   ----------------------------------------- */

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);

  transition:
    opacity 0.7s var(--reveal-easing),
    transform 0.7s var(--reveal-easing);
}

.reveal-stagger.activeElement > * {
  opacity: 1;
  transform: translateY(0);
}


/* Individual delays */

.reveal-stagger.activeElement > *:nth-child(1) {
  transition-delay: 0.1s;
}

.reveal-stagger.activeElement > *:nth-child(2) {
  transition-delay: 0.2s;
}

.reveal-stagger.activeElement > *:nth-child(3) {
  transition-delay: 0.3s;
}

.reveal-stagger.activeElement > *:nth-child(4) {
  transition-delay: 0.4s;
}

.reveal-stagger.activeElement > *:nth-child(5) {
  transition-delay: 0.5s;
}

.reveal-stagger.activeElement > *:nth-child(6) {
  transition-delay: 0.6s;
}

.reveal-stagger.activeElement > *:nth-child(7) {
  transition-delay: 0.7s;
}

.reveal-stagger.activeElement > *:nth-child(8) {
  transition-delay: 0.8s;
}


/* -----------------------------------------
   ACCESSIBILITY
   ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .reveal,
  [data-reveal],
  .reveal-stagger > * {
    opacity: 1;
    transform: none !important;
    filter: none !important;

    transition: none !important;
  }

}