@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&family=Noto+Naskh+Arabic&display=swap');

body {
  font-family: 'Noto Naskh Arabic', serif;
  text-align: right;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', sans-serif;
}





.bg-light {
  padding: 12px 0px;
  background-color: transparent !important;
  position: relative;
  z-index: 99;
}

.bg-light img {
    width: 70px;
}

.w-100 {
    width: 100%!important;
    height: 700px;
}


.bg-light span {
  background: #9b7aff;
  display: block;
  font-size: 1px;
  width: 15%;
  display: table;
  margin: auto;
  transition: all 1s;
}


.bg-light .nav-item {
  color: #000;
  font-weight: bold;
}

.navbar-toggler img {
    width: 45px;
    margin-top: 0px;
    height: 35px;
}

.navbar-toggler {
    padding: 0px;
}

.bg-light .nav-item:hover span {
  width: 100%;
  font-family: 'Cairo', sans-serif;
}




#carouselExampleDark img {
  height: 700px;
}

#carouselExampleDark h5 {
  font-size: 28px;
  font-weight: bold;
}

.carousel h5, .carousel p  {
    display: inline-block;
    background: #9b7aff;
    padding: 12px 26px;
    color: #fff;
}







/******************************* About *****************************/
.about {
  padding: 100px 0px 180px 0px;
}

.about h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 700;
}


.about .content {
  margin-right: 50px;
}



/******************************* About *****************************/










/******************************* Video *****************************/
.video {
  background: url(https://www.gavias-theme.com/wp/kitecx/wp-content/uploads/2021/04/bg-3.jpg);
  padding: 100px 0px 144px 0px;
  text-align: center;
  color: #fff;
  margin-bottom: 100px;
}

.video i {
  font-size: 84px;
  margin: 55px;
}

.video  h3 {
  font-family: 'Cairo', sans-serif;
  font-size: 32px;
  font-weight: 800;
}

/******************************* Video *****************************/







/******************************* searvice *****************************/

.searvice {
  padding: 50px 0px 170px 0px;
}

.searvice span {
  text-align: center;
  display: block;

}

.searvice h2 {
  font-weight: 600;
  margin-bottom: 39px;
  text-align: center;
}

.searvice img {
  width: 100px;
  margin: 42px 15px;
}


.searvice .box {
  padding: 35px 45px;
  background: #ededed3d;
  margin: 20px;
  transition: all 0.5s;
  cursor: pointer;
}

.searvice .box p {
  margin-top: 0;
  margin-bottom: 1rem;
  margin-top: 25px;
  color: #787676;
}

.searvice .box:hover {
  background: #DCD4BF;
  border: 1px solid #ccc;
}



/******************************* searvice *****************************/





/******************************* Gallery *****************************/

.gallery {
    padding: 100px 0px;
}

.gallery span {
  text-align: center;
  display: block;

}

.gallery h2 {
  font-weight: 600;
  margin-bottom: 39px;
  text-align: center;
}


.gallery .box {
  height: 620px;
  background-size: cover;
  background-position: center;
  margin: 20px;
  padding: 20px;
  transition: all 1s;
}

.gallery a img {
    height: 250px;
    transition: all 1s;
}

.gallery a {
    overflay: hidden;
    margin-bottom: 30px;
}
.gallery a img:hover {
    height: 250px;
    transform: scale(1.3);
}

.gallery .box .content {
  background: #00000070;
  width: 100%;
  height: 100%;
  padding: 18px;
  color: #fff;
  position: relative;
  display: none;
  transition: all 1s;
}

.gallery .box:hover .content {
  display: block;
  cursor: pointer;
  transition: all 1s;

}

.gallery .box .content div {
  position: absolute;
  bottom: 0px;
}
/******************************* Gallery *****************************/






/******************************* Contact *****************************/
.contact {
  padding: 100px 0px;
}


.contact h3 {
  margin-bottom: 23px;
  font-weight: bold;
}

.contact .info {
  /*background: url(../img/bk.png); */
  padding: 66px 80px;
  background-position: center;
  background-size: contain;
}
.contact .info a {
  display: block;
  color: black;
  margin-bottom: 20px;
}

.contact input, .contact textarea {
  display: block;
  padding: 10px;
  width: 100%;
  border-radius: 0px;
  text-align: right;
  border-style: none;
  border-bottom: 1px solid;
  margin-bottom: 42px;
}

.contact button {
  background: #9b7aff;
  color: #fff;
  padding: 10px 35px;
  width: auto;
  border-style: none;
  color: #fff;
  font-weight: bold;
}

.contact iframe {
  box-shadow: 0px 0px 16px 0px #0000004d;
  border: 20px solid #ffffff !important;
  margin-top: 60px;
}




.contact .info .media a {
    display: inline-block; 
    color: black;
    padding: 10px;
    font-size: 19px;
}

/******************************* Contact *****************************/




.footer {
  text-align: center;
  padding: 30px;
  border-top: 1px solid #ccc;
}



























@media (max-width: 575.98px) { 


#carouselExampleDark img { height: 371px; }
.d-none { display: block!important; }
.bg-light span { width: 5%; margin: 0; }

.about  { padding: 50px 0px 50px 0px; text-align: center; }
.about h2 { font-size: 22px; }
.about img { margin-bottom: 60px; }
.about .content { margin-right: 0px; }

.video { padding: 40px 10px 70px 10px; }
.video h3 { font-size: 18px; font-weight: 500; line-height: 28px; }
.video i { font-size: 50px;  margin: 25px; }
.video { margin-bottom: 10px; }

.contact .info { padding: 40px 10px; }
.contact iframe { margin-top: 0px; }
.contact .info a { font-size: 14px; }

.gallery .box {  height: 420px; }
.w-100 { height: 270px; }
.carousel h5, .carousel p {
    display: inline-block;
    background: #9b7aff75;
    padding: 6px 4px;
    color: #fff;
    font-size: 11px;
}
}

@media (max-width: 767.98px) {

#carouselExampleDark img { height: 371px; }
.d-none { display: block!important; }
.bg-light span { width: 5%; margin: 0; }

.about  { padding: 50px 0px 50px 0px; text-align: center; }
.about h2 { font-size: 22px; }
.about img { margin-bottom: 60px; }
.about .content { margin-right: 0px; }

.video { padding: 40px 10px 70px 10px; }
.video h3 { font-size: 18px; font-weight: 500; line-height: 28px; }
.video i { font-size: 50px;  margin: 25px; }
.video { margin-bottom: 10px; }

.contact .info { padding: 40px 10px; }
.contact iframe { margin-top: 0px; }
.contact .info a { font-size: 14px; }

.gallery .box {  height: 420px; padding: 5px; }
.w-100 { height: 250px; }
.carousel h5, .carousel p {
    display: inline-block;
    background: #9b7aff75;
    padding: 6px 4px;
    color: #fff;
    font-size: 11px;
}
}

@media (max-width: 991.98px) {

#carouselExampleDark img { height: 371px; }
.d-none { display: block!important; }
.bg-light span { width: 5%; margin: 0; }

.about  { padding: 50px 0px 50px 0px; text-align: center; }
.about h2 { font-size: 22px; }
.about img { margin-bottom: 60px; }
.about .content { margin-right: 0px; }

.video { padding: 40px 10px 70px 10px; }
.video h3 { font-size: 18px; font-weight: 500; line-height: 28px; }
.video i { font-size: 50px;  margin: 25px; }
.video { margin-bottom: 10px; }

.contact .info { padding: 40px 10px; }
.contact iframe { margin-top: 0px; }
.contact .info a { font-size: 14px; }

.gallery .box {  height: 420px; padding: 5px; }
.searvice .box { padding: 15px 20px; margin: 10px; }

}

@media (max-width: 1199.98px) {
  #carouselExampleDark img { height: 530px; }
  .about { padding: 100px 0px 100px 0px; }
  .searvice .box { padding: 22px 25px; margin: 0px; }
}

@media (max-width: 1399.98px) { }