@media (max-width: 1300px) {

    footer { padding: 50px 0; }

}

@media (max-width: 1250px) {

    #about__page .about__page__grid {
        aspect-ratio: 1;
    }

    #about__page .about__page__grid .grid:nth-child(2) {
        grid-column: 3/7;
        grid-row: 1/3;
    }

    #about__page .about__page__grid .grid:nth-child(3) {
        grid-column: 3/5;
        grid-row: 3/5;
    }

    #about__page .about__page__grid .grid:nth-child(5) {
        grid-column: 3/7;
        grid-row: 5/7;
    }

    #about__page .about__page__grid .grid:nth-child(6) {
        grid-column: 5/7;
        grid-row: 3/5;
    }

}

@media (max-width: 1055px) {

    #about__home .about__icons__container ul {
        justify-content: space-around;
    }

    #about__home .about__icons__container ul li {
        width: 202px;
        justify-content: center;
    }

}

@media (max-width: 1020px) {

    #tours .cards__container .card {
        width: 47%;
    }

}


@media (max-width: 950px) {
    
    .adress_nav, .copyright_icons { 
        gap: 40px;
        flex-wrap: wrap;
    }

    .adress span { width: 350px; }

    .adress {
        gap: 40px;
        flex-wrap: wrap;
    }
}

@media (max-width: 850px) {
    
    .banner {
        padding: 0;
    }

    /* ----------------- */
    /* about__home styles */
    /* ----------------- */

    #about__home .about__container {
        flex-wrap: wrap-reverse;
        justify-content: center;
        gap: 20px;
    }


    #about__home .about__container article,
    #about__home .about__container img { 
        width: 100%; 
    }

    #about__home .about__container img {

        height: 300px;

    }

    #about__page .about__page__grid .grid:nth-child(1) {
        grid-column: 1/4;
        grid-row: 1/5;
    }

    #about__page .about__page__grid .grid:nth-child(2) {
        grid-column: 4/7;
        grid-row: 1/3;
    }

    #about__page .about__page__grid .grid:nth-child(3) {
        grid-column: 4/7;
        grid-row: 3/5;
    }

    #about__page .about__page__grid .grid:nth-child(4) {
        grid-column: 1/4;
        grid-row: 5/7;
    }

    #about__page .about__page__grid .grid:nth-child(5) {
        grid-column: 4/ 7;
        grid-row: 5/7;
    }   

    #about__page .about__page__grid .grid:nth-child(6) {
        display: none;
    }   

    footer {
        padding: 50px 0;
    }

}

@media (max-width: 800px) {

    .icons__banner:nth-child(2) { display: none; }
      
    #about__page .about__page__grid .grid:nth-child(1) {
        grid-row: 1/5;
    }

    #about__page .about__page__grid .grid:nth-child(4) {
        grid-row: 5/7;
    }

    .swiper-slide .title__white { font-size: 40px !important; }

    #about__page .title__black,
    #tours .title__black,
    #reviews .title__black, 
    #find_us .title__black,
    #contact__us__container .title__black, 
    .about__container article .title__black,
    .summary h1,
    .cart-title { font-size: 40px; }

    .product-related {
        margin-top: 0 !important;
        padding-top: 30px !important;
    }

}

@media (max-width: 768px) {
    #swiper-reviews .swiper-slide {
        flex: 0 0 calc(48% - 10px); /* Una slide ocupa todo el ancho */
        max-width: calc(48% - 10px);
        padding: 15px;
    }
    #swiper-reviews {
        padding: 0 10px; /* Menor padding en móviles */
    }
    .related.products .products .product {
        max-width: 500px !important;
        width: 100% !important;
    }
}

@media (max-width: 750px) {

    #about__page .about__page__grid .grid:nth-child(1) {
        grid-column: 1/5;
    }

    #about__page .about__page__grid .grid:nth-child(2) {
        grid-column: 5/7;
    }

    #about__page .about__page__grid .grid:nth-child(3) {
        grid-column: 5/7;
    }

}


@media (max-width: 700px) {

    #about__page, #contact__us__container {
        padding-top: 155px;
    }

    #tours .all_tours {
        margin: 35px 0 0 0;
    }

    #about__page p { margin-top: 0px; }

    #about__home .about__icons__container ul li { width: 200px; }

    #about__home .about__icons__container ul li img {  
        height: 60px; 
    }
    
    #about__home .about__icons__container ul li p { 
        font-size: 16px;
        text-align: center;
    }

    #tours .cards__container .card {
        width: 100%;
    }

    .title__white { font-size: 50px; }

    #about__home .about__container h1, 
    #tours h1, #reviews h1, 
    #find_us h1, #contact__us__container h1, .cart-title { font-size: 40px; }

    #about__page .about__page__grid .grid:nth-child(1) {
        grid-column: 1/7;
        grid-row: 1/5;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        gap: 20px;
    }  

    #about__page .about__page__grid .grid:nth-child(1) h2 {
        margin: 2px 0;
    }

    #about__page .about__page__grid .grid:nth-child(2) {
        grid-column: 1/3;
        grid-row: 5/7;
    }

    #about__page .about__page__grid .grid:nth-child(3) {
        grid-column: 3/5;
        grid-row: 5/7;
    }

    #about__page .about__page__grid .grid:nth-child(4) {
        grid-column: 5/7;
        grid-row: 5/7;
    }

    #about__page .about__page__grid .grid:nth-child(5) {
        display: none;
    }

    .form__image .butterfly {
        width: 100%;
        height: 200px;
    }
    
    #contact__us__container .section__form {
        width: 100%;
    }

    footer {
        gap: 20px;
        flex-direction: column;
        align-items: center;
        padding: 20px 0 0 0;
    }

    footer .menu { display: none; }

    .copyright_icons { 
        gap: 10px;
    }

    .copyright_icons .copyright, .copyright_icons .contact__info, .copyright_icons .icons_text {
        width: 80%;
    }

    .copyright_icons .copyright { 
        padding: 0 0 20px 0;
        align-items: baseline;
    }

    .copyright_icons .icons_text img, .contact__info li img { width: 30px; }

}

@media (max-width: 600px) {

    .menu__container {
        padding: 0;
    }

    #about__home article p:nth-child(3) { width: 100%; }

    #about__page .about__page__grid .grid:nth-child(1) {
        grid-column: 1/5;
        grid-row: 1/7;
    }

    #about__page .about__page__grid .grid:nth-child(2) {
        display: block;
        grid-column: 5/7;
        grid-row: 1/3;
    }

    #about__page .about__page__grid .grid:nth-child(3) {
        grid-column: 5/7;
    }

    #about__page .about__page__grid .grid:nth-child(4) {
        grid-column: 5/7;
        grid-row: 3/5;
    }


    #about__page .title__black,
    #tours .title__black,
    #reviews .title__black, 
    #find_us .title__black, 
    #contact__us__container .title__black,
    #about__home .about__container article .title__black,
    .summary h1, .cart-title { font-size: 32px; }

    #product-pagination { display: none; }

}

@media (max-width: 550px) {

    #about__page .about__page__grid .grid:nth-child(1) h2 {
        font-size: 20px;
        margin: 0;
    }

    #swiper-reviews .swiper-slide {
        flex: calc(100% - 20px) 0 0; /* Una slide ocupa todo el ancho */
        max-width: 100%;
        transform: translate(10px);
    }

}

@media (max-width: 800px) {

    .menu__container { position: relative; }

    .menu__container .menu {
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
        position: absolute;
        width: 100vw;
        height: 100vh;
        inset: 0;
        left: -10px;
        gap: 10px;
        background-color: var(--white_variation);
        padding-top: 155px;
        clip-path: circle(0% at center left);
        transition: clip-path .4s;
    }

    .menu__container .menu li {
        font-size: 30px;
        font-weight: bold;
        height: fit-content;
    }

    .menu__container .menu__icon { display: block; }

    #toggle__menu:checked ~ nav .menu__container .menu {
        clip-path: circle(100% at center left);
    }

    .menu__container .icon__menu_container img {
        z-index: 999;
    }

    .contact__banner { display: none; }

    .banner .contact__banner__container {
        justify-content: center; 
        padding: 10px 0;
    }

    #about__home .about__icons__container ul li {
        width: 150px;
        justify-content: center;
    }

    #about__page .about__page__grid { aspect-ratio: 2/3; }

    #about__page .about__page__grid .grid:nth-child(1) {
        grid-column: 1/7;
        grid-row: 1/5;
    }

    #about__page .about__page__grid .grid:nth-child(2) {
        grid-column: 1/4;
        grid-row: 5/6;
    }

    #about__page .about__page__grid .grid:nth-child(3) {
        grid-column: 4/7;
        grid-row: 5/6;
    }

    #about__page .about__page__grid .grid:nth-child(4) {
        grid-column: 1/4;
        grid-row: 6/7;
    }

    #about__page .about__page__grid .grid:nth-child(5) {
        grid-column: 4/7;
        grid-row: 6/7;
        display: block;
    }


    .adress { display: none; }

    .copyright_icons { 
        justify-content: start;
        padding-left: 50px;
        margin: 0;
    }

    .all_tours {
        margin-top: 40px;
    }

    header img.emoji,
    footer img.emoji {
        font-size: 60px;
    }

}

@media (max-width: 425px) { 
    
    #about__page .about__page__grid { 
        height: auto;
        aspect-ratio: auto;
    }

}

@media (max-width: 400px) {

    #slider__text__container .slider__img .title__white,
    #about__home .about__container h1,
    #about__home h1, #about__page h1, #tours h1, 
    #reviews h1, #find_us h1,
    .summary h1, .cart-title,
    #tours .all_tours { font-size: 30px; }

    #slider__text__container .container__points { bottom: 50px; }

    #about__home .about__icons__container ul li { 
        width: 105px; 
        justify-content: space-between;
    }

    #about__home .about__icons__container ul li img {  
        height: 50px; 
    }
    
    #about__home .about__icons__container ul li p { 
        font-size: 14px;
        text-align: center;
    }

    .map { height: 300px; }

    .copyright_icons { 
        padding-left: 10px;
    }

    .contact__info li img { width: 20px; }

    .contact__info div { font-size: 14px; }

    .contact__info li { gap: 10px; }

}

@media (max-width: 300px) {

    .contact__info li:not(:first-child) { font-size: 14px; }

}