@tailwind base;
@tailwind components;
@tailwind utilities;
/*********************************/
/*             Menu              */
/*===============================*/
.navbar{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;
    background-color: transparent;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-family: "Libre Franklin", sans-serif;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 500ms;
            transition-duration: 500ms;
  }
  .navbar .navigation{
    margin: 0px;
    width: 100%;
  }
  .navbar .navigation .navbar-nav{
    margin-top: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 6rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    overflow-y: scroll;
  }
  .navbar .navigation .navbar-nav .nav-link{
    display: block;
    padding: 0.75rem;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    --tw-text-opacity: 1;
    color: rgb(22 28 45 / var(--tw-text-opacity));
  }
  .navbar .navigation .navbar-nav .nav-link:hover{
    --tw-text-opacity: 1;
    color: rgb(20 184 166 / var(--tw-text-opacity));
  }
  :is(:where(.dark) .navbar .navigation .navbar-nav .nav-link){
    color: rgb(255 255 255 / 0.6) !important;
  }
  :is(:where(.dark) .navbar .navigation .navbar-nav .nav-link:hover){
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  .navbar .navigation .navbar-nav .nav-link.active{
    --tw-text-opacity: 1;
    color: rgb(20 184 166 / var(--tw-text-opacity));
  }
  :is(:where(.dark) .navbar .navigation .navbar-nav  .nav-link.active){
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
  }
  .navbar .navigation.ms-auto .navbar-nav li:last-child .nav-link{
    -webkit-padding-end: 0px;
            padding-inline-end: 0px;
  }
  .navbar .navigation.me-auto .navbar-nav li:first-child .nav-link{
    -webkit-padding-start: 0px;
            padding-inline-start: 0px;
  }
  .navbar .navbar-brand{
    padding: 0px;
  }
  .navbar .navbar-brand .l-dark,
  .navbar .navbar-brand .logo-dark-mode{
    display: none;
  }
  .navbar .navbar-brand .l-light,
  .navbar .navbar-brand .logo-light-mode{
    display: inline-block;
  }
  @media (max-width: 991.98px) {
    .navbar .navbar-brand .l-dark{
      display: inline-block !important;
    }
    .navbar .navbar-brand .l-light{
      display: none !important;
    }
  }
  .navbar .menu-social .login-btn-primary{
    display: none;
  }
  .navbar .menu-social .login-btn-light{
    display: inline-block;
  }
  @media (max-width: 991.98px) {
    .navbar .menu-social .login-btn-primary{
      display: inline-block !important;
    }
    .navbar .menu-social .login-btn-light{
      display: none !important;
    }
  }
  .navbar.is-sticky{
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 0 3px rgb(60 72 88 / 0.15);
    --tw-shadow-colored: 0 0 3px var(--tw-shadow-color);
    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  :is(:where(.dark) .navbar.is-sticky){
    --tw-bg-opacity: 1;
    background-color: rgb(22 28 45 / var(--tw-bg-opacity));
    --tw-shadow-color: #1f2937;
    --tw-shadow: var(--tw-shadow-colored);
  }
  .navbar.is-sticky .navbar-brand .l-dark{
    display: inline-block;
  }
  .navbar.is-sticky .navbar-brand .l-light{
    display: none;
  }
  .navbar.is-sticky .menu-social .login-btn-primary{
    display: inline-block;
  }
  .navbar.is-sticky .menu-social .login-btn-light{
    display: none;
  }

  @media (min-width: 992px) {
    .navbar{
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }
    .navbar .navigation{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: auto;
    }
    .navbar .navigation .navbar-nav{
      margin-top: 0px;
      height: auto;
      overflow: visible;
    }
    .navbar .navigation .navbar-nav .nav-link{
      border-width: 0px;
    }
    .navbar .navigation .navbar-nav .nav-link:hover{
      background-color: transparent;
    }
    .navbar .navigation .navbar-nav.nav-light .nav-link{
      display: block;
      padding: 0.75rem;
      color: rgb(255 255 255 / 0.6);
    }
    .navbar .navigation .navbar-nav.nav-light .nav-link:hover{
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
    }
    .navbar .navigation .navbar-nav.nav-light .active .nav-link{
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
    }
    .navbar .nav-icons .collapse-btn{
      display: none;
    }
    .navbar.is-sticky{
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }
    .navbar.is-sticky .navbar-nav .nav-link{
      --tw-text-opacity: 1;
      color: rgb(22 28 45 / var(--tw-text-opacity));
    }
    :is(:where(.dark) .navbar.is-sticky .navbar-nav .nav-link){
      color: rgb(255 255 255 / 0.6);
    }
    .navbar.is-sticky .navbar-nav .active .nav-link{
      --tw-text-opacity: 1;
      color: rgb(20 184 166 / var(--tw-text-opacity));
    }
    .navbar.is-sticky .navbar-nav.nav-light .nav-link{
      --tw-text-opacity: 1;
      color: rgb(22 28 45 / var(--tw-text-opacity));
    }
    .navbar.is-sticky .navbar-nav.nav-light .nav-link:hover{
      --tw-text-opacity: 1;
      color: rgb(20 184 166 / var(--tw-text-opacity));
    }
    :is(:where(.dark) .navbar.is-sticky .navbar-nav.nav-light .nav-link){
      color: rgb(255 255 255 / 0.6);
    }
    :is(:where(.dark) .navbar.is-sticky .navbar-nav.nav-light .nav-link:hover){
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
    }
    .navbar.is-sticky .navbar-nav.nav-light .active .nav-link{
      --tw-text-opacity: 1;
      color: rgb(20 184 166 / var(--tw-text-opacity));
    }
    :is(:where(.dark) .navbar.is-sticky .navbar-nav.nav-light .active .nav-link){
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
    }
  }
  @media (max-width: 991px) {
    .navbar{
      --tw-bg-opacity: 1 !important;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
      --tw-shadow: 0 0 3px rgb(60 72 88 / 0.15) !important;
      --tw-shadow-colored: 0 0 3px var(--tw-shadow-color) !important;
      -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
              box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    }
    :is(:where(.dark) .navbar){
      --tw-bg-opacity: 1 !important;
      background-color: rgb(22 28 45 / var(--tw-bg-opacity)) !important;
      --tw-shadow-color: #1f2937 !important;
      --tw-shadow: var(--tw-shadow-colored) !important;
    }
    .navbar .navigation .navbar-nav{
      display: block;
      height: 100%;
      max-height: 20rem;
    }
    .navbar .navigation .navbar-nav .nav-link{
      --tw-text-opacity: 1;
      color: rgb(22 28 45 / var(--tw-text-opacity));
    }
    .navbar .navigation .navbar-nav .active .nav-link{
      --tw-text-opacity: 1;
      color: rgb(20 184 166 / var(--tw-text-opacity));
    }
    .navbar .navigation .navbar-nav .menu-social{
      margin-bottom: 1.25rem !important;
    }
  }
  /* // _footer.scss */
  /*********************************/
  /*         Footer                */
  /*===============================*/
  .footer .foot-subscribe input::-webkit-input-placeholder{
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity));
  }
  .footer .foot-subscribe input::-moz-placeholder{
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity));
  }
  .footer .foot-subscribe input:-ms-input-placeholder{
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity));
  }
  .footer .foot-subscribe input::-ms-input-placeholder{
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity));
  }
  .footer .foot-subscribe input::placeholder{
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity));
  }

  /*********************************/
  /*             Helper            */
  /*===============================*/
  /*********************************/
  /*         Tobii Lightbox        */
  /*===============================*/
  /* Tobii Lighbox */
  .tobii > button.tobii__close svg,
  .tobii > button.tobii__prev svg,
  .tobii > button.tobii__next svg{
    height: 2.25rem;
    width: auto;
  }

  .tobii__counter{
    font-size: 15px;
    line-height: 28px;
  }

  .tobii-zoom{
    display: block;
  }

  .tobii-zoom__icon{
    display: none;
  }

  #grid{
    padding: 0px;
  }

  /*****************/
  /*    Shapes     */
  /*****************/
  .shape{
    position: absolute;
    right: 0px;
    bottom: -1px;
    left: 0px;
  }
  .shape > svg{
    height: auto;
    width: 100%;
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transform-origin: top center;
            transform-origin: top center;
  }

  /*****************/
  /*  back-to-top  */
  /*****************/
  .back-to-top{
    display: none;
  }

  /*****************/
  /*    Switcher   */
  /*****************/
  .label .ball {
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear;
    --tw-translate-x: 0px;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .checkbox:checked + .label .ball{
    --tw-translate-x: 1.5rem;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  /*****************/
  /*   Preloader   */
  /*****************/
  #preloader {
    background-image: linear-gradient(45deg, #ffffff, #ffffff);
    z-index: 99999;
    position: fixed;
    inset: 0px;
  }
  #preloader #status{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    --tw-translate-y: -50%;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  #preloader #status .spinner{
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 2.5rem;
    height: 2.5rem;
  }
  #preloader #status .spinner .double-bounce1, #preloader #status .spinner .double-bounce2{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-color: rgb(20 184 166 / 0.6);
    -webkit-animation: sk-bounce 2s infinite ease-in-out;
            animation: sk-bounce 2s infinite ease-in-out;
  }
  #preloader #status .spinner .double-bounce2 {
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
  }

  @-webkit-keyframes sk-bounce {
    0%, 100% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }

  @keyframes sk-bounce {
    0%, 100% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  /* RTL */
  html[dir=rtl] .tns-inner, html[dir=rtl] .tns-nav, html[dir=rtl] .slider, html[dir=rtl] .slider2, html[dir=rtl] .swiper-slider-hero {
    direction: ltr !important;
  }
  html[dir=rtl] .tns-visually-hidden {
    left: 0 !important;
    visibility: hidden;
  }

  /*****************/
  /*  video iframe */
  /*****************/
  @media (max-width: 640px) {
    [data-type] iframe, [data-type] video {
      width: 500px;
      height: 300px;
    }
  }
  @media (max-width: 425px) {
    [data-type] iframe, [data-type] video {
      width: 360px;
      height: 260px;
    }
  }
  @media (max-width: 375px) {
    [data-type] iframe, [data-type] video {
      width: 100%;
      height: auto;
    }
  }
  .image-wrap {
    -webkit-animation: 200s ppb_kenburns linear infinite alternate;
            animation: 200s ppb_kenburns linear infinite alternate;
  }

  @-webkit-keyframes ppb_kenburns {
    0% {
      -webkit-transform: scale(1.3) translate(-10%, 10%);
              transform: scale(1.3) translate(-10%, 10%);
    }
    25% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
    }
    50% {
      -webkit-transform: scale(1.3) translate(10%, 10%);
              transform: scale(1.3) translate(10%, 10%);
    }
    75% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
    }
    100% {
      -webkit-transform: scale(1.3) translate(-10%, 10%);
              transform: scale(1.3) translate(-10%, 10%);
    }
  }

  @keyframes ppb_kenburns {
    0% {
      -webkit-transform: scale(1.3) translate(-10%, 10%);
              transform: scale(1.3) translate(-10%, 10%);
    }
    25% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
    }
    50% {
      -webkit-transform: scale(1.3) translate(10%, 10%);
              transform: scale(1.3) translate(10%, 10%);
    }
    75% {
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
    }
    100% {
      -webkit-transform: scale(1.3) translate(-10%, 10%);
              transform: scale(1.3) translate(-10%, 10%);
    }
  }
  /*****************/
  /*  Swiper Slider     */
  /*****************/
  .swiper-slider-hero .swiper-container .swiper-button-prev:before,
  .swiper-slider-hero .swiper-container .swiper-button-next:before {
    font-family: "Material Design Icons";
  }
  .swiper-slider-hero .swiper-container .swiper-button-prev:before {
    content: "󰅁";
  }
  .swiper-slider-hero .swiper-container .swiper-button-next:before {
    content: "󰅂";
  }
  .swiper-slider-hero .swiper-pagination-bullet{
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(249 250 251 / var(--tw-text-opacity));
  }
  .swiper-slider-hero .swiper-pagination-bullet-active{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  .swiper-slider-hero .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 13px;
    margin-right: 13px;
  }

  /*********************************/
  /*             Contact           */
  /*===============================*/
  /* Validation */
  .error{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0px;
    margin-right: 0px;
    display: none;
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity));
  }

  #ajaxsuccess{
    clear: both;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 0px;
    margin-right: 0px;
    display: none;
    width: 100%;
    font-size: 15px;
    line-height: 28px;
  }

  .error_message,
  #success_page{
    margin-bottom: 1.25rem;
    border-radius: 0.375rem;
    padding: 0.625rem;
    text-align: center;
  }

  .error_message{
    background-color: rgb(220 38 38 / 0.05);
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity));
  }

  .contact-loader{
    display: none;
  }