/*
@File: Traxo Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the template.

This files table contents are outlined below>>>>>

******************************************* 
** - DEFAULT AREA STYLE - **

** - Default Btn Area Style
** - Read More Area Style
** - Section Title Area Style

** - HOME PAGE STYLE - **

** - Header Area Style
** - Nav Area Style
** - Banner Area Style
** - About Area Style
** - Choose Us Area Style
** - Services Area Style
** - Logistics Solutions Area Style
** - Counter Solutions Area Style
** - Request Quote Area Style
** - Single Check Area Style
** - Team Area Style
** - Testimonials Area Style
** - Testimonials Area Two Style
** - Blog Area Style
** - Partner Area Style
** - Footer Area Style
** - Copy Right Area Style
** - Success Area Style
** - Choose Area Style
** - Pricing Area Style

** - OTHER STYLE AREA - **

** - Preloader Area Style
** - Go Top Style
** - Video wave Style
** - Section Title Area Style
** - Nice select Area

*******************************************
/*

/*
Default Style
============================*/
body {
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
  color: #1f2428;
}
/*
Preloader Area Style*/
.preloader {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #ffffff;
  top: 0;
  left: 0;
  z-index: 99999;
}

.preloader .lds-ripple {
  position: absolute;
  width: 80px;
  height: 80px;
  -webkit-animation: spin-six 2.5s infinite cubic-bezier(0.17, 0.72, 0.55, 1.66);
          animation: spin-six 2.5s infinite cubic-bezier(0.17, 0.72, 0.55, 1.66);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-40px, -50px);
          transform: translate(-40px, -50px);
}

.preloader .preloader-container {
  width: 80px;
  height: 80px;
}

.preloader .pl-spark-1 {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  margin: 0 auto 18px auto;
  position: relative;
  width: 50px;
  height: 50px;
}

.preloader .pl-spark-1:before, .preloader .pl-spark-1:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  background: #00aeff;
  display: block;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.preloader .pl-spark-1.pl-spark-2:before {
  -webkit-animation-name: scaleA;
          animation-name: scaleA;
}

.preloader .pl-spark-1.pl-spark-2:after {
  -webkit-animation-name: scaleB;
          animation-name: scaleB;
}

.preloader.preloader-deactivate {
  visibility: hidden;
}

@-webkit-keyframes scaleA {
  from, 50%, to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25%, 75% {
    -webkit-transform: scale(-1);
            transform: scale(-1);
  }
}

@keyframes scaleA {
  from, 50%, to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  25%, 75% {
    -webkit-transform: scale(-1);
            transform: scale(-1);
  }
}

@-webkit-keyframes scaleB {
  from, 50%, to {
    -webkit-transform: rotate(90deg) scale(0);
            transform: rotate(90deg) scale(0);
  }
  12.5%, 62.5% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  37.5%, 87.5% {
    -webkit-transform: rotate(90deg) scale(-1);
            transform: rotate(90deg) scale(-1);
  }
}

@keyframes scaleB {
  from, 50%, to {
    -webkit-transform: rotate(90deg) scale(0);
            transform: rotate(90deg) scale(0);
  }
  12.5%, 62.5% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  37.5%, 87.5% {
    -webkit-transform: rotate(90deg) scale(-1);
            transform: rotate(90deg) scale(-1);
  }
}

/*
Header Area Style
======================================================*/
.menu {
  align-items: center;
  display: flex;
  gap: 32px;
}

.menu > li {
  flex-shrink: 0;
  padding-bottom: 18px;
  padding-top: 18px;
}

.menu > li > a.router-link-active,
.menu > li > a:hover {
  --tw-text-opacity: 1;
  color: rgb(36 104 242 / var(--tw-text-opacity, 1));
}

.menu .dropdown {
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  z-index: 10;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.menu .dropdown ul {
  align-items: center;
  display: flex;
  gap: 24px;
}

.menu .dropdown ul li {
  height: 100px;
  width: 282px;
}

.menu .dropdown ul li a {
  background-repeat: no-repeat;
  border-radius: 8px;
  display: block;
  height: 100%;
  overflow: hidden;
  padding: 24px;
  width: 100%;
}

.menu .dropdown ul li a:hover span {
  --tw-text-opacity: 1;
  color: rgb(36 104 242 / var(--tw-text-opacity, 1));
}

.menu .dropdown ul li a span {
  font-size: 18px;
  font-weight: 700;
}

.menu .dropdown ul li a p {
  font-size: 14px;
  padding-top: 8px;
  --tw-text-opacity: 1;
  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
}

.dropdown li:first-child a {
  background-image: url(./menu_bg1.DrwSuZyi.png);
}

.dropdown li:nth-child(2) a {
  background-image: url(./menu_bg2.CyhS9BN-.png);
}

.dropdown li:nth-child(3) a {
  background-image: url(./menu_bg3.Cfp-CcbE.png);
}

.dropdown li:nth-child(4) a {
  background-image: url(./menu_bg4.Cgzz7LKD.png);
}

.langs {
  border-radius: 4px;
  border-width: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(100% + 50px);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  visibility: hidden;
  --tw-border-opacity: 1;
  border-color: rgb(229 234 239 / var(--tw-border-opacity, 1));
  border-top-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: 0;
  padding: 8px 12px;
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.group\/menu:hover .langs {
  opacity: 1;
  top: 61px;
  visibility: visible;
}

.langs li {
  padding-bottom: 6px;
  padding-top: 6px;
}

.langs li:not(.is-active) {
  cursor: pointer;
}

.langs li:not(.is-active):hover {
  --tw-text-opacity: 1;
  color: rgb(36 104 242 / var(--tw-text-opacity, 1));
}

.langs li.is-active {
  color: #636e8099;
  cursor: auto;
}

.langs .dots {
  left: 0;
  margin: auto;
  right: 0;
  top: -10px;
}

.langs .dots,
.langs .dots:before {
  height: 15px;
  position: absolute;
  width: 15px;
}

.langs .dots:before {
  --tw-rotate: 45deg;
  border-top-left-radius: 2px;
  border-width: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(229 234 239 / var(--tw-border-opacity, 1));
  border-bottom-color: transparent;
  border-right-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-content: "";
  content: var(--tw-content);
}

.header {
  border-bottom-color: transparent;
  border-bottom-width: 1px;
  height: 61px;
  left: 0;
  min-width: 1200px;
  position: fixed;
  right: 0;
  top: 0;
  transition-duration: 0.3s;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    -webkit-backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 30;
}

.header.is-active,
.header.is-default,
.header:not(.is-active):hover {
  --tw-border-opacity: 1;
  border-color: rgb(229 234 239 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.button {
  border-radius: 9999px;
  flex-shrink: 0;
  font-size: 16px;
  height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: linear;
}