@font-face {
  font-family: "Avenir Arabic Medium";
  src: url("../../fonts/alfont_com_AlFont_com_AvenirArabic-Medium.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Grandia";
  src: url("../../fonts/grandia.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Fredoka";
  src: url("../../fonts/Fredoka-VariableFont_wdth,wght.ttf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
#home-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 100px;
  box-sizing: border-box;
}
@media (min-width: 1440px) {
  #home-box {
    padding: 0 100px;
  }
}
@media (max-width: 1439px) {
  #home-box {
    padding: 0 75px;
  }
}
@media (max-width: 768px) {
  #home-box {
    padding: 0 20px;
  }
}

#container-home {
  height: 100%;
  width: 100%;
  max-width: 1440px;
  margin-bottom: 113px;
}
@media (max-width: 768px) {
  #container-home {
    margin: 0;
  }
}
#home-header {
  width: 100%;
}
#home {
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  flex-wrap: wrap;
  justify-content: center;
}
#main-home {
  width: 498px;
  height: 443px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (max-width: 768px) {
  #main-home {
    width: 350px;
    height: 270px;
  }
}

#shape-home1 {
  width: 63px;
  height: 68px;
  position: absolute;
  top: -63px;
  left: 344px;
}

#shape-home2 {
  width: 39px;
  height: 49px;
  position: absolute;
  top: 479px;
  left: 368px;
}
@media (max-width: 768px) {
  #shape-home1,
  #shape-home2 {
    display: none;
  }
}
#text-home {
  margin: 0;
  font-family: "Fredoka";
  color: rgba(15, 23, 42, 1);
  width: 510px;
  height: auto;
  font-size: 72px;
}
#i {
  text-transform: lowercase;
  font-variant: small-caps;
  font-family: "Fredoka";
  color: rgba(15, 23, 42, 1);
  font-size: 72px;
  font-weight: 700px;
  position: relative;
}

@media (max-width: 768px) {
  #text-home {
    font-size: 38px;
    width: 100%;
    height: 86px;
    line-height: 150%;
  }
  #i {
    font-size: 38px;
    width: 17px;
    height: 17px;
  }
}

#shape-home3 {
  width: 40px;
  height: 40px;
  position: absolute;
  top: -10px;
  left: -23px;
}
@media (max-width: 768px) {
  #shape-home3 {
    width: 29px;
    height: 29px;
    top: -10px;
    left: -15px;
  }
}

#peacok-home {
  width: 509px;
  height: 101px;
  position: relative;
}
#peacok-home h1 {
  font-family: "Fredoka";
  font-size: 90px;
  margin: 0;
  color: rgba(30, 164, 139, 1);
  width: 100%;
  height: 100%;
  margin-top: 5px;
  position: relative;
  z-index: 2;
}
#peacok-vector-home {
  width: 330px;
  height: 27px;
  position: absolute;
  top: 90px;
  left: 0;
  border-style: hidden;
  border-width: 10px;
}
#peacok-vector-home img {
  width: 100%;
}
@media (max-width: 768px) {
  #peacok-home h1 {
    font-size: 70px;
    margin-top: 23px;
  }
  #peacok-vector-home {
    width: 294px;
    height: 19px;
    left: -15px;
  }
}

#request-btn-home {
  width: 214px;
  height: 70px;
  margin-top: 25px;
  border-style: none;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    rgba(30, 164, 139, 1) 50%,
    rgba(254, 216, 95, 1) 50%
  );
  background-size: 200% 100%;
  background-position: right;
  font-family: "Avenir Arabic Medium";
  font-weight: 800;
  font-size: 20px;
  color: rgba(52, 52, 52, 1);
  cursor: pointer;
  transition: background-position 0.5s ease, color 0.5s ease;
}
#request-btn-home:hover {
  background-position: left;
  color: rgba(255, 255, 255, 1);
}
@media (max-width: 768px) {
  #request-btn-home {
    width: 177px;
    height: 58px;
    font-size: 16px;
  }
}

#images {
  width: 627px;
  height: 634px;
  margin-top: 37px;
  margin-left: 40px;
  position: relative;
  overflow: hidden;
}

#images .purble {
  position: absolute;
  left: 0px;
  width: 208px;
  height: 630px;
  opacity: 80%;
  border-top-left-radius: 93px;
  border-bottom-left-radius: 93px;
  transition: right 2s ease-in-out, left 2s ease-in-out,
    border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out;
}
@media (max-width: 768px) {
  #images .purble,
  #images .white,
  #images .black {
    display: none;
  }
}

#images .white {
  position: absolute;
  right: 0px;
  top: 214px;
  width: 415px;
  height: 421px;
  object-fit: cover;
  opacity: 80%;
  border-top-left-radius: 178px;
  border-bottom-right-radius: 182px;
  border-bottom-left-radius: 181px;
  transition: top 2s ease-in-out, right 2s ease-in-out, bottom 2s ease-in-out,
    left 2s ease-in-out, border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out, height 2s ease-in-out;
}

#images .black {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 415px;
  height: 209px;
  object-fit: cover;
  opacity: 80%;
  border-top-left-radius: 90px;
  border-top-right-radius: 92px;
  border-bottom-right-radius: 92px;
  transition: top 2s ease-in-out, right 2s ease-in-out, bottom 2s ease-in-out,
    left 2s ease-in-out, border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out, height 2s ease-in-out;
}

#images .purble-mobileEdition,
#images .black-mobileEdition {
  display: none;
}
@media (max-width: 768px) {
  #images {
    height: 380px;
    margin: 0;
  }
  #images .purble-mobileEdition {
    opacity: 80%;
    display: block;
    width: 287px;
    height: 309px;
    position: absolute;
    top: 7px;
    right: 20px;
    transition: top 2s ease-in-out, right 2s ease-in-out, height 2s ease-in-out,
      width 2s ease-in-out;
  }
  #images .black-mobileEdition {
    opacity: 80%;
    display: block;
    width: 139px;
    height: 150px;
    position: absolute;
    top: 214px;
    right: 98px;
    transition: top 2s ease-in-out, right 2s ease-in-out, height 2s ease-in-out,
      width 2s ease-in-out;
  }
}

/* 
@font-face {
  font-family: "Avenir Arabic Medium";
  src: url("../../fonts/alfont_com_AlFont_com_AvenirArabic-Medium.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Grandia";
  src: url("../../fonts/grandia.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Fredoka";
  src: url("../../fonts/Fredoka-VariableFont_wdth,wght.ttf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

#shape-home1 {
  width: 39.7px;
  height: 42.8px;
  position: absolute;
  top: 23.3px;
  left: 216.7px;
}

#shape-home2 {
  width: 24.6px;
  height: 30.9px;
  position: absolute;
  top: 364.7px;
  left: 231.8px;
}

#home {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 100vh;
}

#main-home {
  width: 313.7px;
  height: 279px;
  margin-left: 64.2px;
  display: flex;
  position: relative;
}

#text-home {
  margin: 0;
  position: absolute;
  top: 63px;
  font-family: "Fredoka";
  color: rgba(15, 23, 42, 1);
  width: 321px;
  height: auto;
  font-size: 45.3px;
}

#shape-home3 {
  width: 14.5px;
  height: 18.2px;
  position: absolute;
  top: 119.7px;
  left: 107px;
}

#i {
  text-transform: lowercase;
  font-variant: small-caps;
  font-family: "Fredoka";
  color: rgba(15, 23, 42, 1);
  font-size: 45.3px;
  font-weight: 700px;
}

#peacok-home {
  font-family: "Fredoka";
  font-size: 56.7px;
  margin: 0;
  color: rgba(30, 164, 139, 1);
  width: 320.6px;
  height: 63.5px;
  position: absolute;
  top: 174.5px;
  z-index: 2;
}

#peacok-vector-home {
  width: 186.5px;
  height: 13.2px;
  position: absolute;
  top: 230px;
  border-style: hidden;
  border-width: 6.3px;
}

#request-btn-home {
  width: 134.8px;
  height: 44.1px;
  position: absolute;
  top: 258.3px;
  border-style: none;
  border-radius: 8px;
  background-color: rgba(254, 216, 95, 1);
  font-family: "Avenir Arabic Medium";
  font-weight: 800;
  font-size: 12.6px;
  color: rgba(52, 52, 52, 1);
}

#images {
  width: 395px;
  height: 400px;
  position: absolute;
  top: 23.3px;
  right: 64px;
  position: relative;
}

.purble {
  position: absolute;
  left: 0px;
  width: 131px;
  height: 397px;
  opacity: 80%;
  border-top-left-radius: 93px;
  border-bottom-left-radius: 93px;
  transition: right 2s ease-in-out, left 2s ease-in-out,
    border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out;
}

.white {
  position: absolute;
  right: 0px;
  top: 134.8px;
  width: 261.4px;
  height: 265.2px;
  object-fit: cover;
  opacity: 80%;
  border-top-left-radius: 178px;
  border-bottom-right-radius: 182px;
  border-bottom-left-radius: 181px;
  transition: top 2s ease-in-out, right 2s ease-in-out, bottom 2s ease-in-out,
    left 2s ease-in-out, border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out, height 2s ease-in-out;
}

.black {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 261.4px;
  height: 131.6px;
  object-fit: cover;
  opacity: 80%;
  border-top-left-radius: 90px;
  border-top-right-radius: 92px;
  border-bottom-right-radius: 92px;
  transition: top 2s ease-in-out, right 2s ease-in-out, bottom 2s ease-in-out,
    left 2s ease-in-out, border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out, height 2s ease-in-out;
}
 */

/* @font-face {
  font-family: "Avenir Arabic Medium";
  src: url("../../fonts/alfont_com_AlFont_com_AvenirArabic-Medium.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Grandia";
  src: url("../../fonts/grandia.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Fredoka";
  src: url("../../fonts/Fredoka-VariableFont_wdth,wght.ttf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
#home .container {
  margin-left: 100px;
  margin-right: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#home {
  display: flex;
  margin-top: 153x;
  justify-content: space-between;
  height: 900px;
  overflow-x: hidden;
  max-width: 1440px;
}

#shape-home1 {
  width: 93px;
  height: 78px;
  position: absolute;
  top: 33.3px;
  left: 309px;
}


#shape-home2 {
  width: 39px;
  height: 49px;
  position: absolute;
  top: 450px;
  left: 331.2px;
}


#main-home {
  width: 499px;
  height: 343px;
  margin-left: 92px;
  display: flex;
  position: relative;
}


#text-home {
  margin: 0;
  position: absolute;
  top: 120px;
  font-family: "Fredoka";
  color: rgba(15, 23, 42, 1);
  width: 496px;
  height: 121px;
  font-size: 72px;
}

#shape-home3 {
  width: 20.6px;
  height: 26px;
  position: absolute;
  top: 202px;
  left: 153px;
}


#i {
  text-transform: lowercase;
  font-variant: small-caps;
  font-family: "";
  color: rgba(15, 23, 42, 1);
  font-size: 64.8px;
  font-weight: 700px;
}

#peacok-home {
  font-family: "Fredoka";
  font-size: 92px;
  margin: 0;
  color: rgba(30, 164, 139, 1);
  width: 458px;
  height: 91.2px;
  position: absolute;
  top: 249.2px;
  z-index: 2;
}

#peacok-vector-home {
  width: 266.4px;
  height: 18.8px;
  position: absolute;
  top: 328.4px;
  border-style: hidden;
  border-width: 9px;
}

#request-btn-home {
  width: 192.6px;
  height: 63px;
  position: absolute;
  top: 369px;
  border-style: none;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    rgba(30, 164, 139, 1) 50%,
    rgba(254, 216, 95, 1) 50%
  );
  background-size: 200% 100%;
  background-position: right bottom;
  font-family: "Avenir Arabic Medium";
  font-weight: 800;
  font-size: 18px;
  color: rgba(52, 52, 52, 1);
  transition: background-position 0.5s ease, color 0.5s ease;
}
#request-btn-home:hover {
  background-position: left bottom;
  color: white;
}

#images {
  width: 634px;
  height: 627px;
  position: relative;
  margin-top: 37px;
  margin-right: 75px;
  max-width: 100%;
}

.purble {
  position: absolute;
  left: 0px;
  width: 208px;
  height: 630px;
  opacity: 80%;
  border-top-left-radius: 93px;
  border-bottom-left-radius: 93px;
  transition: right 2s ease-in-out, left 2s ease-in-out,
    border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out;
}

.white {
  position: absolute;
  left: 212px;
  top: 424px;
  width: 415px;
  height: 209px;
  object-fit: cover;
  opacity: 80%;
  border-top-left-radius: 178px;
  border-bottom-right-radius: 182px;
  border-bottom-left-radius: 181px;
  transition: top 2s ease-in-out, right 2s ease-in-out, bottom 2s ease-in-out,
    left 2s ease-in-out, border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out, height 2s ease-in-out;
}

.black {
  position: absolute;
  left: 212px;
  top: 0px;
  width: 415px;
  height: 421px;
  object-fit: cover;
  opacity: 80%;
  border-top-left-radius: 90px;
  border-top-right-radius: 92px;
  border-bottom-right-radius: 92px;
  transition: top 2s ease-in-out, right 2s ease-in-out, bottom 2s ease-in-out,
    left 2s ease-in-out, border-top-left-radius 2s ease-in-out,
    border-bottom-left-radius 2s ease-in-out,
    border-top-right-radius 2s ease-in-out,
    border-bottom-right-radius 2s ease-in-out, height 2s ease-in-out;
} */

/*1اصغر حجم*/
/* border-top-left-radius: 90px;
border-top-right-radius: 92px;
border-bottom-right-radius: 92px;
 */
/*
border-top-left-radius: 178px;
border-bottom-right-radius: 182px;
border-bottom-left-radius: 181px;
*/

/*1الوسط*/ /* 
border-top-left-radius: 178px;
border-bottom-right-radius: 182px;
border-bottom-left-radius: 181px;
 */
/*
border-top-left-radius: 90px;
border-top-right-radius: 92px;
border-bottom-right-radius: 92px;
*/

/*1الطويل*/
/* 
border-top-left-radius: 93px;
border-bottom-left-radius: 93px;
 */
/*
border-top-right-radius: 93px;
border-bottom-right-radius: 93px;
*/