@charset "utf-8";
/*
/*	Copyright (c) 2025 DURDEN
/*	Author: UDP
/*	


01) GRAX BASE
02) GRAX TOPBAR
03) GRAX MOBILE MENU
04) GRAX HERO
05) GRAX ABOUT
06) GRAX PORTFOLIO
07) GRAX TALK
08) GRAX NEWS
09) GRAX CONTACT
10) GRAX COPYRIGHT
11) GRAX CURSOR
12) GRAX PARTICLE EFFECT
13) GRAX GLITCH EFFECT
14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)
15) MOBILE

/*---------------------------------------------------*/
/*	01) GRAX BASE
/*---------------------------------------------*/

#scroll-prev {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  transition: background-color 0.3s ease;
}
#scroll-prev:hover {
  background-color: #222;
}
#scroll-prev img.svg {
  width: 24px;
  height: 24px;
  /* rotate 90°+ keep the smooth transition */
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
#scroll-prev:active img.svg {
  /* rotate + nudge up on press */
  transform: rotate(90deg) translateY(-2px);
}
#scroll-prev svg {
  /* rotate 90° clockwise */
  transform: rotate(-90deg) !important;
  /* ensure it’s centered in its flex container */
  transform-origin: center center;
}
html {
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
}


body {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  line-height: 30px;
  font-weight: 400;
  background-color: #fff;
  color: #000;
}

#page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;                 /* hard stop for sideways scroll */
  position: relative;
  
}

svg {
  fill: currentcolor;
  width: 15px;
  height: 15px;
}
img.svg {
  width: 15px;
  height: 15px;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #6f6f6f;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #6f6f6f;
  opacity: 1;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #6f6f6f;
  opacity: 1;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #6f6f6f;
}
::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #6f6f6f;
}

::placeholder {
  /* Most modern browsers support this now. */
  color: #6f6f6f;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  padding: 0px 40px;
  position: relative;
  clear: both;
}

.thank-you {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #fff; /* or whatever color fits your footer */
  text-align: center;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 0.7;
}

h1 {
  font-size: 45px;
}
h2 {
  line-height: 1.3;
}
h3 {
  font-size: 30px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 20px;
}
h6 {
  font-size: 16px;
}

.grax_tm_all_wrap {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  position: relative;
}
.grax_tm_all_wrap,
.grax_tm_all_wrap * {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}
.grax_tm_section {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
}
/* -------------------------------------------
   mil preloader (integrates with #preloader)
------------------------------------------- */
#preloader.mil-preloader {
  position: fixed;
  z-index: 9999;              /* ✨ editable: raise if header overlays */
  inset: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--mil-pre-bg, #000);
}

#preloader .mil-preloader-animation {
  opacity: 0;
  position: relative;
  height: 100vh;
  color: #fff;
}

#preloader .mil-preloader-animation .mil-pos-abs {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#preloader .mil-preloader-animation .mil-pos-abs p {
  opacity: 0;
  margin-right: 15px;
  font-size: 40px;
}



@media (max-width: 992px) {
  #preloader .mil-preloader-animation .mil-pos-abs {
    flex-direction: column;
  }
  #preloader .mil-preloader-animation .mil-pos-abs p {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

#preloader .mil-reveal-frame {
  position: relative;
  padding: 0 30px;
    width: min(200vw, 1000px);   /*lenght*/
}


#preloader .mil-reveal-box {
  z-index: 9999;
  position: absolute;
  opacity: 0;
  height: 100%;
  background-color: var(--mil-reveal-bg, #fff);
  left: 0; top: 0; width: 0%;
}

#preloader .mil-logo {
  display: inline-block;
  width: clamp(275px, var(--mil-logo-w, 12vw), 500px);  /* ✨ editable: max/min logo size */
}

#preloader.mil-hidden {
  pointer-events: none; /* avoid blocking clicks once faded */
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #preloader .mil-preloader-animation,
  #preloader .mil-preloader-animation .mil-pos-abs p,
  #preloader .mil-reveal-box {
    transition: none !important;
    animation: none !important;
  }
}

/*---------------------------------------------------*/
/*	02) GRAX TOPBAR
/*---------------------------------------------------*/

.grax_tm_topbar {
  left: 0px;
  right: 0px;
  position: fixed;
  z-index: 10;
  padding: 10px 0px;
  transform: translateY(-101%);

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #0b0b0c;
}
.grax_tm_topbar.opened {
  transform: translateY(0);
}
.grax_tm_topbar.animate {
  transform: translateY(0) !important;
  background-color: #fff;
  padding: 25px 0px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/*invertir
.grax_tm_topbar.animate .logo img {
  filter: invert(1) !important;
} */

/* 3) Turn your menu links black */
.grax_tm_topbar.animate .menu ul li a {
  color: #000 !important;
}
.grax_tm_topbar.animate .menu ul li {
  margin: 0px;
  padding: 10px 15px; /* ↑ adds 10px top & bottom */
  border-right: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
}
.grax_tm_topbar .topbar_inner {
  width: 100%;
  height: auto;
  clear: both;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grax_tm_topbar .logo .dark {
  display: none;
}
.grax_tm_topbar.animate .logo .dark {
  display: block;
}
.grax_tm_topbar.animate .logo .light {
  display: block;
}
.grax_tm_topbar .logo img {
  max-width: 100px;
}
.grax_tm_topbar .logo a {
  display: inline-block;
}
.grax_tm_topbar .menu ul {
  margin: 0px;
  list-style-type: none;
}
.grax_tm_topbar .menu ul li {
  margin: 0px;
  padding: 10px 15px; /* ↑ adds 10px top & bottom */
  border-right: 1px solid #fff;
  display: inline-block;
  vertical-align: middle;
}
.grax_tm_topbar .menu ul li:last-child {
  margin-right: 0px;
  border-right: none;
}
.grax_tm_topbar .menu ul li a {
  text-decoration: none;
  color: #fff;
  font-family: "Montserrat";
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 20px;
}

.grax_tm_topbar .menu ul li.current a {
  font-weight: 700; /* bold */
  /* add a tiny shadow to deepen the edges */
}
.grax_tm_topbar .menu ul li a:hover {
  font-weight: 700; /* bold */
}
.grax_tm_topbar.animate .menu ul li a {
  color: #fff;
}

/* defaults (desktop) */
.grax_tm_mobile_menu { display: none; }

/* when JS detects mobile */
.is-mobile .grax_tm_topbar { display: none; }
.is-mobile .grax_tm_mobile_menu { display: block; }

/* open/close dropdown */
.grax_tm_mobile_menu .dropdown { display: none; }
.grax_tm_mobile_menu.opened .dropdown,
.grax_tm_mobile_menu .dropdown.opened { display: block; }

/* prevent background scroll when menu open */
body.no-scroll { overflow: hidden; }


/*---------------------------------------------------*/
/*	03) GRAX MOBILE SYLES
/*---------------------------------------------------*/

.grax_tm_mobile_menu {
  width: 100%;
  height: auto;
  position: relative;
  top: 0px;
  left: 0px;
  display: none;
  z-index: 10;
}
.grax_tm_mobile_menu .topbar_inner {
  width: 100%;
  height: auto;
  float: left;
  clear: both;
  background-color: #000;
  padding: 20px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.grax_tm_mobile_menu .topbar_in {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_trigger .hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: #202020;
  border: 0;
  margin: 0;
  overflow: visible;
}
.my_trigger .hamburger-box {
  width: 30px;
  height: 18px;
  display: inline-block;
  position: relative;
}
.my_trigger .hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.my_trigger .hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 30px;
  height: 2px;
  background-color: #333333;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.my_trigger .hamburger-inner::before,
.my_trigger .hamburger-inner::after {
  content: "";
  display: block;
}
.my_trigger .hamburger-inner::before {
  top: -8px;
}
.my_trigger .hamburger-inner::after {
  bottom: -10px;
}
.my_trigger .hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r .hamburger-inner::after {
  top: -16px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.my_trigger .hamburger--collapse-r .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
    transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
    transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger {
  padding: 0px;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.my_trigger .hamburger-box {
  display: block;
}
.my_trigger .hamburger .hamburger-inner::before,
.my_trigger .hamburger .hamburger-inner::after,
.my_trigger .hamburger .hamburger-inner {
  background-color: #fff;
  width: 30px;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_mobile_menu .dropdown {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  background-color: #000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  display: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  padding: 25px 0px;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul {
  margin: 0px;
  list-style-type: none;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li {
  margin: 0px;
  float: left;
  width: 100%;
}
.grax_tm_mobile_menu .dropdown .dropdown_inner ul li a {
  text-decoration: none;
  color: #fff;
  display: inline-block;
  padding: 4px 0px;
  font-family: "Montserrat";
  font-size:15px;
  font-weight: 800;
}
.grax_tm_mobile_menu .logo img {
  max-width: 70px;
}

/*---------------------------------------------------*/
/*	04) GRAX HERO
/*---------------------------------------------------*/

.grax_tm_hero {
  width: 100%;
  height: 100vh;
  clear: both;
  float: left;
  position: relative;
  clip-path: none;
  overflow: visible;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_hero.creative {
  clip-path: none;
}
.grax_tm_hero.creative.shape {
  clip-path: none;
}
.grax_tm_hero.shape {
  clip-path: polygon(0 0, 100% 0, 100% 83%, 25% 100%, 0 83%);
}
.grax_tm_hero .bg {
  display: none;
  background-color: #fff;
}
.grax_tm_hero .bg .image {
  display: none;
  background-color: #fff;
}
.grax_tm_hero .bg .overlay {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
}
.grax_tm_hero .content {
  display: flex;
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
  z-index: 2;
}
/* 1. Make the container a flex row and center items vertically */
.grax_tm_hero .container {
  display: flex;
  align-items: center; /* vertical centering */
  gap: 100px;
}

/* 2. Reset the old top:50%/translateY centering on .details,
      and add a right margin for spacing */
.grax_tm_hero .details {
  top: auto;
  transform: none;
  margin: auto;
  flex: 0 0 auto;
}
/* at the bottom of style.css */

.grax_tm_hero .lorem {
  flex: 1 1 auto;
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 11px;
}
.grax_tm_hero .lorem strong {
  display: inline-block !important;
  font-weight: 800;
  color: #fff;
}

.grax_tm_hero .stuff {
  font-size: 20px;
  font-weight: 100;
  flex: auto;
  white-space: pre-line;
}

.grax_tm_hero .name {
  font-size: 80px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 11px;
}

/* ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* 1. Keep it in place but invisible & unclickable by default */
.hero-btn {
  position: absolute;
  bottom: 100px;
  left: 53%;
  transform: translateX(-50%);
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background-color: #808080;
  border-radius: 4px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.2s ease, background-color 0.2s ease;
  z-index: 20;
}

/* 2. When we add .visible, fade it in and re-enable clicks */
.hero-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.hero-btn.visible:hover {
  background-color: #222;
  transform: translate(-50%, -3px);
}

.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character {
  top: 15px;
}
.grax_tm_hero .details[data-animation="toTop"] .fn_animation .character.opened {
  top: 0px;
}

.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character {
  right: 15px;
}
.grax_tm_hero .details[data-animation="toRight"] .fn_animation .character.opened {
  right: 0px;
}

.grax_tm_hero .details[data-animation="scale"] .fn_animation .character {
  opacity: 1;
  visibility: visible;
  transform: scale(0);
}
.grax_tm_hero .details[data-animation="scale"] .fn_animation .character.opened {
  transform: scale(1);
}

.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character {
  transform: rotate(30deg);
}
.grax_tm_hero .details[data-animation="rotate"] .fn_animation .character.opened {
  transform: rotate(0);
}

.fn_animation {
  opacity: 0;
}
.fn_animation.ready {
  opacity: 1;
}
.fn_animation .character {
  display: inline-block;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.fn_animation .character.opened {
  opacity: 1;
  visibility: visible;
}
.fn_animation.job .character {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.grax_tm_hero .job {
  color: #808080;
  font-family: "Orbitron";
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
}
.grax_tm_down {
  position: absolute;
  z-index: 7;
  bottom: 5%;
  display: none;
}
.grax_tm_down.opened {
  display: block;
}
.grax_tm_down[data-position="left"] {
  left: 0px;
}
.grax_tm_down[data-position="right"] {
  right: 0px;
}
.grax_tm_down[data-position="center"] {
  left: 50%;
  transform: translateX(-50%);
}
.grax_tm_down .line_wrapper {
  position: absolute;
  width: 1px;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0px auto;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  visibility: visible;

  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}
.grax_tm_down .line_wrapper {
  width: 1px;
  height: 50px;
  background: none;
  display: block;
  display: none;
}
.grax_tm_down .line_wrapper:before {
  content: "";
  background-color: #000;
  width: 1px;
  height: 50%;
  display: block;
  top: 0;

  -webkit-animation: scroll-down 2s ease-in-out infinite;
  -ms-animation: scroll-down 2s ease-in-out infinite;
  animation: scroll-down 2s ease-in-out infinite;
}

@-webkit-keyframes scroll-down {
  0% {
    height: 0;
  }
  50% {
    height: 100%;
  }
  70% {
    height: 100%;
    transform: scaleY(0.5);
    transform-origin: bottom;
  }
  100% {
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
.grax_tm_down[data-skin="light"] .line_wrapper:before {
  background-color: #fff;
  display: none;
}



/*---------------------------------------------------------*/
/*      CELULAR */
@media (max-width: 991px) {
.grax_tm_hero .details {
    transform: translateY(-10vh);  /* tweak: -3vh .. -10vh */
    will-change: transform;
    transition: transform .25s ease;
  }
}

/*---------------------------------------------------*/
/*	05) GRAX ABOUT
/*---------------------------------------------------*/

.grax_tm_about {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  background-color: #fff;
  margin-bottom: 150px;
  padding-top: 150px;
}
.grax_tm_about .about_inner {
  width: 100%;
  height: auto;
  clear: both;
  display: flex;
  align-items: center;
}
.grax_tm_about .left {
  width: 40%;
  padding-right: 50px;
}
.grax_tm_about .left .image {
  position: relative;
}
.grax_tm_about .left .image img {
  opacity: 0;
  min-width: 100%;
}
.grax_tm_about .left .main {
  position: absolute !important;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 5px;
  box-shadow: 0px 0px 40px rgb(0 0 0 / 20%);
}

.grax_tm_about .right {
  width: 60%;
  padding-left: 50px;
}
.grax_tm_about .right .text {
  width: 100%;
  float: left;
  padding-top: 27px;
  padding-bottom: 28px;
}
.grax_tm_about .right .list {
  width: 100%;
  float: left;
  margin-bottom: 27px;
}
.grax_tm_about .right .list ul {
  margin: 0px 0px 0px -20px;
  list-style-type: none;
}
.grax_tm_about .right .list ul li {
  margin: 0px 0px 13px 0px;
  float: left;
  width: 50%;
  position: relative;
  padding-left: 20px;
}
.grax_tm_about .right .list ul li .list_inner {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  position: relative;
  padding-left: 30px;
}
.grax_tm_about .right .list ul li span {
  font-family: "Montserrat";
  font-weight: 600;
  color: #000;
  font-style: italic;
}
.grax_tm_about .right .list ul li .svg {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  margin-top: -1px;
}
.grax_tm_button {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  font-size: 1rem;
  font-family: "Montserrat";
}
.grax_tm_button a {
  text-decoration: none;
  color: #fff;
  display: inline-block;
  background-color: #808080;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 40px;
  border-radius: 5px;
  text-transform: uppercase;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_button a:hover {
  background-color: #222;
  color: #fff;
}
.grax_tm_progress_part {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  padding: 135px 0px 140px 0px;
}
.grax_tm_progress_part .part_inner {
  width: 100%;
  height: auto;
  clear: both;
  display: flex;
}
.grax_tm_progress_part .left {
  width: 50%;
  padding-right: 50px;
}
.grax_tm_progress_part .left h3 {
  font-weight: 600;
  margin-bottom: 27px;
}
.grax_tm_progress_part .right {
  width: 50%;
  padding-left: 50px;
}
.kioto_progress {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
}
.progress_inner {
  width: 100%;
  margin-bottom: 27px;
}
.progress_inner:last-child {
  margin-bottom: 0px;
}
.progress_inner > span {
  margin: 0px 0px 7px 0px;
  width: 100%;
  display: block;
  text-align: justify;
  font-family: "Montserrat";
  font-weight: 500;
  color: #000;
}
.progress_inner span.number {
  float: right;
}
.progress_inner .background {
  background: transparent;
  width: 100%;
  min-width: 100%;
  position: relative;
  height: 5px;
  border-radius: 5px;
}
.progress_inner .background .bar_in {
  height: 100%;
  background: #fff;
  width: 0px;
  overflow: hidden;
  border-radius: 10px;
}
.progress_inner .background .bar {
  width: 0px;
  height: 100%;
}
.progress_inner .background .bar.open {
  -webkit-animation: wow 2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Safari 4+ */
  -moz-animation: wow 2s cubic-bezier(0.165, 0.84, 0.44, 1); /* Fx 5+ */
  animation: wow 2s cubic-bezier(0.165, 0.84, 0.44, 1); /* IE 10+ */
  width: 100%;
}

@-webkit-keyframes wow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes wow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes wow {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}


/* Mobile: lock the About section to the viewport, no vertical swipe */
@media (max-width: 991px) {
  .grax_tm_about {
    position: relative;
    height: auto;           /* stable full height */

    margin-bottom: 0;          /* avoid extra gap after a locked section */
    background-color: #fff;
   
  }

  /* Use the available height and center vertically */
  .grax_tm_about .about_inner {
    height: 100%;
    display: flex;
    flex-direction: column;    /* stack image over text */
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
   
  }

  /* Columns become full-width */
  .grax_tm_about .left,
  .grax_tm_about .right {
    width: 100%;
    padding: 0;                /* remove side paddings on mobile */
  }

  /* Keep the image nicely sized and visible */
  .grax_tm_about .left .image {
    width: auto;
    height: auto;              /* gives the absolutely-positioned .main a box */
    margin: 0 auto;
  }
  .grax_tm_about .left .main {
    border-radius: 8px;
  }

  /* Text block */
  .grax_tm_about .right .text,
  .grax_tm_about .right .list {
    text-align: center;        /* optional: center text on mobile */
  }
  .grax_tm_about .right .list ul {
    margin: 0;                 /* reset negative margin for stacked layout */
  }
  .grax_tm_about .right .list ul li {
    width: 100%;               /* list items full width when stacked */
    margin: 0 0 10px 0;
    padding-left: 24px;
  }

  /* Progress subsection if it appears inside/after About—keep it compact */
  .grax_tm_progress_part {
    padding: 20px 0 0 0;
  }
  .grax_tm_progress_part .part_inner {
    flex-direction: column;
    gap: 16px;
  }
  .grax_tm_progress_part .left,
  .grax_tm_progress_part .right {
    width: 100%;
    padding: 0;
  }
}


/*---------------------------------------------------*/
/*	06) GRAX PORTFOLIO
/*---------------------------------------------------*/

/* === Unified card grid for both sections === */

/* Flex row (match Success Row) */
.portfolio_services_wrapper .gallery_zoom{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin: 0;          /* kill old UL negative margins */
  padding: 0;
  list-style: none;
}

/* Three-up cards */
.portfolio_services_wrapper .gallery_zoom li {
  flex: 0 0 calc((100% - 2 * 30px) / 3);
  max-width: calc((100% - 2 * 30px) / 3);   /* consistent with flex-basis */
  float: none;                               /* neutralize legacy float */
  padding-left: 0;                           /* neutralize legacy padding */
}

/* Card box fills parent */
.portfolio_services_wrapper .gallery_zoom li .list_inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Center caption block like Success Row */
.portfolio_services_wrapper .gallery_zoom li .details{
  left: 0;
  right: 0;
  transform: none;
  width: auto;
  text-align: center;
  padding-top: 10px;
}

/* Text rules (span + h3) */
.portfolio_services_wrapper .gallery_zoom li .details span,
.portfolio_services_wrapper .gallery_zoom li .details h3 {
  max-width: 100%;
  padding-top: 5px;
  margin-top: 10px;
  line-height: 1.35;
 
}

/* (Optional) Clamp long blurbs equally in both */
.portfolio_services_wrapper .gallery_zoom li .details span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*CASOS ÉXITO*/
.success-row {
  display: flex;
  gap: 30px; /* Adjust spacing */
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px; /* Optional, spacing from next row */
}
.success-row li {
  flex: 0 0 calc((100% - 2 * 30px) / 3);
  max-width: calc((100% - 2 * 50px) / 3);
}

/* optional: ensure the inner “list_inner” fills its parent */
.success-row li .list_inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

}

/* center the whole details block */
.success-row li .details {

  transform: none;
  /* 3) give it a sensible width so the text can wrap and center */
  width: auto; /* tweak as needed (e.g. 70%, 60%, or a fixed px) */
  /* 4) center everything inside */
  text-align: center;
  padding-top: 0px;
}

.success-row li .details span,
.success-row li .details h3 {
  max-width: 90%;    /* was 50% */
  padding-top: 15px;     /* was 40px */
  margin-top: 0px;    /* softer spacing than 40px */
  line-height: 1.5;
 
}
.success-row .details span {
  font-family: "Montserrat";
   font-size: 25px;
}

.success-row .details h3 {
   font-size: 18px;

}

/* (Optional safety net) clamp long blurbs to avoid overflow */
.success-row li .details span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/*-------------------------------------------------------------------------*/
/* base titles stay black */
.grax_tm_title_holder {
  font-weight: 800;
  color: #fff;
  padding-top: 50px;
}

/* override only in the “Casos de éxito” section */
#portfolio .grax_tm_title_holder {
  padding-top: 30px;
  color: #000;
  font-weight: 800;
}
#about .grax_tm_title_holder {
  padding-top: 30px;
  color: #000;
  font-weight: 800;
}

#contact .grax_tm_title_holder {
  padding-top: 10px;
  color: #000;
  font-weight: 800;
}
#news .grax_tm_title_holder {
  padding-top: 10px;
  color: #000;
  font-weight: 800;
}

#portfolio .grax_tm_portfolio li .details span,
#portfolio .grax_tm_portfolio li .details h3 {
   /* 1) shift to 50% of parent width */
  left: 0;
  right:0;
  /* 2) pull it back by half of its own width */
  transform: none;
  /* 3) give it a sensible width so the text can wrap and center */
  width: auto; /* tweak as needed (e.g. 70%, 60%, or a fixed px) */
  /* 4) center everything inside */
  text-align: center;
  padding-top: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.subtitle-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  font-family: "Montserrat";
  font-weight: 600;
  color: #000;
  font-style: italic;
}
.subtitle-link:hover {
  text-decoration: underline;
}

.grax_tm_portfolio {
   width: 100%;
  height: auto;
  clear: both;
  float: left;
  padding: 100px 0px 100px 0px;
  background-color: transparent;
}
.grax_tm_portfolio .portfolio_list {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  padding-top: 100px;
}

.mision-text {
  font-size: 20px;
  font-weight: 100;
  padding: 1rem 0;
  text-align: justify;
}
.grax_tm_portfolio ul {
  margin: 0px 0px 0px -50px;
  list-style-type: none;
}
.grax_tm_portfolio ul li {
  margin: 0px 0px 50px 0px;
  float: left;
  width: 33.3333%;
  padding-left: 50px;
}
.grax_tm_portfolio ul li .list_inner {
 width: 100%;
  height: auto;
  clear: both;
  float: left;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.grax_tm_portfolio .image {
  position: relative;
}
.grax_tm_portfolio .image img {
  min-width: 100%;
  opacity: 0;
}
.grax_tm_portfolio .image .main {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
}
.grax_tm_portfolio .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #f9f9f9;
  border-radius: 5px;

  /* hide it */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: all 0.3s ease;
}
.grax_tm_portfolio ul li .list_inner:hover .overlay {
  opacity: 0.9;
  visibility: visible;
}
.grax_tm_portfolio .details {
  position: absolute;
  bottom: 20px;
  left: 30px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_portfolio ul li .list_inner:hover .details {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}

/* center “Casos de éxito” captions under each card */
#portfolio .grax_tm_portfolio .details {
  /* 1) shift to 50% of parent width */
  left: 50%;
  /* 2) pull it back by half of its own width */
  transform: translateX(-50%);
  /* 3) give it a sensible width so the text can wrap and center */
  width: 80%; /* tweak as needed (e.g. 70%, 60%, or a fixed px) */
  /* 4) center everything inside */
  text-align: center;
}

/* MOBILE ONLY: One-by-One Swipe Carousel */
@media (max-width: 991px) {
  
  /* 1. Container setup: remove padding that causes shrinking */
  #portfolio .portfolio_services_wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* 2. The Swipe Row */
  #portfolio .gallery_zoom {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* Smooth swipe on iOS */
    scroll-snap-type: x mandatory;    /* This forces the "one at a time" snap */
    gap: 0;                          /* Gap is 0 because we use width: 100% */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
  }

  /* Hide scrollbar */
  #portfolio .gallery_zoom::-webkit-scrollbar {
    display: none;
  }

  /* 3. Each card takes full viewport width */
  #portfolio .gallery_zoom li {
    flex: 0 0 100% !important;        /* Exactly one slide per view */
    width: 100% !important;
    max-width: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 0 25px !important;       /* Internal spacing so cards don't touch screen edges */
    scroll-snap-align: center;        /* Snaps to the middle of the screen */
    box-sizing: border-box;
  }

  /* 4. Visual Card Styles */
  #portfolio .list_inner {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    
  }

  /* Ensure the image fills its container properly */
  #portfolio .list_inner .image {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3; 
  }

  /* 5. Details Section (Fixed visibility) */
  #portfolio .details {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    justify-content: center;
    text-align: center;
    background: #fff;
  }

  #portfolio .details h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    color: #000;
  }

  #portfolio .details span {
    font-size: 15px !important;
    line-height: 1.6;
    color: #666;
    display: block;
  }

  /* Remove any overlay effects that might block the text */
  #portfolio .overlay {
    display: none !important;
  }
}



/* sirve*/
.grax_tm_portfolio .details span {
  font-family: "Montserrat";
  font-size:15px;
}
.grax_tm_portfolio .details h3 {
  font-size: 17px;
  font-weight: 600;
}
/*sirve*/

.grax_tm_full_link {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 4;
}
.overlay_effect {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 3;
  border-radius: 5px;
}
.overlay_effect:after {
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #f9f9f9;
  z-index: 1;
}
.overlay_effect:before {
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.my_waypoint.load .overlay_effect:before {
  z-index: 2;
  background-color: #000;
  animation: anim 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.my_waypoint.load .overlay_effect:after {
  animation: anim2 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
/* 2-column layout for the portfolio section */
.portfolio_two_columns {
  display: flex;
  gap: 1rem;
  align-items: center; /* centers the .text_col block vertically relative to .images_col */
  flex-wrap: wrap;
}

.images_col {
  flex: 2;
}

.text_col {
  flex: 1;
  text-align: justify; /* optional: center the text inside its column */
}

.text_col p {
  margin: 0;
  line-height: 1.6;
}

/* Each column takes up a proportion */
.portfolio_two_columns .images_col {
  flex: 2; /* images get larger share */
}

.portfolio_two_columns .text_col {
  flex: 1; /* paragraph gets smaller share */
  font-size: 20px;
  margin-top: 30px;
}

/* Optional: ensure your paragraph looks nice */
.portfolio_two_columns .text_col p {
  line-height: 1.6;
  color: #444;
}

/* Make the image grid responsive inside its column */
.images_col .gallery_zoom {
  gap: 1rem;
}
.images_col .gallery_zoom li .image img {
  width: 100%;
  display: block;
  height: auto;
}
/* make the 3 casos-grid items sit in a row and shrink */

/* make our portfolio list a flex row */
.grax_tm_section#portfolio .gallery_zoom {
  display: flex; /* switch from floats to flexbox */
  flex-wrap: nowrap; /* keep all items on one line */
  justify-content: space-between; /* spread them evenly across the width */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* force each item to be exactly one-third of the container */
.grax_tm_section#portfolio .gallery_zoom li {
  flex: 0 0 calc(33.3333% - 1rem); /* three blocks minus your desired gap */
  margin: 0;
  padding: 0.5rem; /* optional inner gutter */
  box-sizing: border-box; /* include padding in the width */
}

/* ensure the inner “list_inner” still fills its parent */
.grax_tm_section#portfolio .gallery_zoom li .list_inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* if you need a consistent gap between cards, you can also do: */
.grax_tm_section#portfolio .gallery_zoom {
  gap: 1rem; /* adds uniform spacing between the three blocks */
}
/* Multiline names in .details */
.grax_tm_portfolio .details h3,
.portfolio_services_wrapper .details h3,
.grax_tm_about .details h3 {
  /* space out the two lines nicely */
  line-height: 1.3;
  /* if you need a little vertical padding between the spans, uncomment below: */
  /* padding-top: 0.2em; */
}

.portfolio_services_wrapper {
  display: block;
  gap: 1rem;
  align-items: center; /* centers the .text_col block vertically relative to .images_col */
  flex-wrap: wrap;
}
/* wrap the list in a flex container */
.portfolio_services_wrapper .gallery_zoom {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* space between items */
  justify-content: center; /* center each row’s items */
  margin-top: 100px;
  padding: 0;
  list-style: none;
}

/* make every card exactly one-third of the available width (minus gaps) */
.portfolio_services_wrapper .gallery_zoom li {
  flex: 0 0 calc((100% - 2 * 30px) / 3);
  max-width: calc((80% - 2 * 30px) / 3);
}

/* optional: ensure the inner “list_inner” fills its parent */
.portfolio_services_wrapper .gallery_zoom li .list_inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* center the whole details block */
.portfolio_services_wrapper .gallery_zoom li .details {
  /* 1) shift to 50% of parent width */
  left: 50%;
  /* 2) pull it back by half of its own width */
  transform: translateX(-50%);
  /* 3) give it a sensible width so the text can wrap and center */
  width: 80%; /* tweak as needed (e.g. 70%, 60%, or a fixed px) */
  /* 4) center everything inside */
  text-align: center;
}

/* ensure the span and h2 each sit on their own line and auto-center */
.portfolio_services_wrapper .gallery_zoom li .details span,
.portfolio_services_wrapper .gallery_zoom li .details h2 {
  margin: 0; /* bottom margin for spacing */
  max-width: 100%; /* optional, so long text wraps nicely */
}

@keyframes anim {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes anim2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* MOBILE ONLY: #about — text first, images as a swipe carousel */
@media (max-width: 991px) {
  /* reorder columns */
  #about .portfolio_two_columns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  #about .portfolio_two_columns .text_col { order: 1; }
  #about .portfolio_two_columns .images_col { order: 2; }

  /* neutralize legacy UL/LI floats & margins for this section */
  #about .grax_tm_portfolio ul { margin: 0; }
  #about .grax_tm_portfolio ul li {
    float: none;
    width: auto;
    padding-left: 0;
    margin: 0;
  }

  /* carousel: swipeable row */
  #about .images_col .portfolio_list { overflow: hidden; }
  #about .images_col .gallery_zoom {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 12px;
    list-style: none;
  }
  #about .images_col .gallery_zoom::-webkit-scrollbar { display: none; }

  /* one big card per “slide” (tweak 80% -> 70%/90% if you like) */
  #about .images_col .gallery_zoom li {
    flex: 0 0 80%;
    scroll-snap-align: center;
    box-sizing: border-box;
  }

  /* cards & captions */
  #about .images_col .gallery_zoom li .list_inner { border-radius: 8px; overflow: hidden; }
  #about .grax_tm_portfolio .details {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    text-align: center;
    padding-top: 10px;
  }
  #about .grax_tm_portfolio .overlay { display: none; } /* optional on touch */
}





/*---------------------------------------------------*/
/*	07) GRAX TALK
/*---------------------------------------------------*/

.grax_tm_talk {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  background-color: #000;
}

.grax_tm_talk .talk_inner {
  width: 100%;
  height: auto;
  clear: both;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}
.grax_tm_talk .text {
  padding-right: 20px;
}
.grax_tm_talk .text h3 {
  font-weight: 600;
  color: #fff;
}
.grax_tm_talk .text h3 span {
  position: relative;
}
.grax_tm_talk .text h3 span:before {
  position: absolute;
  content: "";
  width: 20px;
  height: 4px;
  background-color: #fff;
  bottom: 1px;
  left: 100%;
  opacity: 1;
  animation: myAnim 0.9s infinite;
  -moz-animation: myAnim 0.9s infinite;
  -webkit-animation: myAnim 0.9s infinite;
}
@keyframes myAnim {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes myAnim {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes myAnim {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.grax_tm_talk .text p {
  font-family: "Montserrat";
}

.grax_tm_talk .button a {
  color: #fff;
  text-decoration: none;
  font-family: "Montserrat";
  font-weight: 600;
  position: relative;
  display: inline-block;
}

.grax_tm_talk .button a:before {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
}
.grax_tm_talk .button a:after {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
  background: currentColor;
}
.grax_tm_talk .button a:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}

/*---------------------------------------------------*/
/*	08) GRAX NEWS
/*---------------------------------------------------*/
/* make our portfolio list a flex row */
/* hide everything outside the visible “window” */
.grax_tm_section#news .news_list-wrapper {
  overflow: hidden;
}

/* flex container is as wide as its contents */
.grax_tm_section#news .news_list {
  display: flex;
  flex-wrap: nowrap;
  /* no width limit here—the wrapper masks the overflow */
}

/* each card takes exactly 1/3 of the wrapper’s width */
.grax_tm_section#news .news_list li {
  flex: 0 0 calc(33.3333% - 1rem);
  margin: 0 0.5rem; /* keep your gutter */
  box-sizing: border-box;
}

/* optional: shrink inner images a bit */
.grax_tm_section#news .news_list li img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.grax_tm_section#news {
  position: relative;
}

.grax_tm_section#news .news-prev,
.grax_tm_section#news .news-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
  z-index: 10;
}

.grax_tm_section#news .news-prev {
  left: 8px;
}
.grax_tm_section#news .news-next {
  right: 8px;
}

.grax_tm_section#news .news-prev:hover,
.grax_tm_section#news .news-next:hover {
  opacity: 1;
}

/* Shrink images inside cards if needed */
.grax_tm_section#news .news_list li img {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.grax_tm_news {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  background-color: #f9f9f9;
  padding: 140px 0px 90px 0px;
}
.grax_tm_news .news_list {
  padding-top: 40px;
}
.grax_tm_news .news_list ul {
  margin: 0px 0px 0px -50px;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
.grax_tm_news .news_list ul li {
  margin: 0px 0px 50px 0px;
  float: left;
  width: 33.3333%;
  padding-left: 50px;
}
.grax_tm_news .news_list ul li .list_inner {
  width: 100%;
  height: 100%;
  clear: both;
  float: left;
  position: relative;
}
.grax_tm_news .news_list ul li .image {
  position: relative;
  overflow: hidden;
}
.grax_tm_news .news_list ul li .image img {
  min-width: 100%;
  opacity: 0;
}
.grax_tm_news .news_list ul li .image .main {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: scale(1) translateZ(0);
  border-radius: 5px;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_news .news_list ul li .list_inner .image:hover .main {
  transform: scale(1.1) rotate(3deg);
}
.grax_tm_news .news_list ul li .details {
  width: 100%;
  float: left;
  padding-right: 15px;
  padding-top: 32px;
}
.grax_tm_news .news_list ul li .details .title {
  margin-bottom: 10px;
}
.grax_tm_news .news_list ul li .details .title a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  display: inline-block;
  line-height: 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_news .news_list ul li .details .title a:hover {
  color: #fff;
}
.grax_tm_news .news_list ul li .details .date {
  text-transform: uppercase;
  font-family: "Montserrat";
  font-size: 12px;
  color: #767676;
  font-style: italic;
}
.grax_tm_news .news_list ul li .details .date a {
  text-decoration: none;
  color: #767676;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_news .news_list ul li .details .date a:hover {
  color: #fff;
}
.grax_tm_news .news_list ul li .details .date span {
  position: relative;
  margin-left: 11px;
}
.grax_tm_news .news_list ul li .details .date span:before {
  position: absolute;
  content: "";
  margin-top: 1px;
  top: 50%;
  transform: translateY(-50%) rotate(15deg);
  right: 100%;
  background-color: #939393;
  width: 1px;
  height: 9px;
  margin-right: 7px;
}
.grax_tm_news .description {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: -11;
  display: none;
}
body.modal {
  overflow-y: hidden;
}
.grax_tm_modalbox_news {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 100vh;
  z-index: 15;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.grax_tm_modalbox_news.opened {
  opacity: 1;
  visibility: visible;
}
.grax_tm_modalbox_news .container {
  height: 100vh;
}
.grax_tm_modalbox_news .box_inner {
  position: absolute;
  top: 70px;
  bottom: 70px;
  width: 1200px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  margin-top: -20px;
  transition: all 0.3s ease;
  transition-delay: 0.3s;
}
.grax_tm_modalbox_news.opened .box_inner {
  opacity: 1;
  visibility: visible;
  margin-top: 0px;
}
.grax_tm_modalbox_news .close {
  position: fixed;
  left: 100%;
  top: 0px;
  margin-left: 40px;
  z-index: 111111;
}
.grax_tm_modalbox_news .close a {
  text-decoration: none;
  color: #fff;
}
.grax_tm_modalbox_news .close .svg {
  width: 50px;
  height: 50px;
}
.grax_tm_modalbox_news .description_wrap {
  position: relative;
  width: 85%;
  height: 100%;
  float: left;
  overflow: hidden;
  padding: 50px;
}
.grax_tm_modalbox_news .details {
  width: 100%;
  float: left;
  margin-bottom: 30px;
}
.grax_tm_modalbox_news .description {
  width: 100%;
  float: left;
}
.grax_tm_modalbox_news .description p {
  margin-bottom: 15px;
}
.grax_tm_modalbox_news .description blockquote {
  font-style: italic;
  color: #000;
  border-left: 2px solid #fff;
  padding-left: 20px;
  margin-bottom: 15px;
}
.grax_tm_modalbox_news .description_wrap .image {
  position: relative;
  max-height: 450px;
  z-index: -1;
  margin-bottom: 40px;
}
.grax_tm_modalbox_news .description_wrap .image img {
  min-width: 100%;
}
.grax_tm_modalbox_news .description_wrap .image .main {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 5px;
}
.grax_tm_modalbox_news .details .title {
  font-weight: 600;
  margin-bottom: 5px;
}
.grax_tm_modalbox_news .date {
  text-transform: uppercase;
  font-family: "Montserrat";
  font-size: 12px;
  color: #767676;
  font-style: italic;
}
.grax_tm_modalbox_news .date a {
  text-decoration: none;
  color: #767676;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_modalbox_news .date a:hover {
  color: #fff;
}
.grax_tm_modalbox_news .date span {
  position: relative;
  margin-left: 11px;
}
.grax_tm_modalbox_news .date span:before {
  position: absolute;
  content: "";
  margin-top: 0px;
  top: 50%;
  transform: translateY(-50%) rotate(15deg);
  right: 100%;
  background-color: #939393;
  width: 1px;
  height: 9px;
  margin-right: 7px;
}
.grax_tm_modalbox_news .share {
  width: 100%;
  height: auto;
  clear: both;
  display: flex;
  align-items: center;
}
.grax_tm_modalbox_news .share span {
  font-family: "Montserrat";
  color: #000;
  font-weight: 600;
  display: inline-block;
  padding-right: 20px;
}
.grax_tm_modalbox_news .share ul {
  margin: 0px;
  list-style-type: none;
}

.grax_tm_modalbox_news .share ul li {
  margin: 0px 10px 0px 0px;
  display: inline-block;
}
.grax_tm_modalbox_news .share ul li a {
  text-decoration: none;
  color: #000;
}

/*---------------------------------------------------*/
/*	09) GRAX CONTACT
/*---------------------------------------------------*/

/* make everything in the contact form use Montserrat */
.grax_tm_contact .right,
.grax_tm_contact .right input,
.grax_tm_contact .right textarea,
.grax_tm_contact .right .grax_tm_button a {
  font-family: "Montserrat", sans-serif;
}

.grax_tm_contact {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  position: relative;
  margin-bottom: 110px;
  padding-top: 140px;
}
.grax_tm_contact .contact_inner {
  width: 100%;
  height: auto;
  clear: both;
  display: flex;
  padding-top: 77px;
}
.grax_tm_contact .left {
  width: 50%;
}
.grax_tm_contact .left .text {
  width: 100%;
  float: left;
  margin-bottom: 40px;
}
.grax_tm_contact .info_list {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
}
.grax_tm_contact .info_list ul {
  margin: 0px;
  list-style-type: none;
}
.grax_tm_contact .info_list li {
  margin: 0px 0px 18px 0px;
  float: left;
  width: 100%;
  position: relative;
}
.grax_tm_contact .info_list ul li .list_inner {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  position: relative;
  padding-left: 27px;
}
.grax_tm_contact .info_list ul li span.first {
  min-width: 100px;
  display: inline-block;
}
.grax_tm_contact .info_list ul li span.second {
  font-weight: 400 !important;
  color: inherit !important;
}
.grax_tm_contact .info_list ul li span {
  font-family: "Montserrat";
  font-weight: 600;
  color: #000;
}
.grax_tm_contact .info_list ul li a {
  text-decoration: none;
  color: inherit !important;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}
.grax_tm_contact .info_list ul li a:hover {
  color: #000;
}
.grax_tm_contact .info_list ul li a:after {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  left: auto;
  right: 0;
  bottom: 0;
  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
  background: currentColor;
}
.grax_tm_contact .info_list ul li a:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}
.grax_tm_contact .info_list ul li a:hover {
  color: #000 !important;
}
.grax_tm_contact .info_list ul li .svg {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  margin-top: -1px;
}
.grax_tm_contact .right {
  width: 50%;
  padding-left: 50px;
}
.grax_tm_contact .fields {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
}
.grax_tm_contact .fields .first {
  width: 100%;
  float: left;
}
.grax_tm_contact .fields ul {
  margin: 0px;
  list-style-type: none;
}
.grax_tm_contact .fields ul li {
  width: 100%;
  margin: 0px 0px 30px 0px;
  float: left;
}
.grax_tm_contact .fields ul li input {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 5px;
}
.grax_tm_contact .fields ul li input:focus {
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.grax_tm_contact .fields .last textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 120px;
  resize: none;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.grax_tm_contact .fields .last textarea:focus {
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.grax_tm_contact .empty_notice {
  color: #f52225;
  margin-bottom: 7px;
  display: none;
  text-align: left;
  font-weight: 500;
}
.grax_tm_contact .contact_error {
  color: #f52225;
  text-align: left;
  font-weight: 500;
}
.grax_tm_contact .returnmessage {
  color: #3a00ff;
  margin-bottom: 7px;
  text-align: left;
  font-weight: 500;
}
.grax_tm_contact .grax_tm_button a {
  display: block;
  text-align: center;
}

/*---------------------------------------------------*/
/*	10) GRAX COPYRIGHT
/*---------------------------------------------------*/

.grax_tm_copyright {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  background-color: #000;
  padding: 130px 0px 100px 0px;
  position: relative;
  
}
.grax_tm_copyright .copyright_inner {
  width: 100%;
  height: auto;
  clear: both;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grax_tm_copyright .logo img {
  max-width: 100px;
}
.grax_tm_copyright .social ul {
  margin: 0px;
  list-style-type: none;
}
.grax_tm_copyright .social ul li {
  margin: 0px 25px 0px 0px;
  display: inline-block;
}
.grax_tm_copyright .social ul li:last {
  margin-right: 0px;
}
.grax_tm_copyright .social ul li a {
  text-decoration: none;
  color: #fff;
}
.grax_tm_copyright .social .svg {
  width: 17px;
  height: 17px;
}
.grax_tm_copyright .copy p {
  text-transform: uppercase;
  color: #fff;
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 14px;
}
.grax_tm_copyright .copy a {
  text-decoration: none;
  color: #fff;
}
.my_wave {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
}
.my_wave svg {
  overflow: hidden;
  vertical-align: middle;
  height: 180px;
  width: 100%;
  fill: #fff;
}



/*---------------------------------------------------*/
/*	11) GRAX CURSOR
/*---------------------------------------------------*/

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}
.cursor-inner {
  margin-left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  z-index: 50;
  background-color: #000;
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.cursor-inner.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  background-color: #000;
  opacity: 0.3;
}
.cursor-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 50;
  opacity: 0.5;
  -webkit-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}
.cursor-outer.cursor-hover {
  opacity: 0;
}
.grax_tm_all_wrap[data-magic-cursor="hide"] .mouse-cursor {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: -1111;
}

/*---------------------------------------------------*/
/*	12) GRAX PARTICLE EFFECT
/*---------------------------------------------------*/

.grax_tm_hero .particle_wrapper {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
#particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}

/*---------------------------------------------------*/
/*	13) GRAX GLITCH EFFECT
/*---------------------------------------------------*/

.grax_tm_hero .glitch_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
}
.glitch {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("..//img/slider/2.jpg");
  background-size: cover;
  -webkit-background-size: cover;
  background-position: center;
  z-index: -1 !important;
  opacity: 1;
  transform: scale(1);
}
.glitch:before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.grax_tm_hero .ripple {
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(..//img/slider/2.jpg);
}
.grax_tm_hero .ripple:before {
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.container.water {
  visibility: hidden;
}

.finalpmo {
  font-size: 50px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
}

.my_shape {
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: -11px;
  z-index: 5;
}
.my_shape .svg {
  width: 100%;
  height: 100%;
}
.grax_tm_down.shape {
  bottom: 20%;
}
.my_shape svg {
  width: 100%;
  height: 100%;
  color: #fff;
  display: none;
}

.progressbar {
  position: fixed;
  height: 100px;
  width: 1px;
  bottom: 25px;
  right: -25px;
  background-color: rgba(0, 0, 0, 0.08);
  z-index: -1;
  transition: all 0.3s ease;
  display: none;
}
.progressbar.animate {
  right: 25px;
  display: none;
}
.svg {
  color: #fff;
}

.progressbar .line {
  position: absolute;
  width: 1px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

.progressbar .text {
  position: absolute;
  top: -77%;
  left: 0px;
  font-family: "Montserrat";
  font-size: 13px;
  transform: rotateZ(90deg);
  text-transform: uppercase;
  transform-origin: left;
  white-space: nowrap;
  display: none;
}
.progressbar a {
  text-decoration: none;
  color: #fff;
  display: none;
}

/* hide the template’s “page progress” bar */
.progressbar,
.progressbar * {
  display: none !important;
  visibility: hidden !important;
}

/*---------------------------------------------------*/
/*  WAXON SETTINGS
/*---------------------------------------------------*/

.grax_tm_settings {
  position: fixed;
  z-index: 20;
  top: 20%;
  right: -200px;
  width: 200px;
  background-color: rgba(0, 0, 0, 1);
  padding: 40px 20px 33px 30px;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.grax_tm_settings.opened {
  right: 0px;
}
.grax_tm_settings .wrapper {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
}
.grax_tm_settings .icon {
  position: absolute;
  top: 0px;
  right: 100%;
  background-color: #000;
  padding: 12px 12px 4px 12px;
}
.grax_tm_settings .icon .svg {
  color: #fff;
  width: 25px;
  height: 25px;
  animation: fa-spin 2s infinite linear;
}
.grax_tm_settings .link {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.grax_tm_settings .title {
  color: #fff;
  font-family: "Montserrat";
  font-weight: 600;
  position: relative;
  display: inline-block;
}
.grax_tm_settings .title:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  left: 0px;
  bottom: 0px;
}
.grax_tm_settings .colors {
  margin: 0px 0px 22px 0px;
  list-style-type: none;
  padding-top: 32px;
}
.grax_tm_settings .colors li {
  margin: 0px;
  display: inline-block;
}
.grax_tm_settings .colors li a {
  text-decoration: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
}
.grax_tm_settings .direction {
  list-style-type: none;
  margin: 0px 0px 20px 0px;
}
.grax_tm_settings .direction li {
  margin: 0px 20px 0px 0px;
  display: inline-block;
}
.grax_tm_settings .direction li a {
  opacity: 0.4;
  text-decoration: none;
  color: #fff;
}
.grax_tm_settings .direction li a.active {
  opacity: 1;
}
.grax_tm_settings .direction li .svg {
  width: 25px;
  height: 25px;
}
.grax_tm_settings .colors li.bl {
  display: inline-block;
}
.grax_tm_settings .colors li.wh {
  display: none;
}
body.dark .grax_tm_settings .colors li.bl,
.grax_tm_settings.changed .colors li.bl {
  display: none;
}
body.dark .grax_tm_settings .colors li.wh,
.grax_tm_settings.changed .colors li.wh {
  display: inline-block;
}
body.dark .grax_tm_settings,
.grax_tm_settings.changed {
  background-color: #fff;
}
body.dark .grax_tm_settings .icon,
.grax_tm_settings.changed .icon {
  background-color: #fff;
}
body.dark .grax_tm_settings .icon .svg,
.grax_tm_settings.changed .icon .svg {
  color: #000;
}
body.dark .grax_tm_settings .title,
.grax_tm_settings.changed .title {
  color: #000;
}
body.dark .grax_tm_settings .title:before,
.grax_tm_settings.changed .title:before {
  background-color: rgba(0, 0, 0, 0.5);
}
body.dark .grax_tm_settings .direction li a,
.grax_tm_settings.changed .direction li a {
  color: #000;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a,
.grax_tm_settings.changed .cursor li:nth-child(1) a {
  border-color: #000;
}
body.dark .grax_tm_settings .cursor li:nth-child(1) a:before,
.grax_tm_settings.changed .cursor li:nth-child(1) a:before {
  background-color: #000;
}
body.dark .grax_tm_settings .cursor li .svg,
.grax_tm_settings.changed .cursor li .svg {
  color: #000;
}
.grax_tm_settings .cursor {
  margin: 0px;
  list-style-type: none;
  padding-top: 15px;
}
.grax_tm_settings .cursor li {
  margin: 0px 20px 0px 0px;
  display: inline-block;
}
.grax_tm_settings .cursor li a {
  text-decoration: none;
  color: #fff;
  opacity: 0.4;
  font-weight: 600;
}
.grax_tm_settings .cursor li a.showme {
  opacity: 1;
}
.grax_tm_settings .cursor li:nth-child(1) a {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 2px solid #fff;
  position: relative;
  display: inline-block;
}
.grax_tm_settings .cursor li:nth-child(1) a:before {
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.grax_tm_settings .cursor li .svg {
  width: 25px;
  height: 25px;
  color: #fff;
}
.grax_tm_settings .cursor li:nth-child(2) {
  position: relative;
  top: -2px;
}
.grax_tm_settings .effect {
  margin: 0px;
  list-style-type: none;
  padding-top: 15px;
  padding-bottom: 25px;
}
.grax_tm_settings .effect li {
  margin: 0px 0px 5px 0px;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 100%;
  background-color: #fff;
  opacity: 0.4;
}
.grax_tm_settings .effect li a {
  text-decoration: none;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  font-family: "Montserrat";
  display: block;
  position: relative;
  top: 2px;
}
.grax_tm_settings .effect li.selected {
  background-color: #fff;
  opacity: 1;
}

/*---------------------------------------------------*/
/*	GRAX INTRO
/*---------------------------------------------------*/

.grax_tm_intro_hero {
  width: 100%;
  height: 100vh;
  float: left;
  clear: both;
  position: relative;
  margin-bottom: 150px;
}
.grax_tm_intro_hero:before {
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-image: url(..//img/patterns/light-honeycomb.png);
  background-repeat: repeat;
  opacity: 0.4;
  z-index: 2;
}
.grax_tm_intro_hero:after {
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #000;
  z-index: 1;
}
.grax_tm_intro_hero .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 100%;
  padding: 0px 20px;
  text-align: center;
}
.grax_tm_intro_hero .content .name {
  font-size: 50px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 10px;
  margin-bottom: 20px;
}

.grax_tm_intro_hero .content p {
  color: #fff;
  font-size: 20px;
  letter-spacing: 2px;
  font-family: "Montserrat";
  font-weight: 500;
}
.grax_tm_intro_hero .grax_tm_down {
  left: 50%;
  transform: translateX(-50%);
  bottom: 5.5%;
}
.grax_tm_intro_hero .fn_animation .character {
  top: 15px;
}
.grax_tm_intro_hero .fn_animation .character.opened {
  top: 0px;
}
.grax_tm_intro_content {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
}
.grax_tm_intro_content .title_holder {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  text-align: center;
}
.grax_tm_intro_content .title_holder h3 {
  font-size: 30px;
  font-weight: 800;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 10px;
}
.grax_tm_intro_content .demo_list {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  padding-top: 100px;
  margin-bottom: 70px;
}
.grax_tm_intro_content .demo_list ul {
  margin: 0px 0px 0px -50px;
  list-style-type: none;
}
.grax_tm_intro_content .demo_list ul li {
  margin: 0px 0px 50px 0px;
  float: left;
  width: 50%;
  padding-left: 50px;
  position: relative;
}
.grax_tm_intro_content .demo_list ul li .list_inner {
  width: 100%;
  height: auto;
  clear: both;
  float: left;
  position: relative;
  text-align: center;
  transition: all 0.3s ease;
  top: 0px;
  transform: translateZ(0);
}
.grax_tm_intro_content .demo_list ul li .list_inner:hover {
  top: -10px;
}
.grax_tm_intro_content .demo_list ul li .list_inner h3 {
  font-size: 20px;
  font-weight: 600;
  padding-top: 20px;
}
.grax_tm_intro_content .demo_list ul li:last-child img {
  filter: blur(5px);
}
.grax_tm_intro_fixed_price .pricing-info,
.grax_tm_intro_fixed_price .anim {
  text-decoration: none;
  color: #fff;
  font-family: "Montserrat";
  background-color: #fff;
  position: fixed;
  font-size: 22px;
  text-align: center;
  z-index: 5;
  border-radius: 100%;
  height: 70px;
  width: 70px;
  line-height: 70px;
  display: inline-block;
  bottom: 80px;
  right: 50px;

  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

@-webkit-keyframes myAnimPrice {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes myAnimPrice {
  0% {
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}

.grax_tm_intro_fixed_price .anim:nth-child(1) {
  -webkit-animation: myAnimPrice 2s infinite;
  animation: myAnimPrice 2s infinite;
}

.grax_tm_intro_fixed_price .anim:nth-child(2) {
  -webkit-animation: myAnimPrice 2s infinite 0.3s;
  animation: myAnimPrice 2s infinite 0.3s;
}

.grax_tm_intro_fixed_price .anim:nth-child(3) {
  -webkit-animation: myAnimPrice 2s infinite 0.6s;
  animation: myAnimPrice 2s infinite 0.6s;
}

/* Botón flotante (base) */ .btn-emp{ position:fixed; width:60px; height:60px; bottom:55px; left:100px; background:#fff; color:#FFF; border-radius:50%; text-align:center; font-size:32px; box-shadow: 0px 1px 10px rgba(0,0,0,0.3); z-index:100; transition: all 300ms ease; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; overflow:visible; /* para que la burbuja pueda sobresalir */ } /* Hover del botón */ 
.btn-emp:hover, .btn-emp:focus { background: #054578; outline: none; } /* Imagen dentro del botón */ 
.btn-emp__img{ width:72%; height:72%; object-fit:cover; border-radius:50%; display:block; pointer-events:none; } /* Burbuja tipo chat */ 
.btn-emp__bubble{ position:absolute; left:calc(100% + 14px); bottom:50%; transform:translateY(50%) translateX(-10px); background:#ffffff; color:#0a0a23; padding:10px 14px; border-radius:14px; box-shadow: 0 6px 20px rgba(11,18,45,0.18); white-space:nowrap; opacity:0; pointer-events:none; transition:all 220ms cubic-bezier(.2,.9,.2,1); font-size:13px; z-index:101; font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Triángulo (cola de la burbuja) */
.btn-emp__bubble::before{ content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-right-color: #ffffff; z-index:100; } /* Mostrar la burbuja en hover / focus y cuando la clase .show está presente (JS) */ 
.btn-emp:hover .btn-emp__bubble, .btn-emp:focus-within .btn-emp__bubble, .btn-emp.show .btn-emp__bubble { opacity:1; transform:translateY(50%) translateX(0); pointer-events:auto; } /* Ajustes para pantallas pequeñas */ @media only screen and (min-width:320px) and (max-width:768px){ .btn-emp{ width:63px; height:63px; line-height: 66px; left:18px; /* ejemplo: mover a la izquierda en móvil si quieres */ } .btn-emp__bubble{ left: calc(100% + 10px); font-size:12px; padding:8px 10px; white-space:normal; max-width:200px; } }

@media (max-width: 991px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* better than hidden for horizontal overflow */
  }

  .grax_tm_copyright,
  .grax_tm_copyright .my_wave {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .grax_tm_copyright .my_wave svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .grax_tm_copyright .copyright_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .grax_tm_copyright * {
    box-sizing: border-box;
  }
}