@charset "UTF-8";
/*
Template Name: MAHA
Theme URI: https://wemakeitlive.com/
Author: Vinod
Support: vinod@wemakeitlive.com
Author URI: https://wemakeitlive.com/
Description: The MAHA portfolio template is an excellent choice for professionals from various fields, including developers, designers, freelancers, engineers, content writers, instructors, photographers, politicians, and other experts who wish to showcase their skills, bio, and portfolio. The template is highly customizable, with well-organized layers that make it easy to effect changes without complications. You can effortlessly personalize the layouts to suit your preference, and even mix the elements and components to create your own design with the business template. With its versatility and user-friendly features, the MAHA portfolio template is a smart option for your next projects.
Version: 1.0.0
*/
/*----------------------------------------
  VARIABLES
----------------------------------------*/
:root {
  --color-primary: #743B20;
  --color-secondary: #ffd54d;
  --color-black: #243a48;
  --color-gray: #233947;
  --color-background: #f8f6f3;
  --color-white: #FFFFFF;
  --color-line: #ececf0;
  --color-line-menu: #743B20;
  --font-heading: "Quicksand", sans-serif;
  --font-body: "Ysabeau", sans-serif;
  --font-size-1: 22px;
  --font-size-2: 20px;
  --font-size-3: 18px;
  --font-size-4: 16px;
  --h1-font-size: 4rem;
  --h2-font-size: 3.5rem;
  --h3-font-size: 3rem;
  --h4-font-size: 2.5rem;
  --h5-font-size: 2rem;
  --h6-font-size: 1.5rem;
  --font-size-h1: var(--h1-font-size);
  --font-size-h2: var(--h2-font-size);
  --font-size-h3: var(--h3-font-size);
  --font-size-h4: var(--h4-font-size);
  --font-size-h5: var(--h5-font-size);
  --font-size-h6: var(--h6-font-size);
  --line-height-1: 1.5;
  --line-height-2: 1.1;
  --block-border-radius: 15px;
  --button-border-radius: 25px;
  --button-border-radius-2: 5px;
  --transition: all 0.3s ease-in-out;
}

/*---------------------------------------
  MIXIN CSS 
----------------------------------------*/
/*---------------------------------------
  Function CSS 
----------------------------------------*/
/*----------------------------------------
  SPACING
----------------------------------------*/
.mt-120 {
  margin-top: 60px;
}
@media only screen and (min-width: 992px) {
  .mt-120 {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .mt-120 {
    margin-top: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .mt-120 {
    margin-top: 120px;
  }
}

.mb-120 {
  margin-bottom: 60px;
}
@media only screen and (min-width: 992px) {
  .mb-120 {
    margin-bottom: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .mb-120 {
    margin-bottom: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .mb-120 {
    margin-bottom: 120px;
  }
}

.pt-120 {
  padding-top: 60px;
}
@media only screen and (min-width: 992px) {
  .pt-120 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .pt-120 {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .pt-120 {
    padding-top: 120px;
  }
}

.pb-120 {
  padding-bottom: 60px;
}
@media only screen and (min-width: 992px) {
  .pb-120 {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 1200px) {
  .pb-120 {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 1400px) {
  .pb-120 {
    padding-bottom: 120px;
  }
}

.pt-100 {
  padding-top: 40px;
}
@media only screen and (min-width: 992px) {
  .pt-100 {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .pt-100 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .pt-100 {
    padding-top: 100px;
  }
}

.pb-100 {
  padding-bottom: 40px;
}
@media only screen and (min-width: 992px) {
  .pb-100 {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .pb-100 {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 1400px) {
  .pb-100 {
    padding-bottom: 100px;
  }
}

/*--------------------------------------
TYPOGRAPHY
--------------------------------------*/
body {
  position: relative;
  height: 100%;
  color: var(--color-gray);
  font-family: var(--font-body);
  font-size: var(--font-size-1);
  font-weight: 400;
  line-height: var(--line-height-1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
address,
p,
pre,
blockquote,
table,
hr {
  margin: 0 0 20px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  word-break: break-word;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1,
.h1 {
  font-size: calc(1.525rem + 3.3vw);
  line-height: 1.2;
}
@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 4rem;
  }
}

h2,
.h2 {
  font-size: calc(1.475rem + 2.7vw);
  line-height: 1.2;
}
@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 3.5rem;
  }
}

h3,
.h3 {
  font-size: calc(1.425rem + 2.1vw);
  line-height: 1.2;
}
@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 3rem;
  }
}

h4,
.h4 {
  font-size: calc(1.375rem + 1.5vw);
  line-height: 1.2;
}
@media (min-width: 1200px) {
  h4,
  .h4 {
    font-size: 2.5rem;
  }
}

h5,
.h5 {
  font-size: calc(1.325rem + 0.9vw);
  line-height: 1.1;
}
@media (min-width: 1200px) {
  h5,
  .h5 {
    font-size: 2rem;
  }
}

h6,
.h6 {
  font-size: calc(1.275rem + 0.3vw);
  line-height: 1.1;
}
@media (min-width: 1200px) {
  h6,
  .h6 {
    font-size: 1.5rem;
  }
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a:hover {
  color: var(--color-secondary);
}

p {
  color: var(--color-gray);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  margin: 0 0 30px 0;
}

/*-------------------------------
  BACKGROUND SHAPES
  --------------------------------*/
.bg-shapes-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 0;
  margin: 0;
  z-index: 1;
}
.bg-shapes-top li {
  position: absolute;
  top: 80vh;
  left: 45vw;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  border: solid 1px var(--color-primary);
  color: transparent;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
          transform: scale(0) rotate(0deg) translate(-50%, -50%);
}
.bg-shapes-top li:nth-child(1) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  -webkit-animation: cube-scale-20 12s ease-in forwards infinite;
          animation: cube-scale-20 12s ease-in forwards infinite;
  left: 0vw;
  top: 0vh;
}
.bg-shapes-top li:nth-child(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: cube 12s ease-in forwards infinite;
          animation: cube 12s ease-in forwards infinite;
  border-color: var(--color-secondary);
  left: 54vw;
  top: 14vh;
}
.bg-shapes-top li:nth-child(3) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation: cube 12s ease-in forwards infinite;
          animation: cube 12s ease-in forwards infinite;
  left: 56vw;
  top: 12vh;
}
.bg-shapes-top li:nth-child(4) {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  -webkit-animation: cube-scale-20 12s ease-in forwards infinite;
          animation: cube-scale-20 12s ease-in forwards infinite;
  border-color: var(--color-secondary);
  left: 100vw;
  top: 0vh;
}

.bg-shapes-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  padding: 0;
  margin: 0;
  z-index: 1;
}
.bg-shapes-bottom li {
  position: absolute;
  bottom: 80vh;
  left: 45vw;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  border: solid 1px var(--color-primary);
  color: transparent;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
          transform: scale(0) rotate(0deg) translate(-50%, -50%);
}
.bg-shapes-bottom li:nth-child(1) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: cube-scale-20 12s ease-in forwards infinite;
          animation: cube-scale-20 12s ease-in forwards infinite;
  left: 0vw;
  bottom: 0vh;
}
.bg-shapes-bottom li:nth-child(2) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: cube 12s ease-in forwards infinite;
          animation: cube 12s ease-in forwards infinite;
  border-color: var(--color-secondary);
  left: 0vw;
  bottom: 10vh;
}
.bg-shapes-bottom li:nth-child(3) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: cube 12s ease-in forwards infinite;
          animation: cube 12s ease-in forwards infinite;
  left: 100vw;
  bottom: 10vh;
}
.bg-shapes-bottom li:nth-child(4) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation: cube-scale-20 12s ease-in forwards infinite;
          animation: cube-scale-20 12s ease-in forwards infinite;
  border-color: var(--color-secondary);
  left: 100vw;
  bottom: 0vh;
}

@-webkit-keyframes cube {
  from {
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
            transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    -webkit-transform: scale(5) rotate(960deg) translate(-50%, -50%);
            transform: scale(5) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}

@keyframes cube {
  from {
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
            transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    -webkit-transform: scale(5) rotate(960deg) translate(-50%, -50%);
            transform: scale(5) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes cube-scale-20 {
  from {
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
            transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    -webkit-transform: scale(20) rotate(960deg) translate(-50%, -50%);
            transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@keyframes cube-scale-20 {
  from {
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
            transform: scale(0) rotate(0deg) translate(-50%, -50%);
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    -webkit-transform: scale(20) rotate(960deg) translate(-50%, -50%);
            transform: scale(20) rotate(960deg) translate(-50%, -50%);
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
/*----------------------------
  PRELOADER CSS
------------------------------*/
#preloader {
  position: fixed;
  z-index: 999;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-white);
}

.preloader-container {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 18rem;
  height: 10rem;
}

.preloader-text {
  display: inline-block;
  position: absolute;
  bottom: 0;
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  -webkit-animation: text 1550ms ease-in infinite;
          animation: text 1550ms ease-in infinite;
  -webkit-transform: translatez(0);
          transform: translatez(0);
}
.preloader-text-1 {
  left: 0rem;
  -webkit-transform: translate3d(0, -4rem, 0);
          transform: translate3d(0, -4rem, 0);
  -webkit-animation: text-w 1550ms ease-in infinite;
          animation: text-w 1550ms ease-in infinite;
}
.preloader-text-2 {
  left: 1.4rem;
  -webkit-animation-delay: 150ms;
          animation-delay: 150ms;
}
.preloader-text-3 {
  left: 4.6rem;
  -webkit-animation-delay: 230ms;
          animation-delay: 230ms;
}
.preloader-text-4 {
  left: 7.6rem;
  -webkit-animation-delay: 310ms;
          animation-delay: 310ms;
}
.preloader-text-5 {
  left: 10.6rem;
  -webkit-animation-delay: 390ms;
          animation-delay: 390ms;
}
.preloader-text-6 {
  left: 12.6rem;
  -webkit-animation-delay: 470ms;
          animation-delay: 470ms;
}
.preloader-text-7 {
  left: 16rem;
  -webkit-animation-delay: 550ms;
          animation-delay: 550ms;
}

.coast {
  display: inline-block;
  position: absolute;
  left: 1.3rem;
  bottom: 1.7rem;
  width: 4.2rem;
  height: 1.2rem;
  -webkit-animation: coast 3100ms linear infinite;
          animation: coast 3100ms linear infinite;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.wave-rel-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-perspective: 2rem;
          perspective: 2rem;
  -webkit-perspective-origin: 0% 50%;
          perspective-origin: 0% 50%;
}

.wave {
  display: inline-block;
  position: absolute;
  width: 4.2rem;
  height: 1.2rem;
  border-radius: 1.1rem;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  background: rgb(254, 218, 54);
  will-change: width;
  -webkit-animation: wave 3100ms linear infinite;
          animation: wave 3100ms linear infinite;
  -webkit-transform: translateZ(0) scale(0);
          transform: translateZ(0) scale(0);
}

.delay {
  -webkit-animation-delay: 1550ms;
          animation-delay: 1550ms;
}

@-webkit-keyframes text {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  45% {
    -webkit-transform: translate3d(0, -4rem, 0);
            transform: translate3d(0, -4rem, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes text {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  45% {
    -webkit-transform: translate3d(0, -4rem, 0);
            transform: translate3d(0, -4rem, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes text-w {
  0% {
    -webkit-transform: translate3d(0, -4rem, 0);
            transform: translate3d(0, -4rem, 0);
  }
  38% {
    -webkit-transform: translate3d(0, -4rem, 0);
            transform: translate3d(0, -4rem, 0);
  }
  69% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -4rem, 0);
            transform: translate3d(0, -4rem, 0);
  }
}
@keyframes text-w {
  0% {
    -webkit-transform: translate3d(0, -4rem, 0);
            transform: translate3d(0, -4rem, 0);
  }
  38% {
    -webkit-transform: translate3d(0, -4rem, 0);
            transform: translate3d(0, -4rem, 0);
  }
  69% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -4rem, 0);
            transform: translate3d(0, -4rem, 0);
  }
}
@-webkit-keyframes coast {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  23% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(16rem, 0, 0);
            transform: translate3d(16rem, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(16rem, 0, 0);
            transform: translate3d(16rem, 0, 0);
  }
}
@keyframes coast {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  23% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(16rem, 0, 0);
            transform: translate3d(16rem, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(16rem, 0, 0);
            transform: translate3d(16rem, 0, 0);
  }
}
@-webkit-keyframes wave {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    width: 2.2rem;
  }
  10% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  23% {
    width: 2.2rem;
  }
  32% {
    width: 6.1rem;
  }
  42% {
    width: 5rem;
    -webkit-transform: rotateY(0deg) scale(1, 1);
            transform: rotateY(0deg) scale(1, 1);
  }
  51% {
    -webkit-transform: rotateY(0deg) scale(0.8, 0.8);
            transform: rotateY(0deg) scale(0.8, 0.8);
  }
  52% {
    -webkit-transform: rotateY(0deg) scale(0.4, 0.4);
            transform: rotateY(0deg) scale(0.4, 0.4);
  }
  100% {
    -webkit-transform: rotateY(90deg) scale(0);
            transform: rotateY(90deg) scale(0);
  }
}
@keyframes wave {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    width: 2.2rem;
  }
  10% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  23% {
    width: 2.2rem;
  }
  32% {
    width: 6.1rem;
  }
  42% {
    width: 5rem;
    -webkit-transform: rotateY(0deg) scale(1, 1);
            transform: rotateY(0deg) scale(1, 1);
  }
  51% {
    -webkit-transform: rotateY(0deg) scale(0.8, 0.8);
            transform: rotateY(0deg) scale(0.8, 0.8);
  }
  52% {
    -webkit-transform: rotateY(0deg) scale(0.4, 0.4);
            transform: rotateY(0deg) scale(0.4, 0.4);
  }
  100% {
    -webkit-transform: rotateY(90deg) scale(0);
            transform: rotateY(90deg) scale(0);
  }
}
/*-------------------------------
  BUTTON
  --------------------------------*/
.button-wrapper {
  position: relative;
  padding: 1.5rem 0;
  -webkit-filter: url("#goo");
          filter: url("#goo");
}

.button {
  display: inline-block;
  position: relative;
  min-width: 8.23em;
  min-width: 200px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--color-black);
  background: var(--color-white);
  border-radius: 1em;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  padding: 1.03em 1.32em;
  line-height: 1;
}
.button:before, .button:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 4.4em;
  height: 2.95em;
  background: var(--color-white);
  border-radius: 50%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
  z-index: -1;
}

.button-yellow {
  background: #743B20;
  color: var(--color-white);
}
.button-yellow:before, .button-yellow:after {
  background: var(--color-primary);
}

.button:before {
  top: -25%;
  left: 20%;
}

.button:after {
  bottom: -25%;
  right: 20%;
}

.button:hover:before,
.button:hover:after {
  -webkit-transform: none;
          transform: none;
}

.loading-button .drops {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-filter: url("#liquid");
  filter: url("#liquid");
  -webkit-animation: fade-in 0.1s linear 0.4s forwards;
          animation: fade-in 0.1s linear 0.4s forwards;
}
.loading-button .drop1, .loading-button .drop2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 21px;
  height: 24px;
  border-radius: 50%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  background-color: var(--color-primary);
}
.loading-button .drop1 {
  width: 90px;
  height: 16px;
  bottom: 2px;
  border-radius: 0;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
}
.loading-button .drop2 {
  -webkit-animation: drop 1.3s cubic-bezier(1, 0.19, 0.66, 0.12) 0.5s infinite;
          animation: drop 1.3s cubic-bezier(1, 0.19, 0.66, 0.12) 0.5s infinite;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-webkit-keyframes drop {
  0% {
    bottom: 0px;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    bottom: -200px;
  }
}
@keyframes drop {
  0% {
    bottom: 0px;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    bottom: -200px;
  }
}
/*----------------------------------
  SECTION TITLE 
  -----------------------------------*/
.section-title-wrap {
  position: relative;
  margin-bottom: 40px;
}
.section-title-wrap .section-title {
  display: inline-block;
  position: relative;
  margin: 5px 0 40px;
  text-transform: capitalize;
  line-height: 1.4;
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .section-title-wrap .section-title {
    font-size: 4rem;
  }
}
.section-title-wrap .section-title::before, .section-title-wrap .section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 20px;
  height: 8px;
  border-radius: 4px;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  background-color: #fed104;
  -webkit-animation: animate 6s linear infinite;
          animation: animate 6s linear infinite;
}
.section-title-wrap .section-title::before {
  right: 50%;
  margin-right: 4px;
}
.section-title-wrap .section-title::after {
  left: 50%;
  margin-left: 4px;
}
.section-title-wrap p {
  display: inline-block;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 0;
  max-width: 1200px;
}

@-webkit-keyframes animate {
  0% {
    width: 20px;
  }
  25% {
    width: 50px;
  }
  50% {
    width: 50px;
  }
  75% {
    width: 100px;
  }
  100% {
    width: 100px;
  }
}

@keyframes animate {
  0% {
    width: 20px;
  }
  25% {
    width: 50px;
  }
  50% {
    width: 50px;
  }
  75% {
    width: 100px;
  }
  100% {
    width: 100px;
  }
}
/*----------------------------
   HEADER CSS
  ----------------------------*/
.page-wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-width: 300px;
  overflow: hidden;
}

.page-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

.header-nav {
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 8px 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .header-nav {
    padding: 8px 15px;
  }
}
@media only screen and (min-width: 992px) {
  .header-nav {
    padding: 8px 25px;
  }
}
@media only screen and (min-width: 1200px) {
  .header-nav {
    padding: 8px 55px;
  }
}
.header-nav .logo-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 auto;
          flex: 1 auto;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media only screen and (min-width: 768px) {
  .header-nav .logo-wrap {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    -webkit-box-pack: unset;
        -ms-flex-pack: unset;
            justify-content: unset;
    margin-right: 10px;
    -ms-flex-preferred-size: unset;
        flex-basis: unset;
  }
}
@media only screen and (min-width: 1400px) {
  .header-nav .logo-wrap {
    margin-right: 100px;
  }
}
.header-nav .logo-wrap a {
  margin-right: 0;
}
.header-nav .logo-wrap .main-logo {
  width: 90%;
}
@media only screen and (min-width: 768px) {
  .header-nav .logo-wrap .main-logo {
    width: 100%;
  }
}
.header-nav .mobile-nav {
  position: fixed;
  bottom: -60px;
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
  color: white;
  background: var(--color-primary);
  border-radius: 100%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  line-height: 80px;
  text-align: center;
  z-index: 100;
}
@media only screen and (min-width: 992px) {
  .header-nav .mobile-nav {
    display: none;
  }
}
.header-nav .mobile-nav .menu-toggler {
  height: 60px;
  padding: 22px 20px;
  width: 80px;
  background-color: transparent;
  border: 0;
}
.header-nav .mobile-nav .menu-toggler .line {
  display: block;
  height: 4px;
  width: 90%;
  margin-bottom: 7px;
  background-color: #fff;
  border-radius: 5px;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.header-nav .mobile-nav .menu-toggler .line.half {
  width: 50%;
}
.header-nav .mobile-nav .menu-toggler.open .line.first {
  -webkit-transform: translateY(14px) rotateZ(-45deg);
          transform: translateY(14px) rotateZ(-45deg);
}
.header-nav .mobile-nav .menu-toggler.open .line.third {
  -webkit-transform: translateY(-7px) rotate(45deg);
          transform: translateY(-7px) rotate(45deg);
}
.header-nav .mobile-nav .menu-toggler.open .line.half {
  opacity: 0;
  filter: alpha(opacity=0);
  width: 0;
}
.header-nav .dropdown-toggle::after {
  border: none;
}
.header-nav .navbar-collapse {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 90px;
  background: -webkit-gradient(linear, right top, left top, from(#d7d2cc), to(#304352));
  background: linear-gradient(to left, #d7d2cc, #304352);
  z-index: 99;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse {
    position: relative;
    background: transparent;
    width: auto;
    padding-bottom: 0;
    left: auto;
    top: auto;
    bottom: auto;
    z-index: 1;
  }
}
.header-nav .navbar-collapse .navbar-nav .nav-item {
  position: relative;
  padding: 5px;
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item {
    padding: 20px 5px;
  }
}
.header-nav .navbar-collapse .navbar-nav .nav-item.nav-dropdown::before {
  position: absolute;
  top: 10px;
  right: 25px;
  z-index: -1;
  display: block;
  content: "\eaca";
  font-family: IcoFont !important;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item.nav-dropdown::before {
    display: none;
  }
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link {
  position: relative;
  margin: 0 10px;
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item .nav-link {
    margin: 0 5px;
    letter-spacing: 0em;
  }
}
@media only screen and (min-width: 1200px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item .nav-link {
    margin: 0 12px;
    letter-spacing: 0.05em;
  }
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link::before, .header-nav .navbar-collapse .navbar-nav .nav-item .nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 4px;
  background-color: #e2bb0d;
  -webkit-transition: 0.7s;
  transition: 0.7s;
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link::before {
  top: 100%;
  left: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link::after {
  top: 100%;
  right: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  z-index: 999;
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link.active {
  color: var(--color-primary);
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link.active::before {
  width: 50%;
  -webkit-transform: translateX(99%);
          transform: translateX(99%);
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link.active::after {
  width: 50%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
  color: var(--color-primary);
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link:hover::before {
  width: 50%;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.header-nav .navbar-collapse .navbar-nav .nav-item .nav-link:hover::after {
  width: 50%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
  width: 100%;
  padding: 0;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
    width: 260px;
    padding: 15px 0;
    border: none;
    border-radius: 5px;
    background-clip: padding-box; /* stops bg color from leaking outside the border: */
    -webkit-box-shadow: 0px 0px 37px rgba(69, 81, 113, 0.06);
            box-shadow: 0px 0px 37px rgba(69, 81, 113, 0.06);
    background-color: var(--color-primary);
  }
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-menu::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 6px;
    left: 0;
    top: 0;
    background-color: var(--color-secondary);
  }
}
.header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-menu li {
  position: relative;
  margin: 0 25px;
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-menu li {
    margin: 0;
  }
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-menu li:last-child .dropdown-item {
    border-bottom: 0;
  }
}
.header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-item {
  display: block;
  padding: 9px 0;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-line-menu);
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-item {
    padding-left: 30px;
  }
}
.header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-item:hover, .header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-item.active {
  color: var(--color-secondary);
  background: transparent;
}
@media only screen and (min-width: 992px) {
  .header-nav .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
    display: none;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
  }
  .header-nav .navbar-collapse .navbar-nav .nav-item:hover .dropdown-menu {
    display: block;
    visibility: visible;
    -webkit-animation: fadeInRight 0.3s ease;
            animation: fadeInRight 0.3s ease;
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
.header-nav .header-contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 80px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: none;
            transform: none;
  }
}
/* STICKY STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (min-width: 992px) {
  .page-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #304352;
    background-image: -webkit-gradient(linear, right top, left top, from(#d7d2cc), to(#304352));
    background-image: linear-gradient(to left, #d7d2cc, #304352);
    -webkit-box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
            box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    -webkit-animation: slideDown 0.35s ease-out;
            animation: slideDown 0.35s ease-out;
  }
}

@media only screen and (min-width: 992px) {
  .page-header.is-sticky img {
    max-width: 80%;
  }
}

.no-scroll {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

@-webkit-keyframes slideDown {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/*----------------------------------
  BANNER CSS
  ---------------------------------*/
.swiper {
  position: relative;
}
.swiper .swiper-slide {
  position: relative;
  z-index: 9;
  text-align: center;
  padding: 80px 0;
  background-position: bottom center;
  background-size: cover;
  background-blend-mode: saturation;
}
@media only screen and (min-width: 768px) {
  .swiper .swiper-slide {
    padding: 150px 0;
  }
}
.swiper .swiper-slide .slide-content {
  position: relative;
  padding: 60px 20px;
}
@media only screen and (min-width: 768px) {
  .swiper .swiper-slide .slide-content {
    padding: 100px 20px;
  }
}
.swiper .swiper-slide .slide-content .slide-title-1 {
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--color-white);
  padding-bottom: 10px;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .swiper .swiper-slide .slide-content .slide-title-1 {
    font-size: 1.5rem;
  }
}
.swiper .swiper-slide .slide-content .slide-title-2 {
  font-family: var(--font-heading);
  font-size: calc(1.525rem + 3.3vw);
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  /* Layout */
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 60px;
  /* Color */
  color: var(--color-white);
  /* Text alignment */
  text-align: center;
}
@media (min-width: 1200px) {
  .swiper .swiper-slide .slide-content .slide-title-2 {
    font-size: 4rem;
  }
}
.swiper .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.60;
  filter: alpha(opacity=10);
  background-color: #575757;
  /* background-image: -webkit-gradient(linear, right top, left top, from(#d7d2cc), to(#304352));
  background-image: linear-gradient(to left, #d7d2cc, #304352); */
}
.swiper .slide-1,
.swiper .slide-2,
.swiper .slide-3 {
  background-size: cover;
}
.swiper .slide-1 {
  background-image: -webkit-gradient(linear, left top, left bottom), url(../images/hero1.jpg);
  background-image: url(../images/hero1.jpg);
}
.swiper .slide-2 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(black)), url(../images/hero-3.jpg);
  background-image:  url(../images/hero-3.jpg);
}
.swiper .slide-3 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(black)), url(../images/hero4.jpg);
  background-image:  url(../images/hero4.jpg);
}
.swiper .swiper-slide-active .slide-title-1 {
  -webkit-animation: fadeInUp 1s;
          animation: fadeInUp 1s;
}
.swiper .swiper-slide-active .slide-title-2 {
  -webkit-animation: fadeInUp 1.25s -0.25s;
          animation: fadeInUp 1.25s -0.25s;
}
.swiper .swiper-slide-active a {
  -webkit-animation: fadeInUp 1s;
          animation: fadeInUp 1s;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 20px;
}

.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background-color: var(--color-white);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.swiper-pagination-bullet-active {
  width: 55px;
  border-radius: 15px;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  background-color: #ffc107;
}

.swiper-button-next, .swiper-button-prev {
  color: var(--color-secondary);
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: 5px;
}
@media only screen and (min-width: 992px) {
  .swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: 20px;
  }
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: 5px;
}
@media only screen and (min-width: 992px) {
  .swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 20px;
  }
}

.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after, .swiper-button-prev::after, .swiper-rtl .swiper-button-next::after {
  font-family: IcoFont !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  line-height: 1;
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .swiper-button-next::after, .swiper-rtl .swiper-button-prev::after, .swiper-button-prev::after, .swiper-rtl .swiper-button-next::after {
    font-size: 4rem;
  }
}

.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
  content: "\eac4";
}

.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after {
  content: "\eac3";
}

/*--------------------------
  ABOUT US
  --------------------------*/
.about-wrap {
  position: relative;
  overflow: hidden;
}

.counter-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.counter-wrap .counter-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 190px;
  height: 160px;
  margin-bottom: 30px;
  background-image: url(../../assets/images/bg/icon-bg.png);
}
.counter-wrap .counter {
  text-align: center;
}
.counter-wrap .counter h4 {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 700;
  background: -webkit-gradient(linear, left top, right top, color-stop(10%, #41b681), color-stop(10%, #41d49f), color-stop(60%, #41b681));
  background: linear-gradient(to right, #41b681 10%, #41d49f 10%, #41b681 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: textshadow 1.8s linear infinite;
          animation: textshadow 1.8s linear infinite;
}
.counter-wrap h5 {
  text-transform: uppercase;
}

@-webkit-keyframes textshadow {
  to {
    background-position: -200% center;
  }
}

@keyframes textshadow {
  to {
    background-position: -200% center;
  }
}
/*-----------------------------
  CONTACT SECTION
  ------------------------------*/
.contact-wrap {
  position: relative;
  background: url(../images/bg/bg111.png) center center no-repeat fixed;
  background-size: auto;
  background-size: cover;
}
.contact-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  filter: alpha(opacity=85);
  background-color: #17262d;
  z-index: 0;
}
.contact-wrap .row > * {
  z-index: 1;
}
.contact-wrap .section-title-wrap .section-title-text, .contact-wrap .section-title-wrap p, .contact-wrap h5 {
  color: #fff;
}

/*-------------------------------
  SERVICES
  -------------------------------*/
.service-wrap {
  position: relative;
}

.service-box {
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) {
  .service-box {
    margin-bottom: 0;
  }
}
.service-box .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 220px;
  width: 220px;
  margin: auto;
  overflow: hidden;
  position: relative;
  border: 6px solid #743B20;
  border-radius: 100%;
}
.service-box h5 {
  margin-top: 25px;
  text-transform: uppercase;
}
.service-box p {
  display: inline-block;
  margin-bottom: 15px;
  max-width: 500px;
}
.service-box:hover .spin {
  border: 0;
}
.service-box:hover .spin::before {
  border-bottom-color: var(--color-secondary);
  border-right-color: var(--color-secondary);
  border-top-color: var(--color-secondary);
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.service-box:hover .spin::after {
  border-left-width: 6px;
  border-right-width: 6px;
  border-top: 6px solid var(--color-secondary);
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

/*------------------------------
  WORK PROCESS
  ------------------------------*/
.process-wrap {
  position: relative;
  overflow: hidden;
}

.process-content {
  padding-top: 30px;
}
@media only screen and (min-width: 992px) {
  .process-content {
    padding-top: 90px;
  }
}
.process-content .process-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 0;
}
@media only screen and (min-width: 992px) {
  .process-content .process-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.process-content .process-list .process {
  list-style: none;
  margin-right: 0;
  text-align: center;
}
@media only screen and (min-width: 992px) {
  .process-content .process-list .process {
    margin-right: 80px;
  }
}
.process-content .process-list .process:last-child {
  margin-right: 0px;
}
.process-content .process-list .process:nth-child(2n) {
  margin-top: 0;
}
@media only screen and (min-width: 992px) {
  .process-content .process-list .process:nth-child(2n) {
    margin-top: -125px;
  }
}
.process-content .process-list .process .process-circle {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  background-color: var(--color-white);
  border-radius: 100%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  border: 8px solid #e6e9ee;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}
@media only screen and (min-width: 992px) {
  .process-content .process-list .process .process-circle {
    width: 100px;
    height: 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-content .process-list .process .process-circle {
    width: 140px;
    height: 140px;
  }
}
.process-content .process-list .process .process-circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #2e4451;
  font-size: 44px;
  font-family: var(--font-heading);
  font-weight: 600;
}
.process-content .process-list .process .process-circle:hover {
  border-color: #efc512;
}
.process-content .process-list .process .process-circle:hover span {
  color: #efc512;
}
.process-content .process-list .process:nth-child(2n) .process-circle .zigzax-line {
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
  top: 65%;
  left: -85%;
}
.process-content .process-list .process:first-child .process-circle .zigzax-line {
  display: none;
}
.process-content .process-list .process .zigzax-line {
  content: "";
  display: none;
  position: absolute;
  top: 10%;
  left: -80%;
  width: 90%;
  height: 2px;
  z-index: -1;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #efc512), color-stop(50%, white));
  background-image: linear-gradient(to right, #efc512 50%, white 50%);
  background-position: top;
  background-size: 8px 2px;
  background-repeat: repeat-x;
}
@media only screen and (min-width: 992px) {
  .process-content .process-list .process .zigzax-line {
    display: block;
  }
}
.process-content .process-list .process .info {
  position: relative;
  padding-top: 25px;
  text-align: center;
}
.process-content .process-list .process .info .title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: capitalize;
}
@media only screen and (min-width: 992px) {
  .process-content .process-list .process .info .title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1200px) {
  .process-content .process-list .process .info .title {
    font-size: 22px;
  }
}
.process-content .process-list .process .info p {
  display: inline-block;
  font-size: 20px;
  margin-left: 0;
  position: relative;
  width: 200px;
}
@media only screen and (min-width: 992px) {
  .process-content .process-list .process .info p {
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .process-content .process-list .process .info p {
    position: absolute;
    display: none;
    font-size: 16px;
    margin-left: -25px;
    width: 160px;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@media only screen and (min-width: 1200px) {
  .process-content .process-list .process .info p {
    font-size: 18px;
    width: 200px;
  }
}
.process-content .process-list .process:hover .info P {
  display: inline-block;
  opacity: 1;
  filter: alpha(opacity=100);
}
@media only screen and (min-width: 992px) {
  .process-content .process-list .process:hover .info P {
    display: block;
    -webkit-animation: slide-down 0.3s ease-out;
            animation: slide-down 0.3s ease-out;
  }
}
.process-content .process-list .process:hover .process-circle span {
  color: #efc512;
}
.process-content .process-list .process:hover .process-circle {
  border-color: #efc512;
}
.process-content .process-list .process:hover .spin {
  border: 0;
}
.process-content .process-list .process:hover .spin::before {
  border-bottom-color: var(--color-secondary);
  border-right-color: var(--color-secondary);
  border-top-color: var(--color-secondary);
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.process-content .process-list .process:hover .spin::after {
  border-left-width: 6px;
  border-right-width: 6px;
  border-top: 6px solid var(--color-secondary);
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.spin::before, .spin::after {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  content: "";
}
.spin::before {
  border: 6px solid transparent;
  z-index: 20;
}
.spin::after {
  border: 0 solid transparent;
}

.circle {
  border-radius: 100%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  -webkit-box-shadow: none;
          box-shadow: none;
}
.circle::before, .circle::after {
  border-radius: 100%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
}

/*-------------------------------
  PROJECT
  --------------------------------*/
.project-slide {
  position: relative;
  background-color: #fff;
  border-radius: var(--block-border-radius);
}
.project-slide .project-image {
  position: relative;
}
@media only screen and (min-width: 992px) {
  .project-slide .project-image {
    padding-left: 0;
  }
}
.project-slide .project-image .swiper-project-pagination {
  bottom: -40px;
}
@media only screen and (min-width: 768px) {
  .project-slide .project-image .swiper-project-pagination {
    bottom: 0;
  }
}
.project-slide .project-image img {
  border-radius: var(--block-border-radius);
}
@media only screen and (min-width: 992px) {
  .project-slide .project-image img {
    border-radius: 0;
    background-clip: padding-box; /* stops bg color from leaking outside the border: */
    border-top-left-radius: var(--block-border-radius);
    border-bottom-left-radius: var(--block-border-radius);
  }
}
.project-slide .swiper-pagination-bullet {
  background-color: #ffc107;
}

.project-content-wrap .project-content {
  overflow: hidden;
  padding-bottom: 60px;
}
@media only screen and (min-width: 992px) {
  .project-content-wrap .project-content {
    margin-right: 30px;
    padding-bottom: 0;
  }
}
.project-content-wrap .project-content-single {
  text-align: center;
  padding: 30px 15px;
}
.project-content-wrap .project-content-single .project-content-text {
  margin: 0;
  font-size: 20px;
}
.project-content-wrap .project-content-single .project-content-title {
  display: inline-block;
  margin: 40px 0 35px;
  padding: 10px 30px;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  color: #FFF;
  background-color: #41b681;
  text-decoration: none;
}
.project-content-wrap .project-content-single .project-content-line {
  display: block;
  height: 4px;
  width: 100%;
  margin-top: 40px;
  clear: both;
  background-color: var(--color-secondary);
}
.project-content-wrap .project-content-single .btn-project {
  display: inline-block;
  padding: 14.5px 36.25px;
  min-width: 200px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
  border: none;
  cursor: pointer;
  outline: none !important;
  background-color: var(--color-primary);
  color: var(--color-white);
  margin-top: 30px;
}

.project-filter .btn-filter {
  padding: 5px 15px;
  min-width: 100px;
  font-size: 18px;
  border-radius: var(--button-border-radius-2);
  margin-bottom: 20px;
}
.project-filter .active {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/*-------------------------------
  TESTIMONIALS
  --------------------------------*/
.testimonial-slider {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: transparent url(../images/bg/testimonial-bg.png) 0 0/100% 100%;
  padding: 30px 15px;
}
@media only screen and (min-width: 992px) {
  .testimonial-slider {
    padding: 90px 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-slider {
    padding: 90px 60px;
  }
}
.testimonial-slider .testimonials-text {
  position: relative;
  padding: 20px;
}
@media only screen and (min-width: 992px) {
  .testimonial-slider .testimonials-text {
    padding: 30px 60px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-slider .testimonials-text {
    padding: 30px 180px;
  }
}
.testimonial-slider .testimonials-text p {
  margin-bottom: 0;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .testimonial-slider .testimonials-text p {
    font-size: 1.5rem;
  }
}
.testimonial-slider .testimonials-text .testimonials-quote-top-wrap {
  position: absolute;
  left: 0;
  top: 10px;
}
@media only screen and (min-width: 992px) {
  .testimonial-slider .testimonials-text .testimonials-quote-top-wrap {
    left: 30px;
    top: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-slider .testimonials-text .testimonials-quote-top-wrap {
    left: 120px;
    top: 20px;
  }
}
.testimonial-slider .testimonials-text .testimonials-quote-top-wrap i {
  font-size: 30px;
  color: var(--color-primary);
  opacity: 0.2;
  filter: alpha(opacity=20);
}
@media only screen and (min-width: 992px) {
  .testimonial-slider .testimonials-text .testimonials-quote-top-wrap i {
    font-size: 60px;
  }
}
.testimonial-slider .testimonials-text .testimonials-quote-wrap {
  position: absolute;
  right: 0;
  bottom: 10px;
}
@media only screen and (min-width: 992px) {
  .testimonial-slider .testimonials-text .testimonials-quote-wrap {
    right: 70px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1200px) {
  .testimonial-slider .testimonials-text .testimonials-quote-wrap {
    right: 120px;
    bottom: 20px;
  }
}
.testimonial-slider .testimonials-text .testimonials-quote-wrap i {
  font-size: 30px;
  color: var(--color-primary);
  opacity: 0.2;
  filter: alpha(opacity=20);
}
@media only screen and (min-width: 992px) {
  .testimonial-slider .testimonials-text .testimonials-quote-wrap i {
    font-size: 60px;
  }
}
.testimonial-slider .testimonials-title {
  font-size: 15px;
  margin-bottom: 100px;
  color: var(--color-secondary);
}
@media only screen and (min-width: 992px) {
  .testimonial-slider .testimonials-title {
    font-size: 20px;
  }
}

.swiper-testimonial-pagination {
  position: absolute;
  text-align: center;
  bottom: 90px !important;
}
@media only screen and (min-width: 992px) {
  .swiper-testimonial-pagination {
    bottom: 120px !important;
  }
}
.swiper-testimonial-pagination .swiper-pagination-bullet {
  opacity: 0.5;
  filter: alpha(opacity=50);
  background-color: var(--color-secondary);
}
.swiper-testimonial-pagination .swiper-pagination-bullet-active {
  opacity: 0.8;
  filter: alpha(opacity=80);
  background-color: var(--color-primary);
}

/*-------------------------------
  Client
  --------------------------------*/
.client-wrap .client-slider {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 20px 30px;
}

.client-logo-wrap img {
  display: block;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .client-wrap .client-slider {
    padding: 0 0 30px;
  }
  .client-logo-wrap {
    padding: 0;
    text-align: center;
  }
}
/*-------------------------------
  FOOTER
  --------------------------------*/
.site-footer {
  position: relative;
  background-color: #18212e;
}
.site-footer .footer-top {
  padding-bottom: 30px;
  padding-top: 120px;
}
.site-footer .footer-top .footer-address {
  display: inline-block;
  padding-left: 0;
  margin-top: 20px;
}
.site-footer .footer-top .footer-address li {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  color: #9c9c9c;
  font-size: 22px;
  border-right: 1px solid #7e7e80;
}
.site-footer .footer-top .footer-address li:last-child {
  border-right: 0;
}
.site-footer .footer-top .button-block {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-top: 90px;
}
@media only screen and (min-width: 992px) {
  .site-footer .footer-top .button-block {
    padding-top: 0;
  }
}
.site-footer .footer-top .button-block .btn-tagline {
  position: absolute;
  top: 30px;
  right: 35%;
  color: var(--color-white);
  text-transform: uppercase;
}
@media only screen and (min-width: 992px) {
  .site-footer .footer-top .button-block .btn-tagline {
    top: -70px;
    right: 10px;
  }
}
.site-footer .footer-top .button-block .btn-tagline img {
  position: absolute;
  right: 0;
  margin-top: 20px;
  font-size: 27px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 2;
  -webkit-animation: btnIconMove 2s linear infinite;
          animation: btnIconMove 2s linear infinite;
}
.site-footer .footer-bottom {
  padding-bottom: 100px;
}
.site-footer .footer-bottom .container {
  padding-top: 20px;
  border-top: 2px solid var(--color-gray);
}
.site-footer .footer-bottom .social li {
  display: inline-block;
  margin-bottom: 10px;
}
.site-footer .footer-bottom .social li a {
  display: block;
  position: relative;
  height: 42px;
  width: 42px;
  margin-right: 7px;
  border: 2px solid #fed104;
  background: transparent;
  color: #fff;
  text-align: center;
  line-height: 38px;
  font-size: 18px;
  border-radius: 100%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
}
.site-footer .footer-bottom .social li a i {
  position: absolute;
  left: 10px;
  z-index: 2;
  line-height: 38px;
}
.site-footer .footer-bottom .social li a::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  content: "";
  border-radius: 100%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.site-footer .footer-bottom .social li a:hover {
  border-color: transparent;
}
.site-footer .footer-bottom .social li a:hover::before, .site-footer .footer-bottom .social li a:focus::before {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
          transform: scale(1);
}
.site-footer .footer-bottom .social li a.pinterest:before {
  background-color: #cb2027;
}
.site-footer .footer-bottom .social li a.twitter:before {
  background-color: #1DA1F2 !important;
}
.site-footer .footer-bottom .social li a.facebook:before {
  background-color: #3b5998 !important;
}
.site-footer .footer-bottom .social li a.instagram:before {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
.site-footer .footer-bottom .social li a.google:before {
  background-color: #DB4437 !important;
}
.site-footer .footer-bottom .social li a.linkedin:before {
  background-color: #0077B5 !important;
}
.site-footer .footer-bottom .copyright {
  display: inline-block;
  color: #9c9c9c;
  font-size: 18px;
}

.footer-bg {
  background: #17262d url(../images/bg/footer-bg.jpg) center center no-repeat fixed;
  background-color: rgb(23, 38, 45);
  background-size: auto;
  background-size: cover;
}

@-webkit-keyframes btnIconMove {
  0% {
    -webkit-transform: rotateX(20deg) scale(1, -1) translate(3px, 0px);
    transform: rotateX(20deg) scale(1, -1) translate(3px, 0px);
  }
  50% {
    -webkit-transform: rotateX(20deg) scale(1, -1) translate(10px, 0px);
    transform: rotateX(20deg) scale(1, -1) translate(10px, 0px);
  }
  100% {
    -webkit-transform: rotateX(20deg) scale(1, -1) translate(3px, 0px);
    transform: rotateX(20deg) scale(1, -1) translate(3px, 0px);
  }
}

@keyframes btnIconMove {
  0% {
    -webkit-transform: rotateX(20deg) scale(1, -1) translate(3px, 0px);
    transform: rotateX(20deg) scale(1, -1) translate(3px, 0px);
  }
  50% {
    -webkit-transform: rotateX(20deg) scale(1, -1) translate(10px, 0px);
    transform: rotateX(20deg) scale(1, -1) translate(10px, 0px);
  }
  100% {
    -webkit-transform: rotateX(20deg) scale(1, -1) translate(3px, 0px);
    transform: rotateX(20deg) scale(1, -1) translate(3px, 0px);
  }
}
/*-----------------------------
  BREADCRUMB CSS
  -----------------------------*/
.breadcrumb-wrap {
  position: relative;
  padding: 260px 0 120px;
  text-align: center;
  background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(black)), url(../images/bg/hero-1.jpg);
  background-image: linear-gradient(black, black), url(../images/bg/hero-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: saturation;
}
@media only screen and (min-width: 768px) {
  .breadcrumb-wrap {
    padding: 325px 0 170px;
    text-align: left;
  }
}
.breadcrumb-wrap::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.75;
  filter: alpha(opacity=75);
  background-color: var(--color-primary); /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-gradient(linear, right top, left top, from(#d7d2cc), to(#304352));
  background: linear-gradient(to left, #d7d2cc, #304352); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.breadcrumb-wrap .row > * {
  z-index: 1;
}
.breadcrumb-title {
  color: var(--color-white);
  text-transform: uppercase;
}
.breadcrumb-path {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.breadcrumb-path ol {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  text-transform: capitalize;
  color: var(--color-white);
  background: var(--color-primary) border-box;
  padding: 15px 30px;
  margin-bottom: 0;
  border-radius: var(--block-border-radius) var(--block-border-radius) 0 0;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
}
.breadcrumb-path ol li {
  display: inline-block;
}
.breadcrumb-path ol li a {
  position: relative;
  padding-right: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.breadcrumb-path ol li a::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
  background-color: var(--color-white);
}
.breadcrumb-path ol li a:hover {
  color: var(--color-secondary);
}
.breadcrumb-path ol li a:hover::after {
  width: 100%;
  background-color: var(--color-secondary);
}

/*-------------------------------
  TEAM
  --------------------------------*/
.team-wrap {
  position: relative;
  overflow: hidden;
}

.team-box-wrap {
  margin-top: 30px;
}
.team-box-wrap img {
  width: 100%;
}
.team-box-image {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  border-radius: var(--block-border-radius);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.team-box-image:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: var(--block-border-radius);
  background-color: rgba(24, 33, 46, 0.35);
}
.team-box-image img {
  width: 100%;
  border-radius: var(--block-border-radius);
}
.team-box-social {
  position: relative;
}
.team-box-social ul {
  position: absolute;
  bottom: -3rem;
  left: 50%;
  margin-left: -130px;
  width: 260px;
  height: 60px;
  background: var(--color-primary);
  border-top-left-radius: var(--block-border-radius);
  border-top-right-radius: var(--block-border-radius);
  padding-top: 15px;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 2;
}
.team-box-social ul li {
  display: inline-block;
}
.team-box-social ul li a {
  font-size: 22px;
  color: var(--color-white);
  padding: 10px;
}
.team-box-social ul li a:hover {
  color: var(--secondary);
}
.team-box-wrap:hover .team-box-social ul {
  opacity: 1;
  filter: alpha(opacity=100);
  bottom: 0;
}
.team-box-info {
  text-align: center;
}
.team-box-title {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0;
  padding: 35px 0 16px;
  text-transform: uppercase;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .team-box-title {
    font-size: 1.5rem;
  }
}
.team-box-desig {
  color: var(--gray-2);
  font-family: var(--body-font);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.2rem;
}
.small-button {
  padding: 20px 20px; /* Adjust padding as needed */
  font-size: 0.8em; /* Adjust font size as needed */
}