/*
 Theme Name:   Ecosoap Child
 Theme URI:    https://wordpress.com
 Description:  This is a child theme for Ecosoap
 Author:       Goalthemes
 Author URI:   #
 Template:     ecosoap
 Version:      1.0.0
 Text Domain:  ecosoap-child
*/

:root {
  /* Primary */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark: #323e48;
  --color-primary: #00a98f;
  --color-primary-dark: #017a68;
  --color-primary-light: #33bfa9;
  /* Secondary */
  --color-beige: #d5b9a7;
  --color-lime: #cdde00;
  --color-orange: #ff6b00;

  /* Optional semantic names */
  --background-color: #ffffff;
  --text-color: #303d47;
  --color-grey: #5c5c5c;
}

body {
  background: var(--color-white) !important;
}

.home-hero-section {
  direction: ltr;
}

#back-to-top {
  background-color: var(--color-primary);
}

#back-to-top:hover {
  background-color: var(--color-primary-dark);
}

#back-to-top {
  right: 24px !important;
  left: auto !important;
  bottom: 24px !important;
}

.wrapper-container .goal-offcanvas:not(.active) {
  right: 0;
  left: unset;
  transform: translateX(100%);
}

.wrapper-container .goal-offcanvas.active {
  right: 0;
  left: unset;
  transform: translateX(0);
}

.ltr-text {
  direction: ltr !important;
}

.about-spartina-heading-section #goal-breadscrumb {
  margin: 0 !important;
}

#goal-breadscrumb {
  border-radius: 0;
}

.breadcrumb li::before {
  transform: rotate(180deg);
}

/* ABOUT SPRATINA SECTION AND GENERAL CSS */
.elementor-widget-ecosoap_banner .btn .icon-arrow-right {
  transform: rotate(180deg);
}

/* WHY SPARTINA SECTION */
.why-spartina-card .wrapper-banner {
  position: relative;

  background: rgba(0, 0, 0, 10);
  background: linear-gradient(
    275deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.why-spartina-card .inner {
  position: absolute;
  height: 100px;
  top: 88% !important;
  padding-top: 16px !important;
  background: #01a78e;
  background: linear-gradient(
    275deg,
    rgba(1, 167, 142, 0.2) 20%,
    rgba(1, 167, 142, 0.7) 70%
  );

  /* Blur effect */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 0 0 12px 12px;
}

.post-list-item .list-inner {
  background: #f7f8fa !important;
}

.post-list-item .list-inner .post-info {
  padding: 8px 16px;
}

.post-info .top-info {
  justify-content: end !important;
}

.post-info .top-info .list-categories::before {
  display: none !important;
}

.post-info .entry-title a {
  color: var(--color-primary);
}

.blog-time .date {
  border-radius: 8px !important;
  background: var(--color-primary);
}

.post-layout .readmore {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.post-layout .readmore:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

.post-layout .top-image .entry-thumb {
  border-radius: 0px 15px 15px 0px;
}

.page-404 {
  height: 100dvh !important;
}
.page-404 .title-big {
  color: var(--color-text) !important;
  font-size: 48px !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .page-404 .title-big {
    font-size: 36px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .page-404 .title-big {
    font-size: 32px !important;
  }
}

.page-404 .description {
  font-size: 16px !important;
  margin-bottom: 16px !important;
}

.page-404 .btn {
  font-size: 16px !important;
}

.faq-accordion .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 8px;
  border-radius: 12px;
}

.faq-accordion .elementor-accordion-item {
  border-radius: 12px;

  border: 1px solid #eeeeee;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}

.faq-accordion .elementor-accordion-icon span .e-font-icon-svg {
  background: var(--color-primary);
  border-radius: 50%;
  padding: 6px;
  width: 24px !important;
  height: 24px !important;
}

.contact-us-form-wrapper .wpcf7 {
  direction: rtl !important;
}

#goal-breadscrumb {
  position: relative;
  overflow: hidden;
}

#goal-breadscrumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.05) 50%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.contact-us-icon-box .elementor-icon-box-icon {
  background-color: var(--color-primary);
  padding: 8px;
  border-radius: 12px;
}
.contact-us-icon-box .elementor-icon-box-description a:hover {
  color: var(--e-global-color-text);
}

.educational-videos-wrapper .widget-video .image-wrapper img {
  border-radius: 12px;
  min-height: 300px;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.educational-videos-wrapper .widget-video .image-wrapper {
  position: relative;
}

.educational-videos-wrapper .widget-video .image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 2;
  border-radius: 12px;
}

.widget_block ul li::before {
  margin-right: 0;
  margin-left: 10px;
}

.post-navigation .nav-links {
  direction: ltr;
}

.pulse-loader-img {
  position: relative;
  display: inline-block;
  border-radius: 12px;
  z-index: 1;
}

/* center pulsing circles behind image */
.pulse-loader-img::before,
.pulse-loader-img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 38%;
  width: 200px;
  height: 200px;
  background: var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.4;
  z-index: -1;
  animation: pulseCircles 2s infinite ease-out;
}

/* second wave */
.pulse-loader-img::after {
  animation-delay: 0.6s;
}

@keyframes pulseCircles {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}

.how-spartina-works-box .elementor-image-box-img {
  background: #01a78e33;
  padding: 56px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
}

.how-to-use-section .elementor-image-box-img {
  background: #01a78e33;
  padding: 16px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 64px;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

.how-to-use-section .elementor-image-box-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
}

.how-to-use-section .elementor-widget-n-tabs .e-n-tab-title-text {
  width: 160px;
  justify-content: center;
}

@media (max-width: 767px) {
  .how-to-use-section .elementor-image-box-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }

  .how-to-use-section .elementor-widget-n-tabs .e-n-tab-title-text {
    width: auto;
  }
}

.form-control {
  border: none !important;
  border-bottom: 1px solid #e5e5e5 !important;
  padding: 8px 24px !important;
  font-size: 14px !important;
}

.wpcf7 input[type="tel"] {
  direction: rtl !important;
}

#goal-mobile-menu .middle-offcanvas {
  direction: rtl;
}

#goal-mobile-menu .middle-offcanvas .sliding-menu__panel li a {
  text-align: right;
}

#goal-mobile-menu .middle-offcanvas .sliding-menu__panel li .sliding-menu__nav {
  text-align: right;
}

@media (max-width: 768px) {
  #goal-mobile-menu .middle-offcanvas .sliding-menu__panel li a:hover {
    color: #333333;
    background: transparent;
  }
}

#goal-mobile-menu
  .middle-offcanvas
  .sliding-menu__panel
  li.has-submenu
  .sliding-menu__nav::before {
  float: left;
  transform: rotate(-180deg);
  margin-right: 1em;
  margin-left: auto;
}

#goal-mobile-menu
  .middle-offcanvas
  .sliding-menu__panel
  li
  .sliding-menu__back::before {
  float: right;
  transform: rotate(180deg);
  margin-left: 1em;
  margin-right: auto;
}

#goal-mobile-menu
  .middle-offcanvas
  .sliding-menu__panel
  li
  .sliding-menu__back:hover {
  color: #333333;
  background: transparent;
}

.product-carousel-wrapper
  .elementor-image-carousel.swiper-wrapper
  .swiper-slide {
  transform: rotate(0deg);
}

.footer-wrapper .menu .menu-item {
  display: block !important;
}

.footer-wrapper .menu .menu-item::before {
  display: none !important;
}

.spartina-usage-card .content-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.spartina-usage-card .inner .title1 {
  margin: 0px 0px 16px 0px !important;
}

.goal-breadscrumb {
  margin: 0 0 48px !important;
}

.injection-guid-slider {
  border-radius: 12px;
}

.injection-guid-slider .slick-track {
  display: flex !important;
  align-items: stretch;
}

.injection-guid-slider .slick-slide {
  height: auto !important;
  display: flex !important;
  padding: 0 8px !important;
}

.injection-guid-slider .carousel-inner {
  height: 100%;
}

.injection-guid-slider .injection-guid-slide {
  height: 100%;
  padding: 24px;
  min-height: 400px;
}

.storage-conditions-section .elementor-image-box-wrapper {
  position: relative;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  height: 100%;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.03),
    0 12px 32px rgba(0, 0, 0, 0.04);

  transition:
    box-shadow 0.35s ease,
    border-color 0.35s ease;

  overflow: hidden;
}

.storage-conditions-section .elementor-image-box-wrapper:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 20px 50px rgba(0, 0, 0, 0.08);

  border-color: rgba(0, 123, 255, 0.15);
}

.storage-conditions-section .elementor-image-box-img {
  background: #01a78e33;
  padding: 16px;
  border-radius: 50%;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  max-width: 80px;
  width: 100% !important;
  height: auto;
  aspect-ratio: 1/1;
}

#educational-video-menu-image,
#blog-menu-image {
  opacity: 0;
  display: none;
  transition: all 0.3s ease;
}

#educational-video-menu-image.active-image,
#blog-menu-image.active-image {
  opacity: 1;
  display: block;
}

.users-story-box .widget-video {
  position: relative;
  overflow: hidden;
  min-height: 450px;
  border-radius: 12px;
}

.users-story-box .widget-video:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.35) 30%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
  z-index: 1;
}

.users-story-box .widget-video .video-wrapper-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.users-story-box .widget-video .image-wrapper,
.users-story-box .widget-video .image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.users-story-box .widget-video .image-wrapper img {
  object-fit: cover;
}

.users-story-box .widget-video .video-content {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  right: 16px;
}

.users-story-box .widget-video .video-content .title-video {
  color: var(--color-white);
  font-size: 24px;
  border-bottom: 1px solid white;
  padding-bottom: 16px;
}

.users-story-box .widget-video .video-content .description {
  color: var(--color-white);
}

.use-case-box .elementor-image-box-img {
  background: #01a78e33;
  padding: 16px;
  border-radius: 50%;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  max-width: 64px;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

.use-case-box .elementor-widget-n-tabs .e-n-tab-title-text {
  width: 160px;
  justify-content: center;
}

@media (max-width: 767px) {
  .use-case-box .elementor-image-box-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }

  .use-case-box .elementor-widget-n-tabs .e-n-tab-title-text {
    width: auto;
  }
}

.injection-back-site,
.injection-front-site {
  position: relative;
}

.injection-back-site .elementor-widget-image,
.injection-front-site .elementor-widget-image {
  position: relative;
  width: 100%;
}

.injection-back-site .elementor-widget-html,
.injection-front-site .elementor-widget-html {
  position: absolute;
  width: 100%;
  height: 100%;
}

.injection-back-site .elementor-widget-image img,
.injection-front-site .elementor-widget-image img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

.site {
  position: absolute;
  border-radius: 50%;
}

.injection-back-site .left-hand {
  width: 6.22%;
  height: 8.38%;
  top: 21%;
  left: 28%;
  transform: rotate(26deg);
  background: var(--color-primary);
  animation: pulse-shadow 1.5s infinite;
  opacity: 0.6;
}

.injection-back-site .right-hand {
  width: 6.22%;
  height: 8.38%;
  top: 21%;
  left: 68%;
  transform: rotate(-26deg);
  background: var(--color-primary);
  animation: pulse-shadow 1.5s infinite;
  opacity: 0.6;
}

.injection-front-site .left-hand {
  width: 2.22%;
  height: 8.38%;
  top: 21%;
  left: 28%;
  transform: rotate(26deg);
  background: var(--color-primary);
  animation: pulse-shadow 1.5s infinite;
  opacity: 0.6;
}

.injection-front-site .right-hand {
  width: 2.22%;
  height: 8.38%;
  top: 20%;
  left: 69%;
  transform: rotate(-26deg);
  background: var(--color-primary);
  animation: pulse-shadow 1.5s infinite;
  opacity: 0.6;
}

.injection-front-site .left-foot {
  width: 7.11%;
  height: 9.42%;
  top: 45%;
  left: 37%;
  background: var(--color-primary);
  animation: pulse-shadow 1.5s infinite;
  opacity: 0.6;
}

.injection-front-site .right-foot {
  width: 7.11%;
  height: 9.42%;
  top: 45%;
  left: 54%;
  background: var(--color-primary);
  animation: pulse-shadow 1.5s infinite;
  opacity: 0.6;
}

.injection-front-site .stomach {
  position: absolute;
  width: 16%;
  height: 6.02%;
  top: 30.9%;
  left: 41.5%;

  animation: pulse-shadow 1.5s infinite;
}

.injection-front-site .stomach::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0.6;
  border-radius: inherit;

  mask: radial-gradient(circle 9px at center, transparent 99%, black 100%);

  -webkit-mask: radial-gradient(
    circle 9px at center,
    transparent 99%,
    black 100%
  );
}

@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--color-primary) 70%, transparent);
  }

  70% {
    box-shadow: 0 0 0 20px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (max-width: 575.98px) {
  .injection-front-site .stomach {
    top: 32.5%;
  }
}

.about-step-academy-video img {
  border-radius: 12px !important;
}

.download-brochure
  .elementor-button
  .elementor-button-content-wrapper
  .elementor-button-icon {
  font-size: 20px;
}

.download-brochure .elementor-button .elementor-button-content-wrapper {
  align-items: center;
}

.how-spartina-works .e-con-inner {
  padding: 42px 0px;
}
.how-spartina-works .how-spartina-works-item {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.how-spartina-works-right-col {
  position: sticky !important;
  top: 300px !important;
  align-self: flex-start !important;
  z-index: 10 !important;
}

.how-spartina-works-left-col {
  position: relative !important;
}

.how-spartina-works {
  position: relative;
}

.how-spartina-works-line-col {
  position: relative;
}

.how-spartina-works-line-col .elementor-widget-html {
  height: 100%;
}

.scroll-line {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: #ddd;
  z-index: 1;
}

.scroll-line-fill {
  width: 100%;
  height: 0%;
  background: var(--color-primary);
  transition: height 0.1s linear;
}

@media (max-width: 767.98px) {
  .how-spartina-works-right-col {
    position: relative !important;
    top: 0 !important;
  }
  .how-spartina-works-line-col {
    display: none;
  }
}

.home-hero-section {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  height: 100%;
  max-width: 900px !important;
}

.home-hero-section-shape {
  max-width: 900px !important;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.home-hero-section-shape img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-hero-section-subtitle {
  position: absolute;
  top: 67%;
  right: 22%;
  max-width: 520px !important;
  width: 100%;
}

.home-hero-section-title {
  position: absolute;
  right: 26%;
  top: 52%;
}

.home-hero-section-logo {
  max-width: 450px !important;
  position: absolute;
  right: 26%;
  top: 28%;
}

.home-hero-section-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .home-hero-section-shape {
    display: none;
  }

  .home-hero-section-logo {
    display: flex;
    justify-content: center;
    max-width: 100% !important;
    position: absolute;
    top: 28%;
    right: 0%;
    width: 100%;
  }

  .home-hero-section-logo img {
    display: block;
    max-width: 320px !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .home-hero-section-subtitle {
    position: absolute;
    top: 67%;
    right: 0%;
    max-width: 100% !important;
    width: 100%;
  }

  .home-hero-section-title {
    position: absolute;
    right: 0%;
    top: 52%;
    width: 100%;
  }
}

.isfahan-step4-event-hero-header {
  position: relative;
}

.isfahan-step4-event-video {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 0;
  top: 0;
  padding: 0;
}

.event-page .header-mobile {
  display: none !important;
}