@tailwind base;
@tailwind components;
@tailwind utilities;


@font-face {
  font-family: GIP-Light;
  src: url('./fonts/GIP-Light.otf');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GIP-Regular";
  src: url('./fonts/GIP-Regular.otf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: GIP-Medium;
  src: url('./fonts/GIP-Medium.otf');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: GIP-Semibold;
  src: url('./fonts/GIP-SemiBold.otf');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: GIP-Bold;
  src: url('./fonts/GIP-Bold.otf');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: GIP-ExtraBold;
  src: url('./fonts/GIP-ExtraBold.otf');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



html {
  scroll-behavior: smooth;
}

body {
  zoom: 90%;
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #F6FAFD;
}

.fontLight {
  font-family: GIP-Light, sans-serif;
  font-weight: 300;
}

.fontRegular {
  font-family: GIP-Regular, sans-serif;
  font-weight: 400;
}

.fontMedium {
  font-family: GIP-Medium, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 500;
}

.fontSemibold {
  font-family: 'GIP-Semibold', sans-serif;
  font-weight: 600;
}

.fontBold {
  font-family: 'GIP-Bold', sans-serif;
  font-weight: 800;
}

.fontExtraBold {
  font-family: GIP-ExtraBold, sans-serif;
  font-weight: 900;
}

/* ============= NEW FONSTS ============= NEW FONSTS ============= NEW FONSTS ============= */

.ibm-plex-serif-light {
  font-family: "IBM Plex Serif", serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-serif-regular {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-serif-medium {
  font-family: "IBM Plex Serif", serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-serif-semibold {
  font-family: "IBM Plex Serif", serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-serif-bold {
  font-family: "IBM Plex Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.ibm-plex-serif-extraBold {
  font-family: "IBM Plex Serif", serif;
  font-weight: 800;
  font-style: normal;
}


.double-line {
  display: inline-block;
  position: relative;
  padding: 5px;
  border: solid 3px #1A1B1F;
  /* 内枠のスタイル */
  box-shadow: 0 0 0 0 #FE8E59, 6px 6px 0 0 #FE8E59, 6px 6px 0 1px #1A1B1F;
}





/* // <uniquifier>: Use a unique and descriptive class name */
/* // <weight>: Use a value from 200 to 1000 */

.mulish-light {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.mulish-regular {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.mulish-medium {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.mulish-semiBold {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.mulish-bold {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.mulish-extraBold {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

/* ============= NEW FONSTS ============= NEW FONSTS ============= NEW FONSTS ============= */

input[type=checkbox] {
  position: relative;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
  border: 1px solid #FD5201;
  border-radius: 8px;
  background-color: white;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 8px;
  height: 17px;
  border: solid #FD5201;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 8px;
}

/* Бүх хуудсанд хамааралтай байж болох тухайн хуудасны бие хэсгийн HEIGHT */
.mainH {
  height: 100%;
  min-height: calc(100vh - 110px);
}


/* TABLE */

table {
  width: 100% !important;
  font-family: GIP-Regular, sans-serif !important;
  font-weight: 400 !important;
}

table th {
  font-weight: 500;
  padding: 16px;
  border: 1px solid #4E4B6620;
}

table td {
  font-weight: 500;
  padding: 16px 10px;
  border: 1px solid #4E4B6620;
}

table tbody tr {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border: 1px solid #4E4B6620;
}

.financial p {
  padding-bottom: 10px;
}

.financial table td {
  font-weight: 500;
  padding: 10px;
  border: 1px solid #4E4B6620;
}

.zasaglal p {
  padding-bottom: 10px;
}

.zasaglal {
  padding: 20px;
}

.zasaglal ol li {
  color: #051C2C;
  padding: 5px;
  margin-left: 30px;
  list-style: decimal;
}


/* STEP SLIDER (online buteegdehuun hudaldan awalt huudasnii component solidoh hesegt zoriulson) */

.slider-exit {
  z-index: 1;
}

.slider-enter {
  z-index: 10;
}

.left.slider-enter {
  transform: translate3d(-50%, 0, 0);
  opacity: 0;
}

.left.slider-exit {
  transform: translate3d(50%, 0, 0);
  opacity: 0;
}

.right.slider-enter {
  transform: translate3d(25%, 0, 0);
  opacity: 0;
}

.right.slider-exit {
  transform: translate3d(-25%, 0, 0);
}

.slider-enter.slider-enter-active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: all 300ms ease-in-out;
}

.slider-exit.slider-exit-active {
  /* transform: translate3d(-25%, 0, 0); */
  opacity: 0;
  /* transition: all 0ms ease-in-out; */
}

.c-stepper {
  --size: 3rem;
  --spacing: 0.5rem;
  --circle-size: clamp(1.5rem, 5vw, 3rem);
  --spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.c-stepper__item {
  display: flex;
  gap: var(--spacing);
  align-items: center;


  &:not(:last-child) {
    flex: 1;

    &:after {
      content: "";
      position: relative;
      /* z-index: -1; */
      height: 1px;
      background-color: #B6B6BA;
      flex: 1;
      width: 85px;
      margin-right: 0.5rem;
    }
  }
}




/* END SLIDER */



/* ONLINE БҮТЭЭГДЭХҮҮН ХУДАЛДАН АВАЛТЫН ГЭРЭЭНИЙ ХУУДАС */
.contract p {
  margin-bottom: 12px;
}



/* Нүүр хуудас бүтээгдэхүүний slider bottom slider */
.homeProduct .swiper-pagination {
  top: auto !important;
  bottom: 55% !important;
  left: 10% !important;
  text-align: start !important;
}

.homeProduct .swiper-pagination-bullet {
  background: white !important;
  opacity: 1 !important;
}

.homeProduct .swiper-pagination-bullet-active {
  background: #C1363A !important;
}


@keyframes bounce {

  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.homeProduct .product:hover .rightIcon {
  animation: bounce 1s infinite;

}

.rightIcon {
  animation: bounce 1s infinite;

}

@media screen and (min-width: 768px) and (max-width: 928) {
  .homeProduct .swiper-pagination {
    bottom: 48% !important;
  }
}


/* Нүүр хуудасны мэдээний жагсаалт */
.homeNews .news:hover .rightIcon {
  animation: bounce 1s infinite;
}

/* @media screen and (max-width: 768px) {
  .homeProduct .swiper-pagination {
    bottom: 5% !important;
  }

} */

/* .productSlideImg {
  clip-path: url(#wave);

  clip-path: polygon(20% 0%, 80% 0%, 100% 0px, 100% 79%, 88% 110%, 40% 81%, 0% 60%, 0px 0px);
} */

/* .productSlideImg:after {
  content: '';
  width: 100%;
  height: 300px;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: ellipse(85% 100% at 50% 0%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 0px, 100% 77%, 88% 110%, 40% 81%, 0% 60%, 0px 0px);
} */




@media screen and (min-width: 1020px) {
  /* .aboutUsYT {
    clip-path: ellipse(85% 100% at 50% 0%);
  } */

}

/* МЭДЭЭНИЙ ЖАГСААЛТ ХУУДАСЛАЛТ */
.newsTitle {
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: white;
}

.pagination {
  margin: 24px auto;
  display: flex;
}

.pagination ul {
  display: none;
}

.pagination li {
  display: none !important;
  font-style: normal;
  font-size: 18px;
  line-height: 20px;
  width: 44px;
  height: 44px;
  margin-right: 16px;
  /* border: 1px solid #c8c8c8; */
  /* background-color: #f9f9fb; */
  /* color: #c8c8c8; */

  justify-content: center;
  display: inline-flex;
  /* border-radius: 50%; */
}

.pagination li.active {
  border: 1px solid #C1363A;
  background-color: #C1363A;
  color: #fff;
  display: none;
}

.pagination li.previous {
  width: 58px;
  margin-right: 0;
}

.pagination li.next {
  width: 90px;
}

.pagination li.previous,
li.next {
  display: inline-flex !important;
}

.pagination li.previous,
li.next a {
  color: #C1363A;
  font-size: 22px;
}

.pagination li a {
  padding: 12px;
  text-align: center;
  align-self: center;
  width: 100%;
  height: 100%;
}


/*  мэдээний дэлгэрэнгүй хуудас */


.postMainImg {
  height: 400px;
}

@media screen and (max-width: 640px) {
  .postMainImg {
    height: 300px
  }

  .c-stepper__item {

    gap: 0;

    &:not(:last-child) {
      &:after {
        width: 100%;
        margin-right: 0;
      }
    }
  }
}

@media screen and (max-width: 420px) {
  .postMainImg {
    height: 150px
  }
}


/* ============= МЭДЭЭ  ============= МЭДЭЭЭ ============= */
.newsDetail ul li {
    list-style: disc;
    margin-left: 45px;
}


/* ============= HEADER ============= HEADER ============= HEADER ============= */
label .menu {
  position: absolute;
  right: -55px;
  top: -45px;
  z-index: 100;
  width: 120px;
  height: 110px;
  background: #FFF;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;

}

label .hamburger {
  position: absolute;
  top: 70px;
  left: 25px;
  width: 30px;
  height: 2px;
  background: #C1363A;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

label .hamburger:after,
label .hamburger:before {
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #C1363A;
}

label .hamburger:before {
  top: -10px;
}

label .hamburger:after {
  bottom: -10px;
}

label input {
  display: none;
}

label input:checked+.menu {
  box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
  border-radius: 0;

}

label input:checked+.menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

}

label input:checked+.menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;

}

label input:checked+.menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;

}

label input:checked+.menu+ul {
  opacity: 1;
}

label ul {
  z-index: 200;
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: translate(-50%, 10%);
  transform: translate(-50%, 10%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
}

label a {
  margin-bottom: 1em;
  display: block;
  color: #f38630;
  text-decoration: none;

}

.webkit {
  display: -webkit-box !important;
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.webkit::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

.scrollHide {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.scrollHide::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}


/* ============= END HEADER ============= END HEADER ============= END HEADER ============= */
.ntStep::after {
  content: "";
  position: absolute;
  display: block;
  top: 2%;
  left: 40px;
  width: 2%;
  height: 90%;
  background: url('/images/vector-line.png');
  -moz-background-size: 90%;
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: left 50%;
}

@media screen and (min-width: 380px) {
  .ntStep::after {
    top: 2%;
    left: 40px;
    width: 1%;
    height: 90%;
  }
}

@media screen and (min-width: 639px) {
  .ntStep::after {
    display: none;
  }
}

/* ABOUT US */
.aboutUs .swiper-pagination-bullet-active {
  background: #FD5201 !important;
  width: 12px !important;
  height: 12px !important;
}


/* SVG ANIMATION -frame-line----- */
.container-svg-animate {
  position: absolute;
  inset: 0;
  min-height: clamp(23.75rem, -40.8654rem + 161.5385vw, 50rem);
  height: clamp(23.75rem, -40.8654rem + 161.5385vw, 50rem);
}

#logo {
  transform-box: fill-box;
  /* transform-origin: 50% 100%; */
  animation: logo-scale 2s infinite linear alternate;
}

@keyframes logo-scale {
  0% {
    transform: translate(0, 50%) scale(0.99) translate(0, -50%);
  }

  100% {
    transform: translate(0, 50%) scale(1.05) translate(0, -50%);
  }
}

#base {
  fill: none;
  stroke-width: 1px;
  stroke-dashoffset: var(--frame-offset-length);
  stroke-dasharray: 1 var(--frame-length) var(--frame-length) 1;
}

.filling-anime {
  animation: fillStroke 15s linear infinite;
}

@keyframes fillStroke {
  100% {
    stroke-dashoffset: 0;
  }
}


/* ================== REACT DATE PICKER ==================== */
.react-datepicker-wrapper {
  width: 100%;
}


/* ============== UL LI LO ============== */

.feature ul li {
  list-style: disc;
  margin-left: 25px;
}

.hoverBG .imgDefault {
  display: grid;
}

.hoverBG .imgHover {
  display: none;
}

.hoverBG:hover .imgDefault {
  display: none;
}

.hoverBG:hover .imgHover {
  display: grid;
}