@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  --site-primary: #001845;
  --site-secondary: #023e7d;
  --site-accent: #7b2cbf;
  --site-bg: #ffffff;
  --site-surface: #ffffff;
  --site-soft: #f6f8fb;
  --site-soft-2: #eef3f8;
  --site-border: #dbe3ee;
  --site-text: #102033;
  --site-muted: #64748b;
  --site-success: #128a49;
  --site-warning: #b7791f;
  --site-danger: #c24141;
  --site-shadow: 0 18px 50px rgba(0, 24, 69, 0.1);
  --site-shadow-soft: 0 10px 30px rgba(0, 24, 69, 0.08);
  --site-radius: 8px;
  --site-radius-sm: 6px;
  --site-font: "Inter", "Montserrat", Arial, sans-serif;
  --site-font-secondary: "Montserrat", "Inter", Arial, sans-serif;
}

html {
  background: var(--site-bg);
}

body {
  background: var(--site-bg);
}

header,
.main,
.row,
.row2,
.row33,
.row_features,
.row_contact,
.row_bottom,
.services,
.w_l_f,
.temp_preview,
.login,
.main2,
.main3,
.container,
.container2,
.filter_bar,
.dashboard,
footer {
  font-family: var(--site-font);
}

header {
  align-items: center;
  min-height: 72px;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--site-border);
  box-shadow: 0 8px 28px rgba(0, 24, 69, 0.07) !important;
}

header .logo {
  align-items: center;
}

header .logo img {
  object-fit: contain;
}

header .logo h3 {
  color: var(--site-primary) !important;
  font-family: var(--site-font);
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

header .head_txt h3 {
  color: var(--site-muted) !important;
  font-family: var(--site-font);
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

header .head_txt h3:hover,
header .head_txt h3 a:hover {
  color: var(--site-primary) !important;
}

.mobile_home {
  color: var(--site-primary);
}

.main {
  background: var(--site-primary) !important;
}

.main .clip_path1,
.clip_path1 {
  background: linear-gradient(135deg, rgba(0, 24, 69, 0.96), rgba(2, 62, 125, 0.92) 58%, rgba(123, 44, 191, 0.9)) !important;
}

.main .main_txt h1 {
  color: #ffffff;
  font-family: var(--site-font);
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.main .main_txt h2,
.main .main_txt p {
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--site-font-secondary);
  letter-spacing: 0 !important;
}

.btn_1,
.btn_2,
.btn_create,
.next_btn,
.pre_btn,
.container2 .btn_payment,
.main3 form input[type="submit"],
.login form input[type="submit"],
.row_bottom input[type="submit"] {
  border: 0 !important;
  border-radius: var(--site-radius-sm) !important;
  font-family: var(--site-font);
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}

.btn_1,
.btn_create,
.next_btn,
.container2 .btn_payment,
.main3 form input[type="submit"],
.login form input[type="submit"],
.row_bottom input[type="submit"] {
  background: var(--site-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(123, 44, 191, 0.22);
}

.btn_2,
.pre_btn {
  background: #ffffff !important;
  color: var(--site-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
}

.btn_1:hover,
.btn_2:hover,
.btn_create:hover,
.next_btn:hover,
.pre_btn:hover,
.container2 .btn_payment:hover,
.main3 form input[type="submit"]:hover,
.login form input[type="submit"]:hover,
.row_bottom input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 24, 69, 0.16);
}

.login {
  width: min(440px, calc(100% - 40px)) !important;
  margin: 7vh auto !important;
  padding: 38px !important;
  background: var(--site-surface) !important;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow) !important;
}

.login h1 {
  color: var(--site-primary) !important;
  font-family: var(--site-font);
  font-size: 30px;
  line-height: 1.18;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.login h1::after {
  width: 56px !important;
  height: 4px !important;
  left: 0 !important;
  bottom: -12px !important;
  background: var(--site-accent) !important;
}

.login p {
  margin: 28px 0 18px !important;
  color: var(--site-muted) !important;
  font-size: 13px !important;
  line-height: 1.6;
}

.login form {
  margin: 0 !important;
}

.login form input {
  box-sizing: border-box;
  width: 100% !important;
  margin: 7px 0 !important;
  padding: 13px 14px !important;
  color: var(--site-text);
  background: var(--site-soft) !important;
  border: 1px solid var(--site-border) !important;
  border-radius: var(--site-radius-sm) !important;
  font-family: var(--site-font);
  font-size: 15px !important;
  outline: none;
}

.login form input:focus {
  background: #ffffff !important;
  border-color: var(--site-accent) !important;
  box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.12);
}

.login form input[type="submit"] {
  margin-top: 14px !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
}

.login form a {
  display: inline-flex;
  align-items: center;
  margin: 8px 10px 0 0 !important;
  padding: 0 !important;
  color: var(--site-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
}

.alert {
  border-radius: var(--site-radius-sm) !important;
  font-family: var(--site-font);
  font-weight: 600;
  line-height: 1.45;
}

.info {
  color: var(--site-secondary) !important;
  background: #eaf2fb !important;
}

.success,
.Success {
  color: var(--site-success) !important;
  background: #e8f7ef !important;
}

.danger {
  color: var(--site-danger) !important;
  background: #fdecec !important;
}

.main2,
.main3,
.container,
.container2,
.filter_bar {
  background: var(--site-surface) !important;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow-soft) !important;
}

.main2 {
  margin: 18px !important;
  padding: 24px !important;
}

.main3 {
  margin: 18px !important;
  padding: 28px !important;
  min-height: auto !important;
}

.main3 h1,
.main3 h2,
.container h2,
.container2 h1,
.filter_bar h1 {
  color: var(--site-primary) !important;
  font-family: var(--site-font);
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.main3 h1 {
  margin: 4px 0 28px !important;
  font-size: 28px !important;
}

.main3 h2,
.container h2 {
  font-size: 22px !important;
}

.main3 h3,
.main3 p,
.container2 h3,
.filter_bar h3 {
  color: var(--site-muted) !important;
  font-family: var(--site-font);
  letter-spacing: 0 !important;
}

.main3 form .input_box {
  box-sizing: border-box;
  width: min(560px, 100%) !important;
  margin: 16px auto !important;
  background: #ffffff !important;
  border: 1px solid var(--site-border) !important;
  border-radius: var(--site-radius-sm) !important;
}

.main3 form .input_box p {
  top: -18px !important;
  left: 12px !important;
  padding: 0 6px !important;
  color: var(--site-secondary) !important;
  background: var(--site-surface) !important;
  font-size: 11px !important;
  font-weight: 700;
}

.main3 form .input_box input,
.main3 form .input_box textarea,
.main3 form .input_box select,
.filter_bar form input,
.filter_bar form select,
.container2 form input,
.input_area input,
.input_area textarea {
  box-sizing: border-box;
  width: 100%;
  color: var(--site-text);
  background: var(--site-soft) !important;
  border: 1px solid var(--site-border) !important;
  border-radius: var(--site-radius-sm) !important;
  font-family: var(--site-font);
  font-size: 14px !important;
  outline: none;
}

.main3 form .input_box input,
.main3 form .input_box textarea,
.main3 form .input_box select {
  padding: 13px 14px !important;
}

.main3 form .input_box textarea {
  min-height: 116px;
  resize: vertical;
}

.main3 form .input_box input:focus,
.main3 form .input_box textarea:focus,
.main3 form .input_box select:focus,
.filter_bar form input:focus,
.filter_bar form select:focus,
.container2 form input:focus,
.input_area input:focus,
.input_area textarea:focus {
  background: #ffffff !important;
  border-color: var(--site-accent) !important;
  box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.12);
}

.main3 form input[type="submit"] {
  min-width: 160px;
  margin: 18px auto 4px !important;
  padding: 13px 20px !important;
  font-size: 15px !important;
}

.filter_bar {
  margin: 18px !important;
  padding: 18px !important;
}

.filter_bar h1 {
  margin-bottom: 14px !important;
  font-size: 24px !important;
  text-align: left !important;
}

.filter_bar h3 {
  margin: 0 0 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.filter_bar form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.filter_bar form input,
.filter_bar form select {
  width: auto !important;
  min-width: 190px;
  padding: 10px 12px !important;
}

.filter_bar form input[type="submit"] {
  min-width: 92px;
  color: #ffffff !important;
  background: var(--site-secondary) !important;
  border-color: var(--site-secondary) !important;
  font-weight: 700;
}

.container {
  height: auto !important;
  min-height: 0 !important;
  margin: 18px !important;
  padding: 0 !important;
  overflow: auto !important;
}

.card_row,
.card_row2 {
  box-sizing: border-box;
  min-width: 920px;
  align-items: stretch;
}

.card_row {
  background: var(--site-primary) !important;
  color: #ffffff !important;
  border-radius: var(--site-radius) var(--site-radius) 0 0;
  box-shadow: none !important;
}

.card_row .row_contd,
.card_row p {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 10px !important;
  color: #ffffff !important;
  font-family: var(--site-font);
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.card_row2 {
  background: #ffffff;
  border-bottom: 1px solid var(--site-border);
}

.card_row2:nth-child(odd) {
  background: var(--site-soft);
}

.card_row2:hover {
  background: #eef5ff;
}

.card_row2 .row_contd,
.card_row2 p {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px !important;
  color: var(--site-text) !important;
  font-family: var(--site-font);
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  border-right: 1px solid var(--site-border);
}

.card_row2 .row_contd i,
.card_row2 p i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  margin: 2px 3px !important;
  color: var(--site-secondary);
  background: #ffffff;
  border: 1px solid var(--site-border) !important;
  border-radius: var(--site-radius-sm) !important;
}

.pay_now_btn {
  color: #ffffff !important;
  background: var(--site-accent) !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
}

#Success,
#Active {
  color: var(--site-success) !important;
  font-weight: 800 !important;
}

#Failed,
#Inactive {
  color: var(--site-danger) !important;
  font-weight: 800 !important;
}

#Created {
  color: var(--site-warning) !important;
  font-weight: 800 !important;
}

.dashboard {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  margin: 18px;
  color: var(--site-text);
}

.dash_side1,
.dash_side2 {
  box-sizing: border-box;
}

.dash_side1 {
  background: var(--site-primary) !important;
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow-soft);
  overflow: hidden;
}

.dash_link {
  padding: 10px;
}

.dash_link a,
.dash_link li {
  display: block;
}

.dash_link li {
  margin: 4px 0 !important;
  padding: 13px 14px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  background: transparent !important;
  border-radius: var(--site-radius-sm);
  list-style: none;
  font-family: var(--site-font);
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.dash_link li:hover,
.dash_link li.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

.dash_side2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.das_box,
.user_details {
  background: var(--site-surface) !important;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow-soft) !important;
}

.das_box {
  min-height: 118px;
  margin: 0 !important;
  padding: 18px !important;
  cursor: pointer;
}

.das_box p {
  margin: 0 !important;
  color: var(--site-muted) !important;
  font-family: var(--site-font);
  font-size: 13px !important;
  font-weight: 700 !important;
}

.das_box p:last-child {
  margin-top: 18px !important;
  color: var(--site-primary) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.das_box i {
  color: var(--site-accent);
}

.user_details {
  grid-column: 1 / -1;
  width: auto !important;
  margin: 0 !important;
  padding: 22px !important;
}

.user_details h3 {
  margin: 0 0 14px !important;
  color: var(--site-primary) !important;
  font-family: var(--site-font);
  font-size: 20px !important;
  font-weight: 800 !important;
}

.flex_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--site-border);
}

.flex_box:last-child {
  border-bottom: 0;
}

.flex_box p {
  margin: 0 !important;
  color: var(--site-text) !important;
  font-family: var(--site-font);
  font-size: 14px !important;
  font-weight: 700 !important;
}

.flex_box p:last-child {
  color: var(--site-secondary) !important;
}

.container2 {
  width: min(760px, calc(100% - 36px)) !important;
  margin: 18px auto !important;
  padding: 28px !important;
}

.container2 form {
  width: 100% !important;
}

.container2 form input {
  margin: 7px 0 !important;
  padding: 12px 13px !important;
}

.row,
.row2,
.row33,
.row_features,
.row_contact,
.temp_preview,
.services,
.w_l_f {
  background: var(--site-bg) !important;
}

.side2 h1,
.row2 h1,
.row33 h1,
.row_features h1,
.temp_preview h1,
#servicesh2 {
  color: var(--site-primary) !important;
  font-family: var(--site-font);
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.side2 h3,
.side2 p,
.row33 p,
.row_features p,
.services_box p {
  color: var(--site-muted) !important;
  font-family: var(--site-font-secondary);
  letter-spacing: 0 !important;
}

.row_backimg {
  background: linear-gradient(180deg, #ffffff, #f3f7fb) !important;
}

.row_backimg h1 {
  color: var(--site-primary) !important;
}

.row_backimg .flex_box .flex_boxin,
.row33 .benefit_box,
.flex_pricingin,
.services_box {
  background: var(--site-surface) !important;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow-soft) !important;
  color: var(--site-text) !important;
}

.row_backimg .flex_box .flex_boxin {
  transform: none !important;
}

.row_backimg .flex_box .flex_boxin i,
.cont_share_boxes i,
.row33 .benefit_box i {
  color: var(--site-accent) !important;
}

.row_backimg .flex_box .flex_boxin h1,
.row_backimg .flex_box .flex_boxin p,
.services_box h3 {
  color: var(--site-primary) !important;
}

.flex_pricingin h3,
.flex_pricingin h1 {
  background: var(--site-primary) !important;
  color: #ffffff !important;
}

.flex_pricingin li.back {
  background: var(--site-soft) !important;
}

.flex_pricingin li i {
  background: var(--site-success) !important;
}

.cont_share_boxes {
  background: var(--site-surface) !important;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow-soft) !important;
}

.services_box .pre_btn {
  background: var(--site-accent) !important;
  color: #ffffff !important;
}

.row_bottom {
  background: var(--site-primary) !important;
}

.row_bottom .side1 {
  background: #ffffff !important;
}

.row_bottom .side2 input,
.row_bottom .side2 textarea {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.72) !important;
}

footer {
  background: var(--site-primary) !important;
}

footer p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--site-font);
}

@media screen and (max-width: 900px) {
  header {
    min-height: 64px;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  header .head_txt {
    right: 18px !important;
  }

  .login {
    width: calc(100% - 32px) !important;
    margin: 5vh auto !important;
    padding: 28px 22px !important;
  }

  .main2,
  .main3,
  .container,
  .filter_bar {
    margin: 12px !important;
  }

  .main3 {
    padding: 22px 16px !important;
  }

  .filter_bar form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .filter_bar form input,
  .filter_bar form select {
    width: 100% !important;
    min-width: 0;
  }

  .dashboard {
    display: block !important;
    margin: 12px;
  }

  .dash_side1 {
    margin-bottom: 12px;
  }

  .dash_side2 {
    grid-template-columns: 1fr;
  }

  .card_row,
  .card_row2 {
    min-width: 760px;
  }
}