@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
:root{
      --bg: #12299c;
      --bg_light: #102542;
      --green: #228b22;
      --light_success: #66bb6a93;
      --lightest_success: #0080002b;
      --success: #228b22c9;
      --primary_button: #2975de;
      --secondary_button: #dbbea1;
      --link: #b8753a;
      --bg_sec: #e5eafa;
      --error: #ff0037;
      --black: #363537;
      --white: #e6ebe0;
      --bg_color: #D8D8D8;
      --grey: #bcc1cf;
      --light_grey: #f4f7ff;
      --opaque: rgba(0, 0, 0, 0.6);
      --half_opaque: rgba(0, 0, 0, 0.5);
}
.primary_pill{
      font-family: "Montserrat", sans-serif !important;
      text-transform: uppercase;
      background: var(--bg_sec);
      padding: 5px;
      width: fit-content;
      border-radius: 7px;
      color: var(--bg);
}
body{
      font-family: "Raleway", sans-serif !important;
      scroll-behavior: smooth;
}
.secondary_text{
      font-family: "Montserrat", sans-serif !important;
      text-transform: uppercase;
      font-weight: 400;
}
.header{
      font-family: "Montserrat", sans-serif !important;
      padding-left: 50px;
      position: relative;
      font-weight: 400;
      text-transform: uppercase;
      width: fit-content !important;
}
.header::before{
      content: "";
      position: absolute;
      border: 2px solid white;
      background: var(--bg);
      width: 40px;
      height: 10px;
      top: calc(50% - 5px); left: 0;
}
.header::after{
      content: "";
      position: absolute;
      border: 2px solid white;
      background: var(--green);
      width: 30px;
      height: 10px;
      bottom: calc(50% - 10px); left: 0;
}

/* buttons */
button{
      display: flex;
      align-items: center;
      gap: 10px;
}
.primary_button{
      padding: 10px 20px;
      border: 1px solid var(--bg);
      background: var(--bg_sec);
      text-decoration: none;
      color: var(--bg);
      height: fit-content;
      font-weight: 600;
      transition: .5s;
      border-radius: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
}
.primary_button:hover{
      background: var(--bg);
      color: white;
      transition: .5s;
}
.primary_button:disabled{
      cursor: not-allowed;
      background: var(--white);
      border: 1px solid var(--opaque) !important;
      color: var(--opaque);
      border: none;
}
.secondary_button{
      padding: 10px 20px;
      border-radius: 30px !important;
      border: 1px solid var(--bg);
      background: var(--bg);
      text-decoration: none;
      color: white;
      height: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
}
.secondary_button:hover{
      background: var(--bg_sec);
      color: var(--bg);
}
.secondary_button:disabled{
      cursor: not-allowed;
      background: var(--white);
      border: 1px solid var(--opaque) !important;
      color: var(--opaque);
      border: none;
}
.tertiary_button{
      padding: 10px 30px;
      border: 1px solid var(--green);
      background: var(--green);
      text-decoration: none;
      color: var(--white);
      height: fit-content;
      font-weight: 600;
      transition: .5s;
      border-radius: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
}
.tertiary_button:hover{
      background: var(--light_success);
      border: 1px solid var(--light_success);
      transition: .5s;
      color: var(--green);
}
.tertiary_button:disabled{
      cursor: not-allowed;
      background: var(--light_success);
      border: 1px solid var(--opaque) !important;
      color: white;
      border: none;
}

/* font */
.bg_color{
      color: var(--bg);
}
.black_text{
      color: black;
}
.blue_text{
      color: dodgerblue;
}
.white_text{
      color: white;
}
.font_20px{
      font-size: 20px;
}
.font_30px{
      font-size: 30px;
}
.success_text{
      color: var(--green);
}
/* pill */
.secondary_pill{
      width: fit-content;
      background: var(--bg_color);
      color: var(--black);
      padding: 1px 3px;
      border-radius: 3px;
}
.blue_pill{
      width: fit-content;
      background: var(--bg_sec);
      color: var(--bg);
      padding: 1px 3px;
      border-radius: 3px;
}
/* padding */
.p_10px{
      padding: 10px;
}
.p_20px{
      padding: 20px;
}
.p_10_0{
      padding: 10px 0;
}
.p_5px{
      padding: 5px;
}
/* flex */
.flex{
      display: flex;
}
.right{
      display: flex;
      justify-content: right;
}
.flexible{
      display: flex;
      justify-content: center;
      align-items: center;
}
.flex_column{
      display: flex;
      flex-flow: column;
}
.space_between{
      display: flex;
      justify-content: space-between;
}
.align_center{
      display: flex;
      align-items: center;
}
.flex_wrap{
      display: flex;
      flex-wrap: wrap;
}
.g_10px{
      gap: 10px;
}
.g_20px{
      gap: 20px;
}
.g_30px{
      gap: 30px;
}
.g_50px{
      gap: 50px;
}
.g_100px{
      gap: 100px;
}
.align_top{
      display: flex;
      align-items: start;
}
.d_none{
      display: none;
}
/* border */
.red_border{
      border: 1px solid red;
}
.no_border{
      border: none !important;
      box-shadow: none !important;
}
.brad_0{
      border-radius: 0px !important;
}
.brad_5px{
      border-radius: 5px;
}
.brad_10px{
      border-radius: 10px;
}
.brad_20px{
      border-radius: 20px;
}
.brad_50perc{
      border-radius: 50%;
}
.bg_sec_border_4px{
      border: 4px solid var(--bg_sec);
}
.error_border{
      border: 1px solid red !important;
      background: #eebebe91 !important;
}
.black_border{
      border-bottom: .5px solid black;
}
.img_shadow{
      padding: 5px;
      box-shadow: 4px 4px var(--bg), -4px -4px var(--bg);
}
/* position */
.pos_rel{
      position: relative;
}
.pos_abs{
      position: absolute;
}
.pos_fixed{
      position: fixed;
}
.inset_0{
      top: 0; bottom: 0; right: 0; left: 0;
}
.z_ind_max{
      z-index: 100000000;
}
/* background */
.white_bg{
      background: white;
}
.opaque_bg{
      background: var(--opaque);
}
.light_grey_bg{
      background: var(--light_grey);
}
.light_bg{
      background: var(--bg_sec);
}
.no_bg{
      background: none !important;
}
.green_light_bg{
      background: var(--green);
}
/* margin */
.ptop_10px{
      margin-top: 10px;
}
.mtop_20px{
      margin-top: 20px;
}
.mtop_30px{
      margin-top: 30px;
}
.mtop_50px{
      margin-top: 50px;
}
.mtop_70px{
      margin-top: 70px !important;
}
.mtop_100px{
      margin-top: 100px;
}
.mb_30px{
      margin-bottom: 30px;
}
.mright_20px{
      margin-right: 20px;
}
.mleft_10px{
      margin-left: 10px;
}
/* input */
.form-control, .form-select{
      box-shadow: none;
}
.form-control:focus, .form-select:focus{
      box-shadow: none;
}
.one_line{
      overflow: hidden;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      line-clamp: 1;
}
.two_lines{
      overflow: hidden;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 2;
}
.six_lines{
      overflow: hidden;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      line-clamp: 6;
      -webkit-line-clamp: 6;
}
.ten_lines{
      overflow: hidden;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      line-clamp: 10;
      -webkit-line-clamp: 10;
}
.ellipsis{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}
.word_wrap{
      word-wrap: break-word;
}
.no_white_space{
      white-space: nowrap;
}
.capitalize_first::first-letter{
      text-transform: capitalize !important;
}
.w_100px{
      width: 100px;
}
.w_100perc{
      width: 100% !important;
}
.w_200px{
      width: 200px;
}
.h_300px{
      height: 300px;
}
.w_220px{
      width: 220px;
}
.h_100px{
      height: 100px;
}
.h_200px{
      height: 200px;
}
.cp{
      cursor: pointer;
}
.frosted{
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
}
.space_on_hover{
      display: flex;
      gap: 10px;
      transition: 1s;
}
.space_on_hover:hover{
      gap: 20px;
      transition: 1s;
}
.thick{
      font-weight: 600 !important;
}
.thicker{
      font-weight: 600;
}
.ham{
      width: 35px;
      height: 35px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      padding: 5px;
}
.ham_lines_str{
      border: .5px solid black;
      height: 4px;
      border-radius: 10px;
      background: black;
}
.width_fc{
      width: fit-content;
}
.overflow_img_div{
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
}
.overflow_img{
      width: 100%;
      transition: 1s;
      cursor: pointer;
}
.overflow_img:hover{
      transform: scale(1.1);
      transition: 1s;
}
.underline_text{
      text-align: center;
      position: relative;
}
.underline_text::after{
      position: absolute;
      content: "";
      border: 1px solid var(--bg_sec);
      width: 100px;
      background: var(--bg_sec);
      bottom: -10px; left: 50%;
      margin: auto;
      border-radius: 10px;
      padding: 3px;
      box-shadow: 0 4px 4px var(--grey);
}
.a{
      text-decoration: none;
}
.scroll_snap_over_hidden{
      display: flex;
      flex-flow: row;
      overflow: hidden;
      scroll-snap-type: x mandatory;
}
.scroll_align{
      scroll-snap-align: start;
}
.scrollbar_x{
      overflow-x: scroll;
      padding-bottom: 10px;
}
.scrollbar_x::-webkit-scrollbar{
      width: 10px;
      height: 10px;
}
.scrollbar_x::-webkit-scrollbar-thumb{
      background: var(--grey);
}
.link_text{
      color: var(--green);
}
.icon_right{
      margin-right: 7px;
}
.alert{
      margin: 0;
      border-radius: 0;
}
.clicked{
      background: var(--bg_sec);
      color: var(--bg);
}
.pims_div{
      width: 90%;
}

.login_popup_div{
      width: 75%;
}
.l_p_right{
      position: absolute;
      top: 0; right: 0;
}

/* popup */
.popup_class{
      width: 70%;
}

/* overlay */
.overlay_div{
      height: 50vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      color: white;
}
.overlay_div img{
      width: 100%;
      filter: brightness(50%);
}
/* .overlay_div::after{
      content: "";
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--half_opaque);
} */
.overlay_text{
      position: absolute;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      flex-flow: column;
      gap: 10px;
}

@media screen and (min-width : 500px) {
      .login_popup_div, .popup_class{
            width: 350px;
      }
}
@media screen and (min-width : 600px) {
      .min_width_600_fixed{
            width: 550px !important;
            margin: auto;
      }
}
@media screen and (min-width : 600px) {
      .min_width_6000_resp{
            width: 90% !important;
            margin: auto;
      }
}