@import "../moon/style.css";
@import "components/header.css";
/*@import "components/footer.css";*/
@import "components/mobile-nav.css";


:root {
  --app-inner-size: 1280px;
  --primary-color: hsla(122, 39%, 29%, 1);
  --secondary-color: hsla(215, 67%, 20%, 1);
  --water-color: #69d1d8;

  --bg-color: #FAFAFA;;

  --extra-light-gray: hsl(0, 0%, 93%);
  --gray-light: hsl(0, 0%, 69%);
  --gray-medium: hsl(0, 0%, 58%);
  --gray-dark: hsl(0, 0%, 43%);
  --gray-dark-extra: hsl(0, 0%, 31%);
  --gray-black: hsl(0, 0%, 17%);

  --black: #525252;
  --gradient-color: linear-gradient(90deg, #54C159 38.62%, #2E6830 100%);



  /*font styles*/
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 600;


  --headerHeight: 160px;

  --grid-columns: 3;
  --grid-columns-md: 2;
  --grid-columns-sm: 1;
  --padding-card: 20px;
  --spacer-1: 4px;
  --spacer-2: 8px;
  --spacer-3: 16px;
  --spacer-4: 24px;
  --spacer-5: 32px;
  --spacer-6: 64px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 16px;
  --radius-4: 24px;


  --shadow-card: 0 4px 25px rgba(0, 0, 0, 0.10);

  --font-size-title-lg: clamp(2rem, 5vw, 2.4rem);
  --font-size-title-md: clamp(1.6rem, 4vw, 2rem);
  --font-size-title-sm: clamp(1.3rem, 4vw, 1.8rem);

  --font-size-body-lg: clamp(1.3rem, 3.5vw, 2rem);
  --font-size-body-md: clamp(1.1rem, 3vw, 1.6rem);
  --font-size-body-sm: clamp(1rem, 2.5vw, 1.4rem);

  --font-main: "Almarai", sans-serif;
  --padding-section: 40px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-color);
  line-height: 1.5;
  font-weight: var(--font-medium);
}



@font-face {
  font-family: "Almarai";
  src: url("../font/Almarai-Light.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Almarai";
  src: url("../font/Almarai-Regular.ttf") format("truetype");
  font-weight: 500;
}


@font-face {
  font-family: "Almarai";
  src: url("../font/Almarai-Bold.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Almarai";
  src: url("../font/Almarai-ExtraBold.ttf") format("truetype");
  font-weight: 700;
}


.inner-page .section:not(:first-child) {
  padding-block: var(--padding-section);
}

.section.ticker-section ~ .section {
  padding-top: var(--padding-section);
}

.section:last-child {
  padding-bottom: var(--padding-section);
}


main {
  background: hsla(0, 0%, 98%, 1);
  min-height: 80vh;
}

.app-wrapper {
  width: var(--app-inner-size);
  max-width: 100%;
  margin: 0 auto;
}

.bg-pattern>.section {
  padding-block: var(--padding-section);
  position: relative;
  z-index: 1;
}

.section-description {
  font-size: var(--font-size-body-md);
  color: var(--gray-dark);
  text-align: start;
  line-height: 1.4;
}

.section-title {
  text-align: start;
  color: var(--gray-black);
  font-size: clamp(1.6rem,3.5vw, 2rem);
  line-height: 1.1;
  margin-bottom: 10px;
  font-weight: 700;
}

.card-title {
  font-size: clamp(1.3rem, 3.5vw, 1.6rem);
  font-weight: 600;
}

.card-desc {
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
}

.card-desc {
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  margin-block: 8px;
  color: var(--gray-dark);
  line-height: 1.7;
}


.primary-button {
  text-decoration: unset;
  color: white;
  background: var(--primary-color);
  padding: 10px;
  min-width: 120px;
  display: inline-block;
  text-align: center;
  font-weight: 500;
  transition: background-color 0.2s;
}

.primary-button:hover {
  background-color: hsl(from var(--primary-color) h s 35%);
}






.a11y-action {
  background: white;
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 11;
  border-radius: 50%;
  width: 60px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px #0000002b;
}

.a11y-action img {
  max-width: 35px;
}


.page-header {
  background: var(--primary-color);
  color: white;
  padding: 20px 0;
}

.page-header .page-header-title {
  font-weight: 500;
  margin-bottom: 10px;
  font-size: var(--font-size-title-md);
}

.page-header .page-header-list {
  --gap: 8px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  font-size: var(--font-size-body-sm);
}

.page-header .list-item:not(:last-child):after {
  content: "\e91f";
  font-family: 'icomoon';
  margin-inline-start: var(--gap);
  font-size: 10px;
}

.page-header .list-item:last-child a {
  pointer-events: none;
}



.inner-page .section.section-pagination {padding-top: 20px}
.section-pagination .pagination-list {display: flex;align-items: center;gap: 6px;list-style: none;justify-content: center;}
.section-pagination .pagination-list__item > a {text-decoration: unset;width: 36px;aspect-ratio: 1;display: flex;align-items: center;justify-content: center;font-size: 15px;font-family: sans-serif;color: var(--primary-color);background: white;transition: .4s;}
.section-pagination .pagination-list__item > a:hover {background: hsl(from var(--primary-color) h s 90%);}


/*.section-preview:not(.section-message) {padding-top: 0 !important;}*/
.section-preview .image-wrapper {height: 300px;overflow: hidden;margin-bottom: 20px;}
.section-preview .image-wrapper img {margin: 0 auto;}
.section-preview .gallery-wrapper {margin-top: 20px}
.rich-text-container > * + * {margin-top: 8px;}
.rich-text-container {line-height: 1.8;color: var(--gray-dark);}
.rich-text-container :is(ol, ul) {padding: revert}


body:has(.cards-wrapper, .groups-text, .files-wrapper, .service-details, .services-section) .section-share {display: none}
.section-share .share-wrapper {display: flex;align-items: center;gap: 10px;}
.section-share .social-list {display: flex;align-items: center;gap: 6px;}
.section-share .social-item > a,
.section-share .social-item > button {display: flex;align-items: center;justify-content: center;width: 30px;aspect-ratio: 1;background: white;border: 1px solid hsl(from var(--primary-color) h s 89%);color: var(--primary-color);transition: .4s;}
.section-share .social-item > a:hover,
.section-share .social-item > button:hover {border-color: hsl(from var(--primary-color) h s 59%)}
.section-share .social-item > button {cursor: pointer;padding: 0;font: inherit;}


.gallery-wrapper {display: grid;grid-template-columns: repeat(4 ,1fr);gap: 20px;}
.gallery-item {overflow: hidden;height: 200px;border: 1px solid var(--extra-light-gray);}
.gallery-item img {margin-inline: auto}

.custom-grid .gallery-item:nth-child(1) {grid-column: span 2;grid-row: span 1;}
.custom-grid .gallery-item:last-child {grid-row: span 1;grid-column: span 2;}
.custom-grid .gallery-item {aspect-ratio: unset;height: 230px;}


.section-citizen .image-wrapper {min-height: 600px}
.section-citizen .image-wrapper img {margin: 0 auto}


.lg-item {
  inset: 0;
}
.groups-text > * + * {margin-top: 30px;}
.group-item .gallery-wrapper {margin-top: 16px;}

.contents-container > * + * {margin-top: 30px;}
.section-preview.has-space {padding-top: var(--padding-section) !important;}


.news-section-inner-page .cards-wrapper {
  margin: 0;
}


@media (resolution: 1dppx) {
  html {
    font-size: 68%;
  }
}


@media (max-width: 767px) {
  .section {padding-inline: 20px;}

  .gallery-wrapper {grid-template-columns: repeat(1, 1fr);}
  .gallery-item {aspect-ratio: 2 / 1;}
  .section {
    --padding-section: 30px;
  }


}