@font-face {
  src: url("../css/Almarai-Regular.ttf");
  font-family: "mainFont";
}
body {
  font-family: "mainFont";
  text-align: right;
}
nav a.btn,
header .carousel-caption a {
  font-size: 14px;
  padding: 10px 20px;
}
.btn-info{
  background-color: #16a5bb;
}
header .carousel-item {
  height: 600px;
}
header .carousel-item::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}
header .carousel-caption {
  z-index: 2;
}
.contact form .btn-close {
  right: auto;
}
.contact form .form-floating>.form-control:focus~label,
.contact form .form-floating>.form-control:not(:placeholder-shown)~label {
  transform: scale(0.85) translateY(-0.5rem) translateX(6rem);
}
.whatsapp {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  border-radius: 50%;
  text-decoration: none;
  background-color: rgb(77, 194, 71);
  box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;
  transition: all 0.5s ease 0s;
  z-index: 9999;
}
.whatsapp:hover {
  box-shadow: rgb(0 0 0 / 70%) 2px 2px 11px;
}
.phone {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-decoration: none;
  background-color: #00aff0;
  box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;
  transition: all 0.5s ease 0s;
  padding: 10px;
  z-index: 999;
}
.phone:hover {
  box-shadow: rgb(0 0 0 / 70%) 2px 2px 11px;
}
@media (max-width: 767px) {
  .contact form .form-floating>.form-control:focus~label,
  .contact form .form-floating>.form-control:not(:placeholder-shown)~label {
    transform: scale(0.85) translateY(-0.5rem) translateX(3rem);
  }
  header h2{font-size: 20px;}
  header p{font-size: 18px !important;}
}