/* GENERAL CSS */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: "Tajawal", sans-serif; */
}
body {
  font-family: "Noto Kufi Arabic", sans-serif;
}

a {
  text-decoration: none !important;
}

section {
  padding: 70px 0;
}
.logos {
  display: flex;
  justify-content: space-between;
}
.dropdown-menu .dropdown-item:lang(ar){
  text-align: right;
}
main {
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        width: 100%;
        justify-content: space-between;
    }
}
.accordion {
  background-color: #b5a697;
  position: relative;
  overflow: hidden;

  &::before {
    content: url(../../images/artwork.png);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -191px;
    /* width: 100px; */
    /* height: ; */
    /* z-index: -1; */
  }

  .item {
    box-sizing: border-box;
    display: block;
    height: 100%;
    transition: all 0.5s ease;
    position: relative;
    border: 2px solid white;
  }

  .item-image {
    background-position: center;
    background-size: cover;
    display: block;
    position: relative;
    border-radius: 15px;
    height: 100%;
    background-color: #f0f4f7;
  }

  .item-date {
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    background: var(--accent);
    padding: 3px 5px;
    height: 30px;
    line-height: 25px;
    min-width: 64px;
    box-sizing: border-box;
    width: fit-content;
    margin-bottom: 15px;
    transition: opacity 0.3s ease, background-color 0.3s ease;
  }

  .item-date:empty {
    display: none !important;
  }

  /* .item:hover .item-date {
    background-color: var(--primary);
  } */

  .item-title {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 78px;
  }
}

.accordion .container {
  display: flex;
  gap: 15px;
  align-items: end;
}

.accordion .item {
  width: 13.5%;
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 20px 30px 20px;
  color: #fff;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.5s ease;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(20px);
}

:dir(ltr) .accordion .item {
  transform: translateX(-20px);
}

.accordion .item:last-child {
  margin-right: auto;
}

:dir(ltr) .accordion .item:last-child {
  margin-right: unset;
  margin-left: auto;
}

.accordion .item.animate {
  opacity: 1;
  transform: translateY(0);
}

.accordion .item-title {
  opacity: 0;
  font-size: 28px;
  line-height: 1.2;
  transform: translateY(50px);
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-height: 115px;
}

.accordion .item.active .item-title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s 0.3s ease;
}

.accordion .item-subtitle {
  font-size: 14px;
  color: #fff;
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;

  padding: 5px 8px;
  border-radius: 4px;
}

.accordion .item.active .item-subtitle {
  display: none;
}

.accordion .item.active {
  width: 48%;
}

.accordion .item.active .item-date {
  margin-right: 0;
}

.accordion .item-date {
  background-color: #5a2f32;
}

.accordion .item-image::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.3) 80%,
      transparent 100%);
  border-radius: inherit;
}

.accordion .item-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: inherit;
  background-position: left center;
  transition: all 0.5s ease;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.accordion .item.active .item-image {
  background-position: center;
}
.breadcrumb-nav a{
  color:#a4864a;
}
@media (max-width: 991px) {
  .accordion .item {
    width: 47% !important;
    min-width: 300px;
    height: 260px;
    flex-grow: 1;
  }

  .accordion .item-subtitle {
    display: none !important;
  }

  .accordion .item-title {
    opacity: 1;
    transform: none;
    font-size: 16px !important;
    line-height: 26px;
    min-height: unset;
  }

  .accordion .container {
    flex-wrap: wrap;
  }

  .accordion .item-date {
    left: 0 !important;
  }
}

/* HOTBAR SECTION */
.hot-news {
  background: #312e29;
  padding: 0;

  .hot-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    direction: rtl;
    flex-wrap: wrap;
  }

  .hot-tip {
    background: #7d4046;
    color: #fff;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 14px;
    position: relative;

    /* make arrow shape like using psudo elements border */
    &::before {
      content: "";
      position: absolute;
      border-right: 15px solid transparent;
      border-left: 15px solid transparent;
      border-bottom: 15px solid #7d4046;
      left: -18px;
      top: 50%;
      transform: translateY(-50%) rotate(-90deg);
      z-index: 1;
    }
  }

  .news-container {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
  }

  .news-list {
    display: inline-block;
    animation: scrollNews linear infinite;
  }

  .news-item {
    font-size: 14px;
    color: white;
    line-height: 1.4;
    display: inline-block;
    margin: 0 10px;
  }

  .separator {
    width: 20px;
    display: inline-block;
  }
}

@keyframes scrollNews {
  0% {
    transform: translateX(-70%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* News Section */
.news {
  .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    margin-inline: auto;
  }

  @media (min-width: 768px) {
    .row {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 992px) {
    .row {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .news-card {
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    padding: 30px 20px;

    * {
      z-index: 1;
    }

    .content {
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;

      h4 {
        margin: 0;
      }

      p {
        margin-bottom: 3rem;
      }
    }

    .news-img {
      background-color: white;
      border-radius: 50%;
      width: 130px;
      height: 130px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .read-more {
      margin-top: auto;

      a {
        text-decoration: none;
        color: #312e29;
        background-color: white;
        padding: 3px 30px;
        border-radius: 99px;
        font-weight: bold;
        font-size: 1.1rem;
        transition: all 0.3s ease;

        &:hover {
          color: white;
          background-color: #312e29;
        }
      }
    }

    &[data-variant="news-card-400"] {
      background-color: #312e29;
    }

    &[data-variant="news-card-200"] {
      background-color: #6b3b3f;
    }

    &[data-variant="news-card-300"] {
      background-color: #a89a8e;
    }

    &[data-variant="news-card-100"] {
      background-color: #cfc6bd;
    }

    position: relative;
    overflow: hidden;

    &::before {
      content: url(../../images/artwork.png);
      position: absolute;
      bottom: -230px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0.3;
    }

    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-15px) !important;
      transition-delay: 0s !important;
    }
  }
}

/* Core Cases Section */
.core-cases {
  position: relative;
  overflow: hidden;

  &::before {
    content: url(../../images/artwork-dark.png);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #312e29;
    margin-bottom: 2rem;
  }

  .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
  }

  .case-card {
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    padding: 30px 20px;
    z-index: 1;

    .case-img {
      /* width: 130px;
      height: 130px; */
      border-radius: 20px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .content {
      p {
        color: #312e29;
        margin: 0;
      }
    }

    .read-more a {
      text-decoration: none;
      background-color: #6b3b3f;
      color: white;
      padding: 7px 30px;
      border-radius: 10px;
      font-weight: bold;
      font-size: 1.1rem;
      transition: all 0.3s ease;

      &:hover {
        background-color: white;
        color: #6b3b3f;
        border: 1px solid #6b3b3f;
      }
    }

    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-15px) !important;
      transition-delay: 0s !important;
    }
  }
}

/* Stats Section */
section.stats {
  background-color: #a89a8e;
  padding: 30px;

  .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  @media (min-width: 768px) {
    .row {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 992px) {
    .row {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .stat-card {
    background-color: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 55px 20px;
    border-bottom: 5px solid #6b3b3f;

    .number {
      font-size: 3rem;
      font-weight: bold;
      color: #312e29;
      margin: 0;

      span {
        color: #6b3b3f;
      }
    }

    .text {
      font-size: 1.1rem;
      color: #312e29;
      margin: 0;
    }

    transition: all 0.2s ease;

    &:hover {
      transition-delay: 0s !important;
      transform: translateY(-15px);
      background-color: #6b3b3f;

      span,
      .number,
      .text {
        color: white;
      }
    }
  }
}

/* Calendar Section */
.calendar-section {
  padding: 4rem 0;
  .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #312e29;
    margin-bottom: 2rem;
  }
  .calendar-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile: Stacked */
    gap: 2rem;

    @media (min-width: 992px) {
      grid-template-columns: 1fr 2fr;
      /* Desktop: Slider is wider than Promo */
    }
  }

  .slider-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: 400px;
  }

  /* New Row Layout */
  .calendar-row {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    position: relative;
    padding-bottom: 2rem;
  }

  /* .calendar-row:last-child {
    padding-bottom: 0;
  } */

  /* Dot Styling (All filled) */
  .dot {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #5a2f32;
    border: 4px solid white;
    box-shadow: 0 0 0 2px #5a2f32;
    flex-shrink: 0;
    z-index: 2;
    top: 50%;
    transform: translateY(100%);
  }

  .line {
    width: 1px;
    background: #5a2f32;
    opacity: 0.3;
    position: absolute;
    top: 80px;
    /* Start below the dot */
    bottom: -5px;
    /* Extend to next row's dot top */
    right: 21.5px;
    /* Centered in the 45px dot (45/2 - 2/2) */
    z-index: 1;
    height: 10rem;

    @media (max-width: 767px) {
      height: 17rem;
    }
  }

  .calendar-row:nth-child(1) {
    .calendar-card {
      background-color: #d0c2c3;
    }
  }

  .calendar-row:nth-child(2) {
    .calendar-card {
      background-color: rgb(207, 207, 207);
    }
  }

  .calendar-row:nth-child(3) {
    padding-bottom: 0;
    .calendar-card {
      background-color: rgb(230, 224, 217);
    }
  }

  .calendar-row:last-child .line {
    display: none;
  }

  .calendar-card {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    min-height: auto;
    gap:1rem;
    .card-body {
      flex: 1;
      text-align: start;
      a{
        color:#312e29;
      }
      h4 {
        margin: 0 0 0.5rem 0;
      }
    }

    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      font-size: 0.9rem;
      color: #666;
    }

    .card-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;

      .btn-register {
        border: none;
        background: none;
        color: var(--primary);
        font-weight: bold;
        cursor: pointer;

        i {
          display: block;
          margin-top: 5px;
          width: fit-content;
          margin-inline: auto;
          transform: rotate(45deg);
        }
      }
    }

    @media (max-width: 767px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 1rem;

      .card-action {
        align-self: end;
      }

    }
  }

  .registration-promo {
    text-align: center;
    background: #e7e1da;
    padding: 2rem;
    border-radius: 15px;

    img {
      width: 100%;
      border-radius: 15px;
      margin-bottom: 1rem;
    }

    .btn-main-register {
      display: inline-block;
      border-radius: 7px;
      padding: 5px 20px;
      background: #693a3c;
      color: white;
      border: none;
      font-weight: bold;
      text-decoration: none;
      transition: all 0.3s ease;

      &:hover {
        background: #5a2f32;
        transform: scale(1.05);
      }
    }
  }

  /* Mobile adjustments */
  @media (max-width: 991px) {
    .slider-wrapper {
      flex-direction: column;
      height: auto;
    }

    .dots-indicator {
      flex-direction: row;
      justify-content: center;
      padding: 1rem 0;

      .line {
        width: auto;
        height: 2px;
        flex-grow: 1;
        min-height: unset;
        min-width: 30px;
      }
    }

    .vertical-slider {
      max-height: none;
    }
  }
}
.nav .navbar-collapse {
			flex-grow: 0;
		}

		.navbar>.container,
		.navbar>.container-fluid,
		.navbar>.container-lg,
		.navbar>.container-md,
		.navbar>.container-sm,
		.navbar>.container-xl,
		.navbar>.container-xxl {
			justify-content: space-between;
		}

		.navbar-expand-lg .navbar-collapse {
			flex-grow: 0;
		}

		.nav-item .nav-link {
			color: #2B2D2A;
			font-weight: 500;
		}

		.style2 .break-bg {
			background: url("../../images/bg-line.svg");
      background-size: contain;
		}

		.break-bg {
			height: 30px;
			background: url("../../assets/br_bg.png");
			position: relative;
			top: 3px;
			z-index: 1;
		}

		.main-vector {
			position: absolute;
			left: 0;
			z-index: 2;
		}

		.main-text {
			margin-left: auto;
			text-align: right;
			direction: rtl;
		}

		.vector {
			display: inline-block;
			position: relative;
		}

		.vector img:last-child {
			/*
			position: absolute;
			right: 1rem;
			top: 1rem;
			*/
		}

		.cards {
			max-width: 800px;
			margin: auto;
		}

		.style2 .card {
			background: #fff8e4;
		}

		.card {
			background: #fff;
			text-align: center;
			direction: rtl;
			padding: 1rem;
			box-shadow: 2px 4px 5px 2px #00000040;
			border-top: 0px !important;
			border-radius: 20px;
			border-bottom-width: 3px !important;
			display: block;
			transition: all 1s;
		}

		.icon-circle {
			border-radius: 152px;
			padding: 7px;
			width: 70%;
			margin: 2rem auto;
			font-size: 3rem;
			color: #e0c9c7;
		}

		.btn-custom {
			border-radius: 20px;
			color: #fff;
			padding: 5px 20px;
		}

		.style2 .blue-border {
			border: 1px solid #29B3B6;
			transform: rotate(-2deg);

			.icon-circle {
				border-top: 1px solid #29B3B6;
			}

			.btn-custom {
				background: #29B3B6;
			}
		}

		.style2 .yellow-border {
			border: 1px solid #FBC117;
			transform: rotate(2deg);

			.icon-circle {
				border-top: 1px solid #FBC117;
			}

			.btn-custom {
				background: #FBC117;
			}
		}

		.style2 .orange-border {
			border: 1px solid #FA5D00;

			.icon-circle {
				border-top: 1px solid #FA5D00;
			}

			.btn-custom {
				background: #FA5D00;
			}
		}

		.blue-border {
			border: 1px solid #6C3B3F;
			transform: rotate(-2deg);

			.icon-circle {
				border-top: 1px solid #6C3B3F;
			}

			.btn-custom {
				background: #6C3B3F;
			}
		}

		.yellow-border {
			border: 1px solid #E4C5C2;
			transform: rotate(2deg);

			.icon-circle {
				border-top: 1px solid #E4C5C2;
			}

			.btn-custom {
				background: #E4C5C2;
			}
		}

		.orange-border {
			border: 1px solid #BD8D89;

			.icon-circle {
				border-top: 1px solid #BD8D89;
			}

			.btn-custom {
				background: #BD8D89;
			}
		}

		.blue-border:hover {
			transform: rotate(1deg);
		}

		.yellow-border:hover {
			transform: rotate(-1deg);
		}

		.orange-border:hover {
			transform: rotate(-2deg);
		}

		.social-icons {
			display: flex;
			gap: 12px;
			align-items: center;
		}

		.social-icons .icon {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #000;
			/* black circle */
			color: #fff;
			/* white icons */
			width: 38px;
			height: 38px;
			border-radius: 50%;
			text-decoration: none;
			font-size: 18px;
			transition: background-color 0.3s ease;
		}

		.social-icons .icon:hover {
			background-color: #444;
			/* subtle hover effect */
		}

		.g-6 {
			--bs-gutter-y: 4.5rem;
			--bs-gutter-x: 4.5rem;
		}

		.olive-tree img {
			max-width: 600px;
			mix-blend-mode: multiply;
			background: #6c3b3f;
			/* width: 100%; */
			aspect-ratio: 2 / 1;
			position: relative;
			left: -9rem;
		}

		.olive-tree {
			position: absolute;
			left: 0;
			bottom: -2rem;
			/* background: #6c3b3f; */
			mix-blend-mode: multiply;
			/* aspect-ratio: 1 / 1; */
			width: 315px;
			overflow: hidden;
		}

		.palestine-map img {
			max-width: 600px;
			background: #6c3b3f;
			/* width: 100%; */
			aspect-ratio: 2 / 1;
			position: relative;
			left: -6rem;
		}

		.palestine-map {
			position: absolute;
			right: 0;
			bottom: -4rem;
			/* background: #6c3b3f; */
			mix-blend-mode: plus-lighter;
			/* aspect-ratio: 1 / 1; */
			width: 315px;
			overflow: hidden;
		}

		footer a {
			color: #fff;
			text-decoration: none;
		}

		footer ul li i,
		footer ul li svg {
			color: #E4C5C2;
		}

		footer ul li {
			margin-bottom: 1rem;
		}

		footer ul {
			padding: 0;
			list-style: none;
		}

		footer {
			padding: 3rem 0;
			background: #2E2E2E;
			color: #fff;
			direction: rtl;
			text-align: right;
		}

		.bg-elemnt {
			position: absolute;
			opacity: 0.3;
			animation-iteration-count: infinite;
		}

		.bg-elem1 {
			animation: rotate360 12s linear infinite;
		}

		/* 2. Translate left and right */
		.bg-elem2 {
			animation: moveX 6s ease-in-out infinite;
		}

		/* 3. Scaling */
		.bg-elem3 {
			animation: scaleUpDown 5s ease-in-out infinite;
		}

		/* 4. Translate up and down */
		.bg-elem4 {
			animation: moveY 7s ease-in-out infinite;
		}

		/* 5. Rotate to 30deg and back */
		.bg-elem5 {
			animation: rotate30 4s ease-in-out infinite;
		}

		.bg-elem6 {
			animation: moveY 6s ease-in-out infinite;
		}

		.section {
			display: none;
		}

		.section.active {
			display: block;
		}

		.section-1 {
			position: relative;
			z-index: 2;
		}

		.craft {
			position: absolute;
			top: -6rem;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 1;
			max-width: 100%;
		}

		/* Keyframes */
		@keyframes rotate360 {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		@keyframes moveX {
			0% {
				transform: translateX(0);
			}

			50% {
				transform: translateX(30px);
			}

			100% {
				transform: translateX(0);
			}
		}

		@keyframes scaleUpDown {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}

			100% {
				transform: scale(1);
			}
		}

		@keyframes moveY {
			0% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-25px);
			}

			100% {
				transform: translateY(0);
			}
		}

		@keyframes rotate30 {
			0% {
				transform: rotate(0deg);
			}

			50% {
				transform: rotate(30deg);
			}

			100% {
				transform: rotate(0deg);
			}
		}

		@media (min-width: 992px) {
			.navbar-expand-lg .navbar-nav .nav-link {
				padding-left: 1rem;
				/* padding-right: 1rem; */
			}
		}

		@media (max-width: 991px) {
			/* .navbtn-register */

			.palestine-map {
				display: none;
			}

			.main-vector {
				position: relative;
				left: -12px;
			}

			.logos {
				flex-direction: column;
				align-items: center;
				gap: 1rem;
			}

			.g-6 {
				--bs-gutter-y: 2rem;
				--bs-gutter-x: 2rem;
			}

			.craft {
				display: none;
			}
		}

		@media (max-width: 576px) {

			.container,
			.container-sm {
				max-width: 100%;
			}
		}