/* plan */

 /*
 * Developer: Alireza Eskandarpour Shoferi
 * Designer: Wouter de Bres (dribbble.com/wdeb)
 *
 * Distributed under the terms of the MIT license
 * https://opensource.org/licenses/MIT
 */
 .MuiPaper-elevation  .MuiPaper-elevation0  {
  z-index: 9995 !important;
 }
 .wrapper {

   font-weight: 400;
   color: #9f9f9f;
   font-size: 15px;
   justify-content: space-between;

 }

.wave-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.wave {
  width: 4px;
  height: 20px;
  background: var(--primary-color2);
  animation: wave-animation 1s infinite;
}
.wave:nth-child(2) {
  animation-delay: 0.2s;
}
.wave:nth-child(3) {
  animation-delay: 0.4s;
}
.wave:nth-child(4) {
  animation-delay: 0.6s;
}
.wave:nth-child(5) {
  animation-delay: 0.8s;
}
.wave:nth-child(6) {
  animation-delay: 1s;
}
.wave:nth-child(7) {
  animation-delay: 1.2s;
}
.wave:nth-child(8) {
  animation-delay: 1.4s;
}
 .offer {
   font-size: 18px;
   font-weight: bold;
   color: #422AFB;
   text-shadow: 0 0 1px #424242;
   margin-top: 10px;
 }

 .wrapper li {
   padding: 0;
   list-style-type: none;
   margin-left: 5px;
   margin-right: 3px;
   font-size: 16px;
   text-align: left;
 }

 .plancontainer {
   display: flex;
   flex-direction: row;
   justify-content: center;
   margin-bottom: 60px;
 }

 .package {
   box-sizing: border-box;
   width: 28%;
   border: 3px solid #ffe57f;
   border-radius: 7px;
   display: inline-block;
   padding: 24px;
   text-align: center;
   float: left;
   transition: margin-top .5s linear;
   position: relative;
   margin-right: 11px;


   &:hover {
     background-color: #fff7d9;
   }

 }

 .trial {
   font-size: .9rem;
   font-weight: 600;
   padding: 2px 21px 2px 21px;
   color: #422AFB;
   border: 1px solid #e4e4e4;
   display: inline-block;
   border-radius: 15px;
   background-color: white;
   position: relative;
   bottom: -20px;
 }

 .name {
   color: #565656;
   font-weight: 500;
   font-size: 2rem;
   margin-top: -5px;
   text-shadow: 0 0 2px #422AFB;
 }

 .price {
   margin-top: 7px;
   font-weight: bold;


 }

 hr {
   background-color: #dedede;
   border: none;
   height: 1px;
 }

 .ordernowbtn {
   border-radius: 30px;
   border: 1px solid #565656;
   color: #422AFB;
   text-align: center;
   height: 42px;
   width: calc(100% - 50px);
   min-width: 180px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   font-weight: bold;
   position: absolute;
   bottom: 15px;
   cursor: pointer;


 }

 /* .ordernowbtn :hover{
  box-shadow: 5px 10px #888888;
} */

 ul {
   list-style: none;
   padding: 0;
   
   margin-top: 29px;
   margin-bottom: 60px;
   max-height: 400px;
   overflow-y: scroll;
 }

  

 li {
   margin-bottom: 15px;

   &:before {
     @extend .checkIcon;
     font-size: 1.3rem;
     color: #422AFB;
     margin-right: 3px;
   }
 }

 .checkIcon {
   font-family: "FontAwesome";
   content: "\f00c";
 }

 .brilliant {
   border-color: #422AFB;

   &::before {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 64px 64px 0 0;
     border-color: #422AFB transparent transparent transparent;
     position: absolute;
     left: 0;
     top: 0;
     content: "";
   }

   &::after {
     @extend .checkIcon;
     color: white;
     position: absolute;
     left: 9px;
     top: 6px;
     text-shadow: 0 0 2px #37c5b6;
     font-size: 1.4rem;
   }
 }

 @media screen and (max-width: 1200px) {}


 @media screen and (max-width: 991px) {
   .package {
     margin-top: 10px;

     width: 100%;

     &:hover {
       background-color: #fff7d9;
     }
   }

   .plancontainer {
     display: block;
   }

   ul {
     list-style: none;
     padding: 0;
     text-align: left;
     margin-top: 29px;
   }

   li {
     margin-bottom: 15px;

     &:before {
       @extend .checkIcon;
       font-size: 1.3rem;
       color: #422AFB;
       margin-right: 3px;
     }
   }
 }