@font-face {
    font-family: 'effraArabic';
    src: url('Effra-Regular.ttf');
}

* {
    font-family: 'effraArabic' !important;
}

/* Ensure Font Awesome icons display properly */
.fas, .fab, .far, .fal, .fad {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands" !important;
    font-weight: 900 !important;
}

.fab {
    font-weight: 400 !important;
}

.far {
    font-weight: 400 !important;
}

.fal {
    font-weight: 300 !important;
}

.fad {
    font-weight: 900 !important;
}

html {
  scroll-behavior: smooth;
}

#scroll-top {
  display: none;
}

[dir="rtl"] .container {
  direction: rtl;
}

[dir="rtl"] .filter-button {
  margin-left: 0.5rem;
  margin-right: 0;
}

@media (max-width: 767px) {
  .navicon {
    width: 1.125em !important;
    height: .125em !important;
    background: #212121 !important; /* Dark color for visibility */
  }

  .navicon::before,
  .navicon::after {
    display: block !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    transition: all .2s ease-out !important;
    content: '' !important;
    background: #212121 !important; /* Dark color for visibility */
  }

  .navicon::before {
    top: 5px !important;
  }

  .navicon::after {
    top: -5px !important;
  }

  .menu-btn:not(:checked) ~ .menu {
    display: none !important;
  }

  .menu-btn:checked ~ .menu {
    display: block !important;
  }

  .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent !important;
  }

  .menu-btn:checked ~ .menu-icon .navicon::before {
    transform: rotate(-45deg) !important;
  }

  .menu-btn:checked ~ .menu-icon .navicon::after {
    transform: rotate(45deg) !important;
  }

  .menu-btn:checked ~ .menu-icon .navicon::before,
  .menu-btn:checked ~ .menu-icon .navicon::after {
    top: 0 !important;
  }
}

.link-underline {
  border-bottom-width: 0;
  background-image: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  background-size: 0 3px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s ease-in-out;
}

.link-underline-black {
  background-image: linear-gradient(transparent, transparent), linear-gradient(#212121, #212121);
}

.link-underline:hover {
  background-size: 100% 3px;
  background-position: 0 100%;
  font-weight: bold;
}

.link-underline-black-hover:hover {
  background-size: 100% 3px;
  background-position: 0 100%;
}

/* Portfolio card with fixed bottom icons */
.portfolio-card {
  min-height: 320px;
}

.portfolio-card .card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.portfolio-card .card-body {
  flex: 1;
}

.portfolio-card .card-icons {
  margin-top: auto;
  padding-top: 1rem;
}