@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  /* Colors */
  --color-dark-600: #17171A;
  --color-dark-800: #000000;
  --color-goldenrod-800: #EABA3F;
  --color-goldenrod-200: #2c271e;
  --color-gray-600: #A3A3A3;
  --color-gray-400: #2C2C2C;
  --color-gray-300: #444444;
  --color-coolGray-600: #4B5563;

  /* Background Images */
  --background-image-curved-blue-gradient: url(/imagenes/precios/curved-blue-gradient-bg.svg);
  --background-image-border-gradient: linear-gradient(90deg, #C84E89 0%, #F15F79 100%);
  --background-image-gradient-bg: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  --background-image-gradient-m: linear-gradient(151deg,#c3f9ef 30px,rgba(248,248,248,0)32%);
  --background-image-gradient-lg: linear-gradient(90deg, rgba(43, 192, 228, 0.1) 0%, rgba(234, 236, 198, 0.1) 100%);
  --background-image-gradient-xl: linear-gradient(98.44deg, rgba(255, 223, 162, 0.4) -1.68%, rgba(132, 195, 238, 0.4) 95.72%);

  /* Animations */
  --animate-anim_moveBottom: anim_moveBottom 3s linear 0s infinite alternate;
  
  @keyframes anim_moveBottom {
    0% { transform: translateY(0px); }
    100% { transform: translateY(20px); }
  }
}

/* Custom Container */
@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
  max-width: 100%;
  
  @media (min-width: 640px) { max-width: 640px; }
  @media (min-width: 768px) { max-width: 768px; }
  @media (min-width: 1024px) { max-width: 1224px; }
  @media (min-width: 1280px) { max-width: 1380px; }
}

/* 
===================== 
CSS Table of Conttent 
===================== 
01. All Variable 
*/

/* 
------------------------ 
01. All Variable 
-------------------------- 
*/ 

:root { 
    --gh-font-heading: 'Work Sans', sans-serif; 
    --gh-font-body: 'DM Sans', sans-serif;
    --heading_font: var(--gh-font-heading, 'Work Sans', sans-serif); 
} 
body {
    font-family: var(--gh-font-body, 'DM Sans', sans-serif);
}
html { 
    scroll-behavior: smooth; 
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 

font-family:var(--heading_font); 
line-height: 1.2; 
} 

/* 
------------------------  
 02.  Menu Css 
-------------------------- 
*/ 
.mobile-toggle { 
    width: 40px; 
    height: 40px; 
    padding: 15px; 
    right: 0; 
    position: absolute; 
} 
.mobile-toggle span { 
    width: 25px; 
    height: 2px; 
    position: absolute; 
    top: 10px; 
    left: 8px; 
    border-radius: 10px; 
} 
.mobile-toggle span:nth-child(2) { 
    top: 19px; 
} 
.mobile-toggle span:nth-child(3) { 
    top: 28px; 
} 
.mobile-toggle.open span:nth-child(1) { 
    top: 20px; 
    transform: rotate(-45deg); 
} 
.mobile-toggle.open span:nth-child(2) { 
    top: 20px; 
    opacity: 0; 
} 
.mobile-toggle.open span:nth-child(3) { 
    top: 20px; 
    transform: rotate(45deg); 
} 
@media only screen and (max-width: 976px) { 
    .toggle-menu-class { 
        overflow-y: auto; 
        max-height: 26rem; 
    } 
} 
@media only screen and (min-width: 976px) { 
    .dropdown-menu .dropdown .submenu, 
    .dropdown-menu .dropdown .author-submenu { 
        opacity: 0; 
        visibility: hidden; 
        top: calc(100% + 20px); 
        transition: .5s; 
    } 
    .dropdown-menu .dropdown:hover>.submenu { 
        opacity: 1; 
        visibility: visible; 
       top: 100%; 
    } 
    .dropdown-menu .dropdown:hover>.dropdown-submenu { 
       top: 20px; 
    } 
    .dropdown-menu .dropdown:hover>.author-submenu { 
        opacity: 1; 
        visibility: visible; 
        transform: translateY(5%); 
    } 
} 

.submenu li:last-child { 
    padding-bottom: 20px;} 
@keyframes headerSlideDown { 
    0% { 
        -webkit-transform: translateY(-100%); 
        transform: translateY(-100%); 
    } 
    100% { 
        -webkit-transform: translateY(0); 
        transform: translateY(0); 
    } 
} 
.header-sticky { 
    background-color: #ffffff; 
    position: fixed; 
    top: 0 !important; 
    animation: headerSlideDown 0.5s ease; 
    right: 0 !important; 
    left: 0 !important; 
    z-index: 99; 
    opacity: 9999 !important; 
} 


  @media (max-width: 1024px){ 
    .mobile-device-active{ 
    display: block; 
    } 
    } 

    .is-active .dropdown-menu { 
  display: block; 
} 

.tag-link-box ul li:last-child a { 
    border-right: 0; 
    padding-right: 0; 
} 


.item-box:last-child { 
    padding-right: 0; 
    border-right: 0; 
    margin-right: 0; 
} 


.loading { 
    display: flex; 
    flex-direction: row; 
  } 
  .loading__letter { 
    animation-name: bounce; 
    animation-duration: 2s; 
    animation-iteration-count: infinite; 
  } 
  
  .loading__letter:nth-child(2) { 
    animation-delay: .1s;   
  } 
  .loading__letter:nth-child(3) { 
    animation-delay: .2s; 
  } 
  .loading__letter:nth-child(4) { 
    animation-delay: .3s;   
  } 
  .loading__letter:nth-child(5) { 
    animation-delay: .4s; 
  } 
  .loading__letter:nth-child(6) { 
    animation-delay: .5s;   
  } 
  .loading__letter:nth-child(7) { 
    animation-delay: .6s; 
  } 
  .loading__letter:nth-child(8) { 
    animation-delay: .8s; 
  } 
  .loading__letter:nth-child(9) { 
    animation-delay: 1s; 
  } 
  .loading__letter:nth-child(10) { 
    animation-delay: 1.2s; 
  } 
  
  @keyframes bounce { 
    0% { 
      transform: translateY(0px) 
    } 
    40% { 
      transform: translateY(-40px); 
    } 
    80%, 
    100% { 
      transform: translateY(0px); 
    } 
  } 
  
  
  @media (max-width: 700px) { 
    .loading__letter { 
      font-size: 50px; 
    } 
  } 
  
  @media (max-width: 340px) { 
    .loading__letter { 
      font-size: 40px; 
    } 
  } 


.testimonial-main-slider .slick-slider { 
    margin:0 -15px; 
} 
.testimonial-main-slider .slick-slide { 
    margin-right:15px; 
    margin-left:15px; 
} 


.testimonial-main-slider .slick-dots { 
  display: flex; 
  justify-content: center; 
  margin: 0; 
  padding-top:50px; 
  list-style-type: none; 
} 
.testimonial-main-slider .slick-dots li { 
  margin: 0 0.25rem; 
} 
.testimonial-main-slider .slick-dots button { 
  display: block; 
  width: 12px; 
  height: 12px; 
  padding: 0; 
  border: none; 
  border-radius: 100%; 
  background-color: #a3a3a3; 
  text-indent: -9999px; 
} 
.testimonial-main-slider .slick-dots li.slick-active button { 
  background-color: #eaba3f; 
}