@import "./uicons-brands.css";
  @import "./uicons-regular-rounded.css";
  @import "./uicons-solid-rounded.css";
  @import "./uicons-thin-rounded.css";

  @import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");

  .top-header-three-categories .megamenu-content,
  .top-header-three-categories .megamenu-tabs li,
  .panel-user-sidebar-content,
  .panel-user-sidebar,
  .blog-archive .filter ul li,
  .detail-product-introduction-success ul li,
  .detail-product-introduction-danger ul li,
  .category-page-sidebar,
  .about-us-members-box,
  .podcasts-item p,
  .footer-three-contact,
  .footer-two,
  .landing-bg h3,
  .nav-responsive-content ul li a,
  .top-header-nav>ul li a,
  .top-header-nav>ul li a:hover,
  .top-header-nav>ul li a:focus,
  .top-header-nav>ul li a:active,
  .top-header-nav .menu .megamenu-content,
  .top-header-nav .menu .megamenu-tabs li,
  [data-copy],
  .question-item .content p,
  .question-item .content,
  .question-items li ul,
  .about-us-video video,
  .custom-switch,
  .form-check {
    position: relative;
  }

  .teachers::before,
  .path-learning .container::after,
  .path-learning .container::before,
  .path-learning::after,
  .services-comments .container::before,
  .services-comments .container::after,
  .services-comments::after,
  .services-landing .image::after,
  .services-landing h2::before,
  .services-landing .sup-title::after,
  .services-landing .sup-title::before,
  .services-landing::after,
  .detail-blog-three-send-comment::before,
  .detail-blog-three-content .container::before,
  .detail-blog-three-content .container::after,
  .detail-blog-three-content::after,
  .detail-blog-three-last-articles .heading::before,
  .contact-us .customers-comments::after,
  .contact-us-socials-two .title::after,
  .contact-us-socials-two::before,
  .contact-us-socials-two::after,
  .contact-us .contact-me::after,
  .contact-us .what-contact::after,
  .contact-us-landing .container::before,
  .contact-us-landing .container::after,
  .blog-articles-week::before,
  .blog-articles-week::after,
  .blog-articles-month::before,
  .blog-articles-month::after,
  .blog-archive-three::after,
  .about-us-three .brands::before,
  .about-us-three .customers-comments-three .container::before,
  .about-us-three .customers-comments-three .container::after,
  .about-us-three .customers-comments-three::after,
  .about-us-three-activity-item:nth-child(3) .container::before,
  .about-us-three-activity-item:nth-child(3) .container::after,
  .about-us-three-activity-item:nth-child(3)::before,
  .about-us-three-activity-item:nth-child(3)::after,
  .about-us-three-activity-item:nth-child(2)::before,
  .about-us-three-activity .section-heading-four::after,
  .about-us-three-target .container::before,
  .about-us-three-target .container::after,
  .about-us-three-target::after,
  .about-us-three-landing .col-lg-5::before,
  .about-us-three-landing .sup-title::after,
  .about-us-three-landing .container::before,
  .about-us-three-landing .container::after,
  .about-us-three-landing::before,
  .about-us-three-landing::after,
  .last-articles .heading h2::before,
  .last-articles .heading h2::after,
  .last-articles .container::before,
  .last-articles .container::after,
  .last-articles::before,
  .customers-comments-three::before,
  .banner-home-three .container::before,
  .banner-home-three .container::after,
  .banner-home-three::before,
  .courses-three .swiper::after,
  .courses-three .section-heading::before,
  .courses-three .container::after,
  .courses-three .container::before,
  .courses-three::before,
  .courses-three::after,
  .what-me-three-item::after,
  .what-me-three-item::before,
  .what-me-three-items::before,
  .what-me-three .container::before,
  .what-me-three::before,
  .what-me-three::after,
  .landing-three .title::before,
  .landing-three .sup-title::after,
  .landing-three .sup-title::before,
  .landing-three::after,
  .footer-five-socials-info::before,
  .footer-five .container::before,
  .footer-five .container::after,
  .top-header-three-categories .megamenu-content-item,
  .top-header-three-categories .megamenu-tabs li::after,
  .top-header-three-categories .megamenu::before,
  .top-header-three-categories .megamenu,
  .video-box::before,
  .best-course-graphic .row::before,
  .best-course-graphic .container::before,
  .best-course-graphic .container::after,
  .best-course-graphic::after,
  .best-course-graphic::before,
  .path-learning-item .btn::before,
  .path-learning-item p::before,
  .path-learning-item .info .image::before,
  .panel-user-our-goal .title::after,
  .detail-blog-rate-wrapper .stars input,
  .detail-blog-rate::after,
  .detail-blog-info::after,
  .blog-archive .filter ul li::before,
  .blog-archive .filter::before,
  .blog-archive .shape-2,
  .blog-archive .shape-1,
  .blog-archive::before,
  .blog-archive::after,
  .blog-path-learn .container::before,
  .blog-path-learn::after,
  .blog .shape-before,
  .blog .shape-after,
  .detail-product-related-wrapper::before,
  .detail-product-seasons::after,
  .detail-product-introduction-success ul li::before,
  .detail-product-introduction-danger ul li::before,
  .detail-product-introduction-success .title::before,
  .detail-product-introduction-danger .title::before,
  .detail-product-introduction-success .title::after,
  .detail-product-introduction-danger .title::after,
  .detail-product-titr::after,
  .detail-product-titr::before,
  .detail-product-description-title::after,
  .detail-product-description::after,
  .detail-product-info-student .rate .stars input,
  .detail-product-info::before,
  .detail-product::after,
  .category-page-products::after,
  .category-page-content::after,
  .category-page-learning-path::after,
  .category-page-learning-path::before,
  .category-page-learning-path .container::after,
  .contact-us-my-address-wrapper .map::after,
  .contact-us-my-address-wrapper::after,
  .contact-us-my-address-wrapper::before,
  .contact-us-form::after,
  .contact-us-form .heading::after,
  .contact-us-form .heading::before,
  .contact-us-my-address .heading::after,
  .contact-us-my-address .heading::before,
  .contact-us-socials .title::after,
  .contact-us-how-to::before,
  .contact-us-how-to::after,
  .about-us-story::after,
  .about-us-members-box-item p::before,
  .about-us-members-box::after,
  .about-us-our-goal::before,
  .about-us-our-goal .title::after,
  .about-us-members .title::after,
  .about-us-story .title::after,
  .about-us-whay-me .title .fa::after,
  .about-us::after,
  .modal-auth .modal-body .image,
  .modal-auth .modal-body .content .or::after,
  .modal-auth .modal-body .content .or::before,
  .modal-auth .modal-body .content h4::after,
  .modal-auth .modal-content::after,
  .podcasts-item p::before,
  .podcasts-wrapper::before,
  .podcasts::before,
  .comments-students-two-item .position::after,
  .comments-students-two-item .image::after,
  .comments-students-two-item .sub-title::after,
  .comments-students-two-item .sub-title::before,
  .learning-paths-two-wrapper::after,
  .footer-two::after,
  .news-world-item-2 .overlay::after,
  .news-world-item .image::before,
  .news-world::before,
  .dedicated-podcasts-wrapper .detail h5::after,
  .dedicated-podcasts::before,
  .comments-students-item .student::after,
  .comments-students .container::after,
  .comments-students .container::before,
  .comments-students::after,
  .learning-paths::before,
  .learning-paths::after,
  .top-seller::after,
  .landing-bg h3::before,
  .landing-bg h3::after,
  .landing::before,
  .landing::after,
  .nav-responsive-content ul li.has-child>a::after,
  .top-header-nav>ul li a::after,
  .top-header-nav>ul li a:hover::after,
  .top-header-nav>ul li a:focus::after,
  .top-header-nav>ul li a:active::after,
  .top-header-nav .menu .megamenu-content-item,
  .top-header-nav .menu .megamenu-tabs li::after,
  .top-header-nav .menu .megamenu::before,
  .top-header-nav .menu .megamenu,
  .question-item .content .btn,
  .question-item .content p::before,
  .question-items li ul::before,
  .about-us-video .video:not(.showing)::after,
  .about-us-video::before,
  .custom-switch-label::after,
  .custom-switch-label::before,
  .custom-switch-input,
  .form-check-label::after,
  .form-check-label::before,
  .form-check-input,
  .section-heading-three::after,
  .section-heading-three::before,
  .equalizer audio,
  .learning-paths-item p::before,
  .learning-paths-item .info .image::after,
  .section-heading-tow::before,
  .section-heading-tow::after,
  .section-heading div::after,
  .section-heading::before {
    position: absolute;
  }

  .top-header-three-categories .megamenu-content-item .right .links,
  .top-header-nav .menu .megamenu-content-item .right .links {
    display: flex;
  }

  .top-header-three-categories .megamenu-content-item .right .links a,
  .panel-user-sidebar-nav li a,
  .modal-auth .modal-body .content .socials li a,
  .footer-socials ul li a,
  .nav-responsive-content ul li a,
  .top-header-nav>ul li a,
  .top-header-nav>ul li a:hover,
  .top-header-nav>ul li a:focus,
  .top-header-nav>ul li a:active,
  .top-header-nav .menu .megamenu-content-item .right .links a,
  .custom-switch-label,
  .product-image img {
    display: block;
  }

  .top-header-three-categories .megamenu-content-item .right .links,
  .top-header-nav .menu .megamenu-content-item .right .links {
    flex-direction: column;
  }

  .detail-product-introduction-success .title::after,
  .detail-product-introduction-danger .title::after,
  .category-page-sidebar .range-price .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle,
  .contact-us-my-address-wrapper::before,
  .about-us-story::after,
  .about-us-our-goal::before,
  .footer-socials ul li a,
  .top-header-cart span,
  .about-us-video .play i,
  .custom-switch-label::before,
  .learning-paths-item .info .image::after,
  .product .content .category::before {
    border-radius: 50%;
  }

  .contact-us-form .heading::after,
  .contact-us-my-address .heading::after,
  .comments-students-two-item .position::after,
  .comments-students-item .student::after,
  .question-item .content p::before,
  .question-items li ul::before,
  .form-check-label::after,
  .learning-paths-item p::before,
  .product .price-add-to-cart .btn,
  .section-heading-tow::after,
  .section-heading::before {
    border-radius: 4px;
  }

  .panel-user-sidebar-content,
  .detail-blog-like-share-wrapper .address,
  .detail-blog-rate-wrapper,
  .detail-blog-like-share-wrapper,
  .detail-product-info .teacher img,
  .category-page-sidebar .ads img,
  .category-page-sidebar .search .form-control,
  .category-page-sidebar .filters,
  .category-page-sidebar .search,
  .category-page-sidebar .category-list,
  .category-page-sidebar .range-price,
  .about-us-members-box-item .info-member img,
  .modal-auth .modal-body .content form .form-group .form-control,
  .modal-auth .modal-body .close,
  .landing-bg form .btn,
  .question-item .info-author img {
    border-radius: 12px;
  }

  .panel-user-sidebar-nav li a,
  .blog-archive .filter ul li,
  .detail-product-seasons .item .heading,
  .detail-product-seasons .item,
  .detail-product-introduction-success .title,
  .detail-product-introduction-danger .title,
  .detail-product-info .status,
  .detail-product-info .price,
  .detail-product-info .info-course li,
  .contact-us-form form .form-group .form-control,
  .contact-us-form form .form-group.textarea,
  .contact-us-socials ul li a,
  .contact-us-socials ul li a:hover,
  .contact-us-socials ul li a:focus,
  .contact-us-socials ul li a:active,
  .about-us-whay-me ul li,
  .footer-three-contact,
  .question-item .content,
  .article figure img,
  .product-two {
    border-radius: 16px;
  }

  .panel-user-total-info-item,
  .detail-blog-content img,
  .podcasts-wrapper::before,
  .learning-paths-two-wrapper::after,
  .learn-path,
  .product .content,
  .product-image img {
    border-radius: 20px;
  }

  .detail-product-related-wrapper::before,
  .detail-product-info-wrapper,
  .contact-us-my-address-wrapper::after,
  .contact-us-how-to-wrapper,
  .about-us-story,
  .about-us-our-goal,
  .about-us-video .video:not(.showing)::after,
  .about-us-video .video,
  .about-us-video .video video {
    border-radius: 40px;
  }

  a,
  a:hover,
  a:focus,
  a:active,
  *::after,
  button,
  .btn,
  input,
  .form-control {
    transition: all 0.3s ease-in-out;
  }

  @font-face {
    font-family: "Yekan Bakh";
    font-style: normal;
    font-weight: 100;
    src: url("./../fonts/yekanbakh/en/YekanBakh-thin.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh";
    font-style: normal;
    font-weight: 300;
    src: url("./../fonts/yekanbakh/en/YekanBakh-Light.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh";
    font-style: normal;
    font-weight: normal;
    src: url("./../fonts/yekanbakh/en/YekanBakh-Regular.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh";
    font-style: normal;
    font-weight: 600;
    src: url("./../fonts/yekanbakh/en/YekanBakh-SemiBold.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh";
    font-style: normal;
    font-weight: bold;
    src: url("./../fonts/yekanbakh/en/YekanBakh-Bold.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh";
    font-style: normal;
    font-weight: 800;
    src: url("./../fonts/yekanbakh/en/YekanBakh-ExtraBold.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh";
    font-style: normal;
    font-weight: 900;
    src: url("./../fonts/yekanbakh/en/YekanBakh-Black.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh";
    font-style: normal;
    font-weight: 950;
    src: url("./../fonts/yekanbakh/en/YekanBakh-ExtraBlack.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: 100;
    src: url("./../fonts/yekanbakh/fa/YekanBakhFaNum-Thin.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: 300;
    src: url("./../fonts/yekanbakh/fa/YekanBakhFaNum-Light.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: normal;
    src: url("./../fonts/yekanbakh/fa/YekanBakhFaNum-Regular.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: 600;
    src: url("./../fonts/yekanbakh/fa/YekanBakhFaNum-SemiBold.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: bold;
    src: url("./../fonts/yekanbakh/fa/YekanBakhFaNum-Bold.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: 800;
    src: url("./../fonts/yekanbakh/fa/YekanBakhFaNum-ExtraBold.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: 900;
    src: url("./../fonts/yekanbakh/fa/YekanBakhFaNum-Black.woff") format("woff");
  }

  @font-face {
    font-family: "Yekan Bakh FaNum";
    font-style: normal;
    font-weight: 950;
    src: url("./../fonts/yekanbakh/fa/YekanBakhFaNum-ExtraBlack.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: 10;
    src: url("./../fonts/dana/Dana-Hairline.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: 100;
    src: url("./../fonts/dana/Dana-Thin.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: 200;
    src: url("./../fonts/dana/Dana-UltraLight.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: 300;
    src: url("./../fonts/dana/Dana-Light.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: 500;
    src: url("./../fonts/dana/Dana-Medium.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: 600;
    src: url("./../fonts/dana/Dana-DemiBold.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: 800;
    src: url("./../fonts/dana/Dana-ExtraBold.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: 900;
    src: url("./../fonts/dana/Dana-Black.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: bold;
    src: url("./../fonts/dana/Dana-Bold.woff") format("woff");
  }

  @font-face {
    font-family: "dana";
    font-style: normal;
    font-weight: normal;
    src: url("./../fonts/dana/Dana-Regular.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: 100;
    src: url("./../fonts/kalameh/KalamehWebFaNum-Thin.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: 200;
    src: url("./../fonts/kalameh/KalamehWebFaNum-ExtraLight.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: 300;
    src: url("./../fonts/kalameh/KalamehWebFaNum-Light.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: 500;
    src: url("./../fonts/kalameh/KalamehWebFaNum-Medium.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: 600;
    src: url("./../fonts/kalameh/KalamehWebFaNum-SemiBold.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: 800;
    src: url("./../fonts/kalameh/KalamehWebFaNum-ExtraBold.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: 900;
    src: url("./../fonts/kalameh/KalamehWebFaNum-Black.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: bold;
    src: url("./../fonts/kalameh/KalamehWebFaNum-Bold.woff") format("woff");
  }

  @font-face {
    font-family: "Kalameh";
    font-style: normal;
    font-weight: normal;
    src: url("./../fonts/kalameh/KalamehWebFaNum-Regular.woff") format("woff");
  }

  @font-face {
    font-family: "aviny";
    font-style: normal;
    font-weight: normal;
    src: url("./../fonts/aviny/aviny-web.woff") format("woff");
  }

  @font-face {
    font-display: swap;
    font-family: "IRANSansWeb";
    font-style: normal;
    font-weight: 900;
    src: url("./../fonts/iransans/IRANSansWeb_Black.eot");
    src: url("./../fonts/iransans/IRANSansWeb_Black.eot?#iefix") format("embedded-opentype"), url("./../fonts/iransans/IRANSansWeb_Black.woff2") format("woff2"), url("./../fonts/iransans/IRANSansWeb_Black.woff") format("woff"), url("./../fonts/iransans/IRANSansWeb_Black.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IRANSansWeb";
    font-style: normal;
    font-weight: bold;
    src: url("./../fonts/iransans/IRANSansWeb_Bold.eot");
    src: url("./../fonts/iransans/IRANSansWeb_Bold.eot?#iefix") format("embedded-opentype"), url("./../fonts/iransans/IRANSansWeb_Bold.woff2") format("woff2"), url("./../fonts/iransans/IRANSansWeb_Bold.woff") format("woff"), url("./../fonts/iransans/IRANSansWeb_Bold.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IRANSansWeb";
    font-style: normal;
    font-weight: 500;
    src: url("./../fonts/iransans/IRANSansWeb_Medium.eot");
    src: url("./../fonts/iransans/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"), url("./../fonts/iransans/IRANSansWeb_Medium.woff2") format("woff2"), url("./../fonts/iransans/IRANSansWeb_Medium.woff") format("woff"), url("./../fonts/iransans/IRANSansWeb_Medium.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IRANSansWeb";
    font-style: normal;
    font-weight: 300;
    src: url("./../fonts/iransans/IRANSansWeb_Light.eot");
    src: url("./../fonts/iransans/IRANSansWeb_Light.eot?#iefix") format("embedded-opentype"), url("./../fonts/iransans/IRANSansWeb_Light.woff2") format("woff2"), url("./../fonts/iransans/IRANSansWeb_Light.woff") format("woff"), url("./../fonts/iransans/IRANSansWeb_Light.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IRANSansWeb";
    font-style: normal;
    font-weight: 200;
    src: url("./../fonts/iransans/IRANSansWeb_UltraLight.eot");
    src: url("./../fonts/iransans/IRANSansWeb_UltraLight.eot?#iefix") format("embedded-opentype"), url("./../fonts/iransans/IRANSansWeb_UltraLight.woff2") format("woff2"), url("./../fonts/iransans/IRANSansWeb_UltraLight.woff") format("woff"), url("./../fonts/iransans/IRANSansWeb_UltraLight.ttf") format("truetype");
  }

  @font-face {
    font-display: swap;
    font-family: "IRANSansWeb";
    font-style: normal;
    font-weight: normal;
    src: url("./../fonts/iransans/IRANSansWeb.eot");
    src: url("./../fonts/iransans/IRANSansWeb.eot?#iefix") format("embedded-opentype"), url("./../fonts/iransans/IRANSansWeb.woff2") format("woff2"), url("./../fonts/iransans/IRANSansWeb.woff") format("woff"), url("./../fonts/iransans/IRANSansWeb.ttf") format("truetype");
  }

  @font-face {
    font-family: "Insta Story Signature";
    src: url("./../fonts/Instastorysignature/InstaStorySignature.eot");
    src: url("./../fonts/Instastorysignature/InstaStorySignature.eot?#iefix") format("embedded-opentype"), url("./../fonts/Instastorysignature/InstaStorySignature.woff2") format("woff2"), url("./../fonts/Instastorysignature/InstaStorySignature.woff") format("woff"), url("./../fonts/Instastorysignature/InstaStorySignature.ttf") format("truetype"), url("./../fonts/Instastorysignature/InstaStorySignature.svg#InstaStorySignature") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Morabba";
    font-style: normal;
    font-weight: 200;
    src: url("./../fonts/morabba/Morabba-UltraLight.woff") format("woff");
  }

  @font-face {
    font-family: "Morabba";
    font-style: normal;
    font-weight: 900;
    src: url("./../fonts/morabba/Morabba-Heavy.woff") format("woff");
  }

  @font-face {
    font-family: "Morabba";
    font-style: normal;
    font-weight: bold;
    src: url("./../fonts/morabba/Morabba-Bold.woff") format("woff");
  }

  @font-face {
    font-family: "Morabba";
    font-style: normal;
    font-weight: normal;
    src: url("./../fonts/morabba/Morabba-Regular.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: 10;
    src: url("./../fonts/dana-fa/DanaFaNum-Hairline.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: 100;
    src: url("./../fonts/dana-fa/DanaFaNum-Thin.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: 200;
    src: url("./../fonts/dana-fa/DanaFaNum-UltraLight.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: 300;
    src: url("./../fonts/dana-fa/DanaFaNum-Light.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: 500;
    src: url("./../fonts/dana-fa/DanaFaNum-Medium.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: 600;
    src: url("./../fonts/dana-fa/DanaFaNum-DemiBold.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: 800;
    src: url("./../fonts/dana-fa/DanaFaNum-ExtraBold.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: 900;
    src: url("./../fonts/dana-fa/DanaFaNum-Black.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: bold;
    src: url("./../fonts/dana-fa/DanaFaNum-Bold.woff") format("woff");
  }

  @font-face {
    font-family: "dana-fa";
    font-style: normal;
    font-weight: normal;
    src: url("./../fonts/dana-fa/DanaFaNum-Regular.woff") format("woff");
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type=number] {
    -moz-appearance: textfield;
  }

  * {
    box-sizing: border-box;
    font-family: inherit;
    color: inherit;
    list-style: none;
  }

  ul,
  ol {
    padding: 0;
    margin: 0;
  }

  img,
  video,
  svg,
  i {
    vertical-align: middle;
    display: inline-block;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  a,
  a:hover,
  a:focus,
  a:active {
    text-decoration: none;
  }

  a:hover,
  a:focus,
  a:active {
    color: inherit;
  }

  button,
  select {
    cursor: pointer;
  }

  i {
    color: inherit;
  }

  button,
  input,
  select {
    border: none;
    outline: none;
    background-color: transparent;
  }

  video {
    -o-object-fit: cover;
    object-fit: cover;
    max-width: 100%;
    height: auto;
  }

  a,
  a:hover,
  a:focus,
  a:active {
    color: inherit;
  }

  .app {
    overflow: hidden;
  }

  body {
    font-family: "IRANSansWeb";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
    direction: rtl;
    background: linear-gradient(0deg, rgba(243, 245, 252, 0.4), rgba(243, 245, 252, 0.4)), #ffffff;
    color: rgba(73, 73, 73, 0.6);
  }

  @font-face {
    font-family: "icomoon";
    src: url("./../fonts/icon/icomoon.eot?wojdpl");
    src: url("./../fonts/icon/icomoon.eot?wojdpl#iefix") format("embedded-opentype"), url("./../fonts/icon/icomoon.ttf?wojdpl") format("truetype"), url("./../fonts/icon/icomoon.woff?wojdpl") format("woff"), url("./../fonts/icon/icomoon.svg?wojdpl#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

  [class^=icon-],
  [class*=" icon-"] {
    font-family: "icomoon" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle;
  }

  .icon-bag:before {
    content: "\e97c";
  }

  .icon-calendar-3:before {
    content: "\e97d";
  }

  .icon-clipboard-document:before {
    content: "\e97e";
  }

  .icon-clock-5:before {
    content: "\e97f";
  }

  .icon-home-3:before {
    content: "\e980";
  }

  .icon-lock-4:before {
    content: "\e981";
  }

  .icon-login:before {
    content: "\e982";
  }

  .icon-play-circle:before {
    content: "\e983";
  }

  .icon-reply-2:before {
    content: "\e984";
  }

  .icon-shield-done:before {
    content: "\e985";
  }

  .icon-users-3-fill:before {
    content: "\e986";
  }

  .icon-users-4:before {
    content: "\e987";
  }

  .icon-video-3:before {
    content: "\e988";
  }

  .icon-warning-square:before {
    content: "\e989";
  }

  .icon-telegram-3:before {
    content: "\e97b";
  }

  .icon-arrow-left-circle:before {
    content: "\e972";
  }

  .icon-calendar-2:before {
    content: "\e973";
  }

  .icon-toman-2:before {
    content: "\e974";
  }

  .icon-users-3:before {
    content: "\e975";
  }

  .icon-clock-4:before {
    content: "\e976";
  }

  .icon-search-3:before {
    content: "\e977";
  }

  .icon-angle-left-3:before {
    content: "\e962";
  }

  .icon-angle-left-4:before {
    content: "\e97a";
  }

  .icon-chat-fill:before {
    content: "\e963";
  }

  .icon-clock-3-fill:before {
    content: "\e964";
  }

  .icon-download:before {
    content: "\e965";
  }

  .icon-eye-2:before {
    content: "\e966";
  }

  .icon-grid-fill:before {
    content: "\e967";
  }

  .icon-heart-2-fill:before {
    content: "\e968";
  }

  .icon-lock-3:before {
    content: "\e969";
  }

  .icon-notification:before {
    content: "\e96a";
  }

  .icon-ques-2:before {
    content: "\e96b";
  }

  .icon-ques-square:before {
    content: "\e96c";
  }

  .icon-reply:before {
    content: "\e96d";
  }

  .icon-telegram-2:before {
    content: "\e96e";
  }

  .icon-users-2:before {
    content: "\e96f";
  }

  .icon-verify:before {
    content: "\e970";
  }

  .icon-arrow-left-2:before {
    content: "\e978";
  }

  .icon-email-3:before {
    content: "\e95c";
  }

  .icon-email-4:before {
    content: "\e95d";
  }

  .icon-facebook:before {
    content: "\e95e";
  }

  .icon-phone-6:before {
    content: "\e95f";
  }

  .icon-telegram:before {
    content: "\e960";
  }

  .icon-twitter:before {
    content: "\e961";
  }

  .icon-watch:before {
    content: "\e95a";
  }

  .icon-bookmark-2:before {
    content: "\e958";
  }

  .icon-folder:before {
    content: "\e959";
  }

  .icon-student-2:before {
    content: "\e957";
  }

  .icon-clock-3:before {
    content: "\e955";
  }

  .icon-heart-2:before {
    content: "\e956";
  }

  .icon-user-2:before {
    content: "\e979";
  }

  .icon-edit-2:before {
    content: "\e952";
  }

  .icon-phone-5:before {
    content: "\e953";
  }

  .icon-wallet-2:before {
    content: "\e954";
  }

  .icon-document:before {
    content: "\e951";
  }

  .icon-chat:before {
    content: "\e94b";
  }

  .icon-close-2:before {
    content: "\e94c";
  }

  .icon-home-2:before {
    content: "\e94d";
  }

  .icon-link:before {
    content: "\e94e";
  }

  .icon-microphone:before {
    content: "\e94f";
  }

  .icon-play-3:before {
    content: "\e950";
  }

  .icon-microphone-2:before {
    content: "\e95b";
  }

  .icon-chart:before {
    content: "\e948";
  }

  .icon-grid-plus:before {
    content: "\e949";
  }

  .icon-student:before {
    content: "\e94a";
  }

  .icon-menu:before {
    content: "\e947";
  }

  .icon-warning:before {
    content: "\e971";
  }

  .icon-angle-down-2:before {
    content: "\e946";
  }

  .icon-search-2:before {
    content: "\e945";
  }

  .icon-phone-4:before {
    content: "\e944";
  }

  .icon-pintrest:before {
    content: "\e943";
  }

  .icon-map:before {
    content: "\e942";
  }

  .icon-angle-right1:before {
    content: "\e940";
  }

  .icon-angle-left1:before {
    content: "\e941";
  }

  .icon-phone1:before {
    content: "\e93f";
  }

  .icon-plus:before {
    content: "\e93e";
  }

  .icon-check-fill:before {
    content: "\e932";
  }

  .icon-user-fill:before {
    content: "\e933";
  }

  .icon-alarm:before {
    content: "\e934";
  }

  .icon-comments:before {
    content: "\e935";
  }

  .icon-help:before {
    content: "\e936";
  }

  .icon-home:before {
    content: "\e937";
  }

  .icon-money:before {
    content: "\e938";
  }

  .icon-ques:before {
    content: "\e939";
  }

  .icon-send:before {
    content: "\e93a";
  }

  .icon-users:before {
    content: "\e93b";
  }

  .icon-video1:before {
    content: "\e93c";
  }

  .icon-calendar:before {
    content: "\e930";
  }

  .icon-comments-dots:before {
    content: "\e931";
  }

  .icon-log-out:before {
    content: "\e93d";
  }

  .icon-lock1:before {
    content: "\e92e";
  }

  .icon-video:before {
    content: "\e92f";
  }

  .icon-angle-down:before {
    content: "\e92b";
  }

  .icon-filter:before {
    content: "\e92c";
  }

  .icon-play-2:before {
    content: "\e92a";
  }

  .icon-email-2:before {
    content: "\e929";
  }

  .icon-info:before {
    content: "\e928";
  }

  .icon-message:before {
    content: "\e927";
  }

  .icon-angle-left-2:before {
    content: "\e921";
  }

  .icon-close:before {
    content: "\e922";
  }

  .icon-github:before {
    content: "\e923";
  }

  .icon-linkedin:before {
    content: "\e924";
  }

  .icon-lock:before {
    content: "\e925";
  }

  .icon-yahoo:before {
    content: "\e926";
  }

  .icon-global:before {
    content: "\e91f";
  }

  .icon-bookmark:before {
    content: "\e91e";
  }

  .icon-angle-left:before {
    content: "\e91c";
  }

  .icon-angle-right:before {
    content: "\e91d";
  }

  .icon-cart:before {
    content: "\e920";
  }

  .icon-clock-2:before {
    content: "\e91a";
  }

  .icon-heart:before {
    content: "\e91b";
  }

  .icon-angle-dubble-left-2:before {
    content: "\e919";
  }

  .icon-toman:before {
    content: "\e917";
  }

  .icon-angle-dubble-down:before {
    content: "\e900";
  }

  .icon-angle-dubble-left:before {
    content: "\e901";
  }

  .icon-arrow-left:before {
    content: "\e902";
  }

  .icon-arrow-right:before {
    content: "\e903";
  }

  .icon-cart-bag:before {
    content: "\e904";
  }

  .icon-clock:before {
    content: "\e905";
  }

  .icon-dribble:before {
    content: "\e906";
  }

  .icon-edit:before {
    content: "\e907";
  }

  .icon-email:before {
    content: "\e908";
  }

  .icon-eye:before {
    content: "\e909";
  }

  .icon-grid:before {
    content: "\e90a";
  }

  .icon-instagram:before {
    content: "\e90b";
  }

  .icon-location:before {
    content: "\e90c";
  }

  .icon-phone:before {
    content: "\e90d";
  }

  .icon-phone-2:before {
    content: "\e90e";
  }

  .icon-pinterest:before {
    content: "\e90f";
  }

  .icon-play:before {
    content: "\e910";
  }

  .icon-search:before {
    content: "\e911";
  }

  .icon-star:before {
    content: "\e912";
  }

  .icon-user:before {
    content: "\e913";
  }

  .icon-wallet:before {
    content: "\e914";
  }

  .icon-whatsapp:before {
    content: "\e915";
  }

  .icon-youtube:before {
    content: "\e916";
  }

  .icon-check:before {
    content: "\e92d";
  }

  .icon-pause:before {
    content: "\e918";
  }

  .bg-primary {
    background-color: #869beb !important;
  }

  .bg-primary-2 {
    background-color: #8a9add !important;
  }

  .bg-danger {
    background-color: #e4534a !important;
  }

  .bg-warning {
    background-color: #fdb600 !important;
  }

  .bg-success {
    background-color: #27ad7b !important;
  }

  .bg-origin {
    background-color: #e7662a;
  }

  .bg-blue {
    background-color: #1081e8;
  }

  .text-primary {
    color: #869beb !important;
  }

  .text-primary-2 {
    color: #8a9add !important;
  }

  .text-danger {
    color: #e4534a !important;
  }

  .text-warning {
    color: #fdb600 !important;
  }

  .text-success {
    color: #27ad7b !important;
  }

  .text-origin {
    color: #e7662a !important;
  }

  .text-blue {
    color: #1081e8 !important;
  }

  .border-primary {
    border-color: #8a9add !important;
  }

  .border-success {
    border-color: #27ad7b !important;
  }

  .border-origin {
    border-color: #e7662a !important;
  }

  .border-blue {
    border-color: #1081e8 !important;
  }

  .btn {
    font-size: 11px;
    font-weight: 500;
    border-radius: 10px;
  }

  .btn,
  .btn:focus,
  .btn:hover,
  .btn:active,
  .btn:active:focus {
    box-shadow: none;
    outline: none;
    border: none;
  }

  .btn-primary {
    background-color: #869beb;
  }

  .btn-primary:focus,
  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary:active:focus {
    background-color: #5a77e4;
  }

  .btn-primary-2 {
    background-color: #8a9add;
    color: #fff;
  }

  .btn-primary-2:focus,
  .btn-primary-2:hover,
  .btn-primary-2:active,
  .btn-primary-2:active:focus {
    background-color: #6278d2;
    color: #fff;
  }

  .btn-light {
    background-color: #fff;
  }

  .btn-light:focus,
  .btn-light:hover,
  .btn-light:active,
  .btn-light:active:focus {
    background-color: #e6e6e6;
  }

  .btn-success {
    background-color: #27ad7b;
  }

  .btn-success:focus,
  .btn-success:hover,
  .btn-success:active,
  .btn-success:active:focus {
    background-color: #1e835d;
  }

  .btn-origin {
    background-color: #e7662a;
    color: #fff;
  }

  .btn-origin:focus,
  .btn-origin:hover,
  .btn-origin:active,
  .btn-origin:active:focus {
    background-color: #c84f16;
    color: #fff;
  }

  .btn-blue {
    background-color: #1081e8;
    color: #fff;
  }

  .btn-blue:focus,
  .btn-blue:hover,
  .btn-blue:active,
  .btn-blue:active:focus {
    background-color: #0d66b8;
    color: #fff;
  }

  .btn-outline-primary {
    border: 1px solid #8a9add;
    color: #8a9add;
  }

  .btn-outline-primary:hover,
  .btn-outline-primary:focus,
  .btn-outline-primary:active,
  .btn-outline-primary:active:focus {
    border: 1px solid #8a9add;
    background-color: #8a9add;
    color: #fff;
  }

  .btn-outline-success {
    border: 1px solid #27ad7b;
    color: #27ad7b;
  }

  .btn-outline-success:hover,
  .btn-outline-success:focus,
  .btn-outline-success:active,
  .btn-outline-success:active:focus {
    border: 1px solid #27ad7b;
    background-color: #27ad7b;
    color: #fff;
  }

  .btn-outline-origin {
    border: 1px solid #e7662a;
    color: #e7662a;
  }

  .btn-outline-origin:hover,
  .btn-outline-origin:focus,
  .btn-outline-origin:active,
  .btn-outline-origin:active:focus {
    border: 1px solid #e7662a;
    background-color: #e7662a;
    color: #fff;
  }

  .btn-outline-blue {
    border: 1px solid #1081e8;
    color: #1081e8;
  }

  .btn-outline-blue:hover,
  .btn-outline-blue:focus,
  .btn-outline-blue:active,
  .btn-outline-blue:active:focus {
    border: 1px solid #1081e8;
    background-color: #1081e8;
    color: #fff;
  }

  .shadow-success {
    box-shadow: 0px 10px 20px 2px rgba(39, 173, 123, 0.2);
  }

  .shadow-origin {
    box-shadow: 0px 10px 20px 2px rgba(231, 102, 42, 0.2);
  }

  .shadow-blue {
    box-shadow: 0px 10px 20px 2px rgba(16, 129, 232, 0.2);
  }

  .shadow-primary {
    box-shadow: 0px 10px 20px rgba(134, 155, 235, 0.5);
  }

  .form-control {
    font-size: 12px;
    font-weight: 400;
    color: #787878;
    border-radius: 15px;
  }

  .form-control,
  .form-control:focus {
    box-shadow: none;
    border: none;
  }

  .section-heading {
    margin-bottom: 51px;
  }

  .section-heading::before {
    content: "";
    top: 0;
    right: 0;
    width: 33px;
    height: 5px;
    background-color: #8a9add;
  }

  .section-heading.success::before {
    background-color: #27ad7b;
  }

  .section-heading-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 29px;
    margin-bottom: 0;
  }

  .section-heading-title span {
    color: rgba(73, 73, 73, 0.8);
    font-size: 23px;
    line-height: 41px;
  }

  .section-heading-sub-title {
    color: rgba(73, 73, 73, 0.25);
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 0;
  }

  .section-heading-link {
    font-size: 12px;
    color: #5f5f5f;
    line-height: 16px;
    margin-top: 36px;
  }

  .section-heading-link i {
    margin-right: 7px;
  }

  .section-heading-link:hover {
    color: #8a9add;
  }

  .section-heading div::after {
    content: "";
    bottom: 12px;
    left: 100px;
    width: calc(100% - 300px);
    border-bottom: 1px dashed rgba(95, 95, 95, 0.5);
  }

  .section-heading-tow {
    margin: 0 0 54px;
    padding-bottom: 12px;
  }

  .section-heading-tow::after {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    background-color: #8a9add;
  }

  .section-heading-tow::before {
    content: "\e900";
    font-family: "icomoon";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 26px);
    font-size: 18px;
    color: rgba(138, 154, 221, 0.5);
  }

  .section-heading-tow .title {
    font-size: 25px;
    font-weight: 900;
    color: rgba(73, 73, 73, 0.8);
    line-height: 46px;
  }

  .section-heading-tow .title,
  .section-heading-tow .sub-title {
    font-family: "Kalameh";
  }

  .section-heading-tow .sub-title {
    font-size: 18px;
    color: rgba(73, 73, 73, 0.45);
    line-height: 33px;
    direction: ltr;
  }

  @media only screen and (max-width: 575px) {
    .section-heading-tow .title {
      font-size: 20px;
    }

    .section-heading-tow .sub-title {
      font-size: 14px;
    }
  }

  .section-heading-tow.success::after {
    background-color: #27ad7b;
  }

  .section-heading-tow.success::before {
    color: rgba(39, 173, 123, 0.5);
  }

  .product-image {
    margin: 0 17px -79px;
  }

  .product-image img {
    width: 100%;
    height: auto;
  }

  .product-image .overlay {
    bottom: 6px;
    right: 18px;
    width: calc(100% - 32px);
    border-radius: 10px;
    background-color: rgba(73, 73, 73, 0.5);
    padding: 10px 15px 7px;
  }

  .product-image .overlay li {
    font-size: 10px;
  }

  .product-image .overlay li i {
    margin-left: 3px;
    font-size: 11px;
  }

  .product .content {
    padding: 100px 10px 0;
    background-color: #fff;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.02);
  }

  .product .content h2 {
    color: rgba(73, 73, 73, 0.7);
    font-size: 16px;
    font-weight: 900;
    font-family: "Kalameh";
    line-height: 25px;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product .content h2 a:hover {
    color: #8a9add;
  }

  .product .content .category {
    color: rgba(73, 73, 73, 0.8);
    font-weight: 700;
    line-height: 14px;
    margin-bottom: 12px;
    display: inline-block;
    font-size: 11px;
  }

  .product .content .category::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-color: #869beb;
    width: 10px;
    height: 10px;
    margin-left: 3px;
    font-family: "Kalameh";
  }

  .product .content p {
    font-size: 12px;
    font-family: "Kalameh";
    text-align: justify;
    height: 60px;
    overflow: hidden;
  }

  .product .content .see-price {
    padding: 16px 0 22px;
    margin-top: 20px;
    border-top: 1px dashed rgba(73, 73, 73, 0.45);
  }

  .product .content .see-price .btn {
    padding: 7px 5px;
    border-radius: 9px;
    font-size: 10px;
    white-space: nowrap;
  }

  .product .content .price {
    color: rgba(73, 73, 73, 0.9);
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    font-family: "Kalameh";
  }

  .product .content .price i {
    font-size: 12px;
    color: rgba(73, 73, 73, 0.7);
    margin-right: 4px;
  }

  .product .content .time-heart {
    margin-left: 19px;
  }

  .product .content .time-heart-price {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(73, 73, 73, 0.3);
  }

  .product .content .time-heart li {
    font-size: 10px;
    border-radius: 7px;
    padding: 5px;
    line-height: 15px;
  }

  .product .content .time-heart li:not(:last-child) {
    margin-left: 4px;
  }

  .product .content .time-heart li i {
    font-size: 11px;
    margin-left: 2px;
  }

  .product .content .time-heart li.secondary {
    background-color: rgba(73, 73, 73, 0.15);
    color: #494949;
  }

  .product .content .time-heart li.danger {
    background-color: rgba(228, 37, 37, 0.15);
    color: #e42525;
  }

  .product-two {
    padding: 12px 17px 23px;
    background-color: #fff;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.02);
  }

  .product-two .product-image {
    margin: 0 0 22px;
  }

  .product-two .content {
    padding: 0;
    background-color: transparent;
    box-shadow: unset;
  }

  .product-two .see-session {
    width: -moz-fit-content;
    width: fit-content;
    font-size: 13px;
    line-height: 22px;
  }

  .product-two .see-session i {
    font-size: 10px;
    margin-right: 5px;
  }

  .product-two .see-session:hover {
    color: #494949 !important;
  }

  .product .price-add-to-cart {
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px dashed rgba(73, 73, 73, 0.3);
  }

  .product .price-add-to-cart .btn {
    box-shadow: 0px 9px 50px rgba(41, 41, 41, 0.15);
    font-size: 10px;
    padding: 5px 7px;
  }

  .product .price-add-to-cart .btn i {
    font-size: 11px;
    margin-right: 3px;
  }

  .product.success .content .category::before {
    background-color: #27ad7b;
  }

  .product.origin .content .category::before {
    background-color: #e7662a;
  }

  .product.blue .content .category::before {
    background-color: #1081e8;
  }

  .swiper {
    padding-bottom: 72px;
  }

  .swiper-rtl .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(50% - 60px);
    transform: translateX(-50%);
    padding-top: 5px;
  }

  .swiper-rtl .swiper-button-next::after,
  .swiper-rtl .swiper-button-prev::after {
    content: "\e902";
    font-family: "icomoon";
    font-size: 12px;
    color: rgba(134, 155, 235, 0.8);
  }

  .swiper-rtl .swiper-button-prev {
    left: calc(50% + 60px);
  }

  .swiper-rtl .swiper-button-prev::after {
    content: "\e903";
  }

  @media only screen and (max-width: 991px) {
    .swiper-rtl .swiper-button-next {
      left: calc(50% - 70px);
    }

    .swiper-rtl .swiper-button-prev {
      left: calc(50% + 70px);
    }
  }

  @media only screen and (max-width: 767px) {
    .swiper-rtl .swiper-button-next {
      left: calc(50% - 85px);
    }

    .swiper-rtl .swiper-button-prev {
      left: calc(50% + 85px);
    }
  }

  .swiper-pagination-bullet {
    width: 11px;
    height: 6px;
    background-color: rgba(73, 73, 73, 0.3);
    border-radius: 9px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 1.5px !important;
  }

  .swiper-pagination-bullet-active {
    background-color: #869beb;
    width: 25px;
  }

  .swiper-rtl.swiper-success .swiper-button-next::after,
  .swiper-rtl.swiper-success .swiper-button-prev::after {
    color: rgba(39, 173, 123, 0.8);
  }

  .swiper-success .swiper-pagination-bullet-active {
    background-color: #27ad7b;
  }

  .swiper-rtl.swiper-origin .swiper-button-next::after,
  .swiper-rtl.swiper-origin .swiper-button-prev::after {
    color: rgba(231, 102, 42, 0.8);
  }

  .swiper-origin .swiper-pagination-bullet-active {
    background-color: #e7662a;
  }

  .swiper-rtl.swiper-blue .swiper-button-next::after,
  .swiper-rtl.swiper-blue .swiper-button-prev::after {
    color: rgba(16, 129, 232, 0.8);
  }

  .swiper-blue .swiper-pagination-bullet-active {
    background-color: #1081e8;
  }

  .learning-paths-item {
    background-color: #fff;
    border-radius: 22px;
    padding: 25px 36px 16px;
  }

  .learning-paths-item .info {
    margin-bottom: 30px;
  }

  .learning-paths-item .info .image {
    margin-left: 12px;
    width: 76px;
    height: 76px;
    z-index: 2;
  }

  .learning-paths-item .info .image::after {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 9px);
    width: 77px;
    height: 48px;
    background-color: rgba(138, 154, 221, 0.32);
    filter: blur(26px);
    z-index: -1;
  }

  .learning-paths-item .info h2 {
    color: rgba(73, 73, 73, 0.7);
    font-size: 16px;
    font-weight: 900;
    line-height: 28px;
    font-family: "Kalameh";
    margin-bottom: 0;
    max-width: calc(100% - 88px);
    width: 100%;
  }

  .learning-paths-item .info h2 span {
    color: #8a9add;
  }

  .learning-paths-item p {
    color: rgba(73, 73, 73, 0.5);
    font-size: 13px;
    line-height: 27px;
    text-align: justify;
    height: 81px;
    overflow: hidden;
    margin-bottom: 18px;
    padding-right: 11px;
  }

  .learning-paths-item p::before {
    content: "";
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background-color: #8a9add;
  }

  .learning-paths-item ul {
    margin: 0 -3px;
    padding-bottom: 21px;
    margin-bottom: 11px;
    border-bottom: 1px dashed rgba(73, 73, 73, 0.45);
  }

  .learning-paths-item ul li {
    max-width: 33.333333%;
    width: 100%;
    margin: 0 3px;
    text-align: center;
    font-size: 13px;
    line-height: 22px;
    border-radius: 9px;
    padding: 6px 0;
    background-color: rgba(138, 154, 221, 0.05);
    border: 1px solid #8a9add;
    color: #8a9add;
  }

  .learning-paths-item ul li:nth-child(2) {
    background-color: #8a9add;
    color: #fff;
  }

  .learning-paths-item ul li i {
    margin-left: 3px;
    font-size: 14px;
  }

  .learning-paths-item .btn {
    max-width: -moz-fit-content;
    max-width: fit-content;
    width: 100%;
    font-size: 13px;
    line-height: 22px;
    padding: 11px 12px;
    line-height: 23px;
    color: #8a9add;
  }

  .learning-paths-item .btn i {
    font-size: 14px;
    margin-right: 5px;
  }

  .learning-paths-item.origin .info .image::after {
    background-color: rgba(228, 83, 74, 0.45);
  }

  .learning-paths-item.origin .info h2 span {
    color: #e4534a;
  }

  .learning-paths-item.origin p::before {
    background-color: #e4534a;
  }

  .learning-paths-item.origin ul li {
    background-color: rgba(228, 83, 74, 0.05);
    border-color: #e4534a;
    color: #e4534a;
  }

  .learning-paths-item.origin ul li:nth-child(2) {
    background-color: #e4534a;
    color: #fff;
  }

  .learning-paths-item.origin .btn {
    color: #e4534a;
  }

  .learning-paths-item.origin-2 .info .image::after {
    background-color: rgba(231, 102, 42, 0.45);
  }

  .learning-paths-item.origin-2 .info h2 span {
    color: #e7662a;
  }

  .learning-paths-item.origin-2 p::before {
    background-color: #e7662a;
  }

  .learning-paths-item.origin-2 ul li {
    background-color: rgba(231, 102, 42, 0.05);
    border-color: #e7662a;
    color: #e7662a;
  }

  .learning-paths-item.origin-2 ul li:nth-child(2) {
    background-color: #e7662a;
    color: #fff;
  }

  .learning-paths-item.origin-2 .btn {
    color: #e7662a;
  }

  .learning-paths-item.info .info .image::after {
    background-color: rgba(97, 218, 251, 0.45);
  }

  .learning-paths-item.info .info h2 span {
    color: #61dafb;
  }

  .learning-paths-item.info p::before {
    background-color: #61dafb;
  }

  .learning-paths-item.info ul li {
    background-color: rgba(97, 218, 251, 0.05);
    border-color: #61dafb;
    color: #61dafb;
  }

  .learning-paths-item.info ul li:nth-child(2) {
    background-color: #61dafb;
    color: #fff;
  }

  .learning-paths-item.info .btn {
    color: #61dafb;
  }

  .learning-paths-item.success .info .image::after {
    background-color: rgba(39, 173, 123, 0.45);
  }

  .learning-paths-item.success .info h2 span {
    color: #27ad7b;
  }

  .learning-paths-item.success p::before {
    background-color: #27ad7b;
  }

  .learning-paths-item.success ul li {
    background-color: rgba(39, 173, 123, 0.05);
    border-color: #27ad7b;
    color: #27ad7b;
  }

  .learning-paths-item.success ul li:nth-child(2) {
    background-color: #27ad7b;
    color: #fff;
  }

  .learning-paths-item.success .btn {
    color: #27ad7b;
  }

  .learning-paths-item.blue .info .image::after {
    background-color: rgba(16, 129, 232, 0.45);
  }

  .learning-paths-item.blue .info h2 span {
    color: #1081e8;
  }

  .learning-paths-item.blue p::before {
    background-color: #1081e8;
  }

  .learning-paths-item.blue ul li {
    background-color: rgba(16, 129, 232, 0.05);
    border-color: #1081e8;
    color: #1081e8;
  }

  .learning-paths-item.blue ul li:nth-child(2) {
    background-color: #1081e8;
    color: #fff;
  }

  .learning-paths-item.blue .btn {
    color: #1081e8;
  }

  @media only screen and (max-width: 1199px) {
    .learning-paths-item {
      padding: 20px 24px 16px;
    }
  }

  @media only screen and (max-width: 767px) {
    .learning-paths-item {
      padding: 20px 12px 16px;
    }

    .learning-paths-item .info h2 {
      font-size: 16px;
      line-height: 28px;
    }
  }

  @media only screen and (max-width: 575px) {
    .learning-paths-item ul li {
      font-size: 11px;
    }

    .learning-paths-item ul li i {
      font-size: 12px;
    }
  }

  .equalizer {
    max-width: 435px;
    width: 100%;
    height: 40px;
  }

  .equalizer audio {
    opacity: 0;
  }

  .equalizer .bar {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: flex-end;
  }

  .equalizer .bar span {
    border: 3px dashed;
    transition: all 0.3s linear;
  }

  .equalizer .bar span:not(:last-child) {
    margin-left: 4px;
  }

  .section-heading-three {
    padding-top: 32px;
    margin-bottom: 44px;
  }

  .section-heading-three::after,
  .section-heading-three::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .section-heading-three::after {
    content: "\e900";
    top: 0;
    font-family: "icomoon";
    font-size: 15px;
    color: #8a9add;
  }

  .section-heading-three::before {
    content: "";
    top: 24px;
    width: 26px;
    height: 4px;
    border-radius: 3px;
    background-color: #8a9add;
  }

  .section-heading-three-title {
    font-size: 18px;
    line-height: 32px;
    color: rgba(73, 73, 73, 0.8);
  }

  .section-heading-three-sub-title {
    color: rgba(73, 73, 73, 0.25);
    font-size: 12px;
    line-height: 20px;
  }

  .section-heading-three.origin::after {
    color: #e7662a;
  }

  .section-heading-three.origin::before {
    background-color: #e7662a;
  }

  .section-heading-three.blue::after {
    color: #1081e8;
  }

  .section-heading-three.blue::before {
    background-color: #1081e8;
  }

  .btn-see-more {
    max-width: -moz-fit-content;
    max-width: fit-content;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    padding: 6px 12px;
    border-radius: 8px;
  }

  .btn-see-more i {
    font-size: 10px;
  }

  .article .content {
    background-color: #494949;
    box-shadow: 0px 25px 50px 2px rgba(0, 0, 0, 0.04);
    border-radius: 20px 20px 14px 14px;
    max-width: calc(100% - 42px);
    margin-top: -70px;
    z-index: 2;
    transition: all 0.3s ease-in-out;
  }

  .article .content ul {
    padding: 10px 29px 7px;
  }

  .article .content ul li {
    font-size: 10px;
  }

  .article .content ul li i {
    font-size: 16px;
    margin-right: 6px;
  }

  .article .content .detail {
    border-radius: 14px;
    padding: 18px 18px 15px;
    margin: 0 -1px;
  }

  .article .content .detail h2 {
    font-size: 13px;
    font-weight: 500;
    color: #5f5f5f;
    line-height: 20px;
  }

  .article .content .detail h4 {
    color: rgba(95, 95, 95, 0.4);
    font-size: 9px;
    font-family: "Insta Story Signature";
    line-height: 12px;
  }

  .article .content .detail p {
    font-size: 12px;
    color: rgba(95, 95, 95, 0.8);
    line-height: 20px;
    text-align: justify;
    margin: 3px 0 16px;
  }

  .article .content .detail>a {
    max-width: -moz-fit-content;
    max-width: fit-content;
    font-size: 12px;
    color: #5f5f5f;
    line-height: 16px;
  }

  .article .content .detail>a i {
    font-size: 8px;
  }

  .article .content .detail a:hover {
    color: #8a9add;
  }

  @media only screen and (max-width: 575px) {
    .article figure img {
      border-radius: 16px 16px 0 0;
    }

    .article .content {
      margin: 0;
      max-width: 100%;
    }

    .article .content,
    .article .content .detail {
      border-radius: 0 0 16px 16px;
    }
  }

  .article:hover .content {
    background-color: #8a9add;
  }

  .article.origin:hover .content {
    background-color: #e7662a;
  }

  .article.blue:hover .content {
    background-color: #1081e8;
  }

  .hover-success:hover {
    color: #27ad7b !important;
  }

  .hover-origin:hover {
    color: #e7662a !important;
  }

  .hover-blue:hover {
    color: #1081e8 !important;
  }

  .font-kalameh {
    font-family: "Kalameh";
  }

  .form-check {
    padding-right: 27px;
    margin-bottom: 0;
  }

  .form-check-input {
    opacity: 0;
  }

  .form-check-label {
    cursor: pointer;
    color: rgba(73, 73, 73, 0.8);
    font-weight: 500;
    font-size: 12px;
  }

  .form-check-label::after,
  .form-check-label::before {
    width: 18px;
    height: 18px;
    top: 3px;
    right: 0;
    transition: all 0.3s ease-in-out;
  }

  .form-check-label::after {
    content: "";
    border: 1px solid #8a9add;
  }

  .form-check-label::before {
    content: "\e92d";
    font-family: "icomoon";
    font-size: 12px;
    color: #fff;
    z-index: 3;
    opacity: 0;
    text-align: center;
    line-height: 18px;
  }

  .form-check-input:checked+.form-check-label::after {
    background-color: #8a9add;
  }

  .form-check-input:checked+.form-check-label::before {
    opacity: 1;
  }

  .custom-switch-input {
    opacity: 0;
    top: 0;
  }

  .custom-switch-label {
    font-size: 10px;
    line-height: 15px;
    color: rgba(73, 73, 73, 0.7);
    font-weight: 500;
    cursor: pointer;
  }

  .custom-switch-label::after,
  .custom-switch-label::before {
    content: "";
    transition: all 0.3s ease-in-out;
  }

  .custom-switch-label::after {
    left: 0;
    top: 0;
    width: 33px;
    height: 16px;
    border-radius: 8px;
    background-color: #dcdcdc;
    box-shadow: 0px 10px 20px 2px rgba(138, 154, 221, 0.37);
  }

  .custom-switch-label::before {
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: #fff;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
    z-index: 3;
  }

  .custom-switch-input:checked+.custom-switch-label::after {
    background-color: #8a9add;
  }

  .custom-switch-input:checked+.custom-switch-label::before {
    left: 17px;
  }

  .pagination {
    gap: 12px;
  }

  .pagination .page-link {
    min-width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    padding: 0 5px;
    font-size: 12px;
    font-weight: bold;
    color: #494949;
    background-color: #fff;
    border: none;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
  }

  .pagination .page-link:hover,
  .pagination .page-link.active {
    background-color: #8a9add;
    box-shadow: none;
    color: #fff;
  }

  .pagination .page-link.prev,
  .pagination .page-link.next {
    font-size: 16px;
    color: #8a9add;
    background-color: transparent;
    box-shadow: none;
  }

  .about-us-video {
    max-width: 788px;
  }

  .about-us-video::before {
    content: "";
    z-index: -1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(138, 154, 221, 0.5);
    filter: blur(50px);
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 45px;
    max-width: 50%;
    width: 100%;
    height: 40px;
  }

  .about-us-video .video:not(.showing)::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #121212 0%, rgba(18, 18, 18, 0.231759) 30.53%, rgba(18, 18, 18, 0) 91.67%, rgba(18, 18, 18, 0) 100%);
  }

  .about-us-video video {
    width: 100%;
  }

  .about-us-video .title {
    top: 32px;
    right: 24px;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    z-index: 3;
    max-width: calc(100% - 120px);
    width: 100%;
  }

  .about-us-video .title i {
    margin-left: 5px;
    font-size: 18px;
  }

  .about-us-video .time {
    top: 31px;
    left: 48px;
    width: 83px;
    height: 29px;
    line-height: 29px;
    text-align: center;
    background-color: rgba(21, 21, 21, 0.51);
    border-radius: 5px;
    z-index: 4;
  }

  .about-us-video .play {
    bottom: -45px;
    left: 50%;
    width: 90px;
    height: 90px;
    background-color: rgba(138, 154, 221, 0.5);
    z-index: 4;
    transform: translateX(-50%);
  }

  .about-us-video .play i {
    width: 65px;
    height: 65px;
    background-color: #8a9add;
    line-height: 65px;
    text-align: center;
    font-size: 32px;
    text-shadow: 0px 4px 13px rgba(0, 0, 0, 0.1);
    color: #fff;
  }

  @media only screen and (max-width: 575px) {
    .about-us-video .title {
      top: 16px;
      right: 16px;
      font-size: 12px;
    }

    .about-us-video .time {
      top: 16px;
      left: 16px;
    }

    .about-us-video .video,
    .about-us-video .video:not(.showing)::after,
    .about-us-video .video video {
      border-radius: 20px;
    }
  }

  .question-items li:not(:last-child) {
    margin-bottom: 60px;
  }

  .question-items li ul {
    padding-right: 33px;
  }

  .question-items li ul::before {
    content: "";
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background-color: rgba(138, 154, 221, 0.75);
  }

  .question-items li ul li:first-child {
    margin-top: 48px;
  }

  .question-item .info-author {
    margin-bottom: 26px;
  }

  .question-item .info-author img {
    box-shadow: 0px 12px 10px rgba(0, 0, 0, 0.1);
    width: 69px;
    height: 69px;
    margin-left: 14px;
  }

  .question-item .info-author .detail {
    font-weight: 500;
  }

  .question-item .info-author .detail .name {
    font-size: 18px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 28px;
  }

  .question-item .info-author .detail .date {
    color: rgba(73, 73, 73, 0.4);
    font-size: 12px;
    line-height: 20px;
  }

  .question-item .content {
    background-color: #fff;
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.05);
    padding: 20px 24px 35px 39px;
  }

  .question-item .content p {
    font-size: 12px;
    -moz-columns: #888;
    columns: #888;
    line-height: 22px;
    text-align: justify;
    padding-right: 20px;
    max-width: calc(100% - 100px);
    width: 100%;
    margin-bottom: 0;
  }

  .question-item .content p::before {
    content: "";
    top: 0;
    right: 0;
    background-color: rgba(138, 154, 221, 0.75);
    width: 8px;
    height: 100%;
  }

  .question-item .content .btn {
    padding: 0;
    max-width: 85px;
    width: 100%;
    height: 37px;
    line-height: 37px;
    top: 50%;
    left: 39px;
    transform: translateY(-50%);
  }

  .question-item.you .content p {
    padding-bottom: 62px;
  }

  .question-item.you .content .btn {
    top: auto;
    bottom: 35px;
    transform: unset;
  }

  @media only screen and (max-width: 767px) {
    .question-item .content {
      padding: 16px;
    }

    .question-item .content p {
      max-width: 100%;
    }

    .question-item .content .btn {
      position: relative;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin-top: 43px;
      display: block;
      margin-right: auto;
    }
  }

  .learn-path {
    background-color: #fff;
    box-shadow: 0px 9px 50px rgba(0, 0, 0, 0.05);
    padding: 17px 18px 22px;
  }

  .learn-path .image {
    margin-bottom: 7px;
  }

  .learn-path .image img {
    border-radius: 18px;
  }

  .learn-path h2 {
    font-weight: 900;
    color: rgba(73, 73, 73, 0.7);
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 4px;
    height: 56px;
    overflow: hidden;
  }

  .learn-path h2 a:hover {
    color: #8a9add;
  }

  .learn-path .author img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    margin-left: 5px;
  }

  .learn-path .author-info .name {
    font-size: 12px;
    color: rgba(73, 73, 73, 0.7);
    line-height: 14px;
  }

  .learn-path .author-info .position {
    font-size: 10px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 14px;
  }

  .learn-path p {
    font-size: 12px;
    line-height: 20px;
    height: 60px;
    overflow: hidden;
    margin: 7px 0 12px;
    text-align: justify;
  }

  .learn-path .progress {
    height: 7px;
    margin-bottom: 9px;
  }

  .learn-path .progress span {
    background: linear-gradient(90.29deg, #c9d3ff 0%, #8a9add 97.91%);
    border-radius: 14px;
  }

  .learn-path .date {
    font-size: 12px;
    -moz-columns: rgba(73, 73, 73, 0.8);
    columns: rgba(73, 73, 73, 0.8);
    font-weight: 500;
  }

  .learn-path .date i {
    font-size: 14px;
    margin-left: 2px;
  }

  .learn-path ul li {
    border-radius: 7px;
    padding: 3px 6px;
    font-size: 9px;
  }

  .learn-path ul li:not(:last-child) {
    margin-left: 5px;
  }

  .learn-path ul li i {
    font-size: 12px;
    margin-left: 4px;
  }

  .learn-path ul li.comments {
    background-color: rgba(74, 155, 229, 0.15);
    color: #4a9be5;
  }

  .learn-path ul li.like {
    background-color: rgba(228, 37, 37, 0.15);
    color: #e42525;
  }

  @media only screen and (max-width: 991px) {
    .learn-path h2 {
      font-size: 14px;
    }
  }

  .top-header {
    position: relative;
    z-index: 888;
  }

  .top-header-wrapper {
    padding: 27px 32px 30px 85px;
    border-radius: 0 0 50px 50px;
    background-color: #fff;
  }

  .top-header-btn-nav {
    font-size: 20px;
  }

  .top-header-logo img {
    width: 52px;
    height: 32px;
    margin-left: 5px;
  }

  .top-header-logo .detail h3 {
    font-size: 11px;
    line-height: 19px;
  }

  .top-header-logo .detail h4 {
    font-size: 12px;
    line-height: 13px;
    font-family: "Kalameh";
  }

  .top-header-nav {
    margin-right: 55px;
  }

  .top-header-nav .menu {
    margin-left: 33px;
    padding-left: 28px;
    border-left: 1px solid rgba(73, 73, 73, 0.5);
  }

  .top-header-nav .menu::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% + 350px);
    box-shadow: -5px 0px 20px rgba(0, 0, 0, 0.05);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: -5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    border-radius: 0 0 42px 42px;
  }

  .top-header-nav .menu button {
    font-weight: 500;
    line-height: 22px;
  }

  .top-header-nav .menu button i {
    font-size: 12px;
    margin-left: 6px;
  }

  .top-header-nav .menu button:hover {
    color: #869beb;
  }

  .top-header-nav .menu .megamenu {
    top: 100%;
    right: 0;
    max-width: calc(100% - 24px);
    width: 100%;
    border-radius: 0 0 42px 42px;
    height: 350px;
    z-index: 9999;
    transform: translateY(40px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }

  .top-header-nav .menu .megamenu::before {
    content: "";
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 38px;
    z-index: -1;
  }

  .top-header-nav .menu .megamenu-tabs {
    max-width: 212px;
    width: 100%;
    flex: 0 0 auto;
    padding: 16px 25px 58px 0;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0 42px 42px 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .top-header-nav .menu .megamenu-tabs li {
    color: rgba(73, 73, 73, 0.5);
    line-height: 23px;
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
    padding: 0 10px;
    line-height: 32px;
  }

  .top-header-nav .menu .megamenu-tabs li,
  .top-header-nav .menu .megamenu-tabs li::after {
    transition: all 0.3s ease-in-out;
  }

  .top-header-nav .menu .megamenu-tabs li::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url("./../images/meg.png") 0 0 no-repeat;
    background-size: 100% 100%;
    opacity: 0;
  }

  .top-header-nav .menu .megamenu-tabs li:not(:last-child) {
    margin-bottom: 3px;
  }

  .top-header-nav .menu .megamenu-tabs li i {
    font-size: 16px;
    margin-left: 4px;
  }

  .top-header-nav .menu .megamenu-tabs li:hover,
  .top-header-nav .menu .megamenu-tabs li.active {
    color: #494949;
    font-weight: bold;
  }

  .top-header-nav .menu .megamenu-tabs li:hover::after,
  .top-header-nav .menu .megamenu-tabs li.active::after {
    opacity: 1;
  }

  .top-header-nav .menu .megamenu-content {
    border-radius: 0 0 0 42px;
    max-width: calc(100% - 212px);
    width: 100%;
    flex: 0 0 auto;
  }

  @media only screen and (max-width: 1199px) {
    .top-header-nav .menu .megamenu-content {
      max-width: calc(100% - 200px);
    }
  }

  .top-header-nav .menu .megamenu-content-item {
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    width: 100%;
    top: 0;
    right: 0;
  }

  .top-header-nav .menu .megamenu-content-item.active {
    opacity: 1;
  }

  .top-header-nav .menu .megamenu-content-item .right {
    max-width: 649px;
    width: 100%;
    background-color: #fff;
    padding: 16px 15px 0;
  }

  @media only screen and (max-width: 1199px) {
    .top-header-nav .menu .megamenu-content-item .right {
      max-width: 100%;
    }
  }

  .top-header-nav .menu .megamenu-content-item .right h5 {
    font-size: 16px;
    font-weight: 900;
    line-height: 21px;
    margin-bottom: 20px;
  }

  .top-header-nav .menu .megamenu-content-item .right .links {
    width: 100%;
    flex-wrap: wrap;
    height: 79%;
    overflow: hidden;
  }

  .top-header-nav .menu .megamenu-content-item .right .links a {
    max-width: 25%;
    width: 100%;
    padding: 0 4px;
    font-size: 12px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 20px;
  }

  .top-header-nav .menu .megamenu-content-item .right .links a i {
    font-size: 14px;
    color: #8a9add;
    margin-left: 4px;
  }

  .top-header-nav .menu .megamenu-content-item .right .links a:not(:last-child) {
    margin-bottom: 8px;
  }

  .top-header-nav .menu .megamenu-content-item .right .links a:hover {
    color: #8a9add;
  }

  .top-header-nav .menu .megamenu-content-item .left {
    max-width: calc(100% - 707px);
    width: 100%;
    padding: 16px 17px 0 0;
  }

  @media only screen and (max-width: 1399px) {
    .top-header-nav .menu .megamenu-content-item .left {
      max-width: calc(100% - 649px);
    }
  }

  @media only screen and (max-width: 1199px) {
    .top-header-nav .menu .megamenu-content-item .left {
      display: none;
    }
  }

  .top-header-nav .menu .megamenu-content-item .left .heading .title {
    font-size: 16px;
    line-height: 20px;
  }

  .top-header-nav .menu .megamenu-content-item .left .heading .btn {
    font-size: 11px;
    font-weight: 500;
    border-radius: 8px;
    padding: 7px 17px;
    box-shadow: 0px 9px 20px -1px rgba(0, 0, 0, 0.02);
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product::after {
    content: "";
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    border-radius: 12px;
    background-color: #8a9add;
    height: 8px;
    width: 112px;
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product .image {
    max-width: calc(100% - 40px);
    margin-bottom: -40px;
    z-index: 4;
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product .image img {
    border-radius: 16px;
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product .content {
    border-radius: 16px;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.02);
    padding: 50px 22px 15px;
    margin-top: -40px;
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product .content h2 {
    font-size: 16px;
    color: rgba(73, 73, 73, 0.7);
    font-weight: 900;
    line-height: 20px;
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product .content .category {
    font-size: 10px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 20px;
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product .content .btn {
    font-size: 9px;
    font-weight: 400;
    line-height: 26px;
    padding: 0 7px;
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product .content .price {
    font-size: 16px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 20px;
  }

  .top-header-nav .menu .megamenu-content-item .left .megamenu-product .content .price i {
    color: rgba(73, 73, 73, 0.7);
    font-size: 18px;
  }

  .top-header-nav .menu:hover::after {
    opacity: 1;
    visibility: visible;
  }

  .top-header-nav .menu:hover .megamenu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .top-header-nav>ul li:not(:last-child) {
    margin-left: 24px;
  }

  .top-header-nav>ul li a,
  .top-header-nav>ul li a:hover,
  .top-header-nav>ul li a:focus,
  .top-header-nav>ul li a:active {
    line-height: 22px;
    color: #aab4bc;
  }

  .top-header-nav>ul li a::after,
  .top-header-nav>ul li a:hover::after,
  .top-header-nav>ul li a:focus::after,
  .top-header-nav>ul li a:active::after {
    content: "";
    bottom: 0;
    right: 0;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background-color: #8a9add;
    transform: translateY(5px);
  }

  .top-header-nav>ul li a:hover {
    font-weight: bold;
    color: #8a9add;
  }

  .top-header-nav>ul li a:hover::after {
    width: 14px;
  }

  .top-header-nav>ul.hover-success li a::after,
  .top-header-nav>ul.hover-success li a:hover::after,
  .top-header-nav>ul.hover-success li a:focus::after,
  .top-header-nav>ul.hover-success li a:active::after {
    background-color: #27ad7b;
  }

  .top-header-nav>ul.hover-success li a:hover {
    color: #27ad7b;
  }

  .top-header-nav>ul.hover-origin li a::after,
  .top-header-nav>ul.hover-origin li a:hover::after,
  .top-header-nav>ul.hover-origin li a:focus::after,
  .top-header-nav>ul.hover-origin li a:active::after {
    background-color: #e7662a;
  }

  .top-header-nav>ul.hover-origin li a:hover {
    color: #e7662a;
  }

  .top-header-nav>ul.hover-blue li a::after,
  .top-header-nav>ul.hover-blue li a:hover::after,
  .top-header-nav>ul.hover-blue li a:focus::after,
  .top-header-nav>ul.hover-blue li a:active::after {
    background-color: #1081e8;
  }

  .top-header-nav>ul.hover-blue li a:hover {
    color: #1081e8;
  }

  .top-header-cart {
    box-shadow: 0px 9px 20px -1px rgba(0, 0, 0, 0.05), inset 1px 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    width: 37px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    font-size: 20px;
    margin: 0 auto 0 18px;
  }

  .top-header-cart span {
    right: -2px;
    bottom: -3px;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 500;
  }

  .top-header-auth {
    padding: 12px 7px;
  }

  .top-header-auth i {
    font-size: 13px;
    margin-left: 6px;
  }

  @media only screen and (max-width: 1399px) {
    .top-header-wrapper {
      padding-left: 32px;
    }
  }

  @media only screen and (max-width: 1199px) {
    .top-header-wrapper {
      padding: 27px 16px 30px;
    }

    .top-header-nav {
      margin-right: 18px;
    }

    .top-header-nav .menu {
      margin-left: 20px;
      padding-left: 15px;
    }

    .top-header-nav>ul li:not(:last-child) {
      margin-left: 12px;
    }
  }

  @media only screen and (max-width: 991px) {
    .top-header-wrapper {
      border-radius: 0 0 20px 20px;
    }

    .top-header-logo {
      margin: 0 auto;
    }

    .top-header-cart {
      margin-right: 0;
    }
  }

  @media only screen and (max-width: 575px) {
    .top-header-wrapper {
      margin: 0 -12px;
    }

    .top-header-cart {
      margin-left: 12px;
    }

    .top-header-auth {
      width: 37px;
      height: 37px;
      border-radius: 5px;
      text-align: center;
      line-height: 37px;
      padding: 0;
    }

    .top-header-auth i {
      margin-left: 0;
      font-size: 20px;
    }
  }

  .nav-responsive {
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out 0.3s;
  }

  .nav-responsive-content {
    width: 280px;
    right: -280px;
    transition: all 0.3s ease-in-out 0s;
    overflow: hidden auto;
    padding-bottom: 32px;
  }

  .nav-responsive-content .titr {
    font-size: 18px;
    font-weight: 900;
    line-height: 28px;
  }

  .nav-responsive-content ul:not(:last-child) {
    margin-bottom: 24px;
  }

  .nav-responsive-content ul li:not(:last-child) {
    margin-bottom: 12px;
  }

  .nav-responsive-content ul li a {
    font-size: 13px;
    font-weight: 500;
    color: rgba(73, 73, 73, 0.8);
    line-height: 24px;
    padding: 0 12px;
  }

  .nav-responsive-content ul li a i {
    font-size: 14px;
    margin-left: 4px;
  }

  .nav-responsive-content ul li.has-child>a::after {
    content: "\e92b";
    font-family: "icomoon";
    font-size: 6px;
    top: 0;
    left: 12px;
    transition: all 0.3s ease-in-out;
  }

  .nav-responsive-content ul li.has-child.opened>a::after {
    transform: rotate(180deg);
  }

  .nav-responsive-content ul li ul {
    overflow: hidden;
    height: 0;
    transition: all 0.3s ease-in-out;
  }

  .nav-responsive-content ul li ul li:first-child {
    margin-top: 12px;
  }

  .nav-responsive-content ul li ul li a {
    padding: 0 24px;
    font-size: 12px;
    font-weight: 400;
  }

  .nav-responsive-content ul li ul li a i {
    font-size: 10px;
  }

  .nav-responsive.opened {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease-in-out 0s;
  }

  .nav-responsive.opened .nav-responsive-content {
    right: 0;
    transition: all 0.3s ease-in-out 0.3s;
  }

  .landing {
    margin-top: 115px;
    padding-bottom: 114px;
  }

  .landing::after {
    content: "";
    top: 0;
    left: 0;
    width: calc(100% + 108px);
    height: calc(100% + 199px);
    background: url("./../images/bg-landing.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translate(-105px, -411px);
  }

  .landing::before {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 74px;
    background: url("./../images/shape.svg") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .landing .en {
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    margin-bottom: 14px;
  }

  .landing .en,
  .landing h3 {
    color: rgba(105, 105, 105, 0.8);
  }

  .landing h3 {
    margin-bottom: 19px;
    font-size: 45px;
    font-weight: 900;
    font-family: "Kalameh";
    line-height: 72px;
    max-width: 520px;
    width: 100%;
  }

  .landing p {
    font-size: 12px;
    line-height: 25px;
    margin-bottom: 32px;
  }

  .landing form {
    margin-bottom: 60px;
  }

  .landing form,
  .landing form .btn {
    border-radius: 15px;
  }

  .landing form .form-control {
    padding: 22px 26px 22px 12px;
    border-radius: 0 15px 15px 0;
  }

  .landing form .btn {
    width: 62px;
    height: 62px;
    font-size: 20px;
  }

  .landing ul {
    gap: 16px 0;
  }

  .landing ul li {
    font-size: 12px;
    font-weight: 500;
  }

  .landing ul li:not(:last-child) {
    margin-left: 24px;
  }

  .landing ul li i {
    margin-left: 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 7px;
    font-size: 16px;
  }

  .landing img.shadow-img {
    filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.05));
  }

  @media only screen and (max-width: 1399px) {
    .landing ul li:not(:last-child) {
      margin-left: 16px;
    }
  }

  @media only screen and (max-width: 1199px) {
    .landing ul li:not(:last-child) {
      font-size: 10px;
      margin-left: 7px;
    }

    .landing ul li i {
      margin-left: 5px;
    }
  }

  @media only screen and (max-width: 991px) {
    .landing {
      margin-top: 80px;
    }

    .landing ul li:not(:last-child) {
      font-size: 12px;
      margin-left: 24px;
    }

    .landing ul li i {
      margin-left: 10px;
    }

    .landing h3 {
      font-size: 40px;
      line-height: 64px;
    }
  }

  @media only screen and (max-width: 767px) {
    .landing {
      margin-top: 50px;
    }

    .landing ul li {
      max-width: 50%;
      width: 100%;
    }

    .landing ul li:not(:last-child) {
      margin: 0;
    }

    .landing h3 {
      font-size: 32px;
      line-height: 50px;
      max-width: 380px;
    }
  }

  @media only screen and (max-width: 575px) {
    .landing .en {
      font-size: 13px;
      margin-bottom: 8px;
    }

    .landing h3 {
      font-size: 24px;
      max-width: 296px;
      line-height: 38px;
    }
  }

  @media only screen and (max-width: 399px) {
    .landing ul li {
      max-width: 100%;
    }
  }

  .landing-bg::after {
    background: url("./../images/lan.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 131%;
    top: 0;
    left: 0;
    transform: translate(0, -213px);
    z-index: -2;
  }

  @media only screen and (max-width: 991px) {
    .landing-bg::after {
      transform: translateY(-178px);
      height: 114%;
      background-size: 108% 100%;
      background-position: center 0;
    }
  }

  @media only screen and (max-width: 499px) {
    .landing-bg::after {
      background-size: 113% 100%;
    }
  }

  @media only screen and (max-width: 399px) {
    .landing-bg::after {
      background-size: 134% 100%;
    }
  }

  .landing-bg .en span {
    color: rgba(232, 236, 255, 0.79);
  }

  .landing-bg h3::before,
  .landing-bg h3::after {
    content: "";
    width: 30px;
    height: 47px;
    background: url("./../images/shape-05.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

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

    .landing-bg h3::before,
    .landing-bg h3::after {
      content: none;
    }
  }

  .landing-bg h3::before {
    top: calc(100% - 10px);
    left: calc(100% + 20px);
  }

  .landing-bg h3::after {
    background-image: url("./../images/shape-06.png");
    right: 100%;
    bottom: calc(100% - 30px);
  }

  .landing-bg h3 span {
    color: #e4eaff;
  }

  .landing-bg .en,
  .landing-bg h3,
  .landing-bg p {
    color: rgba(255, 255, 255, 0.8);
  }

  .landing-bg form {
    padding: 8px 10px;
  }

  .landing-bg form .form-control {
    padding: 12px 20px 12px 10px;
  }

  .landing-bg form .btn {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }

  .landing-bg.blue::after {
    background-image: url("./../images/bg-landing-3.png");
  }

  .landing-bg.blue::before {
    background-image: url("./../images/shape-04.png");
    width: 30px;
    height: 47px;
    bottom: 8px;
  }

  .landing-success::before {
    background-image: url("./../images/shape-02.png");
  }

  .landing-origin::before {
    background-image: url("./../images/shape-03.png");
  }

  .top-seller {
    margin: 76px 0 120px;
  }

  .top-seller::after {
    content: "";
    top: 0;
    left: 0;
    transform: translateY(-30px);
    width: 100%;
    height: 108%;
    background: url("./../images/bg-top-seller.png") center center no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .campaign-wrapper {
    background: url("./../images/bg-campaign.png") 0 0 no-repeat;
    background-size: 100% 100%;
    border-radius: 25px;
    padding: 43px 0 27px;
  }

  .campaign-wrapper .name-en {
    background: linear-gradient(180deg, #ffffff -48.04%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
    line-height: 50px;
    font-family: "Kalam";
  }

  .campaign-wrapper h3 {
    font-size: 42px;
    font-weight: bold;
    font-family: "Kalameh";
    margin-bottom: 0;
  }

  .campaign-wrapper .sub-title {
    font-family: "Insta Story Signature";
    line-height: 31px;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 7px;
  }

  .campaign-wrapper a {
    font-weight: 500;
    line-height: 22px;
  }

  .campaign-wrapper a i {
    font-size: 12px;
    margin-right: 6px;
  }

  .campaign-wrapper a:hover {
    color: #8a9add;
  }

  @media only screen and (max-width: 991px) {
    .campaign-wrapper {
      background-position: center center;
      background-size: 130% 100%;
    }
  }

  @media only screen and (max-width: 767px) {
    .campaign-wrapper {
      background-size: 160% 100%;
    }

    .campaign-wrapper h3 {
      font-size: 32px;
      line-height: 48px;
    }
  }

  @media only screen and (max-width: 499px) {
    .campaign-wrapper {
      background-size: 180% 100%;
    }

    .campaign-wrapper .name-en,
    .campaign-wrapper h3 {
      font-size: 24px;
      line-height: 32px;
    }
  }

  @media only screen and (max-width: 399px) {
    .campaign-wrapper {
      background-size: 200% 100%;
    }
  }

  .campaign.success .campaign-wrapper {
    background-image: url("./../images/bg-campaign-success.png");
  }

  .campaign.success .campaign-wrapper a:hover {
    color: #ccc;
  }

  .campaign.origin .campaign-wrapper {
    background-image: url("./../images/bg-campaign-origin.png");
  }

  .campaign.origin .campaign-wrapper a:hover {
    color: #ccc;
  }

  .campaign.blue .campaign-wrapper {
    background-image: url("./../images/bg-campaign-2.png");
  }

  .campaign.blue .campaign-wrapper a:hover {
    color: #ccc;
  }

  .learning-paths {
    margin-top: 155px;
  }

  .learning-paths::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background: url("./../images/bg-learning-path.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -2;
    transform: translateY(-20px);
  }

  @media only screen and (max-width: 767px) {
    .learning-paths::after {
      background-position: center center;
    }
  }

  .learning-paths::before {
    content: "";
    top: 0;
    right: 0;
    width: 590px;
    height: 545px;
    background: url("./../images/learning-path-2.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translate(113px, 80px);
    z-index: -1;
  }

  .comments-students {
    margin-top: 140px;
  }

  .comments-students::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 105%;
    background: url("./../images/bg-comments-students.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-20px);
    z-index: -2;
  }

  @media only screen and (max-width: 767px) {
    .comments-students::after {
      background-position: center center;
    }
  }

  .comments-students .container {
    z-index: 2;
  }

  .comments-students .container::after,
  .comments-students .container::before {
    content: "";
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
  }

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

    .comments-students .container::after,
    .comments-students .container::before {
      content: none;
    }
  }

  .comments-students .container::after {
    left: 0;
    width: 180px;
    height: 410px;
    background: url("./../images/students-comments-left.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .comments-students .container::before {
    right: 0;
    width: 162px;
    height: 416px;
    background: url("./../images/students-comments-right.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .comments-students-item {
    max-width: 632px;
  }

  .comments-students-item img {
    width: 96px;
    height: 96px;
    border-radius: 28px;
    margin-bottom: 15px;
  }

  .comments-students-item .name {
    font-size: 13px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 27px;
  }

  .comments-students-item .student {
    font-size: 11px;
    font-weight: 500;
    color: rgba(73, 73, 73, 0.5);
    line-height: 24px;
    padding-bottom: 7px;
    margin-bottom: 18px;
  }

  .comments-students-item .student::after {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #8a9add;
  }

  .comments-students-item p {
    font-size: 12px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 24px;
  }

  .comments-students-item.success .student::after {
    background-color: #27ad7b;
  }

  .dedicated-podcasts {
    margin-top: 144px;
  }

  .dedicated-podcasts::before {
    content: "";
    top: 0;
    left: 0;
    width: calc(100% + 145px);
    height: 130%;
    background: url("./../images/bg-padcast.png") top 115px left no-repeat;
    background-size: 100% 100%;
    opacity: 0.1;
    transform: translate(-110px, -68px);
    z-index: -1;
  }

  @media only screen and (max-width: 991px) {
    .dedicated-podcasts::before {
      background-size: contain;
      background-position: center center;
    }
  }

  .dedicated-podcasts-wrapper .image {
    width: 292px;
    margin-left: 29px;
  }

  .dedicated-podcasts-wrapper .image img {
    border-radius: 22px;
  }

  .dedicated-podcasts-wrapper .detail {
    width: calc(100% - 321px);
    padding-top: 32px;
  }

  .dedicated-podcasts-wrapper .detail h2 {
    font-weight: 900;
    font-family: "Kalameh";
    color: rgba(73, 73, 73, 0.8);
    font-size: 25px;
    line-height: 46px;
  }

  .dedicated-podcasts-wrapper .detail h5 {
    color: rgba(73, 73, 73, 0.45);
    font-size: 18px;
    font-family: "Kalameh";
    padding-bottom: 3px;
    line-height: 32px;
    margin-bottom: 15px;
  }

  .dedicated-podcasts-wrapper .detail h5::after {
    content: "";
    bottom: 0;
    right: 0;
    height: 3px;
    width: 37px;
    border-radius: 3px;
    background-color: #8a9add;
  }

  .dedicated-podcasts-wrapper .detail h5.success::after {
    background-color: #27ad7b;
  }

  .dedicated-podcasts-wrapper .detail p {
    font-size: 12px;
    line-height: 24px;
    margin-bottom: 12px;
  }

  .dedicated-podcasts-wrapper .detail ul {
    margin-bottom: 27px;
  }

  .dedicated-podcasts-wrapper .detail ul li {
    color: rgba(73, 73, 73, 0.7);
    font-weight: bold;
    font-size: 15px;
    line-height: 32px;
    font-family: "Kalameh";
  }

  .dedicated-podcasts-wrapper .detail ul li:not(:last-child) {
    margin-left: 40px;
  }

  .dedicated-podcasts-wrapper .detail .audio button {
    border-radius: 10px;
    background-color: #fff;
    width: 43px;
    height: 43px;
    box-shadow: 0px 17px 20px rgba(0, 0, 0, 0.05);
    font-size: 18px;
    margin-right: 26px;
  }

  @media only screen and (max-width: 991px) {
    .dedicated-podcasts-wrapper .image {
      margin: 0 auto;
    }

    .dedicated-podcasts-wrapper .detail {
      width: 100%;
    }
  }

  .dedicated-podcasts-wrapper .equalizer {
    width: 100%;
    max-width: 435px;
    overflow: hidden;
  }

  @media only screen and (max-width: 767px) {
    .dedicated-podcasts-wrapper .detail h2 {
      font-size: 20px;
      line-height: 32px;
    }

    .dedicated-podcasts-wrapper .detail h5 {
      font-size: 15px;
      line-height: 28px;
    }

    .dedicated-podcasts-wrapper .detail ul li {
      font-size: 13px;
      line-height: 24px;
    }

    .dedicated-podcasts-wrapper .detail ul li:not(:last-child) {
      margin-left: 16px;
    }
  }

  @media only screen and (max-width: 575px) {
    .dedicated-podcasts-wrapper .detail ul li:not(:last-child) {
      margin: 0 0 12px;
    }

    .dedicated-podcasts-wrapper .detail .equalizer {
      max-width: calc(100% - 70px);
      overflow: hidden;
    }
  }

  .news-world {
    margin-top: 176px;
  }

  .news-world::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 103%;
    background: url("./../images/bg-news-world.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-40px);
  }

  @media only screen and (max-width: 767px) {
    .news-world::before {
      background-position: center center;
    }
  }

  .news-world .section-heading-tow::before,
  .news-world .section-heading-tow::after {
    content: none;
  }

  .news-world-item:not(:last-child) {
    margin-bottom: 32px;
  }

  .news-world-item .image {
    max-width: 197px;
    width: 100%;
  }

  .news-world-item .image::before {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(73, 73, 73, 0.61);
    width: 152px;
    height: 34px;
    border-radius: 10px;
    filter: blur(50px);
    z-index: -1;
  }

  .news-world-item .image img {
    border-radius: 10px;
  }

  .news-world-item .detail {
    max-width: calc(100% - 197px);
    width: 100%;
    padding-right: 18px;
  }

  .news-world-item .detail h2 {
    font-size: 12px;
    font-weight: 500;
    color: #494949;
  }

  .news-world-item .detail h2:hover {
    color: #8a9add;
  }

  .news-world-item .detail h2,
  .news-world-item .detail p {
    text-align: justify;
    height: 44px;
    overflow: hidden;
  }

  .news-world-item .detail h2,
  .news-world-item .detail p,
  .news-world-item .detail .see {
    line-height: 22px;
  }

  .news-world-item .detail p {
    font-size: 10px;
    color: #494949;
  }

  .news-world-item .detail .see {
    font-size: 10px;
    color: #494949;
    width: -moz-fit-content;
    width: fit-content;
  }

  .news-world-item .detail .see:hover {
    color: #8a9add;
  }

  .news-world-item-2 img {
    border-radius: 22px;
  }

  .news-world-item-2 .overlay {
    border-radius: 22px;
    padding: 14px 22px 12px 29px;
    z-index: 2;
  }

  .news-world-item-2 .overlay::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    background-color: rgba(73, 73, 73, 0.7);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    z-index: -1;
  }

  .news-world-item-2 .overlay p,
  .news-world-item-2 .overlay a {
    font-size: 10px;
    line-height: 22px;
    color: #dcdcdc;
  }

  .news-world-item-2 .overlay p {
    max-height: 66px;
    overflow: hidden;
  }

  .news-world-item-2 .overlay a {
    width: -moz-fit-content;
    width: fit-content;
  }

  .news-world-item-2 .overlay a:hover {
    color: #8a9add;
  }

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

    .news-world-item .image,
    .news-world-item .detail {
      max-width: 100%;
    }

    .news-world-item .image img {
      image-rendering: pixelated;
    }

    .news-world-item .detail {
      padding: 20px 0 0;
    }

    .news-world-item-2 img,
    .news-world-item-2 .overlay,
    .news-world-item-2 .overlay::after {
      border-radius: 16px;
    }

    .news-world-item-2 .overlay {
      padding: 8px 20px;
    }
  }

  .news-world .swiper-slide {
    transform: scale(0.5);
    transition: all 0.3s ease-in-out;
    opacity: 0;
  }

  .news-world .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
  }

  .news-world .btn {
    margin-top: 24px;
    max-width: -moz-fit-content;
    max-width: fit-content;
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;
    padding: 7px 15px;
  }

  .footer {
    padding-top: 25px;
    margin-top: 104px;
    box-shadow: 0px 52px 100px rgba(0, 0, 0, 0.02);
  }

  .footer-logo {
    margin-bottom: 16px;
  }

  .footer-logo img {
    width: 52px;
    height: 32px;
    margin-left: 5px;
  }

  .footer-logo .detail h3 {
    font-size: 12px;
    color: rgba(73, 73, 73, 0.7);
  }

  .footer-logo .detail h4 {
    font-size: 12px;
    font-family: "Kalameh";
  }

  .footer-description {
    font-size: 12px;
    text-align: justify;
    color: #787878;
    line-height: 22px;
    max-width: 522px;
    width: 100%;
  }

  .footer-titr {
    font-size: 12px;
    font-weight: 900;
    line-height: 18px;
    margin-bottom: 16px;
  }

  .footer-nav li:not(:last-child) {
    margin-bottom: 12px;
  }

  .footer-nav li a {
    display: inline-block;
    line-height: 17px;
    color: #9fa9ad;
    font-size: 12px;
  }

  .footer-nav li a:hover {
    color: #8a9add;
    padding-right: 4px;
  }

  .footer-contact .title {
    color: rgba(73, 73, 73, 0.8);
    font-size: 13px;
    font-weight: 500;
    line-height: 29px;
    margin-bottom: 12px;
  }

  .footer-contact ul {
    gap: 16px 0;
  }

  .footer-contact ul li {
    max-width: 50%;
    width: 100%;
    line-height: 21px;
    color: rgba(73, 73, 73, 0.5);
    font-weight: 500;
    font-size: 12px;
  }

  .footer-contact ul li i {
    font-size: 16px;
    margin-left: 5px;
  }

  .footer-contact,
  .footer-namad {
    margin-top: 32px;
  }

  .footer-namad .title {
    color: rgba(45, 45, 45, 0.8);
    font-size: 13px;
    line-height: 24px;
  }

  .footer-namad p {
    color: #787878;
    font-size: 10px;
    line-height: 22px;
  }

  .footer-namad a:first-child {
    margin-left: 13px;
  }

  .footer-namad a img {
    height: 111px;
  }

  .footer-bottom {
    padding-bottom: 6px;
    border-bottom: 3px solid #8a9add;
  }

  .footer-copyright {
    font-size: 11px;
    color: rgba(120, 120, 120, 0.8);
  }

  .footer-socials .title {
    font-size: 10px;
    color: #787878;
    line-height: 22px;
  }

  .footer-socials .en {
    font-family: "Insta Story Signature";
    background: linear-gradient(180deg, rgba(120, 120, 120, 0) 0%, #787878 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 9px;
    margin: -8px 0 11px;
  }

  .footer-socials ul li:not(:last-child) {
    margin-left: 12px;
  }

  .footer-socials ul li a {
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05);
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #787878;
    background-color: #fff;
  }

  .footer-socials ul li a:hover {
    background-color: #8a9add;
    color: #fff;
  }

  .footer-socials ul.success li a:hover {
    background-color: #27ad7b;
  }

  @media only screen and (max-width: 575px) {
    .footer-contact ul li {
      max-width: 100%;
    }
  }

  .footer-two::after {
    content: "\e901";
    font-family: "icomoon";
    z-index: -1;
    transform: translate(-50%, 73px);
    top: 0;
    left: 50%;
    font-size: 30px;
    color: #8a9add;
  }

  @media only screen and (max-width: 991px) {
    .footer-two::after {
      content: none;
    }
  }

  .footer-two .footer-contact ul li {
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .footer-two .footer-contact ul li:nth-child(2) {
    text-align: center;
  }

  .footer-two .footer-contact ul li:last-child {
    text-align: left;
  }

  .footer-two .footer-description {
    max-width: 100%;
  }

  .footer-three {
    padding-top: 0;
  }

  .footer-three>.container {
    padding-top: 43px;
    border-top: 1px dashed rgba(73, 73, 73, 0.3);
  }

  .footer-three-namad {
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .footer-three-namad .title {
    font-size: 13px;
    line-height: 19px;
    margin-bottom: 8px;
  }

  .footer-three-contact {
    padding: 32px 40px;
    box-shadow: 0px 20px 26px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    margin: 24px 0 0;
    z-index: 3;
  }

  .footer-three-contact .title {
    font-size: 10px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 18px;
    margin-left: 37px;
  }

  .footer-three-contact .title span {
    font-size: 13px;
    line-height: 23px;
  }

  .footer-three-contact ul {
    max-width: calc(100% - 109px);
    width: 100%;
    gap: 16px 0;
  }

  .footer-three-contact ul li i {
    font-size: 22px;
  }

  .footer-three-contact ul li i,
  .footer-three-contact ul li img {
    margin-left: 7px;
  }

  .footer-three-contact ul li div {
    color: rgba(73, 73, 73, 0.5);
    font-size: 11px;
    font-weight: 500;
    line-height: 22px;
  }

  .footer-three-contact ul li div span {
    color: #494949;
    font-size: 13px;
    line-height: 17px;
  }

  .footer-three .footer-bottom {
    border-bottom: 0;
    background: url("./../images/bg-footer.png") 0 0 no-repeat;
    background-size: 100% 100%;
    margin-top: -40px;
    padding: 60px 0 13px;
  }

  @media only screen and (max-width: 767px) {
    .footer-three .footer-bottom {
      background-position: center center;
    }
  }

  .footer-three .footer-bottom .footer-copyright {
    color: rgba(255, 255, 255, 0.8);
  }

  .footer-three .footer-bottom .footer-socials .text .en {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  }

  @media only screen and (max-width: 991px) {
    .footer-three-contact {
      padding: 24px 20px;
    }

    .footer-three-contact ul {
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 991px) {
    .footer-three-contact {
      padding: 24px 12px;
    }

    .footer-three-contact ul li {
      max-width: 100%;
    }
  }

  .footer-four-bottom {
    padding-top: 12px;
    margin-top: 50px;
    border-top: 1px dashed rgba(73, 73, 73, 0.3);
  }

  .footer-four-copyright {
    background: #8a9add url("./../images/bg-footer-2.png") 0 0 no-repeat;
    background-size: 100% 100%;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    padding: 7px 0;
    border-radius: 12px 12px 0 0;
    margin-top: 18px;
  }

  @media only screen and (max-width: 767px) {
    .footer-four-copyright {
      background-position: center center;
      background-size: cover;
    }
  }

  .footer-four-copyright a {
    color: #fff;
    font-weight: bold;
  }

  .footer-four .footer-contact ul li {
    max-width: 100%;
  }

  .footer.origin::after {
    color: #e7662a;
  }

  .footer.origin .footer-socials ul li a:hover {
    background-color: #e7662a;
  }

  .footer.blue::after {
    color: #1081e8;
  }

  .footer.blue .footer-socials ul li a:hover {
    background-color: #1081e8;
  }

  .footer.blue .footer-four-copyright {
    background-image: url("./../images/bg-footer-3.png");
  }

  .top-seller-two {
    margin-bottom: 46px;
  }

  .learning-paths-two {
    margin-bottom: 120px;
  }

  .learning-paths-two .section-heading-three {
    margin-bottom: -50px;
  }

  .learning-paths-two-wrapper {
    padding: 91px 20px 0;
  }

  .learning-paths-two-wrapper::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 64%;
    background: url("./../images/bg-path.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  @media only screen and (max-width: 991px) {
    .learning-paths-two-wrapper::after {
      background-position: center center;
      background-size: 120% 100%;
    }
  }

  @media only screen and (max-width: 767px) {
    .learning-paths-two-wrapper::after {
      background-size: 140% 100%;
    }
  }

  @media only screen and (max-width: 575px) {
    .learning-paths-two-wrapper::after {
      background-size: 150% 100%;
    }
  }

  @media only screen and (max-width: 439px) {
    .learning-paths-two-wrapper::after {
      background-size: 170% 100%;
    }
  }

  @media only screen and (max-width: 385px) {
    .learning-paths-two-wrapper::after {
      background-size: 200% 100%;
    }
  }

  @media only screen and (max-width: 575px) {
    .learning-paths-two-wrapper {
      margin: 0 -12px;
      padding: 91px 12px 0;
    }

    .learning-paths-two-wrapper::after {
      border-radius: 0;
    }
  }

  .learning-paths-two.origin .learning-paths-two-wrapper::after {
    background-image: url("./../images/bg-path-2.png");
  }

  .learning-paths-two.blue .learning-paths-two-wrapper::after {
    background-image: url("./../images/learning-path-3.png");
  }

  .comments-students-two-item {
    border-radius: 80px;
    background-color: #fff;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.02);
    padding: 28px 48px 49px;
  }

  .comments-students-two-item .title {
    color: rgba(73, 73, 73, 0.8);
    font-weight: 900;
    font-size: 25px;
    line-height: 46px;
    font-family: "Kalameh";
  }

  .comments-students-two-item .sub-title {
    color: rgba(73, 73, 73, 0.45);
    font-size: 18px;
    line-height: 32px;
    direction: ltr;
    font-family: "Kalameh";
    margin-bottom: 54px;
  }

  .comments-students-two-item .sub-title::after,
  .comments-students-two-item .sub-title::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .comments-students-two-item .sub-title::after {
    content: "";
    width: 33px;
    height: 3px;
    border-radius: 3px;
    background-color: #8a9add;
    top: 36px;
  }

  .comments-students-two-item .sub-title::before {
    content: "\e900";
    font-family: "icomoon";
    top: 40px;
    color: rgba(138, 154, 221, 0.5);
    font-size: 20px;
  }

  .comments-students-two-item .image::after {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(138, 154, 221, 0.5);
    border-radius: 35px;
    filter: blur(32px);
    width: 83px;
    height: 24px;
  }

  .comments-students-two-item .image img {
    width: 120px;
    height: 120px;
    border-radius: 35px;
    margin-bottom: 19px;
  }

  .comments-students-two-item .name {
    font-size: 13px;
    line-height: 27px;
    color: rgba(73, 73, 73, 0.8);
  }

  .comments-students-two-item .position {
    color: rgba(73, 73, 73, 0.5);
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 7px;
    margin-bottom: 18px;
  }

  .comments-students-two-item .position::after {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 51px;
    height: 3px;
    background-color: #8a9add;
  }

  .comments-students-two-item p {
    text-align: center;
    color: rgba(73, 73, 73, 0.5);
    font-size: 12px;
    line-height: 24px;
  }

  .comments-students-two-item .equalizer {
    max-width: calc(100% - 70px);
    width: 100%;
    overflow: hidden;
  }

  .comments-students-two-item .btn-play {
    font-size: 20px;
  }

  @media only screen and (max-width: 1199px) {
    .comments-students-two-item .equalizer {
      max-width: calc(100% - 75px);
    }
  }

  @media only screen and (max-width: 767px) {
    .comments-students-two-item {
      padding: 20px 24px 32px;
      border-radius: 40px;
    }

    .comments-students-two-item .title {
      font-size: 20px;
      line-height: 32px;
    }

    .comments-students-two-item .sub-title {
      font-size: 14px;
      line-height: 24px;
    }
  }

  @media only screen and (max-width: 575px) {
    .comments-students-two-item {
      padding: 20px 16px 25px;
    }

    .comments-students-two-item .title {
      font-size: 16px;
    }

    .comments-students-two-item .sub-title {
      font-size: 12px;
    }
  }

  .comments-students-two-item.origin .sub-title::after {
    background-color: #e7662a;
  }

  .comments-students-two-item.origin .sub-title::before {
    color: rgba(231, 102, 42, 0.5);
  }

  .comments-students-two-item.origin .image::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(231, 102, 42, 0.5);
  }

  .comments-students-two-item.origin .position::after {
    background-color: #e7662a;
  }

  .comments-students-two-item.blue .sub-title::after {
    background-color: #4a9be5;
  }

  .comments-students-two-item.blue .sub-title::before {
    color: rgba(74, 155, 229, 0.5);
  }

  .comments-students-two-item.blue .image::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(231, 102, 42, 0.5);
  }

  .comments-students-two-item.blue .position::after {
    background-color: #4a9be5;
  }

  .comments-students-two .swiper-slide {
    opacity: 0.5;
    transform: scale(0.8);
    transition: all 0.3s ease-in-out;
  }

  .comments-students-two .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
  }

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

    .comments-students-two .swiper-button-next,
    .comments-students-two .swiper-button-prev {
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      left: 8%;
    }

    .comments-students-two .swiper-button-next::after,
    .comments-students-two .swiper-button-prev::after {
      content: "\e91c";
      font-family: "icomoon";
      font-size: 222px;
      color: rgba(138, 154, 221, 0.29);
    }

    .comments-students-two .swiper-button-next:hover::after,
    .comments-students-two .swiper-button-prev:hover::after {
      color: #8a9add;
    }

    .comments-students-two .swiper-button-prev {
      right: 8%;
      left: auto;
    }

    .comments-students-two .swiper-button-prev::after {
      content: "\e91d";
    }

    .comments-students-two .swiper-origin .swiper-button-next::after,
    .comments-students-two .swiper-origin .swiper-button-prev::after {
      color: rgba(231, 102, 42, 0.29);
    }

    .comments-students-two .swiper-origin .swiper-button-next:hover::after,
    .comments-students-two .swiper-origin .swiper-button-prev:hover::after {
      color: #e7662a;
    }

    .comments-students-two .swiper-blue .swiper-button-next::after,
    .comments-students-two .swiper-blue .swiper-button-prev::after {
      color: rgba(74, 155, 229, 0.29);
    }

    .comments-students-two .swiper-blue .swiper-button-next:hover::after,
    .comments-students-two .swiper-blue .swiper-button-prev:hover::after {
      color: #4a9be5;
    }
  }

  .podcasts {
    margin: 85px 0 80px;
  }

  .podcasts::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 118%;
    background: url("./../images/bg-podcasts-2.png") center 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-10px);
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .podcasts::before {
      background-position: center center;
    }
  }

  .podcasts .section-heading-three {
    margin-bottom: -50px;
  }

  .podcasts .section-heading-three-title {
    font-weight: 900;
  }

  @media only screen and (max-width: 575px) {
    .podcasts .section-heading-three-title {
      font-size: 15px;
      line-height: 28px;
    }
  }

  @media only screen and (max-width: 395px) {
    .podcasts .section-heading-three-title {
      font-size: 13px;
      line-height: 22px;
    }
  }

  .podcasts-wrapper {
    padding: 96px 24px 0;
  }

  @media only screen and (max-width: 575px) {
    .podcasts-wrapper {
      margin: 0 -12px;
      padding: 96px 12px 0;
    }
  }

  .podcasts-wrapper::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 68%;
    background: url("./../images/bg-podcasts.png") center 0 no-repeat;
    background-size: 100% 100%;
  }

  @media only screen and (max-width: 1199px) {
    .podcasts-wrapper::before {
      background-size: 120% 100%;
    }
  }

  @media only screen and (max-width: 991px) {
    .podcasts-wrapper::before {
      background-size: 160% 100%;
    }
  }

  @media only screen and (max-width: 767px) {
    .podcasts-wrapper::before {
      background-size: 220% 100%;
    }
  }

  @media only screen and (max-width: 575px) {
    .podcasts-wrapper::before {
      border-radius: 0;
    }
  }

  @media only screen and (max-width: 439px) {
    .podcasts-wrapper::before {
      background-size: 250% 100%;
    }
  }

  @media only screen and (max-width: 395px) {
    .podcasts-wrapper::before {
      background-size: 280% 100%;
    }
  }

  .podcasts.origin .podcasts-wrapper::before {
    background-image: url("./../images/bg-podcasts-3.png");
  }

  .podcasts.blue .podcasts-wrapper::before {
    background-image: url("./../images/bg-podcasts-4.png");
  }

  .podcasts-item {
    border-radius: 17px;
    background-color: #fff;
    box-shadow: 0px 27px 50px rgba(0, 0, 0, 0.02);
    padding: 26px 32px 59px;
  }

  .podcasts-item h2 {
    font-size: 16px;
    font-weight: 900;
    line-height: 31px;
    color: rgba(73, 73, 73, 0.7);
    font-family: "Kalameh";
    margin-bottom: 8px;
  }

  .podcasts-item h2 a:hovre {
    color: #8a9add;
  }

  .podcasts-item .sound {
    line-height: 22px;
    font-size: 13px;
    color: rgba(73, 73, 73, 0.5);
    font-family: "Kalameh";
    margin-bottom: 10px;
  }

  .podcasts-item p {
    font-size: 12px;
    font-family: "Kalameh";
    line-height: 24px;
    height: 72px;
    overflow: hidden;
    margin-bottom: 16px;
    text-align: justify;
    padding-right: 10px;
  }

  .podcasts-item p::before {
    content: "";
    right: 0;
    width: 4px;
    height: 100%;
    border-radius: 3px;
    background-color: #869beb;
  }

  .podcasts-item .equalizer {
    max-width: calc(100% - 57px);
    width: 100%;
    overflow: hidden;
  }

  .podcasts-item .btn-play {
    width: 43px;
    height: 43px;
    text-align: center;
    line-height: 43px;
    background-color: #fff;
    box-shadow: 0px 17px 20px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    font-size: 20px;
    margin-right: auto;
  }

  @media only screen and (max-width: 575px) {
    .podcasts-item {
      padding: 20px 16px 40px;
    }

    .podcasts-item h2 {
      font-size: 16px;
      line-height: 28px;
    }
  }

  .podcasts-item.origin p::before {
    background-color: #e7662a;
  }

  .last-news {
    margin-bottom: 91px;
  }

  .top-seller-three {
    margin-top: 0;
  }

  .modal-auth .modal-dialog {
    max-width: 690px;
  }

  .modal-auth .modal-content {
    background-color: #fff;
    box-shadow: 0px 32px 45px rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    overflow: hidden;
    z-index: 2;
    min-height: 500px;
  }

  .modal-auth .modal-content::after {
    content: "";
    top: 0;
    left: -1px;
    background: url("./../images/auth-02.png") 0 0 no-repeat;
    width: 60%;
    height: 100%;
    z-index: -1;
    background-size: 100% 100%;
  }

  @media only screen and (max-width: 670px) {
    .modal-auth .modal-content::after {
      width: 53%;
    }
  }

  @media only screen and (max-width: 575px) {
    .modal-auth .modal-content::after {
      content: none;
    }
  }

  @media only screen and (max-width: 575px) {
    .modal-auth .modal-content {
      border-radius: 20px;
    }
  }

  .modal-auth .modal-body {
    padding: 25px 32px 15px 15px;
  }

  @media only screen and (max-width: 575px) {
    .modal-auth .modal-body {
      padding: 20px 16px 12px;
    }
  }

  .modal-auth .modal-body .close {
    top: 25px;
    left: 55px;
    width: 42px;
    height: 42px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.05);
    font-size: 21px;
  }

  @media only screen and (max-width: 575px) {
    .modal-auth .modal-body .close {
      top: 20px;
      left: 16px;
    }
  }

  .modal-auth .modal-body .content h4 {
    font-size: 34px;
    color: rgba(73, 73, 73, 0.8980392157);
    line-height: 55px;
    font-weight: 900;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 2;
  }

  .modal-auth .modal-body .content h4::after {
    content: "";
    bottom: 8px;
    left: 0;
    width: 85%;
    height: 10px;
    border-radius: 14px;
    background-color: rgba(134, 155, 235, 0.7);
    z-index: -1;
  }

  .modal-auth .modal-body .content p {
    font-size: 18px;
    color: rgba(73, 73, 73, 0.7);
    line-height: 31px;
  }

  .modal-auth .modal-body .content .socials {
    max-width: 280px;
    width: 100%;
    margin: 0 -7px;
    gap: 10px 0;
  }

  .modal-auth .modal-body .content .socials li {
    max-width: 50%;
    width: 100%;
    padding: 0 7px;
  }

  .modal-auth .modal-body .content .socials li a {
    background-color: #fff;
    box-shadow: 0px 19px 27px rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(73, 73, 73, 0.5);
  }

  .modal-auth .modal-body .content .socials li a i {
    font-size: 18px;
    width: 29px;
    height: 29px;
    text-align: center;
    line-height: 29px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(239, 239, 239, 0.01) 82.36%, rgba(192, 192, 192, 0.01) 168.24%);
    box-shadow: 0px 8px 6px rgba(0, 0, 0, 0.03);
    color: #8a9add;
    margin-left: 5px;
  }

  .modal-auth .modal-body .content .or {
    margin: 16px 0 6px;
    z-index: 2;
    max-width: 265px;
    width: 100%;
  }

  .modal-auth .modal-body .content .or::after,
  .modal-auth .modal-body .content .or::before {
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 43%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
    z-index: -1;
  }

  .modal-auth .modal-body .content .or::before {
    right: 0;
    left: auto;
  }

  .modal-auth .modal-body .content .or span {
    font-size: 11px;
    line-height: 19px;
    color: rgba(73, 73, 73, 0.5);
    padding: 0 7px;
  }

  .modal-auth .modal-body .content h5 {
    font-size: 10px;
    line-height: 16px;
    color: rgba(73, 73, 73, 0.8);
    max-width: 280px;
    width: 100%;
    margin-bottom: 2px;
  }

  .modal-auth .modal-body .content form {
    max-width: 280px;
    width: 100%;
  }

  .modal-auth .modal-body .content form .form-group:not(:last-child) {
    margin-bottom: 12px;
  }

  .modal-auth .modal-body .content form .form-group i {
    font-size: 15px;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    font-size: 15px;
  }

  .modal-auth .modal-body .content form .form-group .form-control {
    padding: 13px 15px 13px 12px;
    color: #8a9add;
    font-size: 13px;
    line-height: 16px;
    background-color: #fff;
    box-shadow: 0px 15px 22px rgba(0, 0, 0, 0.05);
  }

  .modal-auth .modal-body .content form .form-group .form-control::-moz-placeholder {
    color: rgba(138, 154, 221, 0.5);
    font-size: 11px;
  }

  .modal-auth .modal-body .content form .form-group .form-control::placeholder {
    color: rgba(138, 154, 221, 0.5);
    font-size: 11px;
  }

  .modal-auth .modal-body .content form .form-group i+.form-control {
    padding-right: 42px;
  }

  .modal-auth .modal-body .content form .row {
    margin: 0 -6px;
  }

  .modal-auth .modal-body .content form .row .col-12,
  .modal-auth .modal-body .content form .row .col-lg-6 {
    padding: 0 6px;
  }

  .modal-auth .modal-body .content form .row .col-12 {
    margin-top: 18px;
  }

  .modal-auth .modal-body .content form .btn {
    font-size: 13px;
    line-height: 23px;
    padding: 7px 12px;
    margin: 14px 0;
  }

  .modal-auth .modal-body .content form .btn i {
    font-size: 10px;
    margin-right: 5px;
  }

  .modal-auth .modal-body .content .links {
    max-width: 280px;
    width: 100%;
  }

  .modal-auth .modal-body .content .links button {
    font-size: 11px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 16px;
  }

  .modal-auth .modal-body .content .links button:not(:last-child) {
    margin-bottom: 3px;
  }

  .modal-auth .modal-body .content .code {
    margin: 0 -4px;
    direction: ltr;
  }

  .modal-auth .modal-body .content .code .form-group {
    padding: 0 4px;
    max-width: 20%;
    width: 100%;
  }

  .modal-auth .modal-body .content .code .form-group .form-control {
    width: 48px;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
  }

  .modal-auth .modal-body .content .btns button:first-child {
    width: 37px;
    height: 37px;
    border-radius: 8px;
    font-size: 13px;
    margin-left: 18px;
  }

  .modal-auth .modal-body .content .btns button:last-child {
    max-width: calc(100% - 55px);
    width: 100%;
  }

  @media only screen and (max-width: 575px) {
    .modal-auth .modal-body .content {
      max-width: 100%;
      width: 100%;
    }

    .modal-auth .modal-body .content h4 {
      font-size: 25px;
      line-height: 35px;
    }

    .modal-auth .modal-body .content p {
      font-size: 12px;
      line-height: 24px;
    }

    .modal-auth .modal-body .content .socials,
    .modal-auth .modal-body .content .or,
    .modal-auth .modal-body .content h5,
    .modal-auth .modal-body .content form,
    .modal-auth .modal-body .content .links {
      max-width: 100%;
    }
  }

  .modal-auth .modal-body .image {
    top: 60%;
    transform: translateY(-50%);
    left: 15px;
    max-width: 55%;
    width: 100%;
  }

  @media only screen and (max-width: 767px) {
    .modal-auth .modal-body .image {
      max-width: 50%;
    }
  }

  .modal-auth .modal-body .image img {
    filter: drop-shadow(0px 4px 40px rgba(0, 0, 0, 0.05));
  }

  .about-us {
    margin-top: 72px;
  }

  .about-us::after {
    content: "";
    top: 0;
    left: 0;
    transform: translateX(-88px);
    width: 75%;
    height: 338px;
    background: url("./../images/about-us-01.png") 0 0 no-repeat;
    background-size: 100% 100%;
    border-radius: 100px;
    z-index: -1;
  }

  .about-us-title {
    font-size: 24px;
    line-height: 42px;
    padding-top: 32px;
    font-weight: 900;
  }

  .about-us-sub-title {
    font-size: 18px;
    opacity: 0.8;
    line-height: 30px;
    margin-bottom: 18px;
  }

  @media only screen and (max-width: 991px) {
    .about-us::after {
      border-radius: 50px;
      width: 85%;
    }
  }

  @media only screen and (max-width: 767px) {
    .about-us::after {
      width: 85%;
      transform: translateX(0);
      border-radius: 0 20px 20px 0;
    }
  }

  @media only screen and (max-width: 575px) {
    .about-us::after {
      width: 100%;
      border-radius: 0;
      height: 220px;
    }
  }

  .about-us-whay-me {
    margin: 170px 0 205px;
  }

  .about-us-whay-me .title {
    margin-left: 48px;
    white-space: nowrap;
  }

  .about-us-whay-me .title .fa {
    font-size: 24px;
    color: rgba(73, 73, 73, 0.7);
    line-height: 42px;
  }

  .about-us-whay-me .title .fa::after {
    content: "";
    width: 100%;
    height: 6px;
    background-color: rgba(138, 154, 221, 0.6);
    border-radius: 9px;
    right: 25px;
    bottom: 8px;
    z-index: -1;
  }

  .about-us-whay-me .title .en {
    color: rgba(73, 73, 73, 0.5);
    font-size: 18px;
    line-height: 30px;
    direction: ltr;
  }

  .about-us-whay-me ul {
    gap: 12px;
    max-width: 100%;
    width: 100%;
    height: 100%;
  }

  .about-us-whay-me ul li {
    background-color: #fff;
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.02);
    flex: 0 0 auto;
    max-width: calc(25% - 12px);
    width: 100%;
    padding: 22px 12px 21px;
    font-size: 10px;
    font-weight: 500;
    height: 100%;
  }

  .about-us-whay-me ul li i {
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 6px;
    margin-left: 3px;
    font-size: 13px;
  }

  @media only screen and (max-width: 1199px) {
    .about-us-whay-me .title {
      margin-left: 34px;
    }

    .about-us-whay-me .title .fa {
      font-size: 20px;
      line-height: 36px;
    }

    .about-us-whay-me .title .fa::after {
      right: 20px;
    }

    .about-us-whay-me .title .en {
      font-size: 16px;
      line-height: 26px;
    }
  }

  @media only screen and (max-width: 991px) {
    .about-us-whay-me ul {
      gap: 8px;
    }

    .about-us-whay-me ul li {
      max-width: calc(25% - 8px);
    }
  }

  @media only screen and (max-width: 767px) {
    .about-us-whay-me ul li {
      max-width: calc(33.333333% - 8px);
    }

    .about-us-whay-me ul li:last-child {
      max-width: 100%;
    }
  }

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

    .about-us-whay-me ul li,
    .about-us-whay-me ul li:last-child {
      max-width: calc(50% - 8px);
    }
  }

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

    .about-us-whay-me ul li,
    .about-us-whay-me ul li:last-child {
      max-width: 100%;
    }
  }

  .about-us-our-goal .title,
  .about-us-members .title,
  .about-us-story .title {
    font-size: 24px;
    line-height: 32px;
    color: rgba(73, 73, 73, 0.7);
    z-index: 2;
    width: -moz-fit-content;
    width: fit-content;
  }

  .about-us-our-goal .title::after,
  .about-us-members .title::after,
  .about-us-story .title::after {
    content: "";
    bottom: 5px;
    right: 24px;
    width: 100%;
    height: 5px;
    background-color: rgba(138, 154, 221, 0.6);
    border-radius: 8px;
    z-index: -1;
  }

  .about-us-our-goal .sub-title,
  .about-us-members .sub-title,
  .about-us-story .sub-title {
    direction: ltr;
    color: rgba(73, 73, 73, 0.5);
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 5px;
  }

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

    .about-us-our-goal .title,
    .about-us-members .title,
    .about-us-story .title {
      font-size: 18px;
      line-height: 24px;
    }

    .about-us-our-goal .title::after,
    .about-us-members .title::after,
    .about-us-story .title::after {
      right: 0;
    }

    .about-us-our-goal .sub-title,
    .about-us-members .sub-title,
    .about-us-story .sub-title {
      font-size: 14px;
      line-height: 20px;
      margin-top: 20px;
    }
  }

  .about-us-our-goal {
    padding: 24px 37px 32px 37px;
  }

  .about-us-our-goal::before {
    content: "";
    top: 0;
    right: 0;
    z-index: -1;
    width: 200px;
    height: 200px;
    background-color: #869beb;
    transform: translate(80px, -80px);
  }

  .about-us-our-goal p {
    font-size: 12px;
    line-height: 24px;
    color: rgba(73, 73, 73, 0.5);
    max-width: calc(100% - 270px);
    width: 100%;
  }

  .about-us-our-goal img {
    bottom: 32px;
    left: 36px;
    width: 227px;
    height: 300px;
  }

  @media only screen and (max-width: 991px) {
    .about-us-our-goal {
      padding-top: 170px;
    }

    .about-us-our-goal p {
      max-width: 100%;
    }

    .about-us-our-goal img {
      transform: translateX(-50%);
      top: -160px;
      bottom: auto;
      left: 50%;
    }
  }

  @media only screen and (max-width: 575px) {
    .about-us-our-goal {
      padding: 170px 16px 24px;
    }
  }

  .about-us-members .sub-title {
    direction: rtl;
    margin-bottom: 80px;
  }

  .about-us-members-box:not(:last-child) {
    margin-bottom: 90px;
  }

  .about-us-members-box::after {
    content: "";
    top: 50px;
    right: 0;
    width: 100vw;
    background-color: rgba(138, 154, 221, 0.7);
    height: 22px;
    border-radius: 9px;
    z-index: -1;
  }

  .about-us-members-box .info {
    white-space: nowrap;
    max-width: calc(33.333333% - 24px);
    margin-left: 24px;
  }

  .about-us-members-box .info .en {
    font-size: 18px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 30px;
  }

  .about-us-members-box .info .fa {
    font-size: 24px;
    color: rgba(73, 73, 73, 0.7);
    line-height: 40px;
    font-weight: bold;
    margin-top: -8px;
  }

  .about-us-members-box-item {
    border-radius: 18px;
    background-color: #fff;
    box-shadow: 0px 27px 50px rgba(0, 0, 0, 0.02);
    padding: 24px 22px 20px 22px;
  }

  .about-us-members-box-item .info-member img {
    width: 65px;
    height: 65px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    margin-left: 12px;
  }

  .about-us-members-box-item .info-member .detail h2 {
    font-size: 18px;
    color: rgba(73, 73, 73, 0.7);
    line-height: 31px;
    margin-bottom: 4px;
  }

  .about-us-members-box-item .info-member .detail h5 {
    font-size: 12px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 22px;
  }

  .about-us-members-box-item p {
    font-size: 10px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 22px;
    padding-right: 15px;
    margin-bottom: 10px;
  }

  .about-us-members-box-item p::before {
    content: "";
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background-color: #8a9add;
    border-radius: 9px;
  }

  .about-us-members-box-item .socials li:not(:last-child) {
    margin-left: 12px;
  }

  .about-us-members-box-item .socials li a {
    background-color: #fff;
    box-shadow: 0px 10px 17px rgba(0, 0, 0, 0.05);
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 15px;
    color: #787878;
  }

  .about-us-members-box-item .btn {
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 21px;
  }

  .about-us-members-box .swiper {
    max-width: 66.666667%;
    width: 100%;
    padding-bottom: 0;
  }

  @media only screen and (max-width: 991px) {
    .about-us-members-box::after {
      top: 50%;
      right: auto;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .about-us-members-box .info {
      margin-left: 0;
    }

    .about-us-members-box .info,
    .about-us-members-box .swiper {
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 767px) {
    .about-us-members-box .info .en {
      font-size: 14px;
      line-height: 24px;
    }

    .about-us-members-box .info .fa {
      font-size: 18px;
      line-height: 28px;
      margin-top: 5px;
    }
  }

  .about-us-story {
    margin-top: 257px;
    padding: 25px 35px 40px;
  }

  .about-us-story::after {
    content: "";
    top: -65px;
    left: -65px;
    width: 212px;
    height: 212px;
    background-color: #869beb;
    z-index: -1;
  }

  .about-us-story .sub-title {
    margin-bottom: 7px;
  }

  .about-us-story p {
    font-size: 12px;
    line-height: 24px;
    color: rgba(73, 73, 73, 0.6);
    max-width: calc(100% - 280px);
    width: 100%;
  }

  .about-us-story img {
    width: 182px;
    height: 268px;
    bottom: 8px;
    left: 6px;
  }

  @media only screen and (max-width: 991px) {
    .about-us-story {
      padding-top: 210px;
    }

    .about-us-story p {
      max-width: 100%;
    }

    .about-us-story img {
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  @media only screen and (max-width: 767px) {
    .about-us-story {
      margin-top: 180px;
    }
  }

  @media only screen and (max-width: 575px) {
    .about-us-story {
      padding: 200px 16px 30px;
    }
  }

  .contact-us {
    margin-top: 90px;
  }

  .contact-us-how-to {
    padding-top: 75px;
  }

  .contact-us-how-to::after {
    content: "";
    top: 0;
    left: 0;
    width: 80%;
    height: 223px;
    background: url("./../images/bg-contact-us.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    border-radius: 80px;
    transform: translateX(-88px);
  }

  @media only screen and (max-width: 991px) {
    .contact-us-how-to::after {
      transform: translateX(0px);
      border-radius: 0 50px 50px 0;
      height: 70%;
    }
  }

  @media only screen and (max-width: 575px) {
    .contact-us-how-to::after {
      border-radius: 0;
      width: 100%;
    }
  }

  .contact-us-how-to::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 245%;
    background: url("./../images/bg-contact-01.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -4;
    transform: translateY(-190px);
  }

  @media only screen and (max-width: 767px) {
    .contact-us-how-to::before {
      background-position: center center;
    }
  }

  .contact-us-how-to-wrapper {
    padding: 24px 35px;
  }

  .contact-us-how-to-wrapper .title {
    font-size: 24px;
    line-height: 42px;
    color: rgba(73, 73, 73, 0.7);
  }

  .contact-us-how-to-wrapper .sub-title {
    font-size: 18px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 30px;
    margin-top: -5px;
    direction: ltr;
  }

  .contact-us-how-to-wrapper p {
    max-width: calc(100% - 240px);
    width: 100%;
    color: rgba(73, 73, 73, 0.5);
    font-size: 12px;
    line-height: 24px;
  }

  .contact-us-how-to-wrapper img {
    bottom: 24px;
    left: 12px;
    width: 235px;
    height: 298px;
  }

  @media only screen and (max-width: 991px) {
    .contact-us-how-to-wrapper {
      padding-top: 230px;
    }

    .contact-us-how-to-wrapper p {
      max-width: 100%;
    }

    .contact-us-how-to-wrapper img {
      top: -100px;
      bottom: auto;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  @media only screen and (max-width: 575px) {
    .contact-us-how-to-wrapper {
      padding: 230px 16px 32px;
      border-radius: 20px;
    }

    .contact-us-how-to-wrapper .title {
      font-size: 18px;
      line-height: 28px;
    }

    .contact-us-how-to-wrapper .sub-title {
      font-size: 14px;
      line-height: 24px;
    }
  }

  .contact-us-socials {
    margin: 97px 0 115px;
  }

  .contact-us-socials .title {
    font-size: 24px;
    line-height: 32px;
    color: rgba(73, 73, 73, 0.7);
    padding-left: 50px;
    max-width: 25%;
  }

  .contact-us-socials .title::after {
    content: "";
    bottom: 7px;
    right: 0;
    width: calc(100% - 50px);
    height: 6px;
    background-color: rgba(138, 154, 221, 0.6);
    border-radius: 9px;
    z-index: -1;
  }

  .contact-us-socials ul {
    gap: 20px;
  }

  .contact-us-socials ul li {
    max-width: calc(25% - 20px);
  }

  .contact-us-socials ul li a,
  .contact-us-socials ul li a:hover,
  .contact-us-socials ul li a:focus,
  .contact-us-socials ul li a:active {
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.02);
    font-size: 18px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 30px;
    padding: 14px 0;
  }

  .contact-us-socials ul li a i,
  .contact-us-socials ul li a:hover i,
  .contact-us-socials ul li a:focus i,
  .contact-us-socials ul li a:active i {
    margin-left: 4px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    font-size: 18px;
    transition: all 0.3s ease-in-out;
  }

  .contact-us-socials ul li a:hover i {
    background-color: #8a9add;
    color: #fff;
  }

  @media only screen and (max-width: 991px) {
    .contact-us-socials .title {
      max-width: 260px;
      padding-left: 0;
    }
  }

  @media only screen and (max-width: 767px) {
    .contact-us-socials ul {
      gap: 12px;
    }

    .contact-us-socials ul li {
      max-width: calc(50% - 6px);
    }

    .contact-us-socials ul li a,
    .contact-us-socials ul li a:hover,
    .contact-us-socials ul li a:focus,
    .contact-us-socials ul li a:active {
      font-size: 14px;
    }
  }

  .contact-us-form .heading,
  .contact-us-my-address .heading {
    padding-bottom: 12px;
    margin-bottom: 110px;
  }

  .contact-us-form .heading::after,
  .contact-us-form .heading::before,
  .contact-us-my-address .heading::after,
  .contact-us-my-address .heading::before {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .contact-us-form .heading::after,
  .contact-us-my-address .heading::after {
    content: "";
    width: 33px;
    height: 3px;
    background-color: #8a9add;
  }

  .contact-us-form .heading::before,
  .contact-us-my-address .heading::before {
    content: "\e900";
    font-family: "icomoon";
    color: rgba(138, 154, 221, 0.5);
    font-size: 20px;
    bottom: -28px;
  }

  .contact-us-form .heading .title,
  .contact-us-my-address .heading .title {
    font-size: 24px;
    font-weight: 900;
    color: rgba(73, 73, 73, 0.8);
    line-height: 40px;
  }

  .contact-us-form .heading .sub-title,
  .contact-us-my-address .heading .sub-title {
    color: rgba(73, 73, 73, 0.45);
    font-size: 18px;
    line-height: 32px;
  }

  .contact-us-form::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 115%;
    background: url("./../images/bg-contact-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-20px);
    z-index: -3;
  }

  @media only screen and (max-width: 767px) {
    .contact-us-form::after {
      background-position: center center;
    }
  }

  .contact-us-form img {
    border-radius: 22px;
    max-height: 491px;
  }

  .contact-us-form p {
    color: rgba(73, 73, 73, 0.8);
    line-height: 32px;
    margin-bottom: 22px;
    font-size: 16px;
  }

  .contact-us-form form {
    row-gap: 18px;
  }

  .contact-us-form form .form-group>i {
    right: 34px;
    font-size: 24px;
    color: #494949;
  }

  .contact-us-form form .form-group.textarea {
    background-color: #fff;
    height: 229px;
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.02);
    padding: 72px 32px 60px;
  }

  .contact-us-form form .form-group label {
    top: 24px;
    right: 34px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(73, 73, 73, 0.8);
    line-height: 24px;
    z-index: 2;
  }

  .contact-us-form form .form-group label i {
    font-size: 20px;
    margin-left: 11px;
    color: #494949;
  }

  .contact-us-form form .form-group .form-control {
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.02);
    height: 70px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(73, 73, 73, 0.8);
    padding-right: 67px;
  }

  .contact-us-form form .form-group .form-control::-moz-placeholder {
    font-size: 12px;
  }

  .contact-us-form form .form-group .form-control::placeholder {
    font-size: 12px;
  }

  .contact-us-form form .form-group textarea.form-control {
    padding: 0;
    -ms-overflow-style: none;
    scrollbar-width: 0;
    resize: none;
    box-shadow: none;
    height: 91px;
  }

  .contact-us-form form .form-group textarea.form-control::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .contact-us-form form .form-group .btn {
    bottom: 25px;
    left: 39px;
    font-size: 12px;
    font-weight: 500;
    padding: 9px 18px;
    z-index: 3;
  }

  @media only screen and (max-width: 575px) {
    .contact-us-form p {
      font-size: 14px;
      line-height: 24px;
    }

    .contact-us-form form .form-group .btn {
      bottom: 20px;
      left: 30px;
    }
  }

  .contact-us-my-address {
    margin-top: 122px;
  }

  .contact-us-my-address .heading {
    margin-bottom: 94px;
  }

  .contact-us-my-address .heading::before {
    content: none;
  }

  .contact-us-my-address-wrapper {
    padding-top: 100px;
  }

  .contact-us-my-address-wrapper::after,
  .contact-us-my-address-wrapper::before {
    content: "";
    top: 0;
    left: 0;
  }

  .contact-us-my-address-wrapper::after {
    background-color: #fff;
    width: 100%;
    height: 200px;
    z-index: -1;
  }

  @media only screen and (max-width: 575px) {
    .contact-us-my-address-wrapper::after {
      margin: 0 -12px;
      width: calc(100% + 24px);
      border-radius: 20px;
    }
  }

  .contact-us-my-address-wrapper::before {
    width: 212px;
    height: 212px;
    background-color: #869beb;
    transform: translate(-40%, -40%);
    z-index: -2;
  }

  .contact-us-my-address-wrapper .map {
    max-width: 80%;
    margin-bottom: 73px;
  }

  .contact-us-my-address-wrapper .map::after {
    content: "";
    max-width: 70%;
    width: 100%;
    background-color: rgba(16, 129, 232, 0.37);
    height: 36px;
    border-radius: 14px;
    filter: blur(50px);
    bottom: 0;
    left: 15%;
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .contact-us-my-address-wrapper .map {
      max-width: 90%;
    }
  }

  .contact-us-my-address-wrapper iframe {
    border-radius: 13px;
    background-color: #fff;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.02);
    width: 100%;
    height: 373px;
  }

  @media only screen and (max-width: 767px) {
    .contact-us-my-address-wrapper iframe {
      height: 300px;
    }
  }

  @media only screen and (max-width: 499px) {
    .contact-us-my-address-wrapper iframe {
      height: 200px;
    }
  }

  .contact-us-my-address-wrapper .btn {
    max-width: -moz-fit-content;
    max-width: fit-content;
    font-size: 12px;
    font-weight: 500;
    padding: 20px 27px;
    border-radius: 9px;
  }

  .category-page {
    margin: 112px 0 0;
  }

  @media only screen and (max-width: 991px) {
    .category-page {
      margin-top: 60px;
    }
  }

  .category-page-learning-path .container {
    padding-bottom: 60px;
    border-bottom: 4px solid rgba(134, 155, 235, 0.2);
  }

  .category-page-learning-path .container::after {
    content: "";
    width: 100vw;
    height: 16px;
    background-color: rgba(138, 154, 221, 0.6);
    top: 100px;
    right: 0;
    z-index: -1;
    border-radius: 9px;
  }

  @media only screen and (max-width: 991px) {
    .category-page-learning-path .container::after {
      top: 45%;
      transform: scaleX(2);
    }
  }

  .category-page-learning-path::before {
    content: "";
    right: 0;
    top: 0;
    z-index: -1;
    background: url("./../images/shape-category-01.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 83px;
    height: 200px;
  }

  .category-page-learning-path::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 167%;
    background: url("./../images/bg-category-01.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-210px);
    z-index: -3;
  }

  @media only screen and (max-width: 767px) {
    .category-page-learning-path::after {
      background-position: center center;
    }
  }

  .category-page-learning-path .info-text {
    padding: 42px 0 0 28px;
  }

  .category-page-learning-path .info-text .sup-title {
    font-size: 18px;
    line-height: 32px;
    color: rgba(73, 73, 73, 0.5);
  }

  .category-page-learning-path .info-text .title {
    font-size: 24px;
    line-height: 10px;
    color: rgba(73, 73, 73, 0.7);
  }

  .category-page-learning-path .info-text .btn {
    font-size: 10px;
    font-weight: 500;
    border-radius: 9px;
    padding: 12px 6px;
    line-height: 21px;
    margin-top: 50px;
  }

  .category-page-learning-path .info-text .btn i {
    margin-right: 5px;
  }

  .category-page-learning-path .swiper {
    max-width: calc(100% - 230px);
    width: 100%;
    padding-bottom: 56px;
  }

  .category-page-learning-path .swiper-button-next,
  .category-page-learning-path .swiper-button-prev {
    left: 12px;
  }

  .category-page-learning-path .swiper-button-prev {
    left: 42px;
  }

  @media only screen and (max-width: 991px) {
    .category-page-learning-path .info-text {
      width: 100%;
    }

    .category-page-learning-path .info-text .btn {
      margin-top: 0;
    }

    .category-page-learning-path .swiper {
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 575px) {
    .category-page-learning-path .info-text .btn {
      max-width: -moz-fit-content;
      max-width: fit-content;
      margin-top: 24px;
    }
  }

  .category-page-heading {
    margin-bottom: 7px;
  }

  .category-page-heading .btn {
    max-width: 80px;
    height: 42px;
    line-height: 42px;
    font-size: 13px;
    font-weight: 500;
  }

  .category-page-heading .btn i {
    font-size: 15px;
  }

  .category-page-title {
    color: rgba(73, 73, 73, 0.7);
    font-size: 24px;
    line-height: 29px;
  }

  .category-page-sub-title {
    font-size: 18px;
    line-height: 20px;
    color: rgba(73, 73, 73, 0.5);
  }

  .category-page-content {
    margin-top: 60px;
  }

  .category-page-content::after {
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56%;
    background: url("./../images/bg-category-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(15%);
  }

  @media only screen and (max-width: 767px) {
    .category-page-content::after {
      background-position: center center;
    }
  }

  .category-page-content .shape-1 {
    top: 0;
    right: 0;
    width: 34px;
    height: 145px;
    background: url("./../images/shape-category-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-140px);
    z-index: -1;
  }

  .category-page-content .shape-2 {
    top: 0;
    left: 0;
    width: 12px;
    height: 142px;
    background: url("./../images/shape-category-03.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-60px);
    z-index: -1;
  }

  .category-page-content .shape-3 {
    bottom: 0;
    right: 0;
    width: 26px;
    height: 146px;
    background: url("./../images/shape-category-04.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-80px);
    z-index: -1;
  }

  .category-page-content .shape-4 {
    bottom: 0;
    left: 0;
    width: 21px;
    height: 143px;
    background: url("./../images/shape-category-05.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(50px);
    z-index: -1;
  }

  .category-page-sidebar {
    z-index: 999;
  }

  .category-page-sidebar-backdrop {
    z-index: 980;
  }

  .category-page-sidebar .filters,
  .category-page-sidebar .search,
  .category-page-sidebar .category-list,
  .category-page-sidebar .range-price {
    background-color: #fff;
    box-shadow: 0px 19px 57px rgba(0, 0, 0, 0.05);
    margin-bottom: 18px;
  }

  .category-page-sidebar .filters {
    padding: 27px 26px;
  }

  .category-page-sidebar .filters .title {
    font-size: 18px;
    font-weight: bold;
    color: rgba(73, 73, 73, 0.7);
  }

  .category-page-sidebar .filters .title i {
    font-size: 22px;
    color: #8a9add;
    margin-left: 10px;
  }

  .category-page-sidebar .search {
    padding: 10px 17px;
  }

  .category-page-sidebar .search .form-control {
    height: 59px;
    border: 1px solid rgba(73, 73, 73, 0.7);
    padding: 0 18px;
  }

  .category-page-sidebar .search .form-control:focus {
    border-color: #8a9add;
  }

  .category-page-sidebar .search button {
    color: rgba(73, 73, 73, 0.7);
    font-size: 16px;
    left: 32px;
  }

  .category-page-sidebar .category-list {
    padding: 28px 25px;
  }

  .category-page-sidebar ul li:not(:last-child) {
    margin-bottom: 10px;
  }

  .category-page-sidebar .box {
    margin-bottom: 18px;
  }

  .category-page-sidebar .box-heading {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background-color: #8a9add;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 18px 30px;
    cursor: pointer;
  }

  .category-page-sidebar .box-heading i {
    font-size: 6px;
    transition: all 0.3s ease-in-out;
  }

  .category-page-sidebar .box-heading:not(.collapsed) i {
    transform: rotate(180deg);
  }

  .category-page-sidebar .box-body {
    padding: 20px;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
  }

  .category-page-sidebar .range-price {
    padding: 35px 32px 28px 5px;
  }

  .category-page-sidebar .range-price .price {
    padding-left: 19px;
    margin-bottom: 12px;
  }

  .category-page-sidebar .range-price .price .value {
    margin-top: 22px;
    font-size: 11px;
    color: rgba(73, 73, 73, 0.7);
  }

  .category-page-sidebar .range-price .noUi-target {
    background-color: rgba(138, 154, 221, 0.5);
    border: none;
    height: 3px;
  }

  .category-page-sidebar .range-price .noUi-connect {
    background-color: #8a9add;
  }

  .category-page-sidebar .range-price .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
    width: 9px;
    height: 9px;
    background-color: #8a9add;
    border: none;
    box-shadow: none;
    top: -3px;
    left: -5px;
    cursor: pointer;
  }

  .category-page-sidebar .range-price .noUi-horizontal .noUi-tooltip {
    background-color: #8a9add;
    border: none;
    box-shadow: 0px 10px 20px 2px rgba(138, 154, 221, 0.5);
    font-size: 9px;
    line-height: 14.5px;
    padding: 2px 7px;
    color: #fff;
    border-radius: 8px;
  }

  .category-page-sidebar .range-price .custom-switch+.custom-switch {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #dcdcdc;
  }

  .category-page-sidebar .range-price .custom-switch+.custom-switch .custom-switch-label::before {
    top: 11px;
  }

  .category-page-sidebar .range-price .custom-switch+.custom-switch .custom-switch-label::after {
    top: 12px;
  }

  .category-page-sidebar .range-price .btn {
    margin-top: 27px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
    padding: 9px;
    max-width: 70%;
    width: 100%;
  }

  .category-page-sidebar .range-price .btn i {
    font-size: 14px;
    margin-left: 4px;
  }

  .category-page-products {
    margin: 0 -10px;
    gap: 45px 0;
  }

  .category-page-products::after {
    content: "";
    top: 200px;
    left: 20px;
    background-color: rgba(138, 154, 221, 0.6);
    border-radius: 9px;
    height: 22px;
    width: calc(100% - 40px);
    z-index: -1;
  }

  .category-page-products .col-lg-4 {
    padding: 0 10px;
  }

  .category-page .pagination {
    margin-top: 116px;
  }

  @media only screen and (max-width: 991px) {
    .category-page-heading {
      margin-bottom: 24px;
    }

    .category-page-sidebar {
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease-in-out 0.3s;
    }

    .category-page-sidebar-backdrop {
      transition: all 0.3s ease-in-out;
    }

    .category-page-sidebar .content {
      position: fixed;
      z-index: 1054;
      background-color: #fafafa;
      width: 280px;
      height: 100%;
      top: 0;
      right: -280px;
      overflow: hidden auto;
      padding: 20px 12px;
      transition: all 0.3s ease-in-out 0s;
    }

    .category-page-sidebar.opened {
      opacity: 1;
      visibility: visible;
      transition: all 0.3s ease-in-out 0s;
    }

    .category-page-sidebar.opened .content {
      right: 0;
      transition: all 0.3s ease-in-out 0.3s;
    }
  }

  @media only screen and (max-width: 575px) {
    .category-page-title {
      font-size: 18px;
      line-height: 28px;
    }

    .category-page-sub-title {
      font-size: 14px;
      height: 24px;
    }
  }

  .detail-product {
    margin-top: 87px;
    padding-top: 55px;
  }

  @media only screen and (max-width: 767px) {
    .detail-product {
      margin-top: 60px;
    }
  }

  .detail-product::after {
    content: "";
    top: 0;
    right: 0;
    width: 80%;
    height: 223px;
    border-radius: 103px;
    background: url("./../images/bg-detail-product.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateX(320px);
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .detail-product::after {
      transform: translateX(0px);
      border-radius: 50px 0 0 50px;
      width: 60%;
    }
  }

  .detail-product-info::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 300%;
    background: url("./../images/bg-detail-product-3.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-240px);
  }

  @media only screen and (max-width: 767px) {
    .detail-product-info::before {
      background-position: center center;
    }
  }

  .detail-product-info-wrapper {
    margin-right: 15%;
    padding: 40px 24px 20px;
  }

  .detail-product-info h1 {
    font-size: 24px;
    font-weight: 900;
    line-height: 43px;
    color: rgba(73, 73, 73, 0.7);
    margin-left: 7px;
  }

  .detail-product-info .percent {
    max-width: 100%;
    width: 100%;
  }

  .detail-product-info .percent>span {
    top: 0;
    left: 14px;
    font-size: 20px;
    color: rgba(73, 73, 73, 0.8);
    font-weight: 900;
    line-height: 29px;
    transform: translateY(-20px);
  }

  .detail-product-info .percent .progress {
    border-radius: 14px;
    height: 16px;
    direction: ltr;
  }

  .detail-product-info .percent .progress span {
    background: linear-gradient(90.16deg, #8a9add -4.46%, #6782f4 97.13%);
    border-radius: 14px;
  }

  .detail-product-info .teacher {
    margin-left: 18px;
  }

  .detail-product-info .teacher img {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    width: 66px;
    height: 66px;
    margin-left: 12px;
  }

  .detail-product-info .teacher .detail .name {
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
  }

  .detail-product-info .teacher .detail .show-profile {
    color: rgba(138, 154, 221, 0.59);
    font-size: 12px;
    line-height: 20px;
  }

  .detail-product-info .teacher .detail .show-profile:hover {
    color: #8a9add;
  }

  .detail-product-info .info-course {
    gap: 9px;
    max-width: 100%;
    flex: 1 0 auto;
  }

  .detail-product-info .info-course li {
    max-width: 25%;
    width: 100%;
    text-align: center;
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.05);
    font-size: 11px;
    color: #8a9add;
    font-weight: bold;
    line-height: 20px;
    padding: 14px 8px;
    height: 100%;
  }

  .detail-product-info .info-course li span {
    margin-bottom: 5px;
  }

  .detail-product-info .info-course li span i {
    font-size: 16px;
    margin-left: 4px;
  }

  .detail-product-info .status,
  .detail-product-info .price {
    color: rgba(73, 73, 73, 0.8);
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.05);
    background-color: rgba(138, 154, 221, 0.15);
  }

  .detail-product-info .status {
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    padding: 15px 11px 15px 9px;
    margin-left: 83px;
  }

  .detail-product-info .status i {
    font-size: 12px;
    color: #8a9add;
  }

  .detail-product-info .price {
    padding: 20px 17px;
    font-weight: 900;
    color: rgba(73, 73, 73, 0.9);
    font-size: 24px;
  }

  .detail-product-info .price i {
    font-size: 18px;
    color: rgba(73, 73, 73, 0.7);
  }

  .detail-product-info .btn {
    padding: 19px 12px;
    max-width: 100%;
    flex: 1 0 auto;
    font-size: 15px;
    font-weight: 500;
  }

  .detail-product-info .btn i {
    font-size: 17px;
  }

  @media only screen and (max-width: 991px) {
    .detail-product-info-wrapper {
      padding: 30px 18px 15px 20px;
      border-radius: 20px;
      margin-right: 0;
    }
  }

  @media only screen and (max-width: 767px) {
    .detail-product-info .status {
      margin-left: 0;
    }

    .detail-product-info .btn {
      max-width: 100%;
      width: 100%;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-product-info h1 {
      font-size: 18px;
      line-height: 28px;
    }

    .detail-product-info .percent>span {
      font-size: 16px;
      line-height: 28px;
    }

    .detail-product-info .info-course li {
      max-width: calc(50% - 4.5px);
    }

    .detail-product-info .status,
    .detail-product-info .price {
      border-radius: 12px;
    }

    .detail-product-info .price {
      padding: 14px 12px;
      font-size: 18px;
    }

    .detail-product-info .price i {
      font-size: 14px;
    }
  }

  .detail-product-info-student .status {
    margin-left: 12px;
    font-size: 11px;
  }

  .detail-product-info-student .episode {
    margin-left: 0;
  }

  .detail-product-info-student .rate {
    padding-right: 18px;
    margin-right: 14px;
    border-right: 1px solid rgba(73, 73, 73, 0.2);
  }

  .detail-product-info-student .rate span {
    color: rgba(73, 73, 73, 0.5);
    font-weight: 500;
    font-size: 12px;
    margin-left: 15px;
  }

  .detail-product-info-student .rate .stars input {
    top: 0;
    opacity: 0;
  }

  .detail-product-info-student .rate .stars label {
    cursor: pointer;
    font-size: 24px;
    color: rgba(73, 73, 73, 0.5);
  }

  .detail-product-info-student .rate .stars label:not(:last-child) {
    margin-left: 4px;
  }

  .detail-product-info-student .rate .stars label.active {
    color: #ffb800;
  }

  @media only screen and (max-width: 991px) {
    .detail-product-info-student .status {
      margin-left: 0;
    }

    .detail-product-info-student .episode {
      margin-right: auto;
    }

    .detail-product-info-student .rate {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(73, 73, 73, 0.2);
      border-right: 0;
      width: 100%;
    }
  }

  @media only screen and (max-width: 499px) {
    .detail-product-info-student .status {
      width: 100%;
    }

    .detail-product-info-student .episode {
      margin-top: 16px;
    }

    .detail-product-info-student .rate span {
      margin-left: 8px;
    }

    .detail-product-info-student .rate .stars label {
      font-size: 18px;
    }
  }

  .detail-product-description {
    margin: 100px 0 120px;
  }

  .detail-product-description::after {
    content: "";
    top: 230px;
    left: 0;
    width: 100%;
    height: 240%;
    background: url("./../images/bg-detail-product-4.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .detail-product-description::after {
      background-position: center center;
    }
  }

  .detail-product-description-title {
    font-size: 24px;
    line-height: 40px;
    color: rgba(73, 73, 73, 0.8);
    font-weight: 900;
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .detail-product-description-title::after {
    content: "";
    bottom: 6px;
    right: 14px;
    width: 100%;
    background-color: rgba(138, 154, 221, 0.6);
    border-radius: 9px;
    height: 5px;
    z-index: -1;
  }

  .detail-product-description p {
    font-size: 12px;
    font-weight: 500;
    color: #494949;
    line-height: 22px;
    text-align: justify;
  }

  .detail-product-titr {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 42px;
  }

  .detail-product-titr::before {
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("./../images/bg-text-01.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 215px;
    height: 66px;
    z-index: -1;
  }

  .detail-product-titr::after {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    background-color: #8a9add;
    width: 36px;
    height: 4px;
    transform: translate(-50%, 32px);
  }

  .detail-product-introduction-success .title,
  .detail-product-introduction-danger .title {
    max-width: 212px;
    box-shadow: 0px 46px 50px rgba(39, 173, 123, 0.05);
    width: 100%;
    z-index: 2;
    height: 170px;
    font-size: 16px;
    -moz-columns: #494949;
    columns: #494949;
    line-height: 34px;
    padding: 20px 18px;
    margin-left: 50px;
  }

  .detail-product-introduction-success .title::after,
  .detail-product-introduction-danger .title::after {
    content: "";
    z-index: -1;
    background-color: rgba(39, 173, 123, 0.15);
    width: 167px;
    height: 87px;
    filter: blur(200px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .detail-product-introduction-success .title::before,
  .detail-product-introduction-danger .title::before {
    content: "";
    top: 14px;
    left: 12px;
    width: 67px;
    height: 62px;
    background: url("./../images/hand-success.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .detail-product-introduction-success .title div,
  .detail-product-introduction-danger .title div {
    max-width: 124px;
    width: 100%;
  }

  .detail-product-introduction-success ul li,
  .detail-product-introduction-danger ul li {
    font-size: 12px;
    color: rgba(89, 89, 89, 0.68);
    text-align: justify;
    line-height: 24px;
    padding-right: 43px;
  }

  .detail-product-introduction-success ul li:not(:last-child),
  .detail-product-introduction-danger ul li:not(:last-child) {
    margin-bottom: 16px;
  }

  .detail-product-introduction-success ul li::before,
  .detail-product-introduction-danger ul li::before {
    content: "";
    width: 26px;
    height: 26px;
    background-color: rgba(39, 173, 123, 0.7);
    border-radius: 8px;
    top: 5px;
    right: 0;
  }

  .detail-product-introduction-danger {
    margin-top: 80px;
  }

  .detail-product-introduction-danger .title {
    margin: 0 50px 0 0;
  }

  .detail-product-introduction-danger .title::after {
    background-color: rgba(225, 83, 74, 0.15);
  }

  .detail-product-introduction-danger .title::before {
    background-image: url("./../images/hand-danger.png");
  }

  .detail-product-introduction-danger ul li {
    padding: 0 0 0 42px;
  }

  .detail-product-introduction-danger ul li::before {
    right: auto;
    left: 0;
    background-color: rgba(227, 83, 74, 0.75);
  }

  @media only screen and (max-width: 767px) {
    .detail-product-introduction .title {
      margin: 0 auto 32px;
    }
  }

  .detail-product-seasons .detail-product-titr {
    margin-bottom: 63px;
  }

  .detail-product-seasons {
    margin: 132px 0 114px;
  }

  .detail-product-seasons::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 181%;
    background: url("./../images/bg-detail-product-5.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-30px);
  }

  @media only screen and (max-width: 767px) {
    .detail-product-seasons {
      margin-bottom: 80px;
    }

    .detail-product-seasons::after {
      background-position: center center;
    }
  }

  .detail-product-seasons .item {
    background-color: #fff;
    box-shadow: 0px 46px 50px rgba(138, 154, 221, 0.05);
  }

  .detail-product-seasons .item:not(:last-child) {
    margin-bottom: 14px;
  }

  .detail-product-seasons .item .time {
    border-radius: 5px;
    background-color: rgba(138, 154, 221, 0.51);
    width: 66px;
    height: 26px;
    line-height: 26px;
  }

  .detail-product-seasons .item .heading {
    background-color: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #494949;
    line-height: 22px;
    padding: 21px 38px;
    cursor: pointer;
  }

  .detail-product-seasons .item .heading span {
    flex: 1;
  }

  .detail-product-seasons .item .heading i {
    font-size: 10px;
    color: #8a9add;
    transition: all 0.3s ease-in-out;
  }

  .detail-product-seasons .item .heading:not(.collapsed) {
    box-shadow: 0px 46px 50px rgba(138, 154, 221, 0.1);
  }

  .detail-product-seasons .item .heading:not(.collapsed) i {
    transform: rotate(180deg);
  }

  .detail-product-seasons .item .body {
    padding: 32px 38px;
  }

  .detail-product-seasons .item .body ul li {
    counter-increment: li;
    font-size: 12px;
    font-weight: 500;
    color: rgba(73, 73, 73, 0.7);
  }

  .detail-product-seasons .item .body ul li:not(:last-child) {
    padding-bottom: 12px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(73, 73, 73, 0.1);
  }

  .detail-product-seasons .item .body ul li::before {
    content: counter(li);
    width: 23px;
    height: 23px;
    text-align: center;
    line-height: 23px;
    background-color: #8a9add;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 7px;
  }

  .detail-product-seasons .item .body ul li a {
    flex: 1;
    padding-left: 8px;
  }

  .detail-product-seasons .item .body ul li a:hover {
    color: #8a9add;
  }

  .detail-product-seasons .item .body ul li i {
    font-size: 21px;
    color: #8a9add;
    margin-left: 22px;
  }

  @media only screen and (max-width: 767px) {
    .detail-product-seasons .item .heading {
      padding: 16px 20px;
    }

    .detail-product-seasons .item .body {
      padding: 24px 20px;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-product-seasons .item .heading {
      padding: 16px 12px;
    }

    .detail-product-seasons .item .heading i {
      font-size: 7px;
    }

    .detail-product-seasons .item .body {
      padding: 24px 12px;
    }

    .detail-product-seasons .item .body ul li i {
      font-size: 17px;
      margin-left: 8px;
    }
  }

  .detail-product-related .detail-product-titr {
    margin-bottom: 118px;
  }

  .detail-product-related {
    margin: 160px 0 122px;
  }

  @media only screen and (max-width: 767px) {
    .detail-product-related {
      margin: 100px 0 0;
    }
  }

  .detail-product-related-wrapper {
    padding: 0 22px;
  }

  .detail-product-related-wrapper::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 59%;
    background: url("./../images/bg-detail-product-2.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-35px);
  }

  @media only screen and (max-width: 991px) {
    .detail-product-related-wrapper {
      padding: 0 16px;
    }

    .detail-product-related-wrapper::before {
      border-radius: 20px;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-product-related-wrapper {
      padding: 0;
    }

    .detail-product-related-wrapper::before {
      border-radius: 0;
      margin: 0 -12px;
      width: calc(100% + 24px);
    }
  }

  .question .detail-product-titr {
    margin-bottom: 64px;
  }

  .blog {
    margin-top: 94px;
  }

  .blog .shape-after {
    top: 0;
    right: 0;
    width: 67px;
    height: 202px;
    background: url("./../images/shape-blog-01.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .blog .shape-before {
    top: 355px;
    right: 0;
    width: 35px;
    height: 145px;
    background: url("./../images/shape-blog-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .blog-path-learn::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 154%;
    background: url("./../images/bg-blog-01.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-192px);
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .blog-path-learn::after {
      background-position: center center;
    }
  }

  .blog-path-learn .container::before {
    content: "";
    bottom: 230px;
    right: 20px;
    width: 100vw;
    height: 16px;
    background-color: rgba(138, 154, 221, 0.6);
    border-radius: 9px;
  }

  .blog-path-learn .title {
    font-size: 24px;
    line-height: 28px;
    color: rgba(73, 73, 73, 0.7);
  }

  .blog-path-learn .sub-title {
    line-height: 20px;
    font-size: 18px;
    color: rgba(73, 73, 73, 0.5);
    margin-bottom: 63px;
  }

  .blog-path-learn .swiper-slide {
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease-in-out;
  }

  .blog-path-learn .swiper-slide-active,
  .blog-path-learn .swiper-slide-next,
  .blog-path-learn .swiper-slide-next+div,
  .blog-path-learn .swiper-slide-next+div+div {
    opacity: 1;
    transform: scale(1);
  }

  @media only screen and (max-width: 991px) {
    .blog-path-learn .swiper-slide-next+div+div {
      opacity: 0;
      transform: scale(0);
    }
  }

  @media only screen and (max-width: 767px) {
    .blog-path-learn .swiper-slide-next+div {
      opacity: 0;
      transform: scale(0);
    }
  }

  @media only screen and (max-width: 575px) {
    .blog-path-learn .swiper-slide-next {
      opacity: 0;
      transform: scale(0);
    }
  }

  .blog-archive {
    margin-top: 85px;
  }

  .blog-archive::after {
    content: "";
    z-index: -1;
    top: 15px;
    left: 0;
    width: 100%;
    height: 54%;
    background: url("./../images/bg-blog-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .blog-archive::before {
    content: "";
    bottom: 0;
    left: 0;
    transform: translateY(35%);
    background: url("./../images/bg-blog-03.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 69%;
    z-index: -5;
  }

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

    .blog-archive::after,
    .blog-archive::before {
      background-position: center center;
    }
  }

  .blog-archive .shape-1 {
    bottom: 0;
    right: 0;
    width: 26px;
    height: 144px;
    background: url("./../images/shape-blog-03.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(100px);
    z-index: -1;
  }

  .blog-archive .shape-2 {
    bottom: 0;
    left: 0;
    width: 21px;
    height: 143px;
    background: url("./../images/shape-blog-04.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(190px);
    z-index: -1;
  }

  .blog-archive .filter::before {
    content: "";
    top: 50%;
    right: 253px;
    width: 100vw;
    background-color: rgba(134, 155, 235, 0.2);
    height: 4px;
  }

  .blog-archive .filter .title {
    margin-left: 100px;
  }

  .blog-archive .filter .title .fa {
    color: rgba(73, 73, 73, 0.7);
    line-height: 28px;
    font-size: 24px;
  }

  .blog-archive .filter .title .en {
    font-size: 18px;
    line-height: 20px;
  }

  .blog-archive .filter ul {
    gap: 20px;
    width: 100%;
    flex: 0 0 auto;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: 0;
    padding-left: 245px;
    padding-right: 80px;
  }

  .blog-archive .filter ul::-webkit-scrollbar {
    display: none;
  }

  .blog-archive .filter ul li {
    max-width: -moz-fit-content;
    max-width: fit-content;
    width: 100%;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: bold;
    line-height: 70px;
    background-color: #fff;
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    padding: 0 12px;
    min-width: 160px;
    height: 70px;
    text-align: center;
    z-index: 2;
    overflow: hidden;
  }

  .blog-archive .filter ul li,
  .blog-archive .filter ul li::before {
    transition: all 0.3s ease-in-out;
  }

  .blog-archive .filter ul li::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(97.35deg, #8a9add -24.65%, #b6c4ff 109.39%);
    z-index: -1;
    opacity: 0;
  }

  .blog-archive .filter ul li:hover,
  .blog-archive .filter ul li.active {
    color: #fff;
  }

  .blog-archive .filter ul li:hover::before,
  .blog-archive .filter ul li.active::before {
    opacity: 1;
  }

  @media only screen and (max-width: 991px) {
    .blog-archive .filter ul {
      padding-right: 50px;
    }

    .blog-archive .filter ul li {
      min-width: 110px;
      padding: 0 20px;
      height: 54px;
      line-height: 54px;
      font-size: 14px;
    }
  }

  @media only screen and (max-width: 767px) {
    .blog-archive .filter::before {
      top: auto;
      bottom: 21px;
      right: -32px;
      transform: unset;
    }

    .blog-archive .filter .title {
      margin: 0 0 24px;
      text-align: center;
    }

    .blog-archive .filter ul {
      width: 150%;
      padding: 0 112px 0;
    }
  }

  @media only screen and (max-width: 575px) {
    .blog-archive .filter ul {
      padding: 0 25%;
    }
  }

  .blog-articles {
    margin: 89px 0 100px;
    gap: 23px 0;
  }

  @media only screen and (max-width: 991px) {
    .blog-articles {
      margin: 89px -8px 100px;
    }

    .blog-articles .col-sm-6 {
      padding: 0 8px;
    }
  }

  .detail-blog {
    margin-top: 114px;
  }

  @media only screen and (max-width: 767px) {
    .detail-blog {
      margin-top: 70px;
    }
  }

  .detail-blog-info::after {
    content: "";
    bottom: 18%;
    left: 0;
    width: 742px;
    height: 242px;
    background: url("./../images/bg-detail-blog.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  @media only screen and (max-width: 991px) {
    .detail-blog-info::after {
      width: 80%;
      height: 200px;
      bottom: 26%;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-blog-info::after {
      content: none;
    }
  }

  .detail-blog-info .image {
    margin-bottom: 76px;
  }

  .detail-blog-info .image img {
    border-radius: 18px;
    border: 9px solid rgba(216, 216, 216, 0.69);
    box-shadow: 0px 26px 50px rgba(0, 0, 0, 0.2);
  }

  .detail-blog-info ul li {
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 11px;
    color: #4a9be5;
    font-weight: 500;
    line-height: 19px;
    background-color: rgba(74, 155, 229, 0.15);
  }

  .detail-blog-info ul li:not(:last-child) {
    margin-left: 20px;
  }

  .detail-blog-info ul li i {
    font-size: 13px;
    margin-left: 3px;
  }

  .detail-blog-info ul li.date {
    background-color: rgba(73, 73, 73, 0.15);
    color: rgba(73, 73, 73, 0.5);
  }

  .detail-blog-info .author img {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 58px;
    height: 58px;
    margin-left: 12px;
  }

  .detail-blog-info .author-info .name {
    font-size: 18px;
    line-height: 28px;
    color: rgba(73, 73, 73, 0.7);
  }

  .detail-blog-info .author-info .position {
    font-size: 12px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 18px;
  }

  .detail-blog-info h1 {
    font-weight: 900;
    font-size: 24px;
    line-height: 35px;
    margin: 65px 0 20px;
    color: rgba(73, 73, 73, 0.7);
  }

  @media only screen and (max-width: 767px) {
    .detail-blog-info .image {
      margin-bottom: 50px;
    }

    .detail-blog-info .image img {
      border-width: 4px;
      height: 200px;
    }

    .detail-blog-info .author-info .name {
      font-size: 18px;
    }

    .detail-blog-info h1 {
      font-size: 20px;
      line-height: 30px;
      margin: 40px 0 20px;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-blog-info h1 {
      font-size: 16px;
      line-height: 25px;
    }
  }

  .detail-blog-content {
    margin-bottom: 70px;
  }

  .detail-blog-content p {
    margin-bottom: 16px;
    color: rgba(73, 73, 73, 0.4);
    font-size: 13px;
    text-align: justify;
    font-weight: 500;
  }

  .detail-blog-content img {
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.05);
  }

  .detail-blog-rate-wrapper,
  .detail-blog-like-share-wrapper {
    box-shadow: 0px 33px 50px rgba(0, 0, 0, 0.05);
    padding: 28px 20px;
    font-size: 14px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 25px;
  }

  .detail-blog-rate {
    margin-bottom: 38px;
  }

  .detail-blog-rate::after {
    content: "";
    top: 35px;
    left: 0;
    width: 21px;
    height: 144px;
    background: url("./../images/shape-detail-blog.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .detail-blog-rate-wrapper .stars {
    margin-left: 14px;
  }

  .detail-blog-rate-wrapper .stars input {
    opacity: 0;
    width: 0;
  }

  .detail-blog-rate-wrapper .stars label {
    font-size: 18px;
    color: rgba(73, 73, 73, 0.5);
    cursor: pointer;
  }

  .detail-blog-rate-wrapper .stars label:not(:last-child) {
    margin-left: 5px;
  }

  .detail-blog-rate-wrapper .stars label.active {
    color: #ffb800;
  }

  .detail-blog-like-share {
    margin-bottom: 130px;
  }

  .detail-blog-like-share-wrapper {
    padding: 22px 20px;
  }

  .detail-blog-like-share-wrapper ul li {
    background-color: rgba(74, 155, 229, 0.15);
    border-radius: 7px;
    font-size: 11px;
    color: #4a9be5;
    line-height: 17px;
    padding: 8px;
  }

  .detail-blog-like-share-wrapper ul li:not(:last-child) {
    margin-left: 7px;
  }

  .detail-blog-like-share-wrapper ul li i {
    font-size: 14px;
    margin-left: 3px;
  }

  .detail-blog-like-share-wrapper ul li.like {
    background-color: rgba(255, 86, 86, 0.15);
    color: #ff5656;
  }

  .detail-blog-like-share-wrapper .share {
    font-size: 16px;
    color: rgba(73, 73, 73, 0.8);
    margin-left: 22px;
  }

  .detail-blog-like-share-wrapper .address {
    width: 193px;
    direction: ltr;
    font-size: 11px;
    color: rgba(73, 73, 73, 0.8);
    height: 30px;
    line-height: 30px;
    background-color: rgba(217, 217, 217, 0.4);
    padding-left: 6px;
  }

  .detail-blog-like-share-wrapper .address i {
    font-size: 13px;
    margin-right: 4px;
  }

  @media only screen and (max-width: 575px) {
    .detail-blog-like-share-wrapper ul {
      width: 100%;
    }
  }

  .panel-user {
    padding: 50px 0 38px;
  }

  .panel-user .container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -67px);
    width: 80%;
    height: 34px;
    border-radius: 80px;
    background-color: #8a9add;
    z-index: -1;
  }

  @media only screen and (max-width: 991px) {
    .panel-user .container::after {
      transform: translate(-50%, -38px);
    }
  }

  .panel-user-sidebar {
    width: 250px;
    height: 100%;
    flex: 0 0 auto;
    z-index: 1024;
  }

  .panel-user-sidebar-content {
    background-color: #fff;
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
    padding: 63px 18px 32px;
    z-index: 3;
  }

  .panel-user-sidebar-info img {
    box-shadow: 0px 19px 50px rgba(0, 0, 0, 0.2);
    width: 95px;
    height: 95px;
    margin-bottom: 33px;
  }

  .panel-user-sidebar-info .name {
    font-size: 16px;
    line-height: 20px;
    color: rgba(73, 73, 73, 0.8);
  }

  .panel-user-sidebar-info .wellcome {
    color: rgba(73, 73, 73, 0.7);
    font-size: 13px;
    line-height: 14px;
    margin-bottom: 32px;
  }

  .panel-user-sidebar-nav li:not(:last-child) {
    margin-bottom: 10px;
  }

  .panel-user-sidebar-nav li a {
    font-size: 13px;
    color: rgba(73, 73, 73, 0.7);
    font-weight: 500;
    padding: 14px 16px;
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.05);
  }

  .panel-user-sidebar-nav li a i {
    width: 26px;
    text-align: center;
    font-size: 18px;
    margin-left: 5px;
  }

  .panel-user-sidebar-nav li a.active,
  .panel-user-sidebar-nav li a:hover {
    background-color: #8a9add;
    box-shadow: 0px 15px 40px rgba(138, 154, 221, 0.15);
    color: #fff;
  }

  .panel-user-content {
    margin-right: 18px;
  }

  .panel-user-header {
    box-shadow: 0px 11px 30px rgba(0, 0, 0, 0.05);
    border-radius: 30px;
    padding: 35px 32px;
  }

  .panel-user-header .btn-sidebar {
    font-size: 24px;
    color: #8a9add;
    margin-left: 12px;
  }

  .panel-user-header .name {
    font-weight: 900;
    font-size: 16px;
    line-height: 32px;
    padding-left: 12px;
    margin-left: 12px;
    border-left: 1px solid rgba(73, 73, 73, 0.2);
  }

  .panel-user-header .date {
    font-size: 12px;
    font-weight: 500;
    color: rgba(73, 73, 73, 0.5);
  }

  .panel-user-header .date i {
    font-size: 18px;
    margin-left: 5px;
  }

  .panel-user-header ul li:not(:last-child) {
    margin-left: 24px;
  }

  .panel-user-header ul li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    color: #8a9add;
    border-radius: 5px;
    box-shadow: 0px 21px 20px -1px rgba(0, 0, 0, 0.05);
  }

  .panel-user-header ul li a:hover {
    background-color: #8a9add;
    color: #fff;
    box-shadow: 0px 21px 20px -1px rgba(138, 154, 221, 0.15);
  }

  .panel-user-header ul li a span {
    width: 20px;
    height: 20px;
    font-size: 9px;
    top: 23px;
    left: 20px;
  }

  .panel-user-total-info {
    margin-top: 48px;
  }

  .panel-user-total-info-item {
    box-shadow: 0px 30px 20px rgba(0, 0, 0, 0.04);
    padding: 31px 18px;
  }

  .panel-user-total-info-item i {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    margin-left: 7px;
    font-size: 18px;
  }

  .panel-user-total-info-item .detail .title {
    font-size: 10px;
    font-weight: 500;
    color: rgba(73, 73, 73, 0.4);
    line-height: 15px;
    margin-bottom: 2px;
  }

  .panel-user-total-info-item .detail .value {
    font-size: 13px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 21px;
  }

  .panel-user-send-first-ques,
  .panel-user-first-course {
    margin: 40px 0;
    border-radius: 30px;
    box-shadow: 0px 11px 30px rgba(0, 0, 0, 0.02);
    padding: 51px 49px 45px 56px;
  }

  .panel-user-send-first-ques h4,
  .panel-user-first-course h4 {
    font-size: 20px;
    color: rgba(73, 73, 73, 0.7);
    font-weight: 900;
    line-height: 29px;
  }

  .panel-user-send-first-ques p,
  .panel-user-first-course p {
    line-height: 21px;
    font-size: 16px;
  }

  .panel-user-send-first-ques a,
  .panel-user-first-course a {
    font-size: 12px;
  }

  .panel-user-send-first-ques a i,
  .panel-user-first-course a i {
    font-size: 10px;
  }

  .panel-user-send-first-ques p {
    max-width: calc(100% - 70px);
  }

  .panel-user-send-first-ques img {
    left: 56px;
    width: 90px;
    height: 133px;
  }

  .panel-user-send-first-ques::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    background-color: #869beb;
    border-radius: 50%;
    z-index: -1;
    transform: translate(-54px, -29px);
  }

  .panel-user-first-course {
    padding: 38px 27px 32px;
  }

  .panel-user-first-course img {
    width: 157px;
    height: 94px;
    margin-left: 12px;
  }

  .panel-user-first-course::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 180px;
    background-color: #869beb;
    transform: translate(14px, -18px);
    border-radius: 50%;
    z-index: -1;
  }

  .panel-user-our-goal .title {
    font-size: 20px;
    color: rgba(73, 73, 73, 0.7);
    line-height: 30px;
    width: -moz-fit-content;
    width: fit-content;
  }

  .panel-user-our-goal .title::after {
    content: "";
    bottom: 4px;
    right: 26px;
    width: 100%;
    height: 5px;
    border-radius: 9px;
    background-color: rgba(138, 154, 221, 0.6);
    z-index: -1;
  }

  .panel-user-our-goal .sub-title {
    direction: ltr;
    font-size: 16px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 20px;
    margin-bottom: 7px;
  }

  .panel-user-our-goal p {
    font-size: 12px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 24px;
  }

  @media only screen and (max-width: 1199px) {
    .panel-user-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 1100;
      margin-left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease-in-out 0.3s;
      overflow: hidden auto;
    }

    .panel-user-sidebar-content {
      border-radius: 0;
      position: absolute;
      top: 0;
      right: -250px;
      width: 250px;
      transition: all 0.3s ease-in-out 0s;
    }

    .panel-user-sidebar.opened {
      opacity: 1;
      visibility: visible;
      transition: all 0.3s ease-in-out 0s;
    }

    .panel-user-sidebar.opened .panel-user-sidebar-content {
      right: 0;
      transition: all 0.3s ease-in-out 0.3s;
    }
  }

  @media only screen and (max-width: 991px) {
    .panel-user {
      padding-top: 12px;
    }

    .panel-user-header {
      padding: 24px 16px;
      border-radius: 20px;
    }
  }

  @media only screen and (max-width: 767px) {
    .panel-user-send-first-ques p {
      max-width: 100%;
    }

    .panel-user-send-first-ques,
    .panel-user-first-course {
      padding: 32px 20px;
      border-radius: 20px;
    }

    .panel-user-send-first-ques h4,
    .panel-user-first-course h4 {
      font-size: 16px;
    }

    .panel-user-send-first-ques p,
    .panel-user-first-course p {
      font-size: 13px;
    }
  }

  @media only screen and (max-width: 575px) {
    .panel-user-total-info-item {
      padding: 16px 8px;
      border-radius: 12px;
    }
  }

  @media only screen and (max-width: 369px) {
    .panel-user-total-info .row {
      margin: 0 -6px;
    }

    .panel-user-total-info .row .col-6 {
      padding: 0 6px;
    }
  }

  .f-main {
    font-family: "Yekan Bakh";
  }

  .f-main-fa {
    font-family: "Yekan Bakh FaNum";
  }

  .f-dana {
    font-family: "DanaFaNum";
  }

  .f-kalameh {
    font-family: "Kalameh";
  }

  .f-kalam {
    font-family: "Kalam";
  }

  .f-aviny {
    font-family: "aviny";
  }

  .fw-medium {
    font-weight: 500;
  }

  .fw-semibold {
    font-weight: 600;
  }

  .fw-extrabold {
    font-weight: 800;
  }

  .fw-black {
    font-weight: 900;
  }

  .fs-12 {
    font-size: 12px;
    line-height: 18px;
  }

  .fs-14 {
    font-size: 14px;
    line-height: 22px;
  }

  .fs-16 {
    font-size: 16px;
    line-height: 25px;
  }

  .fs-20 {
    font-size: 20px;
    line-height: 32px;
  }

  .fs-23 {
    font-size: 23px;
    line-height: 44px;
  }

  .fs-24 {
    font-size: 24px;
    line-height: 37px;
  }

  .fs-32 {
    font-size: 32px;
    line-height: 54px;
  }

  .fs-40 {
    font-size: 40px;
    line-height: 62px;
  }

  .fs-42 {
    font-size: 42px;
    line-height: 65px;
  }

  .fs-45 {
    font-size: 45px;
    line-height: 65px;
  }

  .fs-50 {
    font-size: 50px;
    line-height: 77px;
  }

  .rounded-10 {
    border-radius: 10px;
  }

  .rounded-15 {
    border-radius: 15px;
  }

  .rounded-20 {
    border-radius: 20px;
  }

  .rounded-30 {
    border-radius: 30px;
  }

  .rounded-32 {
    border-radius: 32px;
  }

  .bg-danger-two {
    background-color: #e63a2c !important;
  }

  .text-default {
    color: #494949;
  }

  .text-default-40 {
    color: rgba(73, 73, 73, 0.4);
  }

  .text-default-50 {
    color: rgba(73, 73, 73, 0.5);
  }

  .text-default-60 {
    color: rgba(73, 73, 73, 0.6);
  }

  .text-default-70 {
    color: rgba(73, 73, 73, 0.7);
  }

  .text-default-80 {
    color: rgba(73, 73, 73, 0.8);
  }

  .text-default-90 {
    color: rgba(73, 73, 73, 0.9);
  }

  .text-danger-two {
    color: #e63a2c !important;
  }

  .text-danger-two-79 {
    color: rgba(230, 58, 44, 0.79);
  }

  .text-danger-two-80 {
    color: rgba(230, 58, 44, 0.8);
  }

  .text-danger-two-90 {
    color: rgba(230, 58, 44, 0.9);
  }

  .text-matn {
    color: #787878;
  }

  .mxw-fit {
    max-width: -moz-fit-content;
    max-width: fit-content;
  }

  .dir-ltr {
    direction: ltr;
  }

  .ms-7 {
    margin-right: 7px;
  }

  .me-7 {
    margin-left: 7px;
  }

  .position-unset {
    position: unset;
  }

  .swiper-shadow-three .swiper-slide-prev .course {
    box-shadow: 50px 71px 50px rgba(0, 0, 0, 0.02);
  }

  .swiper-shadow-three .swiper-slide-active .course {
    box-shadow: -50px 71px 50px rgba(0, 0, 0, 0.02);
  }

  .swiper-shadow-three .swiper-slide-next+div+div .course {
    box-shadow: 50px 71px 50px rgba(0, 0, 0, 0.02);
  }

  .swiper-shadow-three .swiper-slide-next+div+div+div .course {
    box-shadow: -50px 71px 50px rgba(0, 0, 0, 0.02);
  }

  @media only screen and (max-width: 991px) {
    .swiper-shadow-three .swiper-slide-next+div+div .course {
      box-shadow: -50px 71px 50px rgba(0, 0, 0, 0.02);
    }
  }

  @media only screen and (max-width: 767px) {
    .swiper-shadow-three .swiper-slide-next+div .course {
      box-shadow: -50px 71px 50px rgba(0, 0, 0, 0.02);
    }
  }

  @media only screen and (max-width: 575px) {
    .swiper-shadow-three .swiper-slide-next .course {
      box-shadow: -50px 71px 50px rgba(0, 0, 0, 0.02);
    }
  }

  .swiper-button-three-next,
  .swiper-button-three-prev,
  .swiper-rtl .swiper-button-three-next,
  .swiper-rtl .swiper-button-three-prev {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 19px;
    box-shadow: 0px 40px 50px rgba(0, 0, 0, 0.05);
    width: 59px;
    height: 59px;
    transition: all 0.3s ease-in-out;
  }

  .swiper-button-three-next::after,
  .swiper-button-three-prev::after,
  .swiper-rtl .swiper-button-three-next::after,
  .swiper-rtl .swiper-button-three-prev::after {
    font-family: "icomoon";
    font-size: 16px;
    color: rgba(73, 73, 73, 0.6);
  }

  .swiper-button-three-next:hover,
  .swiper-button-three-prev:hover,
  .swiper-rtl .swiper-button-three-next:hover,
  .swiper-rtl .swiper-button-three-prev:hover {
    box-shadow: 0px 40px 50px rgba(0, 0, 0, 0.1);
  }

  .swiper-button-three-next:hover::after,
  .swiper-button-three-prev:hover::after,
  .swiper-rtl .swiper-button-three-next:hover::after,
  .swiper-rtl .swiper-button-three-prev:hover::after {
    color: #e63a2c;
  }

  .swiper-button-three-next,
  .swiper-rtl .swiper-button-three-next {
    left: calc(50% - 40px);
  }

  .swiper-button-three-next::after,
  .swiper-rtl .swiper-button-three-next::after {
    content: "\e941";
  }

  .swiper-button-three-prev,
  .swiper-rtl .swiper-button-three-prev {
    right: auto;
    left: calc(50% + 40px);
  }

  .swiper-button-three-prev::after,
  .swiper-rtl .swiper-button-three-prev::after {
    content: "\e940";
  }

  .section-heading-four-sup-title {
    line-height: 36px;
  }

  .section-heading-four-sub-title {
    max-width: 998px;
    line-height: 37px;
  }

  @media only screen and (max-width: 991px) {
    .section-heading-four-sup-title {
      font-size: 24px;
      line-height: 32px;
    }

    .section-heading-four-title {
      font-size: 32px;
      line-height: 40px;
    }
  }

  @media only screen and (max-width: 575px) {
    .section-heading-four-sup-title {
      font-size: 18px;
      line-height: 28px;
    }

    .section-heading-four-title {
      font-size: 24px;
      line-height: 32px;
    }

    .section-heading-four-sub-title {
      font-size: 12px;
      line-height: 18px;
    }
  }

  .brands {
    margin: 112px 0 235px;
  }

  .brands img {
    filter: grayscale(100%);
    transition: all 0.3s ease-in-out;
  }

  .brands img:hover {
    filter: grayscale(0%);
  }

  @media only screen and (max-width: 767px) {
    .brands {
      margin: 70px 0 165px;
    }
  }

  .article-two figure img {
    border-radius: 22px;
  }

  .article-two figure .date {
    width: 94px;
    height: 35px;
    background-color: rgba(18, 18, 18, 0.5);
    top: 18px;
    left: 17px;
  }

  .article-two figure .date i {
    margin-left: 6px;
  }

  .article-two h2 {
    margin: 19px 0 7px;
    line-height: 22px;
    height: 44px;
  }

  .article-two h2 a:hover {
    color: #e63a2c;
  }

  .article-two p {
    line-height: 25px;
    height: 75px;
  }

  .article-two>a {
    color: #1081e8;
  }

  .article-two>a i {
    font-size: 8px;
  }

  .article-two>a:hover {
    color: #e63a2c;
  }

  .path-learning-item {
    border-radius: 22px;
    padding: 31px 46px 21px;
    z-index: 2;
  }

  .path-learning-item .info .image {
    z-index: 2;
    margin-left: 12px;
  }

  .path-learning-item .info .image::before {
    content: "";
    bottom: 0;
    left: 0;
    transform: translateY(9px);
    width: 100%;
    height: 48px;
    background-color: rgba(73, 73, 73, 0.45);
    filter: blur(13px);
    z-index: -1;
  }

  .path-learning-item .info h2 a,
  .path-learning-item .info h2 a:hover,
  .path-learning-item .info h2 a:focus,
  .path-learning-item .info h2 a:active {
    color: rgba(73, 73, 73, 0.7);
  }

  .path-learning-item .info h2 a span,
  .path-learning-item .info h2 a:hover span,
  .path-learning-item .info h2 a:focus span,
  .path-learning-item .info h2 a:active span {
    color: #494949;
  }

  .path-learning-item p {
    height: 54px;
    margin: 28px 0 16px;
    padding-right: 15px;
  }

  .path-learning-item p::before {
    content: "";
    top: 0;
    right: 0;
    background-color: #494949;
    width: 6px;
    height: 100%;
    border-radius: 4px;
  }

  .path-learning-item ul {
    gap: 5px;
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px dashed rgba(73, 73, 73, 0.45);
  }

  .path-learning-item ul li {
    max-width: calc(33.333333% - 4px);
    flex: 0 0 auto;
    border: 1px solid #494949;
    background-color: rgba(73, 73, 73, 0.05);
    color: #494949;
    height: 38px;
    border-radius: 9px;
  }

  .path-learning-item ul li:nth-child(2) {
    background-color: #494949;
    color: #fff;
  }

  .path-learning-item .btn {
    color: #494949;
    background-color: #fff;
    padding: 14px 33px;
  }

  .path-learning-item .btn::before {
    content: "";
    bottom: 0;
    left: 28px;
    max-width: calc(100% - 56px);
    width: 100%;
    height: 14px;
    background-color: rgba(73, 73, 73, 0.32);
    border-radius: 10px;
    filter: blur(25px);
    z-index: -1;
  }

  .path-learning-item .btn i {
    margin-right: 11px;
  }

  .path-learning-item .btn:hover {
    background-color: #494949;
    color: #fff;
  }

  .path-learning-item.danger .info .image::before {
    background-color: rgba(230, 58, 44, 0.32);
  }

  .path-learning-item.danger .info h2 a span {
    color: #e63a2c;
  }

  .path-learning-item.danger p::before {
    background-color: #e63a2c;
  }

  .path-learning-item.danger ul li {
    background-color: rgba(230, 58, 44, 0.05);
    border-color: #e63a2c;
    color: #e63a2c;
  }

  .path-learning-item.danger ul li:nth-child(2) {
    background-color: #e63a2c;
    color: #fff;
  }

  .path-learning-item.danger .btn {
    color: #e63a2c;
  }

  .path-learning-item.danger .btn::before {
    background-color: rgba(230, 58, 44, 0.32);
  }

  .path-learning-item.danger .btn:hover {
    background-color: #e63a2c;
    color: #fff;
  }

  .path-learning-item.success .info .image::before {
    background-color: rgba(38, 213, 156, 0.32);
  }

  .path-learning-item.success .info h2 a span {
    color: #26d59c;
  }

  .path-learning-item.success p::before {
    background-color: #26d59c;
  }

  .path-learning-item.success ul li {
    background-color: rgba(38, 213, 156, 0.05);
    border-color: #26d59c;
    color: #26d59c;
  }

  .path-learning-item.success ul li:nth-child(2) {
    background-color: #26d59c;
    color: #fff;
  }

  .path-learning-item.success .btn {
    color: #26d59c;
  }

  .path-learning-item.success .btn::before {
    background-color: rgba(38, 213, 156, 0.32);
  }

  .path-learning-item.success .btn:hover {
    background-color: #26d59c;
    color: #fff;
  }

  @media only screen and (max-width: 1199px) {
    .path-learning-item {
      padding: 28px 30px 18px;
    }
  }

  @media only screen and (max-width: 767px) {
    .path-learning-item {
      padding: 18px;
      border-radius: 16px;
    }

    .path-learning-item h2 a,
    .path-learning-item h2 a:hover,
    .path-learning-item h2 a:focus,
    .path-learning-item h2 a:active {
      font-size: 14px;
    }

    .path-learning-item ul li {
      font-size: 12px;
    }

    .path-learning-item .btn {
      padding: 14px 20px;
    }
  }

  .best-course-graphic {
    margin-bottom: 220px;
  }

  .best-course-graphic::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 118%;
    background: url("./../images/background/background-05.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-57px);
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .best-course-graphic::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .best-course-graphic::after {
    content: "";
    background: url("./../images/shape/shape-12.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 153px;
    height: 630px;
    top: 60%;
    right: 0;
    z-index: -1;
  }

  .best-course-graphic .container::before,
  .best-course-graphic .container::after {
    content: "";
    bottom: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .best-course-graphic .container::before {
    right: 0;
    transform: translateY(110px);
  }

  .best-course-graphic .container::after {
    left: 0;
    transform: translateY(152px);
  }

  .best-course-graphic .row::before {
    content: "";
    top: 50%;
    left: 0;
    width: calc(100% - 52px);
    height: 107px;
    transform: translate(-88px, -50%);
    background: url("./../images/shape/shape-22.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .best-course-graphic .shape-1,
  .best-course-graphic .shape-2,
  .best-course-graphic .shape-3 {
    width: 41px;
    height: 41px;
    right: 0;
  }

  .best-course-graphic .shape-1 {
    background-color: #e63a2c;
    top: 52px;
  }

  .best-course-graphic .shape-2 {
    background-color: rgba(230, 58, 44, 0.6);
    top: 54px;
    transform: translateX(58px);
  }

  .best-course-graphic .shape-3 {
    background-color: rgba(230, 58, 44, 0.4);
    top: 99px;
    transform: translateX(32px);
  }

  .best-course-graphic .title {
    max-width: 333px;
    line-height: 50px;
  }

  .best-course-graphic .title span {
    line-height: 65px;
  }

  .best-course-graphic .descripton {
    line-height: 31px;
  }

  .best-course-graphic .btn {
    padding: 16px 25px;
    font-size: 12px;
  }

  .best-course-graphic .col-lg-6 .row {
    gap: 65px 0;
  }

  .best-course-graphic .col-lg-6 .row .col-sm-6:nth-child(2) {
    margin-top: 112px;
  }

  .best-course-graphic .col-lg-6 .row .col-sm-6:nth-child(3) {
    margin-top: -112px;
  }

  @media only screen and (max-width: 991px) {
    .best-course-graphic .row::before {
      content: none;
    }
  }

  @media only screen and (max-width: 767px) {
    .best-course-graphic {
      margin-bottom: 144px;
    }

    .best-course-graphic .container::before {
      transform: translateY(70px);
    }

    .best-course-graphic .container::after {
      transform: translateY(112px);
    }
  }

  @media only screen and (max-width: 575px) {
    .best-course-graphic .title {
      font-size: 24px;
      line-height: 32px;
      max-width: 220px;
    }

    .best-course-graphic .title span {
      font-size: 28px;
      line-height: 40px;
    }

    .best-course-graphic .btn {
      margin: 0 auto 24px;
      display: block;
      max-width: -moz-fit-content;
      max-width: fit-content;
    }

    .best-course-graphic .col-lg-6 .row {
      gap: 32px;
    }

    .best-course-graphic .col-lg-6 .row .col-sm-6:nth-child(2),
    .best-course-graphic .col-lg-6 .row .col-sm-6:nth-child(3) {
      margin-top: 0;
    }
  }

  .video-box {
    z-index: 2;
  }

  .video-box::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.261101) 80.05%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.261101) 22.59%, rgba(0, 0, 0, 0) 100%);
    border-radius: 50px;
    z-index: 2;
  }

  .video-box-title {
    top: 38px;
    right: 42px;
    z-index: 3;
  }

  .video-box-duration {
    top: 39px;
    left: 48px;
    z-index: 3;
  }

  .video-box .video-js {
    max-width: 100%;
    width: 100%;
    border-radius: 50px;
    overflow: hidden;
    border: none;
  }

  .video-box .video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 83px;
    height: 83px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 42px;
    line-height: 83px;
    border: none;
    z-index: 9;
  }

  .video-box .vjs-poster {
    background-size: 100% 100%;
  }

  .video-box .vjs-control-bar {
    z-index: 9;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
  }

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

    .video-box::before,
    .video-box .video-js {
      border-radius: 20px;
      border-radius: 20px;
    }

    .video-box-title {
      top: 12px;
      right: 12px;
    }

    .video-box-duration {
      top: 12px;
      left: 12px;
    }
  }

  .course {
    box-shadow: 0px 71px 50px rgba(0, 0, 0, 0.02);
    padding: 22px 26px 0;
  }

  .course h2 {
    margin: 18px 0 9px;
    color: rgba(73, 73, 73, 0.7);
    font-size: 20px;
    line-height: 32px;
    height: 64px;
  }

  .course h2 a:hover {
    color: #e63a2c;
  }

  .course .author img {
    width: 24px;
    height: 24px;
    border: 1px solid #d9d9d9;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
    margin-left: 6px;
  }

  .course p {
    margin: 14px 0 5px;
    height: 60px;
    line-height: 20px;
  }

  .course .price {
    font-size: 23px;
    line-height: 33px;
  }

  .course .price i {
    margin-right: 6px;
    font-size: 22px;
  }

  .course .btn {
    font-size: 12px;
    line-height: 14px;
    padding: 13px 14px;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin-top: -18px;
    transform: translateY(29px);
  }

  .course .btn i {
    margin-left: 7px;
  }

  @media only screen and (max-width: 1199px) {
    .course {
      padding: 16px;
    }
  }

  @media only screen and (max-width: 991px) {
    .course {
      padding: 12px;
    }

    .course,
    .course .image {
      border-radius: 16px;
    }
  }

  .btn {
    border: none;
  }

  .btn-danger-two {
    background-color: #e63a2c;
    box-shadow: 0px 16px 18px -1px rgba(230, 58, 44, 0.15);
    color: #fff;
  }

  .btn-danger-two:hover,
  .btn-danger-two:active,
  .btn-danger-two:focus {
    background-color: #d02719 !important;
    color: #fff !important;
  }

  .btn-danger-two-2 {
    background-color: #ff5656;
    box-shadow: 0px 18px 25px rgba(255, 86, 86, 0.32);
    color: #fff;
  }

  .btn-danger-two-2:hover,
  .btn-danger-two-2:active,
  .btn-danger-two-2:focus {
    background-color: #ff2d2d !important;
    color: #fff !important;
  }

  .btn-white {
    background-color: #fff;
    box-shadow: 0px 9px 50px rgba(41, 41, 41, 0.05);
    color: #494949;
  }

  .btn-white:hover,
  .btn-white:active,
  .btn-white:focus {
    background-color: #ebebeb !important;
    color: #494949 !important;
  }

  .btn-default {
    background-color: #494949;
    color: #fff;
  }

  .btn-default:hover,
  .btn-default:active,
  .btn-default:focus {
    background-color: #e63a2c !important;
    color: #fff !important;
  }

  .btn-outline-danger {
    border: 1px solid #e63a2c;
    color: #e63a2c;
  }

  .btn-outline-danger:hover,
  .btn-outline-danger:active,
  .btn-outline-danger:focus {
    color: #fff !important;
    background-color: #e63a2c !important;
    border: 1px solid #e63a2c;
  }

  .customers-comments-three-item .content {
    background-color: #ff5656;
    border-radius: 80px 80px 80px 0px;
    padding: 49px 80px;
    color: rgba(255, 255, 255, 0.8);
  }

  .customers-comments-three-item .info {
    border-radius: 0 0 50px 50px;
    box-shadow: 0px 27px 50px rgba(0, 0, 0, 0.05);
    padding: 18px 33px 25px 38px;
    margin: 0 98px 0 32px;
  }

  .customers-comments-three-item .info .author img {
    width: 53px;
    height: 53px;
    border: 2px solid #c2c2c2;
    box-shadow: 0px 25px 20px rgba(0, 0, 0, 0.15);
  }

  .customers-comments-three-item .info>a:hover {
    color: #ff5656;
  }

  .customers-comments-three-item.fill .content {
    position: relative;
    background-color: #e63a2c;
    z-index: 2;
    overflow: hidden;
  }

  .customers-comments-three-item.fill .content::before,
  .customers-comments-three-item.fill .content::after {
    content: "";
    position: absolute;
    z-index: -1;
  }

  .customers-comments-three-item.fill .content::before {
    top: 0;
    right: 0;
    width: 84px;
    height: 88px;
    background: url("./../images/shape/shape-29.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .customers-comments-three-item.fill .content::after {
    bottom: 0;
    left: 0;
    width: 93px;
    height: 93px;
    background: url("./../images/shape/shape-30.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  @media only screen and (max-width: 1199px) {
    .customers-comments-three-item .content {
      padding: 40px 70px;
      border-radius: 64px 64px 64px 0;
    }

    .customers-comments-three-item .info {
      padding: 18px 18px 25px;
      margin-right: 50px;
    }
  }

  @media only screen and (max-width: 991px) {
    .customers-comments-three-item .content {
      padding: 32px;
      border-radius: 40px 40px 40px 0;
    }

    .customers-comments-three-item .info {
      padding: 18px 18px 25px;
      margin: 0 32px 0 12px;
    }
  }

  @media only screen and (max-width: 767px) {
    .customers-comments-three-item .content {
      padding: 32px;
      border-radius: 24px 24px 24px 0;
    }

    .customers-comments-three-item .info {
      padding: 18px 12px 16px;
      margin: 0 20px;
      border-radius: 0 0 20px 20px;
    }
  }

  .swiper-slide-next .customers-comments-three-item .content::before {
    top: auto;
    bottom: 0;
    background-image: url("./../images/shape/shape-30.png");
  }

  .swiper-slide-next .customers-comments-three-item .content::after {
    top: 0;
    bottom: auto;
  }

  .article-three figure {
    margin-bottom: 27px;
    padding: 5px;
    background-color: rgba(199, 199, 199, 0.5);
  }

  .article-three figure img {
    height: 315px;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .article-three h2 {
    font-size: 23px;
    line-height: 35px;
  }

  .article-three h2 a:hover {
    color: #E63A2C;
  }

  .article-three p {
    line-height: 22px;
    height: 44px;
  }

  .article-three .show-more {
    line-height: 22px;
  }

  .article-three .show-more i {
    margin-right: 10px;
  }

  .article-three .show-more:hover {
    color: #E63A2C;
  }

  .article-three-row:not(:last-child) {
    margin-bottom: 44px;
  }

  .article-three-row figure {
    width: 120px;
    height: 120px;
  }

  .article-three-row figure,
  .article-three-row figure img {
    border-radius: 18px;
  }

  .article-three-row figure img {
    width: 110px;
    height: 110px;
  }

  .article-three-row .content {
    max-width: calc(100% - 120px);
    width: 100%;
    padding-right: 18px;
  }

  .article-three-row .content p {
    height: 66px;
  }

  @media only screen and (max-width: 991px) {
    .article-three h2 {
      font-size: 20px;
      line-height: 32px;
    }
  }

  @media only screen and (max-width: 767px) {
    .article-three h2 {
      font-size: 18px;
      line-height: 30px;
    }

    .article-three p {
      font-size: 12px;
      line-height: 18px;
      height: auto;
    }
  }

  @media only screen and (max-width: 575px) {
    .article-three figure {
      border-radius: 18px;
    }

    .article-three figure img {
      height: 200px;
    }

    .article-three-row figure,
    .article-three-row figure img {
      width: 100%;
      height: 200px;
    }

    .article-three-row .content {
      max-width: 100%;
      padding: 0;
    }
  }

  .top-header-three {
    padding: 63px 0 55px;
  }

  .top-header-three::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 446%;
    background: url("./../images/background/background-01.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -2;
  }

  .top-header-three::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 182px;
    height: 194px;
    background: url("./../images/shape/shape-01.png");
    background-size: 100% 100%;
    mix-blend-mode: exclusion;
    transform: translate(83px, -9px);
  }

  .top-header-three .container::after {
    content: "";
    position: absolute;
    top: calc(481% - 250px);
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(180deg, rgba(252, 252, 255, 0.45) 0%, #fcfcff 100%);
    z-index: -1;
  }

  .top-header-three-logo {
    margin-left: 58px;
  }

  .top-header-three-logo img {
    height: 75px;
    margin-left: 19px;
  }

  .top-header-three-categories button {
    padding-left: 15px;
    margin-left: 15px;
  }

  .top-header-three-categories button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 40px;
    background-color: rgba(73, 73, 73, 0.15);
    transform: translateY(-50%);
  }

  .top-header-three-categories button i {
    margin-left: 6px;
  }

  .top-header-three-categories button:hover {
    color: #e63a2c;
  }

  .top-header-three-categories .megamenu {
    top: 100%;
    right: 0;
    max-width: calc(100% - 24px);
    width: 100%;
    border-radius: 0 0 42px 42px;
    height: 350px;
    z-index: 9999;
    transform: translateY(40px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }

  .top-header-three-categories .megamenu::before {
    content: "";
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 38px;
    z-index: -1;
  }

  .top-header-three-categories .megamenu-tabs {
    max-width: 212px;
    width: 100%;
    flex: 0 0 auto;
    padding: 16px 25px 58px 0;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0 42px 42px 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .top-header-three-categories .megamenu-tabs li {
    color: rgba(73, 73, 73, 0.5);
    line-height: 23px;
    font-size: 12px;
    cursor: pointer;
    z-index: 2;
    padding: 0 10px;
    line-height: 32px;
  }

  .top-header-three-categories .megamenu-tabs li,
  .top-header-three-categories .megamenu-tabs li::after {
    transition: all 0.3s ease-in-out;
  }

  .top-header-three-categories .megamenu-tabs li::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url("./../images/other/meg.png") 0 0 no-repeat;
    background-size: 100% 100%;
    opacity: 0;
  }

  .top-header-three-categories .megamenu-tabs li:not(:last-child) {
    margin-bottom: 3px;
  }

  .top-header-three-categories .megamenu-tabs li i {
    font-size: 16px;
    margin-left: 4px;
  }

  .top-header-three-categories .megamenu-tabs li:hover,
  .top-header-three-categories .megamenu-tabs li.active {
    color: #494949;
    font-weight: bold;
  }

  .top-header-three-categories .megamenu-tabs li:hover::after,
  .top-header-three-categories .megamenu-tabs li.active::after {
    opacity: 1;
  }

  .top-header-three-categories .megamenu-content {
    border-radius: 0 0 0 42px;
    max-width: calc(100% - 212px);
    width: 100%;
    flex: 0 0 auto;
    background-color: rgba(255, 255, 255, 0.8);
  }

  @media only screen and (max-width: 1199px) {
    .top-header-three-categories .megamenu-content {
      max-width: calc(100% - 200px);
    }
  }

  .top-header-three-categories .megamenu-content-item {
    height: 100%;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    width: 100%;
    top: 0;
    right: 0;
  }

  .top-header-three-categories .megamenu-content-item.active {
    opacity: 1;
  }

  .top-header-three-categories .megamenu-content-item .right {
    max-width: 649px;
    width: 100%;
    background-color: #fff;
    padding: 16px 15px 0;
  }

  @media only screen and (max-width: 1199px) {
    .top-header-three-categories .megamenu-content-item .right {
      max-width: 100%;
    }
  }

  .top-header-three-categories .megamenu-content-item .right h5 {
    font-size: 16px;
    font-weight: 900;
    line-height: 21px;
    margin-bottom: 20px;
  }

  .top-header-three-categories .megamenu-content-item .right .links {
    width: 100%;
    flex-wrap: wrap;
    height: 79%;
    overflow: hidden;
  }

  .top-header-three-categories .megamenu-content-item .right .links a {
    max-width: 25%;
    width: 100%;
    padding: 0 4px;
    font-size: 12px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 20px;
  }

  .top-header-three-categories .megamenu-content-item .right .links a i {
    font-size: 14px;
    color: #8a9add;
    margin-left: 4px;
  }

  .top-header-three-categories .megamenu-content-item .right .links a:not(:last-child) {
    margin-bottom: 8px;
  }

  .top-header-three-categories .megamenu-content-item .right .links a:hover {
    color: #8a9add;
  }

  .top-header-three-categories .megamenu-content-item .left {
    max-width: calc(100% - 707px);
    width: 100%;
    padding: 16px 17px 0 0;
  }

  @media only screen and (max-width: 1399px) {
    .top-header-three-categories .megamenu-content-item .left {
      max-width: calc(100% - 649px);
    }
  }

  @media only screen and (max-width: 1199px) {
    .top-header-three-categories .megamenu-content-item .left {
      display: none;
    }
  }

  .top-header-three-categories .megamenu-content-item .left .heading .title {
    font-size: 16px;
    line-height: 20px;
  }

  .top-header-three-categories .megamenu-content-item .left .heading .btn {
    font-size: 11px;
    font-weight: 500;
    border-radius: 8px;
    padding: 7px 17px;
    box-shadow: 0px 9px 20px -1px rgba(0, 0, 0, 0.02);
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product::after {
    content: "";
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    border-radius: 12px;
    background-color: #8a9add;
    height: 8px;
    width: 112px;
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product .image {
    max-width: calc(100% - 40px);
    margin-bottom: -40px;
    z-index: 4;
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product .image img {
    border-radius: 16px;
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product .content {
    border-radius: 16px;
    padding: 50px 22px 15px;
    margin-top: -40px;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.02);
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product .content h2 {
    font-size: 16px;
    color: rgba(73, 73, 73, 0.7);
    font-weight: 900;
    line-height: 20px;
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product .content .category {
    font-size: 10px;
    color: rgba(73, 73, 73, 0.5);
    line-height: 20px;
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product .content .btn {
    font-size: 9px;
    font-weight: 400;
    line-height: 26px;
    padding: 0 7px;
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product .content .price {
    font-size: 16px;
    color: rgba(73, 73, 73, 0.8);
    line-height: 20px;
  }

  .top-header-three-categories .megamenu-content-item .left .megamenu-product .content .price i {
    color: rgba(73, 73, 73, 0.7);
    font-size: 18px;
  }

  .top-header-three-categories:hover .megamenu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .top-header-three-nav ul li:not(:last-child) {
    margin-left: 32px;
  }

  .top-header-three-nav ul li a {
    color: rgba(73, 73, 73, 0.5);
  }

  .top-header-three-nav ul li a:hover {
    color: rgba(230, 58, 44, 0.8);
    font-weight: 800;
  }

  .top-header-three-cart {
    padding-left: 21px;
    z-index: 9;
  }

  .top-header-three-cart::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 40px;
    background-color: rgba(73, 73, 73, 0.15);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .top-header-three-cart>button {
    width: 48px;
    height: 48px;
    z-index: 9;
  }

  .top-header-three-cart>button span {
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
    transform: translate(-3px, -2px);
  }

  .top-header-three-cart-dropdown {
    width: 283px;
    transform: translate(9px, 50px);
    left: 0;
    padding: 66px 12px 27px;
    transition: all 0.3s linear;
    opacity: 0;
    visibility: hidden;
  }

  .top-header-three-cart-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0px 41px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid #fff;
    border-radius: 34px;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    z-index: -1;
  }

  .top-header-three-cart-dropdown .close {
    top: 36px;
    right: 35px;
  }

  .top-header-three-cart-dropdown img {
    width: 97px;
    height: 97px;
  }

  .top-header-three-cart-dropdown .empty-cart {
    margin: 14px 0 19px;
  }

  .top-header-three-cart-dropdown .btn {
    padding: 10px 34px;
    line-height: 21px;
  }

  .top-header-three-cart.opened .top-header-three-cart-dropdown {
    transform: translate(9px, -5px);
    opacity: 1;
    visibility: visible;
  }

  .top-header-three-auth {
    z-index: 40;
  }

  .top-header-three-auth>.btn {
    padding: 13px 23px;
    z-index: 4;
    font-size: 12px;
  }

  .top-header-three-auth>.btn i {
    margin-left: 7px;
  }

  .top-header-three-auth-dropdown {
    width: 283px;
    padding: 92px 14px 29px;
    transform: translate(-14px, 50px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s linear;
  }

  .top-header-three-auth-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 34px;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border: 1px solid #fff;
    z-index: -1;
  }

  .top-header-three-auth-dropdown .close {
    top: 25px;
    right: 25px;
  }

  .top-header-three-auth-dropdown ul li:not(:last-child) {
    margin-bottom: 12px;
  }

  .top-header-three-auth-dropdown ul li a {
    background-color: rgba(230, 58, 44, 0.1);
    box-shadow: 0px 16px 18px -1px rgba(230, 58, 44, 0.15);
    padding: 6px 24px;
    line-height: 33px;
  }

  .top-header-three-auth-dropdown ul li a:hover {
    background-color: #e63a2c;
    color: #fff !important;
  }

  .top-header-three-auth-dropdown ul li:nth-child(2) a {
    background-color: rgba(73, 73, 73, 0.1);
    box-shadow: 0px 16px 18px -1px rgba(73, 73, 73, 0.15);
  }

  .top-header-three-auth-dropdown ul li:nth-child(2) a:hover {
    background-color: #494949;
  }

  .top-header-three-auth.opened .top-header-three-auth-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-14px, -15px);
  }

  @media only screen and (max-width: 1199px) {
    .top-header-three-logo {
      margin-left: 24px;
    }

    .top-header-three-logo img {
      margin-left: 10px;
    }

    .top-header-three-nav ul li:not(:last-child) {
      margin-left: 12px;
    }

    .top-header-three-auth>.btn {
      padding: 7px 14px;
    }
  }

  @media only screen and (max-width: 991px) {
    .top-header-three {
      padding: 24px 0;
    }
  }

  @media only screen and (max-width: 767px) {
    .top-header-three::before {
      background-size: cover;
      background-position: center center;
    }

    .top-header-three-logo img {
      height: 48px;
    }

    .top-header-three-cart {
      padding-left: 0;
    }

    .top-header-three-cart::after {
      content: none;
    }

    .top-header-three-cart-dropdown {
      transform: translate(-5px, 50px);
    }

    .top-header-three-cart.opened .top-header-three-cart-dropdown {
      transform: translate(-5px, -5px);
    }
  }

  @media only screen and (max-width: 575px) {
    .top-header-three-logo {
      margin-left: 8px;
      position: absolute !important;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .top-header-three-cart>a,
    .top-header-three-auth>.btn {
      width: 38px;
      height: 38px;
      line-height: 38px;
      padding: 0;
    }

    .top-header-three-cart>a i,
    .top-header-three-auth>.btn i {
      font-size: 16px;
    }

    .top-header-three-auth>.btn i {
      margin-left: 0;
    }
  }

  .footer-five {
    margin-top: 191px;
    padding-bottom: 32px;
  }

  .footer-five .container::before,
  .footer-five .container::after {
    content: "";
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .footer-five .container::before {
    right: 0;
    transform: translateY(-66px);
  }

  .footer-five .container::after {
    left: 0;
    transform: translateY(-108px);
  }

  .footer-five-logo {
    margin-left: 62px;
  }

  .footer-five-logo img {
    margin-left: 19px;
  }

  .footer-five-description {
    flex: 1 0 1%;
    line-height: 27px;
    text-align: justify;
  }

  .footer-five-socials-info {
    margin: 43px 0 33px;
  }

  .footer-five-socials-info::before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: -1;
  }

  .footer-five-socials {
    gap: 13px;
  }

  .footer-five-socials li a {
    width: 57px;
    height: 56px;
    border-radius: 13px;
    background-color: #f90808;
    box-shadow: 0px 16px 50px rgba(249, 8, 8, 0.25);
  }

  .footer-five-socials li a:hover {
    background-color: #c90505;
  }

  .footer-five-socials li:first-child a {
    background-color: #26d59c;
    box-shadow: 0px 16px 50px rgba(38, 213, 156, 0.25);
  }

  .footer-five-socials li:first-child a:hover {
    background-color: #1eaa7c;
  }

  .footer-five-socials li:last-child a {
    background-color: #7a67db;
    box-shadow: 0px 16px 50px rgba(122, 103, 219, 0.25);
  }

  .footer-five-socials li:last-child a:hover {
    background-color: #563ed1;
  }

  .footer-five-info {
    line-height: 22px;
  }

  .footer-five-socials,
  .footer-five-info {
    background: linear-gradient(0deg, rgba(243, 245, 252, 0.15), rgba(243, 245, 252, 0.15)), #ffffff;
  }

  .footer-five-contact p {
    line-height: 23px;
    margin-bottom: 6px;
  }

  .footer-five-contact ul li {
    line-height: 21px;
  }

  .footer-five-nav li:not(:last-child) {
    margin-bottom: 3px;
  }

  .footer-five-nav li a {
    line-height: 27px;
  }

  .footer-five-nav li a:hover {
    color: #E63A2C;
    padding-right: 4px;
  }

  .footer-five-namads .right {
    padding-left: 28px;
  }

  .footer-five-namads .title {
    color: rgba(45, 45, 45, 0.8);
  }

  .footer-five-namads p {
    line-height: 22px;
  }

  .footer-five-namads a:not(:last-child) {
    margin-left: 26px;
  }

  .landing-three::after {
    content: "";
    top: 50%;
    left: 0;
    width: 312px;
    height: 393px;
    transform: translate(-129px, -50%);
    background: url("./../images/shape/shape-04.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .landing-three .sup-title {
    color: rgba(73, 73, 73, 0.8);
  }

  .landing-three .sup-title span {
    opacity: 0.79;
  }

  .landing-three .sup-title::before {
    content: "";
    top: 50%;
    left: calc(100% + 27px);
    transform: translateY(-50%);
    width: 69px;
    height: 72px;
    background: url("./../images/shape/shape-02.png");
    z-index: -1;
  }

  .landing-three .sup-title::after {
    content: "";
    top: 20px;
    left: 0;
    width: 48px;
    height: 74px;
    background: url("./../images/shape/shape-03.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .landing-three .title {
    margin: 1px 0 7px;
    color: rgba(73, 73, 73, 0.8);
    max-width: 457px;
  }

  .landing-three .title::before {
    content: "";
    bottom: 0;
    left: calc(100% + 44px);
    width: 41px;
    height: 41px;
    background-color: rgba(230, 58, 44, 0.4);
    box-shadow: inset 11px 4px 11px rgba(255, 255, 255, 0.25);
    transform: rotate(-46.54deg);
    border-radius: 50%;
    z-index: -1;
  }

  .landing-three p {
    line-height: 25px;
    margin-bottom: 53px;
  }

  .landing-three .btns .btn {
    font-style: 12px;
  }

  .landing-three .btns .btn-danger-two {
    margin-left: 29px;
    padding: 15px 33px;
  }

  .landing-three .btns .btn-danger-two i {
    font-size: 12px;
  }

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

    .landing-three::after,
    .landing-three .sup-title::before,
    .landing-three .sup-title::after,
    .landing-three .title::before {
      content: none;
    }
  }

  @media only screen and (max-width: 767px) {
    .landing-three .sup-title {
      font-size: 14px;
    }

    .landing-three .title {
      font-size: 32px;
      line-height: 40px;
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 575px) {
    .landing-three .title {
      font-size: 24px;
      line-height: 32px;
    }

    .landing-three p {
      margin-bottom: 24px;
    }
  }

  .what-me-three {
    margin-top: 50px;
  }

  .what-me-three::before,
  .what-me-three::after {
    content: "";
    z-index: -1;
  }

  .what-me-three::before {
    right: 0;
    top: 17px;
    width: 119px;
    height: 84px;
    background: url("./../images/shape/shape-06.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateX(42px);
  }

  .what-me-three::after {
    top: 95%;
    left: 0;
    width: 103px;
    height: 220px;
    background: url("./../images/shape/shape-07.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .what-me-three .container::before {
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 377%;
    background: url("./../images/background/background-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -3;
    transform: translateY(-105px);
  }

  .what-me-three .title {
    color: rgba(73, 73, 73, 0.8);
    font-size: 32px;
    line-height: 61px;
  }

  .what-me-three .title span {
    line-height: 65px;
    font-size: 42px;
  }

  .what-me-three p {
    line-height: 31px;
    color: rgba(73, 73, 73, 0.5);
  }

  .what-me-three-items {
    gap: 56px;
    padding-right: 69px;
  }

  .what-me-three-items::before {
    content: "";
    width: calc(100% + 415px);
    height: 107px;
    background: url("./../images/shape/shape-08.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translate(-138px, -50%);
    top: 44%;
    left: 0;
  }

  .what-me-three-item {
    box-shadow: 0px 44px 50px rgba(230, 58, 44, 0.05), 0px 44px 50px rgba(0, 0, 0, 0.02);
    padding: 33px 30px 39px 19px;
    max-width: calc(33.333333% - 37px);
    flex: 0 0 auto;
    background: #fff;
  }

  .what-me-three-item,
  .what-me-three-item::before {
    border-radius: 31px;
  }

  .what-me-three-item::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background: #e63a2c url("./../images/shape/shape-05.png") 0 0 no-repeat;
    z-index: 2;
  }

  .what-me-three-item::after {
    content: "";
    width: 69px;
    height: 72px;
    background: url("./../images/shape/shape-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .what-me-three-item:first-child::after {
    right: 0;
    bottom: 0;
    transform: translate(34px, 6px);
  }

  .what-me-three-item:nth-child(2) {
    margin-top: -51px;
  }

  .what-me-three-item:nth-child(2)::after {
    top: 0;
    left: 0;
    transform: translate(-23px, -4px);
  }

  .what-me-three-item:nth-child(3)::after {
    top: 0;
    left: 0;
    transform: translate(-14px, -20px);
  }

  .what-me-three-item i {
    font-size: 30px;
    color: rgba(73, 73, 73, 0.8);
    margin-bottom: 17px;
  }

  .what-me-three-item::before,
  .what-me-three-item i,
  .what-me-three-item div {
    transition: all 0.3s ease-in-out;
  }

  .what-me-three-item i,
  .what-me-three-item div {
    z-index: 4;
  }

  .what-me-three-item:hover::before {
    opacity: 1;
    visibility: visible;
  }

  .what-me-three-item:hover i,
  .what-me-three-item:hover div {
    color: #fff;
  }

  @media only screen and (max-width: 1399px) {
    .what-me-three-items {
      padding-right: 32px;
      gap: 32px;
    }

    .what-me-three-items::before {
      width: calc(100% + 350px);
    }

    .what-me-three-item {
      max-width: calc(33.333333% - 21px);
    }
  }

  @media only screen and (max-width: 1199px) {
    .what-me-three-items {
      padding-right: 16px;
      gap: 16px;
    }

    .what-me-three-items::before {
      top: 27%;
      width: calc(100% + 300px);
    }

    .what-me-three-item {
      max-width: calc(33.333333% - 11px);
    }
  }

  @media only screen and (max-width: 991px) {
    .what-me-three-items {
      margin-top: 100px;
      padding-right: 0;
    }
  }

  @media only screen and (max-width: 767px) {
    .what-me-three .container::before {
      background-size: cover;
      background-position: center center;
    }

    .what-me-three .title,
    .what-me-three .title span {
      font-size: 28px;
      line-height: 38px;
    }

    .what-me-three-items {
      margin-top: 32px;
    }

    .what-me-three-items::before {
      content: none;
    }

    .what-me-three-item {
      max-width: calc(50% - 8px);
    }

    .what-me-three-item:nth-child(2) {
      margin-top: 0;
    }

    .what-me-three-item:last-child {
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 575px) {
    .what-me-three-item {
      max-width: 100%;
    }
  }

  .courses-three {
    margin-top: 219px;
  }

  .courses-three::before,
  .courses-three::after {
    content: "";
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .courses-three::before {
    right: 0;
    transform: translateY(-57px);
  }

  .courses-three::after {
    left: 0;
    transform: translateY(-99px);
  }

  .courses-three .container::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 124%;
    background: url("./../images/background/background-03.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-120px);
    z-index: -4;
  }

  .courses-three .container::after {
    content: "";
    top: 65%;
    transform: translateY(-50%);
    left: 0;
    width: 325px;
    height: 539px;
    background: url("./../images/shape/shape-10.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .courses-three .section-heading::before {
    content: "";
    right: 0;
    bottom: 0;
    width: 119px;
    height: 84px;
    background: url("./../images/shape/shape-09.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .courses-three .swiper {
    padding: 32px 0 140px;
  }

  .courses-three .swiper::after {
    content: "";
    top: 90%;
    left: 74px;
    width: 43px;
    height: 91px;
    background: url("./../images/shape/shape-11.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  @media only screen and (max-width: 575px) {
    .courses-three .swiper::after {
      left: 30px;
    }
  }

  .banner-home-three {
    margin: 36px 0 177px;
  }

  .banner-home-three::before {
    content: "";
    z-index: -1;
    width: 100%;
    height: 153%;
    top: 0;
    left: 0;
    background: url("./../images/background/background-04.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .banner-home-three .container::before,
  .banner-home-three .container::after {
    content: "";
    bottom: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .banner-home-three .container::before {
    right: 0;
    transform: translateY(82px);
  }

  .banner-home-three .container::after {
    left: 0;
    transform: translateY(40px);
  }

  @media only screen and (max-width: 767px) {
    .banner-home-three {
      margin-bottom: 120px;
    }
  }

  .customers-comments-three::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 139%;
    background: url("./../images/background/background-06.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-155px);
  }

  .customers-comments-three .swiper {
    padding-bottom: 95px;
  }

  .customers-comments-three .btn-show-more {
    padding: 14px 26px;
    margin-top: 30px;
  }

  @media only screen and (max-width: 767px) {
    .customers-comments-three::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .last-articles {
    margin-top: 174px;
  }

  .last-articles::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 125%;
    background: url("./../images/background/background-07.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-43px);
  }

  @media only screen and (max-width: 767px) {
    .last-articles::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .last-articles .container::before,
  .last-articles .container::after {
    content: "";
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .last-articles .container::before {
    right: 0;
    transform: translateY(-77px);
  }

  .last-articles .container::after {
    left: 0;
    transform: translateY(-119px);
  }

  .last-articles .heading {
    margin-bottom: 42px;
  }

  .last-articles .heading h2 {
    padding-left: 67px;
    margin-left: 86px;
  }

  .last-articles .heading h2::before,
  .last-articles .heading h2::after {
    content: "";
  }

  .last-articles .heading h2::before {
    right: 0;
    bottom: calc(100% + 7px);
    width: 54px;
    height: 9px;
    background-color: #e63a2c;
    border-radius: 10px;
  }

  .last-articles .heading h2::after {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(73, 73, 73, 0.2);
    width: 1px;
    height: 61px;
  }

  .last-articles .heading p {
    line-height: 32px;
    max-width: 639px;
  }

  .last-articles .heading .btn {
    padding: 14px 20px;
  }

  @media only screen and (max-width: 1199px) {
    .last-articles .heading h2 {
      padding-left: 42px;
      margin-left: 50px;
    }

    .last-articles .heading p {
      max-width: 520px;
    }
  }

  @media only screen and (max-width: 991px) {
    .last-articles .heading h2 {
      padding-left: 0;
      margin-left: 0;
    }

    .last-articles .heading h2::after {
      content: none;
    }
  }

  @media only screen and (max-width: 575px) {
    .last-articles .heading h2 {
      font-size: 24px;
      line-height: 32px;
    }
  }

  .about-us-three-landing::before,
  .about-us-three-landing::after {
    content: "";
    z-index: -1;
  }

  .about-us-three-landing::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url("./../images/shape/shape-13.png") 0 0 no-repeat;
    background-size: 100% 100%;
    width: 103px;
    height: 220px;
  }

  .about-us-three-landing::after {
    width: 119px;
    height: 84px;
    background: url("./../images/shape/shape-09.png") 0 0 no-repeat;
    background-size: 100% 100%;
    top: 70%;
    left: 11px;
  }

  .about-us-three-landing .container::before,
  .about-us-three-landing .container::after {
    content: "";
    width: 41px;
    height: 41px;
    border-radius: 50%;
    background-color: rgba(230, 58, 44, 0.4);
    box-shadow: inset 11px 4px 11px rgba(255, 255, 255, 0.25);
    transform: rotate(-46.54deg);
    z-index: -1;
  }

  .about-us-three-landing .container::before {
    top: 0;
    left: 176px;
  }

  .about-us-three-landing .container::after {
    top: 28%;
    left: 12px;
    transform: translateY(-50%);
  }

  .about-us-three-landing .sup-title::after {
    content: "";
    bottom: calc(100% + 12px);
    width: 69px;
    height: 72px;
    background: url("./../images/shape/shape-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    right: 90%;
  }

  .about-us-three-landing h2 {
    max-width: 475px;
    margin: 1px 0 2px;
  }

  .about-us-three-landing p {
    line-height: 25px;
  }

  .about-us-three-landing .btns .btn-danger-two {
    padding: 16px 37px;
  }

  .about-us-three-landing .btn-scroll {
    width: 103px;
    height: 103px;
    border-radius: 23px;
    background: url("./../images/shape/shape-14.png") 0 0 no-repeat;
    background-size: 100% 100%;
    left: 38%;
    transform: translate(-50%, 30px);
    box-shadow: 0px 23px 50px rgba(0, 0, 0, 0.15);
  }

  .about-us-three-landing .col-lg-5::before {
    content: "";
    z-index: -1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(230, 58, 44, 0.32);
    filter: blur(50px);
    border-radius: 206.5px;
    width: 266px;
    height: 81px;
    bottom: 0;
    left: 38%;
    transform: translate(-50%, 0);
  }

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

    .about-us-three-landing .container::before,
    .about-us-three-landing .container::after,
    .about-us-three-landing .sup-title::after {
      content: none;
    }

    .about-us-three-landing .col-lg-5::before {
      content: none;
    }
  }

  @media only screen and (max-width: 575px) {
    .about-us-three-landing h2 {
      font-size: 28px;
      line-height: 40px;
      max-width: 300px;
    }
  }

  .about-us-three-target {
    margin: 179px 0 278px;
  }

  @media only screen and (max-width: 767px) {
    .about-us-three-target {
      margin: 90px 0 188px;
    }
  }

  .about-us-three-target::after {
    content: "";
    z-index: -2;
    top: 0;
    left: 0;
    width: 100%;
    height: 356%;
    background: url("./../images/background/background-09.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -3;
    transform: translateY(-100px);
  }

  @media only screen and (max-width: 767px) {
    .about-us-three-target::after {
      background-size: cover;
      background-position: center center;
    }
  }

  .about-us-three-target .container::before,
  .about-us-three-target .container::after {
    content: "";
    bottom: 0;
    width: 70%;
    height: 1px;
    background: rgba(73, 73, 73, 0.5);
  }

  .about-us-three-target .container::before {
    right: 0;
    transform: translateY(120px);
  }

  .about-us-three-target .container::after {
    left: 0;
    transform: translateY(78px);
  }

  .about-us-three-activity .section-heading-four {
    margin-bottom: 84px;
  }

  .about-us-three-activity .section-heading-four::after {
    content: "";
    top: 0;
    left: 0;
    width: 198px;
    height: 630px;
    background: url("./../images/shape/shape-15.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-10%);
    z-index: -1;
  }

  .about-us-three-activity-item .btn-danger-two,
  .about-us-three-activity-item .btn-default {
    margin-left: 30px;
    padding: 16px 37px;
  }

  .about-us-three-activity-item:nth-child(2)::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 327%;
    background: url("./../images/background/background-09.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(132px);
  }

  .about-us-three-activity-item:nth-child(3) {
    margin: 188px 0 263px;
  }

  .about-us-three-activity-item:nth-child(3)::before,
  .about-us-three-activity-item:nth-child(3)::after {
    content: "";
    width: 100vw;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .about-us-three-activity-item:nth-child(3)::before {
    left: 30%;
    transform: translateY(-106px);
  }

  .about-us-three-activity-item:nth-child(3)::after {
    right: 30%;
    transform: translateY(127px);
  }

  .about-us-three-activity-item:nth-child(3) .container::before,
  .about-us-three-activity-item:nth-child(3) .container::after {
    content: "";
    width: 96px;
    height: 104px;
    background: url("./../images/shape/shape-16.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .about-us-three-activity-item:nth-child(3) .container::before {
    left: 30%;
    top: 0;
    transform: translate(-120px, -140px);
  }

  .about-us-three-activity-item:nth-child(3) .container::after {
    right: 30%;
    bottom: 0;
    transform: translate(120px, 205px);
  }

  @media only screen and (max-width: 767px) {
    .about-us-three-activity-item h2 {
      font-size: 32px;
      line-height: 40px;
    }
  }

  .about-us-three .customers-comments-three {
    margin-top: 255px;
  }

  @media only screen and (max-width: 767px) {
    .about-us-three .customers-comments-three {
      margin-top: 164px;
    }
  }

  .about-us-three .customers-comments-three::before {
    height: 148%;
  }

  .about-us-three .customers-comments-three::after {
    content: "";
    width: 96px;
    height: 104px;
    background: url("./../images/shape/shape-16.png") 0 0 no-repeat;
    background-size: 100% 100%;
    right: 0;
    bottom: 0;
    transform: translateX(29px);
  }

  .about-us-three .customers-comments-three .container::before,
  .about-us-three .customers-comments-three .container::after {
    content: "";
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .about-us-three .customers-comments-three .container::before {
    right: 0;
    transform: translateY(-67px);
  }

  .about-us-three .customers-comments-three .container::after {
    left: 0;
    transform: translateY(-109px);
  }

  .about-us-three .brands::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 2890%;
    background: url("./../images/background/background-08.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(15px);
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .about-us-three .brands::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .blog-landing h2 {
    max-width: 589px;
    margin: 1px 0 7px;
  }

  .blog-landing p {
    line-height: 25px;
  }

  @media only screen and (max-width: 991px) {
    .blog-landing {
      margin-top: 32px;
    }

    .blog-landing img {
      max-width: 70%;
      margin: 0 auto;
    }

    .blog-landing h2 {
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 767px) {
    .blog-landing h2 {
      font-size: 32px;
      line-height: 40px;
    }
  }

  @media only screen and (max-width: 575px) {
    .blog-landing {
      font-size: 24px;
      line-height: 32px;
    }
  }

  .blog-archive-three {
    margin-top: 115px;
  }

  .blog-archive-three::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 53%;
    background: url("./../images/background/background-13.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-23px);
    z-index: -2;
  }

  .blog-archive-three .row {
    gap: 71px 0;
  }

  @media only screen and (max-width: 767px) {
    .blog-archive-three {
      margin-top: 70px;
    }

    .blog-archive-three::after {
      background-size: cover;
      background-position: center center;
    }

    .blog-archive-three .row {
      gap: 32px 0;
    }
  }

  .blog-articles-week::before,
  .blog-articles-week::after,
  .blog-articles-month::before,
  .blog-articles-month::after {
    content: "";
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .blog-articles-week::before,
  .blog-articles-month::before {
    right: 0;
  }

  .blog-articles-week::after,
  .blog-articles-month::after {
    left: 0;
  }

  .blog-articles-week {
    margin-top: 218px;
  }

  @media only screen and (max-width: 767px) {
    .blog-articles-week {
      margin-top: 125px;
    }
  }

  .blog-articles-week::before {
    transform: translateY(-42px);
  }

  .blog-articles-week::after {
    transform: translateY(-84px);
  }

  .blog-articles-week .row {
    gap: 61px 0;
  }

  @media only screen and (max-width: 767px) {
    .blog-articles-week .row {
      gap: 32px 0;
    }
  }

  .blog-articles-month {
    margin-top: 146px;
  }

  .blog-articles-month::before {
    transform: translateY(-53px);
  }

  .blog-articles-month::after {
    transform: translateY(-95px);
  }

  .blog-articles-month .row {
    gap: 57px 0;
    margin: 0 -41px;
  }

  .blog-articles-month .row .col-lg-3 {
    padding: 0 41px;
  }

  @media only screen and (max-width: 1199px) {
    .blog-articles-month .row {
      margin: 0 -12px;
    }

    .blog-articles-month .row .col-lg-3 {
      padding: 0 12px;
    }
  }

  @media only screen and (max-width: 767px) {
    .blog-articles-month .row {
      gap: 32px 0;
    }
  }

  .blog-articles-month-wrapper .btn {
    padding: 16px 28px;
    z-index: 5;
  }

  .contact-us-landing .container::before,
  .contact-us-landing .container::after {
    content: "";
    width: 396px;
    height: 510px;
    background: url("./../images/background/background-10.png") 0 0 no-repeat;
    background-size: 100% 100%;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    z-index: -1;
  }

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

    .contact-us-landing .container::before,
    .contact-us-landing .container::after {
      content: none;
    }
  }

  .contact-us-landing .container::before {
    right: 0;
  }

  .contact-us-landing .container::after {
    background-image: url("./../images/background/background-11.png");
    left: 0;
  }

  .contact-us-landing .container img {
    max-width: 581px;
  }

  .contact-us-landing .container .btn-scroll {
    width: 100px;
    height: 100px;
    border-radius: 23px;
    background: url("./../images/shape/shape-17.png") 0 0 no-repeat;
    background-size: 100% 100%;
    left: 47%;
    transform: translate(-50%, -60px);
  }

  @media only screen and (max-width: 991px) {
    .contact-us-landing .container .btn-scroll {
      left: calc(50% - 40px);
      transform: translate(-50%, -60px);
    }
  }

  @media only screen and (max-width: 575px) {
    .contact-us-landing .container .btn-scroll {
      transform: translate(-50%, 0);
    }
  }

  .contact-us .what-contact::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 825%;
    background: url("./../images/background/background-09.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-60px);
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .contact-us .what-contact::after {
      background-size: cover;
      background-position: center center;
    }
  }

  .contact-us .what-contact h2 {
    margin-bottom: 20px;
  }

  .contact-us .what-contact p {
    max-width: 697px;
  }

  @media only screen and (max-width: 991px) {
    .contact-us .what-contact h2 {
      font-size: 24px;
      line-height: 32px;
    }

    .contact-us .what-contact h2 {
      font-size: 18px;
      line-height: 24px;
    }
  }

  .contact-us .contact-me {
    margin-top: 241px;
  }

  .contact-us .contact-me::after {
    content: "";
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 632px;
    height: 174px;
    border-radius: 50px;
    background: linear-gradient(0deg, rgba(230, 58, 44, 0.2), rgba(230, 58, 44, 0.2)), rgba(0, 0, 0, 0.32);
    filter: blur(100px);
    z-index: -1;
  }

  .contact-us .contact-me iframe,
  .contact-us .contact-me-content {
    border-radius: 50px;
  }

  .contact-us .contact-me iframe {
    border: none;
    width: 100%;
    height: 505px;
  }

  .contact-us .contact-me-content {
    box-shadow: 0px 80px 50px rgba(0, 0, 0, 0.05);
    max-width: 528px;
    width: 100%;
    transform: translate(-53px, -128px);
    padding: 34px 49px 49px;
  }

  .contact-us .contact-me-content-sup-title {
    line-height: 36px;
  }

  .contact-us .contact-me-content-title {
    line-height: 59px;
    margin-bottom: 40px;
  }

  .contact-us .contact-me-content ul {
    margin-bottom: 53px;
  }

  .contact-us .contact-me-content ul li:not(:last-child) {
    margin-bottom: 24px;
  }

  .contact-us .contact-me-content ul li i {
    font-size: 32px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .contact-us .contact-me-content ul li img {
    width: 40px;
    height: 40px;
  }

  .contact-us .contact-me-content ul li i,
  .contact-us .contact-me-content ul li img {
    margin-left: 10px;
  }

  .contact-us .contact-me-content .btns {
    gap: 19px;
  }

  .contact-us .contact-me-content .btns .btn {
    padding: 13px 23px;
  }

  .contact-us .contact-me-content .btns .btn i {
    margin-right: 7px;
  }

  .contact-us .contact-me-content .btns .btn-outline-danger {
    padding: 13px 27px;
  }

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

    .contact-us .contact-me iframe,
    .contact-us .contact-me-content {
      border-radius: 24px;
    }
  }

  @media only screen and (max-width: 767px) {
    .contact-us .contact-me {
      margin-top: 80px;
    }

    .contact-us .contact-me::after {
      content: none;
    }

    .contact-us .contact-me iframe {
      height: 300px;
    }

    .contact-us .contact-me-content {
      position: relative !important;
      transform: translate(0, -80px);
      max-width: calc(100% - 30px);
      margin: 0 auto;
    }
  }

  @media only screen and (max-width: 575px) {
    .contact-us .contact-me iframe {
      margin: 0 -12px;
      width: calc(100% + 24px);
      border-radius: 0;
    }

    .contact-us .contact-me-content {
      padding: 20px 12px;
      max-width: 100%;
    }

    .contact-us .contact-me-content-sup-title {
      font-size: 14px;
      line-height: 20px;
    }

    .contact-us .contact-me-content-title {
      font-size: 24px;
      line-height: 32px;
      margin: 8px 0 24px;
    }

    .contact-us .contact-me-content ul {
      margin-bottom: 24px;
    }

    .contact-us .contact-me-content .btns .btn {
      max-width: 100%;
      width: 100%;
    }
  }

  .contact-us-ducation {
    margin: 160px 0 116px;
  }

  .contact-us-ducation h2 {
    margin-bottom: 5px;
  }

  .contact-us-ducation p {
    line-height: 37px;
    margin-bottom: 6px;
  }

  .contact-us-ducation .btn-danger-two {
    padding: 16px 37px;
    margin-left: 29px;
  }

  @media only screen and (max-width: 991px) {
    .contact-us-ducation img {
      max-width: 70%;
      width: 100%;
      display: block;
      margin: 0 auto 32px;
    }
  }

  @media only screen and (max-width: 767px) {
    .contact-us-ducation {
      margin: 30px 0 80px;
    }

    .contact-us-ducation h2 {
      font-size: 32px;
      line-height: 40px;
    }
  }

  .contact-us-socials-two {
    margin-bottom: 225px;
  }

  .contact-us-socials-two::before,
  .contact-us-socials-two::after {
    content: "";
    bottom: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .contact-us-socials-two::before {
    right: 0;
    transform: translateY(154px);
  }

  .contact-us-socials-two::after {
    left: 0;
    transform: translateY(108px);
  }

  .contact-us-socials-two .title {
    max-width: 230px;
    margin-left: 63px;
  }

  .contact-us-socials-two .title::after {
    content: "";
    width: 100%;
    height: 7px;
    border-radius: 11px;
    background-color: rgba(230, 58, 44, 0.6);
    z-index: -1;
    bottom: 6px;
    left: 0;
  }

  .contact-us-socials-two ul {
    max-width: calc(100% - 293px);
  }

  .contact-us-socials-two ul li {
    padding: 0 14px;
    max-width: 25%;
  }

  .contact-us-socials-two ul li a {
    box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.02);
    border-radius: 20px;
    padding: 23px 12px 24px;
    line-height: 32px;
  }

  .contact-us-socials-two ul li a i {
    background-color: #fff;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #787878;
  }

  .contact-us-socials-two ul li a:hover {
    color: rgba(73, 73, 73, 0.8);
  }

  .contact-us-socials-two ul li a:hover i {
    background-color: #e63a2c;
    color: #fff;
  }

  .contact-us-socials-two ul li:nth-child(2) a:hover i {
    background-color: #ea4c89;
  }

  .contact-us-socials-two ul li:nth-child(3) a:hover i {
    background-color: #25d366;
  }

  .contact-us-socials-two ul li:last-child a:hover i {
    background-color: #c13584;
  }

  @media only screen and (max-width: 1199px) {
    .contact-us-socials-two .title {
      margin-left: 32px;
    }

    .contact-us-socials-two ul {
      max-width: calc(100% - 262px);
    }

    .contact-us-socials-two ul li {
      padding: 0 6px;
    }

    .contact-us-socials-two ul li a {
      font-size: 20px;
    }
  }

  @media only screen and (max-width: 991px) {
    .contact-us-socials-two ul {
      max-width: 100%;
    }
  }

  @media only screen and (max-width: 767px) {
    .contact-us-socials-two {
      margin-bottom: 150px;
    }

    .contact-us-socials-two::before {
      transform: translateY(64px);
    }

    .contact-us-socials-two ul li {
      max-width: 50%;
      padding: 8px;
    }
  }

  @media only screen and (max-width: 575px) {
    .contact-us-socials-two ul li a {
      font-size: 16px;
    }
  }

  .contact-us .customers-comments::before {
    height: 92%;
    transform: translateY(-8px);
    background: url("./../images/background/background-12.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  @media only screen and (max-width: 767px) {
    .contact-us .customers-comments::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .contact-us .customers-comments::after {
    content: "";
    width: 96px;
    height: 104px;
    background: url("./../images/shape/shape-16.png") 0 0 no-repeat;
    background-size: 100% 100%;
    right: 0;
    bottom: 0;
    transform: translateX(29px);
  }

  .detail-blog-three-info {
    margin-bottom: 84px;
  }

  .detail-blog-three-info .col-lg-8 {
    padding-right: 37px;
  }

  .detail-blog-three-info .col-lg-8 img {
    box-shadow: 0px 23px 100px rgba(0, 0, 0, 0.05);
  }

  .detail-blog-three-last-articles {
    padding: 43px 28px 69px 46px;
  }

  .detail-blog-three-last-articles .heading::before {
    content: "";
    top: 50%;
    right: 0;
    width: 4px;
    height: 35px;
    background-color: #e63a2c;
    transform: translate(28px, -50%);
  }

  .detail-blog-three-last-articles .heading .title {
    line-height: 36px;
  }

  .detail-blog-three-last-articles .heading .sub-title {
    line-height: 21px;
  }

  .detail-blog-three-last-articles ul li:not(:last-child) {
    margin-bottom: 28px;
  }

  .detail-blog-three-last-articles ul li img {
    max-width: 55px;
    height: 52px;
    margin-left: 13px;
  }

  .detail-blog-three-last-articles ul li h2 {
    line-height: 22px;
    max-width: calc(100% - 68px);
    height: 44px;
    transition: all 0.3s ease-in-out;
  }

  .detail-blog-three-last-articles ul li:hover h2 {
    color: #e63a2c;
  }

  .detail-blog-three-title {
    margin: 110px 0 7px;
  }

  .detail-blog-three-content::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 708px;
    background: url("./../images/background/background-14.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-226px);
    z-index: -3;
  }

  .detail-blog-three-content .container::before,
  .detail-blog-three-content .container::after {
    content: "";
    right: 0;
    height: 531px;
    background: url("./../images/shape/shape-18.png") 0 0 no-repeat;
    background-size: 100% 100%;
    mix-blend-mode: difference;
    z-index: -1;
  }

  .detail-blog-three-content .container::before {
    width: 214px;
    top: 0;
    transform: translateY(-372px);
  }

  .detail-blog-three-content .container::after {
    width: 190px;
    background-image: url("./../images/shape/shape-19.png");
    bottom: 0;
    transform: translateY(240px);
  }

  .detail-blog-three-content p {
    font-size: 16px;
    line-height: 32px;
    font-weight: 500;
    margin-bottom: 20px;
  }

  .detail-blog-three-content :last-child {
    margin-bottom: 0;
  }

  @media only screen and (max-width: 1399px) {
    .detail-blog-three-info .col-lg-8 {
      padding-right: 12px;
    }
  }

  @media only screen and (max-width: 991px) {
    .detail-blog-three-title {
      margin-top: 60px;
    }
  }

  @media only screen and (max-width: 767px) {
    .detail-blog-three-info {
      margin-bottom: 32px;
    }

    .detail-blog-three-title {
      font-size: 24px;
      line-height: 38px;
    }

    .detail-blog-three-sub-title {
      font-size: 18px;
      line-height: 30px;
    }

    .detail-blog-three-content::before {
      transform: translateY(-287px);
    }

    .detail-blog-three-content::after {
      background-size: cover;
      background-position: center center;
    }

    .detail-blog-three-content p {
      font-size: 13px;
      line-height: 22px;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-blog-three-title {
      font-size: 18px;
      line-height: 30px;
    }

    .detail-blog-three-sub-title {
      font-size: 14px;
      line-height: 24px;
    }
  }

  .detail-blog-three-customers-comments::before {
    background: url("./../images/background/background-16.png") 0 0 no-repeat;
    background-size: 100% 100%;
    height: 134%;
    transform: translateY(-197px);
    z-index: -3;
  }

  @media only screen and (max-width: 767px) {
    .detail-blog-three-customers-comments::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .detail-blog-three-customers-comments .swiper-slide {
    transform: scale(0.9);
    opacity: 0.25;
    transition: all 0.3s linear;
  }

  .detail-blog-three-customers-comments .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
  }

  .detail-blog-three-send-comment::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 175%;
    background: url("./../images/background/background-17.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-144px);
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .detail-blog-three-send-comment::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .detail-blog-three-send-comment-wrapper {
    background-color: rgba(73, 73, 73, 0.05);
    border-radius: 50px;
    padding: 52px 67px 60px 63px;
  }

  .detail-blog-three-send-comment-wrapper .title {
    margin-bottom: 42px;
  }

  .detail-blog-three-send-comment-wrapper .title i {
    font-size: 27px;
    margin-right: 14px;
  }

  .detail-blog-three-send-comment-wrapper .form-group {
    background-color: rgba(73, 73, 73, 0.05);
  }

  .detail-blog-three-send-comment-wrapper .form-group+.form-group {
    margin-top: 21px;
  }

  .detail-blog-three-send-comment-wrapper .form-group i {
    right: 53px;
  }

  .detail-blog-three-send-comment-wrapper .form-group .form-control {
    height: 76px;
    padding-right: 82px;
    background-color: rgba(255, 255, 255, 0);
  }

  .detail-blog-three-send-comment-wrapper .form-group .form-control::-moz-placeholder {
    text-align: right;
  }

  .detail-blog-three-send-comment-wrapper .form-group .form-control::placeholder {
    text-align: right;
  }

  .detail-blog-three-send-comment-wrapper .form-group .icon-edit {
    margin: 26px 26px 0 0;
  }

  .detail-blog-three-send-comment-wrapper .form-group textarea.form-control {
    padding: 10px 26px 0 16px;
    height: 83px;
    resize: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .detail-blog-three-send-comment-wrapper .form-group textarea.form-control::-webkit-scrollbar {
    display: none;
  }

  .detail-blog-three-send-comment-wrapper .form-group .btn {
    border-radius: 11px;
    transform: translate(42px, 16px);
    padding: 9px 24px;
    line-height: 21px;
  }

  .detail-blog-three-send-comment-wrapper .form-group-textarea {
    padding-bottom: 32px;
  }

  @media only screen and (max-width: 575px) {
    .detail-blog-three-send-comment-wrapper {
      margin: 0 -12px;
      border-radius: 0;
      padding: 32px 12px;
    }

    .detail-blog-three-send-comment-wrapper .title {
      font-size: 20px;
      line-height: 32px;
    }

    .detail-blog-three-send-comment-wrapper .title i {
      font-size: 24px;
      margin-right: 8px;
    }

    .detail-blog-three-send-comment-wrapper .form-group {
      border-radius: 12px;
    }

    .detail-blog-three-send-comment-wrapper .form-group i {
      right: 16px;
    }

    .detail-blog-three-send-comment-wrapper .form-group .form-control {
      padding-right: 50px;
      font-size: 12px;
      height: 62px;
    }
  }

  .detail-blog-three-articles-last {
    margin-top: 198px;
  }

  .banner-home-detail-blog-three {
    margin: 32px 0;
  }

  .banner-home-detail-blog-three::before {
    height: 172%;
    transform: translateY(0px);
  }

  .banner-home-detail-blog-three .container::before,
  .banner-home-detail-blog-three .container::after {
    content: none;
  }

  @media only screen and (max-width: 767px) {
    .banner-home-detail-blog-three {
      margin-bottom: 70px;
    }
  }

  .detail-course-landing {
    margin-bottom: 84px;
  }

  .detail-course-landing::after {
    content: "";
    position: absolute;
    top: 10%;
    left: 0;
    width: 132px;
    height: 232px;
    background: url("./../images/shape/shape-24.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .detail-course-landing .container::before {
    content: "";
    position: absolute;
    width: 119px;
    height: 84px;
    background: url("./../images/shape/shape-09.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translate(100%, -40px);
  }

  .detail-course-landing .container::after {
    content: "";
    position: absolute;
    top: 30%;
    right: 0;
    background-color: rgba(230, 58, 44, 0.4);
    box-shadow: inset 11px 4px 11px rgba(255, 255, 255, 0.25);
    transform: rotate(-46.54deg) translate(100%, 100%);
    width: 41px;
    height: 41px;
    border-radius: 50%;
  }

  .detail-course-landing .image {
    z-index: 2;
    padding: 86px 0 90px;
  }

  .detail-course-landing .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 389px;
    width: 100%;
    height: 100%;
    background: #e63a2c url("./../images/shape/shape-25.png") 0 0 no-repeat;
    background-size: 100% 100%;
    border-radius: 200px;
    transform: translate(-50%, 0);
    z-index: -1;
  }

  .detail-course-landing .image::after {
    content: "";
    position: absolute;
    z-index: -2;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 306px;
    height: 86px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(230, 58, 44, 0.32);
    border-radius: 200px;
    filter: blur(50px);
  }

  .detail-course-landing .image img {
    border-radius: 38px;
    box-shadow: 0px 43px 50px rgba(0, 0, 0, 0.05);
    border: 9px solid rgba(255, 255, 255, 0.5);
  }

  .detail-course-landing .image .text {
    bottom: 0;
    right: 0;
    line-height: 25px;
    transform: rotate(-90deg) translateY(145px);
    z-index: 5;
  }

  .detail-course-landing .image .text .en {
    letter-spacing: 5px;
    background: linear-gradient(to bottom, rgba(73, 73, 73, 0.6) -29.17%, rgba(73, 73, 73, 0) 94.97%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .detail-course-landing .scroll-bottom {
    border-radius: 23px;
    box-shadow: 0px 23px 50px rgba(0, 0, 0, 0.15);
    background: #121212 url("./../images/shape/shape-14.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    width: 90px;
    height: 90px;
    transform: translate(-50%, 40px);
  }

  .detail-course-landing .students-courses {
    margin-bottom: 7px;
  }

  .detail-course-landing .students-courses::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% - 2px);
    width: 69px;
    height: 72px;
    border-radius: 50%;
    background: url("./../images/shape/shape-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .detail-course-landing .students-courses .avatar {
    margin-left: 29px;
    box-shadow: 0px 27px 50px rgba(0, 0, 0, 0.05);
    padding: 12px 17px;
  }

  .detail-course-landing .students-courses .avatar .images img {
    transition: all 0.3s linear;
  }

  .detail-course-landing .students-courses .avatar .images img:not(:last-child) {
    margin-left: -18px;
  }

  .detail-course-landing .students-courses .avatar .images img:hover {
    transform: translateY(-5px);
    z-index: 4;
  }

  .detail-course-landing .sup-title,
  .detail-course-landing h2 {
    line-height: 48px;
  }

  .detail-course-landing p {
    margin: 5px 0 24px;
    line-height: 30px;
  }

  .detail-course-landing .btn-danger-two {
    margin-left: 29px;
    padding: 16px 37px;
  }

  .detail-course-landing .btn-danger-two+.btn:hover {
    color: #e63a2c;
  }

  .detail-course-landing .col-lg-6:last-child {
    padding-right: 55px;
  }

  @media only screen and (max-width: 991px) {
    .detail-course-landing .col-lg-6:last-child {
      padding-right: 12px;
    }

    .detail-course-landing::after {
      content: none;
    }

    .detail-course-landing .image {
      margin-bottom: 60px;
    }

    .detail-course-landing .image img {
      max-width: 70%;
      margin: 0 auto;
    }
  }

  @media only screen and (max-width: 767px) {
    .detail-course-landing .image img {
      max-width: 100%;
    }

    .detail-course-landing .sup-title {
      font-size: 18px;
      line-height: 32px;
    }

    .detail-course-landing h2 {
      font-size: 24px;
      line-height: 32px;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-course-landing .image {
      padding: 72px 0;
    }

    .detail-course-landing .image::before {
      max-width: 70%;
    }
  }

  .detail-course-register-course {
    margin: 210px 0 196px;
  }

  .detail-course-register-course::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 130%;
    background: url("./../images/background/background-21.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-67px);
  }

  .detail-course-register-course .container::before,
  .detail-course-register-course .container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .detail-course-register-course .container::before {
    right: 0;
    transform: translateY(-67px);
  }

  .detail-course-register-course .container::after {
    left: 0;
    transform: translateY(-109px);
  }

  .detail-course-register-course h2 {
    line-height: 62px;
  }

  .detail-course-register-course p {
    line-height: 30px;
  }

  .detail-course-register-course .teacher {
    margin-bottom: 22px;
  }

  .detail-course-register-course .teacher img {
    box-shadow: 0px 39px 50px rgba(0, 0, 0, 0.15);
    width: 54px;
    height: 54px;
  }

  .detail-course-register-course .teacher .detail {
    margin-right: 11px;
  }

  .detail-course-register-course .teacher .detail .name {
    line-height: 22px;
  }

  .detail-course-register-course .teacher .detail a {
    line-height: 25px;
  }

  .detail-course-register-course .teacher .detail a i {
    margin-right: 5px;
  }

  .detail-course-register-course .register-rate {
    gap: 28px;
  }

  .detail-course-register-course .register-rate>* {
    max-width: 50%;
    width: 100%;
  }

  .detail-course-register-course .register-rate .btn {
    height: 71px;
    line-height: 71px;
  }

  .detail-course-register-course .register-rate .btn i {
    margin-right: 14px;
  }

  .detail-course-register-course .register-rate .rate {
    background-color: rgba(230, 58, 44, 0.2);
    height: 71px;
    line-height: 71px;
  }

  .detail-course-register-course .register-rate .rate span {
    margin-left: 12px;
  }

  .detail-course-register-course .register-rate .rate i {
    font-size: 16px;
    color: #e63a2c;
  }

  .detail-course-register-course .register-rate .rate i:not(:last-child) {
    margin-left: 8px;
  }

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

    .detail-course-register-course .price,
    .detail-course-register-course .offer {
      font-size: 20px;
    }

    .detail-course-register-course .price span,
    .detail-course-register-course .offer span {
      font-size: 32px;
    }
  }

  @media only screen and (max-width: 767px) {
    .detail-course-register-course {
      margin: 160px 0 130px;
    }

    .detail-course-register-course h2 {
      font-size: 24px;
      line-height: 40px;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-course-register-course .register-rate>* {
      max-width: 100%;
    }
  }

  .detail-course-suitable::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 141%;
    background: url("./../images/background/background-22.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-142px);
  }

  .detail-course-suitable::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 155px;
    height: 232px;
    background: url("./../images/shape/shape-27.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-100px);
    z-index: -1;
  }

  .detail-course-suitable-content:not(:last-child) {
    margin-bottom: 11px;
  }

  .detail-course-suitable-content:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 40px);
    width: 119px;
    height: 84px;
    background: url("./../images/shape/shape-09.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .detail-course-suitable-content .right::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 88px;
    top: 50%;
    left: calc(100% + 18px);
    transform: translateY(-50%);
    background: url("./../images/shape/shape-26.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }

  .detail-course-suitable-content .right .image {
    padding: 0 20px;
  }

  .detail-course-suitable-content .right .image::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 212px;
    border-radius: 20px;
    box-shadow: 0px 49px 54px rgba(0, 0, 0, 0.1);
    z-index: -1;
  }

  .detail-course-suitable-content .right .image::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 69px;
    height: 72px;
    background: url("./../images/shape/shape-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translate(28px, 9px);
  }

  .detail-course-suitable-content .right .image img {
    height: 318px;
  }

  .detail-course-suitable-content .right .title {
    margin-top: 19px;
  }

  .detail-course-suitable-content .right .title span {
    color: #27ad7b;
  }

  .detail-course-suitable-content .content {
    max-width: calc(100% - 266px);
    padding: 0 68px 0 83px;
  }

  .detail-course-suitable-content .content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30%;
    width: 41px;
    height: 41px;
    background-color: rgba(230, 58, 44, 0.4);
    box-shadow: inset 11px 4px 11px rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    z-index: -1;
    transform: translateY(-60px);
  }

  .detail-course-suitable-content .content::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 39px;
    height: 193px;
    background: url("./../images/shape/text.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-50%);
  }

  .detail-course-suitable-content .content p {
    line-height: 24px;
    color: rgba(89, 89, 89, 0.68);
    padding-right: 53px;
  }

  .detail-course-suitable-content .content p::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 32px;
    height: 32px;
    background-color: rgba(39, 173, 123, 0.7);
    border-radius: 10px;
    transform: translateY(-50%);
  }

  .detail-course-suitable-content.danger .right::before {
    background-image: url("./../images/shape/shape-28.png");
    right: calc(100% + 28px);
    left: auto;
  }

  .detail-course-suitable-content.danger .right .image::after {
    top: 65px;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translateX(-28px);
  }

  .detail-course-suitable-content.danger .right .title span {
    color: #db564c;
  }

  .detail-course-suitable-content.danger .content {
    padding: 0 83px 0 68px;
  }

  .detail-course-suitable-content.danger .content::before {
    right: 15%;
    left: auto;
  }

  .detail-course-suitable-content.danger .content::after {
    right: 0;
    left: auto;
  }

  .detail-course-suitable-content.danger .content p {
    padding: 0 0 0 53px;
  }

  .detail-course-suitable-content.danger .content p::before {
    background-color: rgba(227, 83, 74, 0.75);
    right: auto;
    left: 0;
  }

  @media only screen and (max-width: 991px) {
    .detail-course-suitable-content:not(:last-child)::after {
      content: none;
    }

    .detail-course-suitable-content .right {
      max-width: -moz-fit-content;
      max-width: fit-content;
      margin: 0 auto;
    }

    .detail-course-suitable-content .content {
      max-width: 100%;
      margin-top: 64px;
      padding: 0 0 0 50px;
    }

    .detail-course-suitable-content.danger .content {
      padding: 0 50px 0 0;
    }
  }

  @media only screen and (max-width: 767px) {
    .detail-course-suitable::before {
      background-size: cover;
      background-position: center center;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-course-suitable-content .right::before {
      top: 0;
      right: 0;
      left: auto;
      transform: translateY(-50px);
    }

    .detail-course-suitable-content.danger {
      margin-top: 50px;
    }

    .detail-course-suitable-content.danger .right::before {
      right: auto;
      left: 0;
    }
  }

  .detail-course-sessions {
    margin-top: 159px;
  }

  @media only screen and (max-width: 767px) {
    .detail-course-sessions {
      margin-top: 110px;
    }
  }

  .detail-course-sessions::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("./../images/background/background-23.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translateY(-10px);
  }

  @media only screen and (max-width: 767px) {
    .detail-course-sessions::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .detail-course-sessions .container::before,
  .detail-course-sessions .container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .detail-course-sessions .container::before {
    right: 0;
    transform: translateY(-28px);
  }

  .detail-course-sessions .container::after {
    left: 0;
    transform: translateY(-70px);
  }

  .detail-course-sessions-items {
    max-width: 1079px;
  }

  .detail-course-sessions-items::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 69px;
    height: 72px;
    border-radius: 50%;
    background: url("./../images/shape/shape-02.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    transform: translate(24px, -33px);
  }

  .detail-course-sessions-item:first-child::before,
  .detail-course-sessions-item:first-child::after,
  .detail-course-sessions-item:not(:first-child):last-child::before,
  .detail-course-sessions-item:not(:first-child):last-child::after {
    content: "";
    position: absolute;
    width: 67px;
    height: 62px;
    background: url("./../images/shape/shape-28.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .detail-course-sessions-item:first-child::before {
    top: 85px;
    left: calc(100% + 47px);
  }

  .detail-course-sessions-item:first-child::after {
    top: 70px;
    right: calc(100% + 48px);
    background-image: url("./../images/shape/shape-26.png");
  }

  .detail-course-sessions-item:not(:first-child):last-child::before {
    left: calc(100% + 56px);
    bottom: 60px;
    background-image: url("./../images/shape/shape-26.png");
  }

  .detail-course-sessions-item:not(:first-child):last-child::after {
    right: calc(100% + 36px);
    bottom: 200px;
  }

  .detail-course-sessions-item {
    box-shadow: 0px 46px 50px rgba(138, 154, 221, 0.05);
  }

  .detail-course-sessions-item:not(:last-child) {
    margin-bottom: 18px;
  }

  .detail-course-sessions-item .time {
    border-radius: 6px;
    background-color: rgba(228, 83, 74, 0.8);
    max-width: 83px;
    width: 83px;
    height: 32px;
    line-height: 32px;
  }

  .detail-course-sessions-item .heading {
    box-shadow: 0px 46px 50px rgba(138, 154, 221, 0.1);
    padding: 26px 48px;
    cursor: pointer;
  }

  .detail-course-sessions-item .heading i {
    color: #e4534a;
    margin-left: 29px;
    transition: all 0.3s linear;
    transform: rotate(180deg);
  }

  .detail-course-sessions-item .heading.collapsed i {
    transform: rotate(0deg);
  }

  .detail-course-sessions-item .body {
    padding: 40px 48px;
  }

  .detail-course-sessions-item .body ul li {
    counter-increment: li;
  }

  .detail-course-sessions-item .body ul li:not(:last-child) {
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(73, 73, 73, 0.1);
  }

  .detail-course-sessions-item .body ul li::before {
    content: counter(li);
    width: 29px;
    height: 29px;
    border-radius: 4px;
    background-color: #e4534a;
    margin-left: 9px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    line-height: 29px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }

  .detail-course-sessions-item .body ul li i {
    font-size: 26px;
    color: rgba(228, 83, 74, 0.8);
    margin-left: 26px;
  }

  .detail-course-sessions-item .body ul li .time {
    background-color: rgba(228, 83, 74, 0.51);
  }

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

    .detail-course-sessions-item .heading,
    .detail-course-sessions-item .body {
      padding: 20px 24px;
    }
  }

  @media only screen and (max-width: 767px) {
    .detail-course-sessions-item .body ul li::before {
      margin-left: 0;
    }

    .detail-course-sessions-item .body ul li span {
      width: 100%;
    }
  }

  .detail-course-comments {
    margin-top: 232px;
  }

  @media only screen and (max-width: 767px) {
    .detail-course-comments {
      margin-top: 170px;
    }
  }

  .detail-course-comments::before {
    height: 130%;
  }

  .detail-course-comments::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 96px;
    height: 104px;
    background: url("./../images/shape/shape-16.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateX(29px);
  }

  .detail-course-comments .container::before,
  .detail-course-comments .container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .detail-course-comments .container::before {
    right: 0;
    transform: translateY(-75px);
  }

  .detail-course-comments .container::after {
    left: 0;
    transform: translateY(-117px);
  }

  .detail-course-teacher {
    margin-top: 150px;
  }

  @media only screen and (max-width: 767px) {
    .detail-course-teacher {
      margin-top: 60px;
    }
  }

  .detail-course-teacher::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%;
    background: url("./../images/background/background-24.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-103px);
  }

  @media only screen and (max-width: 767px) {
    .detail-course-teacher::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .detail-course-teacher-wrapper {
    border-radius: 50px;
    box-shadow: 0px 25px 100px rgba(0, 0, 0, 0.05);
    padding: 71px 150px 0;
  }

  .detail-course-teacher-wrapper img {
    margin: 32px 0 47px;
    width: 105px;
    height: 104px;
    border: 6px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0px 39px 50px rgba(0, 0, 0, 0.15);
  }

  .detail-course-teacher-wrapper p {
    line-height: 37px;
  }

  .detail-course-teacher-wrapper .btn {
    max-width: 303px;
    height: 71px;
    line-height: 71px;
    margin-top: -25px;
    transform: translateY(25px);
  }

  .detail-course-teacher-wrapper .btn i {
    margin-right: 10px;
  }

  @media only screen and (max-width: 1199px) {
    .detail-course-teacher-wrapper {
      padding: 71px 120px 0;
    }
  }

  @media only screen and (max-width: 991px) {
    .detail-course-teacher-wrapper {
      padding: 71px 70px 0;
    }
  }

  @media only screen and (max-width: 767px) {
    .detail-course-teacher-wrapper {
      padding: 32px 32px 0;
      border-radius: 20px;
    }

    .detail-course-teacher-wrapper .sup-title {
      font-size: 16px;
      line-height: 24px;
    }

    .detail-course-teacher-wrapper .title {
      font-size: 24px;
      line-height: 32px;
    }

    .detail-course-teacher-wrapper .btn {
      height: 64px;
      line-height: 64px;
    }
  }

  @media only screen and (max-width: 575px) {
    .detail-course-teacher-wrapper {
      padding: 20px 20px 0;
    }
  }

  .detail-course-faq {
    margin-top: 154px;
  }

  .detail-course-faq::before,
  .detail-course-faq::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1;
  }

  .detail-course-faq::before {
    top: 0;
    height: 48%;
    background: url("./../images/background/background-25.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(-57px);
  }

  .detail-course-faq::after {
    bottom: 0;
    height: 64%;
    background: url("./../images/background/background-26.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateY(80px);
  }

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

    .detail-course-faq::before,
    .detail-course-faq::after {
      background-size: cover;
      background-position: center center;
    }
  }

  .detail-course-faq img {
    margin-bottom: 73px;
  }

  .detail-course-faq .row {
    gap: 21px 0;
  }

  .detail-course-faq-item {
    box-shadow: 0px 66px 50px rgba(0, 0, 0, 0.02);
    padding: 0 28px;
  }

  .detail-course-faq-item .heading {
    padding: 32px 0;
    cursor: pointer;
  }

  .detail-course-faq-item .heading i {
    font-size: 9px;
    transition: all 0.3s linear;
    transform: rotate(180deg);
  }

  .detail-course-faq-item .heading.collapsed i {
    transform: rotate(0deg);
  }

  .detail-course-faq-item .body {
    padding: 0 0 32px;
    line-height: 30px;
  }

  .services-landing::after {
    content: "";
    top: 50%;
    left: 0;
    width: 313px;
    height: 393px;
    background: url("./../images/shape/shape-04.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translate(-129px, -50%);
    z-index: -1;
  }

  .services-landing .sup-title {
    line-height: 23px;
  }

  .services-landing .sup-title::before {
    content: "";
    top: 50%;
    left: calc(100% + 27px);
    z-index: -1;
    width: 69px;
    height: 72px;
    border-radius: 50%;
    background: url("./../images/shape/shape-02.png") 0 0 no-repeat;
    transform: translateY(-50%);
  }

  .services-landing .sup-title::after {
    content: "";
    top: 8px;
    left: 0;
    width: 48px;
    height: 74px;
    background: url("./../images/shape/shape-03.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  .services-landing h2 {
    line-height: 62px;
    max-width: 360px;
  }

  .services-landing h2::before {
    content: "";
    bottom: 0;
    left: calc(100% + 44px);
    background-color: rgba(230, 58, 44, 0.4);
    box-shadow: inset 11px 4px 11px rgba(255, 255, 255, 0.25);
    border-radius: rotate(-46.54deg);
    width: 41px;
    height: 41px;
    border-radius: 50%;
  }

  .services-landing p {
    line-height: 25px;
    margin-bottom: 33px;
  }

  .services-landing .register-courses .avatars {
    border-radius: 24px;
    box-shadow: 0px 27px 50px rgba(0, 0, 0, 0.05);
    padding: 15px 24px 12px;
  }

  .services-landing .register-courses .avatars .images {
    margin-right: 7px;
  }

  .services-landing .register-courses .avatars .images img {
    border: 1px solid #d9d9d9;
    box-shadow: 0px 33px 50px rgba(0, 0, 0, 0.05);
    width: 41px;
    height: 41px;
  }

  .services-landing .register-courses .avatars .images img:not(:last-child) {
    margin-left: -18px;
  }

  .services-landing .btn-scroll {
    background: #121212 url("./../images/shape/shape-14.png") 0 0 no-repeat;
    background-size: 100% 100%;
    box-shadow: 0px 23px 50px rgba(0, 0, 0, 0.15);
    border-radius: 23px;
    width: 90px;
    height: 90px;
    transform: translate(67px, -85px);
  }

  .services-landing .image::after {
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 306px;
    height: 86px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(230, 58, 44, 0.32);
    z-index: -1;
    filter: blur(50px);
    border-radius: 206.5px;
  }

  @media only screen and (max-width: 1199px) {
    .services-landing .image img {
      max-width: 90%;
    }

    .services-landing .image .btn-scroll {
      transform: translate(25px, -85px);
    }
  }

  @media only screen and (max-width: 991px) {
    .services-landing .btn-scroll {
      transform: unset;
    }
  }

  .services-comments {
    margin: 150px 0 187px;
  }

  .services-comments::after {
    content: "";
    bottom: 0;
    right: 0;
    width: 96px;
    height: 104px;
    background: url("./../images/shape/shape-16.png") 0 0 no-repeat;
    background-size: 100% 100%;
    transform: translateX(29px);
  }

  .services-comments .container::before,
  .services-comments .container::after {
    content: "";
    top: 0;
    width: 70%;
    height: 1px;
    background-color: rgba(73, 73, 73, 0.5);
  }

  .services-comments .container::before {
    right: 0;
    transform: translateY(-75px);
  }

  .services-comments .container::after {
    left: 0;
    transform: translateY(-117px);
  }

  .services-best-course-graphic .container::before,
  .services-best-course-graphic .container::after {
    top: 0;
    bottom: auto;
  }

  .services-best-course-graphic .container::before {
    transform: translateY(-37px);
  }

  .services-best-course-graphic .container::after {
    transform: translateY(-79px);
  }

  .path-learning {
    margin: 106px 0 158px;
  }

  .path-learning::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background: url("./../images/background/background-18.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -4;
    transform: translateY(-75px);
  }

  @media only screen and (max-width: 767px) {
    .path-learning::after {
      background-size: cover;
      background-position: center center;
    }
  }

  .path-learning .container::before {
    content: "";
    top: 115px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("./../images/background/background-19.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -3;
  }

  .path-learning .container::after {
    content: "";
    bottom: 0;
    right: 0;
    width: 590px;
    height: 545px;
    background: url("./../images/shape/shape-21.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -3;
    transform: translate(113px, 120px);
  }

  .path-learning .swiper-pagination,
  .path-learning .swiper-button-next,
  .path-learning .swiper-button-prev {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: unset;
  }

  .path-learning .swiper-button-next,
  .path-learning .swiper-button-prev {
    width: auto;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    transform: translateY(10px);
  }

  .path-learning .swiper-button-next::after,
  .path-learning .swiper-button-prev::after {
    font-size: 14px;
    color: rgba(230, 58, 44, 0.8);
  }

  .path-learning .swiper-button-next::after {
    content: "\e902";
  }

  .path-learning .swiper-button-prev::after {
    content: "\e903";
  }

  .path-learning .swiper-pagination {
    margin: 0 11px;
  }

  .path-learning .swiper-pagination-bullet {
    width: 11px;
    height: 6px;
    background-color: #494949;
    opacity: 0.3;
    border-radius: 9px;
    transition: all 0.3s linear;
  }

  .path-learning .swiper-pagination-bullet-active {
    width: 25px;
    background-color: #e63a2c;
    opacity: 1;
  }

  .course-programming .btn-more {
    margin-top: 41px;
    padding: 16px 27px;
  }

  .course-programming .btn-more i {
    margin-right: 5px;
  }

  @media only screen and (max-width: 767px) {
    .course-programming {
      margin-top: 158px;
    }
  }

  .teachers {
    margin-top: 59px;
  }

  .teachers::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 124%;
    background: url("./../images/background/background-20.png") 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    .teachers::before {
      background-size: cover;
      background-position: center center;
    }
  }

  .teachers .row {
    gap: 21px 0;
  }

  .teachers .row .col-md-3 img {
    box-shadow: 0px 39px 50px rgba(0, 0, 0, 0.15);
    transition: all 0.3s linear;
  }

  .teachers .row .col-md-3 img:hover {
    transform: scale(1.1);
  }

  .teachers .row .col-md-3:first-child a,
  .teachers .row .col-md-3:nth-child(4) a {
    border-radius: 0 87px;
  }

  .teachers .row .col-md-3:nth-child(2) a {
    border-radius: 87px 87px 87px 0px;
  }

  .teachers .row .col-md-3:nth-child(3) a {
    border-radius: 0px 87px 87px 87px;
  }

  .teachers .row .col-md-3:nth-child(6) a {
    border-radius: 87px 0px;
  }

  .teachers .row .col-md-3:nth-child(7) a {
    border-radius: 87px 87px 0px 87px;
  }

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

    .teachers .row .col-md-3:first-child a,
    .teachers .row .col-md-3:nth-child(4) a {
      border-radius: 0 60px;
    }

    .teachers .row .col-md-3:nth-child(2) a {
      border-radius: 60px 60px 60px 0px;
    }

    .teachers .row .col-md-3:nth-child(3) a {
      border-radius: 0px 60px 60px 60px;
    }

    .teachers .row .col-md-3:nth-child(6) a {
      border-radius: 60px 0px;
    }

    .teachers .row .col-md-3:nth-child(7) a {
      border-radius: 60px 60px 0px 60px;
    }
  }

  /*# sourceMappingURL=main.min.css.map */