@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url(./variables.css);
*,
html {
   scroll-behavior: smooth;
}

body {
   min-height: 100vh;
   font-size: 1rem;
   font-family: "Inter", sans-serif;
   color: var(--secondary-color);
}

/* Common CSS */
.max-w {
   max-width: var(--max-w);
   margin-inline: auto;
}

.screen-bg {
   background-color: var(--screen-bg);
}

.light-bg {
   background-color: var(--light-bg);
}

.blur-lines-bg {
   background-image: url(../img/line-bg-blur.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
}

.lines-bg {
   background-image: url(../img/line-bg.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.login-form {
   padding: 56px 72px;
   border: 1px solid var(--light-primary-color);
   box-shadow: var(--box-shadow1);
}

.main-heading {
   font-size: var(--main-heading);
   background: var(--heading-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.included-cards:hover {
   background: var(--primary-color60) !important;
   transition: all 0.5s;
   cursor: pointer;
}

.main-heading.text-secondary {
   -webkit-text-fill-color: unset;
   color: var(--dark-gray-color) !important;
}

.bg-effect-left,
.bg-effect-right {
   background: linear-gradient(
      270deg,
      #faffeb 6.25%,
      #aeea00 51.44%,
      #f5ffd6 94.71%
   );

   width: 514px;
   height: 224px;
   position: absolute;
   top: 0;
   transform: rotate(-114deg);
   filter: blur(180px);
}

.bg-effect-left {
   left: 0;
}

.bg-effect-right {
   right: 0;
}

.form-label,
.form-check-label {
   font-size: var(--fs-18);
   color: var(--dark-gray-color);
   cursor: pointer;
}

.input-h {
   height: 48px;
   padding-left: 16px;
}

.input-h:focus-within {
   border-color: var(--primary-color) !important;
   box-shadow: var(--box-shadow1);
}

.show-password {
   position: absolute;
   top: 12px;
   right: 12px;
}

.primary-text {
   color: var(--primary-color) !important;
}

.w-fit {
   width: fit-content;
}

.fs-18 {
   font-size: 18px;
}

.fs-20 {
   font-size: 20px;
}

.fs-24 {
   font-size: 24px;
}

.input-icon img {
   position: absolute;
   top: 14px;
   left: 12px;
}

.input-icon input {
   padding-left: 5px;
}

.form-check-input:focus {
   box-shadow: var(--box-shadow1);
   border-color: var(--primary-color);
}

.form-check-input:checked {
   background-color: var(--primary-color);
   border-color: var(--primary-color) !important;
   box-shadow: var(--box-shadow1);
}

.section-py {
   padding-block: 100px;
}

.sub-heading1 {
   font-size: var(--sub-heading1);
}

.sub-heading2 {
   font-size: var(--sub-heading2);
}

.mt-32 {
   margin-top: 32px;
}

.cta-sec {
   background: var(--secondary-color);
   padding-block: 120px;
}

.middle-cta {
   padding-block: 120px;
}

.sub-heading3 {
   font-size: var(--sub-heading3);
}

.cta-sec h2 {
   background: var(--cta-heading-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.text-unset {
   color: unset;
}

.white-bg {
   background-color: var(--white-color);
}

details > summary {
   list-style: none;
}

.primary-outline-btn {
   border: 1px solid var(--primary-color) !important;
   color: var(--primary-color) !important;
}

.primary-gradient-bg {
   background: var(--primary-gradient-bg);
   background-color: var(--white-color);
}

.primary-gradient-bg2 {
   background: var(--primary-gradient-bg2);
   background-color: var(--white-color);
}

.primary-bg60 {
   background-color: var(--primary-color60);
}

.primary-border {
   border-color: var(--primary-color) !important;
}

.popular-plan {
   position: absolute;
   top: -24px;
   left: 50%;
   transform: translate(-50%, 0);
}

.white-btn {
   padding-block: 12px;
   background: var(--white-color);
}

.white-btn:hover {
   background: var(--screen-bg);
   transition: all 0.5s;
}

.white-btn.fs-18 {
   font-size: var(--fs-18) !important;
}

.primary-btn-lg,
.primary-btn,
.primary-btn-md {
   background: var(--primary-gradient-btn);
   position: relative;
   border-radius: 12px;
   padding-block: 12px;
   z-index: 1;
}

.primary-btn-lg {
   font-size: var(--fs-20);
}

.primary-btn-md {
   font-size: var(--fs-18);
}

.primary-btn-lg:hover,
.primary-btn:hover,
.primary-btn-md:hover {
   filter: brightness(0.9);
   transition: all 0.5s;
}

.primary-btn-lg::before,
.primary-btn::before,
.primary-btn-md::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1px;
   background: linear-gradient(180deg, #a3db00 0%, #c2ff0f 100%);
   -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
}

.rounded-12 {
   border-radius: 12px;
}

header .nav-item .nav-link {
   font-weight: 500;
   color: var(--secondary-color);
}

header .nav-item .nav-link:hover {
   color: var(--primary-color);
}

header .nav-item .nav-link.active {
   color: var(--primary-color);
}

.primary-bg {
   background-color: var(--primary-color);
}

.accordion-button::after {
   background: url(../img/icon/ic-accordion.svg);
   background-position: center;
   background-repeat: no-repeat;
}

.accordion-button:not(.collapsed)::after {
   background: url(../img/icon/ic-accordion1.svg);
   background-position: center;
   background-repeat: no-repeat;
}

.accordion {
   --bs-accordion-btn-icon-transform: 0;
}

.accordion-item:not(:first-of-type) {
   border-top: 1px solid #dee2e6;
}

#page-loader.fade-out {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s ease;
}

.dot-loader .dot {
   width: 10px;
   height: 10px;
   background-color: var(--primary-color);
   border-radius: 50%;
   animation: loaderBounce 1.4s infinite ease-in-out both;
}

.dot-loader .dot:nth-child(1) {
   animation-delay: -0.32s;
}

.dot-loader .dot:nth-child(2) {
   animation-delay: -0.16s;
}

@keyframes loaderBounce {
   0%,
   80%,
   100% {
      transform: scale(0);
   }
   40% {
      transform: scale(1);
   }
}

/* Dashboard CSS */
.profile-dropdown .dropdown-menu[data-bs-popper] {
   left: -70px;
}

.dashboard-header .nav-item .nav-link {
   font-weight: 500;
   color: var(--secondary-color);
   border-radius: 8px;
   padding: 8px 12px;
   width: fit-content;
}

.dashboard-header .nav-item .nav-link:hover {
   color: var(--secondary-color);
   background: var(--primary-color);
}

.dashboard-header .nav-item .nav-link.active {
   color: var(--secondary-color);
   background: var(--primary-color);
}

.box-shadow2 {
   box-shadow: var(--box-shadow2);
}

.page-link {
   background: transparent;
   color: var(--gray-color);
   border: 0;
}

#referral-table *,
.servers-table * {
   border: 0;
   vertical-align: middle;
}

.servers-table .bg-secondary {
   background-color: #9d9e9f !important;
}

.-translate-y-26 {
   transform: translateY(-26px);
}

.success-status {
   background: var(--success-status);
}

.cancel-status {
   background: var(--cancel-status);
}

.bonus-status {
   background: var(--bonus-status);
}

.pending-status {
   background: var(--pending-status);
}

.dropdown-item.active,
.dropdown-item:active {
   color: var(--secondary-color);
   background-color: var(--primary-color);
}

.upload-container {
   border-radius: 1rem;
   padding: 1rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   background-color: #fff;
}

.upload-button {
   border: 1px dashed #ccc;
   border-radius: 0.5rem;
   padding: 0.5rem 1rem;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   color: #666;
   font-weight: 600;
}

.upload-button:hover {
   background-color: #f8f9fa;
}

.upload-button i {
   font-size: 1rem;
}

.btn.primary-bg {
   background: var(--primary-color) !important;
}

.btn.primary-bg:hover {
   filter: brightness(0.9);
   transition: all 0.5s;
}

.bg-orange {
   background: #ffa726;
}

/* Media Queries */
@media only screen and (max-width: 992px) {
   .main-heading {
      font-size: var(--sub-heading1);
   }

   .sub-heading1 {
      font-size: var(--sub-heading2);
   }

   .sub-heading2 {
      font-size: var(--sub-heading3);
   }

   .sub-heading3 {
      font-size: var(--fs-24);
   }

   .fs-24 {
      font-size: var(--fs-20);
   }

   .section-py {
      padding-block: 80px;
   }
}

@media only screen and (max-width: 768px) {
   .login-form {
      padding: 40px 56px;
   }

   .main-heading {
      font-size: var(--sub-heading2);
   }

   .sub-heading1 {
      font-size: var(--sub-heading3);
   }

   .fs-20 {
      font-size: var(--fs-18);
   }

   .form-label,
   .fs-18,
   .form-check-label {
      font-size: 1rem;
   }

   .primary-btn-lg {
      font-size: var(--fs-18);
   }

   .section-py {
      padding-block: 48px;
   }

   .cta-sec,
   .middle-cta {
      padding-block: 80px;
   }

   .profile-dropdown .dropdown-menu[data-bs-popper] {
      left: 0;
   }
}

@media only screen and (max-width: 576px) {
   .login-form {
      padding: 40px 24px;
   }

   .custom-sm-w-100 {
      width: 100%;
   }
}