.navbar, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.card-trayectory .card-body strong, .text-title, .bold {
    color: var(--light-green) !important
}

html {
    --light-green: #1e743d;
    --dark-green: #185e32;
    --light-green-transp: #1e743d66;
    --dark: rgb(60, 60, 60);
    --light-gray: rgb(155, 155, 155);
    --intermediate-gray: rgb(100, 100, 100);
    --dirty-white: #f2f2f2;
    --white: rgb(242, 242, 242);
    --red: #e74c3c;
    --dark-red: #c0392b;
}

body {
    /* background-color: var(--light-gray) !important; */
    background-color: #f2f2f2 !important;
    overflow-x: hidden !important;
}


.ml-2{
    margin-left: .5em !important;
}

.mr-2{
    margin-right: .5em !important;
}
.body-opt{
    margin-bottom: 4em !important;
}
.card{
    background-color: var(--dirty-white) !important;
    border-radius: 1.25rem !important;
    border: none !important;
}
.opt{
    /* background-image: url('/img/panal2.0.png');
    background-size: cover;
    background-color: var(--light-gray) !important;
    background-repeat: no-repeat;
    background-attachment: fixed; */
    padding-bottom: 5em;
    background-color: #f2f2f2 !important;
}

.opt::after{
    content: '';
    background-image: url('/img/8989.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.header-cart-resume{
    background-color: var(--dirty-white);
}
.navbar {
    background-color: var(--dark) !important;
}
.navbar-brand{
    margin-right: 0 !important;
}
.nav-link{
    font-weight: 700 !important;
    margin-left: 10px;
}
.nav-link, .fa-shopping-cart, .btn-cart{
    color: var(--dirty-white) !important;
}

.btn:focus, .btn-close:focus, .owl-prev span:focus , .owl-next span:focus{
    box-shadow: none !important;
}

.owl-prev:hover , .owl-next:hover{
    background-color: transparent !important;
}

.btn-cart{
    margin-right: 15px !important;
    margin-top: 6px !important;
}
.btn-success{
    background-color: var(--light-green) !important;
    border-color: var(--light-green) !important
}

.btn-success:hover{
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important
}
.btn-danger {
    background-color: var(--light-gray) !important;
    border-color: var(--light-gray) !important
}

.btn-danger:focus{
    box-shadow: 0 0 0 0.25rem rgba(30,30,30,.2) !important;
}

.btn-danger:hover {
    background-color: var(--intermediate-gray) !important;
    border-color: var(--intermediate-gray) !important
}

.offcanvas {
    width: 550px !important;
    background-color: var(--dirty-white) !important;
}

.card-cart-resume{
    border-radius: 15px !important;
    box-shadow: 4px 4px 14px -4px var(--dark);
    -webkit-box-shadow: 4px 4px 14px -4px var(--dark);
    -moz-box-shadow: 4px 4px 14px -4px var(--dark);
    cursor: pointer;
}
.card-cart-resume .title-card{
    border-bottom: 1px dotted var(--dark-green);
}

input{
    background-color: var(--dirty-white) !important;
}

.cart-off {
    border: none !important;
    border-radius: 0px !important;
}

.cart-off .card-body{
    transition: transform .3s ease-in-out;
}

.cart-off .card-body:hover{
    cursor: pointer;
    transform: translateX(-5px);
}

.item:hover{
    cursor: pointer;
}

.owl-dot.active span{
    background: var(--light-green) !important;
}
* {
    scrollbar-width: auto;
    scrollbar-color: var(--light-gray) transparent
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    background-color: var(--light-gray);
    border-radius: 10px;
    border: 3px transparent
}

.form-control:focus {
    border-color: var(--light-gray) !important
}

.div-init {
    height: 75vh;
    background-color: var(--light-gray);
    margin-bottom: 2em
}

@media (max-width:600px) {
    .card-list-img {
        height: 100px !important
    }

    .opt{
        /* background-image: url('/img/panal2.0.png'); */
        background-size: cover;
        background-color: #f2f2f2 !important;
        background-repeat: no-repeat;
        background-attachment: initial;
    }
}

.text-title {
    font-weight: 900;
    font-size: 1.2em;
    line-height: 1.5
}

.body {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em !important;
}
#total-list{
    color: var(--light-green);
}
.cart-body {
    height: 80%;
    overflow-y: auto
}

.card-product {
    height: 420px;
    padding: .8em;
    border-radius: 20px;
    background-color: var(--dirty-white) !important;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform .2s ease-in-out;
    border: 1px solid var(--light-green);
}
.card-product a {
    text-decoration: none !important;
}
.card-category:hover, .card-product:hover {
    transform: translateY(-10px);
    box-shadow: 10px 10px 32px -12px var(--dark);
    -webkit-box-shadow: 10px 10px 32px -12px var(--dark);
    -moz-box-shadow: 10px 10px 32px -12px var(--dark);
    cursor: pointer;
}

.card-product-carousel:hover{
    transform: none !important;
    box-shadow:  none !important;
    -webkit-box-shadow:  none !important;
    -moz-box-shadow:  none !important;
}

.card-category-img, .card-list-img, .card-product-img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.card-category-img, .card-product-img {
    height: 30%;
    width: 100%;
    border-radius: 20px;
    transition: .3s;
    text-align: center
}

.card-category-img {
    height: 50%
}

.card-category-img img, .card-product-img img {
    height: 90%;
    width: fit-content;
    margin: auto
}

.card-product-info {
    padding-top: 10%;
    height: 175px
}

.card-category {
    text-decoration: none;
    height: 200px;
    padding: .8em;
    background: var(--dirty-white);
    border-radius: 10px;
    transition: transform .2s ease-in-out;
}

svg {
    width: 20px;
    height: 20px
}

.card-product-footer {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--light-green)
}

.text-body {
    font-size: .9em;
    padding-bottom: 10px
}

.card-product-button {
    border: 1px solid #252525;
    display: flex;
    padding: .3em;
    cursor: pointer;
    border-radius: 10px;
    transition: .3s ease-in-out
}

.card-product-button:hover {
    fill: var(--dirty-white);
    border: 1px solid var(--intermediate-gray);
    background-color: var(--intermediate-gray)
}

.btn-qty-add, .btn-qty-sub {
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    text-align: center;
    border-radius: 10px;
    margin-top: auto;
    margin-bottom: auto;
    line-height: 21px;
    user-select: none !important
}

.btn-qty-add:hover, .btn-qty-sub:hover {
    color: var(--dirty-white);
    cursor: pointer;
    transition: .3s ease-in-out;
    border: 1px solid var(--intermediate-gray);
    background-color: var(--intermediate-gray)
}

.btn-qty-sub {
    margin-right: 10px
}

.btn-qty-add {
    margin-left: 10px
}

.qty-prod {
    border-radius: 5px;
    border: 1px solid #000
}

.nav-custom {
    border: 1px solid #000;
    width: fit-content;
    margin: auto;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    background-color: var(--dirty-white);
    border-radius: 20px
}


.title-category {
    margin-top: 3em !important;
}

.title-section {
    color: var(--dirty-white);
    margin-top: 1em;
    font-size: 18px
}

.h5-about, .p-about {
    color: var(--dirty-white) !important
}

.card-services .card-title{
    color: var(--light-green);
    border-bottom: 1px solid var(--light-green);
    font-size: 1.4em !important;
    font-weight: 700 !important;
}

.card-services, .p-about {
    color: var(--dark) !important
}
.card-services strong {
    color:var(--light-green) !important;
}
.card-services {
    border: none !important;
    border-radius: 10px;
}

.right {
    margin-left: auto
}

.number-h5 {
    font-size: 32px !important
}

.accordion-button:not(.collapsed) {
    background-color: var(--light-green) !important;
    color: var(--dirty-white) !important;
}

.get-started, .section-title h2, .title-category {
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1px;
    border-radius: 10px
}

.category-description{
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 10px
}
.border-green {
    border-top: 3px solid var(--light-green) !important
}
.text-green{
    color: var(--light-green) !important;
}

.mt-5em{
    margin-top: 5em !important;
}
.total-cart {
    color: var(--light-gray)
}
.bg-light-custom{
    padding: 2em;
    border-radius: 5px;
    background-color: var(--dirty-white) !important;
    box-shadow: 4px 4px 14px -4px var(--dark);
    -webkit-box-shadow: 4px 4px 14px -4px var(--dark);
    -moz-box-shadow: 4px 4px 14px -4px var(--dark);
    cursor: pointer;
}
.total-list{
    border-bottom: 1px dotted var(--light-green);
}

.img-link {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 1em
}

.dropdown-menu {
    width: 15em !important
}

.section-title {
    margin-top: 3.5em !important;
    text-align: center;
    padding-bottom: 50px !important;
}

:target {
    scroll-margin-top: 80px;
}
.ward{
    margin-top: 7em;
}
.section-about {
    margin-top: -6em !important;
}
.section-title h2{
    font-weight: 800;
    padding: 8px 20px;
    color: var(--light-green);
    font-size: 1.5em !important;
}
.title-category, .category-description{
    font-weight: 700;
    padding: 8px 20px;
    line-height: 1;
    margin: 0;
    background: var(--dirty-white);
    color: var(--light-green);
    display: inline-block;
    border: 1px solid var(--light-green);
}

.title-category{
    width: fit-content !important;
    margin: auto !important;
    display: block;
    margin-top: 6em !important;
    margin-bottom: .5em !important;
}

.section-title h3 {
    margin: 15px 0 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--dark);
}

@media (max-width:600px) {
    .section-title h3 {
        font-size: 16px;
    }

    .bg-light{
        padding: 1em;
    }
}
.section-title h3 {
    margin-top: 1.5em !important;
}
.card-trayectory .card-title{
    font-weight: 700;
}
.card-trayectory .card-title .fa-calendar{
    color: var(--light-green)
}

.section-title p {
    margin: 15px auto 0;
    font-weight: 600
}

@media (min-width:1024px) {
    .section-title p {
        width: 50%
    }
}

.init {
    background: #9b9b9b;
    background: linear-gradient(180deg, rgba(155,155,155,1) 0%, rgba(242,242,242,1) 74%);
    /* background-image: url('/img/FONDO-PANAL-DEG.png'); */
    /* background-size: cover; */
    height: 100vh;
    width: 100vw;
}

.init::after{
    content: '';
    background-image: url('/img/8989.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.init-img {
    margin-top: 15em !important;
    width: 60%;
    z-index: 999;
}

.leyend{
    font-weight: 800;
    text-transform: uppercase;
    width: fit-content;
    margin: auto;
    margin-top: 1.5em;
    padding: .5em 1em;
    border-radius: 10px;
    color: rgb(30, 116, 61);
}

.card-trayectory {
    /* background-image: url('img/circle.png'); */
    background-size: contain;
    min-height: 285px !important;
}

.body-index{
    margin: auto;
}
@media (max-width: 1400px) {
    .init-img {
        margin-top: 6em !important;
    }
}
@media (max-width:600px) {
    .leyend{
        margin-top: 2em;
        font-size: 1rem;
    }
    .card-trayectory {
        height: 380px !important;
    }
    .init {
        height: 80vh;
    }
    .init-img {
        margin-top: 15em !important;
        width: 90%;
    }
    
    .body-index{
        margin: auto !important;
        margin-top: 16em !important;
    }
}
.card-trayectory .card-title {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--light-green-transp)
}

.card-trayectory .card-body {
    font-weight: 400
}

.get-started {
    text-decoration: none !important;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    display: block;
    width: fit-content;
    margin: auto;
    padding: 8px 30px 9px;
    transition: .5s;
    border: 2px solid var(--dirty-white);
    color: var(--dirty-white) !important;
    background-color: #9b9b9b
}

.get-started:hover {
    background: var(--light-green);
    border: 2px solid var(--light-green)
}

.card-img-top{
    width: 75% !important;
    margin: auto !important;
}

.dev-by{
    position: relative;
    bottom: 0;
}
.contact{
    font-size: 18px;
    color: var(--light-green);
    text-decoration: none !important;
    margin-top: 20px;
}

.contact:hover{
    color: var(--dark-green);
}
.card-text-contact{
    font-size: 14px !important;
}

.goback{
    margin-left: 1.5%;
    margin-top: 5px !important;
}

.owl-prev span , .owl-next span {
    font-size: 50px !important;
    color: var(--light-green);
}

/* .owl-nav{
    position: relative;
    top: -53%;
    width: 100%;
    justify-content: space-between;
    display: flex;
} */

.carousel-control-next-icon{
    background-image: url("img/next.svg") !important;
}

.carousel-control-prev-icon{
    background-image: url("img/back.svg") !important;
}

.img-carousel{
    max-height: 50% !important;
}

.link-offProducts{
    text-decoration: none !important;
    margin-bottom: 1em;

}
.link-offProducts .item-name{
    display: flex;
    margin: auto;
}

.product-view{
    margin-top: 10em;
    padding: 2em 3em;
    border-radius: 20px;
    background-color: var(--dirty-white) !important;
    transition: transform .2s ease-in-out;
    border: 1px solid var(--light-green);
}
.product-view .buttons-cart{
    margin-top: 10em;
}
.product-view .card-product-button{
    margin-top: 2em;
    width: fit-content;
    justify-content: center;
}
.product-view .card-product-button .spanCart{
    line-height: 17px;
    margin-left: .5em;
}

.product-view .card-product-button:hover{
    color:var(--dirty-white);
}

.carousel-caption{
    color: var(--light-green) !important;
    overflow-wrap: break-word;
    position: absolute;
    top: 75% !important;
}

.carousel-caption h5{
    font-weight: 800 ;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.carousel-caption p{
    font-size: 1.1em;
    font-weight: 600;
}

.img-carousel{
    width: 50% !important;
}

.input-form-category{
    width: 94% !important;
}

.btn-form-category{
    margin-left: 1% !important;
    width: 3.5% !important;
}

@media (max-width:600px) {
    .input-form-category{
        width: 86% !important;
    }
    
    .btn-form-category{
        width: 13.5% !important;
    }
    .img-carousel{
        width: 75% !important;
    }
    .product-view{
        margin-top: 5em;
        padding: 1em;
    }
    .product-view .buttons-cart{
        margin-top: 3em;
    }

    .carousel-caption{
        top: 60% !important;
    }
    
    .carousel-caption h5{
        font-size: 1em;
    }
    .carousel-caption p{
        font-size: .8em;
    }

    .goback{
        margin-left: 0 !important;
    }
}

.section-title-cul{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.carousel-caption #subtitle-modal, .carousel-caption p {
    overflow-wrap: break-word;
}


@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0); /* Sin cambio de posición en estos puntos clave */
    }
    40% {
      transform: translateY(-5px); /* Pequeño rebote hacia arriba en el 40% de la animación */
    }
    60% {
      transform: translateY(-3px); /* Pequeño rebote hacia arriba en el 60% de la animación */
    }
  }

.whatsapp-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.bounce{
    animation: bounce 1s ease infinite;
}

.whatsapp-icon a {
    display: block;
    background-color: var(--light-green);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    text-decoration: none;
    font-size: 24px;
    transition: all 0.3s ease;
    border: 0 !important;
}

.whatsapp-icon a:hover {
    background-color: var(--dark-green);
    color: black;
}