@import "./roots.css";
@import "./animations.css";

@font-face {
  font-family: yekan;
  src: url("../assets/font/yekan/woff/YekanBakh-Regular.woff");
  src: url("../assets/font/yekan/woff/YekanBakh-Regular.woff")
      format("embedded-opentype"),
    url("../assets/font/yekan/woff2/YekanBakh-Regular.woff2") format("woff2"),
    url("../assets/font/yekan/woff2/YekanBakh-Regular.woff2") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: yekan;
  src: url("../assets/font/yekan/woff/YekanBakh-Bold.woff");
  src: url("../assets/font/yekan/woff/YekanBakh-Bold.woff")
      format("embedded-opentype"),
    url("../assets/font/yekan/woff2/YekanBakh-Bold.woff2") format("woff2"),
    url("../assets/font/yekan/woff2/YekanBakh-Bold.woff2") format("truetype");
  font-weight: 700;
  font-style: normal;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  transition-duration: 0.1s;
  background-image: none;
  background-color: transparent;
  font-family: yekan !important;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  color: inherit;
}
body {
  background-color: var(--background-color);
  font-family: yekan !important;
  color: var(--pen-color);
  direction: rtl;
  overflow-x: hidden;
  position: relative;
}
.mainButton {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-lg) !important;
  font-weight: bold;
  padding: 0.3rem;
  height: var(--buttonHeight);
  border-radius: var(--radius);
  color: inherit;
  border: none;
  width: 180px;
  background-color: var(--secondaryColor);
  color: var(--whiteColor);
}

header {
  background-image: linear-gradient(#f7f8fb, #f7f8fb1b);
  backdrop-filter: blur(4px);
  z-index: 100;
}

footer {
  background-color: var(--whiteColor);
  bottom: 0;
  right: 0;
  left: 0;
  position: inherit;
}

.sellTether,
.buyTether,
.buyPM,
.sellPM {
  border-radius: 50%;
  padding: 0.4rem;
  width: 72px;
  height: 72px;
  font-size: var(--font-md);
  transition-duration: 0.4s;
  transition-timing-function: linear;
  animation: livemobile linear 4s infinite;
}
.buyTether,
.buyPM {
  border: 1px solid #a8e3dc;
  background-color: #ebf9f7;
  color: var(--profit-color);
  right: 1.5rem;
}
.buyTether{
  top: 3rem;

}
.sellTether,
.sellPM {
  border: 1px solid #ffbebe;
  background-color: #fff4f4;
  color: var(--redPen);
  
}
.sellTether {
  left: auto;
  right: 1.5rem;
  top: 6.5rem;
}
.sellPM {
  bottom: 5rem;

  left: 1.5rem;
  font-size: var(--font-sm);
  width: 84px;
  height: 84px;
}
.buyPM {
  bottom: 8.9rem;
  left: 1.5rem;
  right: auto;
  font-size: var(--font-sm);
  width: 80px;
  height: 80px;
}
#tether {
  border: 1px solid var(--profit-color);
  border-radius: var(--radius);
}
#perfect {
  border: 1px solid var(--loss-red);
  border-radius: var(--radius);
}
.buy p {
  color: var(--profit-color);
}
.sell p {
  color: var(--redPen);
}
.buy span,
.sell span {
  font-size: var(--font-md);
}
footer ul {
  list-style-type: none;
}
.logo{
  width: fit-content;
}
.box {
  background-color: var(--whiteColor);
  border-radius: var(--radius);
  box-shadow: var(--boxShadow);
}

.md-text {
  font-size: var(--font-md);
}
.lg-text {
  font-size: var(--font-lg);
}
.mockup {
  width: 100%;
  margin: auto;
  height: 100%;
  object-fit: contain;
}
.linkItem {
  background-color: var(--mainColor);
  color: var(--whiteColor);
  height: 52px;
  width: 200px;
  transition-duration: 0.4s;
  transition-timing-function: linear;
}
.linkItem:hover {
  background-color: #1539b9;
}
.linkItem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.whyMehran {
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, #ffffff 10%, #f5f7ff 40%, #f5f7ff42 86%);
  width: 100%;
}
.content {
  margin-top: -2.3rem;
}

.content .box {
  font-size: var(--font-md);
  width: 80%;
  margin: auto;
  box-shadow: var(--boxShadow);
  border-radius: 20px;
}
.livenow {
  width: 30px;
  padding: 10px 40px 12px 40px;
  margin: 0 auto;
  display: inline-block;
  position: absolute;
  top: 0.5rem;
  left: 1rem;
}
.livenow > img {
  vertical-align: middle;
  border-radius: 100%;
  position: absolute;
  margin: 0 auto;
  -webkit-animation: live 1.4s infinite ease-in-out;
  animation: live 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.loader {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
  margin: 6px auto;
  position: relative;
  background: #fff;
  box-shadow: -10px 0 #fff, 10px 0 #fff;
  box-sizing: border-box;
  animation: shadowPulse 2s linear infinite;
}
.social a:hover img {
  transform: scale(1.2);
  transition-duration: 1s;
}

@media (max-width: 1000px) {
  .linkItem {
    width: 150px;
  }
}
@media (min-width: 768px) {
  section .box {
    min-height: 160px;
  }
}

@media (max-width: 768px) {
  .whyMehran .col-6 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .downloadApp {
    width: fit-content;
  }
  .linkItem {
    height: 43px;
    width: 103px;
  }
  .heroTitle {
    width: 90% !important;
    font-size: 14pt !important;
  }
  .content {
    margin-top: -1.2rem !important;
  }

  .mockup > img {
    height: 290px !important;
  }
  .mockup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100%;
    background: var(--gradient);
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    transform: scaleX(3);
    z-index: -1;
  }
  .mockup {
    padding: 1rem 0 2.5rem;
  }
  header {
    background-color: #ffffff94;
  }
  header img {
    height: 40px;
    object-fit: contain;
  }
  header a {
    width: 130px !important;
  }
  .mockup .content img {
    height: 65px;
  }

  section .box {
    width: 100%;
    margin: 0.5rem auto !important;
    height: 90%;
  }
  footer {
    flex-direction: column-reverse;
  }
  ul {
    list-style-type: none;
  }
  .social {
    margin: 0.5rem;
  }
}