.counter-index {
  display: flex;
  align-items: center;
  color: var(--color-white);
  min-height: 200px;

  background-image: linear-gradient(to bottom, #2d58af, #0b2a6b);
}

.counter-box {
  display: flex;
  align-items: center;
  gap: 20px;
}

.img-counter-box {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #fff;
}

.img-counter-box img {
  max-width: 70%;
  max-height: 70%;
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.num-counter {
  font-size: 26px;
  font-family: "font_bold";
  color: var(--bg-2);
}

.text-counter-index h3 {
  font-size: 24px;
}

.title-center {
  text-align: center;
  margin-bottom: 60px;
}

.title-start h3,
.title-center h3 {
  color: var(--bg-1);
  font-size: 25px;
}

.title-start h2,
.title-center h2 {
  margin: 10px 0 0;
  font-size: 30px;
  font-family: "font_bold";
}

.img-aboutus-index {
  height: auto;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.img-aboutus-index img:nth-of-type(1) {
  grid-area: 1 / 1 / 1 / span 2;
  width: 100%;
  height: calc(233px - 10px);

  object-fit: cover;
}

.img-aboutus-index img:nth-of-type(2) {
  grid-area: 1 / 3 / span 3 / span 2;
  height: 100%;
  width: 100%;
  height: 700px;

  object-fit: cover;
}

.img-aboutus-index img:nth-of-type(3) {
  grid-area: 2 / 1 / span 2 / span 2;
  width: 100%;
  height: calc(466px - 10px);
  object-fit: cover;
}

.text-aboutus-index p {
  font-size: 23px;
  line-height: 40px;
  margin: 30px 0;
}

.mission-index {
  position: relative;
  padding: 50px;
  z-index: 1;
  border: 1px solid #7cc2ed;
  border-radius: 30px;
}

.title-mission {
  position: relative;
  padding-left: 15px;
}

.title-mission::after {
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--bg-1);
}

.title-mission h2 {
  font-size: 32px;
  color: var(--bg-1);
  font-family: "font_bold";
}

.title-mission p {
  color: var(--color-main);
  margin-top: 10px;
  font-size: 22px;
  font-family: "font_bold";
}

.list-aboutus-index {
  margin: 60px 0 0;
}

.list-aboutus-index li {
  padding-left: 40px;
  font-size: 19px;
  color: var(--color-text2);
  margin: 30px 0 0;
  position: relative;
}

.list-aboutus-index li::after {
  content: "";
  position: absolute;
  background-image: url(../images/bg1.png);
  left: 0;
  width: 28px;
  height: 28px;
  top: 4px;
  background-size: cover;
  background-repeat: no-repeat;
}

.vission {
  margin-top: 30px;
  background-color: #f4f9fd;
  border: none;
}

.sub-services-index {
  height: 350px;
  display: flex;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px;
  transition: all 0.3s linear;
  background-color: var(--color-white);
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 4px #00000021;
}

.sub-services-index:hover .img-services-index::after {
  opacity: 0;
}

.sub-services-index:hover .bg-img-services {
  opacity: 1;
}

.sub-services-index:hover::before {
  opacity: 0.8;
}

.sub-services-index:hover {
  color: var(--color-white);
}

.bg-img-services {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  object-fit: cover;
  z-index: -2;
  transition: all 0.3s linear;
  opacity: 0;
}

.bg-img-services img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sub-services-index::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  background-image: linear-gradient(to bottom, #2d58af, #0b2a6b);
  left: 0;
  height: 100%;
  opacity: 0;
  transition: all 0.3s linear;
  z-index: -1;
}

.img-services-index {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  display: flex;
  border: 1px solid var(--color-white);
  transition: all 0.3s linear;

  align-items: center;
  justify-content: center;
}

.img-services-index::after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: "";
  position: absolute;
  transition: all 0.3s linear;
  z-index: -1;
  background-image: linear-gradient(to bottom, #2d58af, #0b2a6b);
}

.img-services-index img {
  max-width: 55%;
  width: auto !important;
  object-fit: contain;
  max-height: 60%;
}

.main-services-index {
  margin: 60px 0 0;
}

.main-services-index .item {
  margin: 3px 1px;
}

.sub-services-index h2 {
  width: 100%;
  font-size: 32px;
  line-height: 45px;
  transition: all 0.3s linear;
  position: relative;
  position: 20px;
  z-index: 1;
  font-family: "font_bold";
}

.sub-services-index h2::after {
  content: attr(data-name);
  position: absolute;
  top: -40px;
  color: #707070;
  opacity: 0.05;
  font-family: "font_bold";
  left: -20px;
  width: 100%;
  line-height: 80px;
  z-index: -1;
  font-size: 52px;
}

.owl-nav button {
  width: 45px !important;
  height: 45px;
  border-radius: 50% !important;
  background-color: var(--bg-1) !important;
  display: flex;
  position: relative;
  color: transparent !important;
}

.owl-nav button:hover {
  background-color: var(--color-main) !important;
}

.owl-nav button::after {
  content: "";
  position: absolute;
  width: 15px;
  left: 0;
  right: 0;
  top: 50%;
  background-position: center;
  transform: translateY(-50%);
  margin: auto;
  height: 15px;
  background-image: url(../images/arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.owl-prev {
  transform: scaleX(-1);
}

.owl-nav {
  position: absolute;
  display: flex;
  right: 0;
  top: -120px;
  align-items: center;
}

.services-index {
  position: relative;
  z-index: 1;
}

.services-index::after {
  content: "";
  position: absolute;
  background-size: contain;
  z-index: -1;
  width: 60%;
  background-position: right;
  height: 129%;
  background-repeat: no-repeat;
  right: 0;
  top: 0;
  background-image: url(../images/circles.png);
}

.links-products-tabs {
  margin: 60px 0 20px;
}

.links-products-tabs ul {
  display: flex;
  justify-content: space-between;
  width: 70%;
  border-bottom: 4px solid #daf1ff;
}

.links-products-tabs ul li a {
  height: 55px;
  color: var(--color-text2);
  font-size: 23px;
  display: inline-block;
  transition: all 0.3s linear;
  position: relative;
}

.links-products-tabs ul li a:hover {
  color: var(--bg-1);
}

.links-products-tabs ul li a::after {
  content: "";
  width: 100%;
  height: 4px;
  background-color: var(--bg-2);
  border-radius: 5px;
  position: absolute;
  bottom: -4px;
  left: 0;
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.3s linear;
}

.links-products-tabs ul li a.active {
  color: var(--bg-1) !important;
  text-shadow: 0 5px 3px #0b296b1f;

  background-color: transparent !important;
}

.links-products-tabs ul li a.active::after {
  transform: translateX(0);
  opacity: 1;
}

.rates-and-view ul {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

.rates-and-view ul li {
  display: flex;
  color: var(--color-text2);
  align-items: center;
  gap: 10px;
}

.rates-and-view ul li img {
  width: auto !important;
  max-width: 30px;
}

.img-products-index {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;

  height: 290px;
}

.sub-products-index {
  padding: 20px;
  margin: 20px 0;
  border-radius: 20px;
  transition: all 0.3s linear;
  background-color: var(--color-white);
  box-shadow: 0 2px 3px #0000001f;
}

.sub-products-index:hover {
  background-color: #dfeffc;
}

.sub-products-index:hover .img-products-index img {
  transform: scale(1.1);
}

.img-products-index img {
  border-radius: 20px;
  width: 100%;
  transition: all 0.3s linear;
  height: 100%;
  object-fit: cover;
}

.text-products-index {
  margin: 20px 0 0;
}

.text-products-index>h2 {
  font-size: 28px;
  width: 80%;
  margin: 30px 0 15px;
  font-family: "font_bold";
}

.text-products-index>p {
  font-size: 18px;
  height: 60px;
  overflow: hidden;
}

.sub-text-products-index {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name-doc {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sub-text-products-index {
  margin: 30px 0 0px;
}

.name-doc img {
  width: 50px !important;
  object-fit: contain;
  height: 50px;
}

.name-doc span {
  min-height: 60%;
}

.price-product {
  display: flex;
  align-items: center;
  gap: 20px;
}

.price-product span {
  font-size: 18px;
  color: var(--color-text2);
}

.old-price {
  text-decoration: line-through;
}

.new-price {
  color: var(--bg-1) !important;
}

.owl-dots button span {
  width: 11px !important;
  height: 11px !important;
  transition: all 0.3s linear !important;
  border-radius: 20px !important;
  background-color: #daf1ff !important;
}

.owl-dots button.active span {
  width: 70px !important;
  background-color: var(--bg-1) !important;
}

.main-title-start {
  display: flex;
  align-items: self-start;
  justify-content: space-between;
}

.main-speakers-index {
  margin-top: 130px;
}

.sub-speakers-index {
  width: 100%;
  min-height: 350px;
  display: flex;
  align-items: center;
  transition: all 0.3s linear;
  justify-content: center;
  gap: 35px;
  box-shadow: 0px 2px 4px #0000003a;
  padding: 50px 10px;
  background-color: var(--color-white);
  border-radius: 15px;
  flex-wrap: wrap;
  align-content: center;
}

.sub-speakers-index:hover {
  background-color: #dfeffc;
}

.img-speakers-index {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  text-align: center;
}

.img-speakers-index img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

@keyframes rotate-animation {
  0% {
    transform: rotate(0deg) translateY(-50%);
  }

  50% {
    transform: rotate(180deg) translateY(-50%);
  }

  100% {
    transform: rotate(360deg) translateY(-50%);
  }
}

.img-speakers-index::after {
  content: "";
  width: calc(100% + 20px);
  position: absolute;
  left: -13px;
  right: -13px;
  margin: auto;
  animation: rotate-animation 10s infinite linear;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% + 20px);
  border-radius: 50%;
  transform-origin: top;
  transform-box: fill-box;
  border: 2px dashed var(--bg-2);
}

.text-speakers-index {
  width: 100%;
  text-align: center;
}

.text-speakers-index h2 {
  font-size: 22px;
  gap: 10px;
  font-family: "font_bold";
}

.text-speakers-index p {
  margin-top: 15px;
  color: var(--color-text2);
}

.main-speakers-index .row {
  row-gap: 25px;
}

.speakers-index {
  background-image: url(../images/bg.png);
  width: 100%;
  background-size: cover;
  height: 100%;
}

.media-speakers-index ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.media-speakers-index ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 50%;
  border: 1px solid var(--color-main);
  width: 45px;
  font-size: 22px;
  color: var(--color-main);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.media-speakers-index ul li a:hover {
  color: var(--color-white);
  background-color: var(--color-main);
  border: 1px solid transparent;
}

.icons::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
  height: 101%;
  background: linear-gradient(to bottom, #2d58af, #0b2a6b);
  z-index: -1;
  border-radius: 50%;
  transform: translate(100%, 100%);
  transition: all 0.4s;
}

.icons:hover::before {
  transform: translate(0);
  animation: anim 0.4s linear;
}

@keyframes anim {

  0%,
  100% {
    width: 100%;
    height: 100%;
  }

  50% {
    width: 50%;
    height: 50%;
  }
}

.links-speakers-index {
  padding-top: 20px;
  width: 70%;
  border-top: 1px solid #cdcdcd;
}

.links-speakers-index ul {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
}

.text-speakers-index h2 {
  width: 90%;
  white-space: nowrap;
  text-align: center;
  text-overflow: ellipsis;
  margin: auto;
  overflow: hidden;
}

.links-speakers-index ul li a {
  display: flex;
  background-image: linear-gradient(to bottom, #2d58af, #0b2a6b);
  border-radius: 50%;
  height: 45px;
  width: 45px;
  align-items: center;
  border: 1px solid var(--color-main);
  position: relative;
  z-index: 1;
  overflow: hidden;
  justify-content: center;
}

.links-speakers-index ul li a img {
  max-width: 45%;
}

.links-speakers-index ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 101%;
  height: 101%;
  background: var(--color-white);
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.4s;
}

.links-speakers-index ul li a:hover::before {
  opacity: 1;
}

.links-speakers-index ul li a img {
  filter: brightness(0) invert(1);
}

.links-speakers-index ul li a:hover img {
  filter: none;
}

.media-speakers-index {
  width: 100%;
}

.img-news-details-index {
  height: 500px;
  width: 100%;
}

.img-news-details-index img {
  width: 100%;
  object-position: top;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
}

.text-news-details-index {
  margin: 30px 0 0;
}

.text-news-details-index h2 {
  font-size: 25px;
  font-family: "font_bold";
}

.text-news-details-index p {
  margin: 20px 0;
  font-size: 20px;
  width: 70%;
  line-height: 35px;
}

.text-news-details-index a {
  font-size: 23px;
  color: var(--bg-1);
  text-decoration: underline;
}

.text-news-details-index a:hover {
  color: var(--color-main);
  text-decoration: underline !important;
}

.news-index .title-center {
  margin-bottom: 100px;
}

.more-news-index {
  height: 650px;
  overflow: auto;
}

.more-news-index::-webkit-scrollbar-track {
  background: #e8e8e8;
  transition: all 0.3s linear;
  border-radius: 100px;
  cursor: pointer;
}

.more-news-index::-webkit-scrollbar-thumb {
  background-color: var(--bg-1);
  transition: all 0.3s linear;
  cursor: pointer;
  border-radius: 100px;
  border: 0 solid #e8e8e8;
}

.more-news-index::-webkit-scrollbar {
  width: 10px;
  cursor: pointer;
  transition: all 0.3s linear;
}

.more-news-index ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s linear;
  padding: 10px;
  border-radius: 10px;
  margin: 0 0 0px 0;
}

.img-more-news-index {
  width: calc(40% - 5px);
  height: 195px;
}

.img-more-news-index img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.img-more-news-index {
  width: calc(60% - 5px);
}

.text-more-news-index h2 {
  font-size: 21px;
  font-family: "font_bold";
}

.text-more-news-index p {
  width: 85%;
  margin: 10px 0;
  font-size: 18px;
}

.text-more-news-index a {
  font-size: 19px;
  text-decoration: underline;
  color: var(--bg-1);
}

.text-more-news-index a:hover {
  color: var(--color-main);
  text-decoration: underline !important;
}

.sub-partners-index {
  margin: 3px;
  padding: 40px 20px;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s linear;
  box-shadow: 0 2px 4px #0000003b;
}

.sub-partners-index:hover {
  background-color: #dfeffc;
}

.img-partners-index {
  width: 120px;
  margin: 20px auto;
}

.text-partners-index h2 {
  font-size: 23px;
  padding: 30px 0;
  position: relative;
  font-family: "font_bold";
}

.text-partners-index h2::after {
  content: "";
  width: 60%;
  height: 1px;
  background-color: var(--bg-1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.text-partners-index p {
  padding-top: 30px;
  color: var(--color-text2);
  font-family: "font_regular";
}

.main-partners-index {
  margin-top: 70px;
}

.owl-theme .owl-nav.disabled+.owl-dots {
  margin-top: 35px;
}

/* .res-element {
  display: none;
} */

.sub-speakers-index {
  height: 100%;
}

.text-more-news-index h2 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 99%;
}

.search-header-modal .search-modal {
  position: relative;
}

.search-modal button {
  position: absolute;
  top: 0;
  height: 50px;
  width: 50px;
  border: none;
  background: var(--color-main);
  color: var(--color-white);
  font-size: 22px;
  right: 0;
}

.search-modal input {
  padding-right: 55px;
}

.element_menu_responsive {
  width: 100%;
  height: 80%;
}

.element_menu_responsive>ul {
  padding: 30px 0px;
}

.main-categories-header>ul>li {
  padding: 0 10px;
  width: 260px;
}

.main-categories-header:hover {
  border-right: none;
  border-radius: 10px 0 0 10px;
}

.main-categories-header>ul>li:hover>.sub-categories-header {
  opacity: 1;
  pointer-events: fill;
}

.sub-categories-header:hover {
  opacity: 1;
  pointer-events: fill;
}

.sub-categories-header {
  position: absolute;
  width: 260px;
  top: 0;
  transition: all 0.3s linear;
  padding: 0 15px;
  background-color: var(--color-white);
  border-radius: 0 10px 10px 0;
  height: 100%;
  right: -100%;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  border: 1px solid #7070701e;
  border-left: none;
  box-shadow: 3px 2px 5px #00000041;
}

.sub-banner-tamara {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 30px;
  background-image: url(../images/bg3.png);
  height: 220px;
  border-radius: 20px;
  background-size: cover;
  align-content: center;
  gap: 40px;
}

.text-sub-banner-index1 {
  width: 100%;
}

.text-sub-banner-index1 h2 {
  font-size: 29px;
  color: #000;
  line-height: 40px;
}

.btn-tamara-and-img {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.btn-tamara-and-img a {
  height: 50px;
  background-color: #000;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "font_main";
  border-radius: 5px;
  transition: all 0.3s linear;
  color: var(--color-white) !important;
  padding: 7px 10px;
  font-size: 18px;
}

.btn-tamara-and-img a:hover {
  background-color: #353e46;
  transition: all 0.3s linear;
}

.sub-banner-get-started {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  gap: 10px;
  justify-content: space-between;
  height: 220px;
  border-radius: 20px;
  background-color: #e6f0f9;
}

.text-get-started {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: calc(50% - 10px);
  gap: 40px;
}

.text-get-started h2 {
  font-size: 29px;
  width: 100%;
  color: #000;
  line-height: 40px;
}

.text-get-started a {
  height: 50px;
  background-color: #2b59a5;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "font_main";
  border-radius: 5px;
  color: var(--color-white) !important;
  padding: 7px 10px;
  transition: all 0.3s linear;

  font-size: 18px;
}

.text-get-started a:hover {
  background-color: #0b2a6b;
}

.img-get-started img {
  width: 100%;
}

.img-get-started {
  width: calc(50% - 10px);
}

.news-index .main-title-start {
  margin-bottom: 70px;
}

.more-news-index ul li:hover {
  background-color: #dfeffc;
}

.services-index .owl-nav {
  display: flex;
  right: 0;
  width: 100%;
  justify-content: space-between;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
}

.services-index .owl-prev {
  transform: scaleX(-1) translateX(25px);
}

.services-index .owl-next {
  transform: translateX(25px);

}

.btn-more {
  width: 100%;
  text-align: end;
  margin: 40px 0 0;
}

.news-index .title-start {
  margin-bottom: 60px;
}

/* start style  aboutus ================================
========================================
================ */

.sub-values-aboutus {
  box-shadow: 0 2px 6px #0000003b;
  background-color: var(--color-white);
  border-radius: 10px;
  height: 350px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  align-content: center;
}

.img-values-aboutus {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  display: flex;
  z-index: 1;
  border: 1px solid var(--color-white);
  transition: all 0.3s linear;
  align-items: center;
  justify-content: center;
}

.img-values-aboutus img {
  max-width: 55%;
  width: auto !important;
  object-fit: contain;
  max-height: 60%;
}

.img-values-aboutus::after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: "";
  position: absolute;
  transition: all 0.3s linear;
  z-index: -1;
  background-image: linear-gradient(to bottom, #2d58af, #0b2a6b);
}

.text-values-aboutus {
  width: 100%;
}

.text-values-aboutus h2 {
  margin: 20px auto;
  font-size: 30px;
  font-family: "font_bold";
}

.text-values-aboutus p {
  width: 60%;
  font-size: 20px;
  margin: auto;
}

.sub-goals-aboutus {
  border: 1px solid var(--bg-1);
  border-radius: 20px;
  background-color: var(--color-white);
  height: 200px;
  display: flex;
  width: 80%;

  margin: 20px auto;
  padding-left: 90px;
  padding-right: 70px;
  align-items: center;
  position: relative;
}

.number-goals-aboutus {
  width: 100px;
  height: 70%;
  position: absolute;
  text-align: center;
  font-size: 80px;
  justify-content: center;
  align-items: center;
  left: -50px;
  display: flex;
  border-radius: 50%;

  color: #7cc2ed81;
  z-index: 1;
  line-height: 0;
  background: #fff;
  border: 1px solid var(--bg-1);
}

.number-goals-aboutus::after {
  content: "";
  position: absolute;
  width: calc(100% + 13px);
  height: calc(100% + 14px);
  border-radius: 50%;
  left: -29px;
  border: 10px solid var(--color-white);
  background-color: var(--color-white);
  z-index: -1;
}

.sub-goals-aboutus p {
  font-size: 21px;
  line-height: 36px;
  font-family: "font_medium";
}

/* ------------------------------------------ */
/* --------- end aboutus      --------  */
/* ------------------------------------------ */

/* ------------------------------------------ */
/* --------- start product-details --------  */
/* ------------------------------------------ */
.rate span {
  color: #cdcdcd;
  font-size: 22px;
}

.rate {
  display: flex;
  gap: 2px;
  align-items: center;
}

.checked {
  color: #ffc901 !important;
}

.sub-text-product-details {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-product-details {
  display: flex;
  gap: 20px;
}

.price-product-details span {
  color: var(--bg-1);
}

.price-product-details span {
  font-size: 24px;
}

.price-product-details .old-price {
  color: var(--color-main);
}

.sub-img-product-details {
  height: 660px;
  width: 100%;
}

.sub-img-product-details img {
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.sub-img-product-details .owl-theme .owl-nav.disabled+.owl-dots {
  margin-top: 15px;
}

.links-products-details ul {
  background-color: #f9f9f9;
}

.links-products-details ul {
  background-color: #f9f9f9;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 35px;
  border-radius: 10px;
  justify-content: space-between;
  margin: 30px 0;
  position: relative;
}

.links-products-details ul li a {
  font-size: 20px;
  transition: all 0.3s linear;

  position: relative;
}

.links-products-details ul li a:hover {
  color: var(--bg-1);
}

.links-products-details ul li a.active {
  color: var(--bg-1) !important;
  background-color: transparent !important;
}

.links-products-details ul li a.active::after {
  transform: translateX(0);
  opacity: 1;
}

.links-products-details ul li a::after {
  content: "";
  width: 100%;
  height: 3px;
  background-color: var(--bg-1);
  border-radius: 5px;
  position: absolute;
  bottom: -11px;
  left: 0;
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.3s linear;
}

.overview h2,
.overview h3 {
  margin: 30px 0;
  font-family: "font_medium";
  padding-left: 25px;
  font-size: 22px;
  position: relative;
}

.overview h2::after,
.overview h3::after {
  content: "";
  position: absolute;
  background-image: url(../images/dots.png);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.overview ul li {
  font-size: 19px;
  margin-bottom: 20px;
  color: var(--color-text2);
}

.sub-curriculum {
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  min-height: 70px;
  padding: 0 30px;
  border-radius: 5px;
}

.sub-curriculum>h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  font-family: "font_bold";
  cursor: pointer;
}

.videos-curriculum {
  margin: 20px 0;
  display: none;
}

.videos-curriculum ul li a {
  display: flex;
  align-items: center;
  padding: 20px 10px;

  border-bottom: 1px solid #d9d9d9;
  justify-content: space-between;
}

.videos-curriculum ul li h4 {
  font-size: 20px;
  gap: 5px;
  display: flex;
  align-items: center;
}

.videos-curriculum ul li:hover a {
  background-color: #dfeffc;
}

.videos-curriculum ul li span {
  color: var(--bg-1);
  padding: 8px 25px;
  height: 45px;
  font-size: 20px;
  border-radius: 5px;
  background-color: #f4f9fd;
}

.videos-curriculum ul li:last-of-type a {
  border-bottom: none;
}

.sub-curriculum>h2 i {
  transition: all 0.3s linear;
}

.sub-curriculum.active1 {
  border-color: transparent;
  box-shadow: 0 0 3px #0000002d;
}

.sub-curriculum.active1>h2 i {
  transform: scaleY(-1);
}

.sub-curriculum {
  margin: 20px 0;
}

.instructors {
  margin: 20px 0;
}

.instructors ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #d9d9d9;
  padding: 20px;
}

.img-instructors {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.img-instructors img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-instructors h2 {
  font-size: 20px;
  font-family: "font_bold";
}

.total-reviews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 20px;
  border-radius: 7px;
  align-content: center;
  background: var(--color-white);
  box-shadow: 0 2px 4px #00000024;
}

.total-reviews h2 {
  font-size: 76px;
  font-family: "font_bold";
  color: var(--color-black);
}

.total-reviews .rate {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.total-reviews .rate span {
  font-size: 29px;
}

.total-reviews h4 {
  font-size: 18px;
}

.sub-progress {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 25px;
}

.sub-progress h3 {
  width: calc(10% - 10px);
  font-size: 22px;
  color: var(--color-text2);
}

.sub-progress h3 i {
  color: #ffc901;
}

.animated-progress {
  width: calc(90% - 10px);
  height: 12px;
  border-radius: 15px;
  margin: 0;
  overflow: hidden;
  background-color: #ebebeb;
  position: relative;
}

.animated-progress span {
  height: 100%;
  display: block;
  width: 0;
  color: rgb(255, 251, 251);
  line-height: 30px;
  position: absolute;
  background-color: #ffc901;
  border-radius: 12px;
  text-align: end;
  padding-right: 5px;
}

.sub-title-comment-reviews {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sub-comment-reviews p {
  font-size: 20px;
  line-height: 35px;
  margin-top: 10px;
}

.comment-reviews {
  margin-top: 40px;
}

.img-comment-reviews {
  width: 85px;
  height: 85px;
}

.img-comment-reviews img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-comment-reviews h3 {
  font-size: 22px;
  font-family: "font_bold";
}

.text-comment-reviews p {
  color: var(--color-text2);
  font-size: 18px;
}

.title-comment-reviews {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.title-comment-reviews .rate span {
  font-size: 18px;
}

.sub-comment-reviews {
  margin: 45px auto;
}

.link-comment-reviews {
  margin: 60px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.link-comment-reviews h2 {
  font-family: "font_medium";
  padding-left: 25px;
  font-size: 26px;
  position: relative;
}

.link-comment-reviews h2::after {
  content: "";
  position: absolute;
  background-image: url(../images/dots.png);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.link-comment-reviews a {
  background: #f4f9fd;
  color: var(--bg-1);
  height: 50px;
  padding: 13px 25px;
  border-radius: 0px;
}

.main-form-add-comment {
  padding: 70px;
}

.rating {
  margin-top: 40px;
  border: none;
  float: left;
}

.rating>label {
  color: #cdcdcd;
  float: right;
  transition: all 0.1s linear;
}

.rating>label:before {
  margin: 5px;
  font-size: 2em;
  font-family: FontAwesome;
  content: "\f005";
  display: inline-block;
  transition: all 0.1s linear;
}

.rating>input {
  display: none;
}

.rating>input:checked~label,
.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
  color: #ffc901;
}

.rating>input:checked+label:hover,
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
.rating>input:checked~label:hover~label {
  color: #ffc901;
}

.main-form-add-comment {
  text-align: center;
}

.main-form-add-comment .title-center {
  margin-bottom: 0;
}

.rating {
  border: none;
  text-align: center;
  margin: 20px auto;
  width: 100%;
  direction: rtl;
  display: flex;
  justify-content: center;
  gap: 0px;
}

.textarea-comment textarea {
  background-color: #f7f7f7;
  border-radius: 20px;
  border-color: transparent;
  padding: 20px 30px !important;
  height: 250px !important;
}

.textarea-comment textarea::placeholder {
  color: var(--color-text2);
  font-size: 20px;
}

.btn-add-comment {
  margin: 35px 0 0;
}

.form-add-comment .modal-content {
  border-radius: 25px;
}

.reviews {
  margin-top: 50px;
}

.more-prodict-details {
  box-shadow: 0 0 3px #00000028;
  background-color: var(--color-white);
  padding: 20px;
  border-radius: 10px;
}

.videos-product-details {
  width: 100%;
  height: 280px;
  border-radius: 10px;
}

.videos-product-details img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.main-more-prodict-details {
  margin: 20px 0;
}

.main-more-prodict-details ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #d9d9d9;
}

.main-more-prodict-details ul li img {
  max-width: 20px;
}

.main-more-prodict-details ul li span {
  color: var(--color-text2);
  font-size: 19px;
}

.main-more-prodict-details ul li h3 {
  color: var(--bg-1);
  display: flex;
  align-items: center;
  gap: 7px;
}

.main-more-prodict-details ul li:last-of-type {
  border-bottom: none;
}

.btn-addtocart button {
  background-color: var(--color-main);
  height: 60px;
  border-radius: 30px;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  border: none;
  border: 1px solid var(--color-main);
  width: 100%;
  font-size: 20px;
}

.btn-addtocart button:hover {
  background-color: var(--color-white);
  color: var(--color-main);
}

.share-protact-detalis {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.share-protact-detalis ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: auto;
  margin: 0 !important;
}

.share-protact-detalis ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  font-size: 20px;
  transition: all 0.3s linear;
  border-radius: 50%;
  border: 1px solid var(--color-main);
  color: var(--color-main);
}

.share-protact-detalis ul li a:hover {
  background-color: var(--color-main);
  color: var(--color-white);
}

.share-protact-detalis {
  margin: 30px 0 0;
}

.share-protact-detalis h3 {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-details .img-products-index {
  height: 280px;
}

.item {
  margin: 2px;
}

/* -------------------------------------- */
/* --------- end product-details --------  */
/* ------------------------------------------ */

/* -------------------------------------- */
/* --------- start speakers and partners --------  */
/* ------------------------------------------ */

.speakers .row,
.partners .row {
  row-gap: 25px;
}

.btn-speakers {
  text-align: center;
}

.btn-speakers {
  margin-top: 40px;
}

/* -------------------------------------- */
/* --------- end  speakers and partners --------  */
/* ------------------------------------------ */

/* -------------------------------------- */
/* --------- start contactus --------  */
/* ------------------------------------------ */

.contactus form {
  margin-top: 50px;
  width: 70%;
}

.contactus input {
  height: 65px;
}

.contactus .input-form {
  margin: 20px 0;
}

.btn-contactus {
  margin-top: 30px;
}

.sub-info-contactus {
  background-color: var(--color-white);
  box-shadow: 0 1px 3px #00000049;
  min-height: 240px;
  display: flex;
  border-radius: 10px;
  padding: 20px;
  align-items: center;
  gap: 15px;
  justify-content: center;
  margin: 10px;
  align-content: center;
  transition: all 0.3s linear;
  flex-wrap: wrap;
}

.sub-info-contactus:hover {
  background-color: var(--color-main);
}

.sub-info-contactus:hover h2 {
  color: var(--color-white);
}

.sub-info-contactus:hover p {
  color: var(--color-white);
}

.sub-info-contactus h2 {
  transition: all 0.3s linear;

  width: 100%;
  text-align: center;
}

.sub-info-contactus:hover .img-info-contactus {
  background-color: var(--color-white);
}

.img-info-contactus {
  background-color: #e6f6ff;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  transition: all 0.3s linear;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-info-contactus h2 {
  font-size: 22px;
  font-family: "font_bold";
  transition: all 0.3s linear;
}

/* -------------------------------------- */
/* --------- end contactus --------  */
/* ------------------------------------------ */

/* -------------------------------------- */
/* --------- start achievements --------  */
/* -------------------------------------- */

.sub-achievements {
  border-radius: 10px;
  padding: 15px;
  transition: all 0.3s linear;
}

.sub-achievements:hover {
  background-color: #dfeffc;
}

.sub-achievements:hover .img-achievements img {
  transform: scale(1.1);
}

.img-achievements {
  height: 280px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.achievements .col-lg-4 {
  padding: 0 7px;
}

.achievements .row {
  row-gap: 15px;
}

.img-achievements img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  transition: all 0.3s linear;
  object-fit: cover;
}

.text-achievements {
  margin: 20px 0 0;
}

.text-achievements h2 {
  font-size: 22px;
  font-family: "font_bold";
}

.text-achievements p {
  margin: 20px 0;
}

.text-achievements a {
  text-decoration: underline !important;
  color: var(--bg-1);
  font-size: 21px;
}

.text-achievements a:hover {
  color: var(--color-main);
}

.achievements .lvideo::before {
  width: 60px;
  height: 60px;
}

.btn-achievements {
  text-align: center;
  margin-top: 40px;
}

.sub-achievements {
  height: 100%;
}

/* -------------------------------------- */
/* --------- end achievements --------  */
/* -------------------------------------- */

/* -------------------------------------- */
/* --------- start achievements details --------  */
/* -------------------------------------- */

.img-achievements-details {
  height: 550px;
  width: 100%;
}

.img-achievements-details img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 30px;
}

.text-achievements-details h2 {
  font-size: 30px;
  margin: 30px 0 20px;
  font-family: "font_bold";
}

.data-and-article-author ul {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.data-and-article-author ul li {
  color: var(--bg-1);
  font-size: 19px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.text-achievements-details p {
  margin-bottom: 10px;
  font-size: 19px;
  color: var(--color-text2);
  line-height: 35px;
}

.text-achievements-details>ul>li {
  margin: 20px 0;
  position: relative;
  color: var(--color-text2);
  padding-left: 30px;
}

.text-achievements-details>ul>li::after {
  content: "";
  width: 25px;
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  top: 0px;

  background-position: center;
  position: absolute;
  background-image: url(../images/bg1.png);
}

.siderimg-achievements {
  margin-top: 40px;
}

.img-siderimg-achievements {
  height: 390px;
  width: 100%;
}

.img-siderimg-achievements img {
  width: 100%;
  object-fit: cover;
  height: 100%;
  border-radius: 10px;
}

.main-achievements-details .share-protact-detalis {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

.title-achievements-details h2 {
  font-size: 28px;
  font-family: "font_bold";
}

.search-achievements {
  margin: 20px 0;
  position: relative;
}

.search-achievements input {
  height: 65px;
  width: 100%;
  border-radius: 40px;
  padding-right: 70px;
}

.search-achievements button {
  width: 45px;
  height: 45px;
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 12px;
  justify-content: center;
  border: none;
}

.search-achievements button:hover {
  background-color: var(--bg-1);
}

.more-latest-posts .img-more-news-index {
  height: 135px;
}

.more-latest-posts .text-more-news-index p {
  height: 70px;
  line-height: 25px;
  overflow: hidden;
}

.banner-achievements {
  padding: 40px 20px 0;
  margin-top: 50px;
  text-align: center;
  border-radius: 20px;
  background-color: #ebf4ff;
}

.banner-achievements h3 {
  font-family: "font_bold";
  font-size: 22px;
  color: var(--color-main);
}

.banner-achievements h2 {
  font-size: 30px;
  font-family: "font_bold";
  margin-top: 20px;
  color: var(--color-black);
}

.banner-achievements a {
  margin: 20px 0 50px;
}

/* -------------------------------------- */
/* --------- end achievements details --------  */
/* -------------------------------------- */

/* -------------------------------------- */
/* -------------- start cart  ------------ */
/* -------------------------------------- */

.order-tracking {
  border-radius: 20px;
  background-color: var(--color-white);
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-shadow: 0 0 3px #0000003d;
}

.order-tracking ul {
  width: 100%;
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-tracking ul li {
  width: 25%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-tracking ul li.completed .img-order-tracking::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: 27px;
  background-image: url(../images/vv.png);
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--color-main);
  background-color: var(--color-main);
  z-index: 1;
}

.order-tracking ul li a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}

.img-order-tracking {
  width: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text2);
  border-radius: 50%;
  position: relative;

  background-color: #f7f7f7;
  height: 75px;
}

.order-tracking ul li h2 {
  font-size: 20px;
  font-family: "font_bold";
  color: var(--color-text2);
  display: flex;
  align-items: center;

  width: 69%;
  gap: 10px;
  white-space: nowrap;
}

.order-tracking ul li h2 span {
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed var(--color-text2);
}

.order-tracking ul li:last-of-type h2 span {
  display: none;
}

.order-tracking ul li:last-of-type {
  width: auto;
  min-width: 20%;
  flex-shrink: 3;
}

.order-tracking ul li.active .img-order-tracking {
  border: 2px solid var(--color-main);
  color: var(--color-main);
  background-color: #e7efff;
}

.order-tracking ul li.active h2 {
  color: var(--color-main);
}

.main-cart {
  margin-top: 50px;
}

.prodect-cart-page {
  display: flex;
  align-items: self-start;
  gap: 10px;
}

.img-prodect-cart-page {
  width: calc(30% - 5px);
  height: 80px;
  flex-wrap: wrap;
}

.img-prodect-cart-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.text-prodect-cart-page {
  width: calc(70% - 5px);
}

.text-prodect-cart-page h3 {
  font-size: 18px;
  color: var(--color-main);
  width: 80%;
  line-height: 25px;
  margin-bottom: 5px;
}

.text-prodect-cart-page .rate span {
  font-size: 15px;
}

.code-product {
  line-height: 20px;
  color: var(--color-main);
  font-size: 20px;
}

.price-product-cart {
  margin-bottom: 10px;
  font-size: 18px;
}

.price-product-cart h3 {
  color: var(--color-main);
  font-size: 18px;
}

.main-cart .table thead th {
  border: none !important;
}

.main-cart .table td,
.main-cart .table th {
  border: none !important;
}

.main-cart tr {
  background-color: var(--color-white);
  padding: 10px 5px !important;
  box-shadow: 0 2px 5px #00000027;
  border-radius: 20px;
  margin: 0 0 20px 0;
  display: inline-block;
  width: 100%;
}

.main-cart tbody tr:hover {
  background-color: #daf1ff;
}

.main-cart tr {
  display: flex;
}

.main-cart .table thead tr {
  margin: 0;
  box-shadow: none !important;
}

.main-cart .table thead tr th {
  width: 15%;
}

.main-cart .table thead tr th:nth-of-type(1) {
  width: 60%;
}

.main-cart .table thead tr th:last-of-type {
  width: 10%;
}

.main-cart .main-cart tr {
  display: flex;
}

.main-cart tbody tr td {
  width: 15%;
}

.main-cart tbody tr td:nth-of-type(1) {
  width: 60%;
}

.main-cart tbody tr td:last-of-type {
  width: 10%;
}

.detete-prodect-cart {
  display: flex;
  height: 100%;
  justify-content: end;
  align-items: center;
  cursor: pointer;
}

.detete-prodect-cart:hover {
  color: var(--color-main);
}

.cart-summary {
  background-color: var(--color-white);
  padding: 40px;
  border-radius: 20px;
  margin-top: 65px;
  box-shadow: 0 2px 5px #00000028;
}

.title-cart-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-cart-summary h2 {
  font-size: 22px;
  font-family: "font_bold";
}

.title-cart-summary span {
  display: inline-block;
  padding: 7px 20px;
  font-size: 19px;
  color: var(--color-text2);
  background-color: #f7f7f7;
}

.cart-summary ul {
  margin: 40px auto;
}

.cart-summary ul li {
  font-size: 20px;
  margin: 15px 0;
  display: flex;
  align-items: center;
  color: var(--color-text2);
  justify-content: space-between;
}

.cart-summary ul li span {
  color: var(--color-black);
  font-family: "font_bold";
}

.total-price-cart-page {
  padding: 30px 0px 0;
  position: relative;
  margin-top: 10px;
  border-top: 1px solid #d9d9d9;
}

.total-price-cart-page::after {
  content: "";
  position: absolute;
  top: -30px;
  width: 55px;
  left: -62px;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: -7px 0px 5px #00000017 inset;
  height: 55px;
}

.total-price-cart-page::before {
  content: "";
  position: absolute;
  top: -30px;
  width: 55px;
  right: -62px;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: 7px 0px 6px #00000017 inset;
  height: 55px;
}

.total-price-cart-page h3 {
  font-size: 22px;
  color: var(--color-text2);
  display: flex;
  margin-bottom: 50px;
  justify-content: space-between;
}

.total-price-cart-page h3 span {
  color: var(--color-black);
  font-family: "font_bold";
}

.total-price-cart-page .ctm-btn {
  width: 100%;
}

.order-tracking ul li.completed .img-order-tracking {
  color: var(--color-white);
  background-color: var(--color-main);
}

.order-tracking ul li.completed h2 {
  color: var(--color-main);
}

.order-tracking ul li.completed h2 span {
  border-color: var(--color-main);
}


.cart_empty {
  width: 50%;
  margin: 40px auto;
}

.img-cart_empty {
  margin: 35px auto;
  width: 320px;
}

.cart_empty h2 {
  text-align: center;
  font-size: 30px;
}

.product-cart-index {
  position: relative;
}

/* -------------------------------------- */
/* -------------- end  cart  ------------ */
/* -------------------------------------- */











/* -------------------------------------- */
/* --------- start style  booking  ------ */
/* -------------------------------------- */


.form-booking-page {
  margin: 50px 0;
}

.title-booking-page {
  font-size: 25px;
  font-family: "font_bold";
  margin: 50px 0;
}


.choosing-place {
  overflow-x: auto;
}


.sub-choosing-place img {
  width: 100%;
  height: 100%;
  filter: grayscale(80%);
  object-fit: cover;

}

.sub-choosing-place input {
  width: 0 !important;
  height: 0 !important;
  opacity: 0;
  position: absolute;
}

.sub-choosing-place label {
  cursor: pointer;
}

.sub-choosing-place input:checked~label .caption-choosing-place {
  opacity: 1;
}

.sub-choosing-place input:checked~label img {
  filter: grayscale(0%);
}

.caption-choosing-place {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: flex;
  color: var(--color-white);
  flex-wrap: wrap;
  transition: all .3s linear;
  padding: 25px;
  background-color: #00000063;
  top: 0;
  align-content: space-between;
}

.choosing-place .row {
  flex-wrap: nowrap;
  padding: 0;
  width: 100%;
}

.caption-choosing-place>i {
  font-size: 30px;
  width: 100%;

}

.sub-choosing-place label {
  width: 100%;
  height: 290px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}

.choosing-place::-webkit-scrollbar-track {
  background: #e8e8e8;
  transition: all 0.3s linear;
  border-radius: 100px;
  cursor: pointer;
}

.choosing-place::-webkit-scrollbar-thumb {
  background-color: var(--bg-1);
  transition: all 0.3s linear;
  cursor: pointer;
  border-radius: 100px;
  border: 0 solid #e8e8e8;
}

.choosing-place::-webkit-scrollbar {
  width: 12px;
  cursor: pointer;
  height: 12px;
  transition: all 0.3s linear;
}

.sub-choosing-date {
  display: flex;
  align-items: center;
  gap: 20px;

}

.input-cho-date {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(50% - 10px);

}

.input-cho-date label {
  font-size: 24px;
  font-family: "font_medium";
  margin: 0 !important;
}


.input-cho-date input {
  height: 55px;
  border-radius: 5px;
  width: 190px;
  font-size: 19px;
  border: none;
  text-align: center;
  padding: 7px 15px;
  background-color: #F7F7F7;
}

.input-cho-date input:focus {
  color: var(--color-text2);
}


.input-cho-date select {
  height: 55px;
  border-radius: 5px;
  width: 190px;
  font-size: 19px;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  text-align: center;
  padding: 7px 15px;
  background-color: #F7F7F7;
}

.input-cho-date select option {
  text-align: center;
}

.explain-date {
  display: flex;
  align-items: center;
  margin: 50px 0;
  justify-content: space-between;
}

.explain-date div {
  font-size: 22px;
  position: relative;
  padding-left: 20px;
}

.explain-date div::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.avaliable-explain-explain::after {
  background-color: #214899;
}

.mostly-booked-explain::after {
  background-color: #7CC2ED;
}

.fully-booked-explain::after {
  background-color: #707070;
}


.sub-choosing-month label {
  background-color: #F7F7F7;
  width: 100%;
  display: block;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 5px;

}

.sub-choosing-month input,
.choosing-time input {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}

.sub-choosing-month input:checked~label {
  background-color: var(--color-main);
  color: var(--color-white);
}

.sub-choosing-month label {
  background-color: #F7F7F7;
  width: 100%;
  display: block;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  color: var(--color-text2);
  transition: all .2s linear;
  user-select: none;
  align-content: space-between;
  height: 143px;
  text-align: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 22px;
  cursor: pointer;
}

.mostly input:checked~label {
  background-color: var(--bg-1) !important;
  color: var(--color-white) !important;
}

.fully input:checked~label {
  background-color: #707070 !important;
  color: var(--color-white) !important;
}

.sub-choosing-month label h4 {
  font-size: 22px;
  width: 100%;
}

.sub-choosing-month label span {
  width: 100%;
}

.choosing-month .row {
  flex-wrap: nowrap;
  padding: 0;
  width: 100%;
}

.choosing-month::-webkit-scrollbar-track {
  background: #e8e8e8;
  transition: all 0.3s linear;
  border-radius: 100px;
  cursor: pointer;
}

.choosing-month::-webkit-scrollbar-thumb {
  background-color: var(--bg-1);
  transition: all 0.3s linear;
  cursor: pointer;
  border-radius: 100px;
  border: 0 solid #e8e8e8;
}

.choosing-month::-webkit-scrollbar {
  width: 12px;
  cursor: pointer;
  height: 12px;
  transition: all 0.3s linear;
}


.choosing-month {
  overflow-x: auto;
}

.choosing-time .col-lg-2 {
  padding-left: 7px;
  padding-right: 7px;

}

.sub-choosing-time label {
  color: var(--color-text2);
  background-color: #F7F7F7;
  height: 55px;
  border-radius: 5px;
  display: flex;
  cursor: pointer;
  margin: 0;
  font-size: 20px;
  align-items: center;
  padding: 10px;
  justify-content: center;
}

.choosing-time .row {
  row-gap: 14px;
}

.sub-choosing-time input:checked~label {
  background-color: var(--color-main);
  color: var(--color-white);
}



.sub-choosing-instructors input,
.sub-choosing-equipments input {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}

.sub-choosing-instructors label,
.sub-choosing-equipments label {
  width: 100%;
  height: 300px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.sub-choosing-instructors label img,
.sub-choosing-equipments label img {
  width: 100%;
  height: 100%;
  filter: grayscale(80%);
  object-fit: cover;
}

.caption-choosing-instructors,
.caption-choosing-equipments {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  color: var(--color-white);
  flex-wrap: wrap;
  transition: all .3s linear;
  padding: 25px;
  background-color: #00000063;

  top: 0;
  align-content: space-between;
}

.caption-choosing-instructors>i,
.caption-choosing-equipments i {
  font-size: 30px;
  width: 100%;
  opacity: 0;
}

.caption-choosing-instructors h3 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;

}

.caption-choosing-equipments h2 {
  margin-bottom: 15px;
}

.sub-choosing-instructors input:checked~label .caption-choosing-instructors>i {
  opacity: 1;
}

.sub-choosing-equipments input:checked~label .caption-choosing-equipments>i {
  opacity: 1;
}

.choosing-instructors,
.choosing-equipments {
  overflow-x: auto;

}

.choosing-instructors::-webkit-scrollbar-track {
  background: #e8e8e8;
  transition: all 0.3s linear;
  border-radius: 100px;
  cursor: pointer;
}

.choosing-instructors::-webkit-scrollbar-thumb {
  background-color: var(--bg-1);
  transition: all 0.3s linear;
  cursor: pointer;
  border-radius: 100px;
  border: 0 solid #e8e8e8;
}

.choosing-instructors::-webkit-scrollbar {
  width: 12px;
  cursor: pointer;
  height: 12px;
  transition: all 0.3s linear;
}

.choosing-equipments::-webkit-scrollbar-track {
  background: #e8e8e8;
  transition: all 0.3s linear;
  border-radius: 100px;
  cursor: pointer;
}

.choosing-equipments::-webkit-scrollbar-thumb {
  background-color: var(--bg-1);
  transition: all 0.3s linear;
  cursor: pointer;
  border-radius: 100px;
  border: 0 solid #e8e8e8;
}

.choosing-equipments::-webkit-scrollbar {
  width: 12px;
  cursor: pointer;
  height: 12px;
  transition: all 0.3s linear;
}

.choosing-instructors .row,
.choosing-equipments .row {
  flex-wrap: nowrap;
  padding: 0;
  width: 100%;
}

.choosing-instructors input:checked~label img {
  filter: grayscale(0%);
}

.choosing-equipments input:checked~label img {
  filter: grayscale(0%);
}


.btn-booking-page {
  margin: 40px 0;

}

.btn-booking-page .ctm-btn {
  min-width: 280px;
  height: 55px;
  font-size: 22px;
}

/* -------------------------------------- */
/* --------- end style booking  ------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* -------- start style  payment -------- */
/* -------------------------------------- */
.main-payment-page {
  margin: 50px auto;
}

.select-payment-method>h2 {
  margin-bottom: 30px;
  font-size: 22px;
  font-family: "font_bold";
}

.select-payment-method {
  background-color: var(--color-white);
  padding: 30px 30px;
  box-shadow: 0 1px 5px #00000027;
  border-radius: 20px;
}

/* 
.input-payment-method input {
  width: 0;
  height: 0;
  position: absolute;
} */

.input-payment-method {
  width: 100%;
  display: flex;
  position: relative;
  padding: 20px 0;
  padding-left: 30px;
  border-bottom: 1px solid #d9d9d9;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
}

.input-payment-method img {
  max-width: 110px;
  max-height: 28px;
}

.input-payment-method::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--color-main);
  left: 0;
}

.input-payment-method::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  border-radius: 50%;
  background-color: var(--color-main);
  transition: all .3s linear;
  border: 1px solid var(--color-main);
  left: 3px;
}

.input-payment-method h2 {
  font-size: 22px;
  font-family: "font_bold";
}

.input-payment-method.active::before {
  opacity: 1;
}

.sub-select-payment-method:last-of-type .input-payment-method {
  border-bottom: none;
  padding-bottom: 0;
}

.payment-page .row {
  row-gap: 15px;
}

.payment-page .cart-summary {
  margin: 0px 0;
}

.main-comfirm-payment {
  text-align: center;
  margin: 80px auto;
}

.main-comfirm-payment h2 {
  margin: 20px auto 0;
  font-size: 25px;
  font-family: "font_bold";
}

.main-comfirm-payment h3 {
  margin: 15px 0;
  font-size: 19px;
  font-family: "font_bold";
}

.main-comfirm-payment p {
  margin-bottom: 20px;
  color: var(--color-text2);
}

.img-comfirm-payment img {
  max-width: 300px;
}

.form-payment .col-lg-12,
.form-payment .col-lg-6 {
  padding-left: 5px;
  padding-right: 5px;
}

.form-payment .row {
  row-gap: 0;
}

.form-payment .input-form {
  margin: 5px 0;
}

.form-payment .arrow-select select {
  font-size: 19px;
  color: var(--color-text2);
}

.form-payment {
  display: none;
}

/* -------------------------------------- */
/* -------- end  style  payment -------- */
/* -------------------------------------- */

/* -------------------------------------- */
/* -------- start style  memberships -------- */
/* -------------------------------------- */
.sub-memberships {
  height: 100%;
  min-height: 450px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 2px 5px #00000027;
  align-content: space-between;
  padding: 30px;
  border-radius: 15px;
  transition: all 0.3s linear;
}

.sub-memberships {
  gap: 15px;
}

.text-memberships h2 {
  font-size: 25px;
  font-family: "font_bold";
}

.price-memberships h2 {
  color: var(--bg-1);
  margin: 20px auto;
  font-size: 25px;
}

.price-memberships h2 span {
  font-size: 65px;
  font-family: "font_bold";
}

.text-memberships h3 {
  color: var(--color-text2);
  font-size: 17px;
  margin: 20px auto;
}

.text-memberships p {
  color: #1d1d1b !important;
  line-height: 22px;
  color: var(--color-text2);
}

.main-memberships {
  margin-top: 110px;
}

.sub-memberships:hover {
  transform: translateY(-20px);
  background-color: #daf1ff;
}

/* -------------------------------------- */
/* -------- end style  memberships -------- */
/* -------------------------------------- */

/* -------------------------------------- */
/* -------- start style  Upcoming Events -------- */
/* -------------------------------------- */

.sub-name-events {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}

.sub-name-events h3 {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sub-name-events h3 svg {
  color: var(--bg-1);
}

.sub-text-events {
  width: 100%;
}

.events .row {
  row-gap: 25px;
}

.sub-events {
  padding: 20px;
  margin: 0px 0;
  height: 100%;
  border-radius: 20px;
  transition: all 0.3s linear;
  background-color: var(--color-white);
  box-shadow: 0 2px 5px #0000001f;
}

.img-events {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  height: 230px;
}

.img-events img {
  border-radius: 20px;
  width: 100%;
  transition: all 0.3s linear;
  height: 100%;
  object-fit: cover;
}

.text-events {
  display: flex;
  align-items: self-start;
  gap: 20px;
  margin-top: 20px;
}

.data-text-events {
  font-size: 24px;
  color: var(--bg-1);
}

.data-text-events span {
  color: var(--bg-1);
  display: flex;
  font-family: "font_bold";
  align-items: center;
  font-size: 59px;
  height: 50px;
  line-height: 0;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--bg-1);
}

.sub-text-events h2 {
  font-size: 20px;
  font-family: "font_bold";
  line-height: 30px;
}

.sub-text-events .name-doc {
  margin: 20px 0;
}

.sub-text-events h3 {
  color: var(--color-text2);
}

.sub-events:hover {
  background-color: #dfeffc;
}

.sub-events:hover .img-events img {
  transform: scale(1.1);
}

.tabs-events {
  margin-bottom: 50px;
}

/* -------------------------------------- */
/* -------- end style  Upcoming Events -------- */
/* -------------------------------------- */

/* ============================================= */
/*================ start articles ================
================================================*/
.main-articles .row {
  row-gap: 15px;
}

.main-articles .col-lg-4 {
  padding-left: 7px;
  padding-right: 7px;
}

.img-sub-articles {
  height: 250px;
  overflow: hidden;
  transition: all 0.3s linear;
  border-radius: 20px;
}

.img-sub-articles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.text-articles {
  margin: 20px 0;
}

.text-articles h3 {
  padding: 9px 20px;
  border-radius: 5px;
  display: inline-block;
  height: 40px;
  font-size: 18px;
  color: var(--color-black);
  border-radius: 5px;
  background-color: #f7f7f7;
}

.text-articles h2 {
  line-height: 25px;
  margin: 10px 0;
  font-family: "font_bold";
}

.text-articles p {
  color: var(--bg-1);
  font-size: 20px;
  font-family: "font_medium";
}

.text-articles span {
  color: var(--color-text2);
  margin-top: 5px;
  display: block;
}

.sub-articles {
  height: 100%;
  padding: 10px;
  transition: all 0.3s linear;
  border-radius: 20px;
}

.sub-articles:hover {
  background-color: #daf1ff;
}

.sub-articles:hover .img-sub-articles img {
  transform: scale(1.1);
}

/* ============================================= */
/*================ end articles ================
================================================*/

/* ----------------------------------------------------- */
/* ----------------- start article details -------------- */
/* ----------------------------------------------------- */

.img-articles-details {
  width: 100%;
  height: 450px;
}

.img-articles-details img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.text-articles-details {
  margin-top: 20px;
}

.text-articles-details h2 {
  font-size: 26px;
  margin: 20px 0;
  font-family: "font_bold";
}

.text-articles-details img {
  max-height: 450px;
  border-radius: 15px;
  margin: 20px 0;
  width: 100%;
  object-fit: cover;
}

.text-articles-details>ul>li {
  margin: 20px 0;
  position: relative;
  color: var(--color-text2);
  padding-left: 30px;
}

.text-articles-details>ul>li::after {
  content: "";
  width: 25px;
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  top: 0px;

  background-position: center;
  position: absolute;
  background-image: url(../images/bg1.png);
}

.share-articles-details.share-protact-detalis {
  justify-content: flex-start;
}

.about-author-articles h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-family: "font_bold";
}

.about-author-articles img {
  width: 100%;
  height: 450px;
  border-radius: 20px;
  object-fit: cover;
}

.about-author-articles h3 {
  font-size: 25px;
  color: var(--color-black);
  font-family: "font_bold";
  margin-top: 20px;
}

.related-cases {
  margin: 40px 0;
}

.related-cases h2 {
  margin: 20px 0;
  font-size: 22px;
  font-family: "font_bold";
}

.related-cases ul li a {
  display: flex;
  transition: all 0.3s linear;
  align-items: self-start;
  gap: 10px;
}

.related-cases ul li a:hover {
  background-color: #dfeffc;
}

.related-cases ul li a {
  padding: 20px 10px;
  border-bottom: 1px solid #d9d9d9;
}

.img-related-cases {
  width: calc(35% - 5px);
  height: 120px;
}

.img-related-cases img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.text-related-cases {
  width: calc(65% - 5px);
}

.text-related-cases h3 {
  font-size: 17px;
  font-family: "font_bold";
  line-height: 24px;
  color: var(--color-main);
}

.text-related-cases span {
  color: var(--color-text2);
}

/* ----------------------------------------------------- */
/* ----------------- end article details -------------- */
/* ----------------------------------------------------- */

/* ----------------------------------------------------- */
/* ----------------- start  authors  -------------- */
/* ----------------------------------------------------- */

.sub-authors {
  position: relative;
  text-align: center;
  transition: all 0.3s linear;
  padding: 15px;
  border-radius: 15px;
}

.img-sub-authors {
  height: 400px;
  border-radius: 20px;
  width: 100%;
}

.img-sub-authors img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 20px;
}

.sub-authors:hover {
  background-color: #daf1ff;
}

.sub-authors h2 {
  font-size: 22px;
  margin: 10px 0;
  color: var(--color-main);
  font-family: "font_bold";
}

.authors .col-lg-3 {
  padding-right: 7px;
  padding-left: 7px;
}

.authors .row {
  row-gap: 15px;
}

.img-authors-details {
  width: 23%;
  height: 450px;
}

.img-authors-details img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.sub-authors-details {
  display: flex;
  align-items: self-start;
  gap: 20px;
}

.authors-details {
  position: relative;

  z-index: 1;
}

.authors-details::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 345px;
  z-index: -1;
  background-color: #f7f7f7;
}

.text-authors-details h3 {
  font-size: 22px;
  color: var(--bg-1);
}

.text-authors-details h2 {
  font-size: 30px;
  margin: 10px 0;
  font-family: "font_bold";
}

.main-authors-details>p {
  margin: 50px 0;
  font-size: 20px;
  line-height: 38px;
}

.author-clinical-cases>h2 {
  font-size: 25px;
  font-family: "font_bold";
  margin-bottom: 35px;
}

/* ----------------------------------------------------- */
/* ----------------- end  authors  -------------- */
/* ----------------------------------------------------- */

/*========================================================
================= start style myaccount ==================
======================================================= */
.title-my-account {
  background-color: var(--color-main);
  padding: 30px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 250px;
  border-radius: 20px;
  color: var(--color-white);
}

.sub-title-my-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

.img-title-my-account {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

.img-title-my-account img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.text-title-my-account h2 {
  font-family: "font_bold";
  font-size: 26px;
}

.text-title-my-account p {
  color: var(--bg-1);
  font-size: 22px;
  margin-top: 5px;
}

.barcode-myaccount {
  max-height: 120px;
}



/* .delete-myaccount .ctm-btn2 {
  height: 70px;
  background-color: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}



.delete-myaccount .ctm-btn2 {
  border-radius: 95px;
  height: 60px;
  padding: 16px 41px;
  background-color: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

.delete-myaccount .ctm-btn2:hover {
  background-color: var(--color-white);
  color: var(--color-main);
} */



.img-sidebar-myaccount {
  width: 110px;
  margin: auto;
  border-radius: 50%;
  height: 110px;
  padding: 8px;
  border: 2px solid var(--color-white);
}

.img-sidebar-myaccount img {
  object-fit: cover;
  width: 100%;
  border-radius: 50%;
  height: 100%;
}

.text-sidebar-myaccount h2 {
  font-size: 21px;
  margin: 5px 0;
  font-family: "font_bold";
  color: var(--color-white);
}

.text-sidebar-myaccount p {
  color: var(--bg-1);
  font-size: 19px;
}

.sub-sidebar-myaccount {
  background: var(--color-main);
  padding: 25px;
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
}

.main-myaccount {
  margin-top: 100px;
}

.sidebar-myaccount {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 5px #0000002c;
}

.sidebar-myaccount ul li a {
  /* border-bottom: 1px solid #d9d9d9; */
  font-size: 20px;
  align-items: center;
  font-family: "font_bold";
  display: flex;
  gap: 15px;
  padding: 20px 20px;
  justify-content: start;
}

.sidebar-myaccount ul li a img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  object-position: center;
}

.sidebar-myaccount ul li.active a {
  background-color: #daf1ff;
  border-bottom: none;
}

.sidebar-myaccount ul li:last-of-type a {
  border-bottom: none;
}

.myprofile,
.edit-profile,
.orders,
.main-order-details,
.settings,
.change-password,
.change-language {
  box-shadow: 0 2px 5px #0000002c;
  border-radius: 20px;
  overflow: hidden;
  min-height: 100%;
  padding: 20px 40px;
}

.title-myprofile {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-myprofile h2 {
  font-family: "font_bold";
  font-size: 22px;
}

.title-myprofile a {
  background: #f4f9fd;
  color: var(--bg-1);
  height: 50px;
  padding: 13px 25px;
  border-radius: 0px;
}

.img-details-myprofile {
  width: 150px;
  margin-bottom: 35px;
  border-radius: 50%;
  height: 150px;
  box-shadow: 0 2px 5px #00000017;
}

.img-details-myprofile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.details-myprofile {
  margin: 55px 0;
}

.details-myprofile ul li {
  margin: 20px 0;
  font-size: 19px;
  padding-left: 20px;
  font-family: "font_medium";
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.details-myprofile ul li::after {
  content: "";
  position: absolute;
  width: 10px;
  background-color: var(--color-main);
  left: 0;
  top: 9px;
  border-radius: 50%;
  height: 10px;
}

.details-myprofile ul li span {
  color: var(--color-text2);
}

.form-edit-profile {
  margin: 50px 0;
}

.edit-profile {
  padding: 50px 80px;
}

.chenge-img input {
  width: 0;
  height: 0;
  position: absolute;
  opacity: 0;
}

.img-edit-profile {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 3px 5px #00000017;
}

.img-edit-profile img {
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  height: 100%;
}

.chenge-img {
  position: absolute;
  bottom: 0px;
  width: 45px;
  right: 0;
  height: 45px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e7efff;
  color: var(--color-main);
}

.chenge-img label {
  margin: 0;
  line-height: 0;
  cursor: pointer;
}

.img-edit-profile {
  margin-bottom: 50px;
}

.form-edit-profile {
  width: 90%;
}

.btn-edit-profile {
  margin-top: 50px;
}

.form-edit-profile .input-form input {
  height: 65px;
}

.input-profile-courses {
  position: relative;
}

.input-profile-courses input,
.input-profile-courses select {
  -webkit-appearance: none;
  appearance: none;
  height: 65px;
  border: 1px solid var(--color-text2);
  background-color: transparent !important;
}

.input-profile-courses label {
  position: absolute;
  background-color: var(--color-white);
  padding: 4px 10px;
  top: -19px;
  left: 23px;
  font-size: 17px;
  margin-bottom: 0;
  color: var(--color-text2);
}

.arrow-select::after {
  content: "";
  width: 15px;
  height: 15px;
  background-image: url(../images/arrow2.png);
  background-size: contain;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  top: 26px;
  right: 19px;
}

.profile-courses form {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fliter-profile-courses {
  width: 75%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fliter-profile-courses .input-profile-courses.arrow-select {
  width: calc(35% - 5%);
}

.fliter-profile-courses .input-profile-courses {
  width: calc(65% - 5%);
}

.switch {
  position: relative;
  display: inline-block;
  width: 72px;
  height: 27px;
  margin: 0 !important;
}


.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-text2);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider-switch:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 35px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switch input:checked+.slider-switch {
  background-color: var(--bg-1);
}

.switch input:focus+.slider-switch {
  box-shadow: 0 0 1px var(--bg-1);
}

.switch input:checked+.slider-switch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider-switch.round {
  border-radius: 34px;
}



.slider-switch.round:before {
  border-radius: 19px;
}

.btn-completed {
  display: flex;
  align-items: center;
  gap: 17px;
}

.btn-completed span {
  color: var(--color-main);
  font-family: "font_medium";
  font-size: 17px;
}

.sub-profile-courses {
  padding: 30px;
  width: calc(50% - 7px);
  border-radius: 20px;
  background-color: var(--color-white);
  transition: all 0.3s linear;
  box-shadow: 0 3px 5px #00000028;
}

.sub-profile-courses:hover {
  background-color: #daf1ff;
}

.main-profile-courses {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 50px 0;
  gap: 14px;
}

.category-profile-courses {
  display: flex;
  margin-bottom: 30px;

  align-items: center;
  justify-content: space-between;
}

.category-profile-courses h3 {
  padding: 15px 25px;
  background-color: #f7f7f7;
  color: var(--color-black);
  height: 50px;
}

.completed-courses img {
  max-width: 40px;
}

.sub-profile-courses h2 {
  font-size: 24px;
  width: 70%;
  line-height: 40px;
  margin: 20px 0;
  font-family: "font_bold";
}

.sub-profile-courses p {
  font-size: 18px;
  line-height: 35px;
  width: 70%;
  padding: 20px 0;
  border-bottom: 1px solid #cdcdcd;
}

.duration-courses {
  margin: 25px 0;
  gap: 10px;
  display: flex;
  font-family: "font_medium";
  font-size: 19px;
  color: var(--bg-1);
  align-items: center;
}

.duration-courses img {
  max-width: 22px;
}

.duration-courses span {
  color: var(--color-text2);
}

.tabs-bookings ul {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  border-bottom: 4px solid #daf1ff;
}

.tabs-bookings ul li {
  text-align: center;
  height: 50px;
  width: calc(50% - 10px) !important;
}

.tabs-bookings ul li a {
  height: 100%;
  font-size: 22px;
  font-family: "font_medium";
  position: relative;
  display: inline-block;
  background-color: transparent;
  color: var(--color-text2) !important;
}

.tabs-bookings ul li a::after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: var(--bg-1);
  height: 3px;
  border-radius: 10px;
  bottom: -3px;
  transition: all 0.3s linear;
  left: 0;
  right: 0;
  transform: translatex(-100%);
  opacity: 0;
  margin: auto;
}

.tabs-bookings ul li a.active {
  background-color: transparent !important;
  color: var(--bg-1) !important;
}

.tabs-bookings ul li a.active::after {
  transform: translatex(0%);
  opacity: 1;
}

.main-bookings>ul>li {
  display: flex;
  gap: 20px;
  position: relative;
  padding: 20px 0;
  border-bottom: 1px solid #cdcdcd;
  align-items: self-start;
  padding-right: 50px;
}

.dots-bookings {
  right: 7px;
  top: 7px;
  position: absolute;
}

.dots-bookings span {
  font-size: 28px;
  cursor: pointer;
}

.delete-profile {
  background-color: #FFEBEB !important;
}

.delete-profile:hover {
  background-color: #FF3A3A !important;
}

.dots-bookings ul {
  width: 150px;
  right: 0;
  z-index: 22;
  position: absolute;
  display: none;
  box-shadow: 0 0 5px #00000029;
  background-color: var(--color-white);
}


.and-booking {
  text-align: center;
  margin: 30px 0;
}

.dots-bookings ul li a {
  padding: 15px 10px;
  display: flex;
  justify-content: center;
  transition: all .3s linear;
  width: 100%;
  border-bottom: 1px solid #7070701e;
}

.dots-bookings ul li a:hover {
  background-color: #dfeffc;
}

.img-bookings {
  width: 140px;
  height: 90px;
}

.img-bookings img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.text-bookings h3 {
  font-size: 20px;
  font-family: "font_bold";
  color: var(--color-main);
}

.text-bookings span {
  color: var(--color-text2);
  font-size: 18px;
  margin-top: 10px;
  display: block;
}

.table-order thead {
  border-radius: 5px;
  overflow: hidden;
  background-color: #f7f7f7;
}

.table-order .table th {
  border-top: none !important;
  padding: 20px 15px !important;
  font-weight: normal;
  font-size: 19px;
  font-family: "font_medium";
}

.table-order .table td a {
  width: 100%;
  font-weight: normal;
  font-size: 18px;
  font-family: "font_medium";
}

.table-order .table td a {
  width: 100%;
  font-weight: normal;
  font-size: 18px;
  display: block;
  font-family: "font_medium";
}

.stats {
  padding: 7px 0px;
  text-align: center;
  border-radius: 20px;
}

.onpre-order {
  background-color: #fff1df;
}

.payment-accepted {
  background-color: #e9fff4;
}

.payment-error {
  background-color: #ffebeb;
}

.preparing-order {
  background-color: #fffceb;
}

.delivered {
  background-color: #e4f5ff;
}

.table-order .table td,
.table-order .table th {
  padding: 0.75rem;
  vertical-align: middle;
  text-align: center;
  border-top: 1px solid #dee2e6;
}

.orders {
  padding: 15px;
}

.main-order-details {
  padding: 15px;
}

.title-order-details h2 {
  background-color: #f7f7f7;
  height: 70px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 5px;
  padding: 10px 20px;
  color: var(--color-black);
}

.tabs-order-details {
  margin: 30px 0;
}

.tabs-order-details ul {
  display: flex !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 20px !important;
  border-bottom: 4px solid #daf1ff;
}

.tabs-order-details ul li {
  text-align: center;
  height: 50px;
  width: auto !important;
}

.tabs-order-details ul li a {
  height: 100%;
  font-size: 22px;
  font-family: "font_medium";
  position: relative;
  display: inline-block;
  background-color: transparent;
  color: var(--color-text2) !important;
}

.tabs-order-details ul li a::after {
  content: "";
  position: absolute;
  width: 100%;
  background-color: var(--bg-1);
  height: 3px;
  border-radius: 10px;
  bottom: -3px;
  transition: all 0.3s linear;
  left: 0;
  right: 0;
  transform: translatex(-100%);
  opacity: 0;
  margin: auto;
}

.tabs-order-details ul li a.active {
  background-color: transparent !important;
  color: var(--bg-1) !important;
}

.tabs-order-details ul li a.active::after {
  transform: translatex(0%);
  opacity: 1;
}

.order-detail {
  padding: 0px 20px;
}

.order-detail h2 {
  font-size: 23px;
  font-family: "font_bold";
}

.sub-order-detail ul li {
  margin: 15px 0;
  color: var(--color-text2);
}

.sub-order-detail ul li span {
  display: inline-block;
  color: var(--color-main);
  padding: 10px 40px;
  font-size: 18px;
  border-radius: 57px;
}

.status-updated {
  display: flex;
  align-items: center;
  margin: 30px 0;
  gap: 10px;
}

.sub-order-detail {
  width: calc(50% - 5px);
}

.prodect-profile .img-prodect-cart-page {
  width: 130px;
  height: 90px;
  flex-wrap: wrap;
}

.prodect-profile .text-prodect-cart-page h3 {
  font-size: 20px;
  font-family: "font_bold";
}

.prodect-profile .text-prodect-cart-page {
  width: auto;
}

.prodect-profile tbody tr td:nth-of-type(1) {
  width: 60%;
}

.prodect-profile .price-product-cart h3 {
  font-size: 21px;
}

.prodect-profile .old-price {
  font-size: 21px;
}

.prodect-profile .price-product-cart {
  text-align: center;
}

.prodect-profile .code-product {
  font-size: 23px;
}

.prodect-profile .table td,
.prodect-profile .table th {
  border-top: none !important;
  border-bottom: 1px solid #dee2e6 !important;
}

.invoice {
  padding: 0 20px;
}

.details-invoice ul li {
  margin: 15px 0;
  font-size: 19px;
  color: var(--color-text2);
}

.invoice tbody td:nth-of-type(1) {
  width: 50%;
}

.invoice table {
  margin: 30px 0;
}

.invoice tbody td {
  font-size: 20px;
  padding: 20px 10px;
  color: var(--color-text2);
}

.invoice-price ul li {
  display: flex;
  color: var(--color-black);
  font-size: 20px;
  padding: 20px 15px;
  border-bottom: 1px solid #dee2e6;
  align-items: center;
  font-family: "font_medium";
}

.invoice-price ul li h3 {
  width: 50%;
  font-size: 20px;
  font-family: "font_medium";
}

.invoice-price ul li span {
  width: 50%;
  font-size: 20px;

  font-family: "font_medium";
}

.invoice p {
  margin: 30px 0 20px;
  color: var(--color-black);
  font-size: 20px;
}

.settings,
.change-password,
.change-language {
  padding: 40px 60px 85px 60px;
}

.settings h2,
.change-password h2,
.change-language h2 {
  font-size: 25px;
  margin-bottom: 50px;
  font-family: "font_bold";
}

.settings ul li a {
  height: 65px;
  padding: 7px 20px;
  width: 60%;
  background-color: #ebf6ff;
  display: flex;
  border-radius: 5px;
  margin: 10px 0;
  transition: all 0.3s linear;
  align-items: center;
  gap: 10px;
  color: var(--color-black);
  font-size: 18px;
  justify-content: space-between;
}

.settings ul li a:hover {
  background-color: var(--bg-1);
  color: var(--color-white);
}

.change-password input {
  height: 65px;
}

.btn-change-password {
  margin-top: 50px;
}

.input-change-language input {
  width: 0;
  height: 0;
  position: absolute;
}

.input-change-language label {
  height: 65px;
  padding: 7px 20px;
  width: 60%;
  background-color: #ebf6ff;
  display: flex;
  border-radius: 5px;
  margin: 10px 0;
  transition: all 0.3s linear;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-main);
  justify-content: space-between;
}

.input-change-language label i {
  opacity: 0;
  display: block;
  transition: all 0.3s linear;
  transform: scale(0);
}

.input-change-language input:checked~label i {
  opacity: 1;
  transform: scale(1);
}

.btn-change-language {
  margin-top: 40px;
}

/*========================================================
================= start style myaccount ==================
======================================================= 
*/

/*========================================================
================= start style login ==================
======================================================= 
*/
.login-page {
  min-height: 100vh;
}

.login-page .row {
  height: 100%;
}

.title-login {
  background-image: linear-gradient(to bottom, #2d58af, #0b2a6b);
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 50px 15%;
  align-content: center;
  flex-wrap: wrap;
}

.title-login::after {
  content: "";
  background-image: url(../images/bglogin.png);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.title-login h2 {
  width: 100%;
  font-size: 40px;
  font-family: "font_bold";
  color: var(--color-white);
}

.title-login p {
  color: var(--color-white);
  margin: 20px 0;
  width: 70%;
  font-size: 22px;
  line-height: 40px;
}

.main-login {
  padding: 50px;
  display: flex;
  height: 100%;
  align-content: center;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
  justify-content: center;
}

.logo-login {
  width: 100%;
}

.text-login-main {
  width: 100%;
}

.form-login {
  width: 100%;
}

.logo-login img {
  width: 160px;
}

.text-login-main h2 {
  font-size: 40px;
  font-family: "font_bold";
  color: var(--bg-1);
}

.text-login-main p {
  margin: 20px 0;
  font-size: 19px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-black);
}

.text-login-main p a {
  color: var(--bg-1);
  font-size: 19px;
}

.form-login .input-form {
  position: relative;
}

.form-login .input-form input,
.form-login .input-form select {
  padding-left: 50px;
}

.form-login .input-form img {
  content: "";
  position: absolute;
  width: 21px;
  object-fit: contain;
  left: 18px;
  top: 17px;
  height: 22px;
}

.sub-remember input {
  width: 0;
  height: 0;
  position: absolute;
}

.sub-remember label {
  padding-left: 30px;
  color: var(--color-text2);
  position: relative;
  margin: 0;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}

.input-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.sub-remember label::after {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 5px;
  top: 4px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-text2);
}

.sub-remember input:checked~label::before {
  content: "\f00c";
  font-weight: 400;
  font-family: "FontAwesome";
  width: 22px;
  font-size: 13px;
  height: 22px;
  position: absolute;
  z-index: 22;
  left: -1px;
  top: 3px;
  display: flex;
  justify-content: center;
  color: var(--color-white);
  align-items: center;
  border-radius: 5px;
  background-color: var(--color-main);
}

.sub-remember input:checked~label {
  color: var(--color-main);
}

.input-remember a {
  color: var(--bg-1);
  text-decoration: underline !important;
  font-size: 19px;
}

.btn-form-login {
  margin-top: 50px;
}

.btn-form-login button {
  width: 100%;
  height: 60px;
  font-size: 22px;
}

.arrow-select select {
  -webkit-appearance: none;
  appearance: none;
}

.main-signup .arrow-select::after {
  background-image: url(../images/arrow3.png);
}

.main-signup .arrow-select::after {
  background-image: url(../images/arrow3.png);
  top: 22px;
}

.main-signup select {
  font-size: 19px;
  color: var(--color-text2);
}

.main-signup {
  padding: 25px 50px;
  gap: 15px;
}

.signup .logo-login img {
  width: 135px;
}

.signup .text-login-main p {
  margin: 10px 0;
}

.signup .btn-form-login {
  margin-top: 10px;
}

.signup .btn-form-login button {
  height: 55px;
}

.terms-form {
  position: relative;
  margin: 20px 0;
}

.terms-form input {
  width: 0;
  height: 0;
  position: absolute;
}

.terms-form label {
  padding-left: 30px;
  color: var(--color-text2);
  position: relative;
  font-size: 17px;
  cursor: pointer;
  user-select: none;
}

.terms-form label::after {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 5px;
  top: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-text2);
}

.terms-form input:checked~label::before {
  content: "\f00c";
  font-weight: 400;
  font-family: "FontAwesome";
  width: 22px;
  font-size: 13px;
  height: 22px;
  position: absolute;
  z-index: 22;
  left: -1px;
  top: 2px;
  display: flex;
  justify-content: center;
  color: var(--color-white);
  align-items: center;
  border-radius: 5px;
  background-color: var(--color-main);
}

.terms-form input:checked~label {
  color: var(--color-main);
}

.otp_input {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.otp_input input {
  border: none;
  width: 65px;
  background-color: transparent;
  height: 65px;
  border-radius: 0;
  color: var(--color-a);
  font-size: 24px;
  text-align: center;
  border-bottom: 1px solid var(--bg-1);
}

.otp_input input:focus {
  background-color: #daf1ff;
}

/*========================================================
================= end style login ==================
======================================================= 
*/

/*
 =========================================================
 =============== start style course video  ===============
 ========================================================= 
*/

.percent {
  position: relative;
}

.percent svg {
  position: relative;
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}

.percent svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #0d3892;
  stroke-width: 5;
  stroke-linecap: round;
}

.percent svg circle:last-of-type {
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100px - (100px * var(--percent)) / 100);
  stroke: var(--bg-1);
}

.percent svg {
  position: relative;
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
}

.title-course-video {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-radius: 20px;
  color: var(--color-white);
  min-height: 130px;
  background-color: #214899;
  align-items: center;
  padding: 20px 40px;
}

.progress-video {
  position: relative;
}

.sub-progress-video {
  display: flex;
  cursor: pointer;

  gap: 10px;
  align-items: center;
}

.share-course-video .ctm-btn2 {
  background-color: transparent;
  color: var(--color-white);

  border: 1px solid var(--color-white);
}

.share-course-video .ctm-btn2 i {
  transform: rotate(0);
}

.share-course-video .ctm-btn2:hover {
  background-color: var(--bg-1);
  border-color: transparent;
}

.dropdowm-progress {
  position: absolute;
  min-width: 180px;
  background-color: var(--color-white);
  top: 150%;
  border-radius: 5px;
  display: none;
  text-align: center;

  box-shadow: 0 2px 5px #0000002c;
}

.dropdowm-progress p {
  display: flex;
  height: 100%;
  min-height: 55px;
  align-items: center;

  justify-content: center;
}

.dropdowm-progress::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 10px;
  top: -13px;
  right: 0;
  left: 0;
  margin: auto;
  border-bottom: solid 16px #fff;
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
}

.main-course-video {
  margin-top: 50px;
}

.main-course-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.main-course-video {
  position: relative;
  overflow: hidden;
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
}

.main-course-video button {
  position: absolute;
  height: 60px;
  left: 0;
  right: 0;
  margin: auto;
  align-items: center;
  display: inline-block;
  top: 50%;
  justify-content: center;
  color: #fff;
  background: var(--bg-1);
  border: navajowhite;
  font-size: 25px;
  z-index: 2;
  display: flex;
  width: 60px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.main-course-video:hover button {
  opacity: 1 !important;
}

.main-course-video::after {
  width: 100%;
  height: 100%;
  content: "";
  transition: all 0.3s linear;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-color: var(--color-black);
  opacity: 0.4;
  left: 0;
  top: 0;
}

.main-course-video.active::after {
  opacity: 0;
}

section.terms p {
  line-height: 35px;
  font-size: 19px;
}

section.privacy-policy p {
  line-height: 35px;
  font-size: 19px;
}

/*
 =========================================================
 =============== start style course video  ===============
 ========================================================= 
*/