@import "tailwindcss";

@theme {
  --color-firstcolor: #7F55B1;
  --color-secondcolor: #9B7EBD;
  --color-thirdcolor: #F49BAB;
  --color-fourthcolor: #FFE1E0;
}

@font-face {
  font-family: "Yekan Bakh Fat";
  src: url("../fonts/eot/YekanBakh-Fat.eot");
  src: local("YekanBakh-Fat"),
    url("../fonts/eot/YekanBakh-Fat.eot?#iefix") format("embedded-opentype"),
    url("../fonts/woff2/YekanBakh-Fat.woff2") format("woff2"),
    url("../fonts/woff/YekanBakh-Fat.woff") format("woff"),
    url("../fonts/ttf/YekanBakh-Fat.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/eot/YekanBakh-Medium.eot");
  src: local("YekanBakh-Medium"),
    url("../fonts/eot/YekanBakh-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/woff2/YekanBakh-Medium.woff2") format("woff2"),
    url("../fonts/woff/YekanBakh-Medium.woff") format("woff"),
    url("../fonts/ttf/YekanBakh-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/eot/YekanBakh-Bold.eot");
  src: local("YekanBakh-Bold"),
    url("../fonts/eot/YekanBakh-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/woff2/YekanBakh-Bold.woff2") format("woff2"),
    url("../fonts/woff/YekanBakh-Bold.woff") format("woff"),
    url("../fonts/ttf/YekanBakh-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/eot/YekanBakh-Light.eot");
  src: local("YekanBakh-Light"),
    url("../fonts/eot/YekanBakh-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/woff2/YekanBakh-Light.woff2") format("woff2"),
    url("../fonts/woff/YekanBakh-Light.woff") format("woff"),
    url("../fonts/ttf/YekanBakh-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/eot/YekanBakh-Heavy.eot");
  src: local("YekanBakh-Heavy"),
    url("../fonts/eot/YekanBakh-Heavy.eot?#iefix") format("embedded-opentype"),
    url("../fonts/woff2/YekanBakh-Heavy.woff2") format("woff2"),
    url("../fonts/woff/YekanBakh-Heavy.woff") format("woff"),
    url("../fonts/ttf/YekanBakh-Heavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/eot/YekanBakh-Thin.eot");
  src: local("YekanBakh-Thin"),
    url("../fonts/eot/YekanBakh-Thin.eot?#iefix") format("embedded-opentype"),
    url("../fonts/woff2/YekanBakh-Thin.woff2") format("woff2"),
    url("../fonts/woff/YekanBakh-Thin.woff") format("woff"),
    url("../fonts/ttf/YekanBakh-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yekan Bakh";
  src: url("../fonts/eot/YekanBakh-Regular.eot");
  src: local("YekanBakh-Regular"),
    url("../fonts/eot/YekanBakh-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/woff2/YekanBakh-Regular.woff2") format("woff2"),
    url("../fonts/woff/YekanBakh-Regular.woff") format("woff"),
    url("../fonts/ttf/YekanBakh-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yekan Bakh Hairline";
  src: url("../fonts/eot/YekanBakh-Hairline.eot");
  src: local("YekanBakh-Hairline"),
    url("../fonts/eot/YekanBakh-Hairline.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/woff2/YekanBakh-Hairline.woff2") format("woff2"),
    url("../fonts/woff/YekanBakh-Hairline.woff") format("woff"),
    url("../fonts/ttf/YekanBakh-Hairline.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

body {
  padding: 0;
  font-family: "Yekan Bakh";
  overflow: scroll; /* Allows scroll without visible scrollbar */
  -ms-overflow-style: none; /* IE and Edge */
}

body::-webkit-scrollbar {
  display: none;
}

.carousel {
  grid-auto-columns: calc((100% / 3) - 12px);
}

.carousel-full {
  grid-auto-columns: calc((100% / 4) - 12px);
}

@media screen and (max-width: 1200px) {
  .carousel {
    grid-auto-columns: calc((100% / 3) - 9px);
  }
}
@media screen and (max-width: 900px) {
  .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
  .carousel-full {
    grid-auto-columns: calc((100% / 2) - 12px);
  }
}
@media screen and (max-width: 600px) {
  .carousel {
    grid-auto-columns: 100%;
  }
  .carousel-full {
    grid-auto-columns: 100%;
  }
}

.seo-content h1 {
  color: #051d23;
  font-size: 26px;
  font-weight: 900;
  margin: 5px 0 5px 0;
}
.seo-content h2 {
  color: #051d23;
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0 5px 0;
}
.seo-content h3 {
  font-size: 18px;
  margin: 8px 0 8px 0;
}

.seo-content a {
  color: #ec018a;
  font-weight: 600;
  text-decoration: underline;
}
.seo-content img {
  margin-bottom: 30px;
  margin-top: 30px;
  object-fit: cover;
  width: 100%;
}