html {
  scroll-behavior: smooth;
  font-family: "Poppins", sans-serif;
}
:root {
  --color-black: #19191a;
  --color-primary: #4f3192;
  --color-secondary: #f3b01a;

  --color-gray: #ebf1f0;
  --color-lightGray: #f8f8f8;
  --color-inputBg: #f3f7f8;

  --color-blue: #0242fa;
  --color-violet: #6417e3;
  --color-pink: #df0b73;
  --color-green: #01bc99;

  --color-success: #1ca849;
}
.text-black {
  color: var(--color-black);
}
.text-primary {
  color: var(--color-primary);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-dark {
  color: #472b85;
}
.bg-primary {
  background-color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.bg-success {
  background-color: var(--color-success);
}
.bg-blue {
  background-color: var(--color-blue);
}
.text-blue {
  color: var(--color-blue);
}
.bg-violet {
  background-color: var(--color-violet);
}
.text-violet {
  color: var(--color-violet);
}
.bg-pink {
  background-color: var(--color-pink);
}
.text-pink {
  color: var(--color-pink);
}
.bg-green {
  background-color: var(--color-green);
}
.text-green {
  color: var(--color-green);
}

.font-mont {
  font-family: "Montserrat", sans-serif;
}
.font-cinzel {
  font-family: "Cinzel", serif;
}

.container {
  max-width: 1200px;
  margin-inline: auto;
}
@media (max-width: 1280px) {
  .container {
    max-width: 100%;
    padding-inline: 50px;
  }
}
@media (max-width: 767.98px) {
  .container {
    max-width: 100%;
    padding-inline: 24px;
  }
}
@media (max-width: 639.98px) {
  .container {
    max-width: 100%;
    padding-inline: 16px;
  }
}

@media (min-width: 1500px) {
  .container {
    max-width: 1200px;
  }
}
@media (min-width: 2100px) {
  .container {
    max-width: 1300px;
  }
}

.main-banner-section {
  background-image: url("/assets/images/BG1.png");
  background-position: top;
  background-size: cover;
  filter: brightness(110%) contrast(110%);
}

.main-card-wrap {
  background-image: linear-gradient(
    to top,
    #a093b4,
    #6c5985,
    #6c598597,
    #a294b59e
  );
}
.main-card-inner {
  background-image: linear-gradient(
    to top,
    #573f7a,
    #553e72,
    #553e7296,
    #9d8eb230
  );
}
.main-banner-section .down-link {
  animation: downAnim 1.6s linear infinite;
}
@keyframes downAnim {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (min-width: 768px) and (max-width: 1800px) {
  .home-banner .main-banner-content {
    padding-top: 30vh;
  }
}
@media (min-width: 1900px) {
  .logo-main {
    max-width: 64px;
  }
}

header.scrolled {
  /* background-color: rgba(15, 15, 15, 0.1); */
  /* background-image: linear-gradient(to right, rgb(30, 13, 50), rgb(61, 42, 114)); */
  background-color: rgb(56, 38, 105);
  transition: 0.3s;
  padding-block: 12px;
}

/* Home toggle menu */

.home-header .toggle-menu-items {
  height: 100vh;
  width: 100%;
  max-width: 280px;
  background-color: #20133a;
  position: absolute;
  top: 0;
  right: -100%;
  transition: 0.4s ease-in;
}
.home-header .toggle-menu-items.show {
  right: 0;
  box-shadow: -30px 0 80px #0000003e;
}
.home-header .toggle-menu-items ul {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 40px 0 60px 0;
}

.home-header .toggle-menu-items ul li {
  padding-inline: 20px;
  padding-block: 10px;
  display: block;
  width: 100%;
}
.home-header .toggle-menu-items ul a {
  font-size: 16px;
  font-weight: 300;
}

@media (max-width: 767.98px) {
  .home-header .toggle-menu-items ul {
    padding: 20px 0 60px 0;
  }
}

@media (min-width: 768px) and (max-width: 1919.98px) {
  .home-page-container {
    zoom: 0.8;
  }
}

.footer-main,
.footer-wrap {
  background-image: linear-gradient(
    to right,
    rgb(30, 13, 50),
    rgb(61, 42, 114)
  );
}

/* FEATURE PAGE STYLES */
.feature.main-banner-section {
  background-image: linear-gradient(to right, #1e0d32, #3d2a72);
  border-radius: 0 0 80px 80px;
}
.feature.main-banner-section .overlay-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  z-index: 0;
  background-image: url("/assets/images/eye.png");
  background-position: center;
  background-size: cover;
  filter: hue-rotate(45deg);
}

.btn-fill {
  background-color: var(--color-secondary);
  border-radius: 50px;
  padding-block: 14px;
  padding-inline: 24px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 6px 14px #00000026;
}

.btn-fill:hover {
  filter: brightness(90%);
}
.feature-banner-bttom {
  border-radius: 0 0 80px 80px;
}
.feature-content,
.feature-banner-wrap,
.faq-section {
  background-image: linear-gradient(to right, #1e0d32, #3d2a72);
}
@media (max-width: 1900px) {
  .career-aptitude-container {
    zoom: 0.9;
  }
}

.circle-light {
  background-color: rgba(255, 255, 255, 0.3);
}
.our-story-section {
  border-radius: 80px 80px 0 0;
}
.rotate-180 {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

@media (max-width: 767.98px) {
  .btn-fill {
    padding-block: 14px;
    padding-inline: 24px;
    font-size: 16px;
    line-height: 24px;
    gap: 4px;
  }
  .btn-fill img {
    width: 20px;
    height: 20px;
  }
  .feature.main-banner-section {
    border-radius: 0 0 48px 48px;
  }
  .feature-banner-bttom {
    border-radius: 0 0 48px 48px;
  }
  .our-story-section {
    border-radius: 48px 48px 0 0;
  }
}

.we-access-block {
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 1024px) and (max-width: 1919.98px) {
  .we-access-block {
    zoom: 0.8;
  }
  .what-we-access-head {
    zoom: 0.8;
  }
  .choose-test-block {
    zoom: 0.9;
  }
}

@media (max-width: 1023.98px) {
  .border-box-content h5 {
    font-size: 28px;
    line-height: 32px;
  }
  .border-box-content p {
    font-size: 16px;
  }
}
@media (max-width: 1023.98px) {
  .border-box-content {
    border: 1px dashed #fff;
    padding: 16px;
    border-radius: 100px;
    position: relative;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
  }
  .border-box-content.box-content-1,
  .border-box-content.box-content-3 {
    border-right: 6px solid #fff;
  }
  .border-box-content.box-content-2,
  .border-box-content.box-content-4 {
    border-left: 6px solid #fff;
  }
  .border-box-content::after {
    position: absolute;
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: var(--color-secondary);
    border-radius: 50%;
    bottom: 28px;
  }
  .border-box-content.box-content-1::after,
  .border-box-content.box-content-3::after {
    left: -7px;
  }
  .border-box-content.box-content-2::after,
  .border-box-content.box-content-4::after {
    right: -7px;
  }
}
@media (max-width: 767.98px) {
  .toggle-menu-items {
    height: 100vh;
    width: 100%;
    max-width: 280px;
    /* background-color: #2C1A4F; */
    background-color: #20133a;
    position: absolute;
    top: 0;
    right: -100%;
    transition: 0.4s ease-in;
  }
  .toggle-menu-items.show {
    right: 0;
    box-shadow: -30px 0 80px #0000003e;
  }
  .toggle-menu-items ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 80px 0 60px 0;
  }
  .toggle-menu-items ul li {
    padding-inline: 20px;
    padding-block: 10px;
    display: block;
    width: 100%;
  }
  .toggle-menu-items ul a {
    font-size: 16px;
    font-weight: 300;
  }

  .border-box-content h5 {
    font-size: 24px;
    line-height: 28px;
  }
  .border-box-content p {
    font-size: 14px;
    line-height: 16px;
  }
}

/* STUDENT PAGE STYLES */
.student.main-banner-section {
  background-image: linear-gradient(to right, #1e0d32, #3d2a72);
  background-image: url("/assets/images/student-banner-layer.webp");
  width: 100%;
  height: 100%;
}
.text-stroke {
  -webkit-text-stroke: 2px rgb(255, 255, 255); /* border color */
  color: transparent; /* keeps fill separate */
}
.sample-btn {
  box-shadow: 0 6px 16px #00000042;
}

@media (min-width: 1900px) {
  .student-banner-left {
    padding-top: 200px;
  }
}
.sample-btn span::after {
  content: "";
  width: 110%;
  height: 60px;
  background-color: #ffffff23;
  position: absolute;
  left: -28px;
  top: -30px;
  border-radius: 0 0 100% 0;
}

@media (min-height: 1250px) and (min-width: 1024px) {
  .student-banner-right figure {
    width: 130%;
    position: absolute;
    right: 0;
  }
}
@media (min-width: 1920px) {
  .student-banner-left h1,
  .student-banner-left h2,
  .student-banner-left h3,
  .student-banner-left .main-card-wrap {
    zoom: 1.15;
  }
  .student-banner-left .main-card-wrap {
    margin-block: 20px;
  }
  .student-banner-right figure {
    width: 90%;
  }
}
@media (min-width: 2100px) {
  .student-banner-left h1,
  .student-banner-left h2,
  .student-banner-left h3,
  .student-banner-left .main-card-wrap {
    zoom: 1.25;
  }

  .student-banner-right figure {
    width: 96%;
  }
}

/* CHOOSE TEST STYLES */
.choose-test.main-banner-section {
  background-image: url("/assets/images/student-banner-layer.webp");
  width: 100%;
  height: 100%;
  background-position: bottom;
}

/* DETAILS FORM STYLES */
.details-form.main-banner-section {
  background: #fff;
  background-image: url("/assets/images/form-bg.png");
  width: 100%;
  background-size: cover;
  background-position: bottom;
}
.form-card {
  box-shadow: 0 6px 16px #00000065;
  border: 1px solid #50319266;
}
.details-form-container,
.institute-form-container {
  zoom: 0.8;
}
@media (max-width: 767.98px) {
  .details-form-container,
  .institute-form-container {
    zoom: 0.9;
  }
}

/* PAYEMENT RESULT / SUCCESS */
.payment-result-body {
  background-image: linear-gradient(to right, #1e0d32, #3d2a72);
}
.payment-result-card {
  box-shadow: 0 6px 16px #00000022;
}
@media (min-width: 768px) and (max-width: 2000px) {
  .payment-result-card {
    zoom: 0.75;
  }
}

/* INSTITUTE PAGE STYLES */
.institute.main-banner-section {
  background-image: url("/assets/images/student-banner-layer.webp");
  width: 100%;
  height: 100%;
  background-size: cover;
}

/* COUNTRY PICKER DROPDOWN */
.country-select {
  width: 100%;
  position: relative;
  font-family: Arial, sans-serif;
}

.country-select .select-btn {
  width: 100%;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  height: 44px;
}
@media (max-width: 1023.98px) {
  .country-select .select-btn {
    height: 40px;
  }
}
.country-select .arrow {
  transition: 0.3s;
}

.country-select .select-btn:hover {
  background: #f9f9f9;
}
.country-select .dropdown {
  position: absolute;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 6px;
  list-style: none;
  padding: 0;
  z-index: 100;

  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.25s ease;
}

/* Open dropdown */
.country-select .dropdown.show {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  overflow-y: auto;
}
body:has(.dropdown.show) #countryBtn .arrow {
  transform: rotate(-180deg);
}
.country-select .dropdown li {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.country-select .dropdown li.active {
  background: #dac3ff;
  font-weight: bold;
  color: var(--color-primary);
}
.country-select .dropdown li img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border: 1px solid #ddd;
}
.country-select .dropdown li:hover {
  background: #e3d2ff;
}
.country-select .hidden {
  display: none;
}

/* TEST PAGE STYLES */
.test-welcome.main-banner-section {
  background-image: url("/assets/images/test-bg.png");
  width: 100%;
  height: 100%;
  background-size: cover;
}

.main-card-wrap-lg {
  background-image: linear-gradient(
    to top,
    #a093b4d4,
    #6c598592,
    #6c598553,
    #a294b562
  );
}
.main-card-inner-lg {
  background-image: linear-gradient(
    to top,
    #563f7afb,
    #553e7288,
    #553e7245,
    #9d8eb283
  );
}
.welcome-instructions {
  zoom: 0.8;
  max-width: 90%;
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .welcome-instructions {
    zoom: 0.9;
  }
}
@media (max-width: 1279.98px) {
  .welcome-instructions {
    max-width: 100%;
  }
}

/* CUSTOM CHECKBOX */
.checkmark {
  transition: transform 200ms ease, opacity 200ms ease;
  transform: scale(0);
  opacity: 0;
}
input:checked + .box .checkmark {
  transform: scale(1);
  opacity: 1;
}

/* TEST COUPEN CODE */
.test-report header.scrolled,
.test-start header.scrolled {
  background-color: transparent;
}
.applicant-details header.scrolled,
.test-code header.scrolled,
.institute-form header.scrolled {
  background-color: white;
}
.test-code-banner {
  background-image: url("/assets/images/test-layer.png");
  width: 100%;
  height: 100%;
  background-size: cover;
}
.test-code-container {
  zoom: 0.7;
}
@media (max-width: 767.98px) {
  .test-code-container {
    zoom: 0.9;
  }
}
@media (min-width: 1920px) {
  .test-code-container {
    zoom: 0.8;
  }
}
@media (min-width: 2400px) {
  .test-code-container {
    zoom: 0.9;
  }
}

/* TEST START STYLES */

.test-section-card {
  position: relative;
}
@media (min-width: 768px) and (max-width: 2000px) {
  .test-start-container {
    zoom: 0.8;
  }
}
@media (max-width: 767.98px) {
  .test-start-container {
    zoom: 0.9;
  }
}
.test-section-card::before {
  content: "";
  width: 28px;
  height: 28px;
  display: block;
  background-image: url("/assets/icons/right-gray.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 46%;
  right: calc(0% - 42px);
  z-index: 10000;
}

.test-section-card:last-child::before {
  display: none;
}

.test-section-card.test-card-1 {
  border-color: var(--color-blue);
}
.test-section-card.test-card-1 label {
  background-color: var(--color-blue);
}
.test-section-card.test-card-1 h3 {
  color: var(--color-blue);
}
.test-section-card.test-card-1 .start-btn {
  background-color: var(--color-blue);
}
.completed-btn {
  background-color: var(--color-success);
  pointer-events: none;
}

.test-section-card.locked {
  position: relative;
}
.test-section-card.locked::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("/assets/images/lock.png");
  background-size: 33%;
  background-repeat: no-repeat;
  background-position: center;
}

.test-section-card.test-card-2 {
  border-color: var(--color-violet);
}
.test-section-card.test-card-2 label {
  background-color: var(--color-violet);
}
.test-section-card.test-card-2 h3 {
  color: var(--color-violet);
}
.test-section-card.test-card-2 .start-btn {
  background-color: var(--color-violet);
}
.test-section-card.test-card-2.locked {
  background-color: #6517e333;
}

.test-section-card.test-card-3 {
  border-color: var(--color-pink);
}
.test-section-card.test-card-3 label {
  background-color: var(--color-pink);
}
.test-section-card.test-card-3 h3 {
  color: var(--color-pink);
}
.test-section-card.test-card-3 .start-btn {
  background-color: var(--color-pink);
}
.test-section-card.test-card-3.locked {
  background-color: #df0b7139;
}

.test-section-card.test-card-4 {
  border-color: var(--color-green);
}
.test-section-card.test-card-4 label {
  background-color: var(--color-green);
}
.test-section-card.test-card-4 h3 {
  color: var(--color-green);
}
.test-section-card.test-card-4 .start-btn {
  background-color: var(--color-green);
}
.test-section-card.test-card-4.locked {
  background-color: #01bc9a3a;
}

@media (max-width: 639.98px) {
  .test-section-card::before {
    width: 22px;
    height: 22px;
    right: calc(0% - 34px);
  }
}

/* TEST SECTION STYLES */
.glowing-card {
  background-image: url("/assets/images/04-01.png");
  width: fit-content;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  border-right: 3px solid #ffffff3c;
}

.test-section-container {
  zoom: 0.8;
}

.number-status-wrap .status-line-1 {
  background-color: var(--color-blue);
}
.number-status-wrap .status-line-2 {
  background-color: var(--color-violet);
}
.number-status-wrap .number-status-round {
  background-color: #fff;
  transition: 0.3s;
}
.number-status-wrap .number-status-round.round-1 {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.number-status-wrap .number-status-round.round-2 {
  border-color: var(--color-violet);
  color: var(--color-violet);
}
.number-status-wrap .number-status-round.active {
  color: #fff;
}
.number-status-wrap .number-status-round.round-1.active {
  background-color: var(--color-blue);
}
.number-status-wrap .number-status-round.round-2.active {
  background-color: var(--color-violet);
}

.question-card.question-card-1 {
  border-color: var(--color-blue);
}
.question-card.question-card-2 {
  border-color: var(--color-violet);
}
.question-card.question-card-1 .question-number {
  background-color: var(--color-blue);
}
.question-card.question-card-2 .question-number {
  background-color: var(--color-violet);
}
.question-card.question-card-1 .question-text {
  color: var(--color-blue);
}
.question-card.question-card-2 .question-text {
  color: var(--color-violet);
}
.question-card.question-card-1 .options-text {
  color: var(--color-blue);
}
.question-card.question-card-2 .options-text {
  color: var(--color-violet);
}
.question-card .option-block {
  box-shadow: 0 -5px 10px #00000025;
  background-color: white;
  max-width: 400px;
  cursor: pointer;
}
@media (max-width: 639.98px) {
  .question-card .option-block {
    box-shadow: 0 -4px 0px #00000025;
  }
}
.question-card.question-card-1 .option-block {
  color: var(--color-blue);
}
.question-card.question-card-2 .option-block {
  color: var(--color-violet);
}
.question-card.question-card-1 .option-block.active {
  color: #fff;
  background-color: var(--color-blue);
}
.question-card.question-card-2 .option-block.active {
  color: #fff;
  background-color: var(--color-violet);
}
.question-card.question-card-1 .question-next {
  background-color: var(--color-blue);
}
.question-card.question-card-2 .question-next {
  background-color: var(--color-violet);
}
@media (max-width: 639.98px) {
  .question-card .option-block {
    max-width: 100%;
  }
}

.swiper {
  width: 100%;
  height: fit-content;
}

.swiper-slide {
  display: flex;
  align-items: center;
}
.career-aptitude-result {
  zoom: 0.7;
}
@media (min-width: 768px) {
  .science-behind-block {
    zoom: 0.8;
    max-width: 1200px;
  }
  .insights-card {
    zoom: 0.9;
  }
}

@media (max-width: 767.98px) {
  .we-access-grid {
    zoom: 0.8;
  }
}
.error-msg.show {
  visibility: visible;
  opacity: 1;
}
.dropdown-main ul li:hover {
  background-color: #e3d2ff;
}
.dropdown-main ul li.active {
  background-color: #dac3ff;
}

.dropdown-main .arrow {
  transition: 0.3s;
}
.dropdown-main:has(.dropdown-main-menu) .arrow img {
  transform: rotate(0deg);
}
.dropdown-main:has(.dropdown-main-menu.open) .arrow img {
  transform: rotate(-180deg);
}


/* Hide number input arrows - Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Hide arrows - Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}