@font-face {
    font-family: RobotoBlack;
    src: url('../fonts/Roboto-Black.ttf') format('truetype');
}
@font-face {
    font-family: RobotoRegular;
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
    font-family: RobotoMedium;
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
}
@font-face {
    font-family: MontserratAlternates;
    src: url('../fonts/MontserratAlternates-Bold.ttf') format('truetype');
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root {
    --color-primary             : #feae01;
    --color-secondary           : #171717;
    --font-family-title         : RobotoBlack, sans-serif;
    --font-family-logo          : MontserratAlternates, sans-serif;
    --font-size-title           : 40px;
    --font-size-subttile        : 20px;
    --font-family-text          : RobotoRegular, sans-serif;
    --font-family-medium        : RobotoMedium, sans-serif;
    --font-size-text            : 0.875rem;
    --font-spacing-text         : .02em;

    --color-background-light    : #fff;
    --color-background-dark     : #0f0f0f;
    --color-text-light          : #1c1c1c;
    --color-text-dark           : #fff;
    --color-title-light         : #000;
    --color-title-dark          : #fff;
    --color-border-light        : #e3e3e3;
    --color-border-dark         : #2c2c2c;
    --color-icon-light          : #7A7A7A;
    --color-icon-dark           : #fff;
    --color-box-shadow-light    : 1px 1px 5px 0px rgba(0, 0, 0, .1);
    --color-box-shadow-dark     : 1px 1px 5px 0px rgba(255, 255, 255, .1);
    --color-error               : #e40202;
    --color-pending             : #e4e403;
    --color-success             : #07ca07;

    --color-gradient-1          : #bb3eda;
    --color-gradient-2          : #ff4e56;
    --color-gradient-3          : var(--color-primary);
    --background-gradient       : linear-gradient(
                                    to right, 
                                    var(--color-primary), 
                                    var(--color-primary), 
                                    var(--color-primary)
                                );
    --color-text-secondary      : #bfbfbf;           

    --spacing-base              : 8px;
    --border-radius             : 5px;

    --padding-section           : 1.4rem 0;
    --padding-icon              : 12px;
    --gap                       : 2.2rem;
    --container                 : 1260px;
}
html{
    scroll-behavior: smooth;
}
/* Default Theme (Light) */
body.light-theme {
    --color-background          : var(--color-background-light);
    --color-text                : var(--color-text-light);
    --color-title               : var(--color-title-light);
    --color-border              : var(--color-border-light);
    --color-icon                : var(--color-icon-light);
    --box-shadow                : var(--color-box-shadow-light);
}
/* Dark Theme */
body.dark-theme {
    --color-background          : var(--color-background-dark);
    --color-text                : var(--color-text-dark);
    --color-title               : var(--color-title-dark);
    --color-border              : var(--color-border-dark);
    --color-icon                : var(--color-icon-dark);
    --box-shadow                : var(--color-box-shadow-dark);
}
/* General */
body {
    background-color: var(--color-background);
    color: var(--color-text);
}

ul{
    list-style: none;
}
h1,h2,h3,h4,h5,b{
    font-family: var(--font-family-title);
    font-size: var(--font-size-title);
    color: var(--color-title);
    letter-spacing: var(--font-spacing-text);
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
}
p,a,span,label{
    font-size: var(--font-size-text);
    font-family: var(--font-family-text);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 400;
    letter-spacing: var(--font-spacing-text);
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
}
p{
    line-height: calc(var(--font-size-text) + 5px);
    letter-spacing: var(--font-spacing-text);
    margin-bottom: 15px;
    color: var(--color-text-secondary);
}
p span{
    color: var(--color-text-secondary);
}
.visually__hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.wrapper{
    overflow: hidden;
}
.container{
    padding-left: 15px;
    padding-right: 15px;
    max-width: var(--container);
    margin: auto;
}
.logo h2{
    color: var(--color-title);
    font-size: 2rem;
    font-family: var(--font-family-logo);
    font-weight: normal;
}
.logo.logo__footer h2{
    color: var(--color-background-light);
    font-size: 45px;
    line-height: 48px;
}
.section{
    padding: var(--padding-section);
}
.icon__square{
    position: relative;
    width: 30px;
    height: 30px;
}
.section__title{
    font-size: calc(var(--font-size-title));
    font-family: var(--font-family-medium);
    font-weight: 400;
    margin: 10px 0;
}
.section__title > span{
    font-size: calc(var(--font-size-title));
    font-family: var(--font-family-title);
}
.char-animate {
    display: inline-block; 
    will-change: transform, opacity;
}
.section__subtitle{
    font-size: calc(var(--font-size-subttile) + 5px);
    font-family: var(--font-family-text);
    font-weight: 200;
    margin-left: 25px;
    position: relative;
    width: max-content;
    color: var(--color-text-secondary);
}
.section__subtitle span{
    font-size: calc(var(--font-size-subttile) + 5px);
    color: var(--color-text-secondary);
}
.section__subtitle::after{
    content: '';
    position: absolute;
    left: -25px;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translate(0, -52%);
    background: transparent;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
}
.section__head{
    text-align: center;
    max-width: 680px;
    margin: auto;
    padding: var(--padding-section)
}
.section__head > .section__subtitle{
    margin: auto;
}
.section__head > .section__subtitle  span{
    font-size: calc(var(--font-size-subttile) + 5px);
    color: var(--color-text-secondary);
}
.no_select {
    user-select: none;
}
.no_select:focus {
    outline: none;
}
.text__error{
    color: var(--color-error);
}
.required{
    color: var(--color-primary);
}
.text__error{
    font-size: calc(var(--font-size-text) - 2px);
}
.font__size_text{
    font-size: var(--font-size-text);
}
.color__primary{
    color: var(--color-primary);
}
.border__primary{
    border: 1px solid var(--color-border);
}
.border__bottom{
    border-bottom: 1px solid var(--color-border);
}
.text__center{
    text-align: center;
}
.mb__0{
    margin-bottom: 0;
}
.link{
    color: var(--color-primary);
    text-decoration: underline;
}
/* Buttons */
button{
    border: inherit;
    padding: .7rem;
    cursor: pointer;
}
.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1rem;
    background: transparent;
    width: max-content;
    border-radius: 0.2rem;
    cursor: pointer;
    min-height: 40px;
    position: relative;
    overflow: hidden;
}
.btn.btn__primary{
    color: #fff;
    background: var(--background-gradient);
    padding: 0.7rem 1rem;
    display: flex;
    justify-content: center;
    gap: 0.55rem;
}
.btn.btn__primary span{
    border-radius: var(--border-radius);
    z-index: 2;
}
.btn.btn__primary .icon{
    min-width: 20px;
    max-width: 20px;
    height: auto;
    z-index: 2;
}
.btn.btn__primary.btn__white{
    background:#ffff;
}
.btn.btn__primary.btn__white span{
    color: var(--color-background);
}
.btn.btn__primary.btn__white:hover{
    background: var(--color-primary);
    transition: all .5s ease-in-out;
}
.btn.btn__primary.btn__white:hover svg{
    rotate: 45deg;
    transition: all .5s ease-in-out;
}
.btn .bubble {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: width, height;
    filter: none;
    mix-blend-mode: normal;
}

.btn.btn__100{
    width: 100%;
    max-width: 100%;
    padding: 10px 0;
    border-radius: var(--border-radius);
    color: var(--color-secondary);
    font-size: calc(var(--font-size-text) + 2px);
}
.btn.btn__animation {
    position: relative;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    overflow: hidden;
}
.btn.btn__animation::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    height: calc(100% + 2px);
    width: 0%;
    background: var(--color-primary);
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
    z-index: 1;
    border: 0;
    transition: width 0.5s ease, clip-path 0.5s ease;
}
.btn.btn__animation span {
    z-index: 2;
    position: relative;
    font-size: var(--font-size-text);
    transition: color 0.3s ease-in;
}

.btn.btn__animation:hover::after {
    width: 120%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.btn.btn__animation:hover span {
    color: var(--color-background);
}
.text-reveal {
  overflow: hidden;
}

.text-line {
  overflow: hidden;
  line-height: 1.4; /* Ajusta según tu diseño */
}

.text-line-inner {
  will-change: transform, opacity; /* Optimización para animaciones */
}
/* ul */
ul{
    gap: .7rem;
    display: flex;
}
ul.column{
    flex-direction: column;
}
ul li{
    display: flex;
    align-items: center;
    position: relative;
    gap: 7px;
}
ul li.justify__start{
    justify-content: flex-start;
    align-items: flex-start;
}
ul li > svg{
    width: 18px;
    min-width: 18px;
    transition: all .5s ease-in;
}
ul li > svg g{
    fill: var(--color-primary);
}
ul li > span{
    line-height: 20px;
}
ul li:hover a{
    color: var(--color-primary) !important;
}
ul li:hover > svg{
    transform: rotate(20deg);
}
/* Flex Box */
.d_flex{
    display: flex;
    align-items: center;
    gap: var(--gap);
}
.d_flex.justify__center{
    justify-content: center;
}
.d_flex.justify__left{
    justify-content: left;
}
.d_flex.justify__space_beetween{
    justify-content: space-between;
}
.d_flex.justify__space_around{
    justify-content: space-around;
}
.d_flex.align__item_start{
    align-items: flex-start;
}
/* Input + label + form*/
form{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) - 10px);
}
label{
    margin-bottom: .4rem;
    display: block;
    color: var(--color-title);
}
input{
    border: none;
    background: transparent;
    min-height: 40px;
    height: auto;
    padding: 5px 5px 5px 15px;
    width: 100%;
    color: #fff;
}
input:focus{
    border: none;
    outline: none;
}
textarea{
    border: none;
    background: transparent;
    max-height: 150px;
    min-height: 150px;
    padding: 5px 5px 5px 15px;
    min-width: 100%;
    color: #fff;
    font-family: var(--font-family-text);
}
.input__group{
    width: 100%;
}
input::placeholder,
textarea::placeholder{
    color: var(--color-text);
    font-size: calc(var(--font-size-text) - 1px);
}
textarea:focus{
    outline: none;
}
.input__group .input__inner{
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    height: auto;
    align-items: center;
}
.input__group .input__inner.input__error{
    border-color: var(--color-error);
}
.input__group .input__inner.input__color{
    border-color: var(--color-primary);
}
.input__group .input__inner:focus-within{
    border-color: var(--color-primary);
}
.input__group .input__inner > .icon{
    padding: var(--padding-icon) 0 var(--padding-icon) calc(var(--padding-icon) + 5px);
    height: 43px;
}
.input__group .input__inner > .icon svg{
    max-height: 25px;
}
.input__group .input__inner > .icon img,
.input__group .input__inner > .icon svg,
.input__group .input__inner > .icon svg path{
    height: 100%;
    fill: var(--color-icon);
}
.input__group .input__button{
    margin-right: -3px;
}
.input__groups{
    display: flex;
    gap: calc(var(--gap) - 15px);
}
/* Form */
.form{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.form .form__inner{
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form .form__inner.row{
    flex-direction: row;
}
.form .form__title{
    font-size: calc(var(--font-size-subttile) + 6px);
    font-family: var(--font-family-medium);
    margin-bottom: 10px;
}
.form .form__title span{
    font-size: calc(var(--font-size-subttile) + 6px);
    font-family: var(--font-family-medium);
}
/* Icon */
.icon__single{
    border: 1px solid var(--color-border);
    padding: calc(var(--padding-icon) - 4px);
    height: 40px;
    cursor: pointer;
}
.icon__single:hover{
    border-color: var(--color-secondary);
}
.icon__single.dropdown:hover::after{
    border-color: var(--color-secondary);
}
.icon__single img,
.icon__single svg,
.icon__single svg path{
    height: 100%;
    fill: var(--color-icon);
}
.icon__single:hover svg path{
    fill: var(--color-secondary);
}
.icon__single.circle{
    border-radius: 50%;
}
/* Dropdown */
.dropdown{
    position: relative;
}
.dropdown::after{
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    width: 5px;
    height: 5px;
    border-right: 0.12rem solid var(--color-icon);
    border-bottom: 0.12rem solid var(--color-icon);
    transform: rotate(45deg);
    cursor: pointer;
}
.dropdown.no__icon{
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.dropdown.no__icon::after{
    display: none;
}
.dropdown .dropdown__inner{
    position: absolute;
    top: calc(100% + 10px);
    background: var(--color-background-light);
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: var(--box-shadow);
    display: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
    width: max-content;
}
.dropdown.dropdown__right.no__icon .dropdown__inner{
    right: 0 !important;
}
.dropdown .dropdown__inner.show {
    display: block;
    opacity: 1;
}
.dropdown .dropdown__inner ul{
    display: flex;
    flex-direction: column;
}
.dropdown .dropdown__inner ul li{
    padding: .3rem 0;
    color: var(--color-secondary);
    font-family: var(--font-family-text);    
    font-size: var(--font-size-text);
}
.dropdown .dropdown__inner ul li a{
    color: var(--color-secondary);
}
.dropdown .dropdown__inner ul li a:hover,
.dropdown .dropdown__inner ul li:hover{
    color: var(--color-primary);
}
.dropdown.dropdown__right{
    margin-right: 17px;
}
.dropdown.dropdown__right::after,
.dropdown.dropdown__right .dropdown__inner{
    right: -17px;
}
/* Text circle + animation*/ 
.text__circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    /* background: var(--color-primary); */
    position: relative;
    animation: rotate 10s linear infinite;
    position: absolute;
    right: 30px;
    top: 20px;
}
.text__circle::after{
    content: '';
    position: absolute;
    background: transparent;
    width: 65px;
    height: 65px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
}
.text__circle::before{
    content: '';
    position: absolute;
    background: var(--background-gradient);
    width: 10px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 2;
}
.text__circle textPath{
    font-family: var(--font-family-text);
    fill: var(--color-text-secondary);
    font-size: calc( var(--font-size-text));
    letter-spacing: .03em;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* Swiper animation */
.carousel__banner .swiper-wrapper,
.carousel__text .swiper-wrapper,
.carousel__reviews .swiper-wrapper{
    transition-timing-function: linear !important; 
}
/* Tags */
.tag .tag__inner{
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tag .tag__inner .tag__item{
    border: 1px solid var(--color-border);
    width: max-content;
    padding: 15px;
    overflow: hidden;
    position: relative;
}
.tag .tag__inner .tag__item::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--color-primary);
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
    z-index: 1;
    transition: none;
}
.tag .tag__inner .tag__item span{
    z-index: 2;
    position: relative;
    font-size: var(--font-size-text);
    transition: all .3s ease-in;
}
.tag .tag__inner .tag__item:hover::after {
    animation: fillAndFlatten .7s forwards;
}
.tag .tag__inner .tag__item:hover span{
    color: var(--color-background);
}
@keyframes fillAndFlatten {
    0% {
        width: 0%;
        clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
    }
    50% {
        width: 120%;
        clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
    }
    100% {
        width: 120%;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}
/* Pagination round */
.pagination__round{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.pagination__round .swiper-pagination-bullet{
    min-width: 45px;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    font-size: var(--font-size-text);
    opacity: 1;
    background: inherit;
    position: relative;
}
.pagination__round .swiper-pagination-bullet::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-primary);
    z-index: 1;
    transition: all .5s ease-out;
}
.pagination__round .swiper-pagination-bullet:hover::after,
.pagination__round .swiper-pagination-bullet-active::after{
    width: 100%;
    height: 100%;
    transition: all .5s ease-in;
    border-color: var(--color-primary);
}
.pagination__round .swiper-pagination-bullet span{
    z-index: 2;
    transition: all .5s ease-in;
    font-family: var(--font-family-text);
    outline: none;
}
.pagination__round .swiper-pagination-bullet:hover span,
.pagination__round .swiper-pagination-bullet-active span{
    color: var(--color-background);
}
/* Cursor */
.cursor {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-primary);
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transform-origin: center;
    transition: transform 0.1s ease-out;
}

.cursor-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-primary);
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transform-origin: center;
    will-change: transform, opacity;
}
.cursor-line {
    position: fixed;
    background-color: var(--color-primary);
    pointer-events: none;
    z-index: 9998;
    transform-origin: left center;
    will-change: transform, opacity;
}
/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99997;
    background: var(--color-primary);
}
.preloader__layer {
    width: 100%;
    height: 100%;
    background: var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
}
.preoloader__icon{
    /* width: 100px;
    height: 100px;
    border-radius: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
/* Announcement */
.announcement{
    background: var(--color-primary);
    padding: .5rem 0;
    text-align: center;
    color: var(--color-text-dark);
}
.announcement p{
    color: inherit;
    color: var(--color-background);
    font-size: calc(var(--font-size-text) - 0.1rem);
}
.announcement p > a{
    color: var(--color-background);
    font-weight: 600;
    font-size: calc(var(--font-size-text) - 0.1rem);
}
/* Navbar */
.navbar{
    transition: transform 0.3s ease;
    background: var(--color-background);
    padding: var(--padding-section);
    z-index: 999;
    position: relative;
    top: 0;
    border-bottom: 5px solid transparent;
    width: 100%;
}
.navbar .navbar__inner{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0;
}
.navbar .navbar__inner #navbar{
    display: flex;
    justify-content: center;
    grid-column: 2;
    gap: 1.5rem;
}
.navbar__inner .logo {
    grid-column: 1;
}
.navbar .navbar__inner .navbar__main .logo{
    display: none;
}
.navbar .navbar__inner .navbar__main > ul{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.navbar .navbar__inner .navbar__options{
    justify-content: flex-end;
}
.navbar .navbar__inner .navbar__item{
    position: relative;
}
.navbar .navbar__inner .navbar__item::after{
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--background-gradient);
    transition: all .5s ease-in;
}
.navbar .navbar__inner .navbar__item.active::after{
    width: 80%;
}
.navbar .navbar__inner .navbar__item:hover::after{
    width: 80%;
    transition: all .5 ease-out;
}
.navbar .navbar__inner .navbar__item.active a,
.navbar .navbar__inner .navbar__item:hover a{
    font-weight: 900;
    background: var(--background-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.navbar .navbar__inner .navbar__item a{
    color: var(--color-text-secondary);
}
.navbar .navbar__inner .navbar__options{
    gap: calc(var(--gap) - 20px);
    grid-column: 3;
}
.navbar .navbar__inner ul .input__group{
    display: none;
}
.navbar .navbar__inner ul .logo,
.navbar .social__media,
.navbar__overlayed{
    display: none;
}
/* Icon hamburger */
.icon__hamburger{
    height: 40px;
    min-width: 40px;
    padding: 6px  8px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    display: none;
}
.icon__hamburger:hover{
    border-color: var(--color-primary);
}
.icon__hamburger:hover div{
    background: var(--color-primary);
}
.icon__hamburger div{
    width: 100%;
    height: 2px;
    background: var(--color-primary);
}
.icon__hamburger div:nth-child(2){
    width: 70%;
    margin-left: auto;
}
/* Columns */
.column__50{
    width: 50%;
}
/* Banner */
.banner .banner__inner{
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: space-between;
    max-height: 585px;
}
.banner .banner__inner .banner__aside,
.banner .banner__inner .banner__article{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.banner .banner__inner .banner__aside h2{
    font-weight: 200;
    font-family: var(--font-family-text);
    color: var(--color-text-secondary);
    font-size: 25px;
    text-transform: uppercase;
    margin-top: -60px;
}
.banner .banner__inner .banner__aside .banner__title span{
    font-size: clamp(55px, 6.5vw, 85px);
    margin-bottom: -10px;
    white-space: nowrap;
    overflow: hidden;
    width: max-content;
    padding-right: 10px;
    animation: all .5s ease;
    letter-spacing: .025em;
    font-family: var(--font-family-title);
    line-height: 70px;
}
.banner .banner__inner .banner__aside .banner__title .line__2{
    background: var(--background-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
.banner .banner__inner .banner__aside .banner__title .line__3{
    position: relative;
    background : linear-gradient(
        to right, 
        var(--color-text), 
        #adadaf, 
        #555453
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.typing {
    border-right: 2px solid var(--color-primary);
    animation: blink 0.7s step-end infinite;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes blink {
    50% {
      border-color: transparent;
    }
}
/* Wrapper */
/* #wrapper {
    padding-top: 100px;
    opacity: 0;
} */

/* Status */
.status{
    display: flex;
    gap: .5rem;
    align-items: center;
}
.status .status__circle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}
.status .status__circle::after{
    content: '';
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    position: absolute;
    top: -4px;
    left: -4px;
    opacity: .6;
    border-radius: 50%;
}
.status .status__circle.success{
    background: var(--color-success);
}
.status .status__circle.success::after{
    background: rgb(76, 175, 80, .5);
}
.status .status__circle.error{
    background: var(--color-error);
}
.status .status__circle.error::after{
    background: rgb(228, 2, 2, .5);
}
.status .status__circle.pending{
    background: var(--color-pending);
}
.status .status__circle.pending::after{
    background: rgb(192, 192, 3, .5);
}
/* Carousel banner */
.carousel__banner{
    overflow: hidden;
    margin-top: -80px;
}
.carousel__banner .carousel__image{
    max-height: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
}
.carousel__banner .carousel__image svg{
    width: 100%;
    max-width: 160px;
    object-fit: cover;
}
.carousel__banner .carousel__image:hover svg{
    fill: var(--color-primary);
    stroke: var(--color-primary);
}
.carousel__banner .carousel__image:hover svg path{
    fill: var(--color-primary);
}
.carousel__banner .carousel__image:hover svg .no__hover{
    fill: var(--color-background);
}
.carousel__banner .carousel__image > span{
    color: var(--color-text-secondary);
    font-size: 20px;
    font-weight: bold;
    outline: none;
}
.carousel__banner .carousel__image.image__width_text svg{
    max-width: 50px;
}
.carousel__banner .carousel__image:hover span{
    color: var(--color-primary);
}
.carousel__banner .carousel__image.multiple__images{
    padding: 0 2px;
    gap: 5px;
}
.carousel__banner .carousel__image.multiple__images svg{
    max-width: 30px;
}
/* Social bar */
.social__bar .social__bar__inner{
    position: relative;
    padding: 15px 0;
}
.social__bar .social__bar__inner .separator{
    position: absolute;
    bottom: 0;
    width: 80%;
    height: 1px;
    background: linear-gradient(to right, #4a4a4a, #2f2f2f, #1d1d1d);
}
.social__bar .social__bar__inner ul li a{
    color: var(--color-text-secondary);
    font-size: calc( var(--font-size-text) - 2px);
    font-style: normal;
}
/* Social media */
.social__media{
    display: flex;
    gap: 10px;
}
.social__media a{
    width: 25px;
    height: 25px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-text);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.social__media a::after{
    content: '';
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 1;
    transition: all .6s ease-in-out;
    z-index: 1;
}
.social__media a:hover::after{
    width: 100%;
    height: 100%;
    transform: scale(1.5);
}
.social__media a svg{
    z-index: 2;
}
.social__media a svg g{
    fill: var(--color-background);
}
.social__media.social__media_white a{
    background: var(--color-background-light);
}
.social__media.social__media_white a svg g{
    fill: var(--color-background-dark);
}
.social__media.social__media_border_secondary a{
    background: transparent;
    border: 1px solid var(--color-secondary);
}
.social__media.social__media_border_secondary a svg g{
    fill: var(--color-secondary);
}
/* Services */
.services{
    padding: var(--padding-section);
}
/* Tabs width images */
.tabs__with_images{
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.tabs__with_images .tab{
    display: flex;
    gap: 15px;
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    position: relative;
}
.tabs__with_images .tab::after{
    content: '';
    position: absolute;
    bottom: -1px;
    width: 0%;
    height: 1px;
    border-bottom: 1px solid var(--color-primary);
    transition: all .5s ease-in;
    left: 0;
    right: 0;
    margin: auto;
}
.tabs__with_images .tab:hover::after{
    width: 100%;
}
.tabs__with_images .tab:hover .svg__fill path{
    fill: #fff !important;
}
.tabs__with_images .tab:hover .svg__stroke path{
    stroke: #fff;
}
.tabs__with_images .tab:hover .tab__numeration{
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.tabs__with_images .tab:hover .tab__numeration span{
    color: var(--color-secondary);
}
.tabs__with_images .tab .tab__icon svg{
    width: 80px;
}
.tabs__with_images .tab .tab__content{
    display: flex;
    flex-direction: column;
    max-width: 450px;
    gap: 15px;
}
.tabs__with_images .tab .tab__content .tab__content_title{
    font-size: var(--font-size-subttile);
    font-family: var(--font-family-medium);
    letter-spacing: .05em;
}
.tabs__with_images .tab .tab__content .tab__content_title  span{
    font-size: var(--font-size-subttile);
    font-family: var(--font-family-medium);
    color: var(--color-background-light);
}
.tabs__with_images .tab .tab__numeration{
    min-width: 40px;
    min-height: 40px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all .5s ease-in;
    margin-left: auto;
}
.tabs__with_images .tab .tab__numeration span{
    font-family: var(--font-family-title);
    margin-right: -2px;
    color: var(--color-text-secondary);
}
.tabs__with_images .tab+.tab__image{
    position: absolute;
    top: -130px;
    left: calc(100% + 40px);
    width: calc(100% - 40px);
    height: 525px;
    overflow: hidden;
    z-index: -1;
    border-radius: var(--border-radius);
}
.tabs__with_images .tab+.tab__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: all .3s ease-in;
}
.tabs__with_images .tab+.tab__image.tab__image_active{
    z-index: 1;
}
.tabs__with_images .tab:hover+.tab__image img{
    z-index: 1;
    transform: scale(1);
}
.tabs__with_images .tab:hover+.tab__image{
    z-index: 1;
}
/* Carousel Card */
.carousel__services,
.carousel__text,
.carousel__portfolio{
    overflow: hidden;
}
.carousel__card{
    text-align: center;
    border: 1px solid var(--color-border);
    padding: 35px 20px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    border-radius: 0.2rem;
    height: 270px;
}
.carousel__card .carousel__card_icon{
    max-width: 100%;
    min-height: 80px;
    margin-bottom: -15px;
    position: relative;
}
.carousel__card .carousel__card_icon svg{
    max-width: 65px;
    position: absolute;
    transition: all .3s ease-in;
    transform: translate(-50%, 0);
    width: 100%;
}
.carousel__card h2{
    font-size: var(--font-size-subttile);
    font-family: var(--font-family-text);
    font-weight: 400;
}
.carousel__card .carousel__card_border{
    bottom: 0px;
    height: 0px;
    left: 50%;
    position: absolute;
    border-radius: 5px;
    box-sizing: content-box;
    transform: translate3d(-50%, 0px, 0px);
    width: 0px;
    border-bottom: 1px solid var(--color-primary);
    border-left: 0 solid var(--color-primary);
    border-right: 0 solid var(--color-primary);
    border-radius: 5px;
    transition: width 0.1s cubic-bezier(0.19, 1, 0.22, 1) 340ms, 
                height 0.1s cubic-bezier(0.25, 0.25, 0.75, 0.75) 145ms, 
                border-left-width cubic-bezier(0.25, 0.25, 0.75, 0.75) 340ms, 
                border-right-width cubic-bezier(0.25, 0.25, 0.75, 0.75) 340ms;
}
.carousel__card .carousel__card_border::before,
.carousel__card .carousel__card_border::after{
    background-color: var(--color-primary);
    content: "";
    height: 1px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 0%;
    border-radius: 5px;
    transition: width 150ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.carousel__card .carousel__card_border::after{
    left: auto;
    right: 0px;
}
.carousel__card:hover .carousel__card_border::after{
    width: 50%;
    transition: width 0.1s cubic-bezier(0.19, 1, 0.22, 1) 340ms;
}
.carousel__card:hover .carousel__card_border::before{
    width: 50%;
    transition: width 0.1s cubic-bezier(0.19, 1, 0.22, 1) 340ms;
}
.carousel__card:hover .carousel__card_border{
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    width: 100%;
    transition: width 150ms cubic-bezier(0.25, 0.25, 0.75, 0.75), 
                height 0.1s cubic-bezier(0.25, 0.25, 0.75, 0.75) 145ms, 
                border-left-width cubic-bezier(0.25, 0.25, 0.75, 0.75) 145ms, 
                border-right-width cubic-bezier(0.25, 0.25, 0.75, 0.75) 145ms;
}
.carousel__card:hover .carousel__card_icon svg{
    transition: all .3s ease-in-out;
    margin-top: -5px;
}
.carousel__card:hover .carousel__card_icon .svg__fill path{
    fill: #fff !important;
}
.carousel__card:hover .carousel__card_icon .svg__stroke path{
    stroke: #fff !important;
}
.carousel__card:hover p{
    color: #fff;
}
/* Text with animation*/
.content__text_stroke{
    display: flex;
}
.carousel__text{
    padding-bottom: 1.4rem;
}
.text__with_animation{
    padding: 10px 10px;
    position: relative;
    display: flex;
    width: max-content;
}
.text__with_animation .text__stroke{
    color: transparent; 
    -webkit-text-stroke: 1px var(--color-text-secondary); 
    text-transform: capitalize;
    font-size: 4.4vw;
    font-family: var(--font-family-title);
    padding-right: 4.1vw;
    transition: all .3s ease-in;
}
.text__with_animation .text__stroke:hover{
    color: var(--color-primary);
    -webkit-text-stroke-color: var(--color-primary);
}
.text__with_animation .text__icon{
    position: absolute;
    width: 50px;
    height: 50px;
    right: .2vw;
    top: 1.3vw;
    -webkit-text-stroke: inherit; 
    animation: rotate 5s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text__with_animation .text__icon span{
    font-size: 5.25vw;
    color: var(--color-primary);
    font-family: var(--font-family-title);
    margin-top: 23px;
}
/* Portfolio */
.portfolio{
    padding: var(--padding-section);
}
.carousel__portfolio{
    position: relative;
}
.preview__page{
    opacity: .5;
}
.preview__page:hover{
    opacity: 1;
}
.preview__page .preview__page_img{
    max-height: 465px;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.preview__page .preview__page_img img{
    width: 100%;
    transition: transform 1s ease;
    will-change: transform;
}
.preview__page_img:hover img {
    transform: translateY(calc(-100% + 465px));
    transition: transform 3s linear;
}
.portfolio .portfolio__inner .swiper-slide.swiper-slide-next .preview__page{
    opacity: 1;
}
.portfolio .portfolio__inner .portfolio__header{
    margin-top: 15px;
}
.portfolio .portfolio__inner .portfolio__header .portfolio__header_title{
    font-size: var(--font-family-text);
    font-family: var(--font-family-text);
    margin-bottom: 5px;
}
.portfolio .portfolio__inner .portfolio__header .portfolio__header__description{
    margin-bottom: 5px;
}
/* Contact */
.contact{
    padding: var(--padding-section);
}
.contact .contact__inner{
    display: flex;
    gap: var(--gap);
}
.contact .contact__inner .contact__main{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 2.1rem;
}
.contact .contact__inner .contact__main .carousel__card{
    width: calc(50% - 10px);
    justify-content: center;
    height: 135px;
    gap: 5px;
    margin: 0;
}
.contact .contact__inner .contact__main .carousel__card .carousel__card_icon svg{
    max-width: 60px;
}
.contact .contact__inner .contact__main .carousel__card .carousel__card_title{
    font-size: var(--font-size-text);
}
.contact__card__inner{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
}
.contact__card{
    display: flex;
    gap: 20px;
    border-radius: var(--border-radius);
}
.contact__card .contact__card_icon{
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 10px;
    position: relative;
}
.contact__card .contact__card_icon::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-primary);
    top: 0;
    left: 0;
    opacity: 0.2;
}
.contact__card .contact__card_icon .svg__stroke path{
    stroke: var(--color-primary);
}
.contact__card .contact__card_icon .svg__fill path,
.contact__card .contact__card_icon .svg__fill polygon{
    fill: var(--color-primary);
}
.contact__card .contact__card__description .contact__card__description_title{
    font-family: var(--font-family-text);
    font-size: var(--font-size-subttile);
    margin-bottom: 5px;
    margin-top: 7px;
}
.contact__card .contact__card__description .contact__card__description_text{
    margin-bottom: 0;
    line-height: 25px;
}
#map{
    width: 100%;
    height: 300px;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
    border-radius: var(--border-radius);
}
#map:hover{
    filter: grayscale(0%);
}
.leaflet-touch .leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:last-child{
    background: var(--color-background);
}
/* Footer */
.footer{
    position: relative;
    margin-top: 2rem;
    padding: 5rem 0;
}
.footer .separator{
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    height: 1px;
    background: linear-gradient(to right,#121212 , #2f2f2f, #5a5a5a);
}
.footer .footer__inner{
    display: flex;
        justify-content: space-between;

    gap: calc(var(--gap) + 10px);
}
.footer .footer__inner .footer__row{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.footer .footer__inner .footer__row ul{
    margin-top: -2px;
    gap: 1.2rem;
}
.footer .footer__inner .footer__row ul li a:hover{
    color: var(--color-primary);
}
.footer .footer__inner .footer__row .logo h2{
    font-size: calc(var(--font-size-title) + 10px);
}
.footer .footer__inner .footer__row h2{
    color: var(--color-background-light);
    line-height: 45px;
    font-size: calc(var(--font-size-title) - 15px);
    font-family: var(--font-family-text);
    position: relative;
    width: max-content;
}
.footer .footer__inner .footer__row:nth-child(1){
    width: 22.5%;
}
.footer .footer__inner .footer__row:nth-child(2){
    width: 15%;
}
.footer .footer__inner .footer__row:nth-child(3){
    width: 15%;
}
.footer .footer__inner .footer__row:nth-child(4){
    width: 22.5%;
}
.footer .footer__inner .footer__row:nth-child(5){
    width: 5%;
}
.footer .footer__inner .footer__row .social__media{
    flex-direction: column;
    align-items: center;
    margin-top: .7rem;
    gap: .7rem;
}
.footer .footer__inner .footer__row .social__media a{
    width: 2rem;
    height: 2rem;
    padding: .45rem;
}
/* Copyright*/
.copyright{
    background: var(--color-primary);
    padding: .5rem 0;
    text-align: center;
}
.copyright p{
    color: var(--color-background);
    margin-bottom: 0;
}
.copyright p > b{
    font-size: var(--font-family-logo);
    color: var(--color-background);
}
/* Back to top Button */
.back__top{
    position: fixed;
    bottom: 10%;
    background: #fff;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: var(--box-shadow);
    padding: .7rem;
    z-index: 99;
    cursor: pointer;
    width: auto;
    overflow: hidden;
    transition: none; 
    opacity: 0;
    visibility: hidden;
}
.back__top .back__top_background{
    width: 0;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: var(--color-primary);
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    transition: width 0.3s ease-in-out;
    z-index: 1;
}
.back__top:hover .back__top_background{
    width: 100% !important;
}
.back__top .back__top_inner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    position: relative;
    z-index: 2;
}
.back__top .back__top_inner span{
    font-size: var(--font-size-text);
    color: var(--color-background);
    font-family: var(--font-family-text);
    min-width: 75px;
    display: block;
}
.back__top .back__top_inner .back__top_icon{
    width: 30px;
    height: 30px;
    background: var(--color-primary);
    border-radius: 50%;
    padding: 0.3rem;
    transition: all 0.3s ease-in-out;

     position: relative;
    will-change: transform, background-color; /* Optimización */
}
.back__top:hover .back__top_inner .back__top_icon{
    background: #fff !important;  
}
/* Estilo cuando está en el footer */
.in-footer {
    opacity: 0.3 !important;
    transition: opacity 0.3s ease-out;
}
/* Reviews */
.reviews{
    overflow: hidden;
    padding: var(--padding-section);
}
.carousel__review_card{
    padding: 1.3rem .7rem;
    border: 1px solid var(--color-border); 
    display: flex;
    flex-direction: column;
    gap: .8rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
    transition: all .8s ease-in;
    min-height: 200px;
}
.carousel__review_card .carousel__review_title{
    font-family: var(--font-family-text);
    font-size: var(--font-size-subttile);
    transition: all .8s ease-in;
}
.carousel__review_card p,
.carousel__review_card p span{
    transition: all .8s ease-in;
}
.carousel__review_card .stars{
    display: flex;
    gap: 5px;
}
.carousel__review_card .stars svg{
    width: 20px;
}
.carousel__review_card .stars svg.star__background{
    fill: var(--color-primary);
}
.carousel__review_card .stars svg.star__border{
    stroke: var(--color-primary);
}
.carousel__review_card .carousel__review_background{
    position: absolute;
    background: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: -100px;
    bottom: -100px;
    z-index: -1;
    transition: all .8s linear;
}
.carousel__review_card:hover .carousel__review_background{
    width: 700px;
    height: 700px;
}
.carousel__review_card:hover .carousel__review_title,
.carousel__review_card:hover p,
.carousel__review_card:hover p span{
    color: var(--color-background);
}
/* Logo */
.beecode__logo{
    width: 200px;
    height: auto;
}
.beecode__logo text {
    fill: none;
    stroke: #ffff;
    stroke-width: 1;
    font-size: 80px;
    font-family: var(--font-family-logo);
}
.beecode__logo_preloader{
    width: 100%;
    height: 100%;
}
#beecode__logo_preloader{
    font-size: 60px;
    stroke: #fff;
    stroke-width: 1;
}
.beecode__logo_responsive{
    width: 250px;
}
.beecode__logo_footer text{
    fill: #fff;
}
/* Whatsapp button */
#whatsapp__button{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    padding: 8px;
    background-color:#25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow);
    z-index: 1000;
    transition: background-color 0.3s ease-in-out;
}
#whatsapp__button:hover{
    opacity: .9;
}
/* Page content */
.page__content{
    padding: var(--padding-section);
    margin: 0 auto;
    max-width: 775px;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page__content h1{
    margin-bottom: 15px;
    text-align: center;
}
.page__content h2{
    font-size: var(--font-size-subttile);
    font-family: var(--font-family-medium);
    margin-bottom: 15px;
    letter-spacing: .05em;
}
.page__content ul{
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
.page__content ul li{
    font-family: var(--font-family-text);
    font-size: var(--font-size-text);
    color: var(--color-text-secondary);
}
/* Form message */
#form__message{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background: rgba(255,255,255, .1);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-primary);
}
/* MEDIA QUERYS */
/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    /*Navbar*/
    .icon__hamburger{
        display: flex;
        order: 2;
    }
    .navbar .navbar__inner{
        display: flex;
        justify-content: space-between;
    }
    .navbar .navbar__inner .navbar__options{
        order: 1;
        width: auto;
        justify-content: flex-start;
        display: none;
    }
    .navbar .navbar__inner #navbar,
    .navbar .navbar__inner .navbar__background{
        flex-direction: column;
        position: fixed;
        left: -100%;
        top: 0;
        gap: 2.5rem;
        min-height: 100vh;
        background: var(--color-background);
        z-index: 9999;
        width: calc(100% - 10px);
        max-width: 350px;
        box-shadow: var(--box-shadow);
        padding: 2rem;
        align-items: flex-start;
        justify-content: flex-start !important;
        transition: none;
        margin: inherit;
    }
    .navbar .navbar__inner .navbar__background{
        z-index: 9998;
        max-width: 355px;
        background: var(--color-primary);
    }
    /* .navbar .navbar__inner > ul.active{
        left: 0;
        transition: all .5s ease;
    } */
    /* .navbar .navbar__inner > .logo{
        display: none;
    } */
    .navbar .navbar__inner .navbar__options,
    .navbar .navbar__inner #navbar{
        width: 100%;
    }
    .navbar .navbar__inner .navbar__main > .logo{
        display: block;
        margin-bottom: -7px;
    }
    .navbar .navbar__inner .navbar__main > ul{
        flex-direction: column;
    }
    /* .navbar .navbar__inner .navbar__main > ul li{
        transform: translateX(-300px);
    } */
    .navbar .navbar__inner .navbar__main > ul li a{
        font-size: 1.3rem;
        letter-spacing: .08rem;
    }
    .navbar__overlayed{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, .8);
        z-index: 9997;
        cursor: pointer;
        visibility: hidden;
        opacity: 0;
    }
    .navbar .social__media{
        display: flex;
    }
    .navbar .social__media a{
        width: 30px;
        height: 30px;
    }
    /* Banner */
    .banner .banner__inner{
        max-height: 590px;
        flex-wrap: wrap;
    }
    .banner .banner__inner .banner__aside, 
    .banner .banner__inner .banner__article {
        width: 100%;
        height: auto;
    }
    .text__circle{
        top: -50px;
        right: 60px;
    }
    .banner .banner__inner .banner__aside h2{
        font-size: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .banner .banner__inner .banner__aside .banner__title{
        margin-bottom: 15px;
    }
    .banner .banner__inner .banner__aside .banner__title span{
        font-size: 12.5vw;
        line-height: 11vw;
    }
    .carousel__banner{
        margin-top: 0;
    }
    /* Service */
    .services .services__aside{
        width: 100%;
    }
    .tabs__with_images .tab+.tab__image{
        position: relative;
        left: inherit;
        width: 100%;
        height: 300px;
        top: 0;
    }
    .tabs__with_images .tab{
        padding: 7px 0;
    }
    .tabs__with_images .tab .tab__content{
        gap: 10px;
    }
    .tabs__with_images .tab .tab__content .tab__content_title{
        font-size: calc(var(--font-size-text) + 2px);
    }
    /* Carousel text */
    .text__with_animation .text__icon{
        right: 0;
        width: 30px;
        height: 30px;
    }
    .text__with_animation .text__icon span{
        margin-top: 12px;
    }
    .text__with_animation .text__stroke{
        font-size: 4.13vw;
        padding-right: 4vw;
    }
    /* Contact */
    .contact .contact__inner .contact__main{
        margin-top: 1rem;
    }
    .contact__card__inner{
        grid-template-columns: repeat(1, 1fr);
        gap: 5px;
    }
    #map{
        height: 200px;
    }
    /*Footer*/
    .footer .footer__inner{
        flex-wrap: wrap;
        gap: 20px;
    }
    .footer .footer__inner .footer__row:nth-child(1){
        width: 100%;
        order: 1;
    }
    .footer .footer__inner .footer__row:nth-child(2){
        width: calc(25% - 20px);
        order: 2;
    }
    .footer .footer__inner .footer__row:nth-child(3){
        width: calc(25% - 20px);
        order: 3;
    }
    .footer .footer__inner .footer__row:nth-child(4){
        width: calc(35% - 20px);
        order: 4;
    }
    .footer .footer__inner .footer__row:nth-child(5){
        width: calc(10% - 20px);
        order: 5;
    }
}
@media (max-width: 768px) {
    :root {
        --padding-section: .5rem 0;
    }
    /* General */
    .section__subtitle,
    .section__subtitle > span{
        font-size: calc(var(--font-size-subttile) - 5px);
    }
    .section__title,
    .section__subtitle span{
        font-size: calc(var(--font-size-subttile) - 2px);
    }
    .section__head > .section__subtitle,
    .section__head > .section__subtitle  span{
        font-size: calc(var(--font-size-subttile) - 2px);
    }
    .section__subtitle::after{
        width: 7px;
        height: 7px;
        left: -18px;
    }
    .section__head > .section__title,
    .section__head > .section__title > span{
        font-size: calc(var(--font-size-title) - 12px);
        line-height: calc(var(--font-size-title) - 5px);
    }
    .column__50{
        width: 100%;
    }
    /*Social bar*/
    .social__bar .social__bar__inner{
        flex-wrap: wrap;
        gap: 10px;
    }
    /*Navbar*/
    .icon__hamburger{
        display: flex;
        order: 2;
        padding: 0;
        width: 23px;
        height: 23px;
        min-width: 23px;
    }
    .navbar .navbar__inner{
        display: flex;
    }
    .navbar .navbar__inner .navbar__options{
        order: 1;
        width: auto;
        justify-content: flex-start;
        display: none;
    }
    .navbar .navbar__inner #navbar,
    .navbar .navbar__inner .navbar__background{
        flex-direction: column;
        position: fixed;
        left: -100%;
        top: 0;
        gap: 2.5rem;
        min-height: 100vh;
        background: var(--color-background);
        z-index: 9999;
        width: calc(100% - 10px);
        max-width: 310px;
        box-shadow: var(--box-shadow);
        padding: 2rem;
        align-items: flex-start;
        justify-content: flex-start !important;
        transition: none;
        margin: inherit;
    }
    .navbar .navbar__inner .navbar__background{
        z-index: 9998;
        max-width: 320px;
        background: var(--color-primary);
    }
    /* .navbar .navbar__inner > ul.active{
        left: 0;
        transition: all .5s ease;
    } */
    .navbar .navbar__inner > .logo .beecode__logo{
        width: 150px;
    }
    .navbar .navbar__inner .navbar__options,
    .navbar .navbar__inner #navbar{
        width: 100%;
    }
    .navbar .navbar__inner .navbar__main > .logo{
        display: block;
        margin-bottom: -7px;
    }
    .navbar .navbar__inner .navbar__main > ul{
        flex-direction: column;
    }
    /* .navbar .navbar__inner .navbar__main > ul li{
        transform: translateX(-300px);
    } */
    .navbar .navbar__inner .navbar__main > ul li a{
        font-size: 1.3rem;
        letter-spacing: .08rem;
    }
    .navbar__overlayed{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, .8);
        z-index: 9997;
        cursor: pointer;
        visibility: hidden;
        opacity: 0;
    }
    .navbar .social__media{
        display: flex;
    }
    .navbar .social__media a{
        width: 30px;
        height: 30px;
    }
    /*Banner*/
    .banner {
        margin-top: 40px;
    }
    .banner .banner__inner{
        flex-wrap: wrap;
        height: auto;
        max-height: inherit;
        padding: var(--padding-section);
        gap: 20px;
    }

    .banner .banner__inner .banner__aside .banner__title span {
        font-size: 13vw;
        line-height: 12vw;
    }
    .banner .banner__inner .banner__aside{
        margin-bottom: 10px;
    }
    .banner .banner__inner .banner__aside,
    .banner .banner__inner .banner__article{
        width: 100%;
    }
    .banner .banner__inner .banner__aside h2{
        font-size: 15px;
        margin-top: -15px;
        margin-bottom: 25px;
    }
    .carousel__banner{
        margin-top: 0;
    }
    .carousel__banner .carousel__image > span{
        font-size: 15px;
        margin-right: 10px;
    }
    .text__circle{
        top: -45px;
        right: -10px;
        width: 80px;
        height: 80px;
    }
    /* Services */
    .tabs__with_images .tab+.tab__image{
        position: relative;
        left: inherit;
        width: 100%;
        height: 200px;
        top: 0;
    }
    .tabs__with_images .tab{
        padding: 7px 0;
    }
    .tabs__with_images .tab .tab__content{
        gap: 10px;
    }
    .tabs__with_images .tab .tab__content .tab__content_title{
        font-size: calc(var(--font-size-text) + 2px);
    }
    /*Carousel text*/
    .text__with_animation .text__icon{
        right: -7vw;
        top: 10px;
        width: 30px;
        height: 30px;
    }
    .text__with_animation .text__icon span{
        margin-top: 12px;
        font-size: 11vw;
    }
    .text__with_animation .text__stroke{
        font-size: 9vw;
        padding-right: 0vw;
    }
    /* Portfolio */
    .pagination__round .swiper-pagination-bullet{
        min-width: 33px;
        min-height: 33px;
    }
    .pagination__round .swiper-pagination-bullet span{
        font-size: 0.7rem;
    }
    /* Contact */
    .contact .contact__inner{
        flex-wrap: wrap;
    }
    .contact .contact__inner .contact__main{
        margin-top: 1rem;
    }
    .contact__card__inner{
        grid-template-columns: repeat(1, 1fr);
        gap: 5px;
    }
    #map{
        height: 200px;
    }
    /*Footer*/
    .footer .footer__inner{
        flex-wrap: wrap;
        gap: 20px;
    }
    .footer .footer__inner .footer__row:nth-child(1){
        width: 100%;
        order: 1;
    }
    .footer .footer__inner .footer__row:nth-child(2){
        width: calc(50% - 20px);
        order: 2;
    }
    .footer .footer__inner .footer__row:nth-child(3){
        width: calc(50% - 20px);
        order: 3;
    }
    .footer .footer__inner .footer__row:nth-child(4){
        width: calc(80% - 20px);
        order: 4;
    }
    .footer .footer__inner .footer__row:nth-child(5){
        width: calc(20% - 20px);
        order: 5;
    }
}