@font-face {
  font-family: 'OpenSansBold';
  src: url('../fonts/OpenSans-Bold.ttf') format('ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSansItalic';
  src: url('../fonts/OpenSans-Italic.ttf') format('ttf');
  font-weight: normal;
  font-style: italic;
}

.navbar .container-fluid .navbar-brand {
  font-size: xxx-large;

}

.navbar .container-fluid .collapse {
  font-size: larger;
  padding: 1rem;
}

.divlogo a {
  margin: 0.5rem;
}

@media (direction: rtl) {
  .my-element {
    /* خصائص العنصر عند اتجاه النص من اليمين إلى اليسار */
    margin-right: 10px;
    float: right;
  }
}

.carousel-caption {
  position: absolute;
  top: 44%;
  left: 20%;
  color: #0d0c0c;
  text-align: start;
  width: 44rem;
}

@media (max-width: 1015px) {
  .carousel-caption {
    width: 22rem;
  }
}

.rtl-style {
  transform: translate(-66%, -50%);
}

.ltr-style {
  transform: translate(-20%, -50%);
}

.carousel-inner {
  max-height: 700px;
  /* Adjust the height as needed */
  overflow: hidden;
}

#contactForm {
  margin-top: 5%;
  background-color: #fff;
}

.card-img-top-bottom {
  display: flex;
  flex-direction: column;
  height: 20%;
}

.card-img-top-bottom img {
  flex: 1;
  object-fit: cover;
  width: 100%;
  height: 300%;
}

.container {
  margin-top: 1%;
  background-color: #fff;
}

.container1 {
  margin-top: 1%;
  background-color: inherit;
}

body {
  background-color: #dedede;
  /* font-family: ui-sans-serif; */
  display: grid;
  font-family: Open sans-serif;
  place-items: center;
  height: 100vh;
  direction: rtl;

}

.coll-1 {
  margin: 1rem auto;
}

.form-1 {
  margin-top: -4rem;
  margin-bottom: 4rem;
  background-color: #dedede;
}

footer {
  background-color: #BDBDBD;
  width: 100%;
  padding: 12px;
}

footer a {
  color: #333;
  text-decoration: none;
}

.bg-light {
  background-color: #dedede !important;
  box-shadow: 0 .5rem 1rem rgb(0 0 0 / 40%) !important;
}

.fab.fa-whatsapp {
  color: green;
}

.fab.fa-facebook {
  color: blue;
}

.fab.fa-twitter {
  color: #1d9bf0;
}

.fab.fa-instagram {
  color: #FF0000;
}

/* .video-container {
  position: relative;
  لتحديد موضع الفيديو بالنسبة للصورة
} */

#myVideo1,
#myVideo2,
#myVideo3,
#myVideo4,
#myVideo5,
#myVideo6,
#myVideo7,
#myVideo8,
#myVideo9,
#myVideo10,
#myVideo11,
#myVideo12,
#myVideo13,
#myVideo14,
#myVideo15 {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  height: 180px;
  width: 318px;

}

:hover#thumbnail1,
:hover#thumbnail2,
:hover#thumbnail3 {
  cursor: pointer;
}

@media (min-width: 1200px) {
  .h1head {
    font-weight: bolder;
    font-family: Open sans-serif;
    font-size: 100px;
    /* margin-left: 14rem; */
  }

  .h2head {
    font-size: xx-large;
    text-align: start;
    /* margin-left: 14rem; */
  }

  .imgserv {
    margin-top: 13rem;
  }
}

.carousel-indicators [data-bs-target] {
  background-color: black;
}

.carouse2-indicators [data-bs-target] {
  background-color: black;
}

.h3head {
  font-size: xxx-large;
  font-weight: bolder;
}

.h4head {
  font-size: medium;
}

.h5head {
  font-weight: bold;
}

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

.wrapper {
  /* max-width: 1200px; */
  width: 90%;
  position: relative;
  /* margin-left: 2rem; */
}

.wrapper2 {
  /* max-width: 1200px; */
  width: 90%;
  position: relative;
  /* margin-left: 2rem; */
}

.wrapper i {
  height: 50px;
  width: 50px;
  background: #dedede;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  border: 0px !important;
  position: absolute;
  top: 50%;
  font-size: 1.25 rem;
  transform: translateY(-50%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);

}

.wrapper2 i {
  height: 50px;
  width: 50px;
  background: #dedede;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  border: 0px !important;
  position: absolute;
  top: 50%;
  font-size: 1.25 rem;
  transform: translateY(-50%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);

}

.wrapper i:first-child {
  left: -22px;
  z-index: 5;
  cursor: pointer;
}

.wrapper i:last-child {
  right: -22px;
  cursor: pointer;
}

.wrapper .carousel1 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: 0;
}

.wrapper .carousel2 {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: 0;
}

.carousel1::-webkit-scrollbar {
  display: none;
}

.carousel1 :where(.card1, .img) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel1.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.carousel1.no-transition {
  scroll-behavior: auto;
}

.carousel1.dragging .card1 {
  cursor: grab;
  user-select: none;
}

.carousel1 .card1 {
  scroll-snap-align: start;
  height: 340px;
  list-style: none;
  background: #dedede;
  border-radius: 8px;
  display: flex;
  border: 0px;
  width: 98%;
  padding-bottom: 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.card1 .img {
  background: green;
  width: 145px;
  height: 145px;
  border-radius: 50%;

}

.card1 .img img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
}

.card1 h2 {
  font-weight: 500;
  font-size: large;
}

.card1 p {
  color: #6a6d78;
  font-size: small;

}

@media screen and (max-width: 1200px) {
  .wrapper .carousel1 {
    grid-auto-columns: calc((100% / 2) - 9px);

  }
  .wrapper .carousel2 {
    grid-auto-columns: calc((100% / 2) - 9px);

  }
}

@media screen and (max-width: 1000px) {
  .wrapper .carousel2 {
    grid-auto-columns: calc((100% / 2) );

  }

}

@media screen and (max-width: 800px) {
  .wrapper .carousel1 {
    grid-auto-columns: 100%;

  }
  .wrapper .carousel2 {
    grid-auto-columns: 100%;

  }
}

/* @media screen and (min-width: 900px) {
  .wrapper  {
    margin-left: 8rem;

  }
} */
.carousel2::-webkit-scrollbar {
  display: none;
}

.carousel2 :where(.card2, .img) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel2.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.carousel2.no-transition {
  scroll-behavior: auto;
}

.carousel2.dragging .card2 {
  cursor: grab;
  user-select: none;
}

.carousel2 .card2 {
  scroll-snap-align: start;
  height: 340px;
  list-style: none;
  border-radius: 8px;
  display: flex;
  border: 0px;
  width: 98%;
  padding-bottom: 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.carousel2 .card2 .card-body {
  height: 7rem;

}

.card2 .img {
  background: green;
  width: 145px;
  height: 145px;
  border-radius: 50%;

}

.card2 .img img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
}

.card2 h2 {
  font-weight: 500;
  font-size: large;
}

.card2 p {
  color: #6a6d78;
  font-size: small;

}

@media screen and (max-width: 1000px) {
  .navbar {
    width: 100%;
    padding-right: var(--bs-gutter-x, 1.75rem);
    padding-left: var(--bs-gutter-x, 1.75rem);
    /* margin-right: auto; */
    /* margin-left: auto; */
  }
}



@media screen and (max-width: 600px) {
  .wrapper .carousel2 {
    grid-auto-columns: 100%;

  }
}


.navbar {
  margin-right: 0px;
  margin-left: 0;
}



.backimg {
  background-image: url("../image/44.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.backimg .container .row .card {
  background-color: rgba(255, 255, 255, 0.7)
}

.backimg .container .h3head {
  background-color: rgba(255, 255, 255, 0.7);
  width: fit-content;
}

.fa-star {
  color: gold;
}

@media screen and (max-width: 1000px) {
  .h2head {
    margin-left: 10rem;
  }

  .hide900 {
    display: none;
  }

  footer .row .col-md-3 {
    width: 33.33% !important;
  }
}

@media screen and (max-width: 600px) {
  .hide600 {
    display: none;
  }

  footer .row .col-md-3 {
    width: 50% !important;
  }

  footer {
    width: 109%;
  }

  .navbar {
    margin-right: 0px;
    margin-left: 0;
  }

  body {
    width: 95%;
  }

}

@media screen and (max-width: 200px) {
  footer .row .col-md-3 {
    width: 100% !important;
  }

  .navbar {
    width: 101%;
    margin-right: -2rem;
  }
}



.success{
  background-color: green;
}
.error{
  background-color: red;
}