/* ! wrappers */
.content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0px 60px;

  @media screen and (max-width: 960px) {
    padding: 0px 40px;
    max-width: 960px;
  }

  @media screen and (max-width: 530px) {
    max-width: 530px;
    padding: 0px 12px;
  }
}
/* ! wrappers */

/* ! image default styles */
.image-default {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ! image default styles */

/* ! header styles  ( used in JS ) */
.header-active-link-desktop::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 80%;
  height: 6px;
  background-color: #7fbc5b;
  border-bottom-right-radius: 20px;
}

.header-active-link-mobile {
  color: #7fbc5b;
}

.header-top-line-menu {
  position: absolute;
  top: 50%;
  left: 12.3px;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.5s ease-in-out;
}
.header-center-line-menu {
  position: absolute;
  top: 50%;
  left: 12.3px;
  opacity: 0;
  transition: 0.5s opacity ease-in-out;
}
.header-bottom-line-menu {
  position: absolute;
  top: 50%;
  left: 12.3px;
  transform: translateY(-50%) rotate(-45deg);
  transition: all 0.5s ease-in-out;
}
/* ! removing the width of scrollbar === 17px */
.w-dvw {
  width: calc(100dvw-17px) !important;
}
.h-dvh {
  height: 100dvh !important;
}

.header-top-line-menu-closed {
  position: absolute;
  top: 12px;
  left: 12.3px;
  transition: all 0.5s ease-in-out;
}
.header-center-line-menu-closed {
  position: absolute;
  top: 50%;
  left: 12.3px;
  transform: translateY(-50%);
  transition: 0.5s opacity ease-in-out;
}
.header-bottom-line-menu-closed {
  position: absolute;
  bottom: 12px;
  left: 12.3px;
  transition: all 0.5s ease-in-out;
}

/* ! header styles  ( used in JS ) */

/* ! footer */
.footer-bg-image {
  background-image: url(../../assets/icons/home/footer/bg-shape.svg);
  background-repeat: no-repeat;
  background-size: 230px auto;
  background-position: 0% 100%;
}

@media screen and (max-width: 960px) {
  .footer-bg-image {
    background-repeat: no-repeat;
    background-size: 230px auto;
    background-position: -10% -20%;
  }
}

@media screen and (max-width: 530px) {
  .footer-bg-image {
    background-repeat: no-repeat;
    background-size: 150px auto;
    background-position: -10% -350%;
  }
}
/* ! footer */

/* ! specific styles */
.hide-scroll-bar {
  scrollbar-width: none;
}
/* ! specific styles */

/* ! cookies classes, ( used in JS ) */

.cookies-body {
  position: relative;
  overflow: hidden;
}

.cookies-visible {
  display: block;
  right: 40px;
  bottom: 40px;
}

.cookies-hidden {
  right: -400px;
  bottom: 40px;
}

@media screen and (max-width: 530px) {
  .cookies-hidden {
    right: -350px;
    bottom: 10px;
  }
  .cookies-visible {
    right: 10px;
    bottom: 10px;
  }
}

.cookies-display-none {
  display: none;
}

.cookies-shadow-under-visible {
  display: block;
  background-color: rgb(0 0 0 / 0.6);
}

.cookies-shadow-under-hidden {
  background: transparent;
}

/* ! cookies classes, ( used in JS ) */

/* ! cookies classes */

.cookies-parent-animation {
  transition: right 0.5s ease-in-out;
}

.cookies-shadow-animation {
  transition: background 0.5s ease-in-out;
}

/* ! cookies classes */

/* ! hover effect for links */

.hover-effect-link {
  transition: color 0.3s ease-in-out;
}

.hover-effect-link:hover {
  color: #7fbc5b;
}

/* ! hover effect for links */

/* ! scroll margin top for elements that used to scroll to it ( because the header doesn't show it cause it fixed ) */

/* ? scroll margin top === header height */
.scroll-margin-top {
  scroll-margin-top: 90px;
}

@media screen and (max-width: 960px) {
  .scroll-margin-top {
    scroll-margin-top: 80px;
  }
}

@media screen and (max-width: 530px) {
  .scroll-margin-top {
    scroll-margin-top: 60px;
  }
}

/* ! scroll margin top for elements that used to scroll to it ( because the header doesn't show it cause it fixed ) */