style.scss

$main: #bf281f;
$blue: #335eea;
$lightblue: #d9e4ff;
$darkgray: #bf281f;
$gotic: "League Gothic", sans-serif;
$pt: 'PT Sans', sans-serif;
$spline: "Spline Sans", "Helvetica Neue", Helvet;

// Define variables for scaling values
$hoverScale: 1.1;
$clickScale: 1.2;


body {
    overflow-x: hidden;

    &.main {
        background:$main;
        overflow: hidden;
    }
}

.shape-red-area {
    color: $darkgray;
}

.red-area {
    background: $darkgray;
}


@media(min-width : 768px) {
    .container-fluid {
        padding-left: 4.688rem;
        padding-right: 4.688rem;
    }
}

.navbar {
    margin-top: 2.2em;
}

.navbar-brand img {
    max-width: 210px;
}

.dropdown-menu {
    border: none;
    box-shadow: 0 0 15px #666;
    transition: all 0.8s ease-in-out;
    
    a {
        padding: 0.3em 2em;
    }
}

.nav-item.dropdown.show .nav-link {
    color: $main;
}

.show > .dropdown-menu {
    animation-name: slidenavAnimation;
    animation-duration:.4s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes slidenavAnimation {
    from {
        opacity: 0;
        margin-top: 25px;
    }
    to {
        opacity: 1;
        margin-top: -5px;
    }
}

.dropdown-item:hover,
.dropdown-item:active {
    background: none;
}




.form-check.form-switch label:hover,
.form-check.form-switch input:hover {
    cursor: pointer !important;
}

.form-switch {

    padding-left: 0;
}

.form-switch label {
    user-select: none; 
    background: #eee;
    padding: 0.3em;
    min-width: 90px;
    border-radius: 4px;
    text-align: center;
}



.nav-link .current,
.navbar-nav .current,
.navbar-nav .current-link {
    position: relative;
    color: $main;

    @media only screen and (max-width: 992px) {
        &::before {
            content: "";
            position: fixed;
            width: 140%;
            height: 40px;
            background: #000;
            z-index: -1;
            margin-left: -25px;
        }
    }

    @media only screen and (min-width: 1367px) {
        &::before {
            content: "•";
            position: absolute;
            width: 10px;
            height: 10px;
            top: -2px;
            left: 13px;
            font-size: 1.7rem;
        }
    }

    
}

.navbar-nav .current:before {
        content: "\2B23"; /* Carácter ASCII de hexágono horizontal */
        position: absolute;
        top: -15px;
        left: 37%;
        font-size: 20px;
        color: $main;
}

.navbar-nav {
    font-weight: bold;
    font-size: 1.1rem;
    font-family: $pt;
    li {
        margin: 0 0.7rem 0 0;
        a:hover {
            color: $main;
        }
    }
}


#quote {
    
    background-size: cover;
    margin: 4em 0 0 0;
    position: relative;


    @media only screen and (min-width: 360px) {
        padding: 7em 10%;
    }

    @media only screen and (min-width: 992px) {
        padding: 15em 10%;
    }


    &::before {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: url("/images/home_lab.webp") no-repeat center center;
        opacity: .35;
        background-size: cover;
        content: "";
        width: 100%;
        height: 100%;
        z-index: -1;
        filter: grayscale(100%);
        animation: myfirst 3s ;
    }
      /* Standard syntax */
      @keyframes myfirst {
        from {opacity: 0;}
        to {opacity: 0.35;}
      }

    h3 {
        font-family: $spline;
        
        text-indent: 1.6em;
        position: relative;
        color: #444;

        @media only screen and (min-width: 360px) {
            font-size: 1.2rem;
            line-height: 1.8rem;
        }
    
        @media only screen and (min-width: 992px) {
            font-size: 2.2rem;
            line-height: 3.2rem;
        }
        
        &::before {
            content: "“";
            width: 50px;
            font-size: 12rem;
            position: absolute;
            margin-top: 45px;
            left: -70px;
            font-family: $pt;
            color: $main;

            @media only screen and (min-width: 360px) {
                font-size: 10rem;
                position: absolute;
                margin-top: 45px;
            }
        
            @media only screen and (min-width: 992px) {
                font-size: 12rem;
                position: absolute;
                margin-top: 45px;
            }
        }

        &::after {
            content: "”";
            width: 30px;
            
            position: absolute;
            
            font-family: $pt;
            color: $main;
            @media only screen and (min-width: 360px) {
                font-size: 10rem;
                margin-top: 45px;
                margin-left: -35px;
            }
        
            @media only screen and (min-width: 992px) {
                font-size: 12rem;
                margin-top: 45px;
                margin-left: -45px;
            }
        }

        span {
            color: $main;
            font-weight: bold;
        }
    }
}


#data-container {
    margin: 0;
    padding: 3.5em 0 2.5em 0;


    


    h1 {
        font-family: $spline;
        font-size: 1.6rem;
        text-align: center;
        margin: 2em 0 2.5em 0;
        color: #555;

        b {
            color: $main;
            display: block;
            line-height: 2.7rem;
        }
    }

    .counter {
        font-family: $gotic;
        font-size: 6.5rem;
        position: relative;
        display: inline-block;
        margin-bottom: 0.8em;
        color: $main;
    }      

    .counter-labels h2 {
        font-family: $spline;
        font-size: 2rem;
        font-weight: bold;
        margin: -1em 0 1em 0;
        position: relative;
        overflow: hidden;
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
            font-size: 1.4rem;
        }

        @media only screen and (min-width: 1200px) {
            font-size: 1.45rem;
        }

        @media only screen and (min-width: 1367px) {
            font-size: 2rem;
        }

    }

    .counter-fill-1,
    .counter-fill-2,
    .counter-fill-3 {
        width: 0;
        height: 3px;
        background: $main;
        margin-bottom: 2em;
    }

    .col {
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
            padding: 0 2em;
        }
    
        @media only screen and (min-width: 1200px) {
            padding: 0 4em;
        }
    
        @media only screen and (min-width: 1367px) {
            padding: 0 6em;
        }
    }

   
}

#content_h1 {
    text-align: center;

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        margin: 0 auto 0 auto;
    }

    @media only screen and (min-width: 1200px) {
        margin: 8em auto 0 auto;
    }

    h1 {
        font-family: $gotic;
        text-transform: uppercase;
        line-height: 7.5rem;

        @media (max-width: 767px) {
            font-size: 4rem;
            line-height: 4.5rem;
        }
        
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
            font-size: 7rem;
        }

        @media only screen and (min-width: 1200px) {
            font-size: 6.5rem;
        }

        @media only screen and (min-width: 1367px) {
            font-size: 8rem;
        }

        span {
            color: $main;
        }
    }
}


#content_wrapper {
    max-width: 650px;
    margin: 0 auto;

    p {
        font-size: 1.2rem;
        color: #666;
    }

    h2, h3 {
        font-family: $pt;
        color: #666;
    }

    h3 {
        color: #666;
    }
     
    h3 {
        margin: 1em 0 0.3em 0
    }
}

#content_wrapper {
    h2.lead {
        margin: 0 0 1.5em 0;
        line-height: 1.3em;

        @media (max-width: 767px) {
            font-size: 1.4rem;
        }

        @media (min-width: 768px) and (max-width: 1024px) {
            font-size: 1.4rem;
        }

        @media (min-width: 1025px) {
            font-size: 1.7rem;
        }

        
    }
}

.caption-lead {
    font-size: 1.4rem;
    border-top: 10px solid $main;
    border-right: 10px solid $main;
    padding-right: 1.5em;
    padding-top: 1em;
    padding-bottom: 0.5em;
}

#maquinaria {
    .adjust {
        position: relative;
        z-index: 2;
        background: #fff;
    }

    .youtube-container {
        margin-top: -10em !important;

        iframe {
            margin-top: 150px;
        }
    }

    .ratio #over_text {
        top: 10% !important;
    }
}

.youtube-container {
    padding: 3em;
    overflow: hidden;
    aspect-ratio: 16/9;
    /* No clicking/hover effects */
    pointer-events: none;

    .img-box {
        margin-left: -200px;
        position: absolute;
        max-width: 48%;
        z-index: 0;
    
    }
} 

.youtube-container iframe {
    /* Extend it beyond the viewport... */
    width: 300%;
    height: 100%;
    /* ...and bring it back again */
    margin-left: -100%;
}

.home_top {

    @media only screen and (min-width: 1300px) {
        padding: 4em 0 4em 2em !important;
    }

    .youtube-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio (height/width) */
        overflow: hidden;
        max-width: 95%;
        margin-top: -5%;
        margin-left: 60px !important;

        iframe {
            position: absolute;
            left: 0;   
        }
    }

    h1 {
        padding-top: .5em;
        font-family: $gotic;

        @media only screen and (min-width: 1200px) {
            font-size: 4rem !important;
        }

        @media only screen and (min-width: 1500px) {
            font-size: 6rem !important;
        }
    }

    p.lead {
        @media only screen and (min-width: 1200px) {
            font-size: 1.2rem !important;
        }

        @media only screen and (min-width: 1500px) {
            font-size: 1.3rem !important;
        }
    }
    h1, .lead {
        color: #fff;
    }

    .lead {
        font-size: 1.3rem;
        font-family: $pt;
    }

    .btn {
        margin-right: 0.4em;
        border: 2px solid #fff !important;
        &:hover {
            background: #000 !important;
            color: #fff !important;
            border: 2px solid #fff !important;
        }
    }
}

#home_top {
    margin-top: -10em;
    z-index: -1;
    text-align: center;

    h1 {
        text-shadow: 0 0 10px rgb(66, 0, 0);

        @media only screen and (min-width: 992px) and (max-width: 1199px) {
            font-size: 5rem;
        }

        @media only screen and (min-width: 1200px) {
            margin-top: 2em;
            font-size: 5rem !important;
        }

        @media only screen and (min-width: 1500px) {
            margin-top: 1.3em;
            font-size: 6.6rem !important;
        }
    }

    h2 {
        text-shadow: 0 0 10px rgb(66, 0, 0);
        color: #fff;
        font-family: $pt;
        @media only screen and (min-width: 1200px) {
            font-size: 2.7rem;            
        }

        @media only screen and (min-width: 1500px) {
            font-size: 3rem;
        }
    }
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

#home_top_nav, #section_top_nav {
    background: #fff;
    width: 100%;
    margin-top: 0;
    padding: 1.5em 0 1.6em 0;

        #navbarNav,
        .form-check.form-switch {
            font-weight: normal;
            margin-top: 0.2em;
            label {
                padding: 0.2em 0.3em 0.3em 0.3em !important;
            }
        }
}

#section_top_nav .navbar-brand {
    @media only screen and (min-width: 360px) {
        margin: 0 auto;
    }

    @media only screen and (min-width: 992px) {
        margin: 0;
    }
}

.ratio {
    margin: 6em 0 2em 0;

    &::before {
        content: "";
        width:  100%;
        height: 100%;
        background: $main;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        opacity: .5;
    }

    #over_text {
        position: absolute;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: all;

        h1 {
            color: #fff;
            font-family: $gotic;
            @media only screen and (min-width: 992px) and (max-width: 1199px) {
                font-size: 5rem;

            }
    
            @media only screen and (min-width: 1200px) {
                font-size: 6rem;
            }
        }

        


        p.lead {
            color: #fff;
            font-weight: 600;
            font-size: 1.5rem;
            text-shadow: 0 0 10px #8f2525;
            font-family: $spline;
        }

        button {
            margin-right: 0.5em;
        }

        button:hover {
            background: #000;
            color: #fff;
        }
    }
}
  

// INDUSTRIES ---------------------------------------------------------------- //
#hero__content.industries {
    padding: 0 !important;
}

#block__wrapper.static #hero__content {
    position: relative;
    z-index: 2;
}

#block__wrapper.static {
    h1, h2 {
        text-shadow: 0 0 8px #000;
    }
}

#block__wrapper.static {
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding: 0 .5em;

    @media only screen and (max-width: 768px) {
        min-height: 280px;
    }

    @media only screen and (min-width: 992px) {
        padding: 8em 10em;
    }
}

#maquinaria #block__wrapper.static {

    @media only screen and (max-width: 768px) {
        min-height: 540px;
    }
    
    @media only screen and (min-width: 1300px) {
        padding: 8em 10em;
    }
}

#block__wrapper.kenburn::before {
    animation: burns 25s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#block__wrapper.static.espumas::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url("images/products_opt/ESPUMAS\ Poli.webp");
    background-size: cover;
}

#block__wrapper.static.machines::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url("images/machine1-back.webp");
    background-size: cover;
    background-position: bottom center;
}


#block__wrapper.static.refrigeracion::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url("images/products_opt/refrigeration.png");
    background-size: cover;
    background-position: center center;
}


#block__wrapper.static.construction::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url("images/products_opt/constructors.png");
    background-size: cover;
    background-position: bottom center;
}

#block__wrapper.static.auto::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url("images/products_opt/car3.webp");
    background-size: cover;
    background-position: center center;
}

#block__wrapper.static.calzado::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url("images/products_opt/supermarket.png");
    background-size: cover;
    background-position: center center;
}

#block__wrapper.static.green::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url("images/green.webp");
    background-size: cover;
    background-position: center center;
}

#block__wrapper.static.mining::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-image: url("images/products_opt/mining.webp");
    background-size: cover;
    background-position: center center;
}

#block__wrapper.static.aplications {
    position: relative;
    overflow: hidden;
}

#block__wrapper.static.aplications::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure the video is above other content */
    left: 0;
    top: 0;
    // background-image: url("images/products_opt/aplicaciones.webp");
    // background-size: cover;
    // background-position: center center;
}

#block__wrapper.static.aplications #video-background {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* Place the video behind other content */
}

@keyframes burns {
    0% {
      transform: scale(1);
      transform-origin: bottom left;
    }
    50% {
      transform: scale(1.3);
      transform-origin: center center;
    }
    100% {
      transform: scale(1);
      transform-origin: top right;
    }
}

.productos {
    #box-shadow {
        box-shadow: 0px 3px 12px -1px rgba(0, 0, 0, 0.38);
        position: relative;
    }
}

#products_page {


    @media only screen and (max-width: 992px) {
        #product_1,
        #product_2,
        #product_3,
        #product_4,
        #product_5,
        #product_6,
        #product_7 {
            padding: 3em 0;
            height: 65vh;
        }

        h1  {
                margin-top: 1em;
            }

            p.lead {
                padding: 0;
            }
        
        ul {
            bottom: 10px !important;
            position: absolute !important;
            min-width: auto !important;
            width: 95vw !important;
            display: block !important;
            opacity: 1 !important;
            margin: 0 auto !important;
            left: auto !important;
            right: auto !important;
        }
    }

    .container-row {
        border-top: .3em solid $main;
        position: relative;
        
        @media only screen and (min-width: 992px) {
            min-height: 100vh;
        }

        &:first-child {
            border-top: none;
        }

        &:last-child {
            border-bottom: 10px solid $main;
        }
    }
    #product_1,
    #product_2,
    #product_3,
    #product_4,
    #product_5,
    #product_6,
    #product_7 {
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;        
    }

    #product_1 {
        background-image: url("/images/products_img/FOTO POLIOLES.webp");
    }

    #product_2 {
        background-image: url("/images/products_img/FOTO ISOCIANATOS.webp");
    }

    #product_3 {
        background-image: url("/images/products_img/sample.png");
    }

    #product_4 {
        background-image: url("/images/products_img/FOTO SISTEMAS PU FLEX.webp");
        background-position: center center !important;
    }

    #product_5 {
        background-image: url("/images/products_img/SISTEMAS PU RIGIDOS.webp");
        background-position: right center !important
    }

    #product_6 {
        background-image: url("/images/products_img/FOTO SISTEMAS PU MICROCEL.webp");
    }

    #product_7 {
        background-image: url("/images/products_img/FOTO GLICOLES.webp");
        background-position: center center !important;
    }

    


    .product_info {
        h2 {
            font-family: $spline;
            letter-spacing: -1px;
            font-weight: bold;
            font-size: 2.2rem;
            margin-top: -.2em;
        }
        p.lead {
            @media only screen and (min-width: 360px) {
                font-size: 1.1rem;
            }

            @media only screen and (min-width: 1300px) {
                font-size: 1.2rem;
            }
        }

        @media only screen and (min-width: 360px) and (max-width: 991px) {
            padding: 0 3em;     
        }

        @media only screen and (min-width: 992px) {
            padding: 1.2em 4em;
        }

        @media only screen and (min-width: 1300px) {
            padding: 0 7em;
        }
    }

    h1 {
        font-family: $gotic;
        @media only screen and (min-width: 360px) and (max-width: 991px) {
            font-size: 3rem;     
        }

        @media only screen and (min-width: 992px) {
            font-size: 3.8rem;
            margin-top: 0.4em;
        }

        @media only screen and (min-width: 1300px) {
            font-size: 5rem;
            margin-top: 1.1em;
        }
    }


    ul {
        background: $main;
        color: #fff;
        width: auto;
        display: inline-block;
        position: absolute;
        bottom: 2em;
        opacity: 0;
        padding: 0.6em;
        margin: 0;
        
        @media only screen and (min-width: 360px) {
            min-width: 400px;
            max-width: 440px;
        }

        @media only screen and (min-width: 1300px) {
            max-width: 500px;
        }

        &.ul_left  { right: 3em; text-align: right; }
        &.ul_right { left: 3em; text-align: left; }

        li {
            font-family: $pt;
            list-style-type: none;
            padding: 0.3em 0.8em;

            

            @media only screen and (min-width: 360px) {
                font-size: 1rem;
                line-height: 1.4rem;
            }
    
            @media only screen and (min-width: 1300px) {
                font-size: 1.05rem;
                line-height: 1.4rem;
            }

            &:nth-child(odd) {
                background-color: #a520199d;
            }
        }

        &.pop-in {
            animation: pop-in .4s linear forwards;
        }
    }

    @keyframes pop-in {
        0% {
            opacity: 0;
            transform: scale(0.9);
        }

        80% {
            opacity: 1;
            transform: scale(1.03);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
        
    }
}

.modal-header {
    border: none !important;
}
.modal-body {
    padding-top: 0;

    input {
        margin-top: 1.2em;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #ccc;
        padding: 0;
        transition: border-bottom 0.3s ease, color 0.3s ease, font-size 0.3s ease;

        &:focus {
            border: none !important;
            border-bottom: 1px solid $main !important;
            outline: none !important;
            box-shadow: none !important;

            + label {
                color: $main !important;
                font-size: 1rem;
            }
        }
    }

    label {
        font-size: 0.8rem;
        color: #555;
        transition: color 0.3s ease, font-size 0.3s ease;
    }
}

#mensaje_form {
    background: #eee;
    padding: 1em;
    margin-bottom: 4em;
    font-family: $spline;
    font-size: 0.9rem;

    p {
        margin: 0;
        padding: 0;
    }
}

#modal_box {
    padding: 0 1.8em;
    h2 {
        font-family: $spline;

        @media only screen and (max-width: 991px) {
            font-size: 1.4rem;
        }
        
        @media only screen and (min-width: 992px) {
            font-size: 1.8rem;
        }
    }

    h3 {
        font-size: 1.2rem;
        font-family: $pt;
    }
    h2, h3 {
        color: #333;
        font-weight: bold;
    }
}

#formProducts {
    .btn {
        margin: 2em 0;
        font-size: 1.1rem;
        padding: 0.5em 1em;
        width: 100%;
        border-radius: 3px;
        background: $main;
        border: 1px solid $main;
        font-weight: bold;
        &:hover {
            border: 1px solid $main;
            color: #000;
            background: #fff !important;
        }
    }
}

#industries {
    .card {
        @media only screen and (min-width: 360px) and (max-width: 991px) {
            min-height: 250px;
            max-height: 250px;       
        }

        @media only screen and (min-width: 992px) and (max-width: 1199px) {
            min-height: 320px;
            max-height: 320px;
        }
        @media only screen and (min-width: 1199px) {
            min-height: 270px;
            max-height: 270px;
        }

        @media only screen and (min-width: 1536px) {
            min-height: 255px;
            max-height: 255px;
        }

        background-color: #fff;
        border-radius: 0;
        margin: 0 0.6em 0 0; 
    }
    
    .box_sq_data {
        display: none;
        height: 100%;
        background-color: #fff;
        padding-top: 1em;
        color: #666;

        ul {
            list-style-type: none;
            padding: 0;
            font-family: $spline;
            font-size: 0.83rem;
            margin-top: 15px;

            li a {
                display: inline;
                border-bottom: 3px solid #fff;
                margin: 0;
                transition: all 0.03s ease-in-out;

                &:hover {
                    border-bottom: 3px solid $main;
                }
            }
        }

        p {
            padding: 0em 1.4em;
            font-size: 0.8em;
            line-height: 1.3em;
            margin-bottom: 0.5em;
            text-justify: auto;
            @media only screen and (min-width: 1300px) {
                text-align: justify;
            }
        }

    }


    @media (max-width: 767px) {
        .carousel-inner .carousel-item > div {
            display: none;
        }
        .carousel-inner .carousel-item > div:first-child {
            display: block;
        }
    }

    .carousel-inner .carousel-item-prev {
        z-index: 2;
    }

    .carousel-inner .carousel-item.active,
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
        @media only screen and (min-width: 992px) {
            display: flex;
        }
    }

    /* medium and up screens */
    @media (min-width: 768px) {

        .carousel-inner .carousel-item-end.active,
        .carousel-inner .carousel-item-next {
            transform: translateX(25%) !important;
        }

        .carousel-inner .carousel-item-start.active, 
        .carousel-inner .carousel-item-prev {
            transform: translateX(-25%) !important;
        }
    }

    .carousel-inner .carousel-item-end,
    .carousel-inner .carousel-item-start { 
        transform: translateX(0) !important;
    }

    .carousel-control-next,
    .carousel-control-prev {
        opacity: 1 !important;
        z-index: 3;
        width: auto;
        padding: 0 0.5em;
        background-color: #fff;
        .carousel-control-next-icon,
        .carousel-control-prev-icon {
            background: #fff;
            border-radius: 10px;
            background-image: none;
            svg {
                fill: $main;
                transition: all 0.2s linear;
            }

            &:hover {
                svg {
                    fill: darkred;
                }
            }
        }
    }


.carousel-inner {
    padding: 2em 2em;
    position: relative;


    .card-body {
        position: absolute;
        width: 100%;
        z-index: 0;
        padding: 0;
        height: 100%;
    }
}


// SCSS for carousel-item
.no-slide .carousel-item {
    .col-md-4 {
        
        
        
        @media only screen and (max-width: 992px) {
            min-height: 250px;
            transform: translateX(0);
        }
        @media only screen and (min-width: 1300px) {
            transform: translateX(50%);
            min-height: 350px;
        }


        &:hover {
            z-index: 10 !important;
        }
    }
}


.carousel-item .card {
  background: #fff;
  padding: 0 !important;
  margin: 0 0.3em 0.5em 0.3em;
  transition: transform 0.12s ease-in-out; // Add a smooth transition on scaling
  display: flex; // Use flexbox to align items vertically
  flex-direction: column; // Stack the content vertically
  border: none;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  user-select: none;


    .card-img {
        border-radius: 0;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center the image inside the container */
        opacity: .75;
        transition: all 0.2s ease-in;
    }



  &:hover {
    transform: scale($hoverScale);
    z-index: 2;
    box-shadow: 0 0 10px #5555559f;
    box-sizing: border-box;

    .card-body {
        opacity: 0;
    }

    .card-img {
        opacity: 1;
        filter: blur(0);
    }
  }

  &.clicked {
    transform: scaleX(-1) scale($clickScale); // Flip on horizontal axis and scale on click
    box-shadow: 0 0 10px #5555559f;
    z-index: 3;
    .box_sq_data {
      display: block;

      li {
        padding: 0.1em 0;
      }
      a {
        color: $main;
        text-decoration: none;
      }
    }
    .card-body {
        transform: scaleX(-1);
        animation: fade-card 0.1s ease-in forwards;
    }

    .card-link {
        animation: fade-card 0s ease-in reverse forwards;
    }
  }

  .card-body {
    flex: 1; // Allow the card-body to occupy the available space in the container
    z-index: 0;
  }

  .card-link {
    text-align: center; // Center the text horizontally
    padding: 10px 0; // Optional: Add padding for better appearance
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -2rem;
    
    h2 {
        font-family: $spline;
        text-align: center;
        padding: 0.1em 0.3em;
        color: #333;
        font-size: 1.2rem;
        transform-origin: center center;
        font-weight: bold;
    }

    a {
        border-radius: 4px;
        background-color: #fff;
    }

    a, a > span {
        margin: 0;
        position: relative;
        color: inherit;
        text-decoration: none;
        &:before, &:after {
            content: '';
            position: absolute;
            transition: transform .5s ease;
        }
    }

  }
}





@keyframes fade-card {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


#talk_img {
    position: relative;
    min-height: 400px;
    @media only screen and (min-width: 992px) {
        padding: 25em 0;
    }

    #talk_img_back {
        position: absolute;
        background: url("images/lab_tech_3.webp") no-repeat center right;
        background-size: cover;
        transition: left 1.6s; /* Adjust the transition duration as needed */
        top: 0;
        left: 0; /* Start the image at the center of the container */
        width: 100%;
        height: 100%;
    }

    #talk_img_back_2 {
        position: absolute;
        background: url("images/FOTOMYA-E1485-128.webp") no-repeat center center;
        background-size: cover;
        transition: left 1.6s; /* Adjust the transition duration as needed */
        top: 0;
        left: 0; /* Start the image at the center of the container */
        width: 100%;
        height: 100%;
    }
}


#talk_img_back.otras {
    background: url("images/FOTOMYA-E1485-120.webp") no-repeat center center !important;
}

#talk_img_back.refrigeracion {
    background: url("images/FOTOMYA-E1485-109.webp") no-repeat center center !important;
}

#talk_img_back.automotriz {
    background: url("images/FOTOMYA-E1485-093.webp") no-repeat center center !important;
}

#talk_img_back.consumo {
    background: url("images/FOTOMYA-E1485-003.webp") no-repeat center center !important;
}

#talk_img_back.gas {
    background: url("images/FOTOMYA-E1485-051.webp") no-repeat center center !important;
}


#talk_form {
    @media only screen and (max-width: 992px) {
        padding: 3em;
    }
    @media only screen and (min-width: 1300px) {
        padding: 7em 0 0 5em;
    }
}

#talk {
    padding: 0;
    background: none;
}



}

.fade-up {
    animation: fade-up 1s ease-in-out forwards;
}

@keyframes fade-up {
    0% {
        opacity: 0;
        
    }

    100% {
        opacity: 1;
    }

}
.effect-5 {
    display: inline-block;
    overflow: hidden;
    pointer-events: none;
    &:before, &:after {
      right: 0;
      bottom: 0;
    //   background: #000;
    }
    &:before {
      width: 100%;
      height: 3px;
      transform:  translateX(-100%);
    }
    &:after {
      width: 3px;
      height: 100%;
      transform:  translateY(100%);
    }
    > span {
      display: block;
      padding: 6px 10px;
      &:before, &:after {
        left: 0;
        top: 0;
        background: #000;
      }
      &:before {
        width: 100%;
        height: 3px;
        transform:  translateX(100%);
      }
      &:after {
        width: 3px;
        height: 100%;
        transform:  translateY(-100%);
      }
    }
    // &.trigger:before, &.trigger:after, &.trigger > span:before, &.trigger > span:after {
    //   transform:  translate(0, 0);
    // }
    


  }



  .gas #industries .carousel-inner .carousel-item > div {
    display: block !important;
}

















#green {
    .bottom-boxed {
        h1 {
            @media only screen and (max-width: 991px) {
                margin-left: .6em;
            }

            @media only screen and (min-width: 992px) and (max-width: 1199px) {
                font-size: 4.5rem;
                margin-left: 0;
            }
        
            @media only screen and (min-width: 1200px) {
                font-size: 4rem;
            }
        
            @media only screen and (min-width: 1367px) {
                font-size: 6.2rem;
            }
        }

        .lead {
            @media only screen and (min-width: 992px) and (max-width: 1199px) {
                font-size: 1.1rem;
            }
        
            @media only screen and (min-width: 1200px) {
                font-size: 1.1rem;
            }
        
            @media only screen and (min-width: 1367px) {
                font-size: 1.3rem;
            }
        }
    }
}

.bottom-boxed {
    h1 {
        font-family: $gotic;
        line-height: 1em;
        text-transform: uppercase;

        @media only screen and (min-width: 992px) and (max-width: 1199px) {
            font-size: 4.5rem;
        }
    
        @media only screen and (min-width: 1200px) {
            font-size: 5rem;
        }
    
        @media only screen and (min-width: 1367px) {
            font-size: 6rem;
        }
    }

    .box {
        background: #333;
        max-width: 500px;
        color: #fff;
        transition: all 0.2s linear;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
        

        @media only screen and (max-width: 992px) {
            margin: 0 0 2em 0;
        }

        @media only screen and (min-width: 993px) {
            margin: 0 0 4em 0;
        }


        &:hover.security {
            background: $main; 
        }

        &.security {
            border: 12px solid $main;
        }
        
        h3 {
            font-family: $spline;
            font-weight: bold;

            @media only screen and (max-width: 991px) {
                padding-left: 1.3em;
                padding-top: 1.2em;
            }

            @media only screen and (min-width: 992px) and (max-width: 1199px) {
                font-size: 2.2rem;
            }
        
            @media only screen and (min-width: 1200px) {
                font-size: 1.8rem;
                padding: 1em 1.3em 0 1.3em;
            }
        
            @media only screen and (min-width: 1367px) {
                font-size: 1.7rem;
                padding: 1em 1.3em 0 1.3em;
            }
        }

        p {
            padding: 0 2em 3em 2em;
            font-family: $pt;

            @media only screen and (min-width: 992px) and (max-width: 1199px) {
                font-size: 1.05rem;
            }
        
            @media only screen and (min-width: 1200px) {
                font-size: 1.05rem;
            }
        
            @media only screen and (min-width: 1367px) {
                font-size: 1.15rem;
            }
        }

        &:hover {
            box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
        }
    }
}


#green #emergency {
    text-align: center;
    background: #333;
    color: #fff;
    border-bottom: 8px solid $main;

    
    &.border-top {
        box-shadow: inset 0 15px 22px -3px black;
    }

    .border-btm {
        border-top: 8px solid $main;
        box-shadow: inset 0 -10px 22px -3px black;
        height: 100%;
        padding: 3em 0 3em 0;
    }

    h3 {
        font-family: $gotic;
        font-size: 2.5rem;
        text-transform: uppercase;

        &.lead {
            font-family: $pt;
            letter-spacing: -2px;
            font-weight: bold;

            @media only screen and (max-width: 992px) {
                font-size: 2.5rem;
            }

            @media only screen and (min-width: 1300px) {
                font-size: 5.4rem;
            }
        }
    }
}

// HERO ---------------------------------------------------------------- //

#block__wrapper {
    background: $main;
    margin-top: 2.2em; 
    @media only screen and (min-width: 1300px) {
        padding: 0 0 0.3em 2em;
    }

    &.green_top {
        margin-top: 0;
        overflow-x: hidden;
    }

    &.about_top::before {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        content: "";
        position: absolute;
        background: url("../images/plant2.webp") no-repeat center bottom;
        background-size: cover;
        margin-top: 0;
        animation: anim 2.5s ease-in forwards;
    }

    &.about_top {
        position: relative;
        background-color: #000;
        margin-top: 0;
        
        
        @keyframes anim {
            from {
              opacity: 0;
              filter: blur(10px);
            }
            to {
              opacity: 1;
              filter: blur(0);
            }
          }
        
        .parallax-container {
            overflow: hidden;
            position: relative;

            
            @media only screen and (min-width: 360px) {
                padding: 4em 0;
            }
    

            @media only screen and (min-width: 1300px) {
                height: 70vh;
                padding: 0;
            }
        }

        .parallax-text {
            position: relative;
            font-size: 24px;
            color: white;

            @media only screen and (min-width: 1300px) {
                top: calc(15vh);   
            }
        }
        
        h1, p {
            color: #fff;
            text-align: center;
        }

        h1 {

            @media only screen and (min-width: 360px) {
                font-size: 3rem;
            }
        
        
            @media only screen and (min-width: 1200px) {
                font-size: 6rem !important;
            }
    
            @media only screen and (min-width: 1500px) {
                font-size: 8rem !important;
            }
        }
        
        p.lead {
            
            @media only screen and (min-width: 360px) {
                line-height: 1.7rem;
            }
        
            @media only screen and (min-width: 1200px) {
                font-size: 1.7rem !important;
                line-height: 2.2rem;
                padding: 1.2em 5em;
            }
    
            @media only screen and (min-width: 1500px) {
                font-size: 1.8rem !important;
                line-height: 2.4rem;
                padding: 1.2em 8em;
            }
        }
    }

    #hero__content {
        @media only screen and (max-width: 768px) {
            padding-bottom: 2em;
        }
    
        @media only screen and (min-width: 1300) {
            padding-bottom: 4em;
        }
    }

    #hero__content h1 {
        font-family: $gotic;
        text-transform: uppercase;
        color: #fff;
        

        @media only screen and (min-width: 360px) {
            line-height: 3rem;
            font-size: 2.9rem;
            margin-top: 2em;
        }
    
        @media only screen and (min-width: 1200px) {
            font-size: calc(1.375rem + 1.5vw);
            margin-top: auto;
            line-height: 7.5rem;
            
        }


    }

    #hero__content h2 {
        color: #fff;
        font-weight: normal;
        

        
        @media only screen and (min-width: 360px) {
            font-size: 1.3rem;
        }
    
        @media only screen and (min-width: 1200px) {
            font-size: 1.8rem;
            
        }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        #hero__content h1 {
            padding: 0.5em;
            line-height: 1em;
            font-size: 6.2rem;
        }

       
    }

    @media only screen and (min-width: 1200px) {
        #hero__content h1 {
            padding: 1em 0 0 0;
            line-height: 1em;
            font-size: 5rem;            
        }

        #hero__content h2 {
            font-size: 1.5rem;
        }
    }

    @media only screen and (min-width: 1367px) {
        #hero__content h1 {
            padding: 1em 0 0 0;
            line-height: 1em;
            font-size: 5.2rem;
        }

        #hero__content h2 {
            font-size: 2rem;
        }
    }

    @media only screen and (min-width: 1500px) {
        #hero__content h1 {
            font-size: 7.4rem;
        }

    }


    .animate-slide {
        animation: slide-up-left 0.7s ease-in forwards;
      }
      
      @keyframes slide-up-left {
        0% {
            opacity: 0;
            transform: translate(100px, 0);
          }
          100% {
            opacity: 1;
            transform: translate(0, 0);
          }
      }


}



.image-plant-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


  .image {
    top: 100px;
    left: 0;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    position: absolute;
  }

  #green .sticky-top {
    margin-bottom: auto !important;

    @media only screen and (max-width: 992px) {
        z-index: 0 !important;
    }

  }

  .sticky-top {
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        margin-bottom: 80vh;
    }
    @media only screen and (min-width: 1199px) {
        margin-bottom: 85vh;
    }

    @media only screen and (min-width: 800px) and (max-height: 800px) {
        margin-bottom: 125vh;
    }
  }

  #green_about #block__wrapper {
    background: #fff !important;
    h1,p {
        color: #000 !important;
    }
  }

  .visible {
    opacity: 1;
    z-index: 1;
  }

  .hidden {
    opacity: 0;
    z-index: 0;
  }


#block__about_wrapper {
    

    @media only screen and (min-width: 360px) {
        padding: 2.5em 0;
    }


    @media only screen and (min-width: 992px) {
        padding: 4em 0;
    }

    h1 {
        font-family: $gotic;
        
        @media only screen and (min-width: 360px) {
            font-size: 3rem;
            margin-left: .35em;
        }
    
    
        @media only screen and (min-width: 992px) {
            font-size: 4rem;
            margin-left: 0;
        }
    }
}


#about_middle {
    width: 100%;
    height: auto;
    position: relative;
    opacity: 0;
    
    @media only screen and (min-width: 992px) {
        padding: 0 3em 0 3em;
    }

    img {
        @media only screen and (min-width: 360px) {
            margin: 1em 0 2em 0;
        }
    
    }
    
    p {
        font-family: $pt;
        color: #333;

        @media only screen and (min-width: 360px) {
            font-size: 1.1rem;
            line-height: 1.65rem;
        }
    
    
        @media only screen and (min-width: 992px) {
            font-size: 1.2rem;
            line-height: 1.85rem;
        }
    }

    h3 {
        margin: 2em 0;
        padding: 2em;
        background: #000;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1.6rem;
        transition: all 0.2s ease-in-out;

        b {
            font-family: $gotic;
            display: block;
            font-size: 2.3rem;
            text-transform: uppercase;
            margin-bottom: 0.3em;
        }

        &:hover {
            background: $main;
            box-shadow: 0 0 3rem -1rem rgba(0,0,0,0.5);
            transform: scale(1.04);
            }
    }
    

    &.slide-left {
        left: -50%;
        transition: left .8s ease-in-out, opacity 0.5s ease-in-out;
    }
    
    &.slide-right {
        max-width: calc(45vw);
        right: -100%;
        transition: right .8s ease-in-out, opacity 0.5s ease-in-out;
    }
    

    &.active {
        opacity: 1;
        &.slide-right {
          right: 0%;
        }
        &.slide-left {
          left: 0%;
        }
      }
}

#planta {
    padding: 12em 0;
    background: url("images/warehouse2.webp") no-repeat center center;
    background-size: cover;
    
    #talk_wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2.5em 2.5em 0 2.5em;
        background: #fff;
    }

    h1 {
        font-family: $gotic;
        line-height: 0.85em;
        margin-bottom: 0.2em;

        @media only screen and (min-width: 360px) {
            font-size: 2.5rem;
        }
    
    
        @media only screen and (min-width: 992px) {
            font-size: 4rem;
        }
    }


    h2 {
        color: #333;

        @media only screen and (min-width: 360px) {
            font-size: 1.1rem;
            line-height: 1.4rem;
        }
    
    
        @media only screen and (min-width: 992px) {
            font-size: 1.5rem;
            line-height: 1.8rem;
        }
    }
}


#green_about {
    
    .youtube-container {
        @media only screen and (min-width: 360px) {
            margin-left: .65em !important;
            padding-top: 1em;
            transform: scale(1.1);
        }

        @media only screen and (min-width: 992px) {
            margin-left: 70px !important;
            padding-top: 6em;
            transform: scale(1.2);
        }

        @media only screen and (min-width: 1500px) {
            margin-left: 70px !important;
            padding-top: 6em;
            transform: scale(1);
        }
    }

    .alk-btn {

        @media only screen and (min-width: 360px) {
            width: 90%;
            margin: 0 .5em;
        }

        @media only screen and (min-width: 992px) {
            width: 90%;
        }
    }

    h1 {
        @media only screen and (min-width: 360px) {
            margin-left: .5em;
            font-size: 2.5rem;
            margin-top: 1em;
        }

        @media only screen and (min-width: 992px) {
            text-align: left;
            margin-left: 0;
        }
    }
}










// TICKER ------------------------------------------------------------------ //
#ticker {
    h1 {
        text-align: center;
        font-family: $spline;
        color: $main;
        font-size: 1.8rem;
        font-weight: bold;

        @media (max-width: 767px) {
            margin: 2em 0 1em 0;
        }
    
        @media (min-width: 768px) and (max-width: 1024px) {
            margin: 8em 0 4em 0;
        }
    
        @media (min-width: 1025px) {
            margin: 8em 0 4em 0;
        }
    }
}
.image-ticker{ 
    width: 100vw; 
    overflow: hidden;  
    
    img {
        max-width: 230px;
    }
}

.image-ticker ul{
    padding: 0 0 10em 0; 
    display: flex; 
    animation: scroll-infinite 25s linear infinite;  
}

.image-ticker ul li{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0;
    padding: 0 2em;
}

@keyframes scroll-infinite{
  0%   { transform: translateX(0); }
  100%  { transform: translateX(-1800px); }
}

.slide-up {
    opacity: 0;
}

.slide-up.active {
    animation: slide-up 0.6s ease-in-out forwards;
}

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



.late {
    animation-delay: 0.3s !important;
}



// SLIDE -------------------------------- //
.image-container {
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
      position: relative;
      opacity: 0;
      &.slide-left {
          left: -100%;
          transition: left .8s ease-in-out, opacity 0.5s ease-in-out;
        }
        &.slide-right {
            right: -100%;
            transition: right .8s ease-in-out, opacity 0.5s ease-in-out;
        }

      &.active {
        opacity: 1;
        &.slide-right {
          right: 0%;
        }
        &.slide-left {
          left: 0%;
        }
      }
    }
  }
  
// FOOTER ---------------------------------------------------------------- //
#footer {
    font-size: 0.85rem;
    border-top: 1px solid #ccc;
    position: relative;
    opacity: 0;

    &::before {
        content: "";
        

        @media (max-width: 767px) {
            width: 100%;
            max-width: 600px;
            height: 12px;
            bottom: 0;
            right: 0;
            position: absolute;
            background-color: $main;
        }
    
        @media (min-width: 768px) and (max-width: 1024px) {
            mwidth: 30%;
            max-width: 600px;
            height: 60px;
            bottom: 0;
            right: 0;
            position: absolute;
            background-color: $main;
        }
    
        @media (min-width: 1025px) {
            width: 30%;
            max-width: 600px;
            height: 60px;
            bottom: 0;
            right: 0;
            position: absolute;
            background-color: $main;
        }
    }    

    .copyright p {
        color: #555;
    }
    
    .logos-horizontal {
        max-width: 200px;
        margin-bottom: 2em;
    }

    span.main {
        color: $main;
    }

    h2 {
        font-size: 2.2rem;
        font-weight: bold;
        font-family: $pt;

        @media (max-width: 767px) {
            margin-bottom: 2em;
        }
    
        @media (min-width: 768px) and (max-width: 1024px) {
            margin-bottom: 2em;
        }
    
        @media (min-width: 1025px) {
            margin-bottom: 0;
        }
    }

    h3 {
        font-size: 1.15rem;
        font-weight: bold;
        color: #444;
        &.lead {
            
            font-family: $spline;
            
            color: #444;


            @media (max-width: 767px) {
                margin-top: 0;
                padding: 0;
                font-size: 1.25rem;
            }
        
            @media (min-width: 768px) and (max-width: 1024px) {
                margin-top: 3em;
                font-size: 1.1rem;
            }
        
            @media (min-width: 1025px) {
                margin-top: 3em;
                font-size: 1.1rem;
            }


        }
    }

    
    #areas div {
        

        @media (max-width: 767px) {
            padding: 1em 1em 0 1em;
            border-top: 1px solid #ccc;
        }
    
        @media (min-width: 768px) and (max-width: 1024px) {
            padding: auto;
            border-top: none;
        }
    
        @media (min-width: 1025px) {
            padding: auto;
            border-top: none;
        }
    }

    p {
        font-size: 1rem;
        font-family: $spline;
        color: #444;
    }

    #footer-menu {
        ul {
          list-style-type: none;
          padding: 0;
          line-height: 1.7em;
          font-family: $pt;

            @media (max-width: 767px) {
                margin:0;
                font-size: 1.4rem;
            }
        
            @media (min-width: 768px) and (max-width: 1024px) {
                margin: 0 0 0 3.4em;
                font-size: 1.1rem;
            }
        
            @media (min-width: 1025px) {
                margin: 0 0 0 3.4em;
                font-size: 1.1rem;
            }
        }
            
        a {
          text-decoration: none;
          color: #444;

          
            @media (max-width: 767px) {
                display: block;
                border-bottom: 1px solid #eee;
            }
        
            @media (min-width: 768px) and (max-width: 1024px) {
                display: inline;
                border-bottom: none;
            }
        
            @media (min-width: 1025px) {
                display: inline;
                border-bottom: none;
            }

          &:hover {
            color: $main;
          }
        }
      }

      .navbar-nav {
        a {
            display: inline;
        }

        a.current::before {
                content: "\2B23"; /* Carácter ASCII de hexágono horizontal */
                position: absolute;
                top: 5px;
                left: -22px;
                font-size: 20px;
                color: $main;
        }

        a.current {
            color: $main !important;
        }
      }

      .icons { 
        
        
        svg { 
            
            margin-right: 0.6em; 
            transition: all 0.3s ease-in-out;

            @media (max-width: 767px) {
                max-width: 55px;
            }
        
            @media (min-width: 768px) and (max-width: 1024px) {
                max-width: 35px;
            }
        
            @media (min-width: 1025px) {
                max-width: 35px;
            }
        } 

        .bi-youtube {
            @media (max-width: 767px) {
                max-width: 78px;
                margin-left: .5em;
                margin-top:.2em;
            }
        
            @media (min-width: 768px) and (max-width: 1024px) {
                max-width: 35px;
            }
        
            @media (min-width: 1025px) {
                max-width: 48px;
            }
        }
        

        a {
            text-decoration: none;
        }

        a svg {
            color: $main;
 
            &:hover {
                color: #000;
            }
        }
    }
      
    #contact_email {
        font-size: 1.1rem;
    }
}


.slide-right::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: $main;
    top: 0;
    animation: slide-right 0.5s forwards;

}

@keyframes slide-right {
    0% {
      top: 0;
      width: 100%;
      height: 100%;
      bottom: auto;
      right: auto;      
    }
    100% {
      top: 0;
      width: 0;
      height: 100%;
      bottom: auto;
      right: auto;
    }
  }

#social {
    font-size: 1.5em;
}



// PRODUCTS ============================================================== //
#products {
    
    
    @media only screen and (min-width: 1300px) {
        padding-top: 5em;
        padding-bottom: 3em;
    }

    .hidden {
        display: none;
    }

    #left-menu {
        .button_wrapp {
            margin-right: 3em;
            position: relative;
            height: 100px;
        }
        .btn {
            padding: 1.2em;
            width: 100%;
            font-size: 1.3rem;
            font-family: $pt;
            background-color: #eeeeee6c;
            border: none;
            color: #555;
            transition: all 0.4s ease;
            margin-bottom: 0.2em;
            position: absolute;
            &:hover {
                color: #fff;
                background: $main;
                box-shadow: 0 7px 15px 5px #ccc;
                margin-top: -6px;
                
            }
        }
    }

    #productos_img_wrapper {
        width: 380px;
        transition: all 0.4s ease;
        position: absolute;
        margin-top: 400px;
        margin-left: 0;
        left: 0;

        img {
            border-radius: 10px;
            box-shadow: 0 0 20px #9e9e9e;
        }
    }

    #productos_img_wrapper.hide_this {
        margin-left: -600px;
        opacity: 0;
    }

    #productos_img_wrapper.show_this {
        opacity: 1;
        left: -80px;
    }

}

#talk {
    padding: 20em 0;
    background: url("images/productos.webp") no-repeat center center;
    background-size: cover;

    #talk_wrap {
        max-width: 1200px;
        margin: 0 auto;

        @media only screen and (max-width: 1300px) {
            padding: 2em;
        }
    }

    h1 {
        font-family: $gotic;
        margin-bottom: 0.2em;
        @media only screen and (max-width: 992px) {
            font-size: 3.5rem;
            line-height: 0.95em;
        }

        @media only screen and (max-width: 1299px) {
            font-size: 4.5rem;
            line-height: 0.95em;
        }

        @media only screen and (min-width: 1300px) {
            font-size: 7rem;
            line-height: 0.85em;
        }
    }
}





// CARDS ================================================================= //

#products {
// Transiciones y escala de la tarjeta envolvente
.card-wrap {
    transition: all 0.2s ease-in-out; // Transición en todas las propiedades
}

// Transiciones de la tarjeta y pie de página
.card, .card-footer {
    transition: all 0.2s ease-in-out; // Transición en todas las propiedades
}

// Estilos de las etiquetas
.badge {
    font-size: 0.75rem; // Tamaño de fuente
    font-weight: normal; // Peso de la fuente
}

// Estilos generales de la tarjeta
.card {
    box-shadow: 0px 1px 2px #d3d3d3; // Sombra de la tarjeta
    position: relative; // Posición relativa
    overflow: hidden; // Ocultar contenido que desborda
    display: flex; // Mostrar como flex
    align-items: center; // Centrar verticalmente
    justify-content: center; // Centrar horizontalmente
    background: #fff !important; // Fondo de la tarjeta (importante)
}

.card, .card-footer {
    border: 3px solid #fff; // Borde de la tarjeta y pie de página
    border-radius: 12px; // Radio de borde
    background: #fff; // Fondo de la tarjeta y pie de página
}

.card-body {
    // padding-bottom: 120px;
    min-height: 100px; // Altura mínima del cuerpo de la tarjeta
}
.carousel-inner {
    height: 0;
    padding-bottom: 65%; /* this sets carousel aspect ratio (4:1 here) */
  }
  
  .carousel-item {
    position: absolute !important; /* Bootstrap is insistent */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .carousel-item img {
    height: 100%; /* Bootstrap handles width already */
    object-fit: cover; /* or 'contain' if you want stretch instead of crop */
  }
// .card-footer {
//     position: absolute; // Posición absoluta
//     bottom: 0; // Posicionamiento inferior
//     left: 0; // Posicionamiento izquierdo
//     width: 100.5%; // Ancho completo
//     transform: translateY(100%); // Desplazar verticalmente oculto
// }

.card-footer .alk-btn {
    margin: 0;
}

.card-title {
    transition: all 0.2s ease-in-out; // Transición en todas las propiedades
    margin-top: 20px; // Margen superior del título de la tarjeta
}

.card:hover .card-footer {
    transform: translateY(0); // Desplazar verticalmente visible al pasar el mouse
}

#divA .card:hover,
#divB .card:hover {
    background: $main; // Fondo al pasar el mouse (requiere definir $main)
    border-color: $main; // Color del borde al pasar el mouse (requiere definir $main)
    
    .card-footer {
        background: $main; // Fondo del pie de página al pasar el mouse (requiere definir $main)
        border-color: $main; // Color del borde del pie de página al pasar el mouse (requiere definir $main)
    }
    .card-title {
        margin-top: 5px; // Margen superior del título de la tarjeta al pasar el mouse
    }
}

.card-body {
    background: #fff; // Fondo del cuerpo de la tarjeta
    border-radius: 8px; // Radio de borde
    margin: 1px 2px; // Márgenes del cuerpo de la tarjeta
}

.card-footer {
        padding: 2px 0; // Relleno del pie de página
    .badge {
        color: #fff; // Color del texto del distintivo
        font-size: 0.95rem; // Tamaño de fuente del distintivo
    }
}  

}



#divC .card {
    box-shadow: 0 0px 30px #ccc;
    img {
        transition: all 0.3s ease-in-out;
        opacity: 0.8;
        filter: grayscale(80%);
    }
}

#divC .card:hover {
    img {
        opacity: 1;
        filter: grayscale(0);    
    }
}

#divC .card:hover {
    background-color: #fff;
    border-color: #fff;
    margin-bottom: 10px;
    margin-top: -10px;
    box-shadow: 0 25px 50px #ccc;
}

#divC .card .display-6 {
    font-size: 1.6rem;
    color: #000;
    font-weight: 500;
}

#divC .btn.btn-secondary {
    padding: 0.8em 0;
    border-radius: 4px;
    background-color: $blue;
    color: #fff;
    width: 90%;
}

#divC .btn.btn.btn-secondary:hover {
    transform: none;
}


/// SHAPE CONTROL ========================================================== //
.shape:not([class*="shape-blur"]) {
    overflow: hidden;
}

.shape-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.shape {
    pointer-events: none;
    position: absolute;
}

.shape {
    position: absolute;
    pointer-events: none;
}

.shape > * {
    display: block;
}

.shape:not([class*="shape-blur"]) {
    overflow: hidden;
}

.shape:not([class*="shape-blur"]) > * {
    transform: scale(2);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .shape > svg {
        display: none;
    }
}

.shape-top {
    top: 0;
    right: 0;
    left: 0;
}

.shape-top > * {
    transform-origin: bottom center;
}

.shape-end {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.shape-end > * {
    position: inherit;
    top: inherit;
    bottom: inherit;
    right: inherit;
    transform-origin: center left;
}

.shape-bottom {
    right: 0;
    bottom: 0;
    left: 0;
}

.shape-bottom > * {
    transform-origin: top center;
}

.shape-bottom-100 {
    right: 0;
    bottom: 100%;
    left: 0;
}

.shape-bottom-100 > * {
    transform-origin: top center;
}

.shape-start {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.shape-start > * {
    position: inherit;
    top: inherit;
    bottom: inherit;
    left: inherit;
    transform-origin: center right;
}

.shape-fluid-x > * {
    width: 100%;
    height: auto;
}

.shape-fluid-y > * {
    width: auto;
    height: 100%;
}

.shape-flip-x {
    transform: scaleX(-1);
}

.shape-blur-1 {
    top: 0;
    right: 0;
    left: 0;
}

@media(min-width : 992px) {
    .shape-blur-1 {
        bottom: 0;
        left: 50%;
        right: auto;
    }
}

.shape-blur-1>* {
    width: 100%;
    height: auto;
}

@media(min-width : 992px) {
    .shape-blur-1>* {
        width: auto;
        height: 100%
    }
}

.shape-blur-2 {
    top: 0;
    right: 0;
    left: 0;
}

@media(min-width : 992px) {
    .shape-blur-2 {
        bottom: 0;
        right: 50%;
        left: auto;
    }
}

.shape-blur-2>* {
    width: 100%;
    height: auto;
}

@media(min-width : 992px) {
    .shape-blur-2>* {
        width: auto;
        height: 100%;
        float: right;
    }
}

.shape-blur-3 {
    top: 0;
    right: 0;
    left: 0;
}

.shape-blur-3>* {
    width: 100%;
    height: auto;
}

.shape-blur-4 {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%) scale(1.3);
}


// TITULOS ================================================================= //
.title-display-h2 {
    font-family: $gotic;
    font-size: 4rem;
}

.title-display {
    color: $main;
    font-family: $spline;
    position: relative;
    transition: all 0.2s ease;
    
    &::before {
        content: "\2B23"; /* Carácter ASCII de hexágono horizontal */
        position: absolute;
        top: 50%;
        left: -15px; 
        transform: translateY(-50%);
        font-size: 25px;
        color: $main;
        display: none; 
    }
}

.box:hover {
    .title-display::before {
        color: $main;
        display: block;
    }
}

.title-display-h3 {
    font-family: $spline;
    font-size: 1.4rem;
    color: $main;
}

.list-group {
    margin: 0 0 2em 0;

}
.list-group-item {
    padding: 1.5em;
    transition: all 0.2s ease-in-out;
    border: none;
}

.list-group-item:hover {
    box-shadow: 0 0 20px #cacaca;
    transform: scale(1.02);
}

.list-group {

    .app {
        float: right;
        display: block;
        visibility: hidden;
        color: #777;

    }

    .badge {
        background: #fefefe;
        color: #777;
        font-size: 1rem;
        margin: 0.4em 0;
        padding: 0.7em;
        text-align: left;
        display: block;
        border-radius: 5px !important;
        transition: all 0.07s ease-in-out;

        &:hover {
            color: #000;
            background: #eee;
 
            & .app {
                visibility: visible;
            }
        }


    }
}

.special-cat {
    background: #e0f7ff;
    padding: 0.8em 1em;
    border-radius: 1em;

    h3 {
        color: #255160;
    }

    .card:hover .card-footer, .card {
        background: #255160;
        color: #255160;
        border-color: #255160;
    }
}

.alk-btn {
    background: $main;
    color: #fff;
    font-family: "PT Sans", "Helvetica";
    border-radius: 2px;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 1.1em 0;

    @media (max-width: 767px) {
        width: 90%;
        display: inline-block;
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        width: auto;
        display: inline-block;
    }

    @media (min-width: 1025px) {
        width: auto;
        display: inline-block;
    }

    &:hover {
        border: 1px solid $main;
        color: #000;
    }
}

#studio .btn {
    box-shadow: 0 5px 10px #eee;
    background: #fff;
    padding: 2em 1em;
    color: #000;
    border: none;
    margin-bottom: 1em;
    transition: all 0.2s ease-in-out;
    transform: scale(1);
    overflow: hidden;

    &:hover, &.active {
        background-color: $main;
        box-shadow: 0 7px 12px #a1a1a1;
        transform: translateY(-5px);
        transform: scale(1.06);
    }

    &.active {
        padding-right: 40px;
    }

    .bi {
        position: absolute;
        right: -200px;
        transition: all 0.2s ease-in-out;
    }

    &.active .bi{
        right: 28px;
        font-size: 1.2rem;
    }

    &:active {
        background-color: #000 !important;
    }

}

#box6 {
    margin-bottom: 120px;
}


@media (max-width: 576px) {

    .special-cat {
        margin: 0 -1em;

        .title-display::before {
            content: "";
        }

        h3 {
            color: #255160;
        }
    
        .card.touch .card-footer {
            background: #255160;
            color: #255160;
            border-color: #255160;
        }

        .card.touch {
            border-color: #255160;
        }
    }

    #studio .btn {
        padding: 0.5em;
        margin-bottom: 0;
        box-shadow: none !important;
        transform: scale(1) !important;
        background: #eee;

        &:hover {
            transform: scale(1) !important;
        }

        .bi-arrow-up-short {
            right: 10px !important;
            font-size: 1.8rem !important;
        }

        &.active {
            padding-right: 0.5em;
        }

        .bi {
            right: 0;
            top: 200px;
        }

        &.active .bi {
            top: -3px;
            right: 0;
        }
        
        .bi-arrow-right-short {
            display: none;
        }

    }

    .list-group .badge {
        color: #000;
        background-color: #fafafa;
        margin: 0 0 1em 0;
        padding: 0.7em 0.7em 0.3em 0.7em;
    }

    .list-group .badge.touch {
        background-color: #eee;
    }

    .list-group .app {
        float: none;
        margin: 0.5em 0 0.5em 0;
        line-height: 1.4rem;
        visibility: visible;
    }

    .badge {
        white-space: normal;
    }

    #divA, #divB {
        margin-top: 1.5em;
        padding-left: 1.8em;
        padding-right: 1.8em;
        padding-bottom: 5em;
    }

    .title-display-h2 {
        
        @media only screen and (max-width: 768px) {
            font-size: 3rem;
            text-align: center;
        }
    
        @media only screen and (min-width: 1300) {
            font-size: 1.8rem;
            text-align: left;
        }
    }

    .title-display::before {
        margin-left: 2px;
        display: block;
    }

    #botones {
        position: fixed;
        bottom: 0;
        z-index: 10;
        background: #fff;
        padding: 0.5em 0.5em 0.5em 0.5em;
        box-shadow: 0 0 15px #ccc;
    }

    h5.card-title {
        font-size: 1.1rem;
    }

    .card-footer .badge {
        font-size: 0.8rem;
        padding: 0 0.3em;
    }

    .card.touch {
        background: $main; 
        border-color: $main; 
        
        .card-footer {
            background: $main; 
            border-color: $main; 
            transform: translateY(0); 
        }

        .card-title {
            margin-top: 8px; // Margen superior del título de la tarjeta al pasar el mouse
        }
    }

    .list-group.touch .list-group-item {
        box-shadow: 0 0 20px #cacaca;
        transform: scale(1.02);
    }
}


@media (min-width: 768px) {
    .bi-arrow-up-short {
        display: none;
    }
}

#transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $main;
    z-index: 9999;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.transition-overlay-on {
    animation: sweep 0.35s linear forwards;
}

.transition-overlay-off {
    animation: sweepback 0.35s linear forwards;
}

  
  @keyframes sweep {
    0% {
      width: 0;
      height: 100%;
      bottom: 0;
      right: 0;
    }
    100% {
      width: 100%;
      height: 100%;
      bottom: auto;
      right: auto;
    }
  }


  @keyframes sweepback {
    0% {
        width: 100%;
        height: 100%;
        bottom: auto;
        right: auto;
    }
    100% {
        
      width: 0;
      height: 100%;
      bottom: 0;
      right: 0;
    }
  }

  @keyframes logoshow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
  }

  #logo {
    max-width: 300px;
    display: none;
  }

  #logo.anima {
    animation: logoshow 0.3s linear forwards;
  }
  


  #content {
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }
  
  #content.visible {
    opacity: 1;
  }


  #shortcut {
    padding: 0.5em 0;


    @media (max-width: 767px) {
        background: #eee;
        margin: 1em;
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        background: #eee;
        margin-bottom: 5em;
    }

    @media (min-width: 1025px) {
        background: #eee;
        margin-bottom: 5em;
    }

    .alk-btn {
        background: #fff;
        color: #333;
        font-family: "PT Sans", "Helvetica";
        border-radius: 2px;
        font-size: 1.2rem;
        
        font-weight: bold;
        
        padding: 0.6em 1.2em;
        transition: all 0.2s ease;
        border: none !important;

        @media (max-width: 767px) {
            width: 90%;
            margin: 0.4em 1em 0.4em 1em;
            display: inline-block;
        }
    
        @media (min-width: 768px) and (max-width: 1024px) {
            margin: 0.8em 1em;
            width: auto;
        }
    
        @media (min-width: 1025px) {
            margin: 0.8em 1em;
            width: auto;
        }
    
        &:hover {
            border: none;
            color: #000;
            box-shadow: 0 0 40px #a0a0a0;
            transform: scale(1.05);
        }
    }


}


.form-switch label {
    transition: all .2s ease;
}

.form-switch label:hover {
    box-shadow: 0 5px 5px #cbcbcb;
    transform: translateY(-2px);
}


.form-switch label.english {
    background: $main;
    color: white;
}

.form-switch label.spanish {
    background: #333;
    color: white;
}



@media (max-width: 1000px) {

    html, body {
        overflow-x: hidden;
    }

    #back {
        cursor: pointer;
    }

    .navbar > .container, .navbar > .container-fluid, .navbar > .container-lg, .navbar > .container-md, .navbar > .container-sm, .navbar > .container-xl, .navbar > .container-xxl {
        justify-content: center;
    }

    #home_top {
        margin-top: 0;
        margin-bottom: 0;
    }

    .ratio #over_text h1 {
        font-size: 2.8rem;
        padding: 0 .5em;
    }


    #data-container {
        padding: 0;

        h1 {
            font-size: 1.35rem;
            padding: 0 1.7em;

            b {
                font-size: 1.9rem;
                line-height: 2.5rem;
                margin-bottom: 0.3em;
            }
        }

        .counter {
            font-size: 4.5rem;
            margin-bottom: 0;
            width: 95%;
            height: 95px;
        }
    }

    .counter-section .col-12 {
        margin-bottom: 2em;

        h2 {
            margin-bottom: 1.2rem;
        }
    }


    // TOGLER AND MENU
    .navbar-toggler.showing {
        background: #fff;
        animation: pulsed .5s ease-in-out forwards;
    }

    @keyframes pulsed {
        0%   { transform: scale(1); }
        50%  { transform: scale(1.4); }
        100% { transform: scale(1); }
    }

    #home_top_nav #navbarNav label, #home_top_nav .form-check.form-switch label,
    #section_top_nav #navbarNav label, #section_top_nav .form-check.form-switch label {
        padding: .3em 1em !important;
        margin-top: 1em;
    }
    
    #home_top_nav, #section_top_nav {
        padding: 0.5em 0;
    }

    .navbar-nav .current::before {
        display: none;
    }

    .navbar-nav {
        font-family: 1.2rem;
        font-weight: normal;
        padding: 0;
        margin-bottom: 4em;
    }

    #menu_top_bottom {

        p {
            line-height: 1.6em;
            margin: 0;
            font-family: $pt;
            font-size: 1.1rem;

            a {
                font-size: 1.1rem;
                color: #fff;
            }
        }

        h3 {
            font-family: $gotic;
            font-size: 2.5rem;
        }
    }

    #home_top_nav #navbarNav.show,
    #section_top_nav #navbarNav.show {
        position: fixed;
        color: #fff;
        width: 100%;
        left: 0;
        height: 100%;
        top: 0;
        z-index: 5;
        margin-top: 0;
        animation: mobile-in .3s ease-in-out forwards;
        

        &::before {
            content: "";
            width: 100%;
            height: 100%;
            position: fixed;
            background: $main;
            opacity: .9;
        }

        .menu_top, .dropdown-menu {
            width: 100%;
            height: 100%;
            padding: 1.5em !important;
        }

        .dropdown-menu {
            display: block;
        }

        .menu_top {
            z-index: 10;
            position: absolute;
            width: 100%;
        }

        a#industriesDropdown::after {
            content: " →";
        }

        li.nav-item a.nav-link {
            color: #fff;
        }

        .form-switch label {
            background: #333;
        }

        li, a, span {
            font-size: 1.3rem;
        }

        .dropdown-menu {
            background: none;
            box-shadow: none;
            position: fixed;
            top: 0;
            left: 100%;
            padding: 0;

            span, a {
                color: #fff;
                padding: 0;
                line-height: 1.9em;
            }
        }
    }

    .lead {
        font-size: 1.15rem;
        font-weight: 300;
        padding: 0 1em;
    }

    .slide-out {
        animation: menu-slide-out .35s ease-in-out forwards;
    }

    .slide-in {
        animation: menu-slide-in .45s ease-in forwards;
    }

    .slide-out_2 {
        animation: menu-slide-out_2 .35s ease-in-out forwards;
    }

    .slide-in_2 {
        animation: menu-slide-in_2 .45s ease-in forwards;
    }

    @keyframes menu-slide-out {
        from { left: 0; }
        to { left: -100%; }
    }

    @keyframes menu-slide-in {
        from { left: 100%; }
        to { left: 0; }
    }

    
    @keyframes menu-slide-out_2 {
        from { left: -100%; }
        to { left: 0%; }
    }

    @keyframes menu-slide-in_2 {
        from { left: 0%; }
        to { left: 100%; }
    }



    .navbar-toggler {
        background: $main;
        border-radius: 100%;
        position: fixed;
        bottom: 5%;
        right: 5%;
        z-index: 100;
        width: 65px;
        height: 67px;
        .navbar-toggler-icon {
            margin-left: -4px;
            font-size: 2rem;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16"><path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>');
        }
    }

    
    
}


@keyframes mobile-in {
    0% {
        opacity: 0;
        transform: scale(5);
        right: 50%;
        filter: blur(50%)
    }
    
    100% {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }
    
}