/* including required css files */
@import url('fonts.css');
@import url('roots.css');

/* ********** General styles declaration ******** */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--mtnRegular);
}

.text-danger {
  color: #E43B35 !important;
}

.text-success {
  color: #3AAF4B;
}

.text-center {
  text-align: center;
}

.text-sm {
  font-size: 0.875rem;
  line-height: calc(1.25 / 0.);
}

.text-xs {
  font-size: 0.75rem;
  line-height: calc(1 / 0.75);
}

.d-none {
  display: none;
}

a {
  text-decoration: none;
}

/* to slider section */
marquee {
  background-color: var(--yellowColor);
  padding: 8px 0px;
}

.top-slider {
  display: flex;
  gap: 33px;
}

.top-slider-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-slider-item p {
  font-size: 13px;
  font-family: var(--mtnMedium);
  color: var(--white700Color);
}

/* header section */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 65px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo p {
  font-size: 14px;
  color: var(--primaryBlackColor);
  font-family: var(--mtnExtraBold);
}

.navbar-action-btn {
  display: flex;
  align-items: center;
  gap: 24px;
}

.navbar-action-btn .btn-dis {
  font-size: 14px;
  color: var(--primaryBlackColor);
  font-family: var(--mtnMedium);
}

.navbar-login-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: var(--primaryBlackColor);
  border-radius: 50px;
  padding: 10px 16px;
  cursor: pointer;
  border: none;
}

.navbar-login-btn p {
  font-size: 14px;
  color: var(--whiteColor);
  font-family: var(--mtnMedium);
}

/* main wrapper section */
.main-wrapper {
  margin: 0px 65px 40px 65px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 26px;
}

.info-section {
  position: relative;
  height: 100%;
}

.top-section-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main-title {
  font-size: 58px;
  font-family: var(--mtnLight);
  color: var(--white800Color);
  line-height: 70px;
}

.sub-title {
  font-size: 18px;
  font-family: var(--mtnRegular);
  line-height: 22px;
  color: var(--white600Color);
  padding-right: 40px;
}

.form-wrapper {
  background-color: var(--lighGrayColor);
  border-radius: 24px;
  padding: 35px;
  margin-top: 30px;
}

.user-tabs {
  background-color: var(--whiteColor);
  border-radius: 50px;
  border: 8px solid #00000015;
  display: flex;
}

.user-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border-radius: inherit;
  cursor: pointer;
}

.user-tab svg,
.user-tab p {
  color: var(--primaryBlackColor);
  font-size: 14px;
}

.active-tab {
  background-color: var(--primaryBlackColor);
}

.active-tab svg,
.active-tab p {
  color: var(--whiteColor);
  font-family: var(--mtnExtraBold);
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 25px 0;
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-double-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-double-title p:last-child {
  font-size: 12px;
  opacity: 0.4;
}

.filter p {
  font-size: 14px;
  color: var(--primaryBlackColor);
}

.dropdown,
.search {
  background-color: var(--whiteColor);
  border: 1px solid var(--grayColor);
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin-top: 2px;
  position: relative;
}

.search svg {
  margin: 0 4px;
}

.search input {
  flex-grow: 1;
  height: 35px;
  background-color: transparent;
  border: none;
  padding: 0 10px;
}

.search input:focus {
  outline: none;
}

.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.keep-me {
  display: flex;
  align-items: center;
  gap: 7px;
}

.keep-me input {
  width: 15px;
  height: 15px;
  accent-color: var(--yellowColor);
}

.keep-me p {
  font-size: 14px;
  color: var(--primaryBlackColor);
}

.form-footer a {
  font-size: 13px;
  text-decoration: underline;
  color: var(--primaryBlackColor);
  font-family: var(--mtnExtraBold);
}

.login-footer {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 130px;
}

.footer-signup-btn {
  font-size: 13px;
  color: var(--white600Color);
}

.footer-signup-btn a {
  text-decoration: underline;
  color: var(--primaryBlackColor);
  font-family: var(--mtnExtraBold);
}

.login-footer .navbar-login-btn {
  background-color: var(--yellowColor);
}

.login-footer .navbar-login-btn p {
  color: var(--primaryBlackColor);
}

.footer-separator {
  margin: 20px 65px;
  border: 1px dashed var(--blackColor);
}

.footer {
  background-color: var(--primaryBlackColor);
  padding: 5px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 65px 30px 65px;
}

.footer-section {
  background-color: #FFFFFF36;
  padding: 5px 9px;
  border-radius: 50px;
  display: flex;
  gap: 27px;
  width: fit-content;
}

.footer-section-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer-section-content p a {
  font-size: 12px;
  font-family: var(--mtnMedium);
  color: var(--whiteColor);
}

.copyright,
.copyright span a {
  font-size: 11px;
  color: #CCCCCC;
  font-family: var(--mtnMedium);
}

.veify-btn {
  background-color: var(--yellowColor);
  justify-content: center;
  margin-top: 15px;
}

.veify-btn p {
  color: var(--primaryBlackColor);
}

/* right image */
.image-section {
  height: 100vh;
  background-color: grey;
  border-radius: 22px;
  background-image: url('../../assets/images/auth-image.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* modal overlay */
.modal-overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #D9D9D961;
  backdrop-filter: blur(5.4px);
  z-index: 998;
  overflow-y: auto;
  padding: 1rem;
  justify-content: center;
}

.verify-identity-modal {
  display: none;
  width: auto;
  position: relative;
  background-color: var(--whiteColor);
  border-radius: 19px;
  z-index: 999;
  padding: 10px;
  margin: auto 0;
}

.new-password-modal {
  display: none;
  width: auto;
  position: relative;
  background-color: var(--whiteColor);
  border-radius: 19px;
  z-index: 999;
  padding: 10px;
  margin: auto 0;
}

.success-modal {
  display: none;
  width: 25%;
  position: relative;
  background-color: var(--whiteColor);
  border-radius: 19px;
  z-index: 999;
  padding: 10px;
  margin: auto 0;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 45px;
  font-family: var(--mtnLight);
  color: var(--white800Color);
}

.success-title {
  font-size: 25px;
}

.modal-header svg {
  cursor: pointer;
}

.modal-wrapper {
  background-color: var(--lighGrayColor);
  border-radius: 24px;
  padding: 25px;
  margin-top: 40px;
}

.opt-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opt-title {
  font-size: 15px;
  color: var([--primaryBlackColor]);
  font-family: var(--mtnBold);
}

.opt-inputs {
  display: flex;
  justify-content: space-between;
}

.opt-input {
  height: 48px;
  width: 87px;
  background-color: var(--whiteColor);
  border-radius: 6px;
  border: 1px solid #20202070;
  font-size: 25px;
  text-align: center;
  font-family: var(--mtnExtraBold);
}

.opt-input:focus {
  outline: none;
}

.verification-msg {
  font-size: 14px;
  color: var(--primaryBlackColor);
}

.filter p:last-child {
  font-size: 12px;
  opacity: 0.4;
}

.modal-btns {
  display: flex;
  justify-content: space-between;
}

.page-action-btn {
  background-color: var(--yellowColor);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  border-radius: 50px;
  gap: 8px;
  cursor: pointer;
}

.page-action-btn p {
  font-size: 13px;
  font-family: var(--mtnBold);
  color: var(--primaryBlackColor);
  text-wrap: nowrap;
}

.cancle-btn {
  background-color: #9BA5B7;
  border-radius: 5px;
}

.cancle-btn p {
  color: var(--whiteColor);
}

.reset-msg {
  font-size: 14px;
  color: var(--white600Color);
  margin-bottom: 30px;
}

@media (max-width: 950px) {
  .image-section {
    display: none;
  }

  .main-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .info-section {
    width: 100%;
  }
}

@media (max-width: 600px) {

  .main-wrapper,
  .footer {
    margin: 0px 10px 20px 10px;
  }

  .footer {
    flex-direction: column;
    gap: 15px;
    border-radius: 20px;
  }

  .footer .footer-text {
    text-align: center;
  }

  .header {
    padding: 20px;
  }

  .toggle-login-btn {
    display: none;
  }

  .form-wrapper {
    padding: 30px 15px;
  }

  .footer-separator {
    margin: 20px;
  }

  .opt-input {
    height: 48px;
    width: 48px;
  }

  .filter-double-title {
    flex-direction: column;
    align-items: start;
  }

}