:root {
  --light-color: #ffffac;
  --purple-color: #7135a5;
  --primary: #7136a6;
  --bs-primary-bg-subtle: #e9dcf4;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(113, 54, 166, 0.25);
  --bs-primary-text-emphasis: #052c65;
}
* {
  text-align: right;
  direction: rtl;
  font-family: "Cairo", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.btn-primary {
  color: #fff;
  background-color:green;
  border-color: var(--purple-color);
}
.text-primary {
  color: red !important;
}
a,
a:hover {
  text-decoration: none;
}
.card-img-top {
  width: 15%;
}
.accordion-button {
  background-color:blue;
  color: #fff;
}
.accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button:not(.collapsed)::after {
  transform: var(--bs-accordion-btn-icon-transform);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.btn-primary:hover {
  color: #fff;
  background-color: var(--purple-color);
  border-color: var(--purple-color);
}
body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
}
.product-img-container {
  width: 35%;
  height: 100%;
  display: flex;
  align-items: center;
}
.product-img {
  max-height: 75%;
  max-width: 100%;
}
.sec-section {
  position: relative;
  margin: 0;
}
.text {
  color: var(--light-color);
  width: 60%;
  padding-right: 5rem;
}
.text p {
  font-size: 22px;
}
.star {
  font-size: 15px;
}
.wave {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
  width: 100%;
  fill: black;
}
@media (max-width: 991px) {
  .text h2 {
    font-size: 1.5rem !important;
  }
  .text p {
    font-size: 18px;
  }
  .card-img-top {
    width: 50%;
  }
}
@media (max-width: 768px) {
  .text h2 {
    font-size: 1.5rem !important;
  }
  .text p {
    font-size: 18px;
  }
  .hero {
    padding-right: 0.5rem;
  }
}
@media (max-width: 425px) {
  .text {
    padding-right: 2rem;
  }
  .text h2 {
    font-size: 1.5rem !important;
  }
  .text p {
    width: 100%;
    font-size: 16px;
  }
  .sec-section .text p {
    width: 95%;
    font-size: 12px;
    margin-bottom: 0.1rem;
  }
  .buy-btn {
    width: 100%;
  }
  .card-body .card-title {
    font-size: 16px;
  }
  .card-body .card-text {
    font-size: 12px;
  }
  .card-img-top {
    width: 35% !important;
  }
}
.buy-btn-container {
  display: flex;
  background-color: rgb(255, 255, 255);
  color: #000;
  position: relative;
  padding-block: 10px;
}
.buy-btn-overllay {
  padding: 10px 20px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}
.buy-btn {
  background-color:RED;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  max-width: 100%;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}
.buy-btn-container button.bounce {
  -webkit-animation: bounce 0.8s infinite;
  animation: bounce 0.8s infinite;
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
.order-form-container h2 {
  text-align: center;
  color: black;
  margin: 1rem 0;
}
.form-label {
  color: red;
}
.cards-container .card {
  flex-direction: row;
  border: 1px solid var(--purple-color);
  width: 47%;
}
.cards-container .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 15px;
}
.card svg {
  fill: green;
}
.owl-theme .owl-dots .owl-dot span {
  width: 18px;
  height: 18px;
}
.circle {
  border-radius: 50%;
}
.item .card {
  border-color: red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item .card .card-body {
  text-align: center;
  padding-bottom: 20px;
}
#seens {
  background-color: green;
  color: white;
  padding: 0px 12px;
  border-radius: 9px;
  margin: 0 1px;
  font-size: 14px;
  font-weight: 700;
}
.form  {
  font-size: 50px;
  font-weight: 700;
}
.form-control,
form button {
  font-size: 1.5rem !important;
}
