/* Start varibles */

:root {
  --main-color-gradient: linear-gradient(
    to right,
    #4B5563,
    #1B1717 80%
  );
  
  /* --main-color-gradient: rgba(18, 86, 103); */
  --secondry-color-gradient: linear-gradient(
    to right,
    rgba(210, 35, 42, 1),
    rgba(22, 4, 68, 1) 80%
  );
  --yellow-color: #4B5563;
  --bluedark-color: #810000;
  --bluelight-color: #4B5563;

  --color-white: #F3F3F3;
  --Color-white: #F3F3F3;
  --color-red-light: #CE1212;
  --Color-red-light: #CE1212;
  --Color-black: #1B1717;
  --color-black: #1B1717;
  --color-red-black: #810000;
  --Color-red-black: #810000;
  --Color-gray: #4B5563;
  --color-gray: #4B5563;
}

/* End varibles */


/* Start fonts */

@import url('https://fonts.googleapis.com/css2?family=Lemon&family=Lemonada:wght@300..700&display=swap');



@font-face {
  font-family: "Hacen-Maghreb";
  src: url("../fonts/Hacen-Maghreb.woff2") format("woff2");
  /* font-weight: 300; */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DG-3asomy-Regular";
  src: url("../fonts/DG-3asomy-Regular.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LamaSans-Regular";
  src: url("../fonts/LamaSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LamaSans-Bold";
  src: url("../fonts/LamaSans-Bold.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LamaSans-BoldItalic";
  src: url("../fonts/LamaSans-BoldItalic.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LamaSans-SemiBold";
  src: url("../fonts/LamaSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LamaSans-ExtraBold";
  src: url("../fonts/LamaSans-ExtraBold.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}
/* ------------------- */
@font-face {
  font-family: "BeeatyWeather";
  src: url("../fonts/BeeatyWeather-Light.woff2") format("woff2"),
    url("../fonts/BeeatyWeather-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BeeatyWeather";
  src: url("../fonts/BeeatyWeather-Bold.woff2") format("woff2"),
    url("../fonts/BeeatyWeather-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BeeatyWeather";
  src: url("../fonts/BeeatyWeather-LightItalic.woff2") format("woff2"),
    url("../fonts/BeeatyWeather-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "BeeatyWeather";
  src: url("../fonts/BeeatyWeather-Medium.woff2") format("woff2"),
    url("../fonts/BeeatyWeather-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BeeatyWeather";
  src: url("../fonts/BeeatyWeather-BoldItalic.woff2") format("woff2"),
    url("../fonts/BeeatyWeather-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/* -------------------------- */

@font-face {
  font-family: "El Messiri";
  src: url("../fonts/ElMessiri-Regular.woff2") format("woff2"),
    url("../fonts/ElMessiri-Regular.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "El Messiri";
  src: url("../fonts/ElMessiri-Regular.woff2") format("woff2"),
    url("../fonts/ElMessiri-Regular.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "El Messiri";
  src: url("../fonts/ElMessiri-Bold.woff2") format("woff2"),
    url("../fonts/ElMessiri-Bold.woff2") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Expo Arabic Book";
  src: url("../fonts/ExpoArabic-Book.woff2") format("woff2"),
    url("../fonts/ExpoArabic-Book.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hacen Algeria Bd";
  src: url("../fonts/HacenAlgeriaBd.woff2") format("woff2"),
    url("../fonts/HacenAlgeriaBd.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DG Forsha Scribble";
  src: url("../fonts/DGForshaScribble.woff2") format("woff2"),
    url("../fonts/DGForshaScribble.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* End fonts */

/* Start Global rules */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.3s;
}

body {
  /* user-select: none; */
  cursor: default;
  font-family: "expo arabic book";
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* End Global rules */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px); /* ✅ التأثير هنا */
  background-color: rgba(255, 255, 255, 0.6); /* شفافية خفيفة */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* From Uiverse.io by mobinkakei */
.loader {
  width: 200px;
  height: 60px;
  position: relative;
  z-index: 1;
}

.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--bluelight-color);
  left: 15%;
  transform-origin: 50%;
  animation: circle7124 0.5s alternate infinite ease;
}

@keyframes circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }

  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }

  100% {
    top: 0%;
  }
}

.circle:nth-child(2) {
  left: 45%;
  animation-delay: 0.2s;
}

.circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: 0.3s;
}

.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--yellow-color);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow046 0.5s alternate infinite ease;
}

@keyframes shadow046 {
  0% {
    transform: scaleX(1.5);
  }

  40% {
    transform: scaleX(1);
    opacity: 0.7;
  }

  100% {
    transform: scaleX(0.2);
    opacity: 0.4;
  }
}

.shadow:nth-child(4) {
  left: 45%;
  animation-delay: 0.2s;
}

.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: 0.3s;
}





/* Start dark mode */

#toggle {
  width: 73px;
  height: 36px;
  background: var(--secondry-color-gradient);
  box-shadow: inset 0 1px 6px 4px rgba(12, 12, 12, 0.2);
  display: flex;
  align-items: center;
  border-radius: 30px;
  padding: 0.2rem 0.2rem;
  cursor: pointer;
  position: relative;
  z-index: 99;
}

.changer span {
  width: 30px;
  height: 30px;
  background: #f1f1f1;
  border-radius: inherit;
  box-shadow: inset 0 1px 6px 4px rgba(13, 13, 13, 0.3),
    0 1px 6px 1px rgba(11, 11, 76, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

span svg {
  font-size: 1.5rem;
  color: rgba(210, 35, 42, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s cubic-bezier(0.76, 0, 0.24, 1);
}

@media only screen and (max-width: 991px) {
  #toggle {
    width: 60px;
    height: 27px;
  }

  .changer span {
    width: 23px;
    height: 23px;
  }
}

#shape {
  clip-path: circle(0% at 50% 50%);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

/* dark */

#toggle.change {
  background: var(--main-color-gradient);
}

#shape.change {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: circle(100% at 50% 50%);
  z-index: 1;
}

span.change {
  background: #f1f1f1;
  transform: translateX(37px);
}

@media only screen and (max-width: 991px) {
  span.change {
    transform: translateX(32px);
  }
}

.moon {
  font-size: 1.7rem;
  color: rgba(210, 35, 42, 1);
  opacity: 1;
}

@media only screen and (max-width: 991px) {
  .moon {
    font-size: 1.2rem;
  }
}

.moon.change {
  font-size: 0;
  opacity: 0;
}

.sun {
  font-size: 0;
  opacity: 0;
}

.sun.change {
  font-size: 1.7rem;
  color: var(--bluelight-color);
  opacity: 1;
}

@media only screen and (max-width: 991px) {
  .sun.change {
    font-size: 1.2rem;
  }
}

/* End dark mode */


/* Start call us */

.call-us {
  position: fixed;
  bottom: 30px;
  right: 15px;
  z-index: 1000;
}

.Btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.3s;
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(0px);
  letter-spacing: 0.8px;
  border-radius: 50px;
  transition: all 0.3s;
  border: 2px solid rgba(156, 156, 156, 0.466);
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--Color-gray);
  z-index: -1;
  border-radius: 50px;
  pointer-events: none;
  transition: all 0.3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  background-color: rgba(156, 156, 156, 0.466);
  backdrop-filter: blur(4px);
}

/* End call us */