@font-face {
  font-family: "Kalpurush";
  font-style: normal;
  font-weight: 400;

  src:
    url("../fonts/kalpurush.woff2") format("woff2"),
    url("../fonts/kalpurush.woff") format("woff"),
    url("../fonts/kalpurush.ttf") format("truetype");
}


/* =============================================
   LOGIN PAGE ROOT
============================================= */

.rcc-auth-page {
  color: #17392a;
  font-family:
    "Kalpurush",
    "Noto Sans Bengali",
    sans-serif;

  margin: 0;
  min-height: calc(100vh - 160px);
  padding: 0;
}

/* Account pages also include the shared header outside .rcc-auth-page. */
.header a,
.header span,
.header strong,
.header p,
.header li,
.header button,
.header .nav-link {
  font-family: "Kalpurush", "Noto Sans Bengali", sans-serif;
}

.rcc-header-brand__service-line {
  color: #668071;
  font-size: 11px;
  line-height: 1.4;
  margin: 5px 0 0;
  max-width: 390px;
}

.rcc-brand-sentence {
  font-family: "Kalpurush", "Noto Sans Bengali", sans-serif;
}

.rcc-auth-page input,
.rcc-auth-page button,
.rcc-auth-page label,
.rcc-auth-page a,
.rcc-auth-page small,
.rcc-auth-page strong,
.rcc-auth-page p,
.rcc-auth-page h1,
.rcc-auth-page h2 {
  font-family: inherit;
}

.rcc-auth-page .rcc-login-location small,
.rcc-auth-page .rcc-login-powered small {
  font-family: inherit;
}


/* =============================================
   HERO
============================================= */

.rcc-login-hero {
  background-image: var(--rcc-login-bg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  min-height: calc(100vh - 160px);

  overflow: hidden;
  position: relative;
}


/* Main cinematic overlay */

.rcc-login-overlay {
  background:

    linear-gradient(
      90deg,
      rgba(0, 40, 22, 0.72) 0%,
      rgba(0, 47, 27, 0.52) 24%,
      rgba(0, 48, 28, 0.18) 47%,
      rgba(255, 255, 255, 0.02) 66%,
      rgba(255, 255, 255, 0.08) 100%
    );

  inset: 0;
  position: absolute;
  z-index: 1;
}


/* Bottom fade */

.rcc-login-hero::after {
  background:

    linear-gradient(
      0deg,
      rgba(226, 245, 218, 0.92) 0%,
      rgba(225, 244, 219, 0.52) 45%,
      rgba(225, 244, 219, 0) 100%
    );

  bottom: 0;
  content: "";
  height: 105px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;

  z-index: 2;
}


/* =============================================
   MAIN LAYOUT
============================================= */

.rcc-login-container {
  align-items: center;

  display: grid;

  gap: clamp(45px, 6vw, 105px);

  grid-template-columns:
    minmax(0, 1fr)
    minmax(400px, 500px);

  margin: 0 auto;

  max-width: 1440px;

  min-height: calc(100vh - 160px);

  padding:
    50px
    55px
    95px;

  position: relative;

  width: 100%;

  z-index: 5;
}


/* =============================================
   LEFT SIDE
============================================= */

.rcc-login-intro {
  color: #ffffff;

  max-width: 620px;

  padding-bottom: 30px;
}


.rcc-login-eyebrow {
  color: #ffffff;

  font-size: 23px;

  line-height: 1.4;

  margin: 0 0 10px;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.28);
}


.rcc-login-small-line {
  background: rgba(255, 255, 255, 0.8);

  height: 2px;

  margin: 14px 0 20px;

  width: 125px;
}


.rcc-login-heading {
  color: #ffffff;

  font-size: clamp(40px, 4vw, 62px);

  font-weight: 700;

  letter-spacing: -1px;

  line-height: 1.04;

  margin: 0;

  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.28);
}


.rcc-login-heading span {
  color: #ffd238;

  display: block;

  margin-top: 6px;
}


.rcc-login-description {
  color: rgba(255, 255, 255, 0.96);

  font-size: 21px;

  line-height: 1.55;

  margin: 22px 0 0;

  max-width: 510px;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.28);
}


/* =============================================
   FEATURE BOXES
============================================= */

.rcc-login-features {
  display: grid;

  gap: 12px;

  grid-template-columns:
    repeat(3, 1fr);

  margin-top: 68px;

  max-width: 530px;
}


.rcc-login-feature {
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);

  background:
    rgba(255, 255, 255, 0.90);

  border:
    1px solid rgba(255, 255, 255, 0.85);

  border-radius: 14px;

  box-shadow:
    0 9px 25px rgba(0, 30, 18, 0.19);

  color: #1a3629;

  min-height: 112px;

  padding:
    40px
    10px
    13px;

  position: relative;

  text-align: center;
}


.rcc-login-feature-icon {
  align-items: center;

  background:
    linear-gradient(
      145deg,
      #32a956,
      #08763f
    );

  border:
    3px solid #ffffff;

  border-radius: 50%;

  box-shadow:
    0 5px 13px rgba(0, 60, 30, 0.20);

  color: #ffffff;

  display: flex;

  height: 62px;

  justify-content: center;

  left: 50%;

  position: absolute;

  top: -31px;

  transform:
    translateX(-50%);

  width: 62px;
}


.rcc-login-feature-icon .fa-solid {
  font-size: 29px;
}


.rcc-feature-orange {
  background:
    linear-gradient(
      145deg,
      #ff9f18,
      #f25a21
    );
}


.rcc-login-feature strong {
  display: block;

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 3px;
}


.rcc-login-feature small {
  color: #57685f;

  display: block;

  font-size: 12px;

  line-height: 1.3;
}


/* =============================================
   LOGIN CARD
============================================= */

.rcc-login-card {
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);

  background:

    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.74),
      rgba(245, 252, 246, 0.58)
    );

  border:
    1px solid rgba(255, 255, 255, 0.72);

  border-radius: 27px;

  box-shadow:

    0 30px 75px
      rgba(0, 40, 20, 0.23),

    0 6px 18px
      rgba(0, 0, 0, 0.06);

  padding:
    34px
    34px
    27px;

  position: relative;

  width: 100%;
}


/* subtle glass tint */

.rcc-login-card::before {
  background:

    radial-gradient(
      circle at 22% 12%,
      rgba(90, 184, 114, 0.16),
      transparent 36%
    );

  border-radius: inherit;

  content: "";

  inset: 0;

  pointer-events: none;

  position: absolute;
}


/* =============================================
   LOGIN HEADING
============================================= */

.rcc-login-card-heading {
  position: relative;

  text-align: center;

  z-index: 2;
}


.rcc-login-leaf {
  align-items: center;

  color: #36a553;

  display: flex;

  gap: 13px;

  justify-content: center;

  margin-bottom: 3px;
}


.rcc-login-leaf > span {
  background: #71ae7a;

  height: 2px;

  width: 49px;
}


.rcc-login-leaf i {
  font-size: 36px;
}


.rcc-login-card-heading h2 {
  color: #075536;

  font-size: 43px;

  font-weight: 700;

  line-height: 1.05;

  margin: 2px 0 0;
}


.rcc-login-card-heading p {
  color: #3e594c;

  font-size: 16px;

  line-height: 1.4;

  margin:
    10px auto
    25px;

  max-width: 375px;
}


/* =============================================
   ERRORS
============================================= */

.rcc-login-error {
  border-radius: 10px;

  font-size: 14px;

  margin-bottom: 15px;
}


/* =============================================
   FORM
============================================= */

.rcc-login-form {
  position: relative;

  z-index: 3;
}


.rcc-login-field {
  margin-bottom: 5px;
}


/*
Crispy normally generates .form-group
*/

.rcc-login-card .form-group {
  margin-bottom: 15px;
}


.rcc-login-card label {
  color: #173b2a !important;

  font-size: 15px;

  font-weight: 700;

  margin-bottom: 6px;
}


/* INPUTS */

.rcc-login-card .form-control {
  background:
    rgba(255, 255, 255, 0.84);

  border:
    1px solid rgba(50, 94, 70, 0.21);

  border-radius: 10px;

  box-shadow: none;

  color: #263e32;

  font-family:
    "Kalpurush",
    sans-serif;

  font-size: 16px;

  height: 57px;

  padding:
    10px
    16px;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


.rcc-login-card .form-control::placeholder {
  color: #929d97;
}


.rcc-login-card .form-control:focus {
  background: #ffffff;

  border-color: #16864d;

  box-shadow:
    0 0 0 4px
    rgba(22, 134, 77, 0.11);

  outline: none;
}


/* Crispy validation */

.rcc-login-card .invalid-feedback {
  color: #c92834;

  font-size: 12px;
}


/* =============================================
   FORGOT PASSWORD
============================================= */

.rcc-login-forgot {
  margin:
    -2px 0
    17px;

  text-align: right;
}


.rcc-login-forgot a {
  color: #087442;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;
}


.rcc-login-forgot a:hover {
  color: #f15c22;
}


/* =============================================
   BUTTON
============================================= */

.rcc-login-submit {
  align-items: center;

  background:

    linear-gradient(
      90deg,
      #08753f,
      #26954d
    );

  border: 0;

  border-radius: 10px;

  box-shadow:
    0 9px 20px rgba(7, 115, 62, 0.20);

  color: #ffffff;

  cursor: pointer;

  display: flex;

  font-family:
    "Kalpurush",
    sans-serif;

  font-size: 18px;

  font-weight: 700;

  gap: 10px;

  height: 60px;

  justify-content: center;

  padding: 0 24px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

  width: 100%;
}


.rcc-login-submit:hover {
  background:

    linear-gradient(
      90deg,
      #056638,
      #168941
    );

  box-shadow:
    0 12px 28px
    rgba(5, 104, 55, 0.28);

  color: #ffffff;

  transform:
    translateY(-1px);
}


.rcc-login-submit .fa-solid {
  font-size: 24px;
}


/* =============================================
   DIVIDER
============================================= */

.rcc-login-divider {
  align-items: center;

  display: flex;

  gap: 13px;

  margin:
    22px 0
    16px;
}


.rcc-login-divider span {
  background:
    rgba(72, 97, 84, 0.28);

  flex: 1;

  height: 1px;
}


.rcc-login-divider p {
  color: #6c7972;

  font-size: 14px;

  margin: 0;
}


/* =============================================
   REGISTER
============================================= */

.rcc-login-register {
  align-items: center;

  color: #3f5148;

  display: flex;

  font-size: 15px;

  justify-content: center;
}


.rcc-login-register a {
  color: #ef5b20;

  font-weight: 700;

  margin-left: 6px;

  text-decoration: none;
}


.rcc-login-register a:hover {
  color: #087342;
}


.rcc-login-register .fa-solid {
  color: #ef5b20;

  font-size: 20px;

  margin-left: 3px;
}


/* =============================================
   BOTTOM
============================================= */

.rcc-login-bottom {
  align-items: center;

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.44);
  border-top: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 -8px 24px rgba(12, 67, 42, 0.12);
  bottom: 0;

  display: flex;

  gap: 24px;
  justify-content: space-between;

  left: 0;

  padding: 0px 35px;

  position: absolute;

  right: 0;

  z-index: 7;
}


.rcc-login-location {
  align-items: center;

  color: #0b5837;

  display: flex;

  gap: 9px;
}

.rcc-login-footer-center {
  color: #315b46;
  flex: 1;
  text-align: center;
}

.rcc-login-footer-center .rcc-brand-sentence {
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.rcc-login-footer-center strong,
.rcc-login-footer-center small {
  display: block;
}

.rcc-login-footer-center strong {
  font-size: 14px;
}

.rcc-login-footer-center small {
  color: #668071;
  font-size: 11px;
  margin-top: 2px;
}

.rcc-login-footer-links {
  align-items: center;
  display: flex;
  gap: 8px;
  order: 2;
}

.rcc-login-footer-links a {
  align-items: center;
  background: #087342;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
  width: 30px;
}

.rcc-login-footer-links a:hover {
  background: #ef5b20;
  color: #ffffff;
  transform: translateY(-2px);
}


.rcc-login-location > .fa-solid {
  font-size: 30px;
}


.rcc-login-location strong {
  display: block;

  font-size: 14px;
}


.rcc-login-location small {
  display: block;

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 3px;

  margin-top: 2px;
}


.rcc-login-powered {
  align-items: center;
  background: transparent;
  color: #193629;
  display: flex;
  flex: 0 0 auto;
  height: auto;
  margin: 0 0 0 auto;
  order: 3;
  padding: 0;
  text-align: center;
}

.rcc-login-powered a {
  align-items: center;
  display: inline-flex;
}

.rcc-login-powered img {
  display: block;
  height: auto;
  max-height: 66px;
  max-width: 340px;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: auto;
}


.rcc-login-powered small {
  display: block;

  font-family: Arial, sans-serif;

  font-size: 10px;
}


.rcc-login-powered strong {
  display: block;

  font-family: Arial, sans-serif;

  font-size: 18px;
}

/* Refined account-page header */
body:has(.rcc-auth-page) .header {
  background: #ffffff;
  box-shadow: 0 5px 22px rgba(19, 72, 47, 0.10);
  position: relative;
  z-index: 20;
}

body:has(.rcc-auth-page) .header__middle {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbf8 100%);
  padding: 12px 0 14px !important;
}

body:has(.rcc-auth-page) .rcc-header-brand {
  align-items: center;
  gap: 32px;
}

body:has(.rcc-auth-page) .rcc-header-brand__logo {
  height: 72px;
  width: 72px;
}

body:has(.rcc-auth-page) .rcc-header-brand__gov-logo {
  height: 54px;
  width: 54px;
}

body:has(.rcc-auth-page) .rcc-header-brand__title {
  font-size: 28px;
}

body:has(.rcc-auth-page) .header__menu-area {
  background: linear-gradient(90deg, #f7941d 0%, #f4511e 48%, #ef2118 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

body:has(.rcc-auth-page) #mobile-menu > ul {
  align-items: center;
  display: flex;
  gap: 4px;
  margin: 0;
}

body:has(.rcc-auth-page) #mobile-menu > ul > li > a,
body:has(.rcc-auth-page) .header__right-icon .xcg-btn {
  border-radius: 8px;
  display: inline-block;
  line-height: 1;
  padding: 14px 16px;
  transition: background-color 160ms ease, transform 160ms ease;
}

body:has(.rcc-auth-page) .header__right-icon {
  align-items: center;
  display: flex;
  float: right;
  height: 50px;
  margin-top: 0 !important;
}

body:has(.rcc-auth-page) .header__right-icon .xcg-btn {
  height: 42px;
  margin-top: 0;
  padding: 13px 16px;
}

body:has(.rcc-auth-page) #mobile-menu > ul > li > a:hover,
body:has(.rcc-auth-page) #mobile-menu > ul > li.active > a,
body:has(.rcc-auth-page) .header__right-icon .xcg-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

body:has(.rcc-auth-page) .header__right-icon .xcg-btn {
  color: #ffffff;
  margin-left: 4px;
}

@media (max-width: 767.98px) {
  body:has(.rcc-auth-page) .rcc-header-brand__service-line,
  body:has(.rcc-auth-page) .rcc-header-brand__item--government {
    display: none;
  }

  body:has(.rcc-auth-page) .rcc-header-brand__title {
    font-size: 23px;
  }
}


/* =============================================
   RESPONSIVE - LARGE TABLET
============================================= */

@media (max-width: 1199.98px) {

  .rcc-login-container {
    gap: 40px;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(390px, 450px);

    padding-left: 30px;
    padding-right: 30px;
  }


  .rcc-login-heading {
    font-size: 44px;
  }


  .rcc-login-description {
    font-size: 18px;
  }

}


/* =============================================
   TABLET
============================================= */

@media (max-width: 991.98px) {

  .rcc-login-hero {
    background-position:
      35% center;
  }


  .rcc-login-overlay {
    background:

      linear-gradient(
        180deg,
        rgba(0, 39, 22, 0.62) 0%,
        rgba(0, 42, 24, 0.30) 40%,
        rgba(255, 255, 255, 0.05) 100%
      );
  }


  .rcc-login-container {
    display: flex;

    flex-direction: column;

    gap: 40px;

    min-height: auto;

    padding:
      50px 25px
      115px;
  }


  .rcc-login-intro {
    max-width: 650px;

    width: 100%;
  }


  .rcc-login-card {
    max-width: 540px;
  }

}


/* =============================================
   MOBILE
============================================= */

@media (max-width: 767.98px) {

  .rcc-auth-page {
    min-height: 100vh;
  }


  .rcc-login-hero {
    background-position:
      30% center;

    min-height: 100vh;
  }


  .rcc-login-container {
    padding:
      40px 15px
      90px;
  }


  .rcc-login-eyebrow {
    font-size: 18px;
  }


  .rcc-login-heading {
    font-size: 36px;
  }


  .rcc-login-description {
    font-size: 17px;
  }


  .rcc-login-features {
    gap: 7px;
  }


  .rcc-login-feature {
    padding-left: 5px;
    padding-right: 5px;
  }


  .rcc-login-feature strong {
    font-size: 15px;
  }


  .rcc-login-feature small {
    font-size: 10px;
  }


  .rcc-login-card {
    border-radius: 21px;

    padding:
      28px
      20px
      24px;
  }


  .rcc-login-card-heading h2 {
    font-size: 35px;
  }


  .rcc-login-card-heading p {
    font-size: 14px;
  }


  .rcc-login-bottom {
    bottom: 0;
    left: 0;
    right: 0;
  }


  .rcc-login-location {
    display: none;
  }


  .rcc-login-footer-center small {
    display: none;
  }


  .rcc-login-powered {
    height: auto;
    margin: 0 0 0 auto;
    padding: 0;
  }

  .rcc-login-powered img {
    width: 240px;
  }

  .rcc-login-powered {
    margin-left: auto;
  }

}


/* =============================================
   SMALL MOBILE

@media (max-width: 480px) {

  .rcc-login-intro {
    padding-bottom: 0;
  }


  .rcc-login-heading {
    font-size: 31px;
  }


  .rcc-login-description {
    font-size: 15px;
  }


  .rcc-login-features {
    display: none;
  }


  .rcc-login-card {
    padding:
      25px
      17px
      22px;
  }


  .rcc-login-card-heading h2 {
    font-size: 31px;
  }


  .rcc-login-register {
    font-size: 13px;
  }

}