@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}
body{
    background: #fff;
    min-height: 100vh;
}
header{
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s;
    padding: 10px 100px;
    z-index: 100;
    background: #fbeade;
}

header .logo{
    position: relative;
    font-weight: 700;
    color: #fff;
    /*text-decoration: none;*/
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.6s;
}
header ul{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
header ul li{
    position: relative;
    list-style: none;
}
header > ul > li > a{
    position: relative;
    margin: 0 15px;
    /*text-decoration: none;*/
    color: #7e2737;
    letter-spacing: 2px;
    font-weight: 600;
    transition: 0.6s;
}
header.sticky{
    position: fixed;
    padding: 5px 100px;
    background: #fbeade;
    /*height: 10vh;*/
    border-bottom: 1px solid #7e2737;
}
/*header.sticky .logo,
header.sticky ul li a{
    color: #fff;
}*/

.nav-links li a.active{
    font-weight: 800;
    color: #701d2c;
    box-shadow: inset 0 -2px #701d2c; 
    transition: .3s;
}
.nav-links li a:hover{
    font-size: 18px;
    color: #701d2c;
    transition: .3s;
}

.burger{
    display: none;
    cursor: pointer;
}
.burger div{
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 40px;
    height: 40px;
}




/* PAGINA PRINCIPAL*/

.color-primary{
    color: #7e2737;
}

.carousel-item img{
    /*background-image: linear-gradient(rgba(0,0,0,0.5), rgb(0,0,0,0.5));*/
    filter: brightness(0.7);
}

            .container-cards{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                max-width: 1200px;
                margin-block: 2rem;
                gap: 2rem
            }
            .tour-card{
                display: flex;
                flex-direction: column;
                overflow: hidden;
                box-shadow: 0 .1rem 1rem rgba(0,0,0,0.1);
                border-radius: 1em;
                background: red;
                background: linear-gradient(to right, #fff, #fff)
            }
            .tour-card-header:hover{
                background: rgba(70,109,189,0.6);
            }
            .tour-card-img{
                max-width: 100%;
                display: block;
                object-fit: cover;
            }
            .tour-card-img:hover{
                background: rgba(70,109,189,0.6);
                transform: scale(1.05);
                transition: 0.5s;
            }
            .tour-card-body{
                padding: 1rem;
                display: flex;
                flex-direction: column;
                gap: .5rem;
            }
            .tour-card-body h4{
                font-size: 1.5rem;
                text-transform: capitalize;
            }
            .tour-card-footer{
                display: flex;
                padding: 1rem;
                margin-top: auto;
            }










            h3.linea {
                font: 25px "Montserrat";
                color: #7e2737;
                margin: 0 25vw;
                text-align: center;
                position: relative;
                z-index: 1;
            }
            h3.linea:before {
                border-top: 2px solid #7e2737;
                content: "";
                margin: 0 auto;
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                bottom: 0;
                width: 70%;
                z-index: -1;
            }
            h3.linea span {  
                background: #fff;
                padding: 0 15px;
            }





            .mt-6 {
                margin-top: 4.5rem !important;
            }
            .mb-6 {
                margin-bottom: 4.5rem !important;
            }
            .mt-7 {
                margin-top: 5rem !important;
            }
            .mb-7 {
                margin-bottom: 5rem !important;
            }
            .my-6 {
                margin-top: 4.5rem !important;
                margin-bottom: 4.5rem !important;
            }
            .my-7 {
                margin-top: 5rem !important;
                margin-bottom: 5rem !important;
            }



            .icon_footer {
  font-size: 20px;
  /**Este es el color de la luna de oaxaca dreams */
  color: #7e2737;
  margin-right: 10px;
}


.go-top-container{
    position: fixed;
    bottom: 0.5rem;
    right: 0.5rem;
    width: 3.3rem;
    height: 3.3rem;
    z-index: -1;
}

.go-top-btn{
    width: 0rem;
    height: 0rem;
    background: #7e2737;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.go-top-btn i{
    position: absolute;
    font-size: 1.2rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #fbeade;
    transition: .2s;
}

.show{
    z-index: 10;
}

.show .go-top-btn{
    animation: popup .3s ease-in-out;
    width: 3.3rem;
    height: 3.3rem;
    z-index: 11;
}

.show i{
    transform: translate(-50%, -50%) scale(1);
}


.go-top-container-wa{
    position: fixed;
    bottom: 0.5rem;
    left: 0.5rem;
    width: 3.3rem;
    height: 3.3rem;
    z-index: 11;
}

.go-top-btn-wa{
    background: #25d366;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    animation: popup .3s ease-in-out;
    width: 3.3rem;
    height: 3.3rem;
}

.go-top-btn-wa i{
    position: absolute;
    font-size: 2rem;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%) scale(1);
    color: white;
    transition: .2s;
    z-index: 12;
}


.btn-circle {
    width: 35px;
    height: 35px;
    padding: 6px 0px;
    border-radius: 20px;
    text-align: center;
    font-size: 20px;
    line-height: 1.1;
}








.product-grid2{font-family:'Open Sans',sans-serif;position:relative; background:#fff;}
.product-grid2 .product-image2{overflow:hidden;position:relative}
.product-grid2 .product-image2 a{display:block}
.product-grid2 .product-image2 img{width:100%;height:auto}
.product-image2 .pic-1{opacity:1;transition:all .5s}
.product-grid2:hover .product-image2 .pic-1{transform: scale(1.2);transition: 0.5s;}
/*.product-grid2:hover .product-image2 .pic-1{opacity:0}
.product-image2 .pic-2{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;transition:all .5s}
.product-grid2:hover .product-image2 .pic-2{opacity:1}*/
.product-grid2 .social{padding:0;margin:0;position:absolute;bottom:50px;right:25px;z-index:1}
.product-grid2 .social li{margin:0 0 10px;display:block;transform:translateX(100px);transition:all .5s}
.product-grid2:hover .social li{transform:translateX(0)}
.product-grid2:hover .social li:nth-child(2){transition-delay:.15s}
.product-grid2:hover .social li:nth-child(3){transition-delay:.25s}
.product-grid2 .social li a{color:#505050;background-color:#fff;font-size:17px;line-height:45px;text-align:center;height:45px;width:45px;border-radius:50%;display:block;transition:all .3s ease 0s}
.product-grid2 .social li a:hover{color:#343a40;background-color:#44d5e6;;box-shadow:0 0 10px rgba(0,0,0,.5)}
.product-grid2 .add-to-cart{color:#fbeade;background-color:#181717;font-size:15px;text-align:center;width:100%;padding:10px 0;display:block;position:absolute;left:0;bottom:-100%;transition:all .3s}
.product-grid2 .add-to-cart:hover{background-color:#7e2737;text-decoration:none;color:#fbeade;}
.product-grid2:hover .add-to-cart{bottom:0}
.product-grid2 .product-new-label{background-color:#3498db;color:#fff;font-size:17px;padding:5px 10px;position:absolute;right:0;top:0;transition:all .3s}
.product-grid2:hover .product-new-label{opacity:0}
.product-grid2 .product-content{padding:20px 10px;text-align:center}
.product-grid2 .title{font-size:17px;margin:0 0 7px}
.product-grid2 .title a{color:#303030}
.product-grid2 .title a:hover{color:#3498db}
.product-grid2 .price{color:#303030;font-size:15px}


/*FIN PAGINA PRINCIPAL*/

/*BOTON PRIMARIO*/
.btn-primary {
    color: #fff;
    background-color: #7e2737;
    border-color: #7e2737;
}

.btn-primary:hover {
    color: #fff;
    background-color: #701d2c;
    border-color: #7e2334;
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #701d2c;
    border-color: #7e2334;
    box-shadow: 0 0 0 0.2rem rgba(190, 49, 84, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #7e2737;
    border-color: #7e2737;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #7e2334;
    border-color: #7c2737;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(190, 49, 84, 0.5);
}

.form-reservation{
    position: relative; margin-top: -130px;
}

/*FIN BOTON PRIMARIO*/
@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateY(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

@media screen and (max-width:1024px){
    header{
        padding: 40px 50px;
    }
    /*.tour-card{
        width: 30%;
    }*/
}

/*Pantalla grande*/
@media screen and (min-width:900px){
    .tour-card{
        width: 30%;
    }
    .screen-movil{
        display: none;
    }
    /*Para el texto del carousel*/
    .carousel-caption{
        bottom:40%
    }
    /*Letra en carousel*/
    .box{
        width: 37ch;
    }
}

/*Pantalla movil*/
@media screen and (max-width:900px){
    header{
        display: none;
    }
    .form-reservation{
        position: relative; margin-top: 20px;
    };
    .tour-card{
        width: 90%;
    }
    .screen-pc{
        display: none;
    }
    /*Para el texto del carousel*/
    .carousel-caption{
        bottom:20%
    }
    .carousel-caption h2{
        font-size: 15px;
    }
    /*Letra en carousel*/
    .box{
        width: 22ch;
    }
}
@media screen and (max-width:768px){
    body{
        overflow-x: hidden;
    }
    .nav-links{
        position: absolute;
        right: 0px;
        height: 100vh;
        top: 0vh;
        padding-top: 10vh;
        /*background-color: #5D4954;*/
        background-color: #036666;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        justify-content: space-around;
        border-left: 5px solid #248277;
        /*border-top: 1px solid #248277;*/
    }
    .nav-links li{
        opacity: 0;
    }
    .nav-links a{
        /*text-decoration: none;*/
        letter-spacing: 3px;
        /*font-weight: bold;*/
        font-size: 14px;
    }  
    .burger{
        display: block;
    }
    header{
        padding: 25px 50px;
    }
    header.sticky{
        padding: 5px 50px;
    }
    header.sticky ul li a{
        color: #fff;
    }
    .nav-active{
        transform: translateX(0%);
    }
}

@media (max-width:600px){
    body{
        height: auto;
    }
}

@media (max-width: 528px) {
}