@font-face {
      src: url("../Font/FlechaTestL-Medium-BF669881b19a10d.otf");
      font-family: 'FlechaTestL-Medium';
}

@font-face {
      src: url("../Font/FlechaTestL-Regular-BF669881b1e0167.otf");
      font-family: 'FlechaTestL-Regular';
}

@font-face {
      src: url("../Font/FlechaTestL-Light-BF669881b18db3f.otf");
      font-family: 'FlechaTestL-Light';
}

@font-face {
      src: url("../Font/FlechaTestL-Bold-BF669881b198f8e.otf");
      font-family: 'FlechaTestL-Bold';
}

@font-face {
      src: url("../Font/Sofia\ Pro\ Regular\ Az.otf");
      font-family: 'Sofia\ Pro\ Regular';
}

@font-face {
      src: url("../Font/Sofia\ Pro\ Medium\ Az.otf");
      font-family: 'Sofia\ Pro\ Medium';
}

@font-face {
      src: url("../Font/Sofia\ Pro\ Bold\ Az.otf");
      font-family: 'Sofia\ Pro\ Bold\ Az.otf';
}

@font-face {
      src: url("../Font/Sofia\ Pro\ Light\ Az.otf");
      font-family: 'Sofia\ Pro\ Light';
}

@font-face {
      src: url("../Font/FlechaTestM-Regular-BF669881b14122b.otf");
      font-family: 'FlechaTestM-Regular';
}

@font-face {
      src: url("../Font/FlechaTestM-Light-BF669881b1c23f2.otf");
      font-family: 'FlechaTestM-Light';
}

@font-face {
      src: url("../Font/FlechaTestM-Medium-BF669881b174c33.otf");
      font-family: 'FlechaTestM-Medium';
}

@font-face {
      src: url("../Font/Icone\ LT\ Regular.ttf");
      font-family: 'Icone\ LT\ Regular';
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'FlechaTestL-Light';
}

h1 {
      margin: 0;
}

p {
      margin: 0;
}

ul {
      margin: 0;
}

/* PreLoder */

.alaykum {
      font-size: 48px;
      font-weight: 400;
      line-height: 56px;
      color: #000000;
      font-family: 'FlechaTestL-Medium';
}

.ExploreBtn {
      box-shadow: 5px 5px 0px 0px #93654A26;
      padding: 12px 22px;
      border: 1px solid #EDEBE4;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #FFFDF703;
      gap: 10px;
      transition: all 0.4s;
}

.ExploreBtn:hover {
      box-shadow: none;
}

.PreLoder {
      width: 100%;
      height: 100vh;
      background-color: white;
      position: fixed;
      top: 0px;
      left: 0px;
      display: flex;
      justify-content: center;
      z-index: 20;
      align-items: center;
}

.PreLoder_Heading {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 33px;
}

.Arrow {
      width: 15px;
      display: flex;
      align-items: center;
      justify-content: end;
      overflow: hidden;
      transition: all 0.4s;
}

.ExploreBtn:hover .Arrow {
      width: 25px;
}

.PreLoderScreen {
      position: absolute;
      width: 100%;
      height: 100vh;
      background-color: #93654A;
      transform: translateY(-100%);
      z-index: 21;
}

.PreLoderScreenActive {
      animation: SmartAnimation 1.5s ease-in-out 50ms 1;
}

@keyframes SmartAnimation {
      0% {
            transform: translateY(-100%);
      }

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

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

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

/* Header */

.InputHide {
      overflow: hidden;
      width: 240px;
}

.NavPadding {
      padding-left: 0%;
      padding-right: 0%;
}

.HeaderBar {
      background-image: url("..//Imgaes/Subtract.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      z-index: 9;
      height: 5vw;
      display: flex;
      justify-content: center;
      align-items: center;
}

.LeftNavBar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 60px;
}

.RightNavBar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
}

.English {
      font-size: 16px;
      line-height: 21px;
      font-weight: 300;
      color: #544E4E;
      font-family: 'Sofia\ Pro\ Light';
}

.EnglishLanguage {
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #E6E8EA;
      gap: 10px;
      cursor: pointer;
      padding: 20px 20px;
}

ul {
      padding: 0px;
}

.Nav_Bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
}

.NavLinkOne {
      list-style-type: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 32px;
}

.NavLinks {
      text-decoration: none;
      font-family: 'Sofia\ Pro\ Light' !important;
      font-size: 16px;
      line-height: 21px;
      font-weight: 300;
      color: #463E3E;
}

.SearchBox {
      display: flex;
      justify-content: center;
      align-items: center;
      border-left: 1px solid #E6E8EA;
      gap: 10px;
      padding: 10px 20px;
      cursor: pointer;
      transition: all 0.3s;
      float: right;
}

.CloseSearchBox {
      display: none;
}

.SearchBoxMin {
      padding: 10px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
}

.ActiveLink {
      font-size: 16px;
      font-weight: 600;
      line-height: 21px;
      color: #0A1D35;
      /* font-family: 'Sofia\ Pro\ Regular'; */
      /* font-family: 'Sofia\ Pro\ Medium'; */
}

.LanOne {
      font-size: 16px;
      line-height: 16.5px;
      font-weight: 300;
      color: #544E4E;
      padding: 10px 10px;
      cursor: pointer;
}

.LanOneActive {
      font-weight: 400;
      color: #0A1D35;
      font-family: 'Sofia\ Pro\ Regular';
}

.ChoosLan {
      position: relative;
}

.Language {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 100%;
      left: 0px;
      width: 100%;
      background-color: #FFFDF7;
      display: none;
}

.LanguageActive {
      display: flex;
}

.Down {
      transform: rotateX(180deg);
}

.SearchBoxLive {
      border: none;
      outline: none;
      font-family: 'Sofia\ Pro\ Light';
      font-weight: 300;
      color: #544E4E;
      background-color: transparent;
      cursor: pointer;
      transition: all 0.3s;
      width: 52px;
}

.ActiveSearchBox {
      width: 150px !important;
}

.SearchBoxLive::-webkit-search-cancel-button {
      display: none;
}

.Logo {
      margin-bottom: 10px !important;
}

.LogoHeading {
      font-size: 16px;
      line-height: 16.5px;
      font-weight: 300;
      color: #FFFDF7;
      font-family: 'FlechaTestM-Light';
}

.LogoName {
      font-size: 16px;
      line-height: 16.5px;
      font-weight: 600;
      letter-spacing: 2px;
      color: #FFFDF7;
      font-family: 'FlechaTestL-Bold';
}

.LogoBox {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      left: 50%;
      transform: translateX(-50%);
      top: 20px;
}

/* Hero */

.Hero {
      padding-bottom: 50px;
      overflow: hidden;
}

.PhotoOne {
      position: absolute;
      width: 100%;
      transition: all 0.5s;
      z-index: 0;
      opacity: 0%;
}

.UpperHeroPart {
      height: 100vh;
}

.PhotoOneActive {
      opacity: 100%;
      z-index: 5;
}

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

.HeroPhotoOneBox {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;
}

.HeadingAboutHeroOnePhoto {
      font-size: 40px;
      font-weight: 400;
      line-height: 45px;
      color: #FFFDF7;
      letter-spacing: 1px;
      /* font-family: 'FlechaTestM-Light'; */
      font-family: 'FlechaTestM-Regular';
}

.TextAboutHeroOnePhoto {
      position: absolute;
      width: 480px;
      bottom: 40px;
      left: 70px;
      z-index: 2;
}

.BtnMore {
      background: transparent;
      box-shadow: none;
      border: none;
      color: white;
      padding: 10px 0px;
      transition: all 0.3s;
}

.More {
      transition: all 0.3s;
      font-family: 'FlechaTestM-Light';
      color: #FFFDF7;
      letter-spacing: 1px;
      font-size: 18px;
      line-height: 20px;
      font-weight: 300;
}

.BtnMore:hover .More {
      font-style: italic;
      transition: all 0s;
}

.Photovideo {
      width: 100%;
      height: 100vh;
      object-fit: cover;
}

.HeroPhotoOneBox::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 300px;
      top: 0px;
      left: 0px;
      background: linear-gradient(to bottom, black, transparent);
      z-index: 1;
}

.HeroPhotoOneBox::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 300px;
      bottom: 0px;
      left: 0px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.763), transparent);
      z-index: 1;
}

.box {
      width: 100px;
      height: 100px;
}

.LowerHeroText {
      font-size: 20px;
      line-height: 26px;
      font-weight: 400;
      color: #2A2A29;
      letter-spacing: 1px;
      font-family: 'FlechaTestM-Regular';
      text-align: center;
}

.ReadMoreBtn {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      color: #0A1D35;
      font-size: 16px;
      line-height: 18px;
      font-weight: 400;
      font-family: 'FlechaTestM-Regular';
}

.FirstBlock {
      position: relative;
      border-bottom: 5px solid #93654a00;
}

.LowerPartPading {
      padding: 0px;
      border-left: 1px solid #d8beadb5;
      border-right: 1px solid #d8beadb5;
}

.MiniHeroTwo {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
      border-bottom: 5px solid #00000000;
      border-left: 1px solid #00000000;
      border-right: 1px solid #00000000;
      border-top: 1px solid #00000000;
}

.HighOpacity {
      background-color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      transition: all 0.3s;
      cursor: pointer;
      gap: 20px;
      padding: 20px 18px;
}

.ActiveBorder {
      border-bottom: 5px solid #93654a;
}

/* BIOGRAPHY */

.BIOGRAPHY {
      overflow: hidden;
      padding-top: 50px;
      padding-bottom: 120px;
}

.BioHeading {
      font-size: 48px;
      line-height: 54px;
      font-weight: 400;
      color: #000000;
      text-align: center;
      margin-bottom: 20px !important;
      font-family: 'FlechaTestL-Regular';
}

.BioPara {
      font-size: 20px;
      line-height: 28px;
      font-weight: 400;
      color: #2A2A29;
      text-align: center;
      letter-spacing: 1px;
      margin-bottom: 40px !important;
      font-family: 'FlechaTestM-Regular';
}

.BioOfPerson {
      font-size: 24px;
      line-height: 26px;
      font-weight: 400;
      font-style: italic;
      color: #000000;
      margin-bottom: 12px !important;
      margin-top: 7px !important;
      font-family: 'Icone\ LT\ Regular';
}

.BioBtn {
      font-size: 18px;
      font-weight: 400;
      line-height: 20px;
      color: #0A1D35;
      letter-spacing: 1px;
      font-family: 'FlechaTestM-Regular';
}

.UpperBio {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

}

.BioContainer {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
}

.LowerBio {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: -70px !important;
      position: relative;
}

.LineInBothSide {
      width: 85%;
}

.DesignOfLine {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-top: -120px !important;
      gap: 20px;
}

.PersonOne {
      position: relative;
      width: 31%;
}

.PersonTwo {
      width: 31%;
}

.LowerBio::before {
      content: '';
      background-image: url("../Imgaes/Group\ 172.png");
      background-size: cover;
      position: absolute;
      top: 50%;
      left: 25%;
      width: 125px;
      height: 125px;
      z-index: 2;
}

/* Media */

.Media {
      background-color: #0A1623;
      padding-top: 60px;
      padding-bottom: 60px;
      /* height: 540px; */
      height: 34vw;
      margin-bottom: 250px;
}

.ViewAllBtn {
      background: transparent;
      color: #FFFDF7;
      border: none;
      padding: 5px 0px;
      box-shadow: none;
      font-size: 18px;
      line-height: 20px;
      font-weight: 300;
      letter-spacing: 1px;
      font-family: 'FlechaTestM-Light';
}

.MediaHeading {
      font-family: 'FlechaTestM-Regular';
      font-size: 48px;
      font-weight: 400;
      line-height: 54px;
      color: #FFFDF7;
}


.NextBtn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 1px solid #FFFFFF1A;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
}

.PrevBtnPhoto {
      transform: rotateY(180deg);
}

.NextBtn:hover {
      background-color: #FFFFFF;
}

.NextBtn:active {
      background-color: #ffffff34;
}

.NextAndPrevBtn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
}

.UpperMediapart {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      margin: auto;
      margin-bottom: 40px;
}

.HeadingBox {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
}

.ChildOnePhoto {
      width: 100%;
}

.ForMargin {
      width: 94%;
      margin-left: auto;
      position: relative;
      /* height: 600px; */
      height: 720px;
      overflow: hidden;
}

.SliderChild1 {
      /* width: 32%; */
      width: 25vw;
      position: absolute;
      transition: all 0.5s;
}

.SliderChild1:nth-child(1) {
      /* width: 52%; */
      width: 45vw;
      top: 0px;
      left: 0px;
}

.SliderChild1:nth-child(1) .DataAboutFirstChild {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
      margin-top: 27px;
}

.SliderChild1:nth-child(1) .Date {
      font-size: 19px;
      font-weight: 400;
      line-height: 24px;
      color: #93654A;
}

.SliderChild1:nth-child(1) .AboutFirstChild {
      font-size: 32px;
      font-weight: 400;
      line-height: 42px;
      letter-spacing: 0.04em;
      font-family: 'FlechaTestM-Regular';
      color: #000000;
}

.SliderChild1:nth-child(1) .ReadMoreBtnTwo {
      box-shadow: none;
      background: transparent;
      border: none;
      font-size: 16px;
      font-weight: 400;
      line-height: 18px;
      color: #0A1D35;
      font-family: 'FlechaTestM-Regular';
      padding: 5px 0px;
      display: flex;
}


.Date {
      font-size: 10.5px;
      line-height: 13.5px;
      font-weight: 400;
      color: #93654A;
      font-family: 'Icone\ LT\ Regular';
}

.AboutFirstChild {
      font-size: 18px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.08em;
      color: #FFFFFF;
      font-family: 'FlechaTestM-Regular';
}

.ReadMoreBtnTwo {
      box-shadow: none;
      background: transparent;
      border: none;
      color: #0A1D35;
      font-family: 'FlechaTestM-Regular';
      padding: 5px 0px;
      font-size: 16px;
      font-weight: 400;
      line-height: 18px;
      display: none;
}

.HideBtn {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
}

.DataAboutFirstChild {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 10px;
      /* gap: 8px; */
}

.SliderChild1:nth-child(2) {
      /* left: 650px; */
      left: 47.5vw;
      top: 0px;
      cursor: pointer;
}

.SliderChild1:nth-child(3) {
      /* left: 1050px; */
      left: 75vw;
      top: 0px;
}

.SliderChild1:nth-child(4) {
      /* left: 1450px; */
      left: 100vw;
      top: 0px;
}

.SliderChild1:nth-child(5) {
      /* left: 1450px; */
      left: 100vw;
      top: 0px;
}

.SliderChild1:nth-child(6) {
      /* left: 1450px; */
      left: 100vw;
      top: 0px;
}

/* Initiatives */

.Initiatives {
      padding-bottom: 70px;
}

.Heading {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 80px;
      gap: 10px;
}

.InitiativesHeading {
      font-size: 48px;
      font-weight: 400;
      line-height: 54px;
      color: #000000;
      font-family: 'FlechaTestL-Regular';
}

.BlockOneHeading {
      font-size: 32px;
      font-weight: 400;
      line-height: 34px;
      color: #000000;
      font-family: 'FlechaTestM-Light';
      letter-spacing: 1px;
      width: 45%;
}

.ReadMoreBtnCanUse {
      background: transparent;
      border: none;
      box-shadow: none;
      font-family: 'FlechaTestM-Regular';
      letter-spacing: 1px;
      color: #0A1D35;
      font-size: 20px;
      line-height: 28px;
      font-weight: 400;
}

.BlockOne {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 38px 40px;
      border-top: 1px solid #C3BEB64D;
      position: relative;
}

.BlockOne::before {
      content: '';
      position: absolute;
      width: 215px;
      height: 157px;
      background-color: #000000;
      border-radius: 12px;
      transform: rotate(-5deg);
      z-index: 1;
      opacity: 0%;
      transition: all 0.5s;
}

.BlockOne:nth-child(1)::before {
      background-image: url("../Imgaes/C8.png");
      background-size: cover;
      top: -25px;
      left: 60%;
}

.BlockOne:nth-child(2)::before {
      background-image: url("../Imgaes/C7.png");
      background-size: cover;
      top: -25px;
      left: 45%;
}

.BlockOne:nth-child(3)::before {
      background-image: url("../Imgaes/C6.png");
      background-size: cover;
      background-position: center;
      top: -25px;
      left: 60%;
}

.BlockOne:nth-child(4)::before {
      background-image: url("../Imgaes/C5.png");
      background-size: cover;
      background-position: center;
      top: -25px;
      left: 45%;
}

.BlockOne:nth-child(5)::before {
      background-image: url("../Imgaes/C4.png");
      background-size: cover;
      top: -25px;
      left: 60%;
}

.BlockOne:nth-child(6)::before {
      background-image: url("../Imgaes/C3.png");
      background-size: cover;
      top: -25px;
      left: 45%;
}

.BlockOne:nth-child(7)::before {
      background-image: url("../Imgaes/C2.png");
      background-size: cover;
      top: -25px;
      left: 60%;
}

.BlockOne:nth-child(8)::before {
      background-image: url("../Imgaes/C1.png");
      background-size: cover;
      top: -25px;
      left: 45%;
}

.BlockOne:hover::before {
      opacity: 100%;
}

/* carousel */

.carousel {
      padding-bottom: 100px;
      min-height: 570px;
}

.SlideContainer {
      position: relative;
}

.ParaForSlideOne {
      font-size: 28px;
      font-weight: 400;
      line-height: 34px;
      color: #000000;
      text-align: center;
      letter-spacing: 1px;
      font-family: 'FlechaTestM-Regular';
      width: 70%;
}

.HeadingForSlideOne {
      font-size: 20px;
      line-height: 22px;
      font-weight: 300;
      color: #000000;
      font-style: italic;
      text-align: center;
      font-family: 'Icone\ LT\ Regular';
}

.SlideOne {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 80px;
      padding-bottom: 170px;
      background-color: #FBF7F7;
      gap: 44px;
      min-height: 570px;
      position: absolute;
      transition: all 0.5s;
      opacity: 0%;
}

.ActiveSlide {
      opacity: 100%;
}

.SlideOne::before {
      content: '';
      position: absolute;
      box-sizing: content-box;
      width: 105px;
      height: 105px;
      border-radius: 50%;
      border: 11px solid #ffffff;
      left: 50%;
      bottom: 0%;
      transition: all 0.5s;
      transform: translate(-50%, 50%);
}

.SlideOne:nth-child(1)::before {
      background-image: url("../Imgaes/p1.jpg");
      background-size: cover;
}

.SlideOne:nth-child(2)::before {
      background-image: url("../Imgaes/p2.jpg");
      background-size: cover;
}

.SlideOne:nth-child(3)::before {
      background-image: url("../Imgaes/p3.jpeg");
      background-size: cover;
}

.SlideOne:nth-child(4)::before {
      background-image: url("../Imgaes/p4.jpg");
      background-size: cover;
}

.SlideOne:nth-child(5)::before {
      border: none;
      width: 116px;
      height: 116px;
      background-image: url("../Imgaes/Rectangle\ 18984.png");
      background-size: cover;
}

.UpperParaFor {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
}

.BtnDot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #352F2F;
      opacity: 40%;
      transition: all 0.5s;
      cursor: pointer;
}

.BtnDotActive {
      background-color: #FFFFFF;
      opacity: 100%;
}

.SlideShow {
      position: relative;
      min-height: 570px;
}

.BtnContainer {
      padding: 10px 12px;
      border-radius: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 9px;
      background-color: #DCD7D7;
      width: 110px;
      position: absolute;
      z-index: 1;
      bottom: 20%;
      left: 50%;
      transform: translateX(-50%);
}

/* Gallery */

.Gallery {
      padding-top: 50px;
      padding-bottom: 50px;
}

.Our_Gallery {
      font-size: 20px;
      line-height: 28px;
      font-weight: 400;
      text-align: center;
      color: #93654A;
      letter-spacing: 1px;
      font-family: 'FlechaTestM-Regular';
}

.GalleryPara {
      font-size: 48px;
      line-height: 54px;
      font-weight: 400;
      color: #000000;
      font-family: 'FlechaTestL-Regular';
}

.UpperGallery {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 16px;
}

.LowerGallery {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 20px;
      /* height: 530px; */
      height: 40vw;
      margin-top: 70px;
}

.ImgeOfSlider {
      width: 100%;
      /* height: 400px; */
      height: 31vw;
      object-fit: cover;
      object-position: center;
}

.UpeerLayerOfImgOne {
      width: 7%;
      transition: all 0.5s;
      /* height: 400px; */
      height: 31vw;
      overflow: hidden;
}

.ImgOne {
      width: 100%;
      overflow: hidden;
      transition: all 0.5s;
      transform-origin: center;
      position: relative;
}

.ImgOne::before {
      content: '';
      position: absolute;
      width: 110%;
      height: 30px;
      top: -10px;
      left: 0px;
      transition: all 0.5s;
      transform: skewY(-9deg);
      background-color: rgb(255, 255, 255);
}

.ImgOne::after {
      content: '';
      position: absolute;
      width: 110%;
      height: 30px;
      /* bottom: -15px; */
      bottom: -5px;
      left: 0px;
      transition: all 0.5s;
      transform: skewY(-9deg);
      background-color: rgb(255, 255, 255);
}

.UpeerLayerOfImgOne:hover {
      width: 29%;
      /* height: 530px; */
      height: 39vw;
}

.UpeerLayerOfImgOne:hover .ImgOne::before {
      transform: skewY(-2deg);
}

.UpeerLayerOfImgOne:hover .ImgOne::after {
      transform: skewY(-2deg);
}

.PrinceHeading {
      font-size: 24px;
      font-weight: 400;
      line-height: 26px;
      text-align: center;
      color: #2A2A29;
      letter-spacing: 1px;
      font-family: 'FlechaTestM-Regular';
}

.AboutPrince {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      gap: 24px;
      /* width: 400px; */
      width: 100%;
      transition: all 0.5s;
      display: none;
}

.GalleryBtn {
      font-size: 16px;
      line-height: 18.2px;
      font-weight: 400;
      color: #0A1D35;
      font-family: 'FlechaTestM-Regular';
}

.UpeerLayerOfImgOne:hover .AboutPrince {
      display: flex;
}

/* footer */

.footer {
      background-color: #0A1623;
      position: relative;
}

.Hussein {
      font-size: 20px;
      font-weight: 400;
      line-height: 24px;
      font-family: 'FlechaTestM-Regular';
      color: #FFFFFF;
      letter-spacing: 1px;
}

.ListOfLink {
      list-style-type: none;
      padding: 0%;
      margin: 0%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
}

.ListOfLink li {
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      color: #FFFFFFCC;
      font-family: 'Sofia\ Pro\ Regular';
      cursor: pointer;
      padding-right: 30px;
}

.ListOne {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 32px;
      width: 20%;
}

.logos {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.MediaIcon {
      width: 25%;
}

.FooterPart {
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 70px;
}

.SocialMedia {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
}

.footerText {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      color: #FFFFFF;
      font-family: 'FlechaTestM-Regular';
      width: 35%;
      text-align: center;
      letter-spacing: 1px;
}

.textpart {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: -40px;
}

.Lower {
      position: relative;
      background-color: #050D15;
      padding: 15px 0px;
}

.Ellipse {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      position: absolute;
      background-color: #050D15;
      top: 14%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.Ellipse::before {
      content: '';
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: #0A1623;
      border-radius: 0% 0% 50% 0%;
      box-shadow: 5px 20px 0px 0px #050D15;
      top: 11px;
      left: -24px;
}

.Ellipse::after {
      content: '';
      position: absolute;
      width: 30px;
      height: 30px;
      background-color: #0A1623;
      border-radius: 0% 0% 50% 0%;
      box-shadow: 5px 20px 0px 0px #050D15;
      top: 11px;
      transform: rotateY(180deg);
      left: 104px;
}

.LowerFooterPart {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
}

.RedirectBtn {
      width: 40px;
      height: 40px;
      border: none;
      background-color: #93654A;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      cursor: pointer;
      right: 0px;
      top: 0px;
}

.FooterIcon {
      width: 50px;
}

.FooterIcon {
      position: relative;
      left: 50%;
      top: 0%;
      transform: translate(-50%, -55%);
}

.EllipseTwo {
      width: 165px;
      height: 165px;
      border-radius: 50%;
      position: absolute;
      background-color: #0A1623;
      top: 3%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.EllipseTwo::before {
      content: '';
      position: absolute;
      width: 46px;
      height: 40px;
      background-color: #ffffff;
      border-radius: 0% 0% 50% 0%;
      box-shadow: 5px 27px 0px 0px #0A1623;
      top: 25.5px;
      left: -39.3px;
}

.EllipseTwo::after {
      content: '';
      position: absolute;
      width: 46px;
      height: 40px;
      background-color: #ffffff;
      border-radius: 0% 0% 50% 0%;
      box-shadow: 5px 27px 0px 0px #0A1623;
      top: 25.5px;
      left: 158px;
      transform: rotateY(180deg);
}

.CopyRight {
      font-size: 14px;
      line-height: 14.5px;
      font-weight: 300;
      letter-spacing: 1px;
      color: #E3E4E5;
      font-family: 'Sofia\ Pro\ Light';
}

.FooterLogo {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 22px;
      margin-bottom: 48px;
      position: relative;
      z-index: 1;
      top: -30px;
}

.HeaderBarResponsive {
      display: none;
}

.NextAndPrevBtn2 {
      display: none;
}

.OnlyForLgDivice {
      display: none;
}

.ShowInLg {
      display: none;
}

@media only screen and (min-width: 1800px) {
      .Logo {
            width: 6vw
      }

      .LogoBox {
            gap: 5px;
      }

      .LogoHeading {
            font-size: 22px;
      }

      .LogoName, .NavLinks, .ActiveLink {
            font-size: 21px;
      }
      
      .English, .LanOne {
            font-size: 20px;
      }

      .Language {
            top: 118%;
      }

      .SearchBoxLive {
            font-size: 20px;
      }

      .CloseSearchBox {
            font-size: 20px;
      }

      .SearchBoxLive {
            width: 70px;
      }

      .ForMargin {
            height: 760px;
      }

      .ListOfLink li {
            font-size: 18px;
            line-height: 22px;
      }

      .Hussein {
            font-size: 23px;
            line-height: 30px;
      }

      .EllipseTwo::before, .EllipseTwo::after {
            top: 24px;
      }

      .LowerHeroText {
            font-size: 25px;
            line-height: 30px;
      }

      .ReadMoreBtn {
            font-size: 20px;
            line-height: 22px;
      }

      .HighOpacity {
            padding: 30px 18px;
      }
}

@media only screen and (max-width: 1400px) {
      .UpperHeroPart {
            height: 95vh;
      }

      .HeroPhotoOneBox {
            height: 95vh;
      }

      .SliderChild1 {
            width: 25vw;
      }

      .SliderChild1:nth-child(1) {
            width: 50vw;
      }

      .SliderChild1:nth-child(2) {
            left: 52vw;
      }

      .SliderChild1:nth-child(3) {
            left: 79vw;
      }

      .Media {
            height: 570px;
            margin-bottom: 210px;
      }

      .UpeerLayerOfImgOne {
            height: 450px;
      }

      .ImgeOfSlider {
            height: 450px;
      }

      .UpeerLayerOfImgOne:hover {
            height: 630px;
      }

      .LowerGallery {
            height: 630px;
      }

      .AboutPrince {
            width: 100%;
      }
}

@media only screen and (max-width: 1200px) {

      .Media {
            height: 520px;
            margin-bottom: 210px;
      }

      .UpperHeroPart {
            height: 100vh;
      }

      .HeroPhotoOneBox {
            height: 100vh;
      }

      .EllipseTwo::after {
            top: 25px;
            left: 158px;
      }

      .EllipseTwo::before {
            top: 25px;
            left: -39.3px;
      }

      .AboutPrince {
            width: 100%;
      }
}

@media only screen and (max-width: 1140px) {

      .SliderChild1 {
            width: 250px;
            /* width: 27vw; */
      }


      .English {
            font-size: 13px;
            line-height: 19px;
      }

      .LanOne {
            font-size: 13px;
            line-height: 16.5px;
            padding: 5px 10px;
      }

      .EnglishLanguage {
            gap: 5px;
            padding: 10px 5px;
      }

      .LeftNavBar {
            gap: 50px;
      }

      .SearchBoxLive {
            width: 50px;
            font-size: 14px;
      }

      .SearchBoxMin {
            padding: 5px 0px;
      }

      .SearchBox {
            gap: 5px;
            padding: 5px;
      }

      .NavLinkOne {
            gap: 15px;
      }

      .RightNavBar {
            gap: 10px;
      }

      .NavLinks {
            font-size: 14px;
      }

      .Logo {
            margin-bottom: 10px !important;
            width: 65px;
      }

      .LogoHeading {
            font-size: 14px;
            line-height: 15.5px;
      }

      .LogoName {
            font-size: 14px;
            line-height: 15.5px;
      }

      .HeadingAboutHeroOnePhoto {
            font-size: 25px;
            line-height: 35px;
      }

      .BtnMore {
            padding: 5px 0px;
      }

      .LowerHeroText {
            font-size: 15px;
            line-height: 20px;
      }

      .HighOpacity {
            gap: 15px;
            padding: 15px 15px;
      }

      .ReadMoreBtn {
            font-size: 16px;
            gap: 8px;
      }

      .BioHeading {
            font-size: 40px;
            line-height: 50px;
            margin-bottom: 15px !important;
      }

      .BioPara {
            font-size: 17px;
            line-height: 25px;
            margin-bottom: 30px !important;
      }

      .MediaHeading {
            font-size: 40px;
            line-height: 50px;
      }

      .HeadingBox {
            gap: 10px;
      }

      .ViewAllBtn {
            font-size: 15px;
            line-height: 21px;
      }

      .NextBtn {
            width: 45px;
            height: 45px;
      }

      .PrevBtnPhoto {
            width: 20px;
      }

      .nextBtnImg {
            width: 20px;
      }

      .SliderChild1:nth-child(2) {
            /* left: 525px; */
            left: 54vw;
      }

      .LowerGallery {
            height: 530px;
      }

      .SliderChild1:nth-child(3) {
            /* left: 810px; */
            left: 80.5vw;
            top: 0px;
      }

      .AboutFirstChild {
            font-size: 13px;
            line-height: 20px;
      }

      .SliderChild1:nth-child(1) .AboutFirstChild {
            font-size: 25px;
            line-height: 35px;
      }

      .SliderChild1:nth-child(1) .Date {
            font-size: 16px;
            line-height: 20px;
      }

      .SliderChild1:nth-child(1) .DataAboutFirstChild {
            gap: 3px;
            margin-top: 20px;
      }

      .Media {
            background-color: #0A1623;
            padding-bottom: 60px;
            height: 430px;
            margin-bottom: 165px;
            padding-top: 40px;
      }

      .Heading {
            margin-bottom: 40px;
            gap: 5px;
      }

      .ForMargin {
            height: 450px;
            /* height: 720px; */
      }

      .DownArrow {
            height: 100px;
      }

      .InitiativesHeading {
            font-size: 40px;
            line-height: 50px;
      }

      .BlockOneHeading {
            font-size: 25px;
            line-height: 30px;
      }

      .BlockOne {
            padding: 35px 35px;
      }

      .BlockOne::before {
            width: 191px;
            height: 140px;
      }

      .BlockOne:nth-child(1)::before {
            top: -15px;
            left: 60%;
      }

      .BlockOne:nth-child(2)::before {
            top: -15px;
            left: 45%;
      }

      .BlockOne:nth-child(3)::before {
            top: -15px;
            left: 60%;
      }

      .BlockOne:nth-child(4)::before {
            top: -15px;
            left: 60%;
      }

      .BlockOne:nth-child(5)::before {
            top: -15px;
            left: 45%;
      }

      .BlockOne:nth-child(6)::before {
            top: -15px;
            left: 60%;
      }

      .BlockOne:nth-child(7)::before {
            top: -15px;
            left: 60%;
      }

      .BlockOne:nth-child(8)::before {
            top: -15px;
            left: 45%;
      }

      .BtnContainer {
            bottom: 27%;
      }

      .Initiatives {
            padding-bottom: 30px;
      }

      .SlideOne {
            min-height: 455px;
            padding-top: 0px;
            padding-bottom: 30px;
      }

      .carousel {
            padding-bottom: 50px;
      }

      .ParaForSlideOne {
            font-size: 20px;
            line-height: 30px;
      }

      .GalleryPara {
            font-size: 35px;
            line-height: 40px;
      }

      .Our_Gallery {
            font-size: 18px;
            line-height: 20px;
      }

      .SlideShow {
            min-height: 520px;
      }

      .ImgeOfSlider {
            height: 350px;
      }

      .UpeerLayerOfImgOne {
            height: 350px;
      }

      .AboutPrince {
            gap: 15px;
            width: 300px;
      }

      .PrinceHeading {
            font-size: 20px;
      }

      .BIOGRAPHY {
            padding-top: 30px;
            padding-bottom: 80px;
      }

      .Gallery {
            padding-top: 10px;
            padding-bottom: 20px;
      }

      .UpperGallery {
            gap: 12px;
      }

      .LowerGallery {
            margin-top: 30px;
      }

      .Hussein {
            font-size: 17px;
            line-height: 20px;
      }

      .ListOfLink li {
            font-size: 12px;
            line-height: 15px;
            padding-right: 30px;
      }

      .ListOfLink {
            gap: 10px;
      }

      .ListOne {
            gap: 20px;
      }

      .FooterLogo {
            gap: 20px;
            margin-bottom: 25px;
      }

      .footerText {
            font-size: 12px;
            line-height: 15px;
      }

      .textpart {
            justify-content: center;
            gap: 40px;
      }

      .Lower {
            padding: 8px 0px;
      }

      .EllipseTwo::before {
            top: 18.5px;
            left: -39.3px;
      }

      .EllipseTwo::after {
            top: 18.5px;
            left: 138px;
      }

      .EllipseTwo {
            width: 145px;
            height: 145px;
      }

      .Ellipse::before {
            top: 14px;
            left: -25px;
      }

      .Ellipse::after {
            top: 14px;
            left: 106px;
      }

      .InputHide {
            width: 170px;
      }

      .ActiveSearchBox {
            width: 110px;
      }
}

@media only screen and (max-width: 992px) {
      .HeaderBar {
            display: none;
      }

      .HeaderBarResponsive {
            display: block;
            background-image: url(..//Imgaes/Subtract.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            padding: 10px 0px;
            z-index: 9;
      }

      .SearchBoxRes {
            border: none;
            background: transparent;
            outline: none;
            font-family: 'Sofia\ Pro\ Regular';
            cursor: pointer;
            width: 70px;
      }

      .SearchBoxResActive {
            cursor: text;
            width: 100%;
      }

      .SearchBoxRes::-webkit-search-cancel-button {
            display: none;
      }

      .CancleIcon2 {
            display: none;
            cursor: pointer;
      }

      .LeftNavBarRes {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 10px 10px;
            color: #544E4E;
            font-family: 'Sofia\ Pro\ Regular';
            font-size: 16px;
            line-height: 21px;
            font-weight: 300;
            float: left;
            cursor: pointer;
      }

      .LeftNavBarResabs {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: white;
            cursor: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 12px;
            padding: 9px 20px;
            display: none;
            z-index: 2;
      }

      .SearchBoxResabs {
            border: none;
            background: transparent;
            outline: none;
            font-family: 'Sofia\ Pro\ Regular';
            width: 100%;
      }

      .SearchBoxResabs::-webkit-search-cancel-button {
            display: none;
      }

      .CancleIcon2abs {
            float: right;
            cursor: pointer;
      }

      .MenuSection {
            font-size: 16px;
            line-height: 21px;
            font-weight: 300;
            font-family: 'Sofia\ Pro\ Regular';
            color: #544E4E;
      }

      .RightNavBarRes {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 10px 10px;
            float: right;
            cursor: pointer;
      }

      .LinkRes {
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #FFFDF7;
            padding: 15px;
            padding-bottom: 0px;
            transition: all 0.5s;
            opacity: 0%;
            pointer-events: none;
      }

      .LinkResActive {
            opacity: 100%;
            pointer-events: unset;
      }

      .CloseMenuHeading {
            font-size: 16px;
            line-height: 21px;
            font-weight: 300;
            color: #544E4E;
            margin: 0px;
            font-family: 'Sofia\ Pro\ Regular';
      }

      .CloseMenuRes {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            cursor: pointer;
      }

      .MenuHeading {
            font-size: 40px;
            font-weight: 400;
            line-height: 45px;
            color: #000000;
            font-family: 'FlechaTestL-Medium';
      }

      .UpprerHeadingOfMenuSec {
            display: flex;
            justify-content: space-between;
            align-items: center;
      }

      .LowerLinkSec {
            margin-top: 30px;
            padding-bottom: 44px;
      }

      .LinkSecRes {
            display: flex;
            padding: 0px;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            list-style-type: none;
            gap: 30px;
      }

      .LinkSecRes li {
            font-size: 18px;
            line-height: 21px;
            font-weight: 300;
            border-bottom: 2px solid transparent;
            font-family: 'Sofia\ Pro\ Regular';
            cursor: pointer;
      }

      .LinkForMobilResActive {
            font-weight: 700 !important;
            color: #0A1D35;
            border-bottom: 2px solid #93654A !important;
      }

      .LnOne {
            font-size: 16px;
            font-weight: 400;
            line-height: 18px;
            color: #0A1D35;
            width: 50%;
            cursor: pointer;
            height: 40px;
            background-color: white;
            font-family: 'Sofia\ Pro\ Regular';
            display: flex;
            justify-content: center;
            align-items: center;
      }

      .BtnForLanRES {
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #C3BEB64D
      }

      .LineBtnLanOne {
            width: 2px;
            height: 35px;
      }

      .LogoHeading {
            font-size: 14px;
            line-height: 15.5px;
      }

      .LogoName {
            font-size: 13px;
            line-height: 15.5px;
      }

      .HeadingAboutHeroOnePhoto {
            font-size: 24px;
            font-weight: 400;
            line-height: 27px;
            color: #FFFDF7;
            letter-spacing: 2%;
            font-family: 'FlechaTestM-Regular';
      }

      .LowerHeroText {
            font-size: 20px;
            line-height: 26px;
            font-weight: 400;
            color: #2A2A29;
            letter-spacing: 2%;
            font-family: 'FlechaTestM-Regular';
            text-align: center;
      }

      .FirstBlock {
            position: relative;
            border-bottom: 5px solid #8e6c5937;
      }

      .ActiveBorder {
            border-bottom: 5px solid #93654a !important;
      }

      .BioHeading {
            font-size: 40px;
            line-height: 45px;
            margin-bottom: 20px !important;
      }

      .BioPara {
            font-size: 18px;
            line-height: 26px;
            letter-spacing: 0.02em;
            color: #2A2A29;
            margin-bottom: 40px !important;
      }

      .Sign {
            width: 95px;
      }

      .BioOfPerson {
            font-size: 24px;
            line-height: 26px;
            font-weight: 300;
            margin-bottom: 12px !important;
            margin-top: 7px !important;
      }

      .PersonTwo {
            display: none;
      }


      .LowerBio {
            display: flex;
            flex-direction: column-reverse;
            margin-top: 0px !important;
            gap: 40px;
      }

      .DesignOfLine {
            display: flex;
            flex-direction: column;
            margin-top: 10px !important;
            gap: 20px;
      }

      .LineInBothSide {
            display: none;
      }

      .PersonOne {
            width: 250px;
      }

      .LowerBio::before {
            top: 65%;
            left: 70%;
      }

      .TextAboutHeroOnePhoto {
            position: absolute;
            width: 93%;
            bottom: 40px;
            left: 15px;
            z-index: 2;
      }

      .HeroPhotoOneBox {
            width: 100%;
            height: 85vh;
            overflow: hidden;
            position: relative;
            object-fit: cover;
            object-position: center;
      }

      .UpperHeroPart {
            height: 85vh;
      }

      .SliderChild1:nth-child(1) {
            width: 300px;
      }

      .SliderChild1 {
            width: 300px;
      }

      .SliderChild1:nth-child(2) {
            left: 320px;
      }

      .SliderChild1:nth-child(3) {
            left: 640px;
            top: 0px;
      }

      .AboutFirstChild {
            font-size: 22px !important;
            font-weight: 400 !important;
            line-height: 28px !important;
            letter-spacing: 0.08em !important;
            color: #FFFFFF !important;
            font-family: 'FlechaTestM-Regular' !important;
      }

      .Date {
            font-size: 14px !important;
            line-height: 12px !important;
            font-weight: 400 !important;
            color: #93654A !important;
            font-family: 'FlechaTestM-Regular' !important;
      }

      .ReadMoreBtnTwo {
            box-shadow: none !important;
            background: transparent !important;
            border: none !important;
            color: #FFFDF7 !important;
            font-family: 'FlechaTestM-Regular' !important;
            padding: 5px 0px !important;
            font-size: 16px !important;
            font-weight: 300 !important;
            line-height: 18px !important;
            display: flex !important;
      }

      .SliderChild1:nth-child(1) .DataAboutFirstChild {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0px;
            margin-top: 11px;
      }

      .NextAndPrevBtn {
            display: none;
      }

      .NextBtn2 {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 1px solid #FFFFFF1A;
            background: transparent;
      }

      .NextBtn2:hover {
            background-color: white;
      }

      .Media {
            background-color: #0A1623;
            padding-top: 40px;
            padding-bottom: 0px;
            height: 680px;
            margin-bottom: 40px;
      }

      .Initiatives {
            padding-bottom: 50px;
      }

      .SlideOne {
            padding-top: 10px;
            padding-bottom: 110px;
            gap: 25px;
            min-height: 580px;
      }

      .BtnContainer {
            bottom: 15%;
      }

      .ForMargin {
            width: 95%;
            height: 350px;
      }

      .SlideShow {
            position: relative;
            min-height: 570px;
      }

      .carousel {
            padding-bottom: 100px;
            min-height: 570px;
      }

      .NextAndPrevBtn2 {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 50px;
      }

      .DownArrow {
            height: 100px;
      }

      .InitiativesHeading {
            font-size: 40px;
            font-weight: 400;
            line-height: 45px;
            color: #000000;
            font-family: 'FlechaTestL-Medium';
      }

      .Heading {
            margin-bottom: 40px;
            gap: 5px;
      }

      .BlockOneHeading {
            font-size: 20px;
            font-weight: 400;
            line-height: 24px;
            color: #2A2A29;
            font-family: 'FlechaTestM-Regular';
            width: 60%;
      }

      .PrevBtnPhoto2 {
            transform: rotateY(180deg);
      }

      .ReadMoreBtnCanUse {
            font-size: 16px;
            font-weight: 400;
            line-height: 18px;
            padding: 0px;
            color: #0A1D35;
      }

      .BlockOne {
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            padding: 16px 0px;
            border-top: 1px solid #C3BEB64D;
            position: relative;
            gap: 10px;
      }

      .BlockOne::before {
            content: '';
            position: absolute;
            width: 105px;
            height: 78px;
            background-color: #000000;
            border-radius: 12px;
            transform: rotate(0deg);
            z-index: 1;
            opacity: 100%;
            transition: all 0.5s;
      }

      .BlockOne:nth-child(1)::before {
            top: 50%;
            left: unset;
            right: 0%;
            transform: translateY(-50%);
      }

      .BlockOne:nth-child(2)::before {
            top: 50%;
            left: unset;
            right: 0%;
            transform: translateY(-50%);
      }

      .BlockOne:nth-child(3)::before {
            top: 50%;
            left: unset;
            right: 0%;
            transform: translateY(-50%);
      }

      .BlockOne:nth-child(4)::before {
            top: 50%;
            left: unset;
            right: 0%;
            transform: translateY(-50%);
      }

      .BlockOne:nth-child(5)::before {
            top: 50%;
            left: unset;
            right: 0%;
            transform: translateY(-50%);
      }

      .BlockOne:nth-child(6)::before {
            top: 50%;
            left: unset;
            right: 0%;
            transform: translateY(-50%);
      }

      .BlockOne:nth-child(7)::before {
            top: 50%;
            left: unset;
            right: 0%;
            transform: translateY(-50%);
      }

      .BlockOne:nth-child(8)::before {
            top: 50%;
            left: unset;
            right: 0%;
            transform: translateY(-50%);
      }

      .InitiativesHeading {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: normal;
            gap: 10px;
      }

      .Gallery {
            padding-top: 30px;
            padding-bottom: 100px;
      }

      .ParaForSlideOne {
            font-size: 20px;
            font-weight: 400;
            line-height: 25px;
            width: 95%;
      }

      .GalleryPara {
            font-size: 40px;
            line-height: 45px;
            font-weight: 400;
      }

      .textpart {
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: -30px;
      }

      .Ellipse {
            top: 8%;
      }

      .footerText {
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;
      }

      .FooterPart {
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            gap: 40px;
            margin-bottom: 70px;
      }

      .ListOne {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 32px;
            width: 99%;
      }


      .Hussein {
            width: 30%;
      }

      .ListOfLink li {
            padding-right: 0px;
      }

      .ListOfLink {
            gap: 12px;
            width: 60%;
      }

      .BoxOfList {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            gap: 40px;
      }

      .UpperListOne {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 32px;
      }

      .OnlyForLgDivice {
            display: flex;
      }

      .ForResInLg {
            width: 100%;
      }

      .HideInLg {
            display: none;
      }

      .EllipseTwo {
            top: 1.49%;
      }

      .BIOGRAPHY {
            padding-top: 30px;
            padding-bottom: 70px;
      }

      .LowerGallery {
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: auto;
      }

      .UpeerLayerOfImgOne {
            width: 300px;
            height: 80px;
            /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; */
      }

      .UpeerLayerOfImgOne:hover {
            width: 300px;
            height: 400px;
      }

      .ImgOne {
            width: 100%;
            height: 300px;
            margin-top: -15px;
            margin-bottom: -25px;
            transform: translateY(-50%);
      }

      .ImgeOfSlider {
            width: 100%;
            height: 100%;
      }

      .ImgOne::before {
            height: 110%;
            width: 30px;
            top: 0%;
            left: -28px;
            transform: skewX(9deg);
      }

      .UpeerLayerOfImgOne:hover .ImgOne::before {
            transform: skewX(2deg);
            left: -19px;
      }

      .ImgOne::after {
            height: 110%;
            width: 30px;
            left: unset;
            top: 0%;
            right: -12px;
            transform: skewX(9deg);
      }

      .UpeerLayerOfImgOne:hover .ImgOne::after {
            transform: skewX(2deg);
            right: -22px;
      }

      .UpeerLayerOfImgOne:hover .ImgOne {
            height: 300px;
            transform: translateY(0%);
      }

      .AboutPrince {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            gap: 24px;
            width: 400px;
            transition: all 0.5s;
            display: none;
            background: #ffffff;
            position: relative;
      }

      .UpeerLayerOfImgOne:hover .AboutPrince {
            display: flex;
            width: 100%;
      }

      .PrinceHeading {
            font-size: 20px;
            line-height: 23px;
      }

      .ExploreBtn {
            font-size: 14px;
            /* padding: 0px; */
      }

      .ShowInXL {
            display: none;
      }

      .ShowInLg {
            display: flex;
      }

      .CopyRight {
            text-align: center;
      }

      .EllipseTwo::before {
            top: 17px;
            left: -39.3px;
      }

      .EllipseTwo::after {
            top: 17px;
            left: 138px;
      }
}

@media only screen and (max-width: 768px) {
      .UpperHeroPart {
            height: 85vh;
      }

      .HeroPhotoOneBox {
            height: 85vh;
      }

      .EllipseTwo::after {
            top: 17.5px;
            left: 138px;
      }

      .EllipseTwo::before {
            top: 17.5px;
            left: -39.3px;
      }

      .footerText {
            width: 100%;
      }

      .Ellipse::before,
      .Ellipse::after {
            top: 12px;
      }
}

@media only screen and (max-width: 576px) {
      .UpperHeroPart {
            height: 70vh;
      }

      .HeroPhotoOneBox {
            height: 70vh;
      }

      .EllipseTwo::after {
            top: 16.5px;
            left: 138px;
      }

      .EllipseTwo::before {
            top: 16.5px;
            left: -39.3px;
      }

      .Ellipse::before,
      .Ellipse::after {
            top: 11px;
      }

      .LogoBox {
            width: 250px;
      }

      .LogoHeading,
      .LogoName {
            text-align: center;
      }
}