@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --accent1-rgb: 238, 95, 56;
  }
  body {
    @apply text-paragraph font-normal text-[16px];
  }
  h1 {
    @apply text-[40px] font-bold;
  }
  h2 {
    @apply text-[24px] only-md:text-[28px] lg:text-[36px] font-bold;
  }
  h3 {
    @apply text-[32px] sm:text-[20px] only-md:text-[24px] font-bold;
  }
  h4 {
    @apply text-[20px] lg:text-[24px] font-bold;
  }
  h5 {
    @apply text-[18px] lg:text-[22px] font-bold;
  }
  h6 {
    @apply text-[16px] lg:text-[18px] font-bold;
  }
  a {
    @apply transition duration-300;
  }
  button {
    @apply transition duration-300;
  }
}

@layer utilities {
  .clip-polygon {
    clip-path: polygon(0 0, 46% 97%, 100% 0);
  }
  .title-stroke {
    text-shadow: 3px 3px 0 #ee5f38, -1px -1px 0 #ee5f38, 1px -1px 0 #ee5f38,
      -1px 1px 0 #ee5f38, 1px 1px 0 #ee5f38;
  }
}

/* Header sticky */
.header__sticky.sticky {
  @apply fixed w-full top-0 bg-white dark:bg-dark_accent1 left-0 z-[98] px-1 transition-all shadow-[0_0_10px_0_rgba(0,0,0,0.1)];
}

section {
  @apply scroll-mt-[100px];
}

/* Button UI */
.btn {
  @apply text-[24px] font-medium py-[10px] px-[42px] rounded-[50px] transition duration-300 sm:text-[18px] sm:px-[28px] sm:py-[8px] only-md:text-[20px] only-md:px-[32px];
}

.btn--small {
  @apply text-[17px] font-medium py-[10px] px-[25px] rounded-[50px] transition duration-300;
}

.outline-btn {
  @apply border border-accent1 hover:bg-accent1 hover:text-white;
}

.solid-btn {
  @apply bg-accent1 text-white hover:bg-[#333] dark:hover:bg-dark_accent1;
}

.link-button {
  @apply text-[17px] font-medium leading-[28px] capitalize ltr:pl-[18px] rtl:pr-[18px] relative before:absolute before:content-[''] before:h-[7px] before:w-[7px] ltr:before:left-0 rtl:before:right-0 before:top-[50%] before:translate-y-[-50%] inline-block transition duration-300;
}

.service-shape {
  @apply relative before:absolute before:content-[''] before:w-[72%] before:h-[115px] before:left-[50%] before:translate-x-[-50%] before:bottom-[70%] before:z-[-1];
}

.client__logo--padding {
  @apply px-[30px] only-md:px-[45px] lg:px-[55px] 2xs:px-0;
}
.client__logo--padding--inner {
  @apply py-[40px] 2xs:px-[25px] 2xs:min-h-[130px] 2xs:flex 2xs:items-center;
}
button.is-checked {
  @apply text-accent1 dark:text-accent1;
}
.hero__layer--img.four {
  top: 36%;
  left: 37.5rem;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@-webkit-keyframes animateUpDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes animateUpDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.animateUpDown {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92);
  -webkit-animation-name: animateUpDown;
  animation-name: animateUpDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.offcanvas__close--btn::before,
.offcanvas__close--btn::after,
.offcanvas__sub_menu_toggle::before,
.offcanvas__sub_menu_toggle::after {
  @apply dark:bg-white;
}
/* Portfolio hover */
.portfolio__parent:hover .portfolio__overlay {
  @apply opacity-[.7];
}
.portfolio__parent:hover .portfolio--title {
  @apply translate-y-0;
}
.portfolio__parent:hover .portfolio--sub-title {
  @apply translate-y-0;
}
.portfolio__parent:hover .portfolio--zoom {
  @apply translate-y-[-7px];
}
/* .portfolio__parent:hover .portfolio__image--card > img {
  @apply scale-[1.05];
} */
.modal_portfolio.active {
  @apply opacity-100 visible;
}
.active .modal__portfolio--content {
  @apply translate-y-0;
}
.active + .modal_popup_overlay {
  @apply visible opacity-30;
}

/* Swiper slider */
.swiper-pagination {
  position: inherit;
}
.swiper-pagination-bullet {
  @apply bg-[#EBEBEB] w-8 h-[10px] rounded-md opacity-100 transition duration-300;
}
.swiper-pagination-bullet-active {
  @apply bg-accent1 w-10;
}
/* Blog */
.blog__card:hover .blog__thumb {
  @apply scale-[1.02];
}
/* Light to Dark mode css */
#light__to--dark .light--mode__icon {
  @apply hidden;
}
#light__to--dark.dark--version .dark--mode__icon {
  @apply hidden;
}
#light__to--dark.dark--version .light--mode__icon {
  @apply block;
}
/* Home two menu nav css */
.menu__nav--item:hover > span:last-child {
  @apply ltr:right-5 rtl:left-5 opacity-100 visible;
}
.menu__nav--item:hover {
  @apply bg-accent1;
}
.menu__nav--item:hover svg,
.mobile--menu__nav--item:hover svg {
  @apply text-white;
}
.mobile--menu__nav--item:hover {
  @apply bg-primary;
}

/* menu active */
.toggle__navigation--button span {
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.menu--visible .toggle__navigation--button {
  @apply bg-white;
}
.menu--visible .toggle__navigation--button span,
.menu--visible .toggle__navigation--button span::after,
.menu--visible .toggle__navigation--button span::before {
  @apply bg-accent1;
}

.toggle__navigation--button span::after,
.toggle__navigation--button span::before {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}

.menu--visible .toggle__navigation--button span {
  background-color: transparent;
}
.menu--visible .toggle__navigation--button span::before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu--visible .toggle__navigation--button span::after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.toggle__nav--menu {
  -webkit-transition: visibility 0.3s;
  -moz-transition: visibility 0.3s;
  transition: visibility 0.3s;
}
.toggle__navigation.menu--visible .toggle__nav--menu {
  visibility: visible;
}
.toggle__navigation .toggle__nav--menu--bg {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -webkit-transition: height 0.2s, box-shadow 0.2s;
  -moz-transition: height 0.2s, box-shadow 0.2s;
  transition: height 0.2s, box-shadow 0.2s;
}
.toggle__navigation.menu--visible .toggle__nav--menu--bg {
  height: 100%;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}
.toggle__nav--menu--label-wrapper {
  transition: color 0.2s;
}
.toggle__nav--menu--label-wrapper {
  @apply ltr:pl-[calc(1rem_+_20px)] rtl:pr-[calc(1rem_+_20px)];
}
.toggle__navigation ul li .toggle__nav--menu--label-wrapper:hover,
.toggle__navigation ul li.active .toggle__nav--menu--label-wrapper {
  @apply text-accent1;
}
.toggle__nav--menu--label-wrapper::before {
  -webkit-transform: translateX(3px) translateY(-50%) scaleY(0);
  -moz-transform: translateX(3px) translateY(-50%) scaleY(0);
  -ms-transform: translateX(3px) translateY(-50%) scaleY(0);
  -o-transform: translateX(3px) translateY(-50%) scaleY(0);
  transform: translateX(3px) translateY(-50%) scaleY(0);
}
.toggle__navigation ul li .toggle__nav--menu--label-wrapper::before {
  @apply bg-accent1;
}
.toggle__navigation.menu--visible
  ul
  li.active
  .toggle__nav--menu--label-wrapper::before {
  -webkit-transform: translateX(-3px) translateY(-50%) scaleY(1);
  -moz-transform: translateX(-3px) translateY(-50%) scaleY(1);
  -ms-transform: translateX(-3px) translateY(-50%) scaleY(1);
  -o-transform: translateX(-3px) translateY(-50%) scaleY(1);
  transform: translateX(-3px) translateY(-50%) scaleY(1);
  -webkit-transition: -webkit-transform 0.15s 0.3s;
  -moz-transition: -moz-transform 0.15s 0.3s;
  transition: transform 0.15s 0.3s;
}
.toggle__nav--menu--label {
  -webkit-transform: translateX(-25px);
  -moz-transform: translateX(-25px);
  -ms-transform: translateX(-25px);
  -o-transform: translateX(-25px);
  transform: translateX(-25px);
}
.toggle__navigation.menu--visible ul .toggle__nav--menu--label {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: slideInLeft 0.15s backwards;
  -moz-animation: slideInLeft 0.15s backwards;
  animation: slideInLeft 0.15s backwards;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.toggle__navigation.menu--visible
  ul
  li:first-of-type
  .toggle__nav--menu--label-wrapper::after,
.toggle__navigation.menu--visible
  ul
  li:first-of-type
  .toggle__nav--menu--label {
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  animation-delay: 0.05s;
}
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(2)
  .toggle__nav--menu--label-wrapper::after,
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(2)
  .toggle__nav--menu--label {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(3)
  .toggle__nav--menu--label-wrapper::after,
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(3)
  .toggle__nav--menu--label {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(4)
  .toggle__nav--menu--label-wrapper::after,
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(4)
  .toggle__nav--menu--label {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(5)
  .toggle__nav--menu--label-wrapper::after,
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(5)
  .toggle__nav--menu--label {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(6)
  .toggle__nav--menu--label-wrapper::after,
.toggle__navigation.menu--visible
  ul
  li:nth-of-type(6)
  .toggle__nav--menu--label {
  -webkit-animation-delay: 0.28s;
  -moz-animation-delay: 0.28s;
  animation-delay: 0.28s;
}
@-webkit-keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-25px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@-moz-keyframes slideInLeft {
  from {
    opacity: 0;
    -moz-transform: translateX(-25px);
  }

  to {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    -webkit-transform: translateX(-25px);
    -moz-transform: translateX(-25px);
    -ms-transform: translateX(-25px);
    -o-transform: translateX(-25px);
    transform: translateX(-25px);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
.toggle__navigation.menu--visible {
  pointer-events: auto;
}
.toggle__nav--menu-icon {
  transition: transform 0.2s;
}
.toggle__navigation.menu--visible ul .toggle__nav--menu-icon {
  opacity: 1;
}
.toggle__nav--menu-icon > svg {
  width: 1.1rem;
}
/* Back to top css */
#scroll__top.active {
  @apply visible opacity-100 translate-y-0;
}
/* Mobile menu RTL CSS */
.offcanvas__sub_menu_toggle {
  @apply ltr:right-0 rtl:left-0;
}
.offcanvas__sub_menu_item {
  @apply py-[15px] ltr:pl-[30px] rtl:pr-[30px];
}