@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-pink: #fc00cb;
  --color-purple: #8900ff;
  --color-dark: #2a2a2a;
  --color-magenta: #a24591;
  --color-blackberry: #14041e;
  --color-dark-gray: #272525;
  --color-gray-medium: #4d4d4d;  
  --color-gray-light: #707070;    
  --color-white: #ffffff;
  --color-silver-gray: #B9B9B9;
}


* {
    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(3.375rem, 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(2rem, 4vw, 2.5rem);
  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);
}
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-bold {
  font-weight: 700;
}
.text-secondary {
    --bs-text-opacity: 1;
    color: #ACACAC !important;
}
.text-silver-gray{
  color: var(--color-silver-gray);
}
.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;
    }
.gradient-text {
  background: linear-gradient(180deg, var(--color-pink), var(--color-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for some browsers */
}
.w-fit {
  width: fit-content;
}

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: linear-gradient(90deg, var(--color-pink), var(--color-purple));
  color: var(--color-white);
  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 0 16px rgba(255, 0, 150, 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%;
}

/* Icon slide on hover */
.primary-btn img {
  transition: transform 0.3s ease;
}

.primary-btn:hover img {
  transform: translateX(4px);
}
/* header-css */
header{
    padding: 46px 46px 26px 46px;
    background: #2725258a;
    filter: drop-shadow(0px 40px 40px rgba(252,0,203,0.26));
    border-bottom: 1px solid var(--color-gray-light);
}
header:has(.navbar-collapse.show) {
  background: rgba(0, 0, 0, 0.8); /* example dark bg */
  backdrop-filter: blur(6px);
}
.navbar-toggler.collapsed .close-toggle {
    display: none;
}
.navbar-toggler.collapsed .open-toggle {
    display: block;
}
button.navbar-toggler .open-toggle {
    display: none;
}
.navbar-brand {
    max-width: 350px;
}
.navbar-toggler:focus {
    box-shadow: none;
    
}
a.nav-link:hover {
    color: var(--color-pink) !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;
}
.gradent-title{
  border-radius: 8px;
background-image: linear-gradient(90deg, var(--color-pink) 0%, var(--color-purple) 100%);
border: 1px solid var(--color-dark-gray);
padding: 4px 21px;
color: var(--color-white);
}


/* included-section-css */
#included-section{
  padding: 100px 0px 150px 0px;
  background-image: url(../images/include-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

}

.included-card{
  border-radius: 10px;
background-color: var(--color-gray-medium);
border: 1px solid var(--color-gray-light);
padding: 34px 40px; 

}
.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 150px 0px;
    background-image: linear-gradient(270deg, var(--color-magenta) 0%, var(--color-purple) 100%);
}

.swiper-card-badge {
    border-radius: 8px;
    background-image: linear-gradient(90deg, var(--color-pink) 0%, var(--color-purple) 100%);
    width: fit-content;
    position: absolute;
    top: 25px;
    right: 25px;
    padding: 0 12px;
    font-size: 15px;
}
.card__wrapper {
    border-radius: 8px;
    background-color: var(--color-gray-medium);
    border: 1px solid var(--color-gray-light);
    overflow: hidden;
}
.swiper-card-content{
  border-top: 1px solid var(--color-gray-light);
  padding: 12px 35px 25px 35px;

}
.swiper-card-img img {
    width: 100%;
}
.swiper-button-next:after{
    display: none;
}
.swiper-button-next::before{
  content: "";
  display: inline-block;
  width: 31px;
  height: 28px;
  background: url('data:image/svg+xml;utf8,<svg width="31" height="28" viewBox="0 0 31 28" xmlns="http://www.w3.org/2000/svg"><path d="M12.5155 0.598949L0.615477 12.5989C0.223272 12.9588 0 13.4667 0 13.9989C0 14.5312 0.223272 15.0391 0.615477 15.3989L12.5155 27.399C13.2467 28.1143 14.3869 28.1988 15.2155 27.599C15.7039 27.2709 16.0128 26.7351 16.052 26.1481C16.0911 25.561 15.856 24.9889 15.4155 24.599L6.81548 15.9989H28.0155C29.12 15.9989 30.0155 15.1035 30.0155 13.9989C30.0155 12.8944 29.12 11.9989 28.0155 11.9989H6.81548L15.4155 3.39895C15.856 3.00898 16.0911 2.43691 16.0519 1.84985C16.0128 1.26279 15.7039 0.726983 15.2155 0.398949C14.3869 -0.200867 13.2466 -0.116405 12.5155 0.598949Z" fill="white"/></svg>')
    no-repeat center / contain;
  transform: rotate(180deg);
   right: -60px;
    position: absolute;
}
.swiper-button-prev::after {
  content: "";
  display: inline-block;
  width: 31px;
  height: 28px;
  background: url('data:image/svg+xml;utf8,<svg width="31" height="28" viewBox="0 0 31 28" xmlns="http://www.w3.org/2000/svg"><path d="M12.5155 0.598949L0.615477 12.5989C0.223272 12.9588 0 13.4667 0 13.9989C0 14.5312 0.223272 15.0391 0.615477 15.3989L12.5155 27.399C13.2467 28.1143 14.3869 28.1988 15.2155 27.599C15.7039 27.2709 16.0128 26.7351 16.052 26.1481C16.0911 25.561 15.856 24.9889 15.4155 24.599L6.81548 15.9989H28.0155C29.12 15.9989 30.0155 15.1035 30.0155 13.9989C30.0155 12.8944 29.12 11.9989 28.0155 11.9989H6.81548L15.4155 3.39895C15.856 3.00898 16.0911 2.43691 16.0519 1.84985C16.0128 1.26279 15.7039 0.726983 15.2155 0.398949C14.3869 -0.200867 13.2466 -0.116405 12.5155 0.598949Z" fill="white"/></svg>')
    no-repeat center / contain;
     margin-left: -60px;
}
.lineup-card {
    border-radius: 8px;
    filter: drop-shadow(0px 3px 3.5px rgba(0,0,0,0.16));
    background-color: var(--color-gray-medium);
}

.bg-pink{
  background-color: var(--color-pink);
}
.bg-purple{
  background-color: var(--color-purple);
}
.lineup-card-list{
  padding: 16px 40px 40px 40px;
}
.lineup-card-list ol{
  padding-left: 30px;

}

/* price-section-css */
#price-section {
    background-image: linear-gradient(59deg, #000000 0%, #190626 100%);
    padding: 80px 0px 40px;
}
.pricing-card {
    border-radius: 20px;
    background-image: linear-gradient(270deg, #93227d 0%, #43007c 100%);
    padding: 20px 30px 30px;
    max-width: 700px;
    margin-top: 60px;
}
.pricing-card-body {
    max-width: 400px;
}

.prcing-card-title {
    font-size: clamp(42px, 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;
}

/* footer-section-css */
footer#footer-section {
    border: 1px solid #272525;
    padding: 70px 0px;
    margin-top: 80px;
}
.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-pink) !important;
}
#copyright-section a:hover {
    color: var(--color-pink) !important;
}
/********* media-screen-css-start **********/
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1420px;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 767px) {
header {
    padding: 26px 20px;
}
.navbar-brand {
    max-width: 250px;
}
#banner-section {
    padding: 180px 0px 50px 0;
}
#included-section {
    padding: 60px 0px 60px 0px;
    
}
.included-card {
    padding: 24px 26px;
}
.swiper-wrapper {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

#featured-clubs-section {
    padding: 50px 0px 10px 0px;
}

.footer-logo.pb-3 {
    max-width: 160px;
}
footer#footer-section {
    padding: 40px 0px;
    margin-top: 40px;
}
}