:root {
    --bs-primary: #0f3d0e;
    --bs-secondary: rgb(19 31 45);
    --bs-grey: #C9C9C9;
    --bs-success: #71dd37;
    --bs-info: #03c3ec;
    --bs-warning: #ffab00;
    --bs-danger: rgb(193, 42, 33);
    --bs-light: #fcfdfd;
    --bs-dark: #373738;
    --bs-yellow: #edae00;
}

/*
* ==========================================
* GENERAL AND HEADER START
* ==========================================
*/

.fixedArea {
    position: fixed;
    left: 0%;
    top: 0px;
    z-index: 9;
    width: 100%;
}

.logo {
    content: url('/assets/img/logotipo.png');
    transition: all 0.3s ease;
    margin-top: 10px;
    width: 250px;
    margin: 0;
}

p.colorfullText {
    color: #fab000;
    letter-spacing: 2px;
}



* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/*---------------------------------------------*/
a {
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
}

.logo-text a {
    display: block;
    line-height: 0;
}

/*---------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

p {
    font-family: 'Barlow', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    margin: 0px;
}

ul,
li {
    margin: 0px;
    list-style-type: none;
}




/*---------------------------------------------*/
input {
    outline: none;
    border: none;
}

textarea {
    outline: none;
    border: none;
}

textarea:focus,
input:focus {
    border-color: transparent !important;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder {
    color: transparent;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea:focus:-moz-placeholder {
    color: transparent;
}

textarea:focus::-moz-placeholder {
    color: transparent;
}

textarea:focus:-ms-input-placeholder {
    color: transparent;
}



/*---------------------------------------------*/
button {
    outline: none !important;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

iframe {
    border: none !important;
}


/*
* ==========================================
* GENERAL AND HEADER END
* ==========================================
*/

/*
* ==========================================
* MAIN SLIDER START
* ==========================================
*/

.classic {
    max-width: 100px;
    display: block;
    float: none;
    margin: auto;
}

.owl-item.active .slide-content h2,
.owl-item.active .slide-content h3,
.owl-item.active .slide-content p,
.owl-item.active .slide-content a {
    visibility: visible;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-name: fadeInUp;
}

.slide-content h2 {
    font-family: 'quantify', sans-serif;
    margin-bottom: 20px;
    font-size: 60px;
    visibility: hidden;
    line-height: 3.5rem;
}

.slide-content h3 {
    font-family: 'Barlow', sans-serif;
    margin-bottom: 20px;
    font-size: 22px;
}

.slide-content p {
    margin-bottom: 20px;
    color: #ffffffcd;
    font-family: 'Barlow', sans-serif;
    font-size: 1.2rem;
    line-height: 1rem;
}

.slider-content-area {
    position: absolute;
    padding: 10px;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider-area,
.main-slider {
    position: relative;
    height: 110vh;
}

.slide-content .default-btn {
    font-family: 'Barlow', sans-serif;
    font-size: 18px;
    color: #0f3d0e;
    padding: 10px 40px 10px 40px;
    border-radius: 10px;
    background-color: #fff;
}

.slide-content .default-btn:hover {
    color: #fff;
    background-color: #0f3d0e;
    transition: all 0.3s ease;
}

/* .main-slider div:not(.owl-nav):not(.owl-prev):not(.owl-prev):not(.owl-next) {
    height: 100%;
} */

.owl-dots {
    counter-reset: dots;
}

.owl-dot:before {
    counter-increment: dots;
    content: counter(dots);
}

.owl-dots {
    counter-reset: dots;
    position: absolute;
    bottom: 95px;
    display: flex;
}

.owl-dot {
    margin-left: 10px;
    border: 2px solid;
    padding: 8px;
    border-radius: 40px;
    width: 35px;
    height: 35px;
}

.owl-dot.active {
    margin-left: 10px;
    border: 2px solid #ffffff70;
    padding: 10px;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    color: #ffffff70;
}

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
    text-align: center;
}

/*
* ==========================================
* MAIN SLIDER END
* ==========================================
*/


/*
* ==========================================
* SECTION1 START
* ==========================================
*/


.topOff {
    padding-top: 50px;
}

.colorfullPanel {
    background-color: #333333;
    color: #fff;
    transition: background-color 0.5s ease;
}

.colorfullPanel h3 {
    margin-top: 40px;
    margin-bottom: 15px;
    font-size: 24px;
    font-family: 'Barlow', sans-serif;
    position: relative;
}

.colorfullPanel h2 {
    margin-bottom: 15px;
    font-size: 36px;
    position: relative;

}


.colorfullPanel h2 span {
    font-size: 36px;
    color: #85a900;
    position: relative;

}

.colorfullPanel p {
    margin-bottom: 40px;
    position: relative;

}

.colorfullPanel:hover {
    background-color: #000;
}


/*
* ==========================================
* SECTION1 END
* ==========================================
*/



/*
* ==========================================
* SECTION2 START 
* ==========================================
*/
section#section2 {
    padding-top: 65px;
    padding-bottom: 150px;
}

section#section2 .maintext span {
    margin-top: 90px;
    font-weight: 800;
    color: #f9b000;
    line-height: 1.7;
    letter-spacing: 6px;
    text-transform: uppercase;

}



section#section2 .maintext h2 {
    font-size: 70px;
    font-family: 'Barlow', sans-serif;
    color: rgb(68, 68, 68);
    line-height: 1;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

section#section2 .maintext p {

    font-family: "Roboto";
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    padding-left: 50px;
    padding-right: 50px;


}

section#section2 .shapes span {
    font-size: 18px;
    font-family: "Roboto";
    color: rgb(51, 51, 51);
    line-height: 1.7;
    font-weight: bold;
    text-transform: uppercase;
}

section#section2 .shapes p {
    font-size: 15px;
    font-family: "Roboto";
    color: rgb(119, 119, 119);
    line-height: 1.4;
    text-align: center;
    margin-top: 25px;
}

.minHeightProp {
    min-height: 150px;
}



.section-title h3 {
    margin-top: 90px;
    font-weight: 800;
    color: #f9b000;
    line-height: 1.7;
    letter-spacing: 6px;
    text-transform: uppercase;

}

.section-title h2 {
    margin-top: 30px;
    font-size: 70px;
    font-family: 'Barlow', sans-serif;
    color: rgb(68, 68, 68);
    line-height: 1;
    text-align: center;
    margin-bottom: 50px;
}


.imgback {
    background-image: url(../img/shape/backgroundshape.png);
    /* max-width: 100%; */
    padding-right: 35px;
    background-repeat: no-repeat;
    display: block;
    float: none;
    margin: auto;
    padding-left: 35px;
    padding-top: 40px;
    padding-bottom: 40px;
    transition: padding-top 0.5s;
}


img.imgback:hover {
    padding-top: 32px;
}

.shapes {
    margin-top: 50px;
    margin-bottom: 50px;
}


/*
* ==========================================
* SECTION2 END 
* ==========================================
*/
.content h3 {
    transition: color 0.5s;

}

.content h3:hover {
    color: rgb(68, 68, 68);

}


/*
* ==========================================
* PRODUCTS SECTION (SECTION3) START  
* ==========================================
*/

.post-slide .post-title {
    font-size: 17px;
    font-family: "Roboto";
    color: rgb(51, 51, 51);
    line-height: 1.7;
    text-align: center;
    font-weight: bold;
}


.post-slide .post-description {
    font-size: 22px;
    font-family: 'Barlow', sans-serif;
    color: rgb(252, 177, 0);
    line-height: 1.1;
    text-align: center;
    padding-bottom: 30px;
}

div#news-slider {
    margin-bottom: 50px;
}

div#news-slider .owl-dots {
    counter-reset: dots;
    position: absolute;
    bottom: -20px;
    display: flex;
    /* margin-left: 10px; */
    /* margin-top: 20px; */
    left: 46%;
}

div#news-slider .owl-dot.active {
    margin-left: 10px;
    border: 0px;
    padding: 10px;
    border-radius: 0px;
    width: 30px;
    height: 40px;
    color: #270909a6;
    border-bottom: 3px solid #83ad00;
    font-size: 22px;
    font-weight: bold;
}

div#news-slider .owl-dot {
    border: 0px;
    padding: 10px;
    /* border-radius: 40px; */
    width: 30px;
    height: 40px;
    color: #270909a6;
}

div#news-slider .owl-prev {
    position: absolute;
    bottom: -20px;
    left: 40%;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Roboto";
    color: rgb(204, 204, 204);
    line-height: 1.7;
    text-align: center;
    background: #ffffff;
    padding: 10px;

}

div#news-slider .owl-next {
    position: absolute;
    bottom: -20px;
    right: 40%;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Roboto";
    color: rgb(204, 204, 204);
    line-height: 1.7;
    text-align: center;
    background: #ffffff;
    padding: 10px;
}

.post-slide {
    margin-left: 10px;
    margin-right: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(43, 59, 93, .3);
    margin-bottom: 2em
}

.post-slide .post-img {
    position: relative;
    margin-bottom: 20px
}

.post-slide .post-img img {
    width: 100%;
    height: auto
}


.post-abs {
    width: 0px;
    height: 100%;
    position: absolute;
    background: rgba(221, 221, 221, 0.4);
    transition: width 0.5s;
}

.post-img:hover .post-abs {
    width: 100%;
}

.post-img p {
    color: #fff;
    margin-top: 150px;
    text-align: center;
    visibility: hidden;
}

.post-img:hover p {
    visibility: visible;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-name: fadeInUp;
}




/*
* ==========================================
* PRODUCTS SECTION (SECTION3) END  
* ==========================================
*/


/*
* ==========================================
* NAVBAR START
* ==========================================
*/

.navbar {
    background: transparent;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.navbar.active {
    background: var(--bs-primary);
    border-radius: 0px;
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
}

.myNavBar {
    padding-bottom: 10px;
    padding-top: 10px;
}

.navbar-landing>.nav-link {
    position: relative;
    color: #fff !important;
    letter-spacing: 0.3px;
}

.nav-link.active {
    color: #fff !important;
}

.nav-link::before {
    content: "";
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--bs-yellow);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s;
}

.navbar-landing>.nav-link:hover::before,
.navbar-landing>.nav-link.active::before {
    transform: scaleX(1);
}

.navbar.active .logo {
    content: url('/assets/img/logo-white.png');
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
    text-decoration: none;
}

.navbar .navbar-brand {
    color: #fff;
}

.nav>li>a:hover,
.nav>li>a:focus {
    text-decoration: none;
}

.navbar.active .nav-link {
    color: #ffffff;
}

.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    color: #ffffff;
    text-decoration: none;
}

.navbar.active .navbar-brand {
    color: #555;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #555;
    background: none;
}

.navBrandText {
    padding: 0px !important;
    margin-left: 15px;
    width: 100%;
}

.navBrand img {
    margin-left: 5px;
}


/*
* ==========================================
* NAVBAR END
* ==========================================
*/


/*
* ==========================================
* BANNER SECTION START
* ==========================================
*/
.banner {
    color: white;
    padding-bottom: 45px;
    padding-top: 45px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: -100px;
}

.content span {
    font-size: 15px;
    font-family: "Roboto";
    color: rgb(119, 119, 119);
    line-height: 2.4;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
}

.content h2 {
    font-size: 60px;
    font-family: 'Barlow', sans-serif;
    color: rgb(68, 68, 68);
    line-height: 1;
    text-align: center;
}

.content h3 {
    font-size: 16px;
    font-family: "Roboto";
    color: rgb(132, 171, 0);
    line-height: 1.7;
    text-align: center;
    padding-top: 25px;
}

/*
* ==========================================
* BANNER SECTION END
* ==========================================
*/

/*
* ==========================================
* BLOG SECTION START
* ==========================================
*/


.blog-area {
    padding: 40px;
}

.blog-section {
    margin-top: 30px;
    margin-bottom: 90px;
}

.blog-section-title h3 {
    font-size: 15px;
    font-family: "Roboto";
    color: rgb(248, 176, 0);
    font-weight: bold;
    line-height: 1.7;
    text-align: center;
    margin-top: 80px;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 15px;
}

.blog-section-title h2 {
    font-size: 70px;
    font-family: 'Barlow', sans-serif;
    color: rgb(68, 68, 68);
    line-height: 1;
    text-align: center;
    margin-bottom: 85px;
}

.blog-section-date {
    text-align: center;
}

.blog-section-date .month {
    font-size: 60px;
    font-family: 'Barlow', sans-serif;
    color: rgb(221, 221, 221);
    line-height: 0.85;
}

.blog-section-date .date {
    font-size: 16px;
    font-family: "Roboto";
    color: rgb(221, 221, 221);
    line-height: 1.1;
    margin-left: 5px;

}

.blog-section-description h2 {
    font-size: 22px;
    font-family: "Roboto";
    color: rgb(51, 51, 51);
    line-height: 1.4;
    text-align: left;
    font-weight: bold;

}

.blog-section-description p {
    font-size: 16px;
    font-family: "Roboto";
    color: rgb(76, 76, 76);
    line-height: 1.4;
    text-align: left;
}

/*
* ==========================================
* BLOG SECTION END
* ==========================================
*/

/*
* ==========================================
* OWL CAROUSEL GENERAL STYLES START
* ==========================================
*/

.owl-theme .owl-controls {
    margin-top: 30px;
}

.owl-theme .owl-controls .owl-page span {
    background: #fff;
    border: 2px solid #37a6a4;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background: #37a6a4;
}

.owl-prev {
    position: absolute;
    bottom: 100px;
    left: 40%;
    text-transform: uppercase;
    color: #ffffff70;
}

.owl-next {
    position: absolute;
    bottom: 100px;
    right: 40%;
    text-transform: uppercase;
    color: #ffffff70;
}

.owl-height {
    min-height: 150px;
}

/*
* ==========================================
* OWL CAROUSEL GENERAL STYLES END
* ==========================================
*/

/*
* ==========================================
* CONTACT FORM STARTS
* ==========================================
*/

.contact {
    background: #f7f7f7;
}

.contact100-form {
    margin-top: 50px;
}




.container-contact100 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: transparent;
    position: relative;
    z-index: 1;
}

.contact100-map {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.wrap-contact100 {
    width: 1170px;
    background: #fff;
    border-radius: 10px;
    padding: 82px 180px 33px 180px;
    position: relative;
    display: none;
}

.show-wrap-contact100 {
    visibility: visible;
    opacity: 1;
}


.contact100-form {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #fff;
    padding: 100px;
    padding-bottom: 68px;
}

.contact100-form-title h3 {
    font-size: 15px;
    font-family: "Roboto";
    color: rgb(248, 176, 0);
    font-weight: bold;
    line-height: 1.7;
    text-align: center;
    margin-top: 80px;
    letter-spacing: 6px;
    text-transform: uppercase;

}

.contact100-form-title h2 {
    font-size: 70px;
    font-family: 'Barlow', sans-serif;
    color: rgb(68, 68, 68);
    line-height: 1;
    text-align: center;
}



.wrap-input100 {
    width: 100%;
    position: relative;
    border-bottom: 2px solid #d9d9d9;
    padding-bottom: 13px;
    margin-bottom: 65px;
}

.rs1-wrap-input100 {
    width: calc((100% - 30px) / 2);
}

.label-input100 {
    font-family: "Roboto";
    font-size: 15px;
    color: #999999;
    line-height: 1.5;
    padding-left: 5px;
}

.input100 {
    display: block;
    width: 100%;
    background: transparent;
    font-family: "Roboto";
    font-size: 18px;
    color: #555555;
    line-height: 1.2;
    padding: 0 5px;
}

.focus-input100 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.focus-input100::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;

    background: #ff4b5a;
}


input.input100 {
    height: 40px;
}


textarea.input100 {
    min-height: 110px;
    padding-top: 9px;
    padding-bottom: 13px;
}


.input100:focus+.focus-input100::before {
    width: 100%;
}

.has-val.input100+.focus-input100::before {
    width: 100%;
}



.container-contact100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin-top: -25px;
    justify-content: center;
}

.contact100-form-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 160px;
    height: 50px;
    background-color: rgb(248, 176, 0);
    border-radius: 25px;
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    color: #fff;
    line-height: 1.2;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;

    box-shadow: 0px 0px 10px 0px rgba(255, 75, 90, 0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(255, 75, 90, 0.5);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 75, 90, 0.5);
    -o-box-shadow: 0px 0px 10px 0px rgba(255, 75, 90, 0.5);
    -ms-box-shadow: 0px 0px 10px 0px rgba(255, 75, 90, 0.5);
}

.contact100-form-btn i {
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.contact100-form-btn:hover {
    background-color: #333333;
    box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.5);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.5);
    -o-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.5);
    -ms-box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.5);
}

.contact100-form-btn:hover i {
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
    transform: translateX(10px);
}



@media (max-width: 992px) {
    .wrap-contact100 {
        padding: 82px 80px 33px 80px;
    }
}

@media (max-width: 768px) {
    .rs1-wrap-input100 {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .wrap-contact100 {
        padding: 82px 15px 33px 15px;
    }
}



.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: #fff;
    border: 1px solid #c80000;
    border-radius: 2px;
    padding: 4px 25px 4px 10px;
    top: 58%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 2px;
    pointer-events: none;

    font-family: 'Barlow', sans-serif;
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;

    visibility: hidden;
    opacity: 0;

    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f06a";
    font-family: FontAwesome;
    display: block;
    position: absolute;
    color: #c80000;
    font-size: 16px;
    top: 58%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 992px) {
    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }
}




.contact100-more {
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    color: #999999;
    line-height: 1.5;
}

.contact100-more-highlight {
    color: #ff4b5a;
}


.contact100-btn-hide {
    color: #333333;
    font-size: 14px;

    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 50%;
    top: -15px;
    right: -15px;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.contact100-btn-hide:hover {
    background-color: #333333;
    color: #fff;
}



.contact100-btn-show {
    color: #fff;
    font-size: 39px;

    position: fixed;
    z-index: -1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.contact100-btn-show::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    background-color: #ff4b5a;
    border-radius: 50%;

    top: 0;
    left: 0;

    box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
    -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
    -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
    -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);
    -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5);

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;

    -webkit-animation: beatbtn 0.9s ease-in-out infinite;
    animation: beatbtn 0.9s ease-in-out infinite;
}


@keyframes beatbtn {
    0% {
        background-color: rgba(255, 75, 90, 1);
        transform-origin: center;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    50% {
        background-color: rgba(255, 75, 90, 0.8);
        transform-origin: center;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }
}





/*
* ==========================================
* CONTACT FORM ENDS
* ==========================================
*/
/*
* ==========================================
* ADRESS SECTION STARTS
* ==========================================
*/

.address {
    width: 100%;
    color: #fff;
    margin: 0px;
}

.addess-description {
    padding: 70px;
}

.addess-description span {
    font-size: 15px;
    font-family: "Roboto";
    color: rgb(248, 176, 0);
    font-weight: bold;
    line-height: 1.7;
    text-align: center;
    margin-top: 80px;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 15px;
}

.addess-description h2 {
    font-size: 30px;
    font-family: 'Barlow', sans-serif;
    color: rgb(68, 68, 68);
    margin-bottom: 15px;
    color: rgb(255, 255, 255);
    line-height: 1;
    text-align: left;

}

.addess-description p {
    font-size: 15px;
    font-family: "Roboto";
    color: rgb(255, 255, 255);
}


.addess-map {
    padding-top: 70px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 70px;
}


li.address-section {

    margin-top: 20px;
    margin-bottom: 20px;

}

li.address-section .fa {

    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border: 2px solid rgb(248, 176, 0);
    border-radius: 20px;
    width: 40px;
    height: 40px;
    text-align: center;
    padding-top: 10px;
    margin-top: 10px;
}



.single-widget li.address-section .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 15px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border: 0px;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    padding-top: 0px;
    margin-top: 0px;
    color: rgb(248, 176, 0);
}


#map {
    width: 100%;
    height: 400px;
    background-color: grey;
}

.lineHeight {
    line-height: 30px;
}

/*
* ==========================================
* ADRESS SECTION ENDS
* ==========================================
*/

/*
* ==========================================
* FOOTER SECTION START
* ==========================================
*/
.footer-area {
    position: relative !important;
    z-index: 5;
    overflow: hidden;
}

.footer-area .logo {
    max-width: 100% !important;
}

.footer-about {
    color: #fff;
    max-width: 500px !important;
}

.footer-about .text {
    color: #fff;
    margin-top: 10px;
}

.footer-about .social {
    margin-top: 30px;
}

.footer-about .social li {
    display: inline-block;
    margin-right: 25px;
    color: #fff;
}

.footer-about .social li a {
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.footer-about .social li a:hover {
    color: #fff;
}

.footer-title .title {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}

.footer-link .link {
    padding-top: 10px;
}

.footer-link .link li {
    margin-top: 10px;
}

.footer-link .link li a {
    color: #fff;
    font-size: 18px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.footer-link .link li a:hover {
    color: #fff;
}

.footer-link-wrapper {
    width: 50%;
}

.footer-contact .contact-list li {
    margin-top: 0px;
    color: #fff;
}

.footer-contact .contact-list li .contact-info .info-info {
    width: 30px;
}

.footer-contact .contact-list li .contact-info .info-content .text {
    color: #fff;
    font-size: 20px;
}

.footer-contact .contact-list li .contact-info .info-content .text a {
    color: #fff;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.footer-contact .contact-list li .contact-info .info-content .text a:hover {
    color: #fff;
}

.footer-copyright .copyright {
    border-top: 1px solid #fff;
    padding-top: 10px;
    padding-bottom: 25px;
}

.footer-copyright .copyright .copyright-text .text {
    color: #fff;
}

.footer-copyright .copyright .copyright-privacy a {
    font-size: 15px;
    color: #fff;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.footer-copyright .copyright .copyright-privacy a:hover {
    color: #fff;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
* ==========================================
* FOOTER END
* ==========================================
*/

/*
* ==========================================
* GRIDS
* ==========================================
*/

.grid-section {
    padding: 2rem 0;
}

.grid-section .imgs-grid {
    display: grid;
    grid-template-columns: repeat(27, 1fr);
    position: relative;
}

/* .grid-section .imgs-grid:before {
    position: absolute;
    content: "";
    width: 255px;
    height: 217px;
    background-image: url("/assets/img/new/dots-green.svg");
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform: translate(-40%, -40%);
    -ms-transform: translate(-40%, -40%);
    transform: translate(-40%, -40%);
    z-index: -1;
} */

.grid-section .imgs-grid .grid {
    position: relative;
}

.grid-section .imgs-grid .grid img {
    border-radius: 20px;
    max-width: 100%;
}

.grid-section .imgs-grid .grid.grid-1 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 18;
    grid-column: 1 / span 18;
    -ms-grid-row: 1;
    -ms-grid-row-span: 27;
    grid-row: 1 / span 27;
}

.grid-section .imgs-grid .grid.grid-2 {
    -ms-grid-column: 19;
    -ms-grid-column-span: 27;
    grid-column: 19 / span 27;
    -ms-grid-row: 1;
    -ms-grid-row-span: 5;
    grid-row: 1 / span 5;
    padding-left: 20px;
}

.grid-section .imgs-grid .grid.grid-3 {
    -ms-grid-column: 14;
    -ms-grid-column-span: 16;
    grid-column: 14 / span 16;
    -ms-grid-row: 6;
    -ms-grid-row-span: 27;
    grid-row: 6 / span 27;
    padding-top: 20px;
}

/*
* ==========================================
* GRIDS END 
* ==========================================
*/


.thead-dark {
    background: #fab000;
    color: #fff;
    font-weight: 600;
}

.btn {
    padding: 10px;
    border-radius: 10px;
}

.img-fluid {
    width: 100%;
}

.hero-section {
    width: 100%;
    height: 300px;
    background-image: url('/assets/img/slider/banner1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: #0f3d0e;
    opacity: 0.3;
    z-index: 1;
}

.hero-section>h1 {
    position: relative;
    font-family: 'quantify', sans-serif;
    font-size: 3rem;
    z-index: 2;
}

.hero-section .icon {
    position: relative;
    width: 50px;
    z-index: 2;
}

.section {
    padding: 20px;
}

.title-section {
    font-size: 3rem;
    font-weight: bold;
    color: #2f2f2f;
}

.text-section {
    font-size: 1.2rem;
    line-height: 1.2rem;
    font-weight: 400;
}

.shadow-default {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/***CARD SERVICIOS **/

.cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* gap: 30px; */
    margin: 0 auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
}

.card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 250px;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 100px 0px 15px 0px;
    color: #fff;
    text-align: center;
    background-color: transparent;
    /* background-image: linear-gradient(0deg, var(--bs-primary) 31%, #FAB70400 100%); */
}

.card-overlay h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
}

.cards-container .card:nth-child(odd) .card-overlay {
    background: linear-gradient(0deg, #0f3d00de 31%, #FAB70400 100%);
}

.cards-container .card:nth-child(even) .card-overlay {
    background: linear-gradient(0deg, #edae00de 31%, #FAB70400 100%);
}

/* Responsivo */
@media (max-width: 992px) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cards por fila en tablets */
    }
}

@media (max-width: 600px) {
    .cards-container {
        grid-template-columns: 1fr;
        /* 1 card por fila en móviles */
    }
}


/***CARD CATEGORIE **/

.card-categorie {
    width: 200px;
    height: 200px;
    border-radius: 10px;
}

.title-categorie {
    position: absolute;
    color: #fff;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    font-weight: 500;
}

.image-categorie-card {
    height: 190px;
    overflow: hidden;
    padding: 10px;
}

.image-categorie-card>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/*
* ==========================================
* CARD PRODUCT
* ==========================================
*/
.card-product {
    width: 250px;
    border-radius: 10px;
    background-color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.card-product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.sub-title-product {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 400;
    color: #95A29D;
}

.title-product {
    color: #2f2f2f;
    font-weight: 600;
    font-size: 1.2rem;
}

.image-product-card {
    height: 200px;
    overflow: hidden;
    padding: 10px;
}

.image-product-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.badge-product {
    cursor: pointer;
    background-color: #0f3d0e;
    color: #fff;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    font-size: 0.9rem;
}

/*
* ==========================================
* CARD PRODUCT END 
* ==========================================
*/

/*
* ==========================================
* CARD LOGISTICA END 
* ==========================================
*/

.hero {
    background: #539300;
    border-radius: 15px;
    padding: calc(4rem - 30px) 1rem 3rem 1rem;
}

@media (min-width: 768px) {
    .hero {
        padding: calc(4rem - 30px) 0 4rem 0;
    }
}

@media (min-width: 992px) {
    .hero {
        padding: calc(8rem - 30px) 0 5rem 0;
    }
}

@media (min-width: 1500px) {
    .hero {
        padding: calc(8rem - 30px) 0 10rem 0;
    }
}

.hero .intro-excerpt {
    position: relative;
    z-index: 4;
}

@media (min-width: 992px) {
    .hero .intro-excerpt {
        max-width: 450px;
    }
}

.hero h1 {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 30px;
    font-size: 2.5rem;
    font-family: 'quantify', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (min-width: 1400px) {
    .hero h1 {
        font-size: 54px;
    }
}

.hero p {
    font-size: 1.3rem;
    color: rgb(255 255 255);
    line-height: 1.6rem;
}

.hero .hero-img-wrap {
    position: relative;
}

.hero .hero-img-wrap img {
    position: relative;
    top: 0px;
    right: 0px;
    z-index: 2;
    max-width: 780px;
    left: -20px;
}

@media (min-width: 768px) {
    .hero .hero-img-wrap img {
        right: 0px;
        left: 325px;
        position: absolute;
        max-width: 400px;
        top: -330px;
    }
}

@media (min-width: 992px) {
    .hero .hero-img-wrap img {
        left: 30px;
        top: -60px;
        position: absolute;
        max-width: 100%;
    }
}

@media (min-width: 1300px) {
    .hero .hero-img-wrap img {
        left: 90px;
        /* top: -220px; */
    }
}

@media (min-width: 1200px) {
    .hero .hero-img-wrap img {
        left: 30px;
        top: -130px;
    }
}


/*
* ==========================================
* CARD PRODUCT END 
* ==========================================
*/

/*
* ==========================================
* SLIDER INFINITO END 
* ==========================================
*/
.slider-container {
    overflow: hidden;
    margin: 0 auto;
}

.slider-track {
    display: flex;
    animation: scroll 10s linear infinite;
}

.slide {
    min-width: 200px;
    text-align: center;
    font-size: 2rem;
    padding: 40px;
}

.slider-container:hover .slider-track {
    animation-play-state: paused;
}

.image-clientes-card {
    cursor: pointer;
}

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

    100% {
        transform: translateX(calc(-200px * 8));
    }
}

/*
* ==========================================
* SLIDER INFINITO END 
* ==========================================
*/

.card-clientes {
    width: 150px;
    height: 150px;
    border-radius: 100px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.image-clientes-card {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-clientes-card>img {
    width: 80%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}


.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff;
}

.btn:hover {
    color: #fff !important;
    background-color: #0f3d0ed4 !important;
    transition: all 0.3s ease;
}

.section-inicio::before {
    background: url(/assets/img/new/shape-bottom.svg);
    bottom: 0;
    content: "";
    height: 39px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.single-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f3d0e;
    opacity: 0.3;
}

.banner-section::after {
    background: url(/assets/img/new/shape-bottom.svg);
    bottom: 0;
    content: "";
    height: 39px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.background-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

.background-overlay>img {
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0.5;
    position: absolute;
    width: 400px;
    z-index: 0;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.shape-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}



.shape-overlay>img {
    bottom: 0;
    content: "";
    height: 40px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.section-footer::before {
    background: url(/assets/img/new/shape-bottom-up.svg);
    top: -2px;
    content: "";
    height: 40px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

/* Estilos para las flechas */
.container-slider {
    position: relative;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    padding: 30px;
    background: #fff;
}

.default-btn {
    font-family: 'Barlow', sans-serif;
    font-size: 18px;
    color: #fff;
    padding: 10px 15px 10px 15px;
    border-radius: 10px;
    background-color: #0f3d0e;
}

.default-btn:hover {
    color: #fff;
    background-color: #0f3d0ed4;
    transition: all 0.3s ease;
}

.filter-tabs {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border-radius: 50px;

    margin: 0 auto;
    width: max-content;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.tab-item {
    white-space: nowrap;
    scroll-snap-align: start;

    border: none;
    outline: none;
    padding: 10px 20px;
    border-radius: 50px;
    background: #F9FBFC;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.tab-item:hover {
    background: #e5e5e5;
}

.tab-active {
    background: #edae00;
    color: #fff;
    font-weight: 600;
}

@media (max-width: 768px) {
    .filter-tabs {
        width: 100%;
        scroll-snap-type: x mandatory;
        /* efecto snap solo en mobile */
    }
}

.img-borde {
    display: inline-block;
    padding: 0px;
    border: 5px solid #ffc107;
    border-radius: 8px;
    background: #ffc107;
}

.circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    margin-left: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    visibility: visible;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-name: bounceIn;
}

.circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/**Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 400px;
    gap: 15px;
    padding: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.1) rotate(2deg);
    filter: brightness(0.8) saturate(1.2);
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 15px;
}

.gallery-item:hover::after {
    opacity: 1;
}