@font-face {
  font-family: "Avenir";
  src: url("../font/AvenirLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("../font/AvenirRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("../font/AvenirBook.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("../font/AvenirHeavy.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("../font/AvenirBlack.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #fcdf00;
  --color-secondary: #ff7f00;
  --color-dark: #121111;
  --color-light: #707070;
  --color-white: #ffffff;
  --color-gray-medium: #B9B9B9
}
html{
  position: relative;
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl {
  margin: 0;
  padding: 0;
}
body {
  font-size: clamp(1rem, 2vw, 1.375rem);
  line-height: clamp(1.545em, 1.2em + 0.5vw, 2.125em);
  font-family: "Avenir", sans-serif;
  font-weight: 400;
  background-color: var(--color-dark);
  color: var(--color-white);
}

h1 {
  font-size: clamp(2.625rem, 7vw, 6.875rem);
  line-height: clamp(1.118em, 1.2em + 1vw, 1.1667em);
  font-family: "Avenir", sans-serif;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: clamp(1.45em, 1.4em + 0.5vw, 1.8125em);
  font-family: "Avenir", sans-serif;
  font-weight: 700;
}
h3 {
  font-size: clamp(1.3125rem, 4vw, 2.1875rem); 
  line-height: clamp(1.45em, 1.4em + 0.5vw, 1.8125em);
  font-family: 'Avenir', sans-serif;
  font-weight: 700;
}
h4 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem); /* 18px → 24px */
  line-height: clamp(1.5em, 2.8vw, 1.6em);
  font-family: "Avenir", sans-serif;
  font-weight: 700;
}
h5 {
  font-size: clamp(0.9375rem, 2vw, 1.25rem);
  line-height: clamp(1.4em, 2.5vw, 1.5em);
  font-family: "Avenir", sans-serif;
  font-weight: 700;
}
.fs-24 {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem); /* 18px → 24px */
  line-height: clamp(1.5em, 2.8vw, 1.6em);
}

.fs-20 {
  font-size: clamp(0.9375rem, 2vw, 1.25rem);
  line-height: clamp(1.4em, 2.5vw, 1.5em);
}

.fs-16 {
  font-size: clamp(0.875rem, 1.8vw, 1rem);
  line-height: clamp(1.35em, 2.2vw, 1.5em);
}

.fs-14 {
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  line-height: clamp(1.3em, 2vw, 1.4em);
}
.f-normal {
  font-weight: 400;
}
.f-bold {
  font-weight: 700;
}
.mw-1000 {
  max-width: 1000px;
}
.mw-800 {
  max-width: 800px;
}

.mw-430 {
  max-width: 430px;
}
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-left: 30px;
  padding-right: 30px;
}
section {
    overflow: hidden;
}
.w-fit {
  width: fit-content;
}
.gradient-text {
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-secondary)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for some browsers */
}
.text-yellow {
  color: var(--color-primary);
}
.text-gray {
  color: var(--color-gray-medium);
}
.border-yellow {
  border-color: var(--color-primary);
}
button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* buttons-css */
.primary-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 28px;
  border-radius: 10px;
 background-image: linear-gradient(90deg, var(--color-primary) 0%, #fea700 42%, var(--color-secondary) 100%);
  color: var(--color-dark);
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  border: none;
  transition: all 0.4s ease;
  background-size: 200% 200%;
  overflow: hidden;
}

/* Hover effects */
.primary-btn:hover {
  transform: translateY(-3px);
    animation: gradientShift 3s ease infinite;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* Gradient animation */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shine effect (sweeps once per hover) */
.primary-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: skewX(-25deg);
  transition: 1s;
}

.primary-btn:hover::after {
  left: 130%;
}


.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.primary-btn.bg-transparent {
  background-image: unset;
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
}
/* header-css */
header {
  padding: 40px 40px 24px 40px;
  background: #000000;
  filter: drop-shadow(0px 40px 23px rgba(252, 223, 0, 0.27));
}

.navbar-brand {
  max-width: 350px;
}
.navbar-toggler.collapsed .close-toggle {
    display: none;
}
.navbar-toggler.collapsed .open-toggle {
    display: block;
}
button.navbar-toggler .open-toggle {
    display: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}
a.nav-link:hover {
    color: var(--color-primary) !important;
}
/* banner-section-css */
#banner-section {
  padding: 300px 0px 250px 0;
  background-image: url("../images/banner_bg.png");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* included-section-css */
#included-section {
  padding: 100px 0px 120px 0px;
}

.included-card {
  border-radius: 10px;
  border: 1px solid var(--color-light);
  padding: 40px;
   box-shadow: 0 3px 6px rgb(252, 223, 0, 0.27);
  
}

/* premium-section-css */
#premium-bus-section {
  padding-bottom: 120px;
}
.premium-list {
  margin-left: 50px;
}
.premium-list li::marker {
  color: var(--color-primary);
}
.premium-right-img {
  border: 1px solid var(--color-light);
  border-radius: 10px;
  box-shadow: 0 3px 6px rgb(252, 223, 0, 1);
  overflow: hidden;
}



/* price-section-css */
#price-section {
  background-color: var(--color-white);
  padding: 100px 0px 60px;
  color: var(--color-dark);
}
.price-title span {
  background: linear-gradient(
    137deg,
    var(--color-primary) 0%,
    var(--color-secondary) 50%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pricing-card {
  border-radius: 20px;
  filter: drop-shadow(0px 16px 9px rgba(0, 0, 0, 0.16));
  border: 3px solid var(--color-primary);
  padding: 20px 30px 30px;
  max-width: 650px;
  margin-top: 40px;
}
.pricing-card-body {
  max-width: 350px;
}

.prcing-card-title {
  font-size: clamp(46px, calc(1.5rem + 2.2vw), 74px);
  font-weight: 700;
}
.prcing-card-title span {
  font-size: clamp(15px, calc(0.9375rem + 0.9vw), 26px);
  font-weight: 300;
}
.included-list li {
    list-style: none;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
}

.included-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;  
  height: 20px;  
  background: url('../images/iconsQ2.svg') no-repeat center/contain;
}




/* featured-clubs-section-css */
#featured-clubs-section {
  padding: 100px 0px 70px 0px;
  background-image: linear-gradient(
    270deg,
    var(--color-magenta) 0%,
    var(--color-purple) 100%
  );
}

#featured-clubs-section .container{
  max-width: 1180px;
}
.feature-card {
  padding: 32px;
    border-radius: 12px;
    filter: drop-shadow(0px 3px 3.5px rgba(0,0,0,0.16));
    background-color: #000000;
    border: 1px solid #707070;
    min-height: 420px;
}
.feature-card-img {
  opacity: 50%;
}
.feature-card-star {
    width: 28px;
}


/* footer-section-css */
footer#footer-section {
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid #ACACAC;
  padding: 70px 0px;
  margin-top: 80px;
  background-color: #000000;
}
.footer-list li {
  margin-bottom: 16px;
}
.footer-list li a {
  text-decoration: none;
  color: var(--color-silver-gray);
}
.footer-list li a:hover {
    color: var(--color-primary) !important;
}

/* copyright-section */

#copyright-section {
  padding: 20px 0px;
  background-color: #000000;
}
#copyright-section a:hover {
    color: var(--color-primary) !important;
}

/********* media-screen-css-start **********/
@media (min-width: 1400px) {
  .container {
    max-width: 1420px;
  }
}

@media (max-width: 767px) {
  .primary-btn {
    padding: 12px 20px;
}
  header {
    padding: 26px 20px;
  }
  .navbar-brand {
    max-width: 250px;
  }
  #banner-section {
    padding: 180px 0px 50px 0;
  }

  .yellow-stars {
    width: 15px;
}
  #included-section {
    padding: 60px 0px 60px 0px;
  }
 .included-card {
    padding: 32px;
}
 .included-card-logo img {
    width: 48px !important;
}
#premium-bus-section {
    padding-bottom: 40px;
}
.premium-list {
    margin-left: 20px;
}
#price-section {
    background-color: var(--color-white);
    padding: 40px 0px 40px;
    color: var(--color-dark);
}
  #featured-clubs-section {
    padding: 50px 0px 10px 0px;
  }
.feature-card-star {
    width: 18px;
}
.feature-card-star {
    width: 18px;
}
  .footer-logo.pb-3 {
    max-width: 160px;
  }
  footer#footer-section {
    padding: 40px 0px;
    margin-top: 40px;
  }
}