*{margin: 0; padding: 0; box-sizing: border-box; font-family: Almarai;}

/* NAVBAR */
#nav {box-shadow: 0 7px 30px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);}
#nav #login{text-align: center; font-size: 14px; font-weight: bold; color:#fff; border: 1px solid #6D2181;
      border-radius: 10px; width: 140px; margin-right: 15px;  padding: 10px 20px ; background-size: 300% 300%;
      box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
      background-image: linear-gradient(to right, #8B1074 0%, #6D2181 30%);}
  /* .navbar #login:hover {
    background-position: right center;
  } */
#nav #register {text-align: center; font-size: 14px; font-weight: bold; color:#6D2181;
     border: 1px solid #6D2181; border-radius: 10px; width: 140px; padding: 10px 20px;  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);}
#nav #register:hover {background-image: linear-gradient(to right, #8B1074 0%, #6D2181 30%); color: #fff;}
#nav #logo{text-align: right;}

/* TITLE */
.title {text-align: center;}
.title #bold-title{ font-size: 40px; font-weight: bold; margin-top: 150px;}
.title #bold-title .border-gradient, .payment .border-gradient {border-bottom-style: solid; border-bottom-width: 6px; border-image: linear-gradient(45deg, #fff, #8B1074,  #6D2181) 1;  
    border-bottom-right-radius: 5px; padding-bottom: 12px;}
#text{color: #808080; margin-top: 30px;}
.title #buttons {display: inline-block; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1); border-radius: 15px;}
.title #buttons .month-btn{color: #FD3A69; border-radius: 12px; padding: 10px 30px; margin: 0px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
.title #buttons .year-btn{color: #fff; background-image: linear-gradient(to right, #FF9C71 0%, #FD3A69 70%);
   background-color: #fff; border-radius: 12px; padding: 10px 30px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); margin-left: -10px;}

/* PRICING */ 
#month{display: none;} 
.pricing {margin: 50px;}
.pricing .row {margin: 0px;}
.pricing .card { margin: 0px; border: none; border-radius: 1rem; box-shadow: 1px 7px 10px rgba(0, 0, 0, 0.1), 1px 3px 3px rgba(0, 0, 0, 0.08);}
.pricing .special { background-image: linear-gradient(to top, #8B1074 0%, #6D2181 50%); color: #fff;}
.pricing .card-body h5{font-size: 29px; color: #8B1074;}
.pricing .card-body h6{color: #8B1074;}

.pricing hr {margin: 1.5rem 0;}
.pricing .card-title {font-weight: bold;}
.pricing .card-price {font-size: 2.5rem; margin: 0;}
.pricing .card-price .period {font-size: 16px;}
.pricing ul {direction: rtl;}
.pricing ul li {margin-bottom: 1rem; color: #808080; font-size: 15px;}
.pricing .special ul li, .pricing .special h5  {color: #fff;}
.pricing .details a {color: #fff; text-decoration: none;}
.pricing .btn {font-size: 16px; width: 140px; border-radius: 12px; padding: 1rem; border: none;
background-image: linear-gradient(to right, #FF9C71 0%, #FD3A69 70%);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);}
.pricing .card:hover { margin-top: -.25rem; margin-bottom: .25rem; box-shadow: 1px 20px 30px rgba(0, 0, 0, 0.3); z-index: 10;}

/* PAYMENT */
.payment {margin-top: 200px;}
.payment ul{margin: 100px;}


/* FOOTER */
footer {margin-top: 80px;}
footer .foot{border-top: 1px solid #BDBDBD; padding: 20px;}
footer a{color: #8B1074;}
footer a:hover{color: #8B1074; text-decoration: none;}