/* @import "/fonts/SansOneBold.ttf";
@import "/fonts/SansOneBook.ttf";
@import "/fonts/arial-bold.ttf"; */

/* اختياري: CSS متغيرات خاصة بيك */
:root {
  --color-primary: #ecb416;
  --color-secondary: #1e3a3a;
  --color-dark: #0a0a0a;
  --color-light: #f6f6f4;
}

@font-face {
  font-family: "SansOneBold";
  src: url("/fonts/SansOneBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "SansOneBook";
  src: url("/fonts/SansOneBook.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "arial-bold";
  src: url("/fonts/arial-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: "SansOneBold", "SansOneBook", "arial-bold", sans-serif;
  background-image: url("/images/bg.webp");
  background-size: cover;
  background-position: center;
}

.header-icon:not(:last-of-type)::after {
  content: "|";
  margin: 1px 5px;
  font-weight: 100;
}
@media (max-width: 640px) {
  .header-icon:not(:last-of-type)::after {
    margin: 1px 3px;
  }
}

.triangle {
  background-color: #ff0000;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  box-sizing: border-box;
  border: 1px solid black;
}

.triangle .text {
  color: #ffeb3b;
  font-family: "Cairo", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
}

.triangle .question-mark {
  color: #ffeb3b;
  padding-top: 4px;
  font-family: "Cairo", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 0.8;
}

.shield-shape {
  border-radius: 0 0 50% 50%;
}

@media (max-width: 480px) {
  .share-text {
    max-width: 14rem;
    padding: 2px !important;
  }
}