/*
Theme Name: Classnow
Theme URI: https://classnow.ir
Author: ali mahmoudi
Author URI: https://classnow.ir
Description: Designer Ali Mahmoudi.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* ----------------------------------------------- variables ----------------------------------------- */
:root {
  --colorPrimary: rgba(101, 144, 62, 1);
  --colorPrimaryText: rgba(266, 255, 255, 1);
  --colorCard: rgba(41, 44, 45, 1);
  --colorBg: rgba(29, 31, 32, 1);
}
/* ----------------------------------------------- preloader search ----------------------------------------- */
[x-cloak] {
  display: none !important;
}
.lds-ellipsis {
  /* display: inline-block; */
  position: relative;
  width: 50px;
  height: 40px;
}
.lds-ellipsis div {
  position: absolute;
  top: 13px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(101, 144, 62, 1);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 20px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 23px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(15px, 0);
  }
}
/* ----------------------------------------------- skeleton ----------------------------------------- */
.bg-skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2)
  );
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: left -100% top 0;
  animation: shine 1s ease infinite;
}

@keyframes shine {
  to {
    background-position: right -100% top 0;
  }
}
/* ----------------------------------------------- preloader and content ----------------------------------------- */
.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 1);
  opacity: 1;
  z-index: 50000;
  flex-direction: column;
}
.spinner1:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: rgba(101, 144, 62, 1);
  border-bottom-color: rgba(101, 144, 62, 1);
  animation: my_spinner 1s ease-in-out infinite;
}
@keyframes my_spinner {
  to {
    transform: rotate(360deg);
  }
}
.preloader img {
  animation: loading_logo 1s linear infinite;
}
@keyframes loading_logo {
  0% {
    transform: scale(0.7);
  }
  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.7);
  }
}
/* ----------------------------------------------- index ----------------------------------------- */
.new-tv-index::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
}

.new-tv-index::-webkit-scrollbar {
  width: 10px;
  background-color: #fff;
}

.new-tv-index::-webkit-scrollbar-thumb {
  background-color: #404040;
}
.bg-roadmap {
  background: linear-gradient(
    180deg,
    #fc427b 38.6%,
    rgba(243, 245, 252, 0) 100%
  );
}
/* ----------------------------------------------- swiperjs ----------------------------------------- */
.swiper-container {
  position: relative;
}
.slider-products{
  padding-bottom: 40px !important;
} 
.swiper-pagination{
  position: absolute;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-top: -20px !important;
  padding-right: 50px;
  padding-left: 50px;
  height:fit-content !important;
  padding-top: 5px;
  padding-bottom: 5px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0 100%) !important; 
  margin: auto !important;
}
.swiper-pagination-top.swiper-pagination{
  width: fit-content !important;
}
.swiper-pagination-bullet{
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
  background: rgba(57,57,57,1) !important;
  border-radius: 50%;
  margin: 0 5px;
}
.swiper-pagination-bullet-active{
  width: 25px !important;
  border-radius: 5px !important;
  background: var(--colorPrimary) !important;
}
.swiper-pagination-top .swiper-pagination-bullet-active{
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background: var(--colorPrimary) !important;
}
@media only screen and (max-width: 768px) {
  .slider-products .swiper-slide{
    opacity: 0.5 !important;
    transform: scale(0.9) !important;
    transition: opacity 0.3s, transform 0.3s !important;
  } 
  .slider-products .swiper-slide-active{
    opacity: 1 !important;
    transform: scale(1.02) !important;
    z-index: 2 !important;
  } 
}
*/
/* ----------------------------------------------- /swiperjs ----------------------------------------- */
/* -------- card customer ------- */
.card-customer {
  width: 100%;
  display: flex;
  justify-content: center;
}
.card-customer-content {
  padding: 10px;
  width: 90%;
  max-width: 800px;
}
.customer-content-img {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  margin-bottom: 15px;
}
.customer-img {
  width: 64px !important;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #2ed573;
  margin-bottom: 10px;
}
.customer-user-name {
  font-size: 1rem;
  font-weight: 600;
  color: #8395a7;
  margin-top: 10px;
}
.customer-job {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: #8395a7;
  margin-top: 5px;
}
.customer-body {
  font-size: 1rem;
  font-weight: 400;
  color: #576574;
  text-align: justify;
  line-height: 2rem;
  margin-bottom: 20px;
}
/* -------- single product ------- */
.attribute-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.attribute-circle {
  width: 20px;
  height: 20px;
  border: 2px solid #141414;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  background: #504e4e;
  transition: border-color 0.2s;
}
.attribute-button.active .attribute-circle {
  border-color: var(--colorPrimary);
}
.attribute-checkmark {
  display: none;
  color: var(--colorPrimary);
  font-size: 1rem;
}
.attribute-button.active .attribute-checkmark {
  display: block;
}
.attribute-checkmark::before {
  content: "✔";
}
.woocommerce-breadcrumb {
  width: 100% !important;
  padding: 0px !important;
  margin-bottom: 0px !important;
  color: var(--colorPrimaryText);
}
.woocommerce-breadcrumb a {
  color: rgba(101, 144, 62, 1);
}
.star-rating {
  display: flex;
  align-items: center;
}
.star-rating span {
  width: fit-content !important;
}
.woocommerce .star-rating span {
  color: #facc15;
  width: fit-content !important;
}
.card-related {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  background-color: white;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 400;
}
.course-detail .title {
  font-size: 1rem;
}
.woocommerce .woocommerce-Tabs-panel {
  margin: 0 !important;
}
.course-detail p {
  margin-bottom: 0;
}
.single-related-product h2 {
  font-size: 1rem;
}
.single-head {
  font-size: 1rem !important;
}
.entry-summary {
  display: none !important;
}
/* -------- comment single product ------- */
#reviews {
  width: 100%;
}
#reply-title {
  color: rgba(101, 144, 62, 1);
  font-size: 1.2rem;
  font-weight: 700;
}
.comment-form-comment {
  display: flex;
  flex-direction: column;
}
.comment-respond label {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 5px;
}
.dark .comment-respond label {
  color: #fff !important;
}
.commentlist {
  padding: 0 !important;
}
.commentlist li {
  padding: 10px !important;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 30px !important;
  border: 1px solid #e5e7eb !important;
}
.dark .commentlist li {
  border: 1px solid rgba(101, 144, 62, 1) !important;
}
.commentlist img {
  border-radius: 50%;
  width: 40px !important;
  position: unset !important;
  top: 5px !important;
  margin-left: 8px !important;
}
.commentlist .comment-text {
  margin-right: 20px !important;
  margin-top: 20px !important;
  border: none !important ;
}
.dark .commentlist .comment-text .meta,
.dark .commentlist .comment-text.description p {
  color: #fff !important;
}
.commentlist .description p {
  padding-right: 10px;
  margin-bottom: 0 !important;
  font-size: 0.9rem;
  font-weight: 400;
  color: #3b3838;
  line-height: 30px;
}
.commentlist .children {
  margin-top: 10px !important;
  border-radius: 10px;
}
.commentlist .children li {
  margin: 0 20px 0 !important;
}
.commentlist .comment-text {
  margin-top: 0 !important;
}
.woocommerce-pagination .current {
  background-color: rgba(101, 144, 62, 1) !important;
  color: #fff !important ;
}
.comment-respond form {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px !important;
}
.comment-notes {
  width: 100% !important;
}
.comment-form-author {
  width: 50% !important;
  margin-bottom: 10px;
}
.comment-form-author label {
  margin-left: 10px !important;
}
.comment-form-author input {
  width: 100% !important;
  border-radius: 10px !important;
  border: solid 1px #e5e7eb !important;
  padding: 5px 10px !important;
  margin-left: 10px !important;
}
.dark .comment-form-author input {
  background-color: var(--colorBg) !important;
}
.comment-form-email {
  width: 50% !important;
  margin-bottom: 10px;
}
.comment-form-email label {
  margin-right: 10px !important;
}
.comment-form-email input {
  width: 100% !important;
  border-radius: 10px !important;
  border: solid 1px #e5e7eb !important;
  padding: 5px 10px !important;
  margin-right: 10px !important;
}
.dark .comment-form-email input {
  background-color: var(--colorBg) !important;
}
.comment-respond .comment-form-comment {
  width: 100% !important;
  margin-bottom: 10px;
}
.woocommerce p.stars a {
  margin-left: 10px;
  font-size: 2rem;
  color: #facc15;
}
.comment-respond .comment-form-rating {
  margin-bottom: 10px;
}
.dark .comment-respond .comment-form-rating label {
  color: #fff !important;
}
.comment-respond textarea {
  border-radius: 10px;
  border: solid 1px #e5e7eb !important;
  padding: 20px !important;
  height: 200px !important;
}
.dark .comment-respond textarea {
  background-color: var(--colorBg) !important;
}
.comment-respond textarea:focus {
  border: solid 1px rgba(101, 144, 62, 1) !important;
  background-color: rgb(255, 253, 253);
}
.comment-respond .form-submit {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.comment-respond .submit {
  justify-content: flex-end;
  background-color: rgba(101, 144, 62, 1) !important;
  color: #fff !important;
  border-radius: 5px !important;
  padding: 0.618em 1em;
  font-weight: 700;
  line-height: 1;
}
.comment-respond .submit:hover {
  cursor: pointer;
  opacity: 0.8;
}
.must-log-in {
  background-color: #ffc312;
  padding: 15px;
}
/* ------------------------- mini shoping cart in header -------------------------------------- */
.card-list {
  cursor: default !important;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.woocommerce-mini-cart__empty-message {
  text-align: center;
}
.dark .woocommerce-mini-cart__empty-message {
  color: var(--colorPrimaryText);
}
.cart-list .woocommerce-mini-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  margin-bottom: 10px;
}
.cart-list .woocommerce-mini-cart-item .remove {
  color: #fff;
  background-color: #94a3b8;
  width: 22px !important;
  height: 24px !important;
  padding: 2px 6px 2px 6px;
  margin-left: 10px;
}
.cart-list .woocommerce-mini-cart-item .remove:hover {
  background-color: #ef4444;
}
.cart-list .woocommerce-mini-cart-item .attachment-woocommerce_thumbnail {
  max-width: 75px;
  max-height: 75px;
  border-radius: 5px;
}
.cart-list .woocommerce-mini-cart-item a:nth-child(2) {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
}
.cart-list .woocommerce-mini-cart-item .woocommerce-Price-amount {
  font-size: 0.8rem;
}
.cart-list .woocommerce-mini-cart__total {
  border-top: 1px solid #e8e8e8 !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.woocommerce-mini-cart__buttons.buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .woocommerce-mini-cart__buttons.buttons {
    flex-direction: row;
  }
}
.cart-list .woocommerce-mini-cart__buttons .wc-forward {
  background-color: #8395a7;
  color: white;
  padding: 10px;
  transition: all 0.3s;
  border: 1px solid #8395a7;
  margin-bottom: 10px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .cart-list .woocommerce-mini-cart__buttons .wc-forward {
    width: 50%;
    margin-bottom: 0px;
    margin-right: 5px;
  }
}
.cart-list .woocommerce-mini-cart__buttons .wc-forward:hover {
  color: #8395a7;
  background-color: white;
  border: 1px solid #8395a7;
  cursor: pointer;
}
.cart-list .woocommerce-mini-cart__buttons .checkout {
  background-color: rgba(101, 144, 62, 1) !important;
  color: white;
  padding: 10px;
  border: 1px solid rgba(101, 144, 62, 1) !important;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .cart-list .woocommerce-mini-cart__buttons .checkout {
    width: 50%;
  }
}
.cart-list .woocommerce-mini-cart__buttons .checkout:hover {
  cursor: pointer;
  color: rgba(101, 144, 62, 1) !important;
  background-color: white !important;
  transition: all 0.3s;
  border: 1px solid rgba(101, 144, 62, 1) !important;
}
/* ----------------------------------------------- cart ----------------------------------------- */
.cart-container {
  width: 100% !important;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .cart-container {
    flex-direction: row;
  }
}
.product-remove a {
  margin: auto;
}
.product-thumbnail a img {
  margin: auto;
}
.woocommerce table.shop_table {
  border: none !important;
  text-align: center;
}
.woocommerce .cart-collaterals .cart_totals {
  width: 100% !important;
}
.woocommerce .cart-collaterals .cart_totals h2 {
  text-align: center;
}
.woocommerce .cart-collaterals .shop_table {
  background-color: white !important;
}
.woocommerce .wc-proceed-to-checkout {
  width: 100% !important;
  display: flex;
  justify-content: flex-end;
}
.woocommerce .wc-proceed-to-checkout a {
  background-color: rgba(101, 144, 62, 1) !important;
  width: 100% !important;
  text-align: center;
  padding: 15px !important;
}
.woocommerce .woocommerce-cart-form .coupon {
  border: 1px solid rgba(101, 144, 62, 1) !important;
  padding: 10px !important;
  border-radius: 10px !important;
}
#coupon_code {
  border: none !important;
  outline: none !important;
  padding: 10px;
  background-color: #f3f4f6;
  width: fit-content;
}
#coupon_code:focus {
  border: none !important;
}
.woocommerce .woocommerce-cart-form .coupon button[name="apply_coupon"] {
  margin-right: 5px !important;
  background-color: rgba(101, 144, 62, 1) !important;
  color: #fff !important;
}
.woocommerce .woocommerce-cart-form .button[name="update_cart"] {
  background-color: rgba(101, 144, 62, 1) !important;
  color: #fff !important;
  margin-top: 10px !important;
}
.woocommerce .return-to-shop .wc-backward {
  background-color: rgba(101, 144, 62, 1) !important;
  color: #fff !important;
  padding: 20px !important;
}
/* ----------------------------------------------- check out ----------------------------------------- */
.woocommerce .checkout_coupon {
  background-color: white !important;
  text-align: center !important;
}
.woocommerce .checkout_coupon button {
  background-color: rgba(101, 144, 62, 1) !important;
  color: white !important ;
  padding: 20px !important;
}
.checkout-container {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 20px;
}
@media only screen and (min-width: 768px) {
  .checkout-container {
    flex-direction: row;
  }
}
#customer_details .woocommerce-billing-fields h3 {
  font-size: 1.2rem;
  font-weight: 600;
}
#customer_details
  .woocommerce-billing-fields
  .woocommerce-billing-fields__field-wrapper
  input {
  background-color: #f3f4f6;
  padding: 8px;
}
#customer_details {
  margin-bottom: 10px !important;
}
@media only screen and (min-width: 768px) {
  #customer_details {
    margin-bottom: 0px !important;
    margin-left: 10px !important;
  }
}
.checkout-container .total {
  padding: 20px;
  background-color: #e4e4e7;
}
.checkout-container .total h3 {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}
.woocommerce-checkout-review-order .woocommerce-checkout-review-order-table {
  background-color: white;
}
#payment {
  background-color: #e4e4e7 !important;
}
#payment .payment_box {
  background-color: white !important;
}
#payment .payment_box::before {
  border: 1em solid white !important ;
  border-left-color: transparent !important ;
  border-right-color: transparent !important ;
  border-top-color: transparent !important ;
}
#payment button {
  background-color: rgba(101, 144, 62, 1) !important;
  width: 100% !important;
  padding: 15px !important;
}
/* ----------------------------------------------- woocammerce messages ----------------------------------------- */
/* --woocommerce-message--*/
.woocommerce .woocommerce-message {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px !important;
  width: 100% !important;
  border: none;
  background-color: #10b981;
  color: #fff !important;
}
.woocommerce .woocommerce-message::before {
  top: unset !important;
  color: #fff !important;
}
.woocommerce .woocommerce-message a {
  font-family: dana !important;
  background-color: #fff;
  order: 2;
  color: #515151 !important ;
  font-weight: 700 !important;
  padding: 0.618em 1em !important;
  cursor: pointer !important;
}
/* --woocommerce-info--*/
.woocommerce .woocommerce-info {
  margin-bottom: 10px !important;
  width: 100% !important;
  border: none;
  background-color: rgba(101, 144, 62, 1) !important;
  color: #fff !important;
}
.woocommerce .woocommerce-info::before {
  color: #fff !important;
}
.woocommerce .woocommerce-info a {
  font-family: dana !important;
  background-color: #fff;
  order: 2;
  color: #515151 !important ;
  font-weight: 700 !important;
  padding: 0.618em 1em !important;
  cursor: pointer !important;
}
.woocommerce .woocommerce-info .showcoupon {
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  background-color: unset;
  color: unset !important ;
  padding: 0 !important;
}
/* --woocommerce-error--*/
.woocommerce .woocommerce-error {
  margin-bottom: 10px !important;
  width: 100% !important;
  border: none;
  background-color: #b81c23 !important;
  color: #fff !important;
}
.woocommerce .woocommerce-error::before {
  color: #fff !important;
}
.woocommerce .woocommerce-error a {
  font-family: dana !important;
  background-color: #fff;
  order: 2;
  color: #515151 !important ;
  font-weight: 700 !important;
  padding: 0.618em 1em !important;
  cursor: pointer !important;
}
/* ----------------------------------------------- dashboard ----------------------------------------- */
.dashboard-container {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .dashboard-container {
    flex-direction: row;
  }
}
.dashboard-nav {
  border-radius: 10px;
  background-color: #1c1c1c;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .dashboard-nav {
    margin-bottom: 0px;
    margin-left: 10px;
  }
}
.dashboard-nav ul {
  list-style: none;
  padding: 0;
  margin: 8px;
}
.dashboard-nav ul li:hover {
  background-color: #64748b;
}
.dashboard-nav ul li.active {
  background-color: #282828;
}
.dashboard-nav ul li a {
  display: flex;
  align-items: center;
  color: #c3c3c3;
  width: 100%;
  padding: 15px;
  position: relative;
}
.dashboard-nav ul li.active a {
  display: flex;
  align-items: center;
  color: #fff;
}
.woocommerce-MyAccount-navigation ul li.active a:after {
  content: "";
  display: block !important;
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: -2px;
  width: 4px;
  background: #fff;
  border-radius: 10px;
  height: auto;
  border: none;
  opacity: 1;
}
.dashboard-nav ul li a svg {
  margin-left: 5px;
}

/* ----------------------------------------------- archive product ---------------------------------- */
.archve-product .woocommerce-breadcrumb {
  display: none !important;
}
/* ----------------------------------------------- tickets ----------------------------------------- */
.pagination .page-numbers {
  padding: 5px 10px;
  background-color: transparent;
  border: 1px solid #d1d5db;
  border-radius: 100%;
}
/* ----------------------------------------------- single blog ----------------------------------------- */
.container-body img {
  margin: auto;
  border-radius: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* ----------------------------------------------- Product Slider ----------------------------------------- */
.slider-product {
  overflow: hidden;
  border-radius: 0.5rem;
}

.slider-product .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-product .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* Aspect ratio container for 16:9 ratio */
.slider-product.aspect-video {
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* Auto height mode */
.slider-product .swiper-slide img.h-auto {
  height: auto !important;
  width: auto !important;
  max-width: 100%;
  max-height: none;
}

/* Fixed height mode */
.slider-product .swiper-slide img.h-full {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}