.banner .swiper-container .swiper-button-next,
.banner .swiper-container .swiper-button-prev {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: #fff;
   color: #90278e;

}

.banner {
margin-bottom: 20px;
height: 600px;
background: none!important;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
   content: "next";
   display: none;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
   content: "prev";
   display: none;
}

.right,
.left {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: #fff;
   color: #90278e;
}



p {
   margin-bottom: 0px;
   font-size: 14px;
}

p-15

h4 {
   color: #78226a;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
   content: "next";
   display: none;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
   content: "prev";
   display: none;
}




.image-grid {
   padding: 12px;
}

.image-row {
   display: flex;
}

.image-row .image {
   margin: 12px;
   height: 240px;
}


.width-price{
           
   border-radius: 4%;
   height: 222px;
   width: 100%;
}

@media screen and (max-width: 400px) {
   .image-row {
       flex-direction: column;
   }

   .image-row .image {
       flex-basis: auto;
   }

.p10 {
padding:10px;
}
.swiper-button-next, .swiper-button-prev{
top: 15%;
}

.banner {
margin-bottom: 0;
background: none!important;
}

.width-price{
   width: 70%;
}

.bg-p {
 background-color:#7f226a;
 color: #fff;
}

}

/*For table*/
table {
   border-collapse: collapse;
   width: 100%;
}

th,
td {
   padding: 8px;
   border: 1px solid #dddddd;
}



h2 {
   color: #8a2169;
}

.box {
   padding: 12px;
   margin: 10px;
   font-size: 17px;
   font-weight: bold;
   background-image: linear-gradient(to left top, #81226a, #75226a, #69236a, #5d2369, #502367);
   color: white;
}
.p10 {
padding: 0;
}
.p10-21 {
padding: 10px;
}

@media (max-width: 480px) {
   .content {
       order: 1;
   }

   .sidebar {
       order: 2;
   }

   .videoContainer {
       height: 197px;
       flex-shrink: 0;
   }
.nav-link{
padding: 0.5rem 0.3rem;
}

.p10 {
padding: 10px;
}

.p10-21 {
padding: 21px;
}

.p10-21-m {
padding: 21px;
}

.swiper-button-next, .swiper-button-prev{
top: 15%;
}
.banner {
margin-bottom: 0;
height: auto;
background: none!important;
}
}

@media (min-width: 767px) and (max-width: 1024px) {
.p10-21 {
padding: 0px !important;
}
.swiper-button-next, .swiper-button-prev{
top: 18%;
}
.banner {
margin-bottom: 0;
height: auto;
background: none!important;
}

}

.sgLi {
   min-width: 24%;
   /*margin: 2% 0.35%;*/
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.sgLi:hover {
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.boxs {
   padding: 1% 2%;
   background: #ffffffd6;
   box-sizing: border-box;
   border-radius: 1%;
}

.bgfixed {
   background-image: url("img/314015915.jpg");
   background-repeat: repeat-x;
   background-attachment: fixed;
   background-size: cover;
}

.form-group {
   text-align: left;
   margin-bottom: 25px;
}

.btn {
   font-weight: 700;
   font-size: 13px;
}

.centerimg {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 90%;
}

@media (max-width: 767px) {
.testimoni-wrapper {
   width: 100%;
}
}


.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

color: #fff;
background-color: #77226a;

}

.nav-link{

color:#7b226a;
font-weight: 500;

}

.nav-link:focus, .nav-link:hover {
color: #7b226a;
}

.btn-green-gradient {
background: #8BC53F;
transition: all 0.5s ease-in-out;
color: #fff;
}

.btn-green-gradient:hover {
background: #97FB14;
background-image: linear-gradient(to right, #97FB14 0%, #88B720 100%);
color: #fff;
}


.border-price {
padding: 30px;
}

.mini-link-green {
color: #7a226a;
text-decoration: none;
margin-top: 5px;
border-color: #73226a;

}

.mini-link-green:hover {
background: #8BC53F;
background-image: linear-gradient(to right top, #8bc53f, #92cf38, #99d830, #a0e225, #a8eb12);
background-position: right center; /* change the direction of the change here */
color: #fff;
text-decoration: none;
border-color: #a8eb12;
}

.mini-link-red {
color: #ffffff;
text-decoration: none;
background-color: #b31217;


}




.btn-label {
top: 50%;
color: rgb(255, 255, 255);
right: 51px;
margin: 0px;
padding: 5px 15px;
z-index: 1;
position: absolute;
font-size: 12px;
transform: translateY(-50%);
background: rgb(78, 76, 76);
box-shadow: none;
text-align: end;
transition: all 0.2s ease-out 0s;
font-family: unset;
line-height: initial;
white-space: nowrap;
border-radius: 3px;
}

.btn-label-salam {
top: 50%;
color: rgb(255, 255, 255);
right: 55px;
margin: 0px;
padding: 5px 15px;
z-index: 1;
position: absolute;
font-size: 12px;
transform: translateY(-50%);
background: rgb(78, 76, 76);
box-shadow: none;
text-align: end;
transition: all 0.2s ease-out 0s;
font-family: unset;
line-height: initial;
white-space: nowrap;
border-radius: 3px;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
height: 53px;
width: 53px;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;

}

a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #f11702;

}


.first_button:hover {
animation: shake 1.00s cubic-bezier(.36, .07, .19, .97) both infinite;
transform: translate3d(0, 0, 0);
/*backface-visibility: hidden;*/
perspective: 1000px;
}

@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}


.radius {
border-radius: 10px;

}

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}


@media (min-width: 1200px) {
.swiper-button-next, .swiper-button-prev{
top: 40%;
}
}

.btn-outline-rayhar:hover{
color: #ffffff;
}


.expand:hover{
transform: scale(1.1);
}


.link{
padding: 15px 30px;
margin: 10px;
display: inline-block;
text-decoration: none;
}

.link:hover{
text-decoration: none;
color: #000;
}

/*===================*/
/* WOOBLE HORIZONTAL
/*===================*/

@-webkit-keyframes wobble-horizontal-on-hover {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes wobble-horizontal-on-hover {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.wobble-horizontal-on-hover {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-horizontal-on-hover:hover, .wobble-horizontal-on-hover:focus, .wobble-horizontal-on-hover:active {
-webkit-animation-name: wobble-horizontal-on-hover;
animation-name: wobble-horizontal-on-hover;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}



/*for chat
 Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 12px 13px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 50px;
right: 40px;
width: 50px;
height: 50px;
float: right;
border-radius: 50%;
}

/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom:63px;
right: 15px;
z-index: 9;
}

/* Add styles to the form container */
.form-container {
max-width: 330px;
background-color: #efefef;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
background-color: #04AA6D;
color: white;
padding: 9px 8px;
border: none;
cursor: pointer;
width: 52px;
height: 52px;
float: right;
border-radius: 50%;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}


.testimoni-wrapper .testimoni-swiper-wrap .testimoni-swiper .swiper-wrapper .swiper-slide .card {
border-radius: 12px;
}

.img-rad-12{
border-radius: 12px;
}


.btn-rayhar-orange{
background: #ed9100;
}

.btn-rayhar-orange:hover {
color: #fff;
background: #FFC366;
background-image: linear-gradient(to right, #FFC366 0%, #ed9100 100%);
}

.btn-rayhar-darkgreen{
background: #08a34f;
}

.btn-rayhar-darkgreen:hover {
color: #fff;
background: #3FEB8E;
background-image: linear-gradient(to right, #3FEB8E 0%, #08a34f 100%);
}

.btn-rayhar-yellow{
   background: #fcdc02;
   }
   
   .btn-rayhar-yellow:hover {
   color: #fff;
   background: #FFF08C;
   background-image: linear-gradient(to right, #FFF08C 0%, #fcdc02 100%);
   }

   .btn-rayhar-blue{
      background: #317cbe;
      text-transform: uppercase;
      }
      
      .btn-rayhar-blue:hover {
      color: #fff;
      background: #59B1FF;
      background-image: linear-gradient(to right, #59B1FF 0%, #317cbe 100%);
      }