@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary: #FBC257;
    --primary-light: #FCCC73;
    --dark-black: #000;
    --gray-1: #798092;
    --gray-2: #e6e6ed;
    --white: #FFF;


    --header-1: 64px;
    --header-2: 48px;
    --header-3: 42px;
    --header-4: 32px;

    --text-medium: 18px;
    --text-regular: 16px;
    --text-light: 13px;

    --font-weight-bold: 700;
    --font-weight-semi-bold: 600;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --font-weight-light: 300;
}
/* Bounce animation keyframes */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px); /* higher bounce */
  }
  60% {
    transform: translateY(-10px); /* rebound */
  }
}

/* Apply to your element by ID */
#bounce-area {
  display: inline-block;
  animation: bounce 2s infinite ease-in-out;
}

body {
    font-family: 'Roboto', sans-serif;
}

.btn {
    padding: 15px 25px;
    border-radius: 6px;
    font-size: var(--text-medium);
    font-weight: var(--font-weight-medium);
}

.btn-primary {
    background-color: var(--primary);
    border: none;
}

.btn-primary:focus {
    background-color: var(--primary-light)
}

.btn-primary:hover {
    background-color: var(--primary-light)
}

.btn-secondary {
    background-color: var(--grey-2);
    color: var(--grey-1);
}

.btn-secondary:focus {
    background-color: var(--white);
    box-shadow: 0px 4px 19px rgba(0, 0, 0, 0.05)!important;
    color: var(--gray-1); 
}

.btn-secondary:hover {
    background-color: var(--white)!important;
    box-shadow: 0px 4px 19px rgba(0, 0, 0, 0.05)!important;
    color: var(--gray-1); 
}

.navbar-brand img {
    padding-right: 16px;
}

.navbar-brand span{
    font-size: var(--text-regular);
    font-weight: var(--font-weight-bold);
    color: var(--white);
}

.navbar {
    padding: 5px 0;
}

a.nav-link {
    margin-right: 15px;
    font-size: var(--text-regular);
    font-weight: var(--font-weight-regular);
    color: var(--white)!important;

}



/* Hero */

section.hero {
    margin: 5rem 0;
}

.text-label,
.text-hero-bold,
.text-hero-regular {
    margin: 24px 0;
}

.text-label {
    color: var(--primary);
    font-size: var(--text-regular);
    font-weight: var(--font-weight-regular);
    line-height: 31px;

}

.text-hero-bold {
    color: var(--dark-brown);
    font-size: var(--header-1);
    font-weight: var(--font-weight-bold);
    line-height: 74px;
}

.text-hero-regular {
    color: var(--gray-1);
    font-size: var(--text-regular);
    font-weight: var(--font-weight-regular);
    line-height: 31px;
}



/* Mobile Version */

@media (max-width: 576px) {
    .navbar {
        padding: 28px 0;
    }
    a.nav-link {
        margin-right: 7px 0;
    }

    /* hero */

    section.hero {
        margin: 1rem 0;
        text-align: center;
    }
    .btn {
        display: block;
        margin: 1rem 0;
    }

    .ms-3 {
        margin-left: 0 !important;

    }
    .text-label,
    .text-hero-bold {
        text-align: center;
    }    
    .text-hero-regular {
        text-align: left;
    }
    .text-hero-bold {
        font-weight: var(--font-weight-bold);
        font-size: var(--header-3);
        line-height: 42px;
    }

    section.hero img {
        margin: 2rem 0;
    }

}


@media (max-width: 768px) {
   
 


     .navbar {
        padding: 28px 0;
    }
    a.nav-link {
        margin-right: 7px 0;
    }

     section.hero {
        margin: 1rem 0;
      
    }

    .text-hero-bold {
        font-weight: var(--font-weight-bold);
        font-size: var(--header-3);
        line-height: 42px;
    }

    section.hero img {
        margin: 2rem 0;
    }

}

@media (max-width: 992px) {
     .navbar {
        padding: 28px 0;
    }
    a.nav-link {
        margin-right: 7px 0;
    }

     section.hero {
        margin: 1rem 0;
      
    }

    .text-hero-bold {
        font-weight: var(--font-weight-bold);
        font-size: var(--header-3);
        line-height: 42px;
    }

    section.hero img {
        margin: 2rem 0;
    }

    .btn {
    padding: 12px 18px;
    border-radius: 6px;
   
}


}

@media (min-width: 576px) {

  .dropdown-menu {
    padding-bottom: 10px;
  }

  .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  .dropdown > .dropdown-toggle:active {
  pointer-events: none; /* prevents sticky behavior on click */
}
}

/* Adjust to your sticky-top navbar height */
:root { --nav-height: 56px; }

/* Left column stays pinned */
@media (min-width: 768px) {
  .sticky-left {
    position: sticky;
    top: calc(var(--nav-height) + 12px);
  }
}

/* Right column scrolls independently */
@media (min-width: 992px) {
  .sticky-left {
    position: sticky;
    top: calc(var(--nav-height) + 12px);
  }
  .right-scroll {
    max-height: calc(100vh - var(--nav-height) - 24px);
    overflow-y: auto;
    padding-right: 0.25rem;
  }
}

/* Mobile & Tablet: normal flow */
@media (max-width: 991.98px) {
  .sticky-left { position: static; }
  .right-scroll { max-height: none; overflow: visible; }
}

@media (max-width: 768px) {
  html, body {
    overscroll-behavior-y: contain;
  }
}