@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Poppins:wght@300;400;500;600;700&family=Saira:ital,wdth,wght@0,104.2,100..900;1,104.2,100..900&display=swap");
* {
  font-family: "Cairo", sans-serif;
}
.navbar {
  background-color: #017dbf !important;
}
.body{
  overflow: hidden;
}
.navbar-nav .nav-link {
  color: white !important;
}
.navbar-nav .nav-link:hover {
  color: #f8f9fa !important; /* لون أفتح عند التحويل */
}
.dropdown-menu {
  background-color: black !important; /* لون الخلفية */
}
.dropdown-item {
  color: white !important;
}
.dropdown-item:hover {
  background-color: #333 !important; /* لون عند التمرير */
}
.carousel-item {
  height: 100vh;
}
.carousel-item img {
  width: 100%;
  height: 107vh;
}

.myicon {
  color: #017dbf !important;
  font-size: 30px;
}
.carousel-caption {
  background-color: rgba(71, 150, 206, 0.6);
  border-radius: 20px;
  bottom: 50px;
}
.carousel-caption:hover {
  background-color: rgba(104, 78, 196, 0.6);
  transition: ease 0.5s;
}
.carousel-caption d-none d-md-block {
  background-color: brown;
  border-radius: 20px;
}
.btn-dark:hover {
  background-color: crimson;
  border-radius: 20px;
  transition: 1s;
}
.carousel-indicators button {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background-color: #017dbf !important;
}
.carousel-caption h2 {
  font-size: 45px;
  margin-bottom: 25px;
}
.carousel-caption p {
  font-size: 20px;
}
.carousel-caption {
  padding: 25px !important;
}
.card img {
  height: 200px;
  width: 206px;
}
.card img:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
.offcanvas {
  width: 100% !important;
}
.offcanv-header {
  color: tomato;
}
.offcanvas img:hover {
  transform: skew(-5deg);
  transition: ease all 1s;
}

.text-header {
  border-bottom: crimson solid 4px;
  margin-top: 30px;
}
.btn-primary {
  background-color: #017dbf;
}
.btn-primary:hover {
  background-color: crimson;
  border-radius: 20px;
  transition: 1s ease all;
}
.bleucimon {
  color: #017dbf;
}
.bleucimon:hover {
  color: crimson;
  transition: all ease 0.5s;
  cursor: pointer;
}
.contact img{
  background-size:cover ;
}
.inputcontact{
  border-radius:0px !important ;
  border-start-end-radius: 0;
}
.contact p{
  background-color: rgba(71, 150, 206, 0.6);
}
.bestselling img:hover{
  transform: scale(1.1);
  transition: transform 0.3s ease;
}