@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --cyan: #38cbcb;
  --purple: #8e74b2;
  --red: #ef3852;
  --orange: #fdb655;
  --yellow: #BAA56A;
  --blue: #3498db;
  --gray: #8a8a8a;
  --green: #1bbc9b;
  --dark-blue: #024674;

  --main-color: #00d2ff;
  --bg-dark: #0f172a;
  --card-bg: #1e293b;
  --transition-speed: 0.3s;
}

body {
  background-color: #f3f3f3;
  color: #2f3239;
  line-height: 23px;
  font-size: 15px;
  font-family: "Roboto", sans-serif, arial;
}

.hero-section {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
    color: white;
    padding: 100px 0;
}

.feature-card {
    border: none;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.icon-box {
    font-size: 2.5rem;
    color: #0d6efd;
    margin-bottom: 15px;
}

.nav-link.active {
    color: #fff !important;
    font-weight: bold;
    border-bottom: 2px solid #fff;
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover,
a:focus {
  color: #8d99ae;
}

audio {
  width: 100%;
}

h1 {
  font-weight: 900;
  font-size: 26px;
}

h2 {
  font-weight: 800;
  font-size: 24px;
}

h3 {
  font-weight: 700;
  font-size: 18px;
}

h4 {
  font-weight: 700;
  font-size: 17px;
}

.site-navbar {
  background-color: #ffffff;
}

.site-header {
  background-color: var(--blue);
  padding-top: 20px;
  padding-bottom: 20px;
}

.nav-link,
.navbar-brand {
  color: var(--blue);
}

.navbar-brand img {
  max-width: 175px !important;
}

.btn-search {
  color: #8d99ae;
  border-color: #8d99ae;
  background-color: #fff;
}

.btn-search:hover,
.btn-search:active {
  color: #fff !important;
  border-color: #8d99ae !important;
  background-color: #8d99ae !important;
}

.btn-search:focus-visible {
  color: #fff !important;
  border-color: #8d99ae !important;
  background-color: #8d99ae !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(141, 153, 174, .5) !important;
}

.header_ads {
  text-align: center;
}

.header_ads img {
  max-width: 100%;
}

.hidden {
  display: none;
}

.download-file {
  text-align: center;
  padding: 15px;
  font-size: 40px;
  margin-top: 15px;
}

.download-file a {
  margin: 0 10px;
  font-size: 30px;
}

.single-post .download-file,
.download-file a {
  font-size: 20px;
}

.site-footer {
  color: #fff;
  background-color: #262626;
}

.footer-boxes {
  background-color: #333;
  padding: 30px 0;
}

.footer-boxes h4 {
  border-bottom: 2px solid #666;
  margin-bottom: 15px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #fff;
}

.footer-boxes a {
  color: #ccc;
}

.footer-boxes a:hover {
  color: #fff;
}

.footer-boxes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-boxes ul li {
  border-bottom: 1px solid #555;
  margin-bottom: 15px;
  background: #444;
}

.footer-boxes ul li a {
  display: block;
  padding: 8px 8px;
  transition: 0.5s;
}

.footer-boxes ul li a:hover {
  padding: 8px 15px;
}

.footer-boxes ul li:hover {
  border-bottom: 1px solid #666;
  background: #555;
}

.footer-boxes ul li:hover a {
  color: #fff;
}

.footer-boxes ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.footer-box {
  padding: 0;
}

.footer-lower {
  min-height: 55px;
}

.footer-lower .container {
  position: relative;
}

.footer-lower a {
  color: var(--blue);
}

.footer-lower p {
  padding: 0;
  margin-bottom: 0;
}

.footer-lower .footer-start {
  position: absolute;
  top: 17px;
  left: 10px;
}

.footer-lower .footer-end {
  position: absolute;
  top: 17px;
  right: 10px;
}

.breadcrumb-contaiber {
  margin-bottom: 15px;
}

.breadcrumb {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px 0;
  border-radius: 7px;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #333;
}

.breadcrumb>.active {
  color: #333;
}

.breadcrumb li a span,
.breadcrumb li a {
  color: var(--blue);
  ;
}

.site-card .card-header {
  color: #333;
  padding: 10px;
  background-color: #fff;
  border-bottom: 3px solid rgba(141, 153, 174, .2);
}

.site-card .card-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.site-card .card-header a {
  color: #333;
}

.site-card {
  background: #fff;
}

.site-card p:last-child,
.site-card ul:last-child {
  margin-bottom: 0;
}

.content-single img {
  max-width: 100%;
}

.panel-template {
  border: none;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 0px;
}

.panel-template .card-header {
  padding: 10px 15px;
  color: #333;
  background-color: #f2f2f2;
  border-color: #ddd;
  border-style: solid;
  border-right-width: 1px;
  border-left-width: 1px;
  border-top-width: 1px;
  border-bottom-width: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.panel-template .card-title {
  font-weight: 600;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  padding-top: 0px;
  color: #333;
}

.panel-template .card-body {
  padding: 0px;
  margin-top: 0;
  border: 1px solid #ddd;
}

.custom-home-container {
  background: #fff;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0px;
}

.custom-home-container .custom-home-title {
  text-align: center;
  margin-bottom: 25px;
  font-size: 25px;
  font-weight: 600;
}

.custom-home-container .container {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.home-container-first {
  background: #f2f2f2;
}

.custom-menu-title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
}

.tags {
  margin: 30px 0 0 0;
  padding: 0;
}

code,
.codx,
.phpcode,
.ncode,
.vbcode {
  border: 1px solid #cccccc;
  margin: 10px;
  padding: 5px;
  background: #f2f2f2;
  direction: ltr;
  text-align: left;
  display: block;
  overflow: auto;
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace, tahoma;
}

.quote {
  border: 1px solid #cccccc;
  margin: 5px;
  padding: 5px;
  background: #f2f2f2;
}

.single-post {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.single-post h2,
.single-post h1,
.box h2 {
  padding: 5px 0 10px 0;
  margin: 0 0 3px 0;
  color: #3b9acc;
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
}

.single-post .text {
  color: #505050;
}

.single-post .info {
  padding: 0 0 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e1e3;
  color: #505050;
  font-size: 12px;
  font-weight: normal;
}

.single-post .post-image {
  padding: 0;
  margin: 5px 0 15px 0;
  text-align: center;
}

.single-post img {
  max-width: 100%;
}

.btn-primary {
  background-color: var(--blue);
  border-color: var(--blue);
}

.btn:hover {
  background-color: rgba(52, 152, 219, .8);
  border-color: var(--bs-blue);
}

.rating_container {
  text-align: center;
  background-color: #333;
  padding: 15px;
  color: #fff;
  margin-top: 15px;
}

.rating_title {
  margin-bottom: 15px;
}

.rating_v {
  display: block;
  margin: 5px 0 5px 0;
  position: relative;
  left: 0;
  top: 2px;
  line-height: 20px;
}

.rating_v img {
  width: 45px;
  height: 42px;
  margin: 0 5px;
  opacity: 0.5;
}

.rating_v span {
  cursor: pointer;
  width: 45px;
}

.rating_hover {
  width: 45px !important;
  height: 42px !important;
  opacity: 1 !important;
}

.rating_ok {
  color: #48b000;
}

.rating_error {
  color: #ff0000;
}

.listen {
  margin: 0;
  padding: 10px 0 10px 0;
  text-align: center;
}

.soundinfo,
.book-files {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #e2f3ff;
  border: 1px solid #ddd;
  color: #333;
  text-align: center;
  border-radius: 7px;
}

.soundinfo p {
  padding: 0 0 10px 0;
  color: #333;
}

.soundinfo i,
.book-files i {
  font-size: 30px;
}

.soundinfo a.selecteda {
  border-bottom: 1px solid #000;
}

.post_share {
  padding: 15px;
  overflow: hidden;
  margin-top: 15px;
  text-align: center;
}

.post_share_title {
  margin-bottom: 15px;
}

.post_share img {
  margin: 0 3px;
}

.post_share .fa,
.post_share .fab,
.post_share .fa-brands,
.post_share .fa-solid,
.post_share .fas {
  font-size: 40px;
  margin: 0 5px;
}

.follow-me {
  text-align: center;
}

.follow-me .fa,
.follow-me .fab,
.follow-me .fas,
.follow-me .fa-brands,
.follow-me .fa-solid {
  font-size: 40px;
  margin: 0 5px;
}

.comment-form {
  margin: 15px 0 0 0;
  padding: 10px;
  border: 1px solid #ddd;
}

.comment-form h3 {
  margin: 0;
  padding: 3px 5px 10px 0;
  font-size: 20px;
}

.comments-container {
  margin: 15px 0 15px 0;
  padding: 0;
  width: 100%;
}

.comments-container h3 {
  font-size: 30px;
  color: #283035;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 25px;
  text-align: center;
}

.comments-container h3 a {
  font-size: 18px;
  font-weight: 700;
}

.error-container {
  background-color: #fff;
  color: #333;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 15px;
  margin: 15px 0;
}

.error-content,
.user-home-content {
  background-color: #f3f3f3;
  border: 1px solid #ddd;
  padding: 15px;
  text-align: center;
}

.error-content h2,
.user-home-content h2 {
  margin-top: 10px;
}

.error-content h2 a,
.user-home-content h2 a {
  color: #333;
}

.error-content i,
.user-home-content i {
  font-size: 35px;
}

.user-home-links {
  margin-top: 15px;
}

.surah-loop {
  padding: 0;
}

.surah-loop-content {
  position: relative;
  border: 1px solid #ddd;
  border-bottom: 2px solid var(--blue);
  background-color: rgba(243, 243, 243, .5);
  padding: 15px;
}

.surah-loop-content:hover,
.surah-loop-active {
  background-color: rgba(243, 243, 243, 1);
}

.surah-loop-name {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 700;
}

.surah-loop-name a {
  color: #666;
}

.surah-loop-number {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  background-color: var(--blue);
  padding-top: 3px;
  color: #fff;
  width: 30px;
  height: 30px;
}

.surah-listen {
  position: relative;
  text-align: center;
  margin-bottom: 15px;
}

.surah-loop-content .fa-solid {
  font-size: 20px;
}

.faq-container {
  margin: 15px 0 30px 0;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 10px;
}

.faq-container .faq-main-title {
  text-align: center;
  margin-bottom: 15px;
}

.faq-container .faq-main-title h4 {
  display: inline-block;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--blue);
}

.faq-container h5,
.faq-container .accordion-button {
  font-weight: 700;
}

.faq-container p:last-child,
.faq-container ul:last-child {
  margin-bottom: 0;
}

.author-container {
  padding: 0;
}

.author-sm {
  padding: 0;
  margin-top: 15px;
}

.author-sm .author-sm-icon {
  font-size: 25px;
}

.author-details {
  margin-top: 15px;
}

.author-details p:last-child {
  margin-bottom: 0;
}

.author-description {
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}

.author-posts {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid #ddd;
}

iframe {
  width: 100%;
  /*
  height: 50.625vw;
  */
  height: 38vw;
  /* 90*9/16 */
}

.box-template-main .box-row {
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.box-template-main .box-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.playlist {
  border: 1px solid #ddd;
  padding: 0;
  background-color: #333;
}

.playlist-videos {
  background: #eee;
  max-height: 500px;
  overflow: auto;
}

.playlist-videos .row {
  margin: 0;
}

.playlist-video {
  padding-bottom: 0;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid #eee;
  cursor: pointer;
}

.playlist-video:hover {
  background: #f2f2f2;
  border: 1px solid #ddd;
}

.playlist-video-image {
  padding: 0;
}

.playlist-video-title {
  margin: 10px;
}

.playlist-video-title h4 {
  font-size: 16px;
  margin: 0;
}

.playlist-video-title,
.playlist-video-title a {
  color: #333;
}

.playlist-show-video {
  color: #fff;
}

.video-active {
  background: #f2f2f2;
  border: 1px solid #ddd;
  font-weight: 700;
}

.video-active h4 {
  font-weight: 700;
}

.video-data-title h3 {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  padding: 15px;
}

.playlist-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.registration-form,
.login-form,
.logout {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  border-radius: 15px;
  border: 1px solid #ddd;
  padding: 15px;
  margin-top: 15px;
}

.registration-form h3,
.login-form h3,
.logout h3 {
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.registration-form .alert,
.login-form .alert {
  padding: 10px;
}

.user-page {
  margin-top: 15px;
  background: #fff;
  border-radius: 15px;
  border: 1px solid #ddd;
  padding: 15px;
}

.user-page h3 {
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 7px;
}

.checkout-page {
  background: #fff;
  border-radius: 15px;
  border: 1px solid #ddd;
  padding: 15px;
}

.checkout-page h4 {
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 7px;
}

.gallery-tab {
  width: 50px;
  height: 50px;
}

.product-cats {
  margin-bottom: 15px;
}

.product-sidebar {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding: 15px;
}

.product-sidebar h5 {
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 7px;
}

.product-sidebar .nav-link {
  padding: 5px;
}

.product-sidebar .product-tab-pane {
  padding: 10px;
  background-color: #fff;
}

.product-sidebar .gallery-more {
  margin-top: 25px;
}

.product-amount {
  font-size: 25px;
  font-weight: 700;
}

.product-amount-original {
  color: #757575;
  font-size: 20px;
  font-weight: 400;
  margin-left: 8px;
  text-decoration: line-through;
}

.product-amount-off {
  color: #db0404;
  font-size: 20px;
  font-weight: 400;
  margin-left: 8px;
}

.product-amount-original-cart {
  color: #757575;
  margin-left: 8px;
  text-decoration: line-through;
}

.product-amount-off-cart {
  color: #db0404;
  margin-left: 8px;
}

.product-amount-current-cart {
  font-weight: 800;
}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #ddd;
  width: 100%;
  height: 300px;
  margin-top: 15px;
}

figure.zoom {
  & img:hover {
    opacity: 0;
  }

  img {
    transition: opacity .5s;
    display: block;
    width: 100%;
  }

  background-position: 50% 50%;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}

.cursor {
  cursor: pointer;
}

.product-lightbox-modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

.product-lightbox-modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

.product-lightbox-close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.product-lightbox-close:hover,
.product-lightbox-close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.product-lightbox {
  display: none;
  text-align: center;
}

.product-prev,
.product-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.5);
}

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

.product-prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.product-next {
  right: 0;
  border-radius: 0 3px 3px 0;
}

.product-prev:hover,
.product-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.product-counter-number {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  background: #000;
}

.product-caption-container {
  text-align: center;
  background-color: black;
  padding: 15px;
  color: white;
}

.product-caption-container p {
  margin: 0;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cart-success {
  text-align: center;
  background-color: #fff;
  border-radius: 7px;
  border: 1px solid #ddd;
  padding: 15px;
}

.cart-success .icon {
  font-size: 40px;
  color: #1bbc9b;
}

.cart-success p {
  padding: 0;
  margin-bottom: 0;
  margin-top: 15px;
  font-weight: 900;
}

.cart-empty {
  text-align: center;
  background-color: #fff;
  border-radius: 7px;
  border: 1px solid #ddd;
  padding: 15px;
}

.cart-empty .cart-i {
  font-size: 90px;
  color: #ccc;
}

.cart-empty p {
  padding: 0;
  margin-bottom: 0;
  margin-top: 15px;
}

.cart-items img {
  max-width: 100px;
}

.add-cart-form {
  margin-top: 10px;
}

.complete-shopping {
  color: var(--blue) !important;
  font-weight: 400 !important;
}

.product-categories {
  padding: 0;
  background-color: #f2f2f2;
}

.product-category {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
}

.product-category-title {
  text-align: center;
  margin-bottom: 15px;
}

.product-category-title h3 {
  padding-bottom: 7px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--blue);
  font-weight: 500;
  display: inline-block;
}

.product-category-description {
  text-align: center;
  margin-bottom: 20px;
}

.product-category-description p {
  margin-bottom: 0;
  padding-bottom: 0;
}

.product-category-content {
  padding: 0;
}

.product-sub {
  text-align: center;
  background-color: #fff;
  border-radius: 15px;
  border: 1px solid #ddd;
  padding: 0;
}

.product-sub-image img {
  border-radius: 15px;
}

.product-sub-title {
  margin-top: 10px;
  margin-bottom: 15px;
}

.product-sub-title h5 {
  margin-bottom: 0;
  padding-bottom: 0;
}

.product-sub-title a {
  color: #333;
  font-weight: 400;
}

.productItem {
  position: relative;
}

.qa-container-home {
  padding: 0;
}

.qa-container-home .qa-languages,
.qa-show-container .qa-languages {
  position: relative;
  background-color: var(--blue);
  color: #FFF;
  padding: 30px 0;
  margin-bottom: 30px;
}

.qa-container-home .title {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
  color: var(--blue);
}

.qa-container-home .subtitle {
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
  color: #888;
}

.qa-container-home .title a {
  color: var(--blue);
  border-bottom: 1px solid #666666;
}

.qa-container-home .title a:hover {
  color: #666666;
  border-bottom: 1px solid var(--blue);
}

.qa-container-home .author {
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
  color: #888;
}

.qa-list {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 15px;
}

.qa-list h2 {
  color: var(--blue);
  font-weight: 700;
}

.qa-list a {
  color: var(--blue);
}

.qa-list a:hover {
  color: var(--blue);
}

.qa-question {
  border-bottom: 1px solid #ddd;
  padding: 5px;
  border-radius: 10px;
}

.qa-question-last {
  border-bottom: none;
}

.qa-languages-row {
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 30px;
}

.qa-languages-row .item {
  display: inline-block;
  width: 100px;
  margin: 10px;
  border: 1px solid #ddd;
  padding: 7px;
  border-radius: 7px;
  background-color: #fff;
}

.qa-languages {
  text-align: center;
}

.qa-languages .item {
  border: 1px solid #ddd;
  padding: 7px;
  border-radius: 7px;
  background-color: #fff;
}

.qa-languages .item:hover,
.qa-languages-row .item:hover,
.qa-languages .active,
.qa-languages-row .active {
  border: 1px solid #ccc;
  background-color: #ddd;
}

.qa-languages .active,
.qa-languages .active a,
.qa-languages-row .active,
.qa-languages-row .active a {
  color: #000;
  font-weight: 700;
}

.qa-show-container {
  margin-bottom: 15px;
}

.qa-show,
.qa-about {
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
  font-size: 20px;
  line-height: 33px;
  font-weight: 500;
  background-color: #fff;
}

.qa-show-ar {
  text-align: justify;
}

.qa-about i {
  color: var(--blue);
}

.qa-about-meta p {
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  background-color: #f3f3f3;
  padding: 5px;
  margin: 0;
}

.qa-show-container .title {
  text-align: center;
  margin: 30px 0;
  font-weight: 700;
  color: var(--blue);
}

.kids-show,
.kids-about {
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
  background-color: #fff;
}

.kids-show-ar {
  text-align: justify;
}

.rtl {
  text-align: right;
  direction: rtl;
}

.ltr {
  text-align: left;
  direction: ltr;
}

#qaInput {
  background-image: url('../images/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  border-radius: 15px;
}

#qaInput:focus-visible {
  border: 1px solid #ccc;
}

.carousel-caption {
  background: rgba(0, 0, 0, .5);
}

.carousel-caption a {
  color: #fff;
}

.box-card {
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
}

.box-card img {
  border: 1px solid #ddd;
  padding: 3px;
  width: 150px !important;
  height: 150px !important;
  border-radius: 50%;
  margin-bottom: 10px;
}

.box-card h3 {
  margin: 0;
}

.surah-name,
.translation-name,
.explanation-name {
  position: relative;
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid #ddd;
  border-radius: 7px;
  padding: 10px;
}

.surah-name:hover,
.translation-name:hover,
.explanation-name:hover {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

.surah-name:hover a,
.translation-name:hover a,
.explanation-name:hover a {
  color: #333;
}

.surah-name h5,
.translation-name h5,
.explanation-name h5 {
  margin: 0;
}

.surah-name h5 a,
.translation-name h5 a,
.explanation-name h5 a {
  display: block;
}

.surah-name .num {
  position: absolute;
  width: 30px;
  height: 30px;
  text-align: center;
  right: 10px;
  top: 10px;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  border-radius: 50%;
  font-weight: 400 !important;
  padding: 2px;
}

.surah-name .num:hover {
  background: rgba(0, 0, 0, .6);
}

.translation-name img {
  max-width: 25px;
}

.surah-content,
.surah-content-one-line {
  position: relative;
  text-align: justify;
}

.surah-content .single-ayah {
  position: relative;
  display: inline;
  color: #333;
  background: #ffffff;
  transition: opacity .5s;
  transition: background-color .5s;
}

.surah-content .single-ayah a {
  display: inline;
  color: #222;
}

.surah-content .single-ayah a:hover {
  color: var(--blue);
}

.surah-content .single-ayah:hover {
  opacity: 1;
}

.quran-popover {
  position: absolute;
  border-radius: 7px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 10px;
  top: -50px;
  right: 0;
  display: none;
  line-height: initial;
  min-width: 200px;
  text-align: center;
  z-index: 999;
  opacity: 1;
}

.quran-popover li {
  cursor: pointer;
}

.ayah-number {
  color: var(--blue);
  font-size: 1.5em;
}

.ayah-number-1 {
  font-size: 2em;
}

.frame-surah-name {
  width: 400px;
  height: 65px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 25px;
  background: url('../images/frames/surah-bg-4.png') no-repeat;
  background-size: cover;
}

.frame-surah-name h2 {
  font-size: 27px;
  padding-top: 15px;
  font-weight: 400;
  margin-bottom: 0;
}

.frame-001 .frame-surah-name {
  background: url('../images/frames/surah-bg-1.png') no-repeat;
  background-size: cover;
}

.frame-002 .frame-surah-name {
  background: url('../images/frames/surah-bg-2.png') no-repeat;
  background-size: cover;
}

.frame-003 .frame-surah-name,
.frame-004 .frame-surah-name {
  background: url('../images/frames/surah-bg-3.png') no-repeat;
  background-size: cover;
}

.quran-page {
  position: relative;
  max-width: 835px;
  margin: 0 auto;
}

.quran-page-surah-info {
  padding: 15px 15px 5px 15px;
  background-color: rgba(255, 255, 255, .9);
  border-radius: 7px;
  margin-bottom: 15px;
}

.quran-page-surah-footer-info {
  padding: 15px;
  background-color: rgba(255, 255, 255, .9);
  border-radius: 7px;
  margin-bottom: 0;
}

.quran-page-surah-info p,
.quran-page-surah-footer-info p {
  padding: 0;
  margin: 0;
}

.quran-page-surah-footer-info .input-group-text {
  background-color: var(--blue);
  border: 1px solid var(--blue);
  color: #999;
}

.quran-page-surah-footer-info .input-group-text a {
  color: #fff;
}

.quran-page-surah-info-e {
  text-align: left;
}

.quran-page-surah-info-c {
  text-align: center;
  font-weight: 700;
}

.quran-page-surah-info-c .form-control {
  text-align: center;
}

.quran-page-content {
  position: relative;
  background: #fff;
  min-height: 180px;
  margin-bottom: 15px;
  padding: 40px 50px 45px 50px;
  text-align-last: center;
}

.quran-top-frame {
  position: absolute;
  top: 0;
  left: 34px;
  right: 34px;
  height: 36px;
  background: url('../images/frames/005/frame-side-bg.png') repeat-x;
}

.quran-top-right-frame {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 36px;
  background: url('../images/frames/005/frame-side.png') no-repeat;
}

.quran-top-left-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 36px;
  background: url('../images/frames/005/frame-side.png') no-repeat;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
  filter: FlipH;
}

.quran-bottom-frame {
  position: absolute;
  bottom: 0;
  left: 34px;
  right: 34px;
  height: 36px;
  background: url('../images/frames/005/frame-side-bg.png') repeat-x;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
  filter: FlipH;
  -ms-filter: "FlipH";
  transform: rotate(180deg);
}

.quran-bottom-left-frame {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 34px;
  height: 36px;
  background: url('../images/frames/005/frame-side.png') no-repeat;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
  filter: FlipH;
  -ms-filter: "FlipH";
  transform: rotate(180deg);
}

.quran-bottom-right-frame {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 34px;
  height: 36px;
  background: url('../images/frames/005/frame-side.png') no-repeat;
  -moz-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

.quran-right-frame {
  position: absolute;
  top: 36px;
  bottom: 36px;
  right: 0;
  width: 34px;
  height: auto;
  background: url('../images/frames/005/frame-sidebar-bg.png') repeat-y;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
  filter: FlipH;
  -ms-filter: "FlipH";
  transform: rotate(180deg);
}

.quran-left-frame {
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 0;
  width: 34px;
  height: auto;
  background: url('../images/frames/005/frame-sidebar-bg.png') repeat-y;
}

.frame-001 .quran-top-frame {
  left: 35px;
  right: 35px;
  height: 32px;
  background: url('../images/frames/001/frame-side-bg.png') repeat-x;
}

.frame-001 .quran-top-right-frame {
  width: 34px;
  height: 32px;
  background: url('../images/frames/001/frame-side.png') no-repeat;
}

.frame-001 .quran-top-left-frame {
  width: 34px;
  height: 32px;
  background: url('../images/frames/001/frame-side.png') no-repeat;
}

.frame-001 .quran-bottom-frame {
  left: 35px;
  right: 35px;
  height: 32px;
  background: url('../images/frames/001/frame-side-bg.png') repeat-x;
}

.frame-001 .quran-bottom-left-frame {
  width: 34px;
  height: 32px;
  background: url('../images/frames/001/frame-side.png') no-repeat;
}

.frame-001 .quran-bottom-right-frame {
  width: 34px;
  height: 32px;
  background: url('../images/frames/001/frame-side.png') no-repeat;
}

.frame-001 .quran-right-frame {
  top: 32px;
  bottom: 32px;
  width: 34px;
  height: auto;
  background: url('../images/frames/001/frame-sidebar-bg.png') repeat-y;
}

.frame-001 .quran-left-frame {
  top: 32px;
  bottom: 32px;
  width: 34px;
  background: url('../images/frames/001/frame-sidebar-bg.png') repeat-y;
}

.frame-002 {
  background: #ffffff;
  min-height: 180px;
  margin-bottom: 30px;
  padding: 30px 40px 35px 40px;
}

.frame-002 .quran-top-frame {
  left: 35px;
  right: 35px;
  height: 23px;
  background: url('../images/frames/002/frame-side-bg.png') repeat-x;
}

.frame-002 .quran-top-right-frame {
  width: 35px;
  height: 23px;
  background: url('../images/frames/002/frame-side.png') no-repeat;
}

.frame-002 .quran-top-left-frame {
  width: 35px;
  height: 23px;
  background: url('../images/frames/002/frame-side.png') no-repeat;
}

.frame-002 .quran-bottom-frame {
  left: 35px;
  right: 35px;
  height: 23px;
  background: url('../images/frames/002/frame-side-bg.png') repeat-x;
}

.frame-002 .quran-bottom-left-frame {
  width: 35px;
  height: 23px;
  background: url('../images/frames/002/frame-side.png') no-repeat;
}

.frame-002 .quran-bottom-right-frame {
  width: 35px;
  height: 23px;
  background: url('../images/frames/002/frame-side.png') no-repeat;
}

.frame-002 .quran-right-frame {
  top: 23px;
  bottom: 23px;
  width: 23px;
  height: auto;
  background: url('../images/frames/002/frame-sidebar-bg.png') repeat-y;
}

.frame-002 .quran-left-frame {
  top: 23px;
  bottom: 23px;
  width: 23px;
  background: url('../images/frames/002/frame-sidebar-bg.png') repeat-y;
}

.frame-003 {
  background: #fff;
  min-height: 180px;
  margin-bottom: 30px;
  padding: 85px;
}

.frame-003 .quran-top-frame {
  left: 73px;
  right: 73px;
  height: 73px;
  background: url('../images/frames/003/frame-side-bg.png') repeat-x;
}

.frame-003 .quran-top-right-frame {
  width: 73px;
  height: 73px;
  background: url('../images/frames/003/frame-side.png') no-repeat;
}

.frame-003 .quran-top-left-frame {
  width: 73px;
  height: 73px;
  background: url('../images/frames/003/frame-side.png') no-repeat;
}

.frame-003 .quran-bottom-frame {
  left: 73px;
  right: 73px;
  height: 73px;
  background: url('../images/frames/003/frame-side-bg.png') repeat-x;
}

.frame-003 .quran-bottom-left-frame {
  width: 73px;
  height: 73px;
  background: url('../images/frames/003/frame-side.png') no-repeat;
}

.frame-003 .quran-bottom-right-frame {
  width: 73px;
  height: 73px;
  background: url('../images/frames/003/frame-side.png') no-repeat;
}

.frame-003 .quran-right-frame {
  top: 73px;
  bottom: 73px;
  width: 73px;
  height: auto;
  background: url('../images/frames/003/frame-sidebar-bg.png') repeat-y;
}

.frame-003 .quran-left-frame {
  top: 73px;
  bottom: 73px;
  width: 73px;
  background: url('../images/frames/003/frame-sidebar-bg.png') repeat-y;
}

.frame-004 {
  background: #fff;
  min-height: 180px;
  margin-bottom: 30px;
  padding: 65px;
}

.frame-004 .quran-top-frame {
  left: 44px;
  right: 44px;
  height: 44px;
  background: url('../images/frames/004/frame-side-bg.png') repeat-x;
}

.frame-004 .quran-top-right-frame {
  width: 44px;
  height: 44px;
  background: url('../images/frames/004/frame-side.png') no-repeat;
}

.frame-004 .quran-top-left-frame {
  width: 44px;
  height: 44px;
  background: url('../images/frames/004/frame-side.png') no-repeat;
}

.frame-004 .quran-bottom-frame {
  left: 44px;
  right: 44px;
  height: 44px;
  background: url('../images/frames/004/frame-side-bg.png') repeat-x;
}

.frame-004 .quran-bottom-left-frame {
  width: 44px;
  height: 44px;
  background: url('../images/frames/004/frame-side.png') no-repeat;
}

.frame-004 .quran-bottom-right-frame {
  width: 44px;
  height: 44px;
  background: url('../images/frames/004/frame-side.png') no-repeat;
}

.frame-004 .quran-right-frame {
  top: 44px;
  bottom: 44px;
  width: 44px;
  height: auto;
  background: url('../images/frames/004/frame-sidebar-bg.png') repeat-y;
}

.frame-004 .quran-left-frame {
  top: 44px;
  bottom: 44px;
  width: 44px;
  background: url('../images/frames/004/frame-sidebar-bg.png') repeat-y;
}

.quran-body {
  background: #fafafa url('../images/bg/bg-4-gray.jpg') no-repeat;
  background-size: auto;
  background-position: top right;
}

.quran-body .site-navbar {
  background: rgba(250, 250, 250, .9);
}

.quran-body .site-header {
  opacity: .9;
}

.surah-translate,
.quran-container,
.surah-name-content {
  position: relative;
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid #ddd;
  border-radius: 7px;
  padding: 10px;
}

.quran-container-single {
  text-align: center;
}

.quran-container-single .icon-div {
  display: inline-block;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  border: 1px solid #ddd;
  padding: 15px;
}

.quran-container-single .icon {
  font-size: 40px;
  color: var(--blue);
}

.quran-container-single .icon-div:hover {
  border: 1px solid #eee;
  background: #f5f5f5;
}

.quran-container-single .icon-div:hover .icon {
  color: #777;
}

.quran-container-single p {
  margin-bottom: 0;
  margin-top: 10px;
}

.quran-container-single p a {
  color: #333;
  font-weight: 700;
}

.quran-container .quran-container-title {
  color: #666;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.quran-container .quran-container-title p {
  margin-bottom: 0;
}

.surah-translate-ayah {
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 30px;
}

.surah-translate-ayah:hover,
.quran-explanation-ayah:hover {
  background: #f9f9f9;
}

.text-translate-rtl {
  direction: rtl;
  text-align: right;
}

.text-translate-ltr {
  direction: ltr;
  text-align: left;
  margin-top: 10px;
  font-size: 18px;
}

.quran-explanation-ayah {
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.quran-explanation-text {
  margin-top: 10px;
  font-size: 20px;
  line-height: 35px;
  text-align: justify;
}

.listen-ayah {
  margin-bottom: 15px;
}

#tafsir-ar,
#translate-ar {
  margin-bottom: 15px;
}

.tafsir-surah-content,
.translate-surah-content {
  margin-top: 10px;
  font-size: 20px;
  line-height: 35px;
  text-align: justify;
  padding: 15px;
  border: 1px solid #ddd;
  border-right: 4px solid var(--blue);
}

.tafsir-surah-content:hover,
.translate-surah-content:hover {
  border: 1px solid #ccc;
  background-color: #f7f7f7;
  border-right: 4px solid var(--gray);
}

.tafsir-surah-content p:last-child,
.translate-surah-content p:last-child {
  margin-bottom: 0;
}

.tafsir-surah-content h2,
.translate-surah-content h2 {
  color: var(--blue);
}

.translate-surah-content {
  border-right: none;
  border-left: 4px solid var(--blue);
}

.translate-surah-content:hover {
  border-right: none;
  border-left: 4px solid var(--gray);
}

.fa-custom .fa-brands,
.fa-custom .fa-solid {
  padding: 10px;
  font-size: 20px;
  width: 40px;
  text-align: center;
  text-decoration: none;
}

.fa-custom-r .fa-brands,
.fa-custom-r .fa-solid {
  padding: 10px;
  font-size: 20px;
  width: 40px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.fa-custom .fa-brands:hover,
.fa-custom-r .fa-brands:hover {
  opacity: 0.7;
}

.fa-bg .fa-facebook-f {
  background: #1877f2;
  color: #fff;
}

.fa-bg .fa-x-twitter {
  background: #000000;
  color: #fff;
}

.fa-bg .fa-youtube {
  background: #ff0000;
  color: #fff;
}

.fa-bg .fa-instagram {
  background: #c32aa3;
  color: #fff;
}

.fa-bg .fa-tiktok {
  background: #010101;
  color: #fff;
}

.fa-bg .fa-snapchat {
  background: #fffc00;
  color: #000;
}

.fa-bg .fa-whatsapp {
  background: #25d366;
  color: #fff;
}

.fa-bg .fa-telegram {
  background: #0088cc;
  color: #fff;
}

.fa-bg .fa-pinterest-p {
  background: #bd081c;
  color: #fff;
}

.fa-bg .fa-linkedin-in {
  background: #0a66c2;
  color: #fff;
}

.fa-bg .fa-reddit-alien {
  background: #ff4500;
  color: #fff;
}

.fa-bg .fa-tumblr {
  background: #35465d;
  color: #fff;
}

.fa-bg .fa-weixin {
  background: #04d067;
  color: white;
}

.fa-bg .fa-weibo {
  background: #d62b2a;
  color: #fff;
}

.fa-bg .fa-qq {
  background: #000000;
  color: #fff;
}

.fa-bg .fa-threads {
  background: #333;
  color: #fff;
}

.fa-bg .fa-quora {
  background: #aa2200;
  color: #fff;
}

.fa-bg .fa-twitch {
  background: #9146ff;
  color: #fff;
}

.fa-bg .fa-discord {
  background: #5865f2;
  color: #fff;
}

.fa-bg .fa-bluesky {
  background: #1185fe;
  color: #fff;
}

.fa-bg .fa-mastodon {
  background: #6364ff;
  color: #fff;
}

.fa-bg .fa-rss {
  background: #ff6600;
  color: #fff;
}

.fa-c {
  font-size: 20px;
  padding-top: 5px;
}

.fa-c .fa-facebook-f {
  color: #1877f2;
}

.fa-c .fa-x-twitter {
  color: #000000;
}

.fa-c .fa-youtube {
  color: #ff0000;
}

.fa-c .fa-instagram {
  color: #c32aa3;
}

.fa-c .fa-tiktok {
  color: #010101;
}

.fa-c .fa-snapchat {
  color: #fffc00;
}

.fa-c .fa-whatsapp {
  color: #25d366;
}

.fa-c .fa-telegram {
  color: #0088cc;
}

.fa-c .fa-pinterest-p {
  color: #bd081c;
}

.fa-c .fa-linkedin-in {
  color: #0a66c2;
}

.fa-c .fa-reddit-alien {
  color: #ff4500;
}

.fa-c .fa-tumblr {
  color: #35465d;
}

.fa-c .fa-weixin {
  color: #04d067;
}

.fa-c .fa-weibo {
  color: #d62b2a;
}

.fa-c .fa-qq {
  color: #000000;
}

.fa-c .fa-threads {
  color: #333;
}

.fa-c .fa-quora {
  color: #aa2200;
}

.fa-c .fa-twitch {
  color: #9146ff;
}

.fa-c .fa-discord {
  color: #5865f2;
}

.fa-c .fa-bluesky {
  color: #1185fe;
}

.fa-c .fa-mastodon {
  color: #6364ff;
}

.fa-c .fa-rss {
  color: #ff6600;
}

.offcanvas.show .sm-navbar {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.offcanvas.show .sm-navbar .nav-item {
  display: inline-block;
  padding: 10px 15px;
}

#toTop {
  position: fixed;
  right: 25px;
  bottom: 15px;
  margin: 0;
  z-index: 99;
  display: none;
}

#toTop .icon {
  font-size: 32px;
  color: #fff;
  background: rgba(0, 0, 0, .4);
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

#toTop .icon:hover {
  background: rgba(255, 255, 255, .5);
  color: #333;
}

.academy {
  background-color: #fff;
}

.academy-head {
  text-align: center;
  margin-bottom: 15px;
  padding: 30px 0;
}

.academy-head h1 {
  margin-bottom: 15px;
}

.academy-head p {
  margin-bottom: 0;
}

.academy-course-cover {
  position: relative;
  text-align: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.academy-course-cover-bg {
  background: rgba(0, 0, 0, 0.6);
  padding: 50px 0;
  color: #fff;
}

.academy-course-cover-bg .q-divider-2::before,
.academy-course-cover-bg .q-divider-2::after {
  background: #fff;
}

.academy-courses {
  background-color: #fff;
  padding: 30px 0;
}

.academy-services,
.works-services {
  background-color: #f5f5f5;
  padding: 30px 0;
  text-align: center;
}

.course-head {
  background: #fff;
  border: 1px solid #ddd;
}

.course-head-content {
  padding: 10px 15px;
}

.course-head-content h3 {
  margin-bottom: 15px;
  border-bottom: 1px solid #fff;
  padding-bottom: 5px;
}

.course-head-content .flag,
.languages-data .flag {
  width: 24px;
}

.item-info {
  margin-top: 15px;
}

.course-content {
  margin-top: 15px;
  margin-bottom: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
}

.course-content p:last-child {
  margin-bottom: 0;
}

.section-items .section-item:last-child {
  margin-bottom: 0;
}

.lecturer-data {
  position: relative;
  background: #f5f5f5;
  border: 1px solid #ddd;
  margin-top: 15px;
}

.lecturer-data span {
  position: absolute;
  right: 7px;
  top: 7px;
  color: #ccc;
}

.lecturer-head {
  position: relative;
  padding: 10px;
  min-height: 90px;
  border-bottom: 1px solid #ddd;
}

.lecturer-head img {
  position: absolute;
  top: 7px;
  left: 10px;
  width: 75px !important;
  border-radius: 50%;
  border: 1px solid #ddd;
  padding: 2px;
  background: #fff;
}

.lecturer-head .lecturer-info {
  padding-left: 95px;
}

.lecturer-head:last-child {
  border-bottom: none;
}

.lecturer-img {
  max-width: 100px !important;
}

.course-row,
.course-intro-video,
.course-featured-audio,
.course-book,
.sections-data {
  margin-top: 15px;
}

.sections-data {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
}

.course-book {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
}

.course-row-item,
.loop-items {
  text-align: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
}

.course-row-item h4,
.loop-items h2 {
  margin-bottom: 10px;
}

.course-row-icon {
  font-size: 35px;
  color: var(--blue);
  margin-bottom: 10px;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 20px;
  display: inline-block;
}

.course-row-icon:hover {
  background: #f2f2f2;
}

.section-item:first-of-type {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.section-item:last-of-type {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.section-item:not(:first-of-type) {
  border-top: 1px solid rgba(0, 102, 153, 0.3);
}

.section-item .accordion-button {
  border-radius: 0;
  background: none;
  font-weight: 700;
}

.section-item:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.section-item .accordion-button:not(.collapsed) {
  color: #000;
  background: none;
}

.section-item {
  padding: 0;
  margin-bottom: 15px;
  border-radius: 15px;
  border: 1px solid rgba(0, 102, 153, 0.3);
  background-color: rgba(0, 102, 153, 0.06);
}

.lessons-data {
  position: relative;
  background: #fff;
  padding: 10px;
}

.lessons-data a {
  color: #333;
}

.lessons-data a:hover {
  color: var(--blue);
}

.lessonsCount {
  font-weight: 400;
  font-size: 14px;
  color: #888;
}

.lesson-item {
  position: relative;
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
  padding-bottom: 7px;
}

.lesson-item p {
  margin-bottom: 0;
}

.lesson-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.lesson-item .counter {
  position: absolute;
  right: 0;
  top: 0;
}

.lesson-active a {
  color: var(--blue);
  font-weight: 700;
}

.lesson-active p {
  font-weight: 700;
}

.lessons-sidebar {
  overflow: auto;
  background: #fff;
  height: 300px;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 15px;
}

.lessons-sidebar .lesson-item p {
  padding-right: 45px;
}

.academy-lessons {
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 15px;
}

.lesson-main-title {
  text-align: center;
  margin-bottom: 15px;
}

.lesson-main-title h1 {
  color: #333;
}

.lesson-main-title h3 {
  color: #999;
}

.lesson-image {
  margin-bottom: 15px;
}

.lesson-image img {
  border-radius: 7px;
}

.lesson-body h2 {
  margin-bottom: 10px;
}

.lesson-content {
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 15px;
}

.lesson-content p:last-child {
  margin-bottom: 0;
}

.lesson-video {
  position: relative;
  margin-bottom: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.lesson-video-body {
  position: relative;
  padding: 7px 15px 15px 15px;
}

.lesson-video .lesson-body {
  padding: 7px 15px 15px 15px;
}

.next-lesson {
  position: absolute;
  right: 15px;
  bottom: 5px;
  z-index: 999;
}

.next-lesson a {
  font-size: 14px;
}

.item-title {
  margin-bottom: 0;
}

.lesson-audio {
  position: relative;
  margin-bottom: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 5px;
}

.lesson-audio audio {
  width: 100%;
  outline: none;
}

.element-content {
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  background: rgba(249, 249, 249, .8);
  border-radius: 15px;
}

.element-content:hover {
  background: rgba(249, 249, 249, .9);
}

.element-content .element-icon {
  font-size: 25px;
  margin-bottom: 15px;
  color: var(--blue);
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 20px;
  background: #fff;
}

.element-content .element-image {
  margin-bottom: 15px;
}

.element-content .element-title {
  color: #333;
  text-align: center;
}

.q-divider {
  width: 100%;
  font-size: .875rem;
  line-height: calc(1.25/.875);
  white-space: nowrap;
  align-self: stretch;
  align-items: center;
  display: flex;
  margin: 30px 0 30px 0;
}

h2.q-divider {
  font-size: 25px;
}

h3.q-divider {
  font-size: 22px;
}

h4.q-divider {
  font-size: 20px;
}

.q-divider:not(:empty) {
  gap: 1rem;
}

.q-divider:before {
  content: "";
  border-inline-end-style: solid;
  border-inline-end-width: 0;
  border-top-style: solid;
  border-top-width: 1px;
  border-color: #ddd;
  flex-grow: 1;
  width: 100%;
  height: 1px;
}

.q-divider:after {
  content: "";
  border-inline-end-style: solid;
  border-inline-end-width: 0;
  border-top-style: solid;
  border-top-width: 1px;
  border-color: #ddd;
  flex-grow: 1;
  width: 100%;
  height: 1px;
}

.q-divider-2 {
  position: relative;
  display: inline-block;
  padding: 0 60px;
  margin-bottom: 15px;
  font-size: 30px;
  font-weight: 700;
}

.q-divider-2::before {
  position: absolute;
  top: 18px;
  width: 40px;
  height: 1px;
  background: var(--blue);
  content: '';
  right: 0;
}

.q-divider-2::after {
  position: absolute;
  top: 18px;
  width: 40px;
  height: 1px;
  background: var(--blue);
  content: '';
  left: 0;
}

.site-head {
  margin-bottom: 15px;
}

.site-head .title h2 {
  margin-bottom: 25px;
  font-size: 1.5rem;
  display: flex;
}

.site-head .title h2:before {
  content: "";
  background-color: var(--blue);
  border-radius: 8px;
  width: 8px;
  margin-left: 8px;
}

.academy .main-title {
  margin-bottom: 15px;
}

.academy-container .main-title {
  text-align: center;
  margin-bottom: 30px;
}

.academy-track .q-divider {
  margin-bottom: 15px;
}

.items-title {
  text-align: center;
}

.items-container-bg {
  padding: 15px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .7);
}

.item-bg-1 {
  background: url('../images/bg/1.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-2 {
  background: url('../images/bg/2.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-3 {
  background: url('../images/bg/3.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-4 {
  background: url('../images/bg/4.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-5 {
  background: url('../images/bg/5.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-6 {
  background: url('../images/bg/6.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-7 {
  background: url('../images/bg/7.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-8 {
  background: url('../images/bg/8.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-9 {
  background: url('../images/bg/9.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-10 {
  background: url('../images/bg/10.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-11 {
  background: url('../images/bg/11.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-12 {
  background: url('../images/bg/12.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-13 {
  background: url('../images/bg/13.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-14 {
  background: url('../images/bg/14.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-15 {
  background: url('../images/bg/15.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-16 {
  background: url('../images/bg/16.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-17 {
  background: url('../images/bg/17.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-17 .items-container-bg,
.item-bg-18 .items-container-bg {
  background: rgba(255, 255, 255, .6);
}

.item-bg-20 .items-container-bg,
.item-bg-21 .items-container-bg {
  background: rgba(0, 0, 0, .6);
}

.item-bg-31 .items-container-bg {
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(255, 255, 255, .1));
}

.item-bg-18 {
  background: url('../images/bg/18.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-19 {
  background: url('../images/bg/19.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-20 {
  background: url('../images/bg/20.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-21 {
  background: url('../images/bg/21.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-22 {
  background: url('../images/bg/22.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-23 {
  background: url('../images/bg/23.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-24 {
  background: url('../images/bg/24.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-25 {
  background: url('../images/bg/25.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-26 {
  background: url('../images/bg/26.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-27 {
  background: url('../images/bg/27.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-28 {
  background: url('../images/bg/28.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-29 {
  background: url('../images/bg/29.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-30 {
  background: url('../images/bg/30.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-31 {
  background: url('../images/bg/31.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-32 {
  background: url('../images/bg/32.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-33 {
  background: url('../images/bg/33.jpg') center no-repeat;
  background-size: cover;
}

.item-bg-34 {
  background: #34568B;
  background: linear-gradient(360deg, #34568B 0%, #5a7bbf 100%);
  color: #fff;
}

.item-bg-34 .q-divider-2::before,
.item-bg-34 .q-divider-2::after,
.item-bg-35 .q-divider-2::before,
.item-bg-35 .q-divider-2::after,
.item-bg-36 .q-divider-2::before,
.item-bg-36 .q-divider-2::after,
.item-bg-38 .q-divider-2::before,
.item-bg-38 .q-divider-2::after,
.item-bg-39 .q-divider-2::before,
.item-bg-39 .q-divider-2::after,
.item-bg-40 .q-divider-2::before,
.item-bg-40 .q-divider-2::after,
.item-bg-42 .q-divider-2::before,
.item-bg-42 .q-divider-2::after,
.item-bg-43 .q-divider-2::before,
.item-bg-43 .q-divider-2::after,
.item-bg-44 .q-divider-2::before,
.item-bg-44 .q-divider-2::after,
.item-bg-45 .q-divider-2::before,
.item-bg-45 .q-divider-2::after,
.item-bg-46 .q-divider-2::before,
.item-bg-46 .q-divider-2::after,
.item-bg-47 .q-divider-2::before,
.item-bg-47 .q-divider-2::after,
.item-bg-49 .q-divider-2::before,
.item-bg-49 .q-divider-2::after,
.item-bg-50 .q-divider-2::before,
.item-bg-50 .q-divider-2::after,
.item-bg-51 .q-divider-2::before,
.item-bg-51 .q-divider-2::after,
.item-bg-52 .q-divider-2::before,
.item-bg-52 .q-divider-2::after,
.item-bg-53 .q-divider-2::before,
.item-bg-53 .q-divider-2::after,
.item-bg-54 .q-divider-2::before,
.item-bg-54 .q-divider-2::after,
.item-bg-55 .q-divider-2::before,
.item-bg-55 .q-divider-2::after,
.item-bg-56 .q-divider-2::before,
.item-bg-56 .q-divider-2::after,
.item-bg-57 .q-divider-2::before,
.item-bg-57 .q-divider-2::after,
.item-bg-58 .q-divider-2::before,
.item-bg-58 .q-divider-2::after,
.item-bg-59 .q-divider-2::before,
.item-bg-59 .q-divider-2::after,
.item-bg-60 .q-divider-2::before,
.item-bg-60 .q-divider-2::after,
.item-bg-61 .q-divider-2::before,
.item-bg-61 .q-divider-2::after,
.item-bg-62 .q-divider-2::before,
.item-bg-62 .q-divider-2::after {
  background: #fff;
}

.item-bg-63 .q-divider-2::before,
.item-bg-63 .q-divider-2::after {
  background: #333;
}

.item-bg-35 {
  background: #CD212A;
  color: #fff;
}

.item-bg-36 {
  background: #FFA500;
  color: #fff;
}

.item-bg-37 {
  background: #56C6A9;
}

.item-bg-38 {
  background: #4B5335;
  color: #fff;
}

.item-bg-39 {
  background: #798EA4;
  color: #fff;
}

.item-bg-40 {
  background: #FA7A35;
  color: #fff;
}

.item-bg-41 {
  background: #00758F;
  color: #fff;
}

.item-bg-42 {
  background: #EDD59E;
}

.item-bg-43 {
  background: #E8A798;
  color: #fff;
}

.item-bg-44 {
  background: #9C4722;
  color: #fff;
}

.item-bg-45 {
  background: #6B5876;
  color: #fff;
}

.item-bg-46 {
  background: #B89B72;
  color: #fff;
}

.item-bg-47 {
  background: #282D3C;
  color: #fff;
}

.item-bg-48 {
  background: #EDF1FF;
}

.item-bg-49 {
  background: #A09998;
  color: #fff;
}

.item-bg-50 {
  background: #DC793E;
  color: #fff;
}

.item-bg-51 {
  background: #A2242F;
  color: #fff;
}

.item-bg-52 {
  background: #C48A69;
  color: #fff;
}

.item-bg-53 {
  background: #34568B;
  color: #fff;
}

.item-bg-54 {
  background: #D9CE52;
}

.item-bg-55 {
  background: #D19C97;
}

.item-bg-56 {
  background: #006B54;
  color: #fff;
}

.item-bg-57 {
  background: #6A2E2A;
  color: #fff;
}

.item-bg-58 {
  background: #E6AF91;
}

.item-bg-59 {
  background: #6C244C;
  color: #fff;
}

.item-bg-60 {
  background: #FDAC53;
  color: #fff;
}

.item-bg-61 {
  background: #9BB7D4;
}

.item-bg-62 {
  background: #B55A30;
  color: #fff;
}

.item-bg-63 {
  background: #F5DF4D;
  color: #333;
}

.item-bg-64 {
  background-color: #ffffff;
  background-image: url('../images/patterns/home-section-1.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-65 {
  background-color: #000;
  background-image: url('../images/patterns/home-section-2.png');
  background-repeat: repeat;
  border-bottom: 1px solid #333;
  color: #fff;
}

.item-bg-65 .q-divider-2::before,
.item-bg-65 .q-divider-2::after,
.item-bg-66 .q-divider-2::before,
.item-bg-66 .q-divider-2::after {
  background: #fff;
}

.item-bg-66 {
  background-color: #000;
  background-image: url('../images/patterns/home-section-3.png');
  background-repeat: repeat;
  border-bottom: 1px solid #333;
  color: #fff;
}

.item-bg-67 {
  background-color: #ffffff;
  background-image: url('../images/patterns/home-section-4.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-68 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg1.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-69 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg2.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-70 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg3.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-71 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg4.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-72 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg5.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-73 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg6.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-74 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg7.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-75 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg8.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-76 {
  background-color: #ddd;
  background-image: url('../images/patterns/body-bg9.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-77 {
  background-color: #f2f2f2;
  background-image: url('../images/patterns/body-bg10.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-78 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg29.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-79 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg30.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-80 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg32.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-81 {
  background-color: #fff;
  background-image: url('../images/patterns/body-bg33.png');
  background-repeat: repeat;
  border-bottom: 1px solid #ddd;
}

.item-bg-1 .items-title,
.item-bg-1 a,
.item-bg-1 .custom-owl-item-title a {
  color: #4a5c75;
}

.item-bg-1 .items-title .q-divider-2::before,
.item-bg-1 .items-title .q-divider-2::after {
  background: #4a5c75;
}

.item-bg-2 .items-container-bg a,
.item-bg-2 .custom-owl-item-title a {
  color: #1b5ca8;
}

.item-bg-3 .items-container-bg a,
.item-bg-3 .custom-owl-item-title a {
  color: #2d92b0;
}

.item-bg-4 .items-title,
.item-bg-4 a,
.item-bg-4 .custom-owl-item-title a {
  color: #a5757b;
}

.item-bg-4 .items-title .q-divider-2::before,
.item-bg-4 .items-title .q-divider-2::after {
  background: #a5757b;
}

.item-bg-5 .items-container-bg a,
.item-bg-5 .custom-owl-item-title a {
  color: #0e2330;
}

.item-bg-6 .items-container-bg a,
.item-bg-6 .custom-owl-item-title a {
  color: #5091b7;
}

.item-bg-7 .items-title,
.item-bg-7 a,
.item-bg-7 .custom-owl-item-title a {
  color: #333;
}

.item-bg-7 .items-title .q-divider-2::before,
.item-bg-7 .items-title .q-divider-2::after {
  background: #333;
}

.item-bg-8 .items-container-bg a,
.item-bg-8 .custom-owl-item-title a {
  color: #223c45;
}

.item-bg-9 .items-title,
.item-bg-9 a,
.item-bg-9 .custom-owl-item-title a {
  color: #333;
}

.item-bg-9 .items-title .q-divider-2::before,
.item-bg-9 .items-title .q-divider-2::after {
  background: #333;
}

.item-bg-10 .items-container-bg a,
.item-bg-10 .custom-owl-item-title a {
  color: #782e3f;
}

.item-bg-11 .items-container-bg a,
.item-bg-11 .custom-owl-item-title a {
  color: #166687;
}

.item-bg-12 .items-container-bg a,
.item-bg-12 .custom-owl-item-title a {
  color: #37456a;
}

.item-bg-13 .items-container-bg a,
.item-bg-13 .custom-owl-item-title a {
  color: #3831a5;
}

.item-bg-14 .items-title,
.item-bg-14 a,
.item-bg-14 .custom-owl-item-title a {
  color: #333;
}

.item-bg-14 .items-title .q-divider-2::before,
.item-bg-14 .items-title .q-divider-2::after {
  background: #333;
}

.item-bg-15 .items-title,
.item-bg-15 a,
.item-bg-15 .custom-owl-item-title a {
  color: #5b908f;
}

.item-bg-15 .items-title .q-divider-2::before,
.item-bg-15 .items-title .q-divider-2::after {
  background: #5b908f;
}

.item-bg-16 .items-container-bg a,
.item-bg-16 .custom-owl-item-title a {
  color: #33255d;
}

.item-bg-17 .items-title,
.item-bg-17 a,
.item-bg-17 .custom-owl-item-title a {
  color: #333;
}

.item-bg-17 .items-title .q-divider-2::before,
.item-bg-17 .items-title .q-divider-2::after {
  background: #333;
}

.item-bg-18 .items-title,
.item-bg-18 a,
.item-bg-18 .custom-owl-item-title a {
  color: #333;
}

.item-bg-18 .items-title .q-divider-2::before,
.item-bg-18 .items-title .q-divider-2::after {
  background: #333;
}

.item-bg-19 .items-container-bg a,
.item-bg-19 .custom-owl-item-title a {
  color: #333;
}

.item-bg-20 .items-container-bg a,
.item-bg-20 .custom-owl-item-title a {
  color: #333;
}

.item-bg-21 .items-container-bg a,
.item-bg-22 .items-container-bg a,
.item-bg-21 .custom-owl-item-title a,
.item-bg-22 .custom-owl-item-title a {
  color: #333;
}

.item-bg-23 .items-container-bg a,
.item-bg-23 .custom-owl-item-title a {
  color: #429f8d;
}

.item-bg-24 .items-container-bg a,
.item-bg-24 .custom-owl-item-title a {
  color: #5d7a20;
}

.item-bg-25 .items-container-bg a,
.item-bg-25 .custom-owl-item-title a {
  color: #833976;
}

.item-bg-25 .items-title {
  color: #ffffff;
}

.item-bg-26 .items-container-bg a,
.item-bg-26 .custom-owl-item-title a {
  color: #acbc28;
}

.item-bg-26 .items-title {
  color: #ffffff;
}

.item-bg-26 .q-divider-2::before,
.item-bg-26 .q-divider-2::after {
  background: #fff;
}

.item-bg-27 .items-container-bg a,
.item-bg-27 .custom-owl-item-title a {
  color: #a81a4c;
}

.item-bg-28 .items-container-bg a,
.item-bg-28 .custom-owl-item-title a {
  color: #7b76ac;
}

.item-bg-29 .items-container-bg a,
.item-bg-29 .custom-owl-item-title a {
  color: #613e92;
}

.item-bg-30 .items-container-bg a,
.item-bg-30 .custom-owl-item-title a {
  color: #5192c0;
}

.item-bg-30 .items-title,
.item-bg-32 .items-title {
  color: #ffffff;
}

.item-bg-31 .items-title {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .9);
}

.item-bg-30 .q-divider-2::before,
.item-bg-30 .q-divider-2::after,
.item-bg-31 .q-divider-2::before,
.item-bg-31 .q-divider-2::after,
.item-bg-32 .q-divider-2::before,
.item-bg-32 .q-divider-2::after {
  background: #fff;
}

.item-bg-31 .items-container-bg a,
.item-bg-31 .custom-owl-item-title a {
  color: #374960;
}

.item-bg-32 .items-container-bg a,
.item-bg-32 .custom-owl-item-title a {
  color: #56c5ba;
}

.item-bg-33 .items-container-bg a,
.item-bg-33 .custom-owl-item-title a {
  color: #5584b7;
}


.works-list {
  background-color: #f5f5f5;
  padding: 30px 0;
}

.work-item {
  position: relative;
  background-color: #fff;
  padding: 0;
  border-radius: 15px;
  border: 1px solid #ddd;
}

.work-item img {
  border: none;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.work-item .work-item-info {
  border-top: 1px solid #ddd;
  padding: 10px 15px 17px 15px;
  margin-bottom: 15px;
}

.work-item .work-item-info h3 {
  font-size: 16px;
  font-weight: normal;
  color: var(--blue);
}

.work-item .work-item-info .link a {
  color: #4d5156;
}

.works-image {
  text-align: center;
  margin-bottom: 25px;
}

.works-image img {
  border: 1px solid #ddd;
}

.academy-tracks {
  background-color: #ffffff;
  padding: 30px 0;
}

.ptb-1 {
  color: #fff;
  background-color: #fba51e;
}

.ptb-1 a {
  color: #fff !important;
}

.ptb-2 {
  color: #fff;
  background-color: #88B04B;
}

.ptb-2 a {
  color: #fff !important;
}

.ptb-3 {
  color: #fff;
  background-color: #D65076;
}

.ptb-3 a {
  color: #fff !important;
}

.ptb-4 {
  color: #fff;
  background-color: #DD4124;
}

.ptb-4 a {
  color: #fff !important;
}

.ptb-5 {
  color: #fff;
  background-color: #C3447A;
}

.ptb-5 a {
  color: #fff !important;
}

.skyblue {
  background-color: #22c8ff;
}

.deepskyblue {
  background-color: #00bfff;
}

.darkerskyblue {
  background-color: #00a6dd;
}

.home-items {
  background-color: #f2f2f2;
  padding: 30px 0;
}

.home-items .home-section-title-divider p {
  color: rgba(33, 37, 41, 0.75);
}

.home-item {
  position: relative;
  text-align: center;
  transition: transform var(--transition-speed) ease;
}

.home-item:hover {
  transform: translateY(-10px);
}

.home-item a {
  display: block;
}

.home-item-icon {
  background-color: #ffffff;
  height: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid #f1f1f1;
  transition: all var(--transition-speed) ease;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
  margin-bottom: 15px;
  font-size: 35px;
}

.home-item-icon:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--primary-color);

}

.home-item:hover .home-item-icon {
  opacity: 1;
}

.home-item-title {
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.home-item-icon img {
  max-width: 40%;
}

.home-item-title a {
  color: #333;
}

.page-container {
  margin-bottom: 15px;
}

.rfq-content {
  background: #fff;
  border-radius: 7px;
  border: 1px solid #ddd;
  padding: 15px;
}

.rfq-content p:last-child {
  margin-bottom: 0;
}

.main-btn {
  border-radius: 15px !important;
  border-radius: 12px;
  justify-content: center;
  -webkit-transition: 0.2s !important;
  transition: 0.2s !important;
  color: rgba(255, 255, 255, 1);
  padding: 16px;
}

.primary-bg {
  background: linear-gradient(90deg, #52a8d5 0.29%, #0d78b0 100.29%);
}

.primary-bg:hover {
  background: linear-gradient(90deg, #0d78b0 0.29%, #52a8d5 100.29%);
  color: rgba(255, 255, 255, 1);
}

.cp-pagination {
  overflow: auto;
}

.kids-card {
  position: relative;
  background: linear-gradient(244deg, var(--blue) 0%, var(--dark-blue) 100%) 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 15px #97A8B729;
  border: 1px solid transparent;
  transition: 0.5s;
  display: block;
  border-radius: 15px;
  max-width: 100%;
  box-shadow: 0px 3px 15px #97A8B729;
  border-radius: 15px;
  padding: 15px;
}

.kids-card-icon {
  width: 50px;
}

.kids-card-img {
  position: absolute;
  width: 100px;
  top: 50%;
  transform: translate(-50%, -50%);
  right: -30px;
}

.kids-section-name {
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: #fff;
  margin: 0;
}

.kids-section-name a {
  color: #fff;
}

.kids-section-name a:hover {
  color: #ddd;
}

.grey {
  color: #757575;
}

.d-grey {
  color: #292929;
}

.w-bold {
  font-weight: bold;
}

.c_orange {
  color: #795548;
}

.c_red {
  color: #a82323;
}

.c_green {
  color: #388e3c;
}

.c_yellow {
  color: #947721;
  font-family: kitab;
  font-size: 120%;
}

.c_gray {
  color: #b6b6b6;
}

.c_blue {
  color: #1976d2;
}

.accordion-body p:last-child {
  margin-bottom: 0;
}


.overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.8);
}

.overlay-content {
  position: absolute;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  color: #555;
}

.bg-primary-soft {
  background-color: #e7f1ff;
}

.bg-danger-soft {
  background-color: #ffeef0;
}

.category-item .list-group-item {
  transition: all 0.3s ease;
}

.category-item .list-group-item:hover {
  background-color: #f8f9fa;
  color: #0d6efd;
}

[aria-expanded="true"] .isChild {
  transform: rotate(270deg);
  transition: transform 0.3s ease;
}

.hero-gradient {
  background: radial-gradient(circle at top right, #3b82f633, transparent),
    radial-gradient(circle at bottom left, #00d2ff22, transparent);
  padding: 100px 0;
}

.script-card {
  background: var(--card-bg);
  border: 1px solid #ddd;
  border-radius: 16px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.script-card:hover {
  transform: translateY(-10px);
  border-color: #ccc;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.script-card .card-title {
  margin: 15px 0;
}

.script-card .card-title a {
  color: #fff;
}

.script-card .product-amount-current {
  color: #fff;
}
.script-card .product-amount-original {
  color: #ccc;
}
.script-card .product-amount-off {
  color: #10b981 !important;
}

.badge-tech {
  background: rgba(0, 210, 255, 0.1);
  color: var(--main-color);
  border: 1px solid var(--main-color);
  font-size: 0.75rem;
}

.price-tag {
  font-size: 1.5rem;
  font-weight: bold;
  color: #10b981;
}

.btn-demo {
  background: transparent;
  border: 1px solid #475569;
  color: #cbd5e1;
}

.btn-demo:hover {
  background: #334155;
  color: #fff;
}

@media only screen and (max-width: 768px) {
  .playlist-show-video iframe {
    height: 185px;
  }

  iframe {
    height: 50.625vw;
  }
}

/* Ipad Air */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  .playlist-show-video iframe {
    height: 370px;
  }

  iframe {
    height: 50.625vw;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .playlist-show-video iframe {
    height: 250px;
  }

  iframe {
    height: 50.625vw;
  }
}

/* Ipad Mini */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1) {
  .playlist-show-video iframe {
    height: 370px;
  }

  iframe {
    height: 50.625vw;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1) {
  .playlist-show-video iframe {
    height: 250px;
  }

  iframe {
    height: 50.625vw;
  }
}

/* Ipad Pro */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  .playlist-show-video iframe {
    height: 450px;
  }

  iframe {
    height: 50.625vw;
  }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .playlist-show-video iframe {
    height: 300px;
  }
}

/* Ipad Pro 11 inch */
@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  .playlist-show-video iframe {
    height: 450px;
  }

  iframe {
    height: 50.625vw;
  }
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .playlist-show-video iframe {
    height: 250px;
  }
}