@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*::after,
*::before {
  outline: none;
  box-sizing: inherit;
}

body {
  line-height: 1.6;
  font-size: 1.6rem;
  direction: rtl;
  font-family: "iransansweb";
}

a {
  text-decoration: none;
  color: #464749;
  transition: all 400ms ease;
  cursor: pointer;
}

a:hover {
  color: rgb(158, 18, 177);
}

code{
    color:#000 !important;
}

i {
  user-select: none;
}

@font-face {
  font-family: "iransansweb";
   src:url("../public/fonts/IranSansWeb/IRANSansWeb.woff") format("woff"),
       url("../public/fonts/IranSansWeb/IRANSansWeb.ttf") format("truetype");
         font-display: swap;

}
.Section__Title {
  display: flex;
  flex-direction: column;
  position: relative;
}
.Section__Title::before {
  content: "";
  width: 0.4rem;
  height: 100%;
  border-radius: 3rem;
  background-color: rgb(158, 18, 177);
  position: absolute;
  right: -1.5rem;
  top: 0;
  transform: rotate(10deg);
}
.Section__Title-Header {
  font-size: 2.3rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
  position: relative;
}
.Section__Title-Header::after {
  content: "";
  width: 100%;
  max-width: 25rem;
  background-color: rgba(43, 114, 206, 0.2);
  height: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}
.Section__Title__Title-Description {
  font-size: 1.3rem;
  color: rgb(107, 107, 107);
}

.text-Purple {
  color: rgb(158, 18, 177);
}

.ellipsis-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.Courses__Content-Swiper {
  margin: 1.5rem !important;
}
.Courses__Content-Swiper:hover {
  transform: none !important;
}

.accordion-button {
  background-color: transparent !important;
  outline: none !important;
  padding: 2.5rem 1.5rem;
  font-size: 1.4rem;
  font-weight: bold;
}
.accordion-button:not(.collapsed) {
  color: rgb(158, 18, 177) !important;
}
.accordion-button:focus {
  border-bottom: 1px solid #ccc;
  box-shadow: none !important;
}
.accordion-button::after {
  margin-left: 0;
  margin-right: auto !important;
}
.accordion-item {
  margin-top: 1rem;
  border: 1px solid #ccc !important;
}
.accordion-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 1.5rem;
}
.accordion-body-Right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.accordion__number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  border: 1px solid #ccc;
  font-size: 1.2rem;
}
.accordion__Icon {
  color: #939aa3;
  font-size: 2.2rem;
}
.accordion__Time {
  color: #939aa3;
}

.pyro {
  display: flex;
  justify-content: end;
  align-items: center;
}

.pyro > .before,
.pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  }
}
@-moz-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  }
}
@-o-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  }
}
@-ms-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  }
}
@keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
.header__Top {
  background-color: #f0f2f7;
  padding: 2rem;
}
.header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__Top-Lists {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1.5rem;
}
.header__Top-Items {
  font-size: 1.4rem;
}
.header__Top-Left {
  display: flex;
  gap: 1.2rem;
}
.header__Top-SocialMedia {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header__Top-Phone {
  padding: 0 1rem;
}
.header__Top-Icon {
  font-size: 2rem;
  color: rgb(158, 18, 177);
}

.main-Header__Content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
}
.main-Header__Content-Right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.main-Header__Chevron {
  font-size: 1.3rem;
  padding-right: 0.2rem;
}
.main-Header__Lists {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.main-Header__Items {
  position: relative;
}
.main-Header__Items:hover .main-Header__SubMenu {
  visibility: visible;
  opacity: 1;
}
.main-Header__Content-Left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.main-Header__Content-Items {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.main-Header__Search {
  background-color: rgb(158, 18, 177);
  color: #fff;
  transition: all 0.2s ease;
}
.main-Header__Search:hover .main-Header__Search-Icon {
  transform: translateY(-3px);
  color: #fff !important;
}
.main-Header__Basket {
  background-color: #f0f2f7;
  position: relative;
}
.main-Header__Basket-Circle {
  width: 2.4rem;
  height: 2.4rem;
  background-color: #9e12b1;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 100%;
  font-size: 1rem;
  position: absolute;
  top: -1.5rem;
  right: -1rem;
}
.main-Header__Login {
  height: 4.5rem;
  padding: 1rem 2rem;
  border: 1px solid rgb(158, 18, 177);
  color: rgb(158, 18, 177);
  border-radius: 0.5rem;
  font-size: 1.5rem;
}
.main-Header__Login:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.main-Header__SubMenu {
  padding: 1rem 2rem;
  width: 45rem;
  background-color: #fff;
  box-shadow: 1px 3px 3px rgba(70, 71, 73, 0.1);
  border-radius: 0.6rem;
  transition: all 200ms ease-in-out;
  z-index: 1;
  border: 1px solid #eee;
  border-bottom: 3px solid rgb(158, 18, 177);
  position: absolute;
  top: 4rem;
  right: 0;
  visibility: hidden;
  opacity: 0;
}
.main-Header__SubMenu-Items {
  display: block;
  padding: 1rem 0.5rem;
}
.main-Header__SubMenu-Link {
  width: 100%;
  height: 100%;
}

.Landing__Title, .Landing__SubTitle {
  color: #fff;
}
.Landing__Page-Links {
  padding: 1.5rem 8rem;
  background-color: purple;
  color: white !important;
  border-radius: 1rem;
  margin-bottom: 5rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.Landing__Page-Link {
  color: #fff;
}
.Landing__Page-Items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  margin: 3rem 0;
}
.Landing__Page-Item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 1.4rem;
  width: 80%;
  margin-bottom: 2rem;
}
.Landing__Page-Box {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
}
.Landing__Page-Icon {
  font-size: 1.9rem;
  width: 4rem;
  height: 4rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: purple;
}
.Landing .Landing__Title {
  font-size: 3.2rem;
}
.Landing .Landing__SubTitle {
  text-align: center;
  font-size: 2rem;
}
.Landing-Text {
  font-size: 1.6rem;
}
.Landing__Part-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  direction: rtl;
}
.Landing__Part-2 {
  position: relative;
}
.Landing__Title {
  font-size: 3.2rem;
  font-weight: bold;
  margin: 1.5rem 0;
}
.Landing__SubTitle {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1.5rem 0;
}
.Landing__Search {
  max-width: 70rem;
  position: relative;
  margin: 3rem auto;
}
.Landing__Search-Input {
  width: 100%;
  padding: 2.5rem 1.5rem;
  background-color: #fff;
  border: none;
  border-radius: 1rem;
}
.Landing__Search-Btn {
  position: absolute;
  left: 1.5rem;
  top: 1.2rem;
  background-color: rgb(158, 18, 177);
  border: none;
  border-radius: 0.5rem;
  width: 5rem;
  height: 5rem;
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Landing__Search-Btn:hover {
  background-color: rgba(43, 206, 87, 0.7882352941);
}
.Landing__Search-Icon {
  color: #fff;
  font-size: 2.5rem;
}
.Landing__Status {
  display: flex;
  justify-content: space-evenly;
  padding: 2rem 1rem;
}
.Landing__Items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Landing__Svg {
  fill: #fff;
}
.Landing__Status-Title {
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

.background-circle {
  background: #28292d;
  border-radius: 50%;
  width: 550px;
  height: 550px;
  z-index: 9;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5019607843);
}


.circle {
  position: relative;
  top: 400px;
  left: 220px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: animateCircle 40s linear infinite;
}

@keyframes animateCircle {
  0% {
    transform: perspective(1000px) rotateY(0deg) rotateX(15deg) translateY(-30px);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg) rotateX(15deg) translateY(-30px);
  }
}
.circle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2d2e32;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5019607843);
  border-radius: 50%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 24deg)) translateZ(300px);
}

.circle span img {
  position: relative;
  top: 12px;
  left: 12px;
  object-fit: cover;
}

.Landing__Title {
  font-size: 3.2rem;
  font-weight: bold;
  margin: 1.5rem 0;
}
.Landing__SubTitle {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1.5rem 0;
}
.Landing__Search {
  max-width: 70rem;
  position: relative;
  margin: 3rem auto;
}
.Landing__Search-Input {
  width: 100%;
  padding: 2.5rem 1.5rem;
  background-color: #fff;
  border: none;
  border-radius: 1rem;
}
.Landing__Search-Btn {
  position: absolute;
  left: 1.5rem;
  top: 1.2rem;
  background-color: rgb(158, 18, 177);
  border: none;
  border-radius: 0.5rem;
  width: 5rem;
  height: 5rem;
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Landing__Search-Btn:hover {
  background-color: rgba(43, 206, 87, 0.7882352941);
}
.Landing__Search-Icon {
  color: #fff;
  font-size: 2.5rem;
}
.Landing__Status {
  display: flex;
  justify-content: space-evenly;
  padding: 2rem 1rem;
}
.Landing__Items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Landing__Svg {
  fill: #fff;
}
.Landing__Status-Title {
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

.Courses {
  margin: 3.5rem 0;
}
.Courses__Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Courses__Content-Centerize {
  display: flex;
  justify-content: center;
}

.aboutus {
  margin: 1.5rem 0;
}
.aboutus__Content {
  margin: 2.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.aboutus__Items {
  padding: 1.5rem 2rem;
  box-shadow: 0 0 1.3rem rgba(70, 71, 73, 0.3);
  border: 1px solid silver;
  border-radius: 0.5rem;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1.5rem;
  margin: 0.5rem 0;
}
.aboutus__Items-Icon-Item {
  font-size: 6.5rem;
  color: rgb(107, 107, 107);
}
.aboutus__Items-Description {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.aboutus__Items-Title {
  font-size: 2rem;
  font-weight: bold;
  color: #464749;
}
.aboutus__Items-Text {
  font-size: 1.4rem;
  color: rgb(107, 107, 107);
}

.popular {
  margin: 2rem 0;
}
.popular__Content {
  margin-top: 1rem;
}

.presell {
  margin: 2rem 0;
}
.presell__Content {
  margin-top: 1rem;
}

.article {
  margin: 1rem 0;
}
.article__Content {
  margin-top: 2rem;
}
.article__Content-All {
  display: flex;
  justify-content: center;
}

.footer {
  margin-top: 3.5rem;
}
.footer__Content {
  background-color: #f0f2f7;
  padding: 2.5rem;
  border-radius: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
}
.footer__Content::after {
  content: "";
  width: 30%;
  height: 2rem;
  background-color: rgb(158, 18, 177);
  position: absolute;
  bottom: -1.4rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
  border-radius: 4rem;
}
.footer__Main {
  padding: 1rem 1.5rem;
}
.footer__Title {
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: 1.8rem;
  position: relative;
}
.footer__Title::before {
  content: "";
  width: 4.3rem;
  height: 4.3rem;
  background-color: rgba(43, 114, 206, 0.2);
  opacity: 0.9;
  position: absolute;
  top: -0.5rem;
  right: 0.3rem;
  border-radius: 1rem;
  transform: rotate(45deg);
}
.footer__Description {
  font-size: 1.4rem;
  text-align: justify;
  line-height:3rem;
}
.footer__Blog-Link {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 1.3rem;
}
.footer__Fast {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 1.3rem;
}
.footer__CopyRight {
  margin-top: 6.5rem;
  padding: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f7;
}
.footer__CopyRight-Text {
  font-size: 1.6rem;
  font-weight: bold;
}

.suggest {
  margin: 4rem 0;
}
.suggest__Header-Content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
}
.suggest__Header-Icons {
  width: 5rem;
  height: 5rem;
  background-color: #9e12b1;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.suggest__Header-Icons-Item {
  color: #fff;
  font-size: 2rem;
}
.suggest__Header-Text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.suggest__Header-Text-Title {
  font-size: 1.6rem;
  color: #4b515a;
  font-weight: 600;
}
.suggest__Header-Text-SubTitle {
  color: #bebebe;
  font-size: 1.4rem;
}
.suggest__Header-Right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.suggest__Header-More {
  padding: 1rem 1.2rem;
  background-color: #9e12b1;
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 14rem;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.suggest__Header-More:hover {
  transform: translateY(-0.2rem);
}
.suggest__Header-More-Icon {
  font-size: 1.3rem;
  color: #fff;
  width: 100%;
  height: 100%;
}
.suggest__Header-More-Icon:hover {
  color: #fff !important;
}
.suggest__Header-More-Text {
  font-size: 1.2rem;
}
.suggest__Main {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.8rem;
  padding: 2.5rem 4rem;
}
.suggest__Main-Col {
  display: flex;
  align-items: center;
}
.suggest__Main-Picture {
  max-height: 40rem;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.suggest__Main-Picture-Main {
  width: 100%;
  border-radius: 1rem;
}
.suggest__Main-Title {
  font-size: 1.5rem;
  color: #4b515a;
}
.suggest__Main-Row {
  margin-top: 1.5rem;
}
.suggest__Main-Item {
  margin-bottom: 1rem;
}
.suggest__Main-Item-Content {
  padding: 0.8rem 1.5rem;
  background-color: #F9F9F9;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  justify-content: flex-start;
  gap: 2rem;
}
.suggest__Main-Item-Content-Right-Icon {
  width: 4rem;
  height: 4rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
}
.suggest__Main-Item-Content-Right-Pic {
  color: #4f5467;
}
.suggest__Main-Item-Content-Left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.suggest__Main-Item-Content-Key {
  font-size: 1.2rem;
  color: #bebebe;
}
.suggest__Main-Item-Content-Val {
  font-size: 1.4rem;
  color: #4b515a;
}
.suggest__Main-List {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  align-items: center;
  justify-content: center;
}
.suggest__Main-List-Item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.suggest__Main-List-Pic {
  width: 60%;
  object-fit: cover;
}
.suggest__Main-List-Text {
  font-size: 1.1rem;
  color: #4f5467;
}
.suggest__Main-Cost {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.suggest__Main-Price {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.suggest__Main-Price-Content {
  padding: 1.5rem 2.5rem;
}
.suggest__Main-OldPrice {
  text-decoration: line-through;
  color: red;
  font-size: 1.1rem;
}
.suggest__Main-OldPrice:after {
  content: "تومان";
  font-size: 0.8rem;
}
.suggest__Main-NewPrice {
  color: green;
  font-size: 2rem;
  font-weight:bold;
}
.suggest__Main-NewPrice:after {
  content: "تومان";
  font-size: 1.3rem;
  color: #4f5467;
  margin-right: 0.3rem;
}
.suggest__Main-Performance {
  display: flex;
  gap: 2rem;
}
.suggest__Main-Performance-Key {
  color: #4acd00;
}
.suggest__Main-Stu {
  display: flex;
  flex-direction: column;
  padding-left: 1.8rem;
  border-left: 1px solid #ccc;
  font-size: 1.2rem;
  gap: 1rem;
  align-items: center;
}
.suggest__Main-Happy {
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  gap: 0.6rem;
  align-items: center;
}
.suggest__Main-Discount {
  width: 6rem;
  height: 6rem;
  position: absolute;
  top: 0;
  right: -2rem;
  background-color: purple;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.2rem;
}
.category {
  margin: 3rem 0;
}
.category__TopBar {
  padding: 2.5rem 2rem;
  background-color: #fff;
  box-shadow: 0 0 1.4rem rgba(70, 71, 73, 0.3);
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.category__TopBar-Right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.category__TopBar-Right-RowBtn, .category__TopBar-Right-ColumnBtn {
  padding: 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  cursor: pointer;
}
.category__TopBar-Right-RowBtn--active {
  background-color: rgb(158, 18, 177);
  color: #fff;
  border: 1px solid rgb(158, 18, 177);
}
.category__TopBar-Right-Filter {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  position: relative;
}
.category__TopBar-Right-Filter:hover .category__TopBar-Right-Filter-List {
  visibility: visible;
  opacity: 1;
}
.category__TopBar-Right-Filter-Text {
  padding: 1rem 2.5rem;
  transition: all 0.4s ease;
  cursor: pointer;
  min-width: 30rem;
  display: flex;
}
.category__TopBar-Right-Filter-Text-Box {
  width: 100%;
  display: flex;
}
.category__TopBar-Right-Filter-Text:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.category__TopBar-Right-Filter-Icon {
  padding-top: 0.5rem;
  padding-right: 1rem;
}
.category__TopBar-Right-Filter-List {
  position: absolute;
  right: 0;
  top: 4.5rem;
  width: 100%;
  box-shadow: 0 1rem 1.6rem rgba(70, 71, 73, 0.3);
  background-color: #fff;
  z-index: 20;
  border: 1px solid #ccc;
  border-bottom: 4px solid green;
  border-radius: 0 0 1.5rem 1.5rem;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
}
.category__TopBar-Right-Filter-Item {
  padding: 0.7rem 2.5rem;
  transition: all 0.4s ease;
}
.category__TopBar-Right-Filter-Item--active {
  background-color: rgb(206, 206, 206);
}
.category__TopBar-Right-Filter-Item:hover {
  background-color: #eee;
  cursor: pointer;
}
.category__TopBar-Left-Form {
  width: 30rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
}
.category__TopBar-Left-Input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.3rem;
  color: rgb(107, 107, 107);
}
.category__TopBar-Left-Icon {
  position: absolute;
  left: 1rem;
  top: 1.5rem;
  color: rgb(107, 107, 107);
}
.category__Pagination {
  margin: 3rem 0;
}

.coursePage__Information {
  background-color: #fff;
  padding: 2rem 3.5rem;
  box-shadow: 0 0 1.6rem rgba(70, 71, 73, 0.3);
  border-radius: 1rem;
  margin: 3rem 0;
}
.coursePage__Information-info {
  margin: 1rem 0 1rem 6rem;
}
.coursePage__Information-info-Link {
  padding: 0.5rem 1rem;
  background-color: rgba(158, 18, 177, 0.1);
  border-radius: 0.3rem;
  color: rgb(158, 18, 177);
  font-size: 1.2rem;
}
.coursePage__Information-info-Title {
  font-size: 2.3rem;
  font-weight: bold;
  margin: 2rem 0;
}
.coursePage__Information-info-Description {
  font-size: 1.5rem;
  color: #7b868a;
  margin-bottom: 2rem;
  text-align: justify;
  line-height: 2.8rem;
}
.coursePage__Information-info-socialMedia {
  display: flex;
  gap: 1.5rem;
}
.coursePage__Information-info-socialMedia-Icon {
  font-size: 2.5rem;
  cursor: pointer;
  color: #7b868a;
  transition: all 0.4s ease;
}
.coursePage__Information-info-socialMedia-Icon:hover {
  color: rgb(158, 18, 177);
}
.coursePage__Information-video {
  max-width: 100%;
}
.coursePage__Information-video-sourse {
  max-width: 100%;
  object-fit: cover;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 1.6rem rgba(70, 71, 73, 0.3);
}
.coursePage__Information-video-sourse:hover {
  cursor: pointer;
  box-shadow: 0 0 1.8rem rgba(70, 71, 73, 0.6);
}

.Message_botMessageBubble__CPGMI {
  margin-left: 0 !important;
  max-width: max-content !important;
}

.coursePage__Description {
  margin: 2rem 0;
}
.coursePage__Description-Box-Item {
  padding: 2rem 2.5rem;
  background-color: #fff;
  box-shadow: 0 5px 30px rgba(70, 72, 77, 0.08);
  margin-top: 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2.5rem;
  transition: all 0.3s ease;
}
.coursePage__Description-Box-Item:hover {
  cursor: pointer;
  transform: translateY(-0.2rem);
}
.coursePage__Description-Box-Icon-shape {
  font-size: 3.6rem;
  color: rgb(158, 18, 177);
}
.coursePage__Description-Box-Text {
  display: flex;
  flex-direction: column;
  color: #858c96;
}
.coursePage__Description-Box-Text-Key {
  font-size: 1.6rem;
}
.coursePage__Description-Box-Text-Value {
  font-size: 1.3rem;
  margin-top: 1rem;
}

.coursePage__Description-ProgressBar {
  margin: 3.5rem 0;
  padding: 2.5rem 2rem;
  border-radius: 1rem;
  background-color: #f0f2f7;
}
.coursePage__Description-ProgressBar-Header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.coursePage__Description-ProgressBar-Icon {
  font-size: 1.8rem;
  color: #7b868a;
}
.coursePage__Description-ProgressBar-Text {
  color: #7b868a;
  font-size: 1.5rem;
}
.coursePage__Description-ProgressBar-value {
  font-weight: bold;
}
.coursePage__Description-ProgressBar-Chart {
  margin-top: 2rem;
}
.coursePage__Description-ProgressBar-Chart .progress-bar {
  background-color: rgb(158, 18, 177);
}

#introduction__Image {
  width: 100%;
  border-radius: 1rem;
  margin: 1.5rem 0;
}

.coursePage__Description-Introduce {
  margin: 2.5rem 0;
}

.introduction {
  padding: 2rem 2.5rem;
  background-color: #fff;
  box-shadow: 0 5px 30px rgba(70, 72, 77, 0.08);
  border-radius: 0.6rem;
}
.introduction__Item {
  margin: 1.5rem 0;
}
.introduction__Title {
  margin: 2rem 0;
}
.introduction__Image {
  max-width: 100%;
  border-radius: 1rem;
  margin: 1.5rem 0;
}
.introduction__Description {
  font-size: 1.6rem;
  margin: 1.5rem 0;
  color: #7a7a7a;
  line-height: 3.5rem;
}
.introduction__Links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.introduction__Links-Item {
  padding: 1rem 2rem;
  border: 1px solid rgb(158, 18, 177);
  border-radius: 0.5rem;
  color: rgb(158, 18, 177);
  font-size: 1.5rem;
}
.introduction__Links-Item:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.introduction__Accordion {
  margin: 3.5rem 0;
}

.coursePage__Teacher {
  padding: 2.5rem 3rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 5px 30px rgba(70, 72, 77, 0.08);
}
.coursePage__Teacher-Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.coursePage__Teacher-Header-Right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.coursePage__Teacher-Header-Image {
  width: 7rem;
  height: 7rem;
  border-radius: 100%;
  object-fit: cover;
}
.coursePage__Teacher-Header-Text {
  display: flex;
  flex-direction: column;
}
.coursePage__Teacher-Header-Text-Persion {
  color: #7b868a;
  font-size: 1.8rem;
}
.coursePage__Teacher-Header-Text-English {
  color: #7b868a;
  font-size: 1.4rem;
  margin-top: 0.3rem;
}
.coursePage__Teacher-Header-Left-Link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(158, 18, 177);
  color: rgb(158, 18, 177);
  border-radius: 0.3rem;
}
.coursePage__Teacher-Header-Left-Link:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.coursePage__Teacher-Description {
  margin: 2.5rem 0;
}
.coursePage__Teacher-Description-Text {
  font-size: 1.5rem;
  color: #7b868a;
}

.coursePage__Content {
  position: sticky;
  top: 0;
}

.coursePage__Student {
  padding: 2rem 2.5rem;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  border-radius: 1rem;
  background-color: #fff;
}
.coursePage__Student-Box {
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.coursePage__Student-Box:hover {
  transform: translateY(-0.5rem);
  color: #fff;
}
.coursePage__Student-Icon {
  color: #fff;
  font-size: 1.8rem;
}
.coursePage__Student-Text {
  font-size: 1.7rem;
}

.coursePage__StudentInfo {
  padding: 2.5rem 3rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  margin: 2rem 0;
}
.coursePage__StudentInfo-Top {
  border: 2px solid rgb(158, 18, 177);
  margin: 1rem 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  gap: 1.5rem;
}
.coursePage__StudentInfo-Top-Icon {
  color: #555555;
  font-size: 2.2rem;
}
.coursePage__StudentInfo-Top-Student {
  color: #7f8187;
}
.coursePage__StudentInfo-Top-Number {
  padding: 0.8rem;
  background-color: #eee;
  color: #7f8187;
  border-radius: 0.5rem;
  font-size: 1.3rem;
}
.coursePage__StudentInfo-Bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 2.5rem;
}
.coursePage__StudentInfo-Bottom-Vertical {
  width: 2px;
  height: 3rem;
  border-radius: 1rem;
  background-color: #ccc;
}
.coursePage__StudentInfo-Bottom-Item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
  color: #7f8187;
}
.coursePage__StudentInfo-Bottom-Description {
  font-size: 1.3rem;
}
.coursePage__ShortLink {
  padding: 2.5rem 3rem;
  background-color: #fff;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  border-radius: 0.5rem;
}
.coursePage__ShortLink-Top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #7b868a;
  margin-bottom: 2rem;
  gap: 1rem;
}
.coursePage__ShortLink-Top-Icon {
  font-size: 1.8rem;
}
.coursePage__ShortLink-Top-Link {
  font-size: 1.7rem;
}
.coursePage__ShortLink-Buttom {
  color: #7b868a;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}
.coursePage__ShortLink-Buttom-Link {
  font-size: 1.2rem;
}

.coursePage__Seasons {
  margin: 2rem 0;
  padding: 2.5rem 3rem;
  background-color: #fff;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  border-radius: 0.5rem;
}
.coursePage__Seasons-Header {
  color: #464749;
  font-weight: bold;
}
.coursePage__Seasons-Title {
  color: #7b868a;
  margin-top: 1rem;
}
.coursePage__Seasons-Link {
  font-weight: bold;
  cursor: pointer;
  color: rgb(158, 18, 177);
}

.comments {
  margin: 1.5rem 0;
}
.comments__Content {
  background-color: #fff;
  padding: 3.5rem 2rem;
  box-shadow: 0 5px 30px rgba(70, 72, 77, 0.08);
  border-radius: 1rem;
}
.comments__Content-Header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.9rem;
  margin-bottom: 2rem;
}
.comments__Content-Header-Icon {
  margin-left: 1rem;
  color: rgb(158, 18, 177);
}
.comments__Content-Header-Value {
  color: rgb(158, 18, 177);
  font-weight: bold;
  margin: 0 0.7rem;
}
.comments__Content-Box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 1rem;
  margin-top: 1rem;
}
.comments__Content-Box-admin {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 1rem;
  margin: 0 3rem;
}
.comments__Content-Name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
}
.comments__Content-Name-Text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
}
.comments__Content-Name-Family {
  font-size: 1.4rem;
  color: rgb(117, 117, 117);
}
.comments__Content-Name-Date {
  font-size: 1.4rem;
  color: rgb(117, 117, 117);
}
.comments__Content-Image {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: #eee;
}
.comments__Content-Image-Box {
  max-width: 100%;
  max-height: 100%;
  display: flex;
}
.comments__Content-Image-Pic {
  max-width: 100%;
  max-height: 100%;
}
.comments__Content-Text-Description {
  font-size: 1.5rem;
  white-space: pre-line;
  line-height: 2.8rem;
}
.comments__Content-Like {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.comments__Content-Like-Icon {
  color: rgb(158, 18, 177);
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.comments__Content-Like-Icon:hover {
  transform: translateY(-0.2rem);
}
.comments__Content-Like-Text {
  color: rgb(158, 18, 177);
  font-size: 1.4rem;
}
.comments__check {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}
.comments__check-Text {
  color: #00a049;
  font-size: 1.7rem;
  font-weight: bold;
}

.Blog__Right-Article {
  padding: 2.5rem 3.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 5px 30px rgba(70, 72, 77, 0.08);
}
.Blog__Right-Article-MainTitle {
  font-size: 2.3rem;
  font-weight: bold;
  color: #464749;
}
.Blog__Right-Article-Info {
  margin: 1.5rem 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
}
.Blog__Right-Article-Item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.Blog__Right-Article-Item-Icon {
  color: #c7c7c7;
  font-size: 1.2rem;
}
.Blog__Right-Article-Item-Text {
  color: #8f8f8f;
  font-size: 1.4rem;
}
.Blog__Right-Article-Image {
  max-width: 100%;
  display:flex;
  justify-content:center;
}
.Blog__Right-Article-Image-Pic {
  max-width: 100%;
  object-fit: cover;
  border-radius:2rem;
}
.Blog__Right-VipArticle-Image-Pic{
    width: 100%;
  object-fit: cover;
  border-radius: 2rem;
  box-shadow: 0px 4px 9px rgba(0,0,0,0.3);
}
.Blog__Right-Article-Rate {
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}
.Blog__Right-Article-Rate-Star {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.Blog__Right-Article-Rate-Star-Img {
  width: 1.9rem;
}
.Blog__Right-Article-Rate-Store {
  color: #7d7d7f;
  font-size: 1.4rem;
}
.Blog__Right-Article-Description {
  margin: 2rem 0;
  padding: 2rem;
  text-align: justify;
}
.Blog__Right-Article-Description-Text {
  color: #7d7e7f;
  font-size: 1.5rem;
  line-height: 3rem;
}
.Blog__Right-Article-Links {
  margin: 2rem 0;
  padding: 2rem;
  background-color: #f2f2f2;
  border-radius: 1.5rem;
}
.Blog__Right-Article-Links-Head {
  font-size: 1.6rem;
  color: #464749;
  font-weight: bold;
}
.Blog__Right-Article-Links-List {
  margin: 1rem 1rem;
}
.Blog__Right-Article-Links-Item {
  margin: 1rem 0;
}
.Blog__Right-Article-Links-Link {
  color: rgb(158, 18, 177);
  font-size: 1.4rem;
}
.Blog__Right-Article-Links-Link:hover {
  color: blue;
}
.Blog__Right-Article-Content {
  margin: 3rem 0;
}
.Blog__Right-Article-Items-Head {
  color: rgb(158, 18, 177);
  font-size: 2.4rem;
  font-weight: bold;
  margin: 1rem 0;
}
.Blog__Right-Article-Items-Description {
  color: #7d7e7f;
  font-size: 1.6rem;
  line-height: 3.5rem;
  text-align: justify;
}
.Blog__Right-Article-Items-Image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.Blog__Right-Article-Items-Image-Pic {
  border-radius: 0.5rem;
  max-width: 100%;
}
.Blog__Right-Article-SocialMedia {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.Blog__Right-Article-SocialMedia-Title {
  color: #7d7d7f;
}
.Blog__Right-Article-SocialMedia-Icon {
  color: #7d7d7f;
  margin-right: 0.9rem;
  font-size: 1.6rem;
}
.Blog__Right-Article-SocialMedia-Icon:hover {
  color: rgb(158, 18, 177);
}

.suggestion-articles {
  margin: 3rem 0;
  padding: 4rem 4rem;
  border-radius: 0.5rem;
  background-color: #f0f2f7;
  box-shadow: 0 5px 30px rgba(70, 72, 77, 0.08);
  position: relative;
}
.suggestion-articles-new {
  padding: 0 2rem;
}
.suggestion-articles-new::before {
  content: "مطالب جدیدتر";
  position: absolute;
  top: 0.8rem;
  color: rgba(54, 54, 54, 0.467);
}
.suggestion-articles-old {
  padding: 0 2rem;
}
.suggestion-articles-old::before {
  content: "مطالب قدیمی تر";
  position: absolute;
  top: 0.8rem;
  color: rgba(54, 54, 54, 0.467);
}
.suggestion-articles-Icon {
  position: absolute;
  transform: translate(0, 4.5rem);
  top: 0;
}
.suggestion-articles-Icon-Left {
  left: 1.5rem;
}
.suggestion-articles-Icon-Right {
  right: 1.5rem;
}
.suggestion-articles-Text {
  font-size: 1.6rem;
}

.Blog__Left {
  position: sticky;
  top: 0;
}
.Blog__Left-Info {
  background-color: #fff;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  padding: 2.5rem 3rem;
  margin: 2rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
}
.Blog__Left-Info-Text {
  margin: 2rem 0;
}
.Blog__Left-Info-Lists {
  margin-top: 1rem;
}
.Blog__Left-Info-Item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}
.Blog__Left-Info-Item:hover {
  transform: translateX(-1rem);
}
.Blog__Left-Info-Icon {
  color: #909aa7;
  font-size: 1.2rem;
  margin-left: 0.4rem;
}
.Blog__Left-Info-Description {
  font-size: 1.4rem;
}

.blogAuthor {
  padding: 2.5rem 2rem;
  background-color: #fff;
  box-shadow: 0 0 1.4rem rgba(70, 71, 73, 0.3);
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}
.blogAuthor__Content {
  width: 100%;
}
.blogAuthor__Col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2.5rem;
}
.blogAuthor__ColBottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding: 0 2rem;
}
.blogAuthor__Image {
  width: 20rem;
  height: 20rem;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 2px solid silver;
}
.blogAuthor__Image-Pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blogAuthor__Info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.blogAuthor__Info-Family {
  font-size: 1.9rem;
}
.blogAuthor__Info-Box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.blogAuthor__Info-Icon {
  color: rgb(158, 18, 177);
}
.blogAuthor__Info-Head {
  font-size: 1.5rem;
  font-weight: bold;
}
.blogAuthor__Info-Item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.7rem;
}
.blogAuthor__Info-Key {
  font-size: 1.5rem;
  color: #000;
}
.blogAuthor__Info-Value {
  font-size: 1.4rem;
  color: #464749;
}
.blogAuthor__Info-HeadDescb {
  font-size: 1.9rem;
}
.blogAuthor__Info-Description {
 font-size: 1.4rem;
  color: #464749;
  text-align: justify;
  line-height: 3rem;
}

.LoginPage-Head {
  margin: 5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.LoginPage-Head-Title {
  font-size: 2.7rem;
  color: #00a049;
  font-weight: bold;
}

.LoginPage {
  margin: 10rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.LoginPage::after {
  content: "";
  width: 150%;
  height: 30rem;
  background-color: rgb(158, 18, 177);
  position: absolute;
  z-index: -1;
  transform: rotate(-3deg);
  top: 5rem;
}
.LoginPage::before {
  content: "";
  width: 150%;
  height: 35rem;
  background-color: rgb(192, 14, 216);
  position: absolute;
  z-index: -1;
  transform: rotate(-3deg);
  top: 10rem;
}
.LoginPage__Content {
  padding: 2.5rem 3rem;
  width: 50rem;
  background-color: #fff;
  box-shadow: 0 6px 20px rgba(168, 172, 185, 0.3);
  border-radius: 1rem;
  border-bottom: 0.5rem solid rgb(158, 18, 177);
}
.LoginPage__Header {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 2rem;
}
.LoginPage__Header-Title {
  font-size: 2.1rem;
  color: #7b868a;
  font-weight: bold;
  margin: 0.3rem 0;
}
.LoginPage__Header-SubTitle {
  font-size: 1.5rem;
  color: #9c9c9c;
}
.LoginPage__Member {
  background-color: #f0f2f7;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}
.LoginPage__Member-Title {
  color: #7b868a;
  font-size: 1.4rem;
  margin-left: 1rem;
}
.LoginPage__Member-Register {
  padding: 0.5rem 1.3rem;
  background-color: #a8aaaf;
  color: #fff;
  display: flex;
  font-size: 1.1rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.4rem;
}
.LoginPage__Member-Register:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.LoginPage__Form {
  margin: 2rem 0;
}
.LoginPage__Box {
  width: 100%;
  position: relative;
  margin-bottom: 0.5rem;
}
.LoginPage__Box-Input {
  width: 100%;
  padding: 1.5rem 2rem;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  color: #9c9c9c;
  font-size: 1.3rem;
}
.LoginPage__Box-Input:focus {
  border: 2px solid rgb(158, 18, 177);
}
.LoginPage__Box-Icon {
  position: absolute;
  left: 2rem;
  top: 2rem;
  color: rgb(168, 170, 175);
  font-size: 1.8rem;
  cursor: pointer;
}
.LoginPage__Button {
  margin: 1rem 0;
  width: 100%;
  position: relative;
}
.LoginPage__Button-Btn {
  width: 100%;
  background-color: rgb(158, 18, 177);
  border: none;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.3rem;
  padding: 1.5rem 1.5rem;
  font-weight: bold;
}
.LoginPage__Button-Icon {
  position: absolute;
  right: 2rem;
  top: 1.5rem;
  color: #fff;
  font-size: 2rem;
}
.LoginPage__Check {
  text-align: center;
}
.LoginPage__Check-Icon {
  color: orange;
}
.LoginPage__Check span {
  font-size: 1.3rem;
  color: red;
}
.LoginPage__Checked {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
  flex-direction: column;
}
.LoginPage__Checked span {
  color: red;
  font-size: 1.4rem;
}
.LoginPage__Remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2.5rem 0;
}
.LoginPage__Remember-Right-Label {
  cursor: pointer;
  position: relative;
}
.LoginPage__Remember-Right-FakeInput {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 2px solid rgb(158, 18, 177);
  border-radius: 0.4rem;
  position: absolute;
  right: -3px;
  top: 2px;
  z-index: 10;
}
.LoginPage__Remember-Right-FakeInput.active {
  width: 2rem;
  height: 2rem;
  background: url("../public/images/login/slices.png") no-repeat;
  background-color: rgb(158, 18, 177);
  background-position: -811px -476px;
}
.LoginPage__Remember-Right-Input {
  z-index: 100;
  visibility: hidden;
  opacity: 0;
}
.LoginPage__Remember-Right-Text {
  font-size: 1.3rem;
  margin-right: 0.5rem;
}
.LoginPage__Remember-Left-Link {
  font-size: 1.3rem;
}
.LoginPage__Des {
  color: #7b868a;
  margin-top: 2rem;
}
.LoginPage__Des-Header {
  font-size: 1.3rem;
}
.LoginPage__Des-Item {
  padding: 0.3rem;
  list-style: disc;
  font-size: 1.2rem;
}

.Error {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Error__Head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 3rem;
  gap: 2rem;
}
.Error__Head-Title {
  font-size: 3.5rem;
  font-weight: bold;
  color: rgb(158, 18, 177);
}
.Error__Head-Link {
  width: 50rem;
  padding: 3rem;
  color: #fff;
  background-color: rgb(158, 18, 177);
  cursor: pointer;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 400ms ease;
}
.Error__Head-Link:hover {
  transform: translateY(-1rem);
  color: #fff;
}
.Error__Image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Error__Image-Pic {
  width: 50rem;
}

.swiper-container-New {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 5rem;
  overflow: hidden;
}

.swiper-slide{
  /*width: 40rem !important;*/
  /*height: 60rem !important;*/
}

.swiper-slide1 {
  background-position: center;
  background-size: cover;
  width: 40rem;
  background-color: #f0f2f7;
  border-radius: 1rem;
  overflow: hidden;
  height: 56rem;
}
.swiper-slide1__Image {
  width: 100%;
  height: 60%;
}
.swiper-slide1__Image-Img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-slide1__Text {
  height: 30%;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.swiper-slide1__Text-Name {
  font-size: 1.9rem;
  display: block;
  margin: 0.3rem 0;
}
.swiper-slide1__Text-Special {
  font-size: 1.4rem;
  display: block;
}
.swiper-slide1__Text-Intro {
  margin: 1rem 0;
  font-size: 1.2rem;
  line-height: 2.5rem;
  color: #262626;
}
.swiper-slide1__Link {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-slide1__Link-Text {
  width: 100%;
  padding: 1.5rem 1rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  font-size: 1.7rem;
  font-weight: bold;
}
.swiper-slide1__Link-Text:hover {
  background-color: rgb(197, 17, 221);
  color: #fff;
}

.showCart__Info {
  margin-top: 10rem;
  overflow: hidden;
  padding: 2rem;
}
.showCart__Info-Table-Thead {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.showCart__Info-Row {
  padding: 2rem !important;
  border: 1px solid #ccc;
  text-align: center;
}
.showCart__Info-Row-Delete {
  font-size: 2.2rem;
  cursor: pointer;
  color: rgb(158, 18, 177);
}

.showCart__Price {
  display: flex;
  justify-content: flex-end;
  margin-left: 2rem;
}
.showCart__Price-Final {
  width: 45%;
  border: 1px solid #ccc;
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #d7facd;
}
.showCart__Price-Text {
  font-size: 1.3rem;
  font-weight: bold;
}

.showCart1 {
  margin-top: 10rem;
}
.showCart1__Discount {
  padding: 2.5rem 2rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
}
.showCart1__Discount-Content {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 1.5rem;
}
.showCart1__Header-Title {
  font-size: 1.6rem !important;
}
.showCart1__Header-Input {
  width: 85%;
  border: 1px solid #868686;
  border-radius: 0 0.5rem 0.5rem 0;
  background-color: #f5f5f5;
  padding: 1rem 2rem;
  font-size: 1.4rem;
}
.showCart1__Header-Input:focus {
  border: 2px solid rgb(158, 18, 177);
}
.showCart1__Header-Input.success {
  width: 85%;
  border: 1px solid #868686;
  border-radius: 0 0.5rem 0.5rem 0;
  background-color: #ddffd4;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  box-shadow: 0 0 10px rgba(24, 179, 2, 0.7);
  color: #026a2a;
}
.showCart1__Header-Input.failed {
  width: 85%;
  border: 1px solid #868686;
  border-radius: 0 0.5rem 0.5rem 0;
  background-color: #ffd4d4;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  box-shadow: 0 0 10px rgba(255, 108, 0, 0.7);
  color: #e60000;
}
.showCart1__Header-Button {
  width: 15%;
  border: 1px solid rgb(158, 18, 177);
  padding: 1rem 2rem;
  border-radius: 0.5rem 0 0 0.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}
.showCart1__Header-Button:hover {
  transform: translateY(-0.2rem);
}
.showCart1__Details {
  margin: 3rem 0;
}
.showCart1__Details-text {
  font-size: 1.6rem !important;
}
.showCart1__Details-Content {
  margin: 2rem 0;
}
.showCart1__Items {
  margin-top: 2rem;
}
.showCart1__Items-Details {
  margin: 15px 0;
  font-size: 17px;
}
.showCart1__Items-Details-Icon {
  font-size: 1.5rem;
  color: rgb(158, 18, 177);
  margin-left: 0.5rem;
}
.showCart1__Items-Details-Link {
  color: rgb(158, 18, 177);
  font-size: 17px;
  font-weight: bold;
}
.showCart1__Label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.showCart1__Label-Text {
  font-size: 1.6rem;
  color: #868686;
}
.showCart1__Input {
  padding: 1rem 2rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  color: #868686;
}
.showCart1__Info-Title {
  font-size: 1.6rem !important;
}
.showCart1__Table {
  margin: 1.5rem 0;
}
.showCart1__Item-Row {
  padding: 1.5rem !important;
  border: 1px solid #ccc;
}
.showCart1__Pay {
  margin: 3rem 0;
}
.showCart1__Pay-Title {
  font-size: 1.6rem !important;
}
.showCart1__Pay-content {
  margin-top: 2rem;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}
.showCart1__Pay-Item {
  display: flex;
  justify-content: space-between;
  padding: 2rem 2.5rem;
}
.showCart1__Pay-Item:not(:last-child) {
  border-bottom: 1px solid #6d6d6d;
}
.showCart1__Pay-Key {
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  gap: 0.5rem;
}
.showCart1__Pay-Key span {
  display: flex;
  gap: 0.3rem;
}
.showCart1__Pay-Value {
  font-size: 1.4rem;
  font-weight: 600;
}
.showCart1__Pay-Discount {
  background-color: #e99486;
  color: #bd2121;
}
.showCart1__Pay-Gift {
  background-color: khaki;
  color: #91630a;
}
.showCart1__Pay-KifPol {
  background-color: #e9c686;
  color: #bd8621;
}
.showCart1__Pay-Payment {
  color: green;
  background-color: #a7edad;
}
.showCart1__Rule-Title {
  margin-top: 1rem;
  font-size: 1.6rem;
}
.showCart1__Rule-Box {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.showCart1__Rule-Box-Text {
  font-size: 1.3rem;
  font-weight: bold;
}
.showCart1__Rule-Box-Input {
  width: 1.7rem;
  height: 1.7rem;
  cursor: pointer;
}
.showCart1__Rule-Box-Label {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.showCart1__Rule-Box-Label:hover {
  color: rgb(158, 18, 177);
}
.showCart1__Rule-Pay {
  width: 100%;
  padding: 1.5rem 3rem;
  background-color: rgb(158, 18, 177);
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
  margin-top: 2rem;
}
.showCart1__Rule-Pay:hover {
  color: #fff;
  background-color: rgb(158, 18, 177);
  opacity: 0.7;
}
.showCart1__Bank {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
}
.showCart1__Bank-Row2 {
  display: block;
  width: 100%;
  margin-top: 30px;
}
.showCart1__Bank-headpay {
  gap: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f0e68c;
  color: #916209;
  padding: 10px 0;
  border-radius: 10px 10px 0 0;
}
.showCart1__Bank-itempay {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  background-color: #e99486;
  color: #c02827;
}
.showCart1__Bank-itempay.active {
  background-color: #a7edad;
  color: #008000;
}
.showCart1__Bank-Btn {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.showCart1__Bank-Link {
  cursor: pointer;
  transition: all 0.1s ease-in;
}
.showCart1__Bank-Link:hover {
  display: inline-block;
  transform: translateY(-0.5rem);
}
.showCart1__Bank-Info {
  margin-top: 1.5rem;
  padding: 1rem 0;
}
.showCart1__Bank-Row {
  display: flex;
  align-items: center;
  gap: 3.5rem;
}
.showCart1__Bank-Item {
  display: flex;
  align-items: center;
  gap: 0.8em;
    cursor: pointer;
}
.showCart1__Bank-Text {
  font-size: 1.7rem;
  font-weight: bold;
}
.showCart1__Bank-CheckBox {
  width: 2rem;
  height: 2rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.showCart1__Bank-CheckBox-Icon {
  visibility: hidden;
  position: absolute;
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.showCart1__Bank-CheckBox.active {
  background-color: #008000;
  border: 1px solid green;
}
.showCart1__Bank-CheckBox.active .showCart1__Bank-CheckBox-Icon {
  visibility: visible;
}
.showCart1__Bank-CheckBox.Forbidden {
  cursor: not-allowed;
}
.showCart1__Bank-CheckBox-Hideen {
  width: 2rem;
  height: 2rem;
  z-index: 10;
  visibility: hidden;
}

.PayError {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  margin: 2rem 0;
  border: 2px solid red;
  font-size: 2rem;
  color: red;
  font-weight: bold;
  border-radius: 0.5rem;
}

.showCart-2 {
  margin: 8rem 0;
}

.showcart2 {
  margin: 8rem 0;
}
.showcart2_Order-Title {
  font-size: 1.7rem;
}
.showcart2_Order-Content {
  padding: 2rem 3rem;
  background-color: rgb(248, 247, 247);
  border-radius: 0.3rem;
  margin: 1rem 0;
  border: 1px solid silver;
}
.showcart2_Order-Content-Title {
  font-size: 1.6rem;
  color: green;
  font-weight: bold;
}
.showcart2_Order-Lists {
  list-style: disc;
  padding: 1rem 3rem;
}
.showcart2_Order-Item {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.showcart2_Order-Item-Key {
  color: #464749;
}
.showcart2_Order-Item-Value {
  color: rgb(105, 105, 105);
}
.showcart2_Gift {
  margin: 3rem 0;
}
.showcart2_Gift-Header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.showcart2_Gift-Title {
  font-size: 1.6rem;
}
.showcart2_Gift-SubTitle {
  font-size: 1.4rem;
  color: rgba(66, 66, 66, 0.533);
}
.showcart2_Gift-Content {
  margin: 1.5rem 0;
  padding: 2rem;
}
.showcart2_Gift-Content-Image {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.showcart2_Gift-Content-Pic {
  max-width: 100%;
  object-fit: cover;
}
.showcart2_Gift-Content-ImageChance {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4rem;
}
.showcart2_Gift-Content-ImageChance-Title {
  font-size: 2.5rem;
  color: #97a7e2;
  font-weight: bold;
}
.showcart2_Gift-Content-Box {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.showcart2_Gift-Content-Box-Number {
  color: rgb(158, 18, 177);
  font-weight: bold;
  font-size: 1.4rem;
}
.showcart2_Gift-Content-Badkonak {
  max-width: 80%;
  cursor: pointer;
  animation-name: Ballon;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transition: all 0.3s ease;
}
.showcart2_Gift-Content-Badkonak:hover {
  transform: translateY(0) !important;
}
.showcart2_Info {
  margin: 3rem 0;
}
.showcart2_Info-Title {
  font-size: 1.8rem;
}
.showcart2_Info-Content {
  margin: 2rem 0;
  background-color: #fbfbfb;
  border: 1px solid silver;
  border-radius: 0.5rem;
}
.showcart2_Info-Item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
}
.showcart2_Info-Item:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.showcart2_Info-Item-Head {
  background-color: #ccc;
}
.showcart2_Info-Item-Key {
  font-size: 1.5rem;
  color: #464749;
}
.showcart2_Info-Item-Value {
  font-size: 1.4rem;
}
.showcart2_Info-Link {
  padding: 1.5rem 3rem;
  background-color: rgb(158, 18, 177);
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20rem;
  color: #fff;
  cursor: pointer;
}
.showcart2_Info-Link:hover {
  color: #fff;
}
.showcart2_Profile {
  margin: 3rem 0;
}
.showcart2_Profile-Content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
}
.showcart2_Profile-Text {
  font-size: 1.7rem;
  font-weight: bold;
}
.showcart2_Dark {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.3;
  z-index: 100;
}
.showcart2_getGift {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: #fff;
  width: 50vw;
  z-index: 150;
  border-radius: 0.5rem;
  padding: 3rem;
  height: max-content;
}
.showcart2_getGift-Image {
  display: flex;
  justify-content: center;
}
.showcart2_getGift-Image-Pic {
  width: 35rem;
  object-fit: cover;
}
.showcart2_getGift-Text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.showcart2_getGift-Text-Gift {
  font-size: 1.8rem;
  color: rgb(158, 18, 177);
  font-weight: bold;
}
.showcart2_getGift-Text-Amount {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin: 2rem 0;
  flex-direction: row-reverse;
}
.showcart2_getGift-Text-Amount-Box {
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00a600;
  color: #fff;
  border-radius: 0.5rem;
  font-weight: bold;
}
.showcart2_getGift-Text-Wallet {
  font-size: 2.5rem;
  margin-top: 0.8rem;
}
.showcart2_getGift-Btn-Text {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: purple;
  border-radius: 1.5rem;
  margin-top: 2rem;
  color: #fff;
  padding: 1.2rem 0;
  cursor: pointer;
}
.showcart2__Bank-Content {
  margin: 2.5rem 0;
  border: 1px solid #ccc;
  border-radius: 1rem;
  padding: 3rem 3rem;
}
.showcart2__Bank-Own {
  border-bottom: 1px solid #ccc;
  margin-bottom: 2.5rem;
  padding: 2rem 0;
}
.showcart2__Bank-Own-Item {
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
}
.showcart2__Bank-Own-Key {
  width: 20rem;
  background-color: #f9f9f9;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 1rem 1rem 0;
  color: #6d6d6d;
}
.showcart2__Bank-Own-Value {
  width: 50rem;
  background-color: #e8e8e8;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem 0 0 1rem;
  font-weight: bold;
}
.showcart2__Bank-Own-Value-Sub {
  color: red;
  font-size: 1.4rem;
  margin-right: 0.7rem;
}
.showcart2__Bank-User {
  border-bottom: 1px solid #ccc;
  margin-bottom: 2.5rem;
  padding: 2rem 0;
}
.showcart2__Bank-User-Item {
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
}
.showcart2__Bank-User-Key {
  width: 20rem;
  background-color: #f9f9f9;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 1rem 1rem 0;
  color: #6d6d6d;
  height: 5rem;
}
.showcart2__Bank-User-Input {
  padding: 1rem;
  width: 50rem;
  border: 1px solid #ccc;
  border-radius: 1rem 0 0 1rem;
  height: 5rem;
  direction: ltr;
  text-align: center;
}
.showcart2__Bank-User-Pay {
  width: 100%;
  height: 5rem;
  display: flex;
  border: 1px solid #ccc;
  border-radius: 1rem 0 0 1rem;
  align-items: center;
  gap: 5rem;
  padding: 0 4rem;
  justify-content: center;
}
.showcart2__Bank-User-Pay-Item {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.showcart2__Bank-User-Pay-Select {
  width: 20rem;
  cursor: pointer;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 0 1.5rem;
}
.showcart2__Bank-Btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  background-color: green;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.showcart2__Bank-Btn:hover {
  transform: translateY(-0.2rem);
}
.showcart2__Bank-Btn-Text {
  color: #fff;
  font-size: 1.8rem;
}

.showcart2__table-head {
  height: 60px;
  background-color: khaki;
  color: #91630a;
  font-weight: bold;
  text-align: center;
}
.showcart2__table-head-column {
  vertical-align: middle;
}
.showcart2__table-item {
  height: 65px;
  font-weight: bold;
  text-align: center;
}
.showcart2__table-item-debt {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.showcart2__table-item.pay {
  background-color: #a7edad;
}
.showcart2__table-item-column {
  vertical-align: middle;
}
.showcart2__table-cong {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  padding: 10px;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
}

@keyframes Ballon {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1.5rem);
  }
}
#Profile {
  padding: 5rem 0;
  background-color: #f5f5f5;
}
#Profile__Container {
  padding: 0 10rem;
}

.profile {
  width: 100%;
  margin: 1rem 0;
}
.profile__container {
  display: flex;
  justify-content: space-between;
}
.profile__right {
  padding: 2.5rem 2rem;
  background-color: #fff;
  box-shadow: 0 0 1.6rem rgba(70, 71, 73, 0.3);
  border-radius: 1rem;
  border: 1px solid silver;
  position: sticky;
  top: 0;
  right: 0;
}
.profile__right-closeIcon {
  display: none;
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: 2.5rem;
  color: red;
  cursor: pointer;
  transition: all 0.2s ease-in;
  border: 1px solid red;
  padding: 2rem;
  border-radius: 100%;
  width: 4rem;
  height: 4rem;
  justify-content: center;
  align-items: center;
}
.profile__right-closeIcon:hover {
  transform: translateY(-0.2rem);
}
.profile__right-Icons {
  display: none;
}
.profile__right-top {
  border-bottom: 1px solid #ccc;
}
.profile__right-top-Name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
}
.profile__right-top-profile-Image {
  width: 5rem;
  height: 5rem;
  background-color: #ccc;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile__right-top-profile-Icon {
  font-size: 2rem;
  color: #fff;
}
.profile__right-top-Information {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.2rem;
}
.profile__right-top-Information-name {
  font-size: 1.4rem;
  color: #464749;
}
.profile__right-top-Information-phone {
  color: #ccc;
  font-size: 1.2rem;
}
.profile__right-top-cash {
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile__right-top-cash-Key {
  color: #464749;
  font-size: 1.4rem;
  font-weight: bold;
}
.profile__right-top-cash-Value {
  color: rgb(158, 18, 177);
  font-size: 1.3rem;
  font-weight: bold;
}
.profile__right-buttom {
  padding: 1rem 0;
}
.profile__right-buttom-Item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  cursor: pointer;
  transition: all 0.1s ease;
  border-bottom: 1px solid #eee;
}
.profile__right-buttom-Item > a {
  padding: 2rem 0.5rem;
  width: 100%;
  height: 100%;
}
.profile__right-buttom-Item.active > a {
  color: rgb(158, 18, 177);
}
.profile__right-buttom-Item:hover {
  color: rgb(158, 18, 177) !important;
}
.profile__right-buttom-Item:last-child {
  border-bottom: none;
}
.profile__right-buttom-Icon {
  font-size: 1.6rem;
}
.profile__right-buttom-Text {
  font-size: 1.5rem;
}

.Profile_Section {
  padding: 2.5rem 2rem;
  background-color: #fff;
  box-shadow: 0 0 1.6rem rgba(70, 71, 73, 0.3);
  border-radius: 1rem;
  border: 1px solid silver;
}

.Profile_Section.active {
  display: block;
}

.Profile_Dashbord {
  padding: 2rem;
}
.Profile_Dashbord-Info {
  margin-bottom: 1rem;
}
.Profile_Dashbord-Title {
  color: #464749;
  font-size: 2rem;
}
.Profile_Dashbord__Table {
  width: 100%;
  margin-top: 1rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
}
.Profile_Dashbord__Table-content {
  width: 100%;
  height: 100%;
}
.Profile_Dashbord__Table-Row:last-child {
  text-align: center;
}
.Profile_Dashbord__Table-Row:last-child .Profile_Dashbord__Table-Column {
  border-bottom: none;
  padding: 2rem 0;
  width: 100%;
  transition: all 0.3s ease;
}
.Profile_Dashbord__Table-Row:last-child .Profile_Dashbord__Table-Column:hover {
  background-color: rgb(158, 18, 177);
  cursor: pointer;
}
.Profile_Dashbord__Table-Row:last-child .Profile_Dashbord__Table-Column:hover .Profile_Dashbord__Table-Row-Link {
  color: #fff;
}
.Profile_Dashbord__Table-Column {
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 50% !important;
  padding: 3rem 1rem;
}
.Profile_Dashbord__Table-Column:last-child {
  border-left: none;
}
.Profile_Dashbord__Table-Column-Key {
  color: #818181;
  font-size: 1.4rem;
  font-weight: bold;
}
.Profile_Dashbord__Table-Column-Value {
  color: #626262;
  font-size: 1.6rem;
  font-weight: bold;
  margin-right: 3rem;
}

.Profile_Dashbord-Order {
  margin: 3rem 0;
}
.Profile_Dashbord-Order-Access {
  color: #464749;
  font-size: 2rem;
}
.Profile_Dashbord-Order-Lists {
  margin: 1rem 0;
}
.Profile_Dashbord-Order-Item {
  padding: 2rem 3rem;
  text-align: center;
  font-size: 1.7rem;
}
.Profile_Dashbord-Order-Link {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 3rem;
  transition: all 0.5s ease;
}
.Profile_Dashbord-Order-Link:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}

.Order__Tilte {
  margin: 2rem 0;
  font-size: 2rem;
}
.Order__Table-Column {
  padding: 2rem !important;
}
.Order__Table-Column-Status {
  padding: 1rem;
  width: 16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
}

.Walet__Count {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 3rem 0;
}
.Walet__Count-Content {
  width: 40%;
  display: flex;
  padding: 2rem 1.5rem;
  background-color: rgb(158, 18, 177);
  border-radius: 1rem;
  justify-content: space-around;
  align-items: center;
  color: #fff;
}
.Walet__Count-Key {
  font-weight: bold;
}
.Walet__Count-Value {
  font-size: 1.6rem;
  text-decoration: underline;
}
.Walet__History-Title {
  margin-bottom: 1rem;
  font-size: 2rem;
}
.Walet__History-Column {
  padding: 2rem !important;
}

.Profile__Info {
  padding: 1rem 15rem;
}
.Profile__Info-Title {
  font-size: 2rem;
}
.Profile__Info-Row {
  margin: 1rem 0;
}
.Profile__Info-Content {
  margin: 1rem 0;
}
.Profile__Info-Content-Radio {
  margin: 2rem 0px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.Profile__Info-Content-Box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.Profile__Info-Label {
  width: 100%;
}
.Profile__Info-Text {
  display: block;
  margin-bottom: 0.5rem;
}
.Profile__Info-Input {
  width: 100%;
  padding: 1.5rem 2rem;
  color: #818181;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
  background-color: #f9f9f9;
}
.Profile__Info-Radio {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.Profile__Info-Details, .Profile__Info-Password {
  width: 100%;
  margin: 3rem 0;
  display: flex;
  align-items: center;
  justify-content: end;
}
.Profile__Info-Details-Btn, .Profile__Info-Password-Btn {
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  transition: all 0.2s ease-in-out;
  border: none;
  width: 20rem;
  max-width: 25rem;
  justify-content: center;
}
.Profile__Info-Details-Btn:hover, .Profile__Info-Password-Btn:hover {
  transform: translateY(-0.5rem);
  color: #fff;
}

.Profile__Course-Navbar {
  margin-top: 1.5rem;
  width: 100%;
  border-bottom: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}
.Profile__Course-Item {
  cursor: pointer;
}
.Profile__Course-Link {
  padding: 2rem;
  width: 100%;
  height: 100%;
  display: flex;
  transition: all 100ms ease;
}
.Profile__Course-Link:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
  border-radius: 2rem 2rem 0 0;
}
.Profile__Course-Link.active {
  background-color: rgb(158, 18, 177);
  color: #fff;
  border-radius: 2rem 2rem 0 0;
}
.Profile__Course-Content {
  width: 100%;
  height: 100%;
  padding: 4rem 2rem;
}
.Profile__Course-Section {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}
.Profile__Course-Section:first-child {
  display: block;
}
.Profile__Course-Section-Row {
  margin: 1rem 0;
  border: 1px solid silver;
  border-radius: 1.5rem;
  overflow: hidden;
}
.Profile__Course-Right {
  padding: 0;
}
.Profile__Course-Image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Profile__Course-Left {
  padding: 2rem 3rem;
}
.Profile__Course-Left-Title {
  font-size: 2rem;
}
.Profile__Course-Left-Status {
  margin: 1rem 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}
.Profile__Course-Left-Status-Key {
  font-size: 1.4rem;
  color: #464749;
}
.Profile__Course-Left-Status-Value {
  font-size: 1.2rem;
  color: #818181;
}
.Profile__Course-progresBar {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.Profile__Course-progresBar-Title {
  font-size: 1.4rem;
  color: #464749;
}

.progress-Edit {
  height: 1.5rem;
  border-radius: 1rem;
}

.progress-bar-Edit {
  background-color: rgb(158, 18, 177) !important;
}

.Gift {
  margin: 3rem 0;
  border-radius: 1rem;
  overflow: hidden;
}
.Gift__Items {
  padding: 1.5rem !important;
}

.Support {
  margin: 3rem 0;
}
.Support__List {
  display: flex;
  justify-content: center;
}
.Support__Item, .Support__Item1 {
  border: 1px solid #ccc;
  margin-left: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.Support__Link {
  padding: 2rem;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: #818181;
}
.Support__Link:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.Support__Link.active {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.Support__Icon {
  font-size: 1.8rem;
}
.Support__Text {
  font-size: 1.7rem;
}
.Support__Sections {
  margin-top: 4rem;
}
.Support__Sections-Table {
  text-align: center;
}
.Support__Sections-Item {
  border-radius: 1rem;
  overflow: hidden;
  display: none;
}
.Support__Sections-Item:first-child {
  display: block;
}
.Support__Sections-Column {
  padding: 1.5rem !important;
}
.Support__Sections-Column-Important {
  padding: 0.2rem 3rem;
  background-color: rgb(180, 2, 2);
  color: #fff;
  border-radius: 1rem;
}
.Support__Sections-Column-Status {
  padding: 0.2rem 3rem;
  background-color: rgb(2, 180, 70);
  color: #fff;
  border-radius: 1rem;
}

.darkMessage {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #000;
  opacity: 0.3;
  z-index: 10;
  display: none;
}

.SendBoxMessage {
  padding: 2.5rem 3.5rem;
  width: 40vw;
  height: 60rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 17px rgba(255, 255, 255, 0.3);
  z-index: 15;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border: 1px solid silver;
  overflow: hidden;
  display: none;
}
.SendBoxMessage__Head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ccc;
}
.SendBoxMessage__Head-Text {
  font-size: 1.6rem;
  color: #464749;
}
.SendBoxMessage__Head-Icon {
  color: red;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.SendBoxMessage__Head-Icon:hover {
  transform: translateY(-0.2rem);
}
.SendBoxMessage__Content {
  margin-top: 2.5rem;
}
.SendBoxMessage__Item {
  margin-bottom: 2.5rem;
}
.SendBoxMessage__Item-label {
  font-size: 1.5rem;
  color: #464749;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.SendBoxMessage__Item-Input {
  padding: 1rem 2rem;
  font-size: 1.4rem;
}
.SendBoxMessage__Item-Select {
  padding: 1rem 1.5rem;
  width: 100%;
  background-color: #f6f6f6;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  cursor: pointer;
}
.SendBoxMessage__Item-Option {
  cursor: pointer;
}
.SendBoxMessage__Item-Description {
  width: 100%;
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #f6f6f6;
  font-size: 1.5rem;
  min-height: 15rem;
}
.SendBoxMessage__Item-Btn {
  width: 100%;
}
.SendBoxMessage__Item-Btn-Box {
  width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid green;
  color: green;
  background-color: #54e678;
  cursor: pointer;
  transition: all 0.2s ease;
}
.SendBoxMessage__Item-Btn-Box:hover {
  transform: translateY(-0.2rem);
}

.Train {
  margin-top: 3.5rem;
}
.Train__Content-Item {
  padding: 2.5rem 3rem;
  border: 1px solid #ccc;
  border-radius: 1.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}
.Train__Content-Item:hover {
  transform: translateY(-0.5rem);
}
.Train__Content-Link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
}
.Train__Content-Box {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Train__Content-Box-Image {
  width: 15rem;
}
.Train__Content-Box-Text {
  font-size: 1.4rem;
}

.ticket__Content {
  margin-top: 2.5rem;
}
.ticket__Row {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.ticket__Input {
  padding: 1rem 2rem;
  border: 1px solid #ccc;
  border-radius: 0.7rem;
  font-size: 1.4rem;
  color: #484848;
}
.ticket__Select {
  padding: 1rem 1.5rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #fcfcfc;
  color: #484848;
}
.ticket__Option {
  color: #484848;
}
.ticket__TextArea {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  min-height: 25rem;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  color: #484848;
}
.ticket__Label {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ticket__Btn {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.ticket__Btn:hover {
  transform: translateY(-0.2rem);
}
.ticket__Message-Links {
  padding: 0.5rem;
  display: flex;
  justify-content: end;
  align-items: center;
}
.ticket__Message-Links-Item {
  padding: 1rem 2.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  transition: all 0.2s ease-in;
  white-space: normal;
}
.ticket__Message-Links-Item:hover {
  transform: translateY(-0.5rem);
  color: #fff;
}
.ticket__Message-Box {
  margin-top: 3rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
  padding: 2rem 3rem;
}
.ticket__Message-Content {
  padding: 3rem;
}
.ticket__Message-Head {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.ticket__Message-Title {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}
.ticket__Message-Title-Text {
  font-size: 1.5rem;
}
.ticket__Message-Close-Link {
  padding: 0.8rem 2.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  border-radius: 0.5rem;
  font-size: 1.3rem;
  transition: all 0.2s ease;
}
.ticket__Message-Close-Link:hover {
  color: #fff;
  transform: translateY(-0.2rem);
}
.ticket__Message-Subject-Icon {
  font-size: 1.3rem;
}
.ticket__Message-Item-Head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4b4b4b;
  margin-bottom: 2rem;
  font-size: 1.7rem;
  font-weight: bold;
}
.ticket__ReplyBox {
  margin-top: 3rem;
  border: 1px solid silver;
  padding: 1.5rem 3rem;
  border-radius: 0.5rem;
}
.ticket__ReplyBox-Head {
  margin-bottom: 1rem;
}

.profileMyExam {
  margin-top: 2.5rem;
}
.profileMyExam__Item {
  padding: 1.5rem 3rem;
}
.profileMyExam__Content {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.4rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
  padding: 2.5rem 2rem;
}
.profileMyExam__Content-Title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.8rem;
}
.profileMyExam__Content-Title-Box {
  font-size: 1.3rem;
  color: #5a5a5a;
}

.vip__dashboard-lists {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vip__dashboard-item-link {
  padding: 1rem 2rem;
  background-color: purple;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in;
}
.vip__dashboard-item-link:hover {
  transform: translateY(-0.5rem);
  color: #fff;
}
.vip__dashboard-item-list {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.vip__dashboard-item-profile-Pic {
  width: 3rem;
}
.vip__dashboard-online {
  width: 25px;
  height: 25px;
  background-color: #cccccc;
  display: inline-block;
  border-radius: 100%;
}
.vip__dashboard-online.active {
  background-color: green;
}
.vip__Dashboard-Content {
  height: 100%;
}
.vip__SellChart {
  height: 100%;
  position: relative;
}
.vip__Main-Consulting-link {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0.8rem;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f8f8f8;
  font-weight: bold;
  background: linear-gradient(200deg, #4e54c8 40%, #8f94fb 100%);
  font-size: 13px;
}
.vip__Main-Consulting-cancelled {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0.8rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  color: #f8f8f8;
  font-weight: bold;
  background: linear-gradient(200deg, #c84e6a 40%, #d4394e 100%);
  font-size: 13px;
}
.vip__Main-Consulting-img {
  max-width: 100%;
}
.vip__Main-items {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0.8rem;
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f8f8f8;
  font-weight: bold;
}
.vip__Main-items-1 {
  background: linear-gradient(200deg, #4e54c8 40%, #8f94fb 100%);
}
.vip__Main-items-2 {
  background: linear-gradient(200deg, #ff4e50 40%, #f9d423 100%);
}
.vip__Main-items-3 {
  background: linear-gradient(200deg, #00b09b 40%, #96c93d 100%);
}
.vip__Main-items-4 {
  background: linear-gradient(200deg, rgb(142, 45, 226) 40%, rgb(74, 0, 224) 100%);
}
.vip__container {
  position: relative;
  overflow: hidden;
  width: auto !important;
  height: 400px;
}
.vip__text {
  font-size: 12px;
  cursor: pointer;
  background: rgb(158, 18, 177);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in;
}
.vip__text:hover {
  color: #fff;
  transform: translateY(-0.2rem);
}
.vip__source {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.vip__article-main {
  padding: 0 1rem;
}
.vip__article-content {
  background-color: #fbfbfb;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  overflow: hidden;
}
.vip__article-pic {
  width: 100%;
  object-fit: cover;
  height:20rem;
}
.vip__article-info {
  margin-top: 0.7rem;
}
.vip__article-times {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.vip__article-item {
  gap: 0.9rem;
  color: #6a6a6a;
  display: flex;
  align-items: center;
}
.vip__article-description {
  font-size: 13px;
  line-height: 31px;
  padding: 0 2rem;
  margin-top: 1rem;
}
.vip__article-description-text {
 font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin-top: 1rem;
}
.vip__article-link {
  width: 100%;
  background-color: rgb(158, 18, 177);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  font-size: 14px;
  margin-top: 1.5rem;
}
.vip__article-link:hover {
  color: #fff;
}
.vip__Main-btn-link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(200deg, #4e54c8 40%, #8f94fb 100%);
  padding: 1.5rem;
  border-radius: 0.3rem;
  color: #fff;
  transition: all 0.2s ease-in;
  font-size: 1.5rem;
  margin-top: 1rem;
}
.vip__Main-btn-link--purple {
  width: 100%;
  display: flex;
  justify-content: center;
  background: linear-gradient(200deg, #800080 40%, #800080 100%);
  position: absolute;
  bottom: 0;
  right: 0;
}
.vip__Main-btn-link--cancelled {
  width: 100%;
  display: flex;
  justify-content: center;
  background: linear-gradient(200deg, #800024 40%, #800000 100%);
  position: absolute;
  bottom: 0;
  right: 0;
}
.vip__Main-btn-link:hover {
  color: #fff;
  transform: translateY(-0.2rem);
}


.detailsinfo__head {
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  background: linear-gradient(200deg, rgb(142, 45, 226) 40%, rgb(74, 0, 224) 100%);
  color: #fff;
  border-radius: 0.5rem;
}
.detailsinfo__content {
  max-height: 60rem;
  overflow: auto;
}
.detailsinfo__content-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  border-radius: 0.4rem;
  padding: 0.8rem 1.5rem;
  font-size: 14px;
  margin: 1rem 0;
}
.detailsinfo__content-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eee;
  color: #959595;
  border-radius: 0.4rem;
  padding: 0.8rem 1.5rem;
  font-size: 14px;
  margin: 1rem 0;
}
.detailsinfo__content-items.active {
  color: green;
  background-color: #a7edad;
}
.detailsinfo__content-items--circle {
  width: 15px;
  height: 15px;
  background-color: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detailsinfo__content-items--circle > i {
  visibility: hidden;
}
.detailsinfo__content-items--circle.active {
  background-color: green;
}
.detailsinfo__content-items--circle.active i {
  visibility: visible;
  color: #fff;
  font-size: 9px;
}

.highcharts-root {
  width: 100% !important;
}

.highcharts-figure-Vip {
  width: 100%;
  min-width: auto !important;
  max-width: none !important;
}

.consulting {
  width: 100%;
}
.consulting__sidebar-item {
  background-color: #f9f9f9;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in;
  margin-bottom:1rem;
}
.consulting__sidebar-item:hover {
  transform: translateX(-1rem);
}
.consulting__sidebar-link {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.consulting__sidebar-image {
  height: 100%;
  display: flex;
}
.consulting__sidebar-pic {
  height: 100%;
  width: 10rem;
  object-fit: cover;
  border-radius: 1rem;
}
.consulting__sidebar-info {
  font-size: 1.4rem;
}
.consulting__sidebar-info-icons {
  margin-top: 0.5rem;
  display: flex;
  gap: 1rem;
  font-size: 11px;
  color: #ccc;
}
.consulting__Main {
  position: sticky;
  top: 0;
}
.consulting__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.consulting__content-position {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: 1rem;
}
.consulting__content-duration {
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  background-color: #fff;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 0.3rem;
  font-size: 12px;
}
.consulting__content-dates {
  background-color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 12px;
}
.consulting__content-times {
  background-color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 12px;
}
.consulting__content-film {
  width: 100%;
  max-height: 200px;
  margin-top: 1.5rem;
  position: relative;
  cursor: pointer;
  border-left: 8px solid red;
  border-radius: 0.5rem;
}
.consulting__content-film.active .consulting__content-cover, .consulting__content-film.active .consulting__content-circle, .consulting__content-film.active .consulting__content-position {
  display: none;
}
.consulting__content-film.active {
  border-left: 8px solid green !important;
}
.consulting__content-film.active .consulting__content-duration {
  background-color: green;
  color: #fff;
}
.consulting__content-img {
  max-height: 200px;
  border-radius: 0 15px 15px 0;
  overflow: hidden;
  position: relative;
}
.consulting__content-img-pic {
  width: 100%;
  object-fit: cover;
  height: 100%;
  display: flex;
}
.consulting__content-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}
.consulting__content-circle {
  width: 50px;
  height: 50px;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}
.consulting__content-circle-icon {
  color: black;
  width: 15px;
}
.consulting__video {
  width: 100%;
  display: flex;
  justify-content: center;
}
.consulting__video-src {
  width: 80%;
  border-radius: 1rem;
  background-size: cover;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  object-fit: cover;
}
.consulting__video-src:hover {
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.5);
}
.consulting__information {
  margin-top: 3.5rem;
  width: 80%;
}
.consulting__title {
  width: 100%;
  text-align: center;
  align-items: center;
  font-size: 17px;
  font-weight: bold;
  color: #464749;
}
.consulting__lists {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
}
.consulting__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  color: #7d7d7d;
}
.consulting__description-text {
  text-align: justify;
  line-height: 30px;
  font-size: 15px;
  color: #464749;
}
.consulting__links {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}
.consulting__links-download {
  background-color: rgb(158, 18, 177);
  width: 50%;
  color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
  gap: 1rem;
  transition: all 0.2s ease-in;
}
.consulting__links-download:hover {
  color: #fff;
  transform: translateY(-0.3rem);
}
.consulting-profile__content {
  width: 100%;
  padding: 1.5rem;
  border-radius: 0.3rem;
  background-color: #fff;
  display: flex;
  gap: 1rem;
}
.consulting-profile__content--bg {
  background-color: #323232 !important;
}
.consulting-profile__item {
  display: flex;
  width: 100%;
}
.consulting-profile__image {
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.2rem 0.5rem rgba(255, 255, 255, 0.3);
  border: 1px solid silver;
}
.consulting-profile__pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.consulting-profile__Header {
  font-size: 2rem;
}
.consulting-profile__lists {
  margin: 1.5rem 0;
}
.consulting-profile__items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f9f9f9;
  padding: 1.5rem 1rem;
  font-size: 1.3rem;
  margin-top: 0.5rem;
}
.consulting-profile__key {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.consulting-profile__details {
  font-size: 13px;
  position: relative;
  padding: 0.2rem 1.5rem;
  margin-top: 1rem;
}
.consulting-profile__details::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: green;
}
.consulting__coverd {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}
.consulting__cancelled {
  width: 50%;
  height: max-content;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 3rem 3.5rem;
  display: none;
}
.consulting__cancelled-text {
  font-size: 1.6rem;
  font-weight: bold;
  color: #454545;
}
.consulting__cancelled-description {
  margin: 1.5rem 0;
  width: 100%;
  height: 15rem;
  max-height: 30rem;
  border: 1px solid #eee;
  background-color: #fcfcfc;
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
}
.consulting__cancelled-btns {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.consulting__cancelled-btn {
  width: 20rem;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
}
.consulting__cancelled-btn--green {
  background-color: green;
}
.consulting__cancelled-btn--red {
  background-color: red;
}
.consulting__cancelled-icon {
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  color: red;
  font-size: 2.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.consulting__cancelled-icon:hover {
  transform: translateY(-0.2rem);
}
.consulting__showCancelled {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.consulting__showCancelled-text {
  font-size: 100px;
  transform: rotate(-30deg);
  color: darkred;
}
.exDetails-exinfo__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f9f9f9;
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
  border-radius: 0.3rem;
}
.exDetails-exinfo__key {
  color: #868686;
}
.exDetails-exinfo__value {
  color: #868686;
}
.exDetails-download__description {
  font-size: 1.4rem;
}
.exDetails-download__text {
  margin-top: 0.8rem;
}
.exDetails-download__date {
  color: red;
  font-weight: bold;
}
.exDetails-download__step {
  color: red;
  font-weight: bold;
}
.exDetails-download__file {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid #eee;
  padding-top: 1.2rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.exDetails-download__file-link {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.7rem 0;
  background-color: purple;
  color: #fff;
  font-size: 14px;
}
.exDetails-download__pic {
  width: 7.5rem;
}
.exDetails-download__links {
  width: 100%;
  color: green;
  display: block;
  margin-top: 0.7rem;
  font-weight: bold;
}
.exDetails-description {
  margin-top: 1rem;
  padding: 1rem 2rem;
  font-size: 1.4rem;
  color: #787878;
}
.exDetails-description__text {
  font-size: 1.5rem;
  line-height: 3rem;
  text-align: justify;
  color: #464749;
}
.exDetails-list {
  margin-top: 1.5rem;
}
.exDetails-list__item {
  margin-top: 1rem;
  position: relative;
}
.exDetails-list__item::before {
  content: "";
  width: 5px;
  height: 100%;
  background-color: red;
  position: absolute;
  right: 0;
  top: 0;
}
.exDetails-list__link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f6f6f6;
  padding: 0.8rem 1rem;
  font-size: 1.3rem;
  border-radius: 0.2rem;
}


#online {
  padding: 2rem 4rem;
}

.online {
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
}
.online__Top {
  background-color: rgba(43, 114, 206, 0.2);
  padding: 2rem 3rem;
}
.online__Top-Content-Column-4 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}
.online__Top-Content-Icon {
  font-size: 1.8rem;
}
.online__Top-Content-Text {
  font-size: 1.5rem;
}
.online__Top-Content-Column-8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.online__Top-Content-Column-8-Item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.online__Top-Content-Home-Link {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.online__Top-Content-CheckBox-Input {
  width: 1.7rem;
  height: 1.7rem;
  cursor: pointer;
}
.online__Buttom {
  background-color: #fff;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
}
.online__Buttom-Right {
  height: 100%;
  padding: 0;
}
.online__Buttom-Lists {
  border-left: 1px solid #ccc;
  overflow: auto;
  height: 100%;
  max-height: 90rem;
  border-bottom: 1px solid #ccc;
}
.online__Buttom-Item {
  padding: 2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.online__Buttom-Item-Link {
  width: 100%;
  height: 100%;
}
.online__Buttom-Item.active {
  background-color: #f7f7f7;
}
.online__Buttom-Item-Right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.online__Buttom-Item-Icon {
  font-size: 1.4rem;
  color: #ccc;
}
.online__Buttom-Item-Title {
  font-size: 1.3rem;
  color: rgb(34, 34, 34);
}
.online__Buttom-Item-Left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.online__Buttom-Item-Time {
  font-size: 1.3rem;
  color: #888;
}
.online__Buttom-Item-Input {
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
}
.online__Buttom-Left {
  padding: 5rem;
}
.online__Buttom-Left-Content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.online__Buttom-Left-Content-Video {
  width: 100%;
  height: 100%;
  max-height: 71rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  object-fit: cover;
}
.online__Buttom-Left-Content-Video:hover {
  box-shadow: 0 0 35px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.online__Buttom-Left-Zip {
  margin: 5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.online__Buttom-Left-Download, .online__Buttom-Left-Peivast {
  padding: 1.5rem 3.5rem;
  border: 1px solid rgb(158, 18, 177);
  color: rgb(158, 18, 177);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: all 0.4s ease;
  cursor: pointer;
}
.online__Buttom-Left-Download:hover, .online__Buttom-Left-Peivast:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.online__Buttom-Left-Download:hover .online__Buttom-Left-Download-Box, .online__Buttom-Left-Download:hover .online__Buttom-Left-Peivast-Box, .online__Buttom-Left-Peivast:hover .online__Buttom-Left-Download-Box, .online__Buttom-Left-Peivast:hover .online__Buttom-Left-Peivast-Box {
  color: #fff;
}
.online__Buttom-Left-Download-Icon, .online__Buttom-Left-Peivast-Icon {
  font-size: 1.3rem;
}
.online__Buttom-Left-Download-Box, .online__Buttom-Left-Peivast-Box {
  font-size: 1.5rem;
  color: rgb(158, 18, 177);
}

.checkLogin__content {
  padding: 2rem 4rem;
  box-shadow: 0 0 1.6rem rgba(70, 71, 73, 0.3);
  border-radius: 1rem;
}
.checkLogin__Header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.checkLogin__Header-Box {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.checkLogin__Header-Box-Icon {
  font-size: 2rem;
  color: rgb(158, 18, 177);
}
.checkLogin__Header-Box-Link {
  color: rgb(158, 18, 177);
}
.checkLogin__Box-Column {
  padding: 2rem;
}
.checkLogin__Box-Image {
  padding: 3rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.checkLogin__Box-Image-Pic {
  max-width: 100%;
}
.checkLogin__Box-Link {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0;
  border: 1px solid rgb(158, 18, 177);
  margin-top: 1rem;
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.checkLogin__Box-Link:hover {
  background-color: rgb(158, 18, 177);
  cursor: pointer;
}
.checkLogin__Box-Link:hover .checkLogin__Box-Link-Text {
  color: #fff;
}
.checkLogin__Box-Link-Text {
  color: rgb(158, 18, 177);
}

.Verification-Content {
  width: 100rem;
  border: 1px solid silver;
}
.Verification__Image-Content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.Verification__Image-Content-Pic {
  max-width: 100%;
}
.Verification__Main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}
.Verification__Header {
  display: flex;
  font-size: 2.1rem;
  font-weight: bold;
}
.Verification__Number {
  font-size: 1.7rem;
  color: rgb(100, 100, 100);
  margin: 2rem 0;
}
.Verification__Number-Phone {
  font-weight: bold;
  color: rgb(158, 18, 177);
  border: none;
  width: 13.5rem;
  padding: 1rem 0;
  text-align: center;
}
.Verification__Form {
  width: 100%;
  height: 100%;
}
.Verification__Input {
  width: 100%;
}
.Verification__Code {
  width: 100%;
  padding: 1.2rem 2.5rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
  text-align: center;
}
.Verification__Code:focus {
  border: 2px solid rgb(158, 18, 177);
}
.Verification__ReSend {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.6rem;
}
.Verification__ReSend-Link {
  color: rgb(158, 18, 177);
  font-weight: bold;
  font-size: 1.3rem;
}
.Verification__Btn-Box {
  margin: 1.5rem 0;
  width: 100%;
}
.Verification__Btn {
  width: 100%;
  background-color: rgb(158, 18, 177);
  color: #fff;
  cursor: pointer;
  padding: 1.5rem 0;
  border: none;
  border-radius: 1rem;
}
.Verification__Checked {
  text-align: center;
  margin: 1rem 0;
}
.Verification__Checked span {
  font-size: 1.3rem;
  color: red;
}

.admin__Left {
  padding: 3rem !important;
}

.admin__category-table {
  width: 100%;
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid silver;
  padding: 1.5rem 2rem;
  margin-top: 1.5rem;
}
.admin__category-table-Image {
  max-width: 20rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.3);
}
.admin__category-table-Box {
  width: 100%;
}
.admin__category-table-thead {
  background-color: aliceblue;
}
.admin__category-table-Column {
  border: 1px solid #ccc;
  padding: 1.5rem !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.admin__category-table-Icon {
  font-size: 2.5rem;
  cursor: pointer;
  color: rgb(158, 18, 177);
}
.admin__category-table-Input {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.admin__category-PodCast {
  display: none;
}
.admin__category-PodCast-Content {
  padding: 1.5rem 2.5rem !important;
  border: 1px solid #ccc;
}
.admin__category-PodCast-Label {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.admin__category-PodCast-Head {
  font-size: 1.6rem;
  color: purple;
  font-weight: bold;
  margin: 0;
}
.admin__category-PodCast-Description {
  font-size: 1.4rem;
  line-height: 3.5rem;
}

.admin_brudcrumb {
  width: 100%;
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid silver;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.admin_brudcrumb-Title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin_brudcrumb-Buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin_brudcrumb-Buttons-Link {
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.admin_brudcrumb-Buttons-Link-Trash {
  background-color: #dc1e00;
}
.admin_brudcrumb-Buttons-Link-add {
  background-color: #00a049;
}
.admin_brudcrumb-Buttons-Icon {
  color: #fff;
  font-size: 1.3rem;
}
.admin_brudcrumb-Buttons-Text {
  color: #fff;
  font-size: 1.4rem;
}
.admin_brudcrumb-Link::before {
  content: "←";
  margin-left: 0.8rem;
}
.admin_brudcrumb__Edit {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin_brudcrumb__Edit-Success {
  font-weight: bold;
  color: #00a049;
}
.admin_brudcrumb__Edit i {
  color: #00a049;
}
.admin_brudcrumb__Back {
  padding: 1rem 1.5rem;
  border: 1px solid #00a049;
  color: #00a049;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.3rem;
}
.admin_brudcrumb__Back:hover {
  color: #fff;
  background-color: #00a049;
}

.admin {
  padding: 0;
  height: 100vh;
}
.admin__ButtomBar {
  height: 90%;
}
.admin__Content {
  margin: 0;
  height: 100%;
}
.admin__Right {
  padding: 0;
  background: #ffffff;
  margin-top: 0;
  padding-bottom: 30px;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
  position: relative;
}
.admin__Right-Main {
  position: sticky;
  top: 0;
  right: 0;
}
.admin__Lists {
  overflow: auto;
  max-height: 100vh;
  padding-bottom: 1.5rem;
}
.admin__Lists-Item {
  padding: 2rem 3rem;
  position: relative;
}
.admin__Lists-Item::after {
  content: "↫";
  position: absolute;
  left: 24px;
  bottom: -3px;
  transform: translate(-50%, -50%);
  font-size: 2.1rem;
}
.admin__Lists-Item-Link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(49, 58, 70, 0.8);
}
.admin__Lists-Item.active .admin__Lists-Item-Link {
  background-color: #eee;
  color: #313a46;
}
.admin__Lists-Item.active {
  background-color: #eee;
}
.admin__Lists-Item-Icon {
  font-size: 1.8rem;
}
.admin__Lists-Item-Text {
  font-size: 1.6rem;
}
.adminBody {
  background-color: #e3e3e3;
}

.adminrow {
  margin: 0;
  padding: 0;
}

.adminrow > * {
  padding: 0;
}

.admin__TopBar-Right {
  min-height: 100% !important;
}
.admin__TopBar-Box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #40465a;
  padding: 2rem;
}
.admin__TopBar-Text {
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
}
.admin__TopBar-Left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
  background-color: #4f5467;
}
.admin__TopBar-Duty {
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
}
.admin__TopBar-Duty-Image {
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  background-color: #ccc;
  border: 1px solid silver;
  display: flex;
  overflow: hidden;
}
.admin__TopBar-Duty-Image-Pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin__TopBar-Duty-Text, .admin__TopBar-Duty-Head {
  border: 1px solid #fff;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.4s ease;
}
.admin__TopBar-Duty-Text:hover, .admin__TopBar-Duty-Head:hover {
  background-color: rgb(158, 18, 177);
}
.admin__TopBar-Icons {
  display: flex;
  gap: 3rem;
}
.admin__TopBar-Icons-Box {
  border-radius: 0.5rem;
  position: relative;
  transition: all 0.3s ease;
}
.admin__TopBar-Icons-Box:hover {
  transform: translateY(-0.5rem);
}
.admin__TopBar-Icons-Box-Value {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -1rem;
  right: -1rem;
  background-color: #f36270;
  color: #fff;
  font-size: 1rem;
  border-radius: 100%;
}
.admin__TopBar-Icons-Name {
  font-size: 2.8rem;
  color: #fff;
}
.admin__TopBar-Icons-Name-1 {
  transform: rotateY(180deg);
}

.admin__addcategory, .admin__addcourse {
  width: 100%;
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid silver;
  padding: 1.5rem 2rem;
  margin-top: 1.5rem;
}
.admin__addcategory-form, .admin__addcourse-form {
  display: flex;
  gap: 4rem;
  flex-direction: column;
}
.admin__addcategory-select, .admin__addcourse-select {
  width: 80%;
  padding: 1.5rem 1rem;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 0.8rem;
  cursor: pointer;
}
.admin__addcategory-select-option, .admin__addcourse-select-option {
  cursor: pointer;
  background-color: #f8f8f8;
}
.admin__addcategory-label, .admin__addcourse-label {
  width: 60%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}
.admin__addcategory-Key, .admin__addcourse-Key {
  font-size: 1.6rem;
  color: #4f5467;
  width: 20%;
}
.admin__addcategory-Value, .admin__addcourse-Value {
  width: 80%;
  border: 1px solid #ccc;
  padding: 1.5rem 2rem;
  font-size: 1.8rem;
  border-radius: 0.8rem;
}
.admin__addcategory-Btn, .admin__addcourse-Btn {
  width: 19rem;
  border-radius: 0.8rem;
  border: none;
  background-color: #00a049;
  padding: 1rem;
  font-size: 1.6rem;
  color: #fff;
}

.adminInformation {
  padding: 4.5rem;
}
.adminInformation__Image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adminInformation__Image-Pic {
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.3);
  border: 1px solid green;
}
.adminInformation__Login {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.6rem;
}
.adminInformation__Login-Value {
  color: #7a7a7a;
}
.adminInformation__Info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.adminInformation__Info-List {
  width: 50rem;
  margin-top: 2.5rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.adminInformation__Info-Item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1.5rem;
}
.adminInformation__Info-Item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.adminInformation__Info-Key {
  font-size: 1.5rem;
}
.adminInformation__Info-Value {
  font-size: 1.5rem;
  color: #7a7a7a;
}

.admin_verTrain-Btn {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0;
  font-size: 1.7rem;
  margin: 1.5rem;
  float: left;
}

.adminCourse__Label-textarea-VerbTrain {
  width: 80% !important;
}

.adminCourse {
  padding: 0 1.5rem;
}
.adminCourse__Row {
  margin: 2rem 0;
}
.adminCourse__Label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.adminCourse__Label-Select {
  width: 80%;
  background-color: #f6f6f6;
  padding: 1rem;
  border: 1px solid #c0c0c0;
  border-radius: 0.5rem;
  cursor: pointer;
}
.adminCourse__Label-Text {
  width: fit-content;
}
.adminCourse__Label-Value {
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem;
}
.adminCourse__Label-textarea {
  width: 85%;
  min-height: 25rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem;
}
.adminCourse__Label-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.adminCourse__Label-file-Box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
}
.adminCourse__Label-file-Box-Image {
  max-width: 36rem;
  max-height: 16rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 1.7rem rgba(0, 0, 0, 0.4);
}
.adminCourse__Label-Image {
  border: 1px solid #ccc;
  padding: 1.5rem 6rem;
  border-radius: 1rem;
  background-color: #f9f9f9;
  cursor: pointer;
}
.adminCourse__Label-Text-Hidden {
  visibility: hidden;
}
.adminCourse__Btn {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(158, 18, 177);
  color: #fff;
  font-size: 1.4rem;
  border: none;
  border-radius: 0.5rem;
}

.cke_chrome {
  width: 89% !important;
}

.section__Details-Intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.section__Details-Intro-Col {
  padding: 0 !important;
}
.section__Details-Intro-Row {
  display: none;
}
.section__Details-Intro-Head {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.section__Details-Intro-Box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1.5rem 3rem;
  background-color: #f0f8ff;
  border-bottom: 1px solid #ccc;
}
.section__Details-Intro-Box:first-child {
  border-left: 1px solid #ccc;
}
.section__Details-Intro-Key {
  font-size: 1.7rem;
}
.section__Details-Intro-value {
  font-size: 1.4rem;
}
.section__Details-Intro-Text {
  padding: 1.5rem 2rem;
  background-color: #f6f6f6;
  width: 100%;
}
.addspecial__Label-Value {
  width: 86%;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem;
}

#cke_editor3,
#cke_editor4,
#cke_editor5,
#cke_editor6,
#cke_editor7,
#cke_editor8,
#cke_editor9,
#cke_editor10,
#cke_editor11,
#cke_editor12 {
  width: 86% !important;
}

.adminspecial__Row label {
  margin-top: 1rem;
}

.addspecial__add {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #f0f2f7;
  border: 1px solid silver;
}
.addspecial__add-Text {
  color: #464749;
  font-size: 1.8rem;
}

.Details {
  margin: 2rem 0;
}
.Details__Row {
  padding: 3rem 2rem;
  border-radius: 1rem;
  margin: 1.5rem 0;
  border: 1px solid #eee;
}
.Details__Row-family {
  background-color: #98dd8e;
}
.Details__Row-product {
  background-color: #ffd36b;
}
.Details__Row-price {
  background-color: #dd928e;
}
.Details__Row-code {
  background-color: #b2e45a;
}
.Details__Row-ChangePay {
  width: 100%;
  padding: 1rem 0rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.Details__Row-ChangePay-Btn {
  padding: 1rem 2rem;
  background-color: green;
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
  border-radius: 0.5rem;
  transition: all 0.1s ease-in;
}
.Details__Row-ChangePay-Btn:hover {
  transform: translateY(-0.2rem);
  color: #fff !important;
}
.Details__Row-Factor {
  padding: 1.5rem 3rem;
  border-radius: 0.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease-in-out;
}
.Details__Row-Factor:hover {
  color: #fff;
  transform: translateY(-0.5rem);
}
.Details__Row-Content {
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  gap: 1rem;
  font-weight: bold;
}
.Details__Row-Content-FinalPrice {
  background-color: #fff;
}
.Details__Row-Header {
  text-align: center;
  margin-bottom: 2rem;
}
.Details__Row-Header-Title {
  font-size: 2.2rem;
  font-weight: bold;
}

.Factor {
  display: flex;
  justify-content: center;
  margin: 7rem auto;
}
.Factor__Content {
  width: 100%;
  border: 1px solid #ccc;
  padding: 1.5rem;
}
.Factor__Content-Text {
  font-size: 2rem;
  font-weight: bold;
  color: rgb(158, 18, 177);
}
.Factor__Content-Column {
  display: flex;
  align-items: center;
}
.Factor__Content-Column-Center {
  justify-content: center;
}
.Factor__Content-Column-Left {
  justify-content: end;
}
.Factor__Content-Row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Factor__Row {
  padding: 2rem 1rem;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}
.Factor__Row-Content {
  padding: 1.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.Factor__Row-Content:first-child {
  border-bottom: 1px solid #ccc;
}
.Factor__Row-Content1 {
  padding: 1.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.Factor__Row-Content1-Box {
  width: 38rem;
  height: 25rem;
  border: 1px solid #ccc;
  padding: 1rem;
}

.admin__Stat {
  padding: 2rem;
  overflow: hidden;
}
.admin__Stat-Title {
  margin: 2rem 0;
  font-size: 2rem;
  font-weight: bold;
  position: relative;
  width: fit-content;
  z-index: 10;
}
.admin__Stat-Title:after {
  content: "";
  background-color: rgb(158, 18, 177);
  opacity: 0.4;
  width: 125%;
  height: 3rem;
  position: absolute;
  right: -20px;
  top: 0;
  border-radius: 1rem 0 0 1rem;
}
.admin__Stat-Column {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 2rem;
}
.admin__Stat-Column-Title {
  font-weight: bold;
}
.admin__Stat-Column-Content {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.admin__Stat-Column-Select {
  padding: 1rem 1.5rem;
  border: 1px solid #ccc;
  background-color: #eee;
  border-radius: 0.5rem;
  width: 13rem;
  text-align: center;
  cursor: pointer;
}
.admin__Stat-Column-Option {
  transition: all 0.2s ease-in-out;
}
.admin__Stat-Column-Option:hover {
  background-color: #ccc;
  cursor: pointer;
}
.admin__Stat-Btn {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}
.admin__Stat-Btn-Box {
  width: 100%;
  padding: 1.5rem 2rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  border: none;
  border-radius: 1rem;
  font-weight: bold;
}

.admin_brudcrumb-Buttons-Link-Success {
  background-color: #00a049;
}

.admin_brudcrumb-Select {
  padding: 0.7rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid silver;
  cursor: pointer;
}

.admin__comments-Response {
  display: none;
}

.admin__comments-Response-Column {
  height: 10rem;
  max-height: 50rem;
  background-color: #fafafa !important;
}

.admin__comments-Response-Input {
  width: 100%;
  padding: 2.5rem;
  border-radius: 1rem;
  border: 1px solid silver;
}

.admin__comments-Response-Box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.admin__comments-Response-Btn {
  margin: 1rem 0;
  padding: 1rem 2.5rem;
  border-radius: 1rem;
  border: 1px solid silver;
  background-color: #ffc107;
}

.adminCourse__Label-Text1 {
  width: 18rem;
}

.support {
  padding: 4rem;
}
.support__Content-Btn {
  display: flex;
  justify-content: flex-end;
}
.support__Content-Btn-Box {
  width: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem;
  border-radius: 0.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  border: none;
}
.support__Content-Row {
  display: flex;
  align-items: center;
}
.support__Content-Column {
  margin: 1rem;
}
.support__Content-Column-Row {
  display: flex;
  align-items: center;
}
.support__Content-Column-Row-Response {
  margin-right: 10rem;
}
.support__Content-Textarea {
  border: 1px solid #ccc;
  border-radius: 1rem;
  padding: 2rem;
}

.adminlogin_Body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: black;
  overflow: hidden !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.adminLogin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.adminLogin__Form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.adminLogin_Content {
  width: 45rem;
  height: 100vh;
  border-radius: 4rem 0 0 4rem;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid #fff;
  padding: 2rem;
}
.adminLogin__showError {
  color: red;
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
}
.adminLogin__Header {
  text-align: center;
  margin: 2.5rem 0;
}
.adminLogin__Header-Text {
  font-size: 2.2rem;
  color: #000;
  font-weight: bold;
}
.adminLogin__Box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.adminLogin__Box-Label {
  width: 100%;
  margin: 1.5rem 0;
  position: relative;
}
.adminLogin__Box-Text {
  color: #000;
  display: block;
  margin-bottom: 1rem;
  font-weight: bold;
}
.adminLogin__Box-Input {
  padding: 2.2rem 2rem;
  border: 1px solid silver;
  background-color: #f7f4c0;
  color: #000;
  font-weight: bold;
  width: 100%;
  border-radius: 0.5rem;
}
.adminLogin__Icon {
  position: absolute;
  left: 2rem;
  top: 5.5rem;
  font-size: 2rem;
  color: #000;
}
.adminLogin__Btn {
  margin: 2rem 0;
}
.adminLogin__Image {
  margin: 3rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.adminLogin__Image-Pic {
  margin: 1rem 0;
}
.adminLogin__Subtite-Blue {
  color: #2e51b4;
  font-weight: bold;
  font-size: 2rem;
}
.adminLogin__Subtite-Purple {
  color: rgb(158, 18, 177);
  font-weight: bold;
  font-size: 2rem;
}
.adminLogin__Btn-Button {
  width: 100%;
  background-color: rgb(158, 18, 177);
  padding: 1.5rem;
  border: none;
  border-radius: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
  font-family: iransansweb;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
  color: #fff;
}
.adminLogin__Bg-Pic {
  max-width: 23%;
  position: absolute;
  bottom: -25px;
  right: 0;
}

.admin__PCourse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.admin__PCourse-Column {
  border: none !important;
}
.admin__PCourse-Img {
  width: 5rem;
}
.ReportCard {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.ReportCard__Item-Select {
  padding: 1rem 2rem;
  font-size: 1.3rem;
  background-color: #eee;
  border: 1px solid silver;
  border-radius: 0.5rem;
}
.ReportCard__Item-Content {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.ReportCard__Item-Key {
  width: 12%;
  color: #5a5a5a;
  font-size: 1.5rem;
  font-weight: bold;
}
.ReportCard__Item-Value-Input {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.5rem 2rem;
  width: 19rem;
  font-size: 1.3rem;
  color: #7c7c7c;
}
.ReportCard__Confirm {
  display: flex;
  justify-content: end;
  align-items: center;
}
.ReportCard__Confirm-Btn {
  background-color: darkgreen;
  width: 20rem;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.ReportCard__Confirm-Btn:hover {
  transform: translateY(-0.2rem);
}

.adminDashboard__Content {
  width: 100%;
  padding: 0.5rem;
}
.adminDashboard__VipContent{
      width: 100%;
  padding: 0.5rem;
  position: sticky;
  top: 1rem;
  right: 0;
}
.adminDashboard__Content-OverFlow {
  max-height: 41rem;
  overflow: auto;
}
.adminDashboard__Content-Header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0 3rem 0;
}
.adminDashboard__Content-Header-Border {
  padding-bottom: 2rem;
  border-bottom: 1px solid #ccc;
}
.adminDashboard__Content-Select {
  margin-right: 1rem;
  border: 1px solid #eee;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0.2rem 1.5rem;
  font-size: 1.3rem;
  cursor: pointer;
}
.adminDashboard__Content-HeadText-Text {
  font-size: 1.7rem;
}
.adminDashboard__Content-Items {
  font-size: 1.2rem;
  color: #4b4b4b;
  display: flex;
  gap: 2rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1.2rem 2rem;
}
.adminDashboard__Content-Items-Btn {
  cursor: pointer;
}
.adminDashboard__Content-Items-Btn:hover {
  color: rgb(158, 18, 177);
}
.adminDashboard__Content-Items-Btn.active {
  color: rgb(158, 18, 177);
  font-weight: 600;
}
.adminDashboard__Content-SellCahrt {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 2rem 2.5rem;
}
.adminDashboard__Content-CourseChart {
  width: 100%;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 2rem 2.5rem;
}
.adminDashboard__Management-Header {
  margin-bottom: 3rem;
}
.adminDashboard__Management-Header-List {
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
  color: #5d5d5d;
}
.adminDashboard__Management-Items {
  padding: 2rem 0;
  border-bottom: 1px solid #eee;
}
.adminDashboard__Management-Items-List {
  display: flex;
}
.adminDashboard__Management-Items-Item {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  color: #464749;
  justify-content: center;
}
.adminDashboard__Management-Items-Item:nth-child(1) {
  width: 10%;
}
.adminDashboard__Management-Items-Item:nth-child(2) {
  width: 25%;
}
.adminDashboard__Management-Items-Item:nth-child(3) {
  width: 15%;
}
.adminDashboard__Management-Items-Item:nth-child(4) {
  width: 30%;
}
.adminDashboard__Management-Items-Item:nth-child(5) {
  width: 30%;
}
.adminDashboard__Management-Profile-Pic {
  width: 4rem;
}
.adminDashboard__Management-Profile-Name {
  width: 100%;
}
.adminDashboard__Teacher {
  width: 100%;
}
.adminDashboard__Teacher-Header {
  margin-bottom: 2rem;
}
.adminDashboard__Teacher-Header-Item {
  font-size: 1.2rem;
  color: #464749;
  text-align: center;
  padding: 0.5rem 0 2rem 0;
}
.adminDashboard__Teacher-Items-List {
  padding: 1rem 0;
  width: 100%;
}
.adminDashboard__Teacher-Items-Item {
  font-size: 1.3rem;
  color: black;
  padding: 2rem 0;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

.highcharts-exporting-group {
  display: none;
}

.highcharts-credits {
  display: none;
}

.highcharts-legend {
  display: none;
}

.workus__Header {
  text-align: center;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.workus__Header-Icon {
  font-size: 2rem;
  color: rgb(158, 18, 177);
}
.workus__Box {
  padding: 2rem 0;
  border-bottom: 1px solid #ccc;
}
.workus__Description {
  margin: 1rem 0;
}
.workus__HeadTitle {
  margin: 2rem 0;
  color: #00a049;
  font-weight: bold;
}
.workus__Content {
  border: 1px solid #ccc;
  border-radius: 1rem;
  padding: 2rem;
}
.workus__Image {
  border-right: 1px solid #ccc;
}
.workus__Image-Box {
  width: 100%;
}
.workus__Image-Pic {
  max-width: 100%;
}
.workus__Form {
  padding: 2rem 0;
  position: relative;
}
.workus__Form-active {
  filter: blur(4px);
}
.workus__Label {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin: 1.5rem 0;
}
.workus__Label i {
  color: #7a7a7a;
}
.workus__Label-file {
  width: 80%;
}
.workus__Label-Text {
  width: 30%;
  font-size: 1.6rem;
  color: #979797;
}
.workus__Label-select {
  width: 80%;
  padding: 1rem 1.5rem;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 1rem;
}
.workus__Label-Input {
  width: 80%;
  padding: 1.5rem 2rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
}
.workus__Label-Input-Fill {
  background-color: #eee;
}
.workus__Label-Button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffc801;
  padding: 1.2rem;
  border: 1px solid #000;
  border-radius: 0.6rem;
  margin: 2.5rem 0;
}
.workus__file {
  display: flex;
  justify-content: end;
  font-size: 1.2rem;
  gap: 0.5rem;
  color: red;
}
.workus__file i {
  color: red;
}
.workus__Resome {
  max-width: 100%;
}
.workus__Resome-Image {
  width: 90%;
  object-fit: cover;
}
.workus__Register {
  width: 60rem;
  height: 45rem;
  background-color: #fff;
  border-radius: 1rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.workus__Register-Link {
  color: rgb(158, 18, 177);
  font-weight: bold;
}
.workus__Register-Image {
  max-width: 100%;
}
.workus__Register-Content {
  margin-top: 2rem;
}
.workus__Register-Btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  transition: all 0.3s ease-in-out;
}
.workus__Register-Btn:hover {
  color: #fff;
  transform: translateY(-1rem);
}
.workus__file-errors {
  border: 1px solid red;
  padding: 1rem;
}
.workus__success {
  width: 40rem;
  height: 40rem;
  border-radius: 1rem;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background: linear-gradient(to bottom right, #5ac656 40%, #128440 100%);
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.4);
  z-index: 100;
}
.workus__success-Text {
  top: 54%;
  position: absolute;
  left: 19%;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.workus__success-Text1 {
  top: 68%;
  left: 10%;
}
.workus__success-Btn {
  width: 50%;
  padding: 1rem;
  border-radius: 1rem;
  position: absolute;
  top: 83%;
  background-color: #aeffba;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 27%;
  color: #0d821f;
  cursor: pointer;
}
.workus__Dark {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #000;
  opacity: 0.4;
}
.workus__border {
  border: 1px solid #ccc;
}

.face {
  position: absolute;
  width: 30%;
  height: 30%;
  background: #fcfcfc;
  border-radius: 50%;
  border: 1px solid #777777;
  top: 8%;
  left: 35.5%;
  z-index: 2;
  animation: bounce 1s ease-in infinite;
}

.eye {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #777777;
  border-radius: 50%;
  top: 40%;
  left: 20%;
}

.right {
  left: 68%;
}

.mouth {
  position: absolute;
  top: 43%;
  left: 41%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.happy {
  border: 2px solid;
  border-color: transparent #777777 #777777 transparent;
  transform: rotate(45deg);
}

.shadow {
  position: absolute;
  width: 27%;
  height: 4%;
  opacity: 0.5;
  background: #777777;
  left: 38%;
  top: 37%;
  border-radius: 50%;
  z-index: 1;
}

.scale {
  animation: scale 1s ease-in infinite;
}

@keyframes bounce {
  50% {
    transform: translateY(-10px);
  }
}
@keyframes scale {
  50% {
    transform: scale(0.9);
  }
}
.Rules {
  margin: 2rem 0;
}
.Rules__MainTitle {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: #abeab7;
  font-weight: bold;
}
.Rules__Content {
  padding: 2rem 3rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-shadow: 0 0 1.7rem rgba(0, 0, 0, 0.1);
}
.Rules__Header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 2rem;
}
.Rules__Header-Icon {
  font-size: 1.9rem;
  color: #f42712;
}
.Rules__Header-Title {
  font-size: 1.9rem;
  color: #f42712;
}
.Rules__Body-Row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Rules__Body-Title {
  font-size: 1.9rem;
  color: rgb(158, 18, 177);
}
.Rules__Body-Content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.Rules__Body-Icon {
  color: rgb(158, 18, 177);
}
.Rules__Body-Description {
  font-size: 1.5rem;
  line-height: 3rem;
  text-align: justify;
}
.Rules__Body-Image {
  max-width: 65%;
}
.Rules__Body-Box {
  display: flex;
  justify-content: center;
  align-items: center;
}
 .Rules__Body-tables{
                            border: 1px solid #ccc;
                            border-radius: 0.5rem;
                            margin-top: 3rem !important;
                            display: flex;
                            padding: 0;
                        }
                        .Rules__Body-content-tables {
                            margin: 0;
                        }
                        .Rules__Body-content-tables td{
                            padding: 1.5rem;
                            text-align: center;
                            border-bottom: 1px solid #ccc;
                            border-left: 1px solid #ccc;
                            vertical-align: middle;
                        }
                        .Rules__Body-content-tables tr:last-child td{
                            border-bottom: none;
                        }
                        .Rules__Body-content-tables td:last-child{
                            border-left: none;
                        }


.aboutpage {
  padding: 2rem 3rem;
  box-shadow: 0 0 1.7rem rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  border: 1px solid silver;
  margin: 3rem 0;
}
.aboutpage__Header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  background-color: #abeab7;
  font-weight: bold;
}
.aboutpage__Image {
  max-width: 100%;
  border-radius: 1rem;
}
.aboutpage__Description {
  font-size: 1.5rem;
  text-align: justify;
  padding: 1rem 3rem;
  line-height: 3.8rem;
  color: #484848;
}
.aboutpage__Contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  background-color: #eee;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.aboutpage__SocialMedia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.aboutpage__SocialMedia-Box {
  width: 6rem;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
}
.aboutpage__SocialMedia-Icon {
  font-size: 2.5rem;
}

.student {
  width: 100%;
  background-color: rgb(29, 32, 38) !important;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
}
.student__Content {
  width: 100%;
  height: 8rem;
}
.student__Content-Row {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.student__Content-Col {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.student__Content__Text {
  font-size: 1.8rem;
  font-family: "iransansweb";
}
.student__Content__Text-White {
  color: #fff;
}
.student__Content__Text-Orange {
  color: #ffb74d;
  font-weight: bold;
}
.student__Content__Login {
  display: flex;
  justify-content: end;
  align-items: center;
  cursor: pointer;
}
.student__Content__Login-Text {
  width: 12rem;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ffb74d;
  background-color: #ffb74d;
  color: #000;
  font-size: 1.3rem;
  border-radius: 1rem;
}

.MainStu {
  margin: 2rem;
}
.MainStu__Filters {
  width: 100%;
  height: 5rem;
}
.MainStu__Filters-Content {
  display: flex;
  gap: 2rem;
}
.MainStu__Filters-Lists {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.MainStu__Filters-Text {
  color: #000;
  font-size: 1.4rem;
  font-weight: bold;
}
.MainStu__Filters-Items {
  padding: 2rem 2.5rem;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  border-radius: 1rem;
  background-color: #fff;
  width: 12rem;
  padding: 0.8rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  border-radius: 50rem;
  position: relative;
  transition: all 0.2s ease-in;
  cursor: pointer;
}
.MainStu__Filters-Items:hover {
  transform: translateY(-0.3rem);
}
.MainStu__Filters-Items.active {
  background-color: rgb(158, 18, 177);
  border: 1px solid rgb(158, 18, 177);
}
.MainStu__Filters-Items.active .MainStu__Filters-Items-Date {
  color: #fff !important;
}
.MainStu__Filters-Items-Icon {
  color: #fff;
  position: absolute;
  right: 1px;
  top: 1px;
  font-size: 3.3rem;
}
.MainStu__Filters-Items-Date {
  color: #000;
  font-size: 1.2rem;
}
.MainStu__Content-Row {
  display: flex;
  justify-content: space-between;
}
.MainStu__Content-Col {
  position: relative;
}
.MainStu__Content-Course {
  display: flex;
  flex-direction: column;
  padding: 1rem 0 0 3rem;
}
.MainStu__Content-Course-Content {
  padding: 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.MainStu__Content-Course-Content-Btn {
  margin: 2rem 0 0.2rem 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(158, 18, 177);
  padding: 1rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.MainStu__Content-Course-Content-Btn:hover {
  transform: translateY(-0.3rem);
}
.MainStu__Content-Course-Content-Btn-Link {
  width: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.MainStu__Content-Course-Content-Btn-Link:hover {
  color: #fff !important;
}
.MainStu__Content-Course-Key {
  font-weight: bold;
  color: #464749;
}
.MainStu__Content-Course-Val {
  font-weight: 400;
  color: rgb(107, 107, 107);
}
.MainStu__Content-Course-Item {
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  width: 100%;
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 3rem;
}
.MainStu__Content-Course-Item-Pic {
  width: 100%;
  height: 25rem;
}
.MainStu__Content-Course-Item-Pic-1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.MainStu__Content-Links {
  position: sticky;
  top: 1.5rem;
  right: 0;
}
.MainStu__Content-Links-Filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.MainStu__Content-Links-Filters-Key {
  color: #000;
  font-size: 1.5rem;
}
.MainStu__Content-Links-Filters-Items {
  border: 1px solid rgb(158, 18, 177);
  background-color: rgb(158, 18, 177);
  color: #fff;
  padding: 1rem 1.6rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  cursor: pointer;
}
.MainStu__Content-Links-Filters-Item {
  background-color: rgb(158, 18, 177);
  cursor: pointer;
}
.MainStu__Content-Links-content {
  display: flex;
  flex-direction: column;
}
.MainStu__Content-Links-Items {
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  width: 100%;
  background-color: #fff;
  border-radius: 1.5rem;
  margin-top: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}
.MainStu__Content-Links-Items-Box {
  padding: 0.5rem 2rem;
}
.MainStu__Content-Links-Items:hover {
  transform: translateY(-0.3rem);
}
.MainStu__Content-Links-Items-Text {
  padding-top: 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-family: "iransansweb";
}
.MainStu__Content-Links-Items-Details {
  width: 100%;
  background-color: rgb(158, 18, 177);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  padding: 0.7rem;
  color: #fff;
  margin-top: 1.5rem;
}
.MainStu__Content-Links-Items-Details:hover {
  cursor: pointer;
  color: #fff;
}
.MainStu__Content-Links-Items-Row {
  margin-top: 2rem;
}
.MainStu__Content-Links-Items-Col {
  text-align: center;
}
.MainStu__Content-Links-Items-Col-Key {
  display: block;
  font-size: 1.4rem;
  color: rgb(179, 179, 179);
  margin-bottom: 1rem;
}
.MainStu__Content-Links-Items-Col-Val {
  font-size: 1.6rem;
  font-weight: bold;
  color: rgb(80, 80, 80);
}
.MainStu__Content-Links-Offline {
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  width: 100%;
  background-color: #fff;
  border-radius: 1rem;
  padding: 2rem;
  margin: 3rem 0;
  overflow: hidden;
}
.MainStu__Content-Links-Offline-Square {
  font-weight: bold;
  font-size: 1.7rem;
}
.MainStu__Content-Links-Offline-Square::before {
  background-color: rgb(158, 18, 177) !important;
}
.MainStu__Content-Links-Offline-List {
  margin: 1rem 0;
}
.MainStu__Content-Links-Offline-Link {
  font-size: 1.4rem;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid #ccc;
  padding: 1.2rem 0;
}
.MainStu__Content-Links-Offline-Link:hover {
  transform: translateX(-2rem);
}
.MainStu__Content-Links-Offline-Icon {
  color: #909aa7;
  font-size: 1.2rem;
  margin-left: 0.4rem;
}

.coursePage__StuudentInfo-Top-Content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.coursePage__StudentInfo-Top-1 {
  display: flex;
  flex-direction: column !important;
}

.coursePage__StudentInfo-Top-Text {
  font-size: 1.1rem;
  color: red;
  font-weight: bold;
}

.workshop__Body {
  background-color: #f0f2f7;
}

.workshop {
  width: 96vw;
  border-radius: 4rem;
  background-color: #fff;
  padding: 6rem;
  margin: 3rem auto;
}
.workshop__Header-Col {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.workshop__Header-Col-1 {
  justify-content: flex-end;
}
.workshop__Header-Lists {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3rem;
}
.workshop__Header-Links {
  color: #adb1c7 !important;
  font-size: 1.5rem;
}
.workshop__Header-Image {
  width: 7rem;
}
.workshop__Header-AllIcons {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-size: 2rem;
  color: gray;
  display: none;
}
.workshop__Header-AllIcons-Icon {
  cursor: pointer;
  transition: all 0.2s ease;
}
.workshop__Header-AllIcons-Icon:hover {
  transform: translateY(-0.5rem);
}
.workshop__Header-Image-Pic {
  width: 7rem;
}
.workshop__Header-Icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4rem;
}
.workshop__Header-Icon {
  color: #adb1c7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.workshop__Header-Icon-user {
  color: rgb(158, 18, 177);
  width: 4rem;
  height: 4rem;
  background-color: rgba(158, 18, 177, 0.08);
  border-radius: 100%;
  transition: all 0.2s ease;
}
.workshop__Header-Icon-user:hover {
  background-color: rgba(158, 18, 177, 0.3);
}
.workshop__Header-ResIcons {
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: -10rem;
  left: 0;
  padding: 1.5rem 3rem;
  border-top: 1px solid #ccc;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  display: none;
  transition: all 255ms ease;
}
.workshop__Header-ResMenu {
  width: 40rem;
  background-color: #fff;
  border-left: 2px solid #ccc;
  position: fixed;
  top: 0;
  right: -50rem;
  height: 100%;
  z-index: 30;
  box-shadow: -1rem 0 1.2rem rgba(255, 255, 255, 0.3);
  padding: 3rem 4rem;
  display: none;
  transition: all 0.5s ease-in;
}
.workshop__Header-ResMenu-Close {
  position: absolute;
  top: 2rem;
  left: 2rem;
  color: red;
  font-size: 2.5rem;
  cursor: pointer;
  transition: all 250ms ease;
}
.workshop__Header-ResMenu-Close:hover {
  transform: translateY(-0.2rem);
}
.workshop__Header-ResMenu-List {
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
.workshop__Header-ResMenu-Item {
  padding: 2.5rem 0;
  border-bottom: 1px solid #eee;
}
.workshop__Header-ResMenu-Link {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #464749 !important;
}
.workshop__Header-ResMenu-Link:hover {
  color: rgb(158, 18, 177) !important;
}
.workshop__Header-ResMenu-Image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid #ccc;
}
.workshop__Header-ResMenu-Icon {
  font-size: 1.4rem;
}
.workshop__Header-ResMenu-Text {
  font-size: 1.5rem;
}
.workshop__Header-Responsive {
  max-width: 40rem;
  background-color: #fff;
  position: fixed;
  right: -80rem;
  top: 0;
  z-index: 20;
  border-radius: 4rem 0 0 4rem;
  box-shadow: -1rem 0 1.2rem rgba(255, 255, 255, 0.3);
  padding: 4rem 3rem;
  transition: all 250ms ease;
  overflow: auto;
  display: none;
  height: 100%;
}
.workshop__Header-Responsive-Dark {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: -140rem;
  z-index: 10;
  display: none;
}
.workshop__Header-Responsive-Close {
  font-size: 2.8rem;
  position: absolute;
  top: 2rem;
  left: 2rem;
  color: red;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.workshop__Header-Responsive-Close:hover {
  transform: translateY(-0.4rem);
}
.workshop__Header-Responsive-Row {
  display: flex;
  flex-direction: column;
}
.workshop__Header-Responsive-Col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem 1rem;
  border-bottom: 1px solid #ccc;
}
.workshop__Header-Responsive-Col:last-child {
  border: none;
}
.workshop__Header-Responsive-Top {
  display: flex;
  width: 50%;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.3);
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.workshop__Header-Responsive-Image {
  width: 80%;
}
.workshop__Header-Responsive-Information {
  display: flex;
  justify-content: start;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.workshop__Header-Responsive-Name {
  font-size: 1.7rem;
  color: rgb(0, 0, 0);
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  background-color: #a4d0ff;
}
.workshop__Header-Responsive-Level {
  font-size: 1.7rem;
  color: rgb(0, 0, 0);
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  background-color: #ffa4c4;
}
.workshop__Header-Responsive-Lists {
  width: 100%;
}
.workshop__Header-Responsive-Item {
  padding: 1.5rem 0;
}
.workshop__Header-Responsive-Item.active > .workshop__Header-Responsive-Links {
  color: rgb(158, 18, 177);
}
.workshop__Header-Responsive-Links {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgb(107, 107, 107);
}
.workshop__Main {
  margin: 5rem 0;
}
.workshop__Title {
  font-size: 2rem;
}
.workshop__Title-Row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.workshop__Title-Col-Hamburger {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.workshop__Title-Col-Hamburger > i {
  font-size: 2.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: none;
}
.workshop__Title-Col-Hamburger > i:hover {
  transform: translateY(-0.3rem);
}
.workshop__Title-Col-1 {
  text-align: center;
}
.workshop__Title-Description {
  margin-bottom: 1rem;
  color: #adb1c7;
  font-size: 1.4rem;
}
.workshop__Panel {
  margin: 2rem 0;
}
.workshop__Panel-Row {
  display: flex;
  justify-content: space-between;
}
.workshop__Panel-Col {
  position: relative;
}
.workshop__Panel-User {
  position: sticky;
  top: 1rem;
  right: 0;
  width: 80%;
  background-color: #fff;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0.3rem 0.2rem 1.5rem rgba(0, 0, 0, 0.3);
  height: max-content;
}
.workshop__Panel-Avatar-Col {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  gap: 0.6rem;
}
.workshop__Panel-Avatar-Info {
  padding-right: 0.8rem;
}
.workshop__Panel-Avatar-Info-Head {
  color: rgb(107, 107, 107);
}
.workshop__Panel-Avatar-Info-Level {
  color: #adb1c7;
  font-size: 1.4rem;
}
.workshop__Panel-Avatar-Content {
  width: 100%;
  height: 15rem;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.workshop__Panel-Avatar-Content-Image {
  max-width: 85%;
  object-fit: cover;
}
.workshop__Panel-Avatar-Icons {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
  padding-right: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.workshop__Panel-Avatar-Icons-Item {
  width: 3rem;
  height: 3rem;
  background: #f4f4f4;
  color: #b4b7cb;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.5rem;
}
.workshop__Panel-Avatar-Icons-Item:hover {
  transform: translateY(-0.2rem);
}
.workshop__Panel-Avatar-Icons-Item-1 {
  color: blue;
}
.workshop__Panel-Avatar-Icons-Item-2 {
  color: red;
}
.workshop__Panel-Information {
  margin: 1.5rem 0;
}
.workshop__Panel-Information-Lists {
  display: flex;
  flex-direction: column;
}
.workshop__Panel-Information-Item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0.5rem;
}
.workshop__Panel-Information-Icons {
  color: rgb(158, 18, 177);
  font-size: 1.4rem;
}
.workshop__Panel-Information-Texts {
  font-size: 1.3rem;
  color: #adb1c7;
}
.workshop__Panel-Lists {
  padding: 3rem 2rem;
}
.workshop__Panel-Lists-Item {
  margin-bottom: 1rem;
  padding: 1.5rem;
  border-radius: 0.8rem;
  transition: all 0.2s ease;
}
.workshop__Panel-Lists-Item.active {
  background-color: rgba(158, 18, 177, 0.1);
}
.workshop__Panel-Lists-Item.active .workshop__Panel-Lists-Text {
  color: rgb(158, 18, 177);
}
.workshop__Panel-Lists-Item:hover {
  background-color: rgba(158, 18, 177, 0.1);
}
.workshop__Panel-Lists-Item:hover .workshop__Panel-Lists-Text {
  color: rgb(158, 18, 177);
}
.workshop__Panel-Lists-Links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.8rem;
}
.workshop__Panel-Lists-Icon {
  color: rgb(158, 18, 177);
  font-size: 1.6rem;
}
.workshop__Panel-Lists-Text {
  color: #000;
  font-size: 1.5rem;
}
.workshop__Panel-Level {
  width: 100%;
}
.workshop__Panel-Level-Row {
  border-radius: 1rem;
  overflow: hidden;
}
.workshop__Panel-Level-Col {
  padding: 1.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.workshop__Panel-Level-Title {
  color: rgb(158, 18, 177);
  font-size: 1.7rem;
  font-weight: bold;
}
.workshop__Panel-Level-Key {
  background-color: rgba(158, 18, 177, 0.1);
}
.workshop__Panel-Level-Value {
  background-color: #a7edad !important;
}
.workshop__Panel-Level-Description {
  color: green;
  font-weight: bold;
  font-size: 1.8rem;
}
.workshop__Panel-Level-SubDescription {
  font-size: 1.6rem;
}
.workshop__Panel-Dashbord {
  margin: 5rem 0;
}
.workshop__Panel-Dashbord-Title-Content {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 2.5rem;
  color: rgb(107, 107, 107);
}
.workshop__Panel-Dashbord-Title-Content-Text {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.workshop__Panel-Dashbord-Title-Content-Text2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.workshop__Panel-Dashbord-Title-Content-Text2-Green {
  color: green;
  font-weight: bold;
}
.workshop__Panel-Dashbord-Title-Icons {
  font-size: 1.7rem;
  color: rgb(107, 107, 107);
}
.workshop__Panel-Dashbord-Title-Desctiption {
  font-size: 1.6rem;
}
.workshop__Panel-Dashbord-Title-SubDesctiption {
  color: rgb(158, 18, 177);
  font-weight: bold;
}
.workshop__Panel-Dashbord-RoadMaps {
  display: flex;
  justify-content: flex-end;
  margin: 6rem 0;
  direction: ltr !important;
}
.workshop__Panel-Dashbord-RoadMaps-Lines {
  position: absolute;
right: 1rem;
top: 3rem;
font-size: 2.6rem;
border-left: 1px dashed #ccc;
height: 176%;
}
.workshop__Panel-Dashbord-RoadMaps-Lines.active {
  border-left:1px solid green !important;
}
.workshop__Panel-Dashbord-RoadMaps-Lines1 {
position: absolute;
right: 1rem;
top: 3rem;
font-size: 2.6rem;
border-left: 1px dashed #ccc;
width: 0rem;
height: 176%;
left: 1rem;
}
.workshop__Panel-Dashbord-RoadMaps-Lines1.active {
  border-left:1px solid green !important;
}
.workshop__Panel-Dashbord-RoadMaps-Row {
  width: 100%;
}
.workshop__Panel-Dashbord-RoadMaps-Row1 {
  display: flex;
  position: relative;
}
.workshop__Panel-Dashbord-RoadMaps-Row2 {
  display: flex;
  margin-top: 10rem;
  position: relative;
}
.workshop__Panel-Dashbord-RoadMaps-Row3 {
  display: flex;
  margin-top: 10rem;
  position: relative;
}
.workshop__Panel-Dashbord-RoadMaps-Row2 > .workshop__Panel-Dashbord-RoadMaps-Items {
  align-items: end !important;
}
.workshop__Panel-Dashbord-RoadMaps-Row2 > .workshop__Panel-Dashbord-RoadMaps-Items .workshop__Panel-Dashbord-RoadMaps-Items-Lines {
  left: 1rem !important;
}
.workshop__Panel-Dashbord-RoadMaps-Lists {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.workshop__Panel-Dashbord-RoadMaps-Items {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}
.workshop__Panel-Dashbord-RoadMaps-Items.active .workshop__Panel-Dashbord-RoadMaps-Items-Circle {
  border: 1px solid #8B4513 !important;
  background-color: #f3d4b5 !important;
}
.workshop__Panel-Dashbord-RoadMaps-Items.active .workshop__Panel-Dashbord-RoadMaps-Items-Icons,
.workshop__Panel-Dashbord-RoadMaps-Items.active .workshop__Panel-Dashbord-RoadMaps-Items-Description {
  color: #8B4513 !important;
}
.workshop__Panel-Dashbord-RoadMaps-Items.active .workshop__Panel-Dashbord-RoadMaps-Items-Lines{
    border-top:1px solid #8B4513 !important;
}
.workshop__Panel-Dashbord-RoadMaps-Items-Circle {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff !important;
  border:1px solid #ccc;
  z-index: 1;
}

.workshop__Panel-Dashbord-RoadMaps-Items-Lines {
font-size: 2.6rem;
position: absolute;
left: 7rem;
top: 3rem;
bottom: 0;
margin: auto;
transform: translateY(15%);
border-top: 1px dashed #ccc;
width: 100%;
height: 100%;
}
.workshop__Panel-Dashbord-RoadMaps-Items-Icons {
  font-size: 2.5rem;
  color:#ccc;
}

.workshop__Panel-Dashbord-RoadMaps-Items-Icons-HtmlModeal {
  background: url("../public/images/certificate/icons8-certificate-32.png");
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  display: flex;
  background-size: 3.5rem;
  background-position: 11px 10px;
}
.workshop__Panel-Dashbord-RoadMaps-Items-Description {
  font-size: 1.3rem;
  font-weight: bold;
  position: relative;
  right: 0;
  width:100%;
  text-align:center;
  color:#ccc;
  direction:rtl;
}


#verbcourse {
  height: 100%;
}

.verbcourse {
  height: 100%;
}
.verbcourse__MainItems {
  padding: 2rem;
}
.verbcourse__Row {
  height: 100%;
}
.verbcourse__Col {
  height: 100%;
}
.verbcourse__Content {
  height: 100%;
}
.verbcourse__Item {
  width: 100%;
  padding: 3.1rem 3rem;
  background-color: #fff;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  border-radius: 1.5rem;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.verbcourse__Item-Report {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0;
}
.verbcourse__Item-Report-Btn {
  font-size: 1.4rem;
  background-color: rgb(158, 18, 177);
  padding: 1rem 3rem;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.verbcourse__Item-Report-Btn:hover {
  transform: translateY(-0.2rem);
  color: #fff !important;
}
.verbcourse__Item-Text {
  font-size: 1.7rem;
  margin: 1.5rem 0;
  color: rgb(107, 107, 107);
}
.verbcourse__Item-Row {
  display: flex;
}
.verbcourse__Item-Col {
  padding: 1.5rem;
  border-left: 1px solid #ccc;
}
.verbcourse__Item-Col:last-child {
  border-left: none;
}
.verbcourse__Item-Items {
  margin: 1.5rem;
}
.verbcourse__Item-Key {
  font-size: 1.7rem;
  color: #464749;
}
.verbcourse__Item-Certificate {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verbcourse__Item-Certificate-Link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verbcourse__Item-Certificate-Img {
  object-fit: cover;
  width: 15rem;
  height: 15rem;
}
.verbcourse__Item-Val {
  font-size: 1.4rem;
  color: #464749;
}
.verbcourse__Item-Progress {
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 1.5rem;
  box-shadow: 0 0 7px 1px rgba(70, 72, 77, 0.08);
  margin-top: 2rem;
  height: 2rem;
  position: relative;
  overflow: hidden;
}
.verbcourse__Item-Progress-Persent {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 30%;
  background-color: rgb(158, 18, 177);
  border-radius: 1.5rem;
}
.verbcourse__Item-Present {
  margin-top: 2.5rem;
}
.verbcourse__Item-Present-Lists {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.verbcourse__Item-Present-Item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-direction: column;
}
.verbcourse__Item-Present-Item-Key {
  font-size: 1.2rem;
  color: rgb(107, 107, 107);
  text-align: center;
}
.verbcourse__Item-Present-Item-Val {
  width: 2.5rem;
  height: 2.5rem;
  background-color: red;
  border-radius: 100%;
}
.verbcourse__Item-Present-Item-Val.active {
  background-color: green !important;
}
.verbcourse__Item-Btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem 2rem;
  background-color: #9e12b1;
  color: #fff;
  font-size: 1.7rem;
  border-radius: 1rem;
  transition: all 0.2s ease;
}
.verbcourse__Item-Btn:hover {
  color: #fff;
  transform: translateY(-0.2rem);
}
.verbcourse__Details {
  border: 1px solid #ccc;
  border-radius: 1rem;
  overflow: hidden;
}
.verbcourse__Details-Presents {
  width: 100%;
}
.verbcourse__Details-Presents-Text {
  width: 100%;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
}
.verbcourse__Details-Item {
  padding: 0 !important;
}
.verbcourse__Details-Item:first-child .verbcourse__Details-Head {
  border-top: none;
}
.verbcourse__Details-Item:last-child .verbcourse__Details-Head {
  border-bottom: none;
}
.verbcourse__Details-Head {
  width: 100%;
  padding: 2.5rem 2rem;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.verbcourse__Details-Head-Title {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #464749;
}
.verbcourse__Details-Head:hover {
  background-color: #e8e8e8;
  cursor: pointer;
}
.verbcourse__Details-Body {
  padding: 2.5rem 3rem;
  display: none;
}
.verbcourse__Details-Times {
  width: 100%;
}
.verbcourse__Details-Lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
}
.verbcourse__Details-Items {
  border: 1px solid #ccc;
  width: 100%;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.verbcourse__Details-Key {
  font-size: 1.7rem;
}
.verbcourse__Details-Value {
  font-size: 1.5rem;
  color: #464749;
}
.verbcourse__Details-MainTitle {
  display: flex;
  align-items: center;
  padding: 1.5rem 1rem;
  gap: 1rem;
  background-color: #fafafa;
  border: 1px solid silver;
  border-radius: 0.5rem;
}
.verbcourse__Details-Heading {
  font-size: 1.5rem;
}
.verbcourse__Details-Description {
  font-size: 1.4rem;
  color: #464749;
}
.verbcourse__Details-Introduction {
  margin: 1.5rem 0;
}
.verbcourse__Details-Introduction-Title {
  font-size: 1.8rem;
}
.verbcourse__Details-Introduction-Details {
  margin-top: 1.5rem;
  font-size: 1.5rem;
}
.verbcourse__Details-Download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
}
.verbcourse__Details-Download-Video, .verbcourse__Details-Download-Sourse {
  width: 50%;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(158, 18, 177);
  color: #fff;
  border-radius: 0.6rem;
  transition: all 0.2s ease;
}
.verbcourse__Details-Download-Video:hover, .verbcourse__Details-Download-Sourse:hover {
  cursor: pointer;
  transform: translateY(-0.3rem);
  color: #fff;
}
.verbcourse__NoData {
  height: 100%;
}
.verbcourse__NoData-Content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: sticky;
  top: 10rem;
}
.verbcourse__NoData-Image {
  max-width: 100%;
  object-fit: cover;
}
.verbcourse__NoData-Text {
  margin-top: 4rem;
  font-size: 1.6rem;
  background-color: rgba(43, 114, 206, 0.2);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  border-radius: 1rem;
}
.verbcourse__NoData-Links {
  color: rgb(158, 18, 177);
  font-weight: bold;
  margin-right: 0.5rem;
}
.verbcourse__Report-Item {
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 3rem;
}
.verbcourse__Report-Key {
  font-size: 1.7rem;
  color: #4f5467;
}
.verbcourse__Report-Value {
  font-size: 1.5rem;
  color: red;
}
.verbcourse__Report-Certificate {
  margin-top: 1.5rem;
}
.verbcourse__Report-Certificate-Link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.verbcourse__Report-Certificate-Intro {
  color: green;
  font-size: 1.5rem;
  border: 1px solid green;
  padding: 1rem 4rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
.verbcourse__Report-Certificate-Intro:hover {
  transform: translateY(-0.3rem);
}
.verbcourse__Report-Certificate-Intro-Text {
  color: red !important;
  font-size: 1.6rem;
}
.verbcourse__Report-Certificate-Image {
  max-width: 80%;
  width: auto;
}

.activeIcon {
  transform: rotateZ(180deg);
}

.counseling__Box {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
  background-color: #fff;
  width: 80rem;
  height: 7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid green;
  border-radius: 1rem;
  color: green;
  font-weight: bold;
}
.counseling__Box-Icon {
  font-size: 2.5rem;
  position: absolute;
  left: 2rem;
  color: red;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.counseling__Box-Icon:hover {
  transform: translateY(-0.2rem);
}
.counseling__Box-Dark {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  right: 0;
}

#verbOnline {
  height: 100%;
}

.verbOnline {
  height: 100%;
}
.verbOnline__RequestCourse {
  width: 100%;
  background-color: rgb(158, 18, 177);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0;
  border-radius: 1.5rem;
  color: #fff;
  gap: 1rem;
  margin-bottom: 2rem;
  cursor: pointer;
  transition: all 0.1s ease-in;
}
.verbOnline__RequestCourse:hover {
  transform: translateY(-0.2rem);
  color: #fff;
}
.verbOnline__RequestCourse-Icon {
  margin-left: 0.8rem;
  font-size: 1.4rem;
}
.verbOnline__RequestCourse-Title {
  font-size: 1.7rem;
  color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verbOnline__RequestCourse-Title:hover {
  color: #fff;
}
.verbOnline__Row {
  display: flex;
  justify-content: center;
}
.verbOnline__Col {
  margin-bottom: 2rem;
}
.verbOnline__Items {
  background-color: #fff;
  width: 100%;
  border-radius: 1.5rem;
  border: 1px solid silver;
  padding: 2.5rem;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
}
.verbOnline__Items-Text {
  font-size: 1.7rem;
  color: rgb(158, 18, 177);
  margin: 1rem 0;
}
.verbOnline__Items-Lists {
  margin-bottom: 0.5rem;
}
.verbOnline__Items-Item {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.verbOnline__Items-Item-Description {
  font-size: 1.4rem;
  color: rgb(107, 107, 107);
}
.verbOnline__Items-Item-Description-Val {
  font-size: 1.3rem;
  color: #464749;
  display: flex;
  text-align: justify;
}
.verbOnline__Items-Item-Introduction {
  display: block !important;
}
.verbOnline__Items-Item-Introduction-des {
  display: block;
}
.verbOnline__Items-Item-Val {
  font-size: 1.6rem;
  color: #464749;
}
.verbOnline__Items-Details {
  width: 100%;
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(158, 18, 177);
  color: #fff;
  border-radius: 1.2rem;
  margin-top: 1.5rem;
  transition: all 0.2s ease-in-out;
}
.verbOnline__Items-Details:hover {
  color: #fff !important;
  transform: translateY(-0.5rem);
}
.verbOnline__NoPrivateCourse {
  position: sticky;
  top: 2rem;
}
.verbOnline__NoPrivateCourse-Row {
  margin-bottom: 1.5rem;
}
.verbOnline__NoPrivateCourse-Header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  background-color: purple;
  border-radius: 1rem;
  color: #fff;
}
.verbOnline__NoPrivateCourse-Content {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  height: 59rem;
}
.verbOnline__NoPrivateCourse-Title {
  padding: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: purple;
}
.verbOnline__NoPrivateCourse-Link {
  color: #fff;
}
.verbOnline__NoPrivateCourse-Picture {
  padding: 0 2.5rem;
}
.verbOnline__NoPrivateCourse-Picture-pic {
  width: 100%;
  object-fit: cover;
}
.verbOnline__NoPrivateCourse-Col {
  padding: 1.5rem;
}
.verbOnline__NoPrivateCourse-Info {
  padding: 3.5rem 2.5rem;
}
.verbOnline__NoPrivateCourse-Info-Item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
  gap: 0.5rem;
}
.verbOnline__NoPrivateCourse-Info-Item::before {
  content: "✓";
  color: rgb(158, 18, 177);
}
.verbOnline__NoPrivateCourse-Advice {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: purple;
}
.verbOnline__NoPrivateCourse-Advice-UnCorrect {
  font-size: 1.2rem;
  color: purple;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.verbOnline__NoPrivateCourse-Advice-Form {
  margin-top: 1.5rem;
}
.verbOnline__NoPrivateCourse-Advice-Label {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.verbOnline__NoPrivateCourse-Advice-Key {
  font-size: 1.3rem;
  color: gray;
}
.verbOnline__NoPrivateCourse-Advice-Value {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.5rem 2rem;
  font-size: 1.4rem;
  color: #444;
}
.verbOnline__NoPrivateCourse-Advice-Btn {
  width: 100%;
  border: none;
  background-color: purple;
  color: #fff;
  padding: 1rem 0;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
}

.verbExam {
  position: sticky;
  top: 0;
  right: 0;
}
.verbExam__Image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.verbExam__Image-Pic {
  width: 60%;
  object-fit: cover;
}
.verbExam__Text {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
.verbExam__Text-Desc {
  font-size: 2.1rem;
  color: rgb(158, 18, 177);
  font-weight: bold;
}
.verbExam__Main-Text {
  margin-bottom: 4rem;
}
.verbExam__Item {
  width: 100%;
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid silver;
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.1);
  margin-top: 3rem;
  padding: 3rem 4rem;
}
.verbExam__Item-Name {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}

.verbExam__Item-Name-Text,.verbExam__Item-Name-Icon {
  font-size: 1.5rem;
                color: purple;
                font-weight: bold;
}
 .verbExam__Item-Time,.verbExam__Item-Date,.verbExam__Item-Counts{
                margin-bottom: 1.5rem;
                flex-wrap: wrap;
            }
.verbExam__Item-Time {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 1rem;
}
.verbExam__Item-Time-List {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
}
.verbExam__Item-Icons {
  color: #6e6e6e;
  font-size:1.2rem;
}
.verbExam__Item-Key {
  color: #838383;
}
.verbExam__Item-Value {
  color: #8c8c8c;
}
.verbExam__Item-Date {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
                  font-size: 1.4rem;

}
.verbExam__Item-Date-List {
  display: flex;
  align-items: center;
  gap: 1rem;
  
}
.verbExam__Item-Counts-List{
    font-size:1.4rem;
}
.verbExam__Item-Counts {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1.5rem;
}
.verbExam__Item-Link {
  margin: 1.5rem 0;
}
.verbExam__Item-Link-Btn {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c6008b;
  color: #fff;
  border-radius: 0.5rem;
}
.verbExam__Item-Link-Btn:hover {
  color: #fff;
}
 .verbExam__Item-Left{
                display: flex;
                justify-content: center;
                align-items: center;
            }
.verbExam__Item-Left-Pic {
    width: 100%;
                object-fit: cover;
                border-radius: 1rem;
                box-shadow: 0 0 1rem rgba(0,0,0,0.2);
                border: 1px solid silver;
                transition: all 0.2s ease-in;
}
   .verbExam__Item-Left-Pic:hover{
                box-shadow: 0 0 2.5rem rgba(0,0,0,0.5);
                cursor: pointer;
                transform: translateY(-0.4rem);
            }

.Certificate {
  margin: 3rem;
}
.Certificate__Content {
  padding: 3rem;
}
.Certificate__Row {
  display: flex;
  direction: ltr !important;
  margin-top: 3rem;
}
.Certificate__Col {
  margin-bottom: 1.5rem;
}
.Certificate__Item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4rem;
  background-color: #fdfdfd;
  border: 1px solid #ccc;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
}
.Certificate__Image {
  width: 7rem;
}
.Certificate__Text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.Certificate__Text-Links {
  width: 100%;
  background: rgb(158, 18, 177);
  padding: 0.5rem;
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.3rem;
  cursor: pointer;
  color: #fff;
  transition: all 0.1s ease;
}
.Certificate__Text-Links:hover {
  color: #fff;
  transform: translateY(-0.1rem);
}
.Certificate__Text-desc {
  color: #e1be00;
}
.Certificate__Description-Key {
  font-size: 1.4rem;
  color: #464749;
}
.Certificate__Description-Value {
  font-size: 1.3rem;
  color: rgb(107, 107, 107);
}

.verbTrain {
  height: 100%;
}
.verbTrain__Content {
  height: 100%;
}
.verbTrain__Content-Top {
  width: 100%;
}
.verbTrain__Content-Bottom {
  width: 100%;
  border-top: 1px solid #ccc;
  padding: 1.5rem 0;
  display: none;
}
.verbTrain__Content-Time {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.verbTrain__Content-Time-Item {
  display: flex;
  gap: 1rem;
}
.verbTrain__Content-Time-Item-Key {
  font-size: 1.4rem;
}
.verbTrain__Content-Time-Item-Value {
  font-size: 1.3rem;
  color: rgb(107, 107, 107);
}
.verbTrain__Content-Text {
  margin-bottom: 1.5rem;
}
.verbTrain__Content-Text-Description {
  color: rgb(107, 107, 107);
  display: block;
  font-size: 1.2rem;
}
.verbTrain__Content-Sourse-Link {
  font-size: 1.4rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0;
  border: 1px solid rgb(158, 18, 177);
  color: rgb(158, 18, 177);
  border-radius: 0.6rem;
  transition: all 0.1s ease;
}
.verbTrain__Content-Sourse-Link:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.verbTrain__Row {
  display: flex;
  justify-content: center;
}
.verbTrain__Header {
  margin-bottom: 3rem;
}
.verbTrain__Header-Content {
  width: 100%;
  height: 3rem;
  padding: 3rem;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  cursor: pointer;
}
.verbTrain__Header-Content:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.verbTrain__Header-Content:hover .verbTrain__Header-Content-Text {
  color: #fff !important;
}
.verbTrain__Col {
  margin-bottom: 2rem;
}
.verbTrain__Col-Content {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 3rem 2.5rem;
  border-radius: 1rem;
  border-bottom: 6px solid green;
  position: relative;
}
.verbTrain__Items {
  margin-bottom: 1rem;
}
.verbTrain__Items-Link {
  margin-top: 1.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  background-color: purple;
  color: #fff;
  font-size: 1.4rem;
  border-radius: 0.5rem;
}
.verbTrain__Items-Link:hover {
  background-color: #fff;
  color: rgb(158, 18, 177);
  border: 1px solid rgb(158, 18, 177);
}
.verbTrain__Items-Key {
  font-size: 1.4rem;
  color: #464749;
}
.verbTrain__Items-Val {
  font-size: 1.3rem;
  color: rgb(107, 107, 107);
}
.verbTrain__Items-Description {
  color: rgb(107, 107, 107);
  display: block;
  font-size: 1.2rem;
}

.verbTrain__changes {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.verbTrain__changes-item {
  font-size: 2rem;
  transition: all 0.2s ease-in;
}
.verbTrain__changes-item:hover {
  cursor: pointer;
  transform: translateY(-0.2rem);
}
.verbTrain__changes-delete {
  color: red;
}
.verbTrain__changes-edit {
  color: green;
}
.verbTrain__information {
  margin-bottom: 2.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
}
.verbTrain__information-content {
  width: 50%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  border-radius: 0.5rem;
  background-color: #a7edad;
  color: green;
}

.verbSupport {
  height: 100%;
}
.verbSupport__Content {
  height: 100%;
}
.verbSupport__Row {
  height: 100%;
}
.verbSupport__Col {
  height: 100%;
}
.verbSupport__Message {
  width: 100%;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 1rem;
  gap: 1.5rem;
  color: #535353;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.1s ease;
}
.verbSupport__Message:hover {
  background-color: rgb(158, 18, 177);
  color: #fff !important;
  transform: translateY(-0.2rem);
}
.verbSupport__Message:hover .verbSupport__Text {
  color: #fff;
}
.verbSupport__Lists {
  margin-top: 3rem;
}
.verbSupport__Table {
  width: 100%;
}
.verbSupport__Table-Response {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.verbSupport__Table-Response-Item {
  display: flex;
  gap: 0.7rem;
}
.verbSupport__Table-Response-Key {
  font-size: 1.4rem;
}
.verbSupport__Table-Response-Value {
  font-size: 1.3rem;
  color: #464749;
}
.verbSupport__Table-Response-Des {
  margin-top: 0.8rem;
}
.verbSupport__Table-Response-Text {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.verbSupport__Table-Response-Text::before {
  content: "›";
  font-size: 2.5rem;
  color: rgb(158, 18, 177);
}
.verbSupport__Table-Row {
  text-align: center;
}
.verbSupport__Table-Row.Response {
  border-right: 3px solid #00b900;
}
.verbSupport__Table-Row.Dont {
  border-right: 3px solid #f28651;
}
.verbSupport__Table-Row.Close {
  border-right: 3px solid #ff0101;
}
.verbSupport__Table-Row1 {
  display: none;
}
.verbSupport__Table-Col {
  padding: 1.5rem !important;
  border: 1px solid #ccc;
}
.verbSupport__Table-Col-Icon {
  cursor: pointer;
}
.verbSupport__Table-Cols {
  padding: 2.5rem 1.5rem !important;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.verbSupport__Question {
  padding-right: 2.5rem;
}
.verbSupport__Question-Title {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.verbSupport__Question-Text {
  font-size: 1.4rem;
}
.Accordion__body-Supports {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.5rem 1.5rem;
  font-size: 1.4rem;
  line-height: 3rem;
  text-align: justify;
}

.verbStartTest {
  height: 91.7vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #454545;
}
.verbStartTest__Content {
  width: 80rem;
  background-color: #fff;
  box-shadow: 0 0 17px rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  border: 1px solid #eee;
  padding: 3rem 4rem;
}
.verbStartTest__Title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.verbStartTest__Title-Text {
  width: 80%;
  display: flex;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #444;
  border-bottom: 1px solid #ccc;
  padding: 2.5rem 0;
}
.verbStartTest__Time {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.verbStartTest__Item {
  margin: 1rem 0;
  color: rgb(107, 107, 107);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.verbStartTest__Icon {
  font-size: 1.4rem;
}
.verbStartTest__Key {
  font-size: 1.4rem;
}
.verbStartTest__Value {
  font-size: 1.5rem;
}
.verbStartTest__Info {
  margin: 1rem 0;
}
.verbStartTest__Info-Info {
  color: red;
  margin-bottom: 1rem;
}
.verbStartTest__Info-List {
  list-style: disc;
  padding-right: 2rem;
  color: #a2a2a2;
  font-size: 1.4rem;
}
.verbStartTest__Info-Item {
  margin-bottom: 1rem;
}
.verbStartTest__Info-Link {
  margin-top: 2rem;
  width: 100%;
  background-color: rgb(158, 18, 177);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in;
}
.verbStartTest__Info-Link:hover {
  color: #fff;
  transform: translateY(-0.2rem);
}

.ExamTest {
  display: flex;
  padding-bottom: 3rem;
  background-color: #454545;
}
.ExamTest__Row {
  margin-top: 5rem;
}
.ExamTest__Col {
  position: relative;
}
.ExamTest__Col-Content {
  position: sticky;
  top: 1.5rem;
  right: 0;
}
.ExamTest__Content {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 17px rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  border: 1px solid #eee;
  padding: 3rem 4rem;
}
.ExamTest__Header-Question {
  font-size: 1.8rem;
  color: rgb(158, 18, 177);
  font-weight: bold;
  margin-bottom: 1rem;
}
.ExamTest__Header-SubQuestion {
  font-size: 1.4rem;
  color: #464749;
}
.ExamTest__Question-Title {
  margin-bottom: 4.5rem;
}
.ExamTest__Question-Item-QBox {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ExamTest__Question-Item-Number {
  font-size: 1.5rem;
  color: #464749;
}
.ExamTest__Question-Item-QInput {
  width: 100%;
  background-color: #eee;
  color: #000;
  border-radius: 1rem;
  border: 1px solid silver;
  padding: 1.5rem 3rem;
}
.ExamTest__Question-Item-ABox {
  margin-top: 2rem;
}
.ExamTest__Question-Item-Lists-Item.active .ExamTest__Question-Item-Lists-Answer {
  background-color: #a7edad !important;
  color: green !important;
}
.ExamTest__Question-Item-Lists-Item.YouResponse .ExamTest__Question-Item-Lists-Answer {
  color: #bd2121;
  background-color: #e99486;
}
.ExamTest__Question-Item-Lists-Answer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in;
  direction: ltr;
}
.ExamTest__Question-Item-Lists-Answer:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
  transform: translateY(-0.2rem);
  cursor: pointer;
}
.ExamTest__Question-Item-Lists-Input {
  visibility: hidden;
}
.ExamTest__TimeBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid silver;
  border-radius: 1rem;
  padding: 1.5rem 2rem;
  margin: 1rem 0;
}
.ExamTest__TimeBox-Text {
  color: rgb(158, 18, 177);
  font-weight: bold;
}
.ExamTest__TimeBox-Time {
  font-size: 1.5rem;
  font-weight: bold;
}
.ExamTest__Calender {
  margin: 4rem 0;
}
.ExamTest__Calender-Title {
  font-size: 1.7rem;
  margin: 1.5rem 0;
}
.ExamTest__Calender-Lists {
  margin: 1.5rem 0;
}
.ExamTest__Calender-Item {
  border: 1px solid #ccc;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ExamTest__Calender-Item.active {
  background-color: green !important;
  color: #fff !important;
}
.ExamTest__TestEnd-Box {
  padding: 1.5rem;
  background-color: rgb(158, 18, 177);
  font-size: 1.5rem;
  border-radius: 1.5rem;
  margin-top: 1.5rem;
  transition: all 0.1s ease-in;
}
.ExamTest__TestEnd-Box-Text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #fff;
}
.ExamTest__TestEnd-Box-Text:hover {
  color: #fff;
}
.ExamTest__TestEnd-Box:hover {
  transform: translateY(-0.2rem);
  cursor: pointer;
}
.ExamTest__Info-Lists {
  display: flex;
  flex-direction: column;
  color: #464749;
  gap: 0.5rem;
}
.ExamTest__Info-Items {
  font-size: 1.4rem;
}
.ExamTest__Info-Items::marker {
  content: "✓";
  color: green;
  position: relative;
  padding: 1rem;
  font-size: 1.6rem;
}

.darkPage {
  display: none;
  height: 100vh;
  width: 100%;
  background-color: #000;
  opacity: 0.2;
  position: fixed;
  top: 0;
  right: 0;
}

.QuestionEndBox {
  display: none;
  padding: 3rem 4rem;
  width: max-content;
  height: 20rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 17px rgba(255, 255, 255, 0.3);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid silver;
}
.QuestionEndBox__Title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #464749;
  padding-bottom: 2rem;
  border-bottom: 1px solid #ccc;
}
.QuestionEndBox__Qes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 3rem;
  gap: 1rem;
}
.QuestionEndBox__No, .QuestionEndBox__Yes {
  width: max-content;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
}
.QuestionEndBox__No:hover, .QuestionEndBox__Yes:hover {
  transform: translateY(-0.2rem);
}

.verbAddRequest__Content-Title {
  font-size: 2.2rem;
}
.verbAddRequest__Main {
  margin: 2.5rem 0;
}
.verbAddRequest__Row {
  margin-bottom: 4rem;
}
.verbAddRequest__Row-Select {
  margin-bottom: 4rem;
}
.verbAddRequest__Items-Title {
  margin-left: 1.5rem;
}
.verbAddRequest__Items-Input {
  width: 100%;
  padding: 1rem 2rem;
  color: #464749;
  font-size: 1.5rem;
  border: 1px solid silver;
  border-radius: 0.6rem;
  margin-top: 1rem;
}
.verbAddRequest__Select {
  width: 100%;
  background-color: #eee;
  border: 1px solid silver;
  border-radius: 0.5rem;
  padding: 1rem 0.5rem;
  margin-top: 1rem;
}
.verbAddRequest__Option {
  width: 100%;
}
.verbAddRequest__TextArea {
  width: 100%;
  height: 15rem;
  padding: 2.5rem 3rem;
  color: #464749;
  font-size: 1.5rem;
  border: 1px solid silver;
  border-radius: 0.6rem;
  margin-top: 1rem;
}
.verbAddRequest__Btn {
  width: 100%;
  padding: 1.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(158, 18, 177);
  background-color: rgb(158, 18, 177);
  color: #fff;
  font-size: 1.7rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.1s ease-in;
}
.verbAddRequest__Btn:hover {
  transform: translateY(-0.2rem);
}
.verbAddRequest__Message {
  width: 100%;
  padding: 1.5rem 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.verbAddRequest__Message-Text {
  color: green;
  margin-left: 1rem;
  font-size: 1.5rem;
}
.verbAddRequest__Message-Success {
  width: 10rem;
  border: 1px solid green;
  border-radius: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 0.5rem;
  color: green;
}
.verbAddRequest__Message-Back {
  color: green;
}
.verbAddRequest__Message-Back:hover {
  color: green;
}

.ResExam {
  height: 100%;
}
.ResExam__Content {
  height: 100%;
}
.ResExam__Content-Filter {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ResExam__Content-Filter-Text {
  font-size: 1.5rem;
  color: #464749;
}
.ResExam__Content-Filter-Lists {
  width: 35rem;
  background-color: #f1f1f1;
  color: #464749;
  font-size: 1.4rem;
  border: 1px solid #ccc;
  border-radius: 0.6rem;
  padding: 0.5rem 2rem;
  cursor: pointer;
}
.ResExam__Content-Main {
  margin-top: 4rem;
}
.ResExam__Content-Items {
  background-color: #fff;
  border: 1px solid silver;
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.3);
  border-radius: 0.6rem;
  padding: 2.5rem 3rem;
  margin-bottom: 2rem;
}
.ResExam__Content-Items-Header {
  font-size: 1.3rem;
  background-color: rgb(158, 18, 177);
  padding: 0.5rem 2rem;
  color: #fff;
  margin: 1rem 0;
  border-radius: 1rem;
}
.ResExam__Content-Items-Title {
  margin-top: 2rem;
  background-color: darkseagreen;
  padding: 1rem 2rem;
  margin-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ResExam__Content-Items-Title-Text {
  font-size: 1.7rem;
}
.ResExam__Content-Items-Date {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-top: 1.5rem;
  background-color: beige;
  padding: 1rem 2rem;
  margin-right: 2rem;
}
.ResExam__Content-Items-Date-Key {
  font-size: 1.5rem;
}
.ResExam__Content-Items-Date-Value {
  font-size: 1.4rem;
}
.ResExam__Content-Items-Question {
  background-color: darkkhaki;
  padding: 1rem 2rem;
  margin-right: 2rem;
  display: flex;
  margin-top: 1.5rem;
  align-items: center;
  gap: 2.5rem;
}
.ResExam__Content-Items-Question-Value {
  font-size: 1.4rem;
  color: #464749;
}
.ResExam__Content-Items-Btn {
  margin-top: 1.5rem;
  margin-right: 2rem;
}
.ResExam__Content-Items-Btn-Item {
  width: 100%;
  background-color: rgb(158, 18, 177);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 0;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
.ResExam__Content-Items-Btn-Item:hover {
  color: #fff;
  transform: translateY(-0.2rem);
}
.ResExam__Response {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ResExam__Response-Text {
  width: 100%;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 1rem;
  margin-bottom: 4rem;
}
.ResExam__Response-Text.Correct {
  color: green;
  background-color: #a7edad !important;
}
.ResExam__Response-Text.InCorrect {
  color: #bd2121;
  background-color: #e99486;
}
.ResExam__Response-Item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ResExam__Response-Item-Key {
  font-size: 1.6rem;
}
.ResExam__Response-Item-Value {
  font-size: 1.5rem;
}
.ResExam__Response-Question {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: floralwhite;
}
.ResExam__Response-HeadTitle {
  font-size: 1.7rem;
}
.ResExam__Response-Answer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ResExam__Response-Level-Table {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem;
}
.ResExam__Response-Level-Col {
  text-align: center;
  padding: 1rem 0;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.ResExam__Response-Level-Col-Pic {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  display: none;
}

.FullStack__Header {
  position: relative;
  width: 100%;
  border: 2px solid rgb(158, 18, 177);
  border-radius: 1.5rem;
  margin-top: 8rem;
}
.FullStack__Header-Col-Right {
  text-align: center;
}
.FullStack__Header-Col-Right-Content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.FullStack__Header-Col-Right-Image {
  margin-bottom: 1.5rem;
}
.FullStack__Header-Col-Right-Text {
  font-size: 1.8rem;
  margin-top: 1.5rem;
  font-weight: bold;
  position: absolute;
  bottom: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  left: 5rem;
  padding: 2rem;
  border: 2px solid rgb(158, 18, 177);
  border-radius: 1rem;
  margin: 1.2rem;
}
.FullStack__Header-Col-Right-Text-MainPrice {
  font-size: 1.1rem !important;
}
.FullStack__Header-Col-Right-Text-MainIcon {
  font-size: 1.1rem !important;
}
.FullStack__Header-Col-Right-Text-MainTitle {
  font-size: 1.1rem !important;
  text-decoration: line-through;
}
.FullStack__Header-Col-Right-Text-SubTitle {
  font-size: 1.1rem !important;
}
.FullStack__Header-Col-Right-Text-Price {
  font-size: 1.6rem;
  color: #464749;
  margin-right: 3.5rem;
  margin-left: 0.3rem;
}
.FullStack__Header-Col-Right-Text-Icon {
  color: #9e12b1;
  font-size: 1.7rem;
  margin-left: 0.3rem;
}
.FullStack__Header-Col-Right-Text-Title {
  font-weight: bold;
  font-size: 1.7rem;
}
.FullStack__Header-Col-Right-Text-SubTitle {
  color: rgb(158, 18, 177);
  font-size: 1.4rem;
}
.FullStack__Header-Col-Right-Image-Pic {
  width: 38rem;
  height: 26rem;
  border-radius: 4rem;
  overflow: hidden;
  border: 2px solid #9e12b1;
  position: absolute;
  top: -5rem;
  left: -6rem;
}
.FullStack__Header-Title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.FullStack__Header-Title-Main {
  border: 1px solid #ccc;
  border-top: navajowhite;
  border-right: navajowhite;
  background-color: rgb(240, 240, 240);
  padding: 1.5rem;
  border-radius: 5rem 2rem 0 5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  transition: all 0.1s ease-in;
}
.FullStack__Header-Title-Main:hover {
  background-color: rgb(235, 235, 235);
}
.FullStack__Header-Title-Update {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: rgb(240, 240, 240);
  padding: 1.5rem;
  border-radius: 0 0 1.5rem 1.5rem;
  border: 1px solid #ccc;
  border-top: none;
  cursor: pointer;
  transition: all 0.1s ease-in;
}
.FullStack__Header-Title-Update:hover {
  background-color: rgb(235, 235, 235);
}
.FullStack__Header-Description {
  padding: 2.5rem 2rem;
}
.FullStack__Header-Name {
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.FullStack__Header-Name-Item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 1.5rem;
}
.FullStack__Header-Name-Item-Picture {
  width: 4rem;
  height: 4rem;
  border-radius: 0.2rem 1rem;
  border: 1px solid #ccc;
}
.FullStack__Header-Name-Item-Text {
  margin-right: 1rem;
  color: #9e12b1;
}
.FullStack__Header-Name-Item-Icon {
  color: rgb(158, 18, 177);
}
.FullStack__Header-Intro {
  width: 100%;
  padding: 2.5rem 2rem;
  background-color: rgb(235, 235, 235);
  border-radius: 1rem 0 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.FullStack__Header-Intro-Right {
  width: 100%;
}
.FullStack__Header-Intro-List {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.FullStack__Header-Intro-List-1{
    flex-direction: column;
}
.FullStack__Header-Intro-Box {
  display: flex;
  gap:0.5rem;
}
.FullStack__Header-Intro-Item {
  display: flex;
  align-items: center;
  color: #6f6f6f;
  gap: 1.2rem;
}
.FullStack__Header-Intro-Item-1{
    width: 100%;
  justify-content: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1.2rem;
}
.FullStack__Header-Intro-Item-Pic {
  width: 6rem;
  object-fit: contain;
  border: 1px solid #ccc;
  border-radius: 100%;
  padding: 1rem;
  height: 6rem;
}
.FullStack__Header-Intro-Item-Icon {
  font-size: 1.4rem;
}
.FullStack__Header-Intro-Item-Text {
  font-size: 1.5rem;
}
.FullStack__Header-Intro-Left-Content {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: rgb(158, 18, 177);
}
.FullStack__Header-Intro-Left-Content-Icon {
  font-size: 1.4rem;
}
.FullStack__Header-Intro-Left-Content-Text {
  font-size: 1.6rem;
}
.FullStack__Header-Login-Btn {
  width: 100%;
  padding: 1.5rem;
  background-color: rgb(158, 18, 177);
  color: #fff;
  font-size: 1.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  margin: 2rem 0;
  border-radius: 1rem 0 0 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.FullStack__Header-Login-Btn:hover {
  transform: translateY(-0.2rem);
}
.FullStack__Body {
  margin: 3rem 0;
}
.FullStack__Body-SendRequest {
  padding: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
  background-color: #f6f6f6;
  color: purple;
  font-weight: bold;
  transition: all 0.2s ease-in;
}
.FullStack__Body-SendRequest:hover {
  background-color: #e3e3e3;
}
.FullStack__Body-SendRequest-Link {
  color: purple;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.FullStack__Body-Right {
  padding-left: 2rem;
}
.FullStack__Body-Right-Nazarat {
  width: 100%;
  background-color: #fff;
  border-radius: 0.6rem;
  box-shadow: 0 5px 30px rgba(70, 72, 77, 0.08);
  margin-bottom: 2rem;
  padding: 2rem 2.5rem;
}
.FullStack__Body-Right-Nazarat-Box {
  direction: ltr !important;
  position: relative;
  margin-bottom: 1.5rem;
}
.FullStack__Body-Right-Nazarat-Paper {
  font-family: "iransansweb" !important;
}
.FullStack__Body-Right-Nazarat-Icon {
  position: absolute;
  top: 2rem;
  left: 2rem;
  color: #fff;
  cursor: pointer;
}
.FullStack__Body-Right-Header {
  margin-bottom: 2rem;
}
.FullStack__Body-Right-Posetive {
  margin: 1.5rem 0;
}
.FullStack__Body-Right-Posetive-List {
  margin-top: 1rem;
}
.FullStack__Body-Right-Posetive-Item {
  margin-right: 2rem;
  list-style-type: disc;
  margin-top: 1rem;
  font-weight: 800;
  padding-right: 0.5rem;
}
.FullStack__Body-Right-Title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.FullStack__Body-Right-Description {
  font-size: 1.6rem;
  color: #464749;
  line-height: 4rem;
  text-align: justify;
  font-weight: 400;
}
.FullStack__Body-Left {
  position: relative;
}
.FullStack__Body-Left-Main {
  background-color: #fff;
  box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  overflow: hidden;
  padding: 0;
  position: sticky;
  top: 2rem;
  left: 0;
}
.FullStack__Body-Left-roadMap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #464749;
  border-bottom: 1px solid #ccc;
  padding: 2.5rem 2rem;
}
.FullStack__Body-Left-roadMap-Icon {
  font-size: 2rem;
  margin-left: 1rem;
  color: rgb(158, 18, 177);
}
.FullStack__Body-Left-roadMap-Text {
  font-size: 1.6rem;
  font-weight: bold;
}
.FullStack__Body-Left-Content {
  padding: 2.5rem 2rem;
  height:80vh;
  overflow:auto;
}
.FullStack__Body-Left-TimeLine {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  position: relative;
  padding: 2rem 0;
}
.FullStack__Body-Left-TimeLine::before {
  content: "";
  width: 0.3rem;
  height: 3rem;
  background-color: gray;
  border-radius: 1rem;
  position: absolute;
  bottom: -1.4rem;
  right: 2.1rem;
}
.FullStack__Body-Left-TimeLine:last-child::before {
  display: none !important;
}
.FullStack__Body-Left-TimeLine-Circle {
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
  background-color: rgb(248, 248, 248);
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}
.FullStack__Body-Left-TimeLine-Circle:hover {
  background-color: rgb(240, 240, 240);
  transform: translateY(-0.2rem);
  cursor: pointer;
}
.FullStack__Body-Left-TimeLine-Circle-Icon {
  color: gray;
  font-size: 2.3rem;
}
.FullStack__Body-Left-TimeLine-Text {
  font-size: 1.5rem;
}
.FullStack__Body-Left-TimeLine.active::before {
  background-color: green;
}
.FullStack__Body-Left-TimeLine.active .FullStack__Body-Left-TimeLine-Circle {
  background-color: #a7edad !important;
  border: 1px solid green !important;
}
.FullStack__Body-Left-TimeLine.active .FullStack__Body-Left-TimeLine-Circle-Icon {
  color: green;
}
.FullStack__Body-Left-TimeLine.active .FullStack__Body-Left-TimeLine-Text {
  color: green;
}
.FullStack__Access {
  display: flex;
  margin-top: 4.5rem;
  padding: 1.5rem 1rem;
  align-items: center;
  gap: 4rem;
  border: 1px solid #eee;
  justify-content: center;
}
.FullStack__Access-Item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.FullStack__Access-Item-Box {
  width: 0.5rem;
  height: 3rem;
  border-radius: 1.5rem;
}
.FullStack__Access-Item-Box-1 {
  background-color: green;
}
.FullStack__Access-Item-Box-2 {
  background-color: red;
}
.FullStack__Access-Item-Text {
  font-size: 1.5rem;
}
.FullStack__Access-Item-Text-1 {
  color: green;
}
.FullStack__Access-Item-Text-2 {
  color: red;
}

.PodCast {
  padding: 0;
}
.PodCast__Top {
  width: 100%;
  background-color: #f7f7f7;
}
.PodCast__Top-Content {
  width: 100%;
  max-width: 100%;
  height: 75vh;
  background: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8));
  background-size: auto, auto;
  border-radius: 0.5rem;
  background-size: cover;
  background-position: top;
  clip-path: polygon(0 0, 100% 0, 100% 50vh, 0 100%);
  position: relative;
  padding: 5rem 0;
}
.PodCast__Row {
  margin: 0;
}
.PodCast__Image {
  height: 50vh;
}
.PodCast__Image-Pic {
  height: 100%;
  width: 100%;
}
.PodCast__Text {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.PodCast__Head {
  color: black;
  font-size: 2.2rem;
  font-weight: bold;
  background-color: #fff;
  padding: 1.5rem 3rem;
  border-radius: 1.5rem 1.5rem 0 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.PodCast__Description {
  margin: 0.2rem 0;
  line-height: 3.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  padding: 3rem;
  text-align: justify;
  border-radius: 0 0 1.5rem 1.5rem;
  transition: transform 400ms;
}
.PodCast__List {
  font-weight: bold;
  margin-bottom: 1rem;
}
.PodCast__List-Content {
  list-style: disc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.PodCast__Item {
  font-size: 1.5rem;
}
.PodCast__Links {
  width: 100%;
  padding: 1.5rem;
  font-size: 1.7rem;
  background-color: #fff;
  border-radius: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}
.PodCast__Main {
  margin: 3rem 0;
}
.PodCast__Main-Item {
  margin-top: 3rem;
  border: 1px solid #ccc;
  width: 100%;
  background-color: #fff;
  padding: 4rem;
  border-radius: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5rem;
}
.PodCast__Main-Image-Pic {
  width: 18rem;
}
.PodCast__Main-Description {
  width: 100%;
}
.PodCast__Main-Time-List {
  display: flex;
  justify-content: center;
  gap: 4rem;
  color: #727272;
}
.PodCast__Main-Time-Item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.PodCast__Main-Time-Text {
  font-size: 1.4rem;
}
.PodCast__Main-Title-Head {
  font-size: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.PodCast__Main-Desc-Text {
  line-height: 2.7rem;
  font-size: 1.5rem;
  text-align: justify;
  color: #858585;
}
.PodCast__Sort {
  border: 1px solid #ccc;
  border-radius: 1rem;
  margin-top: 3rem;
  background-color: #fff;
}
.PodCast__Sort-Content {
  padding: 3rem;
}
.PodCast__Sort-Search {
  display: flex;
  justify-content: center;
}
.PodCast__Sort-Search-Input {
  width: 60rem;
  border: 1px solid #ccc;
  border-radius: 0 1rem 1rem 0;
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  color: #4f5467;
  background-color: #fafafa;
}
.PodCast__Sort-Search-Btn {
  height: 100%;
  border: none;
  background-color: purple;
  color: #fff;
  border-radius: 1rem 0 0 1rem;
  padding: 0 3rem;
  font-size: 1.4rem;
}
.PodCast__Sort-Category {
  display: flex;
  justify-content: space-evenly;
  margin-top: 3rem;
}
.PodCast__Sort-Category-Content {
  width: 30rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  background-color: #fafafa;
  padding: 1rem 2rem;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}
.PodCast__Sort-Category-Content:hover {
  background-color: #eeeeee;
}
.PodCast__Sort-Category-Icon {
  position: absolute;
  left: 1rem;
  transform: translateY(-50%);
  top: 50%;
}
.PodCast__Sort-Category-List {
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  margin-top: 0.2rem;
  padding: 1rem 1.5rem;
  display: none;
}
.PodCast__Sort-Category-Item {
  width: 100%;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.PodCast__Sort-Category-Item:last-child {
  border-bottom: none;
}
.PodCast__Sort-Category-Item:hover {
  color: rgb(158, 18, 177);
}
.PodCastPage {
  padding: 2rem 5rem;
}
.PodCastPage__Content {
  background-color: #f7f7f7;
  border-radius: 3rem;
  overflow: hidden;
}
.PodCastPage__Title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 3rem;
  font-weight: 700;
  background-image: linear-gradient(to right, #7ed56f, #28b485);
  -webkit-background-clip: text;
  color: transparent;
  transition: all 0.2s;
}

.Notice {
  padding: 3rem;
}
.Notice__Item {
  background-color: #fff;
  border-radius: 0.2rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  padding: 2rem 3rem;
  position: relative;
  margin-top: 1.5rem;
}
.Notice__Item::before {
  content: "";
  width: 0.8rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.Notice__Item-Input {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(238, 238, 238, 0.9333333333);
  cursor: pointer;
}
.Notice__Item-Content {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
}
.Notice__Item-Top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.Notice__Item-List {
  display: flex;
  gap: 4rem;
  padding-left: 2rem;
  border-left: 1px solid #eee;
}
.Notice__Item-Head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  color: #484848;
  font-size: 1.5rem;
}
.Notice__Item-Description {
  font-size: 1.4rem;
}
.Notice__Item-Image {
  width: 7rem;
  height: 7rem;
}
.Notice__Item-Image-Pic {
  width: 100%;
  border-radius: 100%;
  object-fit: cover;
  height: 100%;
}
.Notice__Help {
  width: 100%;
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.Notice__Help-Item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
}
.Notice__Help-Text {
  font-size: 1.4rem;
}
.Notice__Help-Color {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
}

.adminSetting__Item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.adminSetting__Item-Text {
  width: 20%;
}
.adminSetting__Item-Value {
  width: 40rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  color: #7a7a7a;
  text-align: left;
  background-color: #f8f8f8;
}
.adminSetting__Content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.adminSetting__Content-Head {
  font-size: 2.1rem;
}
.adminSetting__Content-Text {
  width: 100%;
  border: 1px solid #ccc;
  min-height: 33rem;
  padding: 2rem;
  font-size: 1.4rem;
  line-height: 3rem;
  text-align: justify;
  color: #676767;
}

.Courses__Content {
  margin: 2.5rem 0;
}
.Courses__Content-Main {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 1rem rgba(70, 71, 73, 0.2);
  transition: all 400ms ease;
  margin: 1.5rem 0;
  position: relative;
}
.Courses__Content-Main:hover {
  transform: translateY(-0.6rem);
}
.Courses__Content-Link {
  width: 100%;
  height: 100%;
  display: block;
}
.Courses__Content-Image {
  width: 100%;
}
.Courses__Content-Image-Course {
  width: 100%;
  border-radius: 1rem 1rem 0 0;
}
.Courses__Content-Bottom {
  padding: 1rem 2rem;
}
.Courses__Content-Title {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}
.Courses__Content-Rate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.Courses__Content-Cost {
  font-size: 1.8rem;
  margin-top: 1.5rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
  min-height: 53px;
  justify-content: center;
}
.Courses__Content-Cost-Main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.Courses__Content-Cost-Discount {
  font-size: 1.4rem;
  color: #464749;
  margin-left: 0.3rem;
}
.Courses__Content-Cost-Title {
  font-weight: bold;
  font-size: 1.5rem;
}
.Courses__Content-Cost-SubTitle {
  color: rgb(158, 18, 177);
  font-size: 1.4rem;
}
.Courses__Content-Instructor-Link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgb(107, 107, 107);
  font-size: 1.4rem;
}
.Courses__Content-Rating {
  display: flex;
  align-items: center;
}
.Courses__Content-Price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0;
}
.Courses__Content-Price-Count {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  color: rgb(107, 107, 107);
}
.Courses__Content-Price-Content-Title {
  font-size: 1.6rem;
  color: rgb(107, 107, 107);
}
.Courses__Content-Information {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(158, 18, 177);
  gap: 1rem;
  border-top: 1px solid rgb(210, 210, 210);
  padding: 1.5rem;
}
.Courses__Content-Information-Icon {
  font-size: 1.3rem;
}

.Btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.7rem 1.5rem;
  background-color: rgb(158, 18, 177);
  border-radius: 0.5rem;
  color: #fff;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.Btn:hover {
  transform: translateY(-0.4rem);
}

.Btn-Text {
  font-size: 1.4rem;
  color: #fff;
}
.Btn-Text:hover {
  color: #fff !important;
}

.showCart__Btn {
  display: flex;
  justify-content: space-between;
  margin: 10rem 2rem 0 2rem;
}
.showCart__Btn-Link {
  padding: 1rem 4rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: #fff;
  transition: all 0.3s ease;
}
.showCart__Btn-Link:hover {
  color: #fff;
  transform: translateY(-0.5rem);
}
.showCart__Btn-Success {
  background-color: #00a049;
}
.showCart__Btn-Failue {
  background-color: #717171;
}
.showCart__Btn-Text {
  font-size: 1.5rem;
}

.article__main {
  padding: 2rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 1.6rem rgba(70, 71, 73, 0.1);
  margin: 2rem 0;
}
.article__main-link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.article__main-image {
  max-width: 100%;
     border-radius: 1rem;

}
.article__main-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 1.5rem;
}
.article__main-description {
  margin: 1.5rem 0 2.5rem 0;
  font-size: 1.3rem;
  color: rgb(107, 107, 107);
}
.article__main-more {
  padding: 0.5rem 1rem;
  border: 1px solid rgb(158, 18, 177);
  border-radius: 0.5rem;
  color: rgb(158, 18, 177);
  transition: all 0.4s ease;
}
.article__main-more:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}

.HamburgerMenu {
  font-size: 2.6rem;
  color: #000;
  cursor: pointer;
  transition: all 400ms ease-in;
  display: none;
  z-index: 10;
}
.HamburgerMenu:hover {
  transform: translateY(-0.2rem);
  color: rgb(158, 18, 177);
}

.Menu-Hamburger {
  padding: 1rem;
  display: none;
}
.Menu-Hamburger__DarkPage {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.4;
  position: fixed;
  top: 0;
  right: 0;
  display: none;
  transition: all 450ms ease;
}
.Menu-Hamburger__Content {
  width: 34vw;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  top: 0;
  box-shadow: -1rem 0 1.2rem rgba(255, 255, 255, 0.3);
  right: -70rem;
  padding: 1.5rem 2.5rem;
  overflow: auto;
  transition: all 250ms ease;
}
.Menu-Hamburger__Close-Icon {
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  font-size: 2.5rem;
  cursor: pointer;
  color: red;
  transition: all 400ms ease;
}
.Menu-Hamburger__Close-Icon:hover {
  color: rgb(158, 18, 177);
}
.Menu-Hamburger__Top {
  margin: 1rem 0;
}
.Menu-Hamburger__Link {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ccc;
}
.Menu-Hamburger__Link-Image {
  max-width: 100%;
}
.Menu-Hamburger__Lists {
  padding: 1rem 0;
}
.Menu-Hamburger__Item {
  color: rgb(107, 107, 107);
  padding: 1.7rem 0;
}
.Menu-Hamburger__Item-Links {
  color: rgb(107, 107, 107);
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.Menu-Hamburger__Item-Icon {
  font-size: 1.6rem;
}
.Menu-Hamburger__Item-Text {
  font-size: 1.4rem;
}
.Menu-Hamburger__Buttom {
  border-top: 1px solid #ccc;
  padding-top: 2rem;
}
.Menu-Hamburger__SubItem-Links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 250ms ease;
}
.Menu-Hamburger__SubItem-Links:hover {
  color: rgb(158, 18, 177);
}
.Menu-Hamburger__Item-sub {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
}
.Menu-Hamburger__SubMenu {
  padding: 1rem 1.5rem;
}
.Menu-Hamburger__SubMenu-List {
  display: none;
  padding: 1rem 3rem;
  transition: all 400ms ease;
}
.Menu-Hamburger__SubMenu-Item {
  cursor: pointer;
  padding: 0.7rem 0.5rem;
  position: relative;
}
.Menu-Hamburger__SubMenu-Item::before {
  content: "";
  width: 1rem;
  height: 0.4rem;
  background-color: rgb(158, 18, 177);
  position: absolute;
  right: -1.1rem;
  top: 0px;
  bottom: 0;
  margin: auto;
  border-radius: 1rem;
}
.Menu-Hamburger__SubMenu-Item:first-child .Menu-Hamburger__SubMenu-Link {
  color: #000;
  font-weight: bold;
}
.Menu-Hamburger__SubMenu-Text {
  font-size: 1.3rem;
}

.Pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.Pagination__Item {
  width: 4rem;
  height: 4rem;
  background-color: #f0f0f1;
  border-radius: 0.5rem;
  overflow: hidden;
}
.Pagination__Item-Link {
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.Pagination__Item-Link:hover {
  background-color: rgb(158, 18, 177);
  color: #fff;
}
.Pagination__Item-Link--active {
  color: #fff !important;
  background-color: rgb(158, 18, 177);
}
.breadcrumb {
  padding: 2rem 3rem;
  background-color: #f0f2f7;
  border-radius: 1rem;
}
.breadcrumb-Content {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.breadcrumb-Content-Home {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1rem;
  overflow: hidden;
}
.breadcrumb-Content-Home-Link {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.breadcrumb-Content-Home-Icon {
  color: #464749;
}
.breadcrumb-List {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.breadcrumb-Item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.breadcrumb-Link {
  color: #7f8187;
  font-size: 1.5rem;
}
.breadcrumb-Icon {
  color: #7f8187;
  font-size: 1.3rem;
}

.Comments-articles {
  margin: 2rem 0;
}
.Comments-articles-Title {
  color: #464749;
}
.Comments-articles-Description {
  color: #464749;
  margin: 1.5rem 0;
}
.Comments-articles-Link {
  font-weight: bold;
}
.Comments-articles-Box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.Comments-articles-User {
  color: #464749;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.Comments-articles-Text {
  width: 100%;
  border: 1px solid #ccc;
  height: 18.5rem;
  border-radius: 0.5rem;
  padding: 2rem;
}
.Comments-articles-Button {
  border: none;
  margin: 1rem 0;
  padding: 1rem 3rem;
  font-size: 1.4rem;
}

.coursePage__Related {
  padding: 2.5rem 3rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0 13px 1px rgba(70, 72, 77, 0.08);
  overflow: hidden;
}
.coursePage__Related-Head {
  margin-bottom: 2rem;
  position: relative;
}
.coursePage__Related-Head-Title {
  color: #464749;
}
.coursePage__Related-List {
  width: 100%;
  height: 100%;
}
.coursePage__Related-Item {
  margin: 1.5rem 0;
}
.coursePage__Related-Link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
}
.coursePage__Related-Image {
  max-width: 7rem;
  border-radius: 0.5rem;
}
.coursePage__Related-Text {
  font-size: 1.3rem;
}

.course-Square {
  position: relative;
}
.course-Square::before {
  content: "";
  width: 5rem;
  height: 4rem;
  background-color: rgb(158, 18, 177);
  position: absolute;
  right: -6rem;
  top: -1rem;
  border-radius: 1rem 0 0 1rem;
  transform: skewX(-10deg);
}

.showCart__Content {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 1.6rem rgba(70, 71, 73, 0.3);
  padding: 5.5rem 3rem;
  border-radius: 1rem;
}
.showCart__Path {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}
.showCart__Path-Dotted {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.showCart__Path-Dotted.active .showCart__Path-Dotted-Dash {
  background-color: rgb(158, 18, 177);
}
.showCart__Path-Dotted-Dash {
  width: 1.5rem;
  height: 0.3rem;
  background-color: #ccc;
}
.showCart__Path-circle {
  position: relative;
}
.showCart__Path-circle.active .showCart__Path-circle-Item {
  background-color: rgb(158, 18, 177);
  border: 1px solid rgb(158, 18, 177);
}
.showCart__Path-circle.active .showCart__Path-circle-Icon {
  visibility: visible;
  color: #fff;
}
.showCart__Path-circle.active .showCart__Path-circle-Text {
  color: rgb(158, 18, 177);
}
.showCart__Path-circle-Item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid #ccc;
  border-radius: 100%;
}
.showCart__Path-circle-Icon {
  visibility: hidden;
}
.showCart__Path-circle-Text {
  position: absolute;
  bottom: -4rem;
  font-size: 1.3rem;
  width: 10rem;
  right: -3rem;
  text-align: center;
}
.showCart__Line.active .showCart__Line-Item {
  background-color: rgb(158, 18, 177);
}
.showCart__Line-Item {
  display: flex;
  width: 10rem;
  height: 0.3rem;
  background-color: #ccc;
}

@media only screen and (max-width: 1400px) {
  .suggest__Row-Title {
    margin-bottom: 1.5rem;
  }
  .suggest__Main-Discount {
    top: 2rem;
  }
}
@media only screen and (max-width: 1200px) {
  .suggest__Price {
    font-size: 1.2rem;
  }
  .Landing__Part-2 {
    display: none;
  }
  .Landing__Page-Text {
    font-size: 1.8rem;
  }
  .Landing__Title {
    font-size: 3.8rem;
  }
  .Landing__SubTitle {
    font-size: 2.6rem;
  }
  .Landing {
    height: auto;
  }
}
@media only screen and (max-width: 1110px) {
  .header__Top-Left {
    display: none;
  }
  .header__content {
    justify-content: center;
  }
}
@media only screen and (max-width: 992px) {
  .main-Header__Navbar {
    display: none;
  }
  .suggest__Main-Discount {
    top: -2rem;
  }
  .suggest__Main-Col1 {
    margin-top: 2.5rem;
  }
  .header__Top {
    display: none;
  }
  .main-Header__Content {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
  }
  .main-Header__Content-Right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100vw;
    padding: 1rem 3rem;
    justify-content: space-between;
    border-top: 1px solid #ccc;
  }
  .HamburgerMenu {
    display: block;
  }
  .Menu-Hamburger {
    display: block;
  }
  .Menu-Hamburger__Content {
    z-index: 100;
  }
  .suggest__Row-Col {
    flex-direction: column-reverse;
  }
  .suggest__Text-Column {
    padding: 0;
    margin-top: 3rem;
  }
  .suggest__Row-Title {
    margin-bottom: 3rem;
  }
  .suggest__Description {
    padding: 0;
  }
  .suggest__Row-Content {
    padding: 0;
    margin: 0;
  }
}
@media only screen and (max-width: 768px) {
  html {
    font-size: 53.5%;
  }
  .Menu-Hamburger {
    display: block;
  }
  .Menu-Hamburger__Content {
    width: 40vw;
    z-index: 100;
  }
}
@media only screen and (max-width: 576px) {
  .Menu-Hamburger {
    display: block;
  }
  .Menu-Hamburger__Content {
    width: 70vw;
    z-index: 100;
  }
  .Section__Title::before {
    display: none;
  }
  .Landing__Status {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4rem;
    column-gap: 7rem;
  }
  .Landing__Items:first-child {
    flex-basis: 100%;
  }
  .Landing {
    padding: 3rem;
  }
  .Landing__Page-Links {
    margin-bottom: 2rem;
    padding: 1.5rem 4rem;
  }
  .Landing__Page-Items {
    width: 100%;
  }
  .Landing__Page-Item {
    gap: 2.5rem;
    width: 100%;
  }
  .Landing__Page-Box {
    width: 100%;
    justify-content: start;
  }
}
@media only screen and (max-width: 352px) {
  .suggest__Main-Item-Content-Right-Icon {
    display: none;
  }
}



@media only screen and (max-width: 992px) {
  .category__TopBar {
    flex-direction: column-reverse;
    gap: 2rem;
  }
}
@media only screen and (max-width: 768px) {
  .category__TopBar-Right-RowBtn,
  .category__TopBar-Right-ColumnBtn {
    display: none;
  }
}
.coursePage {
  margin: 2rem 0;
}

@media only screen and (max-width: 1200px) {
  html {
    font-size: 53.5%;
  }
}
@media only screen and (max-width: 992px) {
  .coursePage__Description-Row {
    flex-direction: column-reverse;
  }
  .coursePage__Related {
    display: none;
  }
  .coursePage__Information-info {
    margin-left: 0;
  }
}
@media only screen and (max-width: 768px) {
  .introduction__Title {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 576px) {
  html {
    font-size: 48.5%;
  }
}
.Blog {
  margin: 2rem 0;
}
@media only screen and (max-width: 412px) {
  .blogAuthor__Col {
    flex-direction: column;
  }
  .blogAuthor__Info {
    width: 100%;
  }
  .blogAuthor__ColBottom {
    align-items: start !important;
  }
}

@media only screen and (max-width: 992px) {
  .showCart__Info-Row {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 576px) {
  .showCart__Info {
    padding: 0;
  }
  .showCart__Price {
    margin: 0;
  }
  .showCart__Info-Row {
    min-width: 15rem;
  }
  .showCart__Price-Final {
    width: 100%;
  }
  .showCart__Btn {
    margin: 2rem 0 0 0;
  }
  .showCart__Path-Dotted {
    display: none;
  }
  .showCart__Line-Item {
    width: 5rem;
  }
  .showCart__Btn-Link {
    padding: 1rem 2rem;
  }
}
@media only screen and (max-width: 992px) {
  .showCart1__Header-Button {
    width: 20%;
    padding: 1rem;
  }
}
@media only screen and (max-width: 768px) {
  .showCart1__Header-Button {
    width: 25%;
    padding: 1rem;
  }
}
@media only screen and (max-width: 576px) {
  .showCart1__Discount-Content {
    flex-direction: column;
  }
  .showCart1__Header-Input,
  .showCart1__Header-Button {
    width: 100%;
    border-radius: 0;
  }
  .showCart1__Pay-Item {
    flex-direction: column;
    gap: 1.5rem;
  }
  .showCart1__Rule-Box-Text {
    font-size: 1.2rem;
  }
  .showCart1__Item-Row {
    min-width: 20rem;
  }
}
@media only screen and (max-width: 576px) {
  .Ballon__Row {
    row-gap: 3rem;
  }
}
@media only screen and (max-width: 400px) {
  .showcart2_Info-Item1 {
    flex-direction: column;
    gap: 3rem;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 1600px) {
  #Profile__Container {
    padding: 0 5rem;
  }
}
@media only screen and (max-width: 1500px) {
  .Support__Link {
    padding: 2rem 0.2rem;
  }
}
@media only screen and (max-width: 1300px) {
  .Profile_Dashbord-Order-Item {
    padding: 0.5rem;
  }
}
@media only screen and (max-width: 1200px) {
  .Profile_Dashbord__Table-Column-Value {
    margin: 1rem 0;
    display: block;
  }
  .Support__Text {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 992px) {
  .profile__right-buttom-List {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 0;
  }
  .profile__container-Row {
    padding: 2.5rem 2rem !important;
    background-color: #fff;
    box-shadow: 0 0 1.6rem rgba(70, 71, 73, 0.3);
    border-radius: 1rem;
    border: 1px solid silver;
  }
  .profile__right-buttom-Item {
    width: 100%;
    padding: 0.2rem 0;
  }
  .profile__right-buttom-Item > a {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .profile__container-Row {
    padding: 0;
    margin-bottom: 1rem;
  }
  .Walet__Count-Content {
    width: 60% !important;
  }
  .profile__right-Icons {
    display: block;
    font-size: 3rem;
    cursor: pointer;
    transition: all 0.2s ease-in;
  }
  .profile__right-Icons:hover {
    transform: translateY(-0.2rem);
  }
  .profile__right {
      overflow: auto;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    z-index: 100;
    width: 40vw;
    height: 100vh;
    right: -100rem;
    transition: all 250ms ease;
  }
  .profile__right-closeIcon {
    display: flex;
  }
  .admin__category-table{
    padding: 1.5rem 1rem;
  }
  .Notice{
    padding: 0;
  }
  .Notice__Help{
    flex-wrap: wrap;
  }
  .Notice__Item{
    padding: 1rem;
  }
  .Notice__Item-Content{
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    text-align: start;
    width: 100%;
  }
  .Notice__Item-List{
    padding-left: 0;
    border-left: none;
    flex-wrap: wrap;
    justify-content: center;
  }
  .Notice__Item-Description{
    width: 100%;
    text-align: right;
  }

}

@media only screen and (max-width: 576px) {

.adminCourse__Label{
  flex-direction: column;
  align-items: flex-start;
}
  .adminCourse__Label-Value{
    width: 100%;
  }
  .adminCourse__Label-textarea-VerbTrain{
    width: 100% !important;
  }
  .adminCourse__Label-Image{
    padding: 1.2rem 2rem;
  }
}

@media only screen and (max-width: 992px) {

.showcart2__Bank-User-Pay{
    height:auto;
    border:none;
    flex-wrap: wrap;
    gap:2rem;
    padding:1rem;
}
}
@media only screen and (max-width: 768px) {
  .Profile__Info {
    padding: 1rem 3rem;
  }
  .Support__List {
    gap: 1rem;
  }
  .Train__Content-Row {
    row-gap: 1rem;
  }
  .Gift__Items {
    min-width: 10rem;
  }
  .Gift__Items-Tr .Gift__Items:last-child {
    min-width: 20rem;
  }
  .profile__right {
    width: 50vw;
  }
}
@media only screen and (max-width: 576px) {
  .Profile_Dashbord__Table-Column {
    display: block;
    border-left: none;
    width: 100% !important;
  }
  .Walet__Count-Content {
    width: 100% !important;
  }
  .Profile__Course-Navbar {
    flex-direction: column;
  }
  .Profile__Course-Item {
    width: 100%;
  }
  .Profile__Course-Link.active {
    border-radius: 0;
  }
  .Profile__Course-Left-Status {
    flex-direction: column;
    align-items: flex-start;
  }
  .Profile__Course-Left-Title {
    font-size: 1.5rem;
  }
  .Support__Sections-Column {
    min-width: 15rem;
  }
  .profile__right {
    width: 80vw;
  }
   #Profile__Container{
    padding: 0;

  }
  .ticket__Message-Box{
    padding: 1rem;
  }
  .ticket__ReplyBox{
    padding: 1rem;
  }
  .comments__Content-Box-admin{
    margin: 1rem;
  }
  .ticket__Message-Head{
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  .ticket__Message-Content{
    padding: 0;
  }
}
@media only screen and (max-width: 992px) {
  .online__Buttom-Lists {
    max-height: 30rem;
  }
  .online__Top-Content-Column-4 {
    display: none;
  }
  .online__Top-Content-Column-8 {
    flex-wrap: wrap;
    gap: 3.5rem;
  }
}
@media only screen and (max-width: 768px) {
  .online__Buttom-Left {
    padding: 1rem;
  }
}
@media only screen and (max-width: 576px) {
  .online__Buttom-Left-Zip {
    flex-direction: column;
  }
  .online__Buttom-Left-Download,
  .online__Buttom-Left-Peivast {
    width: 100%;
    padding: 1.5rem;
  }
  .online__Top-Content-Column-8 {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 768px) {
  .checkLogin__Header-Box {
    justify-content: flex-start;
    margin-top: 2rem;
  }
}
@media only screen and (max-width: 768px) {
  .Verification__Row {
    flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 1200px) {
  .MainStu__Content-Links-Filters {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }
}
@media only screen and (max-width: 992px) {
  .MainStu__Filters {
    height: auto;
  }
  .MainStu__Filters-Content {
    flex-direction: column;
    margin-bottom: 1rem;
  }
  .MainStu__Content-Course {
    padding: 0;
  }
}
@media only screen and (max-width: 1930px) {
  .workshop__Header-Responsive {
    display: none !important;
  }
  .workshop__Header-Responsive-Dark {
    display: none !important;
  }
  .workshop__Header-ResMenu {
    display: none !important;
  }
  .workshop__Header-ResIcons {
    display: none !important;
  }
}
@media only screen and (max-width: 1600px) {
  .workshop__Panel-Lists-Text {
    font-size: 1.3rem;
  }
  .workshop__Panel-Information-Texts {
    font-size: 1.1rem;
  }
  .workshop {
    padding: 2rem;
  }
  .workshop__Panel-User {
    width: 95%;
  }
  .workshop__Panel-User {
    padding: 1rem;
  }
  .workshop__Header-AllIcons-Icon1 {
    font-size: 2rem;
    color: gray;
    margin-left: 1.5rem;
  }
}
@media only screen and (max-width: 1200px) {
  .workshop__Title-Col-Hamburger-Icon {
    display: flex !important;
  }
  .workshop__Panel-Information-Texts {
    font-size: 1.5rem;
  }
  .workshop__Header-Responsive-Dark {
    display: block !important;
  }
  .workshop__Header-Responsive {
    display: block !important;
  }
  .workshop__Header-ResMenu {
    display: block !important;
  }
  .workshop__Header-ResIcons {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
  }
  .workshop {
    padding: 0;
    width: 100vw;
    border-radius: 4rem;
    background-color: #f0f2f7;
    margin: 0;
  }
  .workshop__Header {
    background-color: #fff;
    padding: 1rem 3rem;
  }
  .workshop__Main {
    padding: 2rem;
    margin: 3rem 0;
  }
  .workshop__Content {
    background-color: #fff;
    padding: 4rem;
    border-radius: 4rem;
  }
  .workshop__Header-Col-1 {
    display: none;
  }
  .workshop__Title-Col-1 {
    display: none;
  }
  .workshop__Header-Navbar {
    display: none;
  }
  .workshop__Header-Col {
    justify-content: space-between;
  }
  .workshop__Header-AllIcons {
    display: flex;
  }
}
@media only screen and (max-width: 578px) {
  .workshop__Panel-Dashbord-RoadMaps-Row1,
  .workshop__Panel-Dashbord-RoadMaps-Row2,
  .workshop__Panel-Dashbord-RoadMaps-Row3 {
    flex-wrap: wrap;
    gap: 4.5rem;
    margin: 0;
    margin-bottom: 4.5rem;
  }
  .workshop__Panel-Dashbord-RoadMaps-Items-Lines {
    display: none;
  }
  .workshop__Panel-Dashbord-RoadMaps-Items {
    align-items: center;
  }
  .workshop__Panel-Dashbord-RoadMaps-Lines,
  .workshop__Panel-Dashbord-RoadMaps-Lines1 {
    display: none;
  }
  .workshop__Panel-Dashbord-RoadMaps-Row2 > .workshop__Panel-Dashbord-RoadMaps-Items {
    align-items: center !important;
  }
  .workshop__Panel-Dashbord-RoadMaps-Row2 {
    flex-direction: column-reverse;
  }
  .workshop__Panel-Dashbord-RoadMaps-Items-Description {
    position: static !important;
    z-index: 1;
    display: block;
    background-color: #fff;
  }
  .workshop__Panel-LineSmallDevice {
    width: 2px;
    height: 98%;
    position: absolute;
    top: 0;
    background-color: #fff;
    padding: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  .workshop__Panel-Level-Description {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 1400px) {
  .verbcourse__Item-Key {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 992px) {
  .verbcourse__Item-Col {
    border-bottom: 1px solid #ccc;
  }
  .verbcourse__Item-Col:last-child {
    border-bottom: none;
  }
  .verbcourse__Item-Col:nth-child(even) {
    border-left: none;
  }
  .verbcourse__Details-Key {
    font-size: 1.4rem;
  }
  .verbcourse__Details-Value {
    font-size: 1.4rem;
  }
  .verbcourse__Details-Introduction > p {
    text-align: justify;
  }
}
@media only screen and (max-width: 768px) {
  .verbcourse__Details-Lists {
    flex-wrap: wrap;
  }
  .verbcourse__Details-Items:not(:last-child) {
    border-bottom: none;
  }
}
@media only screen and (max-width: 576px) {
  .verbcourse__Item-Col {
    border-left: none;
  }
  .workshop__Content {
    padding: 1rem;
    border-radius: 1rem;
  }
  .MainStu__Content-Course-Content-Name, .MainStu__Content-Course-Content-Prof, .MainStu__Content-Course-Content-Date, .MainStu__Content-Course-Content-location, .MainStu__Content-Course-Content-Price, .MainStu__Content-Course-Content-Btn, .MainStu__Content-Course-Content-Date-Col {
    display: flex;
    flex-direction: column;
  }
  .verbcourse__Details-MainTitle {
    flex-direction: column;
    align-items: flex-start;
  }
  .verbcourse__Details-Download {
    flex-direction: column;
  }
  .verbcourse__Details-Download-Video, .verbcourse__Details-Download-Sourse {
    width: 100%;
  }
}
@media only screen and (max-width: 1400px) {
  .verbOnline__Items-Item-Description {
    font-size: 1.3rem;
  }
  .verbOnline__Items-Item-Val {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 972px) {
  .verbOnline__NoPrivateCourse-Content {
    height: auto !important;
  }
  .verbOnline__NoPrivateCourse-Picture-pic {
    width: 50%;
  }
  .verbOnline__NoPrivateCourse-Picture {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media only screen and (max-width: 1400px) {
  .Certificate__Text-desc {
    font-size: 1.3rem;
  }
  .Certificate__Description-Value {
    font-size: 1.2rem;
  }
  .Certificate__Description-Key {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 992px) {
  .Certificate__Col {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 576px) {
  .Certificate {
    margin: 0;
  }
  .Certificate__Content {
    padding: 1rem;
  }
}
@media only screen and (max-width: 992px) {
  .verbSupport__Content {
    height: auto !important;
  }
  .verbSupport__Question-Title {
    font-size: 1.7rem !important;
  }
}
@media only screen and (max-width: 1500px) {
  .verbSupport__Table-Col {
    font-size: 1.3rem;
  }
  .accordion-button-Support {
    font-size: 1.1rem;
  }
  .accordion-body-Support {
    font-size: 1.3rem;
  }
  .verbSupport__Question-Title {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 992px) {
  .verbSupport__Col {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 992px) {
  .FullStack__Header {
    position: relative;
    width: 100%;
    border: 2px solid rgb(158, 18, 177);
    border-radius: 1.5rem;
    margin-top: 1rem;
    overflow: hidden;
  }
  .FullStack__Header-Row {
    display: flex;
    flex-direction: column-reverse;
  }
  .FullStack__Header-Title {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    justify-content: center;
  }
  .FullStack__Header-Title-Main, .FullStack__Header-Title-Update {
    border-radius: 0;
    background-color: inherit;
    border: none;
  }
  .FullStack__Header-Title-Main {
    border-left: 1px solid #ccc !important;
  }
  .FullStack__Header-Col-Right-Image {
    padding: 3.5rem;
  }
  .FullStack__Header-Col-Right-Image-Pic {
    position: static;
    border: none;
    height: auto;
    width: 100%;
    border-radius: 1rem;
  }
  .FullStack__Header-Intro {
    border-radius: 0;
  }
  .FullStack__Header-Intro-List-1 {
    flex-direction: column;
    align-items: start;
  }
  .FullStack__Header-Intro-Box {
    width: 100%;
    justify-content: center;
    gap: 1rem;
  }
  .FullStack__Header-Col-Right-Text {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 2.5rem;
  }
  .FullStack__Header-Login-Btn {
    border-radius: 0;
    margin-bottom: 0;
  }
  .FullStack__Body-Row {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 3rem;
  }
  .FullStack__Body-Right {
    padding: 0;
  }
}
@media only screen and (max-width:1400px) {
    .FullStack__Header-Col-Right-Text{
    left: 2rem;
    }
    
    .FullStack__Header-Intro-Item{
        flex-wrap: wrap;
  justify-content: center;
    }
}
@media only screen and (max-width: 768px) {
  .FullStack__Header-Col-Right-Text {
    flex-wrap: wrap;
    row-gap: 2rem;
  }
  .FullStack__Header-Intro-List {
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .FullStack__Header-Intro {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
  }
  .FullStack__Header-Intro-List {
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .FullStack__Header-Intro-Box {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media only screen and (max-width: 400px) {
  .FullStack__Header-Title {
    flex-direction: column;
    align-items: start;
  }
  .FullStack__Header-Title-Main {
    border-left: none !important;
  }
}
@media only screen and (max-width: 992px) {
  .ResExam__Content-Items-Date, .ResExam__Content-Items-Question {
    flex-direction: column;
    align-items: start;
  }
  .ExamTest__Row-Content {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 1rem;
  }
}
@media only screen and (max-width: 576px) {
  .ResExam__Content-Items-Col2 {
    margin-top: 1.5rem;
  }
  .verbExam__Item{
    padding: 0;
    overflow: hidden;
  }
  .verbExam__Item-Left-Pic{
    border: none;
  }
  .verbExam__Item-Right{
    padding: 1rem 3rem ;
  }
  
}
@media only screen and (max-width: 768px) {
  .Rules__Body .Rules__Body-Row:nth-child(even) {
    flex-direction: column-reverse;
  }
  .Rules__Body .Rules__Body-Row:nth-child(odd) {
    flex-direction: column;
  }
  .Rules__Body-Row {
    margin-top: 2.5rem;
  }
}
@media only screen and (max-width: 576px) {
  .aboutpage {
    padding: 1rem;
  }
}
@media only screen and (max-width: 992px) {
  .PodCast__Top-Content {
    height: auto;
    clip-path: none;
    margin-bottom: 2.5rem;
  }
  .PodCast__Image {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .PodCast__Image-Pic {
    height: auto;
    width: 70rem;
  }
  .PodCast__Main-Item {
    flex-direction: column;
  }
  /* .workshop__Panel-Dashbord-RoadMaps-Items-Description-Html */
}
@media only screen and (max-width: 768px) {
  .PodCast__Image-Pic {
    width: 60rem;
  }
  .paper-audio-player-0 #title.paper-audio-player {
    font-size: 1.5rem;
  }
  .PodCast__Main-Desc-Text {
    line-height: 3.3rem;
  }
}
@media only screen and (max-width: 576px) {
  .PodCast__Image-Pic {
    width: 100%;
  }
  .PodCastPage {
    padding: 0;
  }
  .PodCastPage__Content {
    border-radius: 0;
  }
}
@media only screen and (max-width: 380px) {
  .PodCastPage__Title {
    font-size: 2rem;
  }
  .PodCast__Main-Item {
    padding: 1.5rem;
  }
}

@media only screen and (max-width: 1400px) and (min-width: 1200px) {
  .vip__Main-items {
    padding: 1rem 1.5rem;
    justify-content: space-around;
    flex-direction: column;
    font-size: 1.4rem;
  }
  .Vip__Content-HeadText-Text {
    font-size: 1.5rem;
  }
  .adminDashboard__Content-Header {
    flex-direction: column;
    gap: 1.5rem;
  }
  .vip__text {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .vip__Main-Consulting-link {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem;
  }
  .vip__source {
    flex-direction: column;
    gap: 1rem;
  }
}
@media only screen and (max-width: 1200px) {
  .vip__Main-btn-link--purple, .vip__Main-btn-link--cancelled {
    position: relative;
  }
  .vip__Main-Consulting {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
  }
  .vip__Main-Consulting-img {
    max-width: 90%;
    border-radius: 1rem;
  }
}
@media only screen and (max-width: 1400px) {
  .profile {
    overflow-x: hidden;
    padding: 0 1rem;
  }
  .consulting__content-circle {
    width: 35px;
    height: 35px;
  }
  .consulting__content-circle > i {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1400px) and (min-width: 768px) {
  .consulting__content-position {
    display: none;
  }
}
@media only screen and (max-width: 576px) {
  .consulting__lists {
    flex-wrap: wrap;
  }
  .consulting__links {
    flex-direction: column;
  }
  .consulting__links-download {
    width: 100%;
  }
  .consulting__cancelled{
    width: 95%;
  }
}
@media only screen and (max-width: 1400px) and (min-width: 992px) {
  .consulting__sidebar-item {
    padding: 2rem;
  }
  .consulting__sidebar-link {
    flex-direction: column;
  }
  .consulting__sidebar-image {
    justify-content: center;
  }
  .consulting__sidebar-pic {
    width: 60%;
  }
  .consulting__sidebar-info-icons {
    justify-content: center;
  }
}
@media only screen and (max-width: 768px) {
  .VipConsultingDetails__Row {
    flex-direction: column-reverse;
  }
}
@media only screen and (max-width: 1800px) and (min-width: 1200px) {
  .vip__Main-items-2 {
    margin-bottom: 4rem;
  }
}


/*# sourceMappingURL=style.css.map */

/*//!OFF PAGE*/


.timer-circle.outlined {
  background-color: transparent;
  color:            white;
  }

.btn-white {
  background-color: #fff;
  color:           rgb(158, 18, 177);
  border-radius:    10px;
  font-weight:      bold;
  }
.btn-white:hover {

  color:           white;
  border-radius:    10px;
  font-weight:      bold;
  border: 1px solid white;
  }
.banner-off {
  background-color: rgb(158, 18, 177);

  }
.banner-off-content {
  max-width: 1400px

  }
.off-landing {
  background:      linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9)),
                   url("../public/images/bg-autumn.jpg") no-repeat;
  background-size: cover;
  height:          90rem;
  width:           100%;
  }

.hero {
  text-align:  center;
  color:       #FFFFFF;
  font-size:   39px !important;
  font-weight: 900 !important;
  }

.off-landing-content {
  top:    20%;
  left:   0;
  right:  0;
  margin: auto;
  }

.hero-discount {
  background-color: #FF8C00;
  padding:          0.2rem 3rem;
  border-radius:    1rem;
  color:            black;
  font-size:        30px;
  font-weight:      bold;
  }

.off-title {
  font-size:     4rem;
  margin-bottom: 2rem;
  }

.off-content-top {
  margin-top: 6rem;
  }

.off-card {
  background-color: rgba(210, 105, 30, 0.15);
  color:            #fff;
  padding:          4rem;
  border-radius:    1rem;
  }

.off-text-green {
  color: #FFB74D;
  }

.off-content-head {
  font-size:   3rem;
  color:       #FFB74D;
  font-weight: 900;
  }

.timer-circle {
  width:            60px;
  height:           60px;
  border:           2px solid white;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-direction:   column;
  margin:           0 5px;
  background-color: #fff;
  color:            #000;
  font-weight:      bold;
  border-radius:    0.4rem;
  }

.timer-circle-1 {
  font-size:       3rem;
  width:           180px;
  height:          180px;
  border:          2px solid white;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  margin:          0 5px;
  color:           #fff;
  font-weight:     bold;
  border-radius:   100%;
  background:      radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  }

.timer-circle.outlined {
  background-color: transparent;
  color:            white;
  }

.workshop__end-icon {
  font-size:        3rem !important;
  width:            4rem;
  height:           4rem;
  background-color: white;
  border-radius:    100%;
  padding:          3rem;
  display:          flex;
  justify-content:  center;
  align-items:      center;
  border:           1px solid #8B4513 !important;
  background-color: #f3d4b5 !important;
  color:            #8B4513;
  }

.off-student-comment {
  transition: all 0.3s ease;
  }

.off-student-comment > img{
  height: 22rem;
  }

.off-student-comment:hover {
  transform: translateY(-0.5rem);
  border:    2px solid #FFB74D !important;
  cursor:    pointer;
  }

@media only screen and (max-width: 768px) {

  .off-landing {
    display: none;
    }

  .off-landing-content {
    position: static !important;
    padding:  5rem 2rem;
    }
    
    .banner-off-top{
    flex-direction: column;
    width: 100%;
    }
  .banner-off-page{
    width: 100%;
    margin-left: 0 !important;
    }

  }

@media only screen and (max-width: 576px) {
  .workshop__Panel-Dashbord-RoadMaps-Items-Description {
    padding: 2rem;
    }

  .hero-discount {
    font-size:       20px;
    display:         flex;
    justify-content: center;
    padding:         1rem !important;
    border-radius:   0;
    margin:          1rem 0;
    }

  .hero {
    font-size: 29px !important;
    }


  .off-landing-content {
    top: 5%;
    }

  .off-landing-content {
    padding: 5rem 0;
    }


  .rotating-wrapper {
    width:  150px !important;
    height: 150px !important;

    }

  .chevron-icon {
    bottom: 7px !important;
    }

  .timer-circle-1 {
    width:     85px !important;
    height:    85px !important;
    font-size: 1.8rem;
    }


  }


@media only screen and (max-width: 992px) {
  .off-teacher-section {
    height: auto !important;
    }

  .off-alert-call {
    width: 70% !important;
    }

  .off-alert-btn {
    width: 30% !important;
    }

  .timer-circle-1 {
    width:  125px;
    height: 125px;
    }
    
    .banner-off-content{
    justify-content: center !important;
    gap: 3rem;
    }
  }

@media only screen and (max-width: 1400px) {

  }
.highlight-green {
  color: #FFB74D;
  }

.rotating-wrapper {
  width:           250px;
  height:          250px;
  padding:         2rem;
  position:        relative;
  margin:          auto;
  display:         flex;
  justify-content: center;
  align-items:     center
  }

.rotating-border {
  width:              100%;
  height:             100%;
  border-radius:      50%;
  border:             4px solid transparent;
  border-top-color:   #FFB74D;
  border-left-color:  #FFB74D;
  border-right-color: #FFB74D;
  position:           absolute;
  top:                0;
  right:              0;
  animation:          spin 4s linear infinite;
  z-index:            1;
  }

.rotating-border-notActive {
  border: 4px solid !important;

  }

.chevron-wrapper {
  position:  absolute;
  width:     100%;
  height:    100%;
  top:       0;
  right:     0;
  animation: spin 4s linear infinite;
  z-index:   2;
  }

.chevron-icon {
  position:  absolute;
  bottom:    23px;
  right:     14%;
  transform: rotate(-125deg);
  font-size: 20px;
  color:     #FFB74D;
  }

.circle-text {
  font-weight: bold;
  }


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }


.price-card {
  background-color: #1c1c1c;
  border-radius:    16px;
  padding:          30px 20px;
  text-align:       center;
  box-shadow:       0 0 10px rgba(0, 0, 0, 0.6);
  transition:       all 0.3s ease;
  border:           2px solid transparent;
  color:            #fff;
  }

.price-card.highlight {
  border-color: #D2691E;
  }

.price-card h2 {
  font-size:   7rem;
  font-weight: bold;
  }

.price-card p {
  margin: 0;
  }

.price-card .price-label {
  margin-top:  10px;
  font-weight: bold;
  font-size:   18px;
  }

.price-card .price-desc {
  font-size:  14px;
  color:      #bbb;
  margin-top: 0.8rem;
  }

.price-card:not(.highlight):hover {
  border-color: #666;
  }

.dotted-divider {
  border-top: 1px dotted #777;
  margin:     15px 0;
  }


.off-accordion-button {
  background-color: #1e1e1e !important;
  color:            #fff;
  transition:       background-color 0.3s ease;
  }

.off-accordion-button::after {
  filter: brightness(100);
  }

.off-accordion-button:not(.collapsed) {
  background-color: #D2691E;
  color:            white !important;
  }

.off-accordion-item {
  border:        none;
  margin-bottom: 10px;
  }

.off-accordion-body {
  background-color: #2b2b2b;
  color:            #ddd;
  }

.section-box {
  background-color: #000;
  padding:          20px;
  border-radius:    10px;
  box-shadow:       0 0 10px rgba(0, 0, 0, 0.6);
  }





        /* استایل‌های پاییزی */
        .banner-off {
            background: linear-gradient(135deg, #8B4513 0%, #D2691E 25%, #CD853F 50%, #D2691E 75%, #8B4513 100%);
            position: relative;
            overflow: hidden;
            border-bottom: 3px solid #A0522D;
       
        }
        
        /* ظرف افکت برگ‌ریزان */
        #leaves-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  overflow: visible;
  z-index: 999;
}

        /* افکت برگ‌ریزان */
        .leaf {
            position: absolute !important;
            width: 30px;
            height: 30px;
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.7;
            z-index: 1001;
            pointer-events: none;
            display: block;
            will-change: transform;
            top: -80px !important;
            left:50%;
        }

        /* تنوع لایه و عمق برگ‌ها */
        .leaf.leaf--near { filter: none; z-index: 2; }
        .leaf.leaf--mid { filter: blur(0.5px); opacity: 0.6; z-index: 1; }
        .leaf.leaf--far { filter: blur(1px); opacity: 0.5; z-index: 0; }
        
        /* دایره‌های تایمر با تم پاییزی */
        .timer-circle {
            background: rgba(139, 69, 19, 0.7);
            border: 2px solid #A0522D;
            border-radius: 13%;
            width: 60px;
            height: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        
        .timer-circle.outlined {
            background: rgba(210, 105, 30, 0.5);
        }
        
        .timer-circle div {
            font-size: 1.2rem;
            font-weight: bold;
        }
        
        .timer-circle small {
            font-size: 0.8rem;
        }
        
        /* دکمه با تم پاییزی */
        .btn-white {
            background-color: #F5F5DC;
            color: #8B4513 !important;
            border: 2px solid #A0522D;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-weight: bold;
        }
        
        .btn-white:hover {
            background-color: #A0522D;
            color: #F5F5DC !important;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* آیکون زنگوله */
        .fa-bell {
            color: #FFD700;
            text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
        }
        
        /* انیمیشن لرزش برای زنگوله */
        @keyframes ring {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(5deg); }
            50% { transform: rotate(0deg); }
            75% { transform: rotate(-5deg); }
            100% { transform: rotate(0deg); }
        }
        
        .fa-bell {
            animation: ring 2s infinite;
        }
        
        /* استایل‌های ریسپانسیو */
        @media (max-width: 992px) {
            .banner-off-top {
                flex-direction: column;
                gap: 20px !important;
            }
            
            .timer-circle {
                width: 60px;
                height: 60px;
            }
            
            .timer-circle div {
                font-size: 1.2rem;
            }
        }
        
        @media (max-width: 768px) {
            .banner-off-content {
                flex-direction: column;
                gap: 20px;
            }
            
            .timer-circle {
                width: 50px;
                height: 50px;
            }
            
            .timer-circle div {
                font-size: 1rem;
            }
        }
        
        /* انیمیشن سقوط برگ */
        @keyframes fall {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.8;
            }
            100% {
                transform: translateY(var(--fall-distance, 100vh)) rotate(360deg);
                opacity: 0;
            }
        }
        
        @keyframes fall2 {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.8;
            }
            100% {
                transform: translateY(var(--fall-distance, 100vh)) rotate(-360deg);
                opacity: 0;
            }
        }
        
        @keyframes fall3 {
            0% {
                transform: translateY(0) rotate(0deg) scale(1);
                opacity: 0.8;
            }
            50% {
                transform: translateY(calc(var(--fall-distance, 100vh) * 0.5)) rotate(180deg) scale(0.8);
                opacity: 0.6;
            }
            100% {
                transform: translateY(var(--fall-distance, 100vh)) rotate(360deg) scale(0.6);
                opacity: 0;
            }
        }

        /* نوسان افقی نرم برای افزایش جذابیت */
       @keyframes sway {
  0% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}

        /* دکمه‌های تم پاییزه جایگزین bg-success */
.bg-autumn {
  background: linear-gradient(135deg, #D2691E, #8B4513);
  border: 1px solid #A0522D;
}
.bg-autumn:hover {
  filter: brightness(1.05);
}

img.autumn-filter {
  display: block;
  filter: sepia(60%) hue-rotate(320deg) saturate(140%) brightness(95%);
  -webkit-filter: sepia(60%) hue-rotate(320deg) saturate(140%) brightness(95%);
  transition: filter 0.2s ease;
}
img.autumn-filter:hover {
  filter: sepia(65%) hue-rotate(320deg) saturate(150%) brightness(98%);
  -webkit-filter: sepia(65%) hue-rotate(320deg) saturate(150%) brightness(98%);
}
.hero-project-item{
background-color: #FF8C00 !important;
}
/* ===== Autumn leaves container and leaf base styles ===== */
#leaves-container,
.leaves-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1000;
}

.leaf {
  position: absolute;
  top: -40px;
  pointer-events: none;
  will-change: transform, left;
}

.leaf svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .leaf { animation: none !important; }
}