/* #region FONTS */

@font-face {
    font-family: Libre Franklin;
    src: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/fonts/LibreFranklin-Regular.ttf);
}
@font-face {
    font-family: Libre Franklin-Bold;
    src: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/fonts/LibreFranklin-Bold.ttf);
}
@font-face {
    font-family: Libre Franklin-Extrabold;
    src: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/fonts/LibreFranklin-ExtraBold.ttf);
}
@font-face {
    font-family: Libre Franklin-Black;
    src: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/fonts/LibreFranklin-Black.ttf);
}
h1{
    font-family: Libre Franklin-Black, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 3em;
    margin: 0;
    cursor: default;
}

h2{
    font-family: Libre Franklin-Extrabold, Verdana, Geneva, Tahoma, sans-serif;
    font-size: calc(1.8em + .8vw);
    cursor: default;
}
h3{
    font-family: Libre Franklin-Bold, Verdana, Geneva, Tahoma, sans-serif;
    font-size: calc(.8em + .5vw);
    cursor: default;
}
h4{
    font-family: Libre Franklin-Bold, Verdana, Geneva, Tahoma, sans-serif;
    font-weight: unset;
    cursor: default;
}
p{
    font-family: Libre Franklin, Verdana, Geneva, Tahoma, sans-serif;
    line-height: 1.7em;
    cursor: default;
}

/* #endregion FONTS */

/* #region COLORS */

:root{
    overflow-x: hidden;

    --color-1: #003A55;
    --color-2: #FC8C2E;
    --color-3: #009EB0;
    --color-4: #DC0C80;
    --color-5: #5BBAA9;
    --color-6: #A2D1BE;
    --color-7: #685B9F;

    --font-regular: Libre Franklin, Verdana, Geneva, Tahoma, sans-serif;
    --font-extrabold: Libre Franklin-Extrabold, Verdana, Geneva, Tahoma, sans-serif;
    --font-black: Libre Franklin-Black, Verdana, Geneva, Tahoma, sans-serif;

    --media-rule: screen and (min-width: 400px) and (orientation: landscape);
}

/* #endregion COLORS */

/* #region FADE EFFECTS */

.fade-in-1{
    opacity: 1!important;
    transition: opacity 1s ease-in-out!important;
}

/* #endregion FADE EFFECTS */

/* #region ANIMATIONS */

@keyframes scaleAnimation {
    0% {
      transform: scale(.8); /* Start with the initial scale value */
    }
    100% {
      transform: scale(1); /* End with the desired scale value */
    }
  }
  @keyframes heartAnimation{
    0%
    {
        font-size: calc(1em);
    }
    50%
    {
        font-size: calc(1.15em);
    }
    100%
    {
        font-size: calc(1em);
    }
  }


/* #endregion ANIMATIONS */


/* #region HEADER */

.header{
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    background-color: white;
    font-family: Libre Franklin-BOLD;
    font-size: .8em;
    color: var(--color-1);
    justify-content: space-between;
    align-items: center;
    pointer-events: all;
    z-index: 90;
}
    .header-container{
        flex: 1;
    }
        .header-container-1{
            height: 100%;
        }
        .header-logo{
            display: flex;
            height: 100%;
            align-items: center;
            margin: 0 2rem;
        }
        .header-logo img{
            height: 55%;
            object-fit: contain;
        }
        .header-container-2{
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
            align-items: center;
            margin: 0 2rem;
        }
            @media screen and (max-width: 800px){
                .header-container-2{
                    display: none;
                }
            }
                .header-container-2 button{
                    background-color: var(--color-4);
                    font-family: Libre Franklin;
                    color: white;
                    outline: transparent;
                    border: none;
                    border-radius: 5px;
                    padding: .5rem 1rem;
                    cursor: pointer;
                }
                .header-container-2 a{
                    position: relative;
                }
                .header-container-2 a::before {
                    display: flex;
                    content: '';
                    position: absolute;
                    top: 102%;
                    left: 52%; /* Start at the center */
                    width: 0%;
                    height: 1px;
                    background-color: var(--color-1);
                    align-items: center;
                    justify-content: center;
                    transform: translateX(-50%);
                    transform-origin: 0% 50%;
                    transition: 0.5s;
                }
                
                .header-container-2 a:hover::before {
                    transform: scaleX(1); /* Scale from 0 to 1 */
                    width: 100%;
                    left: 0%;
                }
                #book-button::before{
                    display: none;
                }
        
        .hamburger-icon{
            display: none;
            position: absolute;
            right: 2rem;
            height: 40px;
            aspect-ratio: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 99;
        }
            @media screen and (max-width: 800px){
                .hamburger-icon{
                    display: flex;
                }
            }
            .hamburger-icon:hover .hamburger-line{
                width: 98%;
                transition: .3s;
            }
            .hamburger-line-1-b{
                position: absolute;
                transform: rotate(45deg);
                transition: .3s ease-in-out;
            }
            .hamburger-line-2-b{
                opacity: 0;
            }
            .hamburger-line-3-b{
                position: absolute;
                transform: rotate(-45deg);
                transition: .3s ease-in-out;
            }
            .hamburger-line{
                width: 90%;
                height: 5px;
                margin: 3px 0;
                background-color: var(--color-1);
                border-radius: 10px;
                transition: .3s;
            }
                                      
                               

/* #endregion HEADER */

/* #region GENERAL STYLING */


a {
    color: inherit;
    text-decoration: none;
  }
body{
    overflow-x: hidden;
    margin: 0;
}
button{
    display: flex;
    position: relative;
    margin: 1rem;
    padding: .5rem 1.5rem;
    justify-content: center;
    align-items: center;
    font-family: 'Libre Franklin';
    font-size: 1.2em;
    letter-spacing: .05em;
    font-weight: bold;
    background-color: transparent;
    border-radius: 5px;
    border: none;
    color: white;
    cursor: pointer;
    outline: .05rem solid var(--color-3);
    outline-offset: -1px;
    transition: outline-offset .3s ease-in-out;
    z-index: 1;
}
    button::before{
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background-color: var(--color-3);
        border-radius: 5px;
        transition: .5s;
        z-index: -1;
    }
    button:hover{        
        outline: .1rem solid var(--color-3);
        outline-offset: .1rem;
        background-size: 90%;
    }
    button:hover::before{
        width: 98%;
        height: 95%;
    }
    .button-wide{
        width: 250px;
        font-size: 1.1em;
    }
    .book-button{
        outline-color: #e6973e;
    }
        .book-button:hover{
            outline-color: #ffc889;
        }
        .book-button::before{
            background-color: var(--color-2);
        }
    .tour-button{
        outline-color: transparent;
    }
        .tour-button:hover{        
            outline-color: #6ed7db;
        }
    .learn-more-button{
        outline: 1.5px solid #5bbaaa;
    }
        .learn-more-button:hover{
            outline: 1.5px solid #5bbaaa;
        }
.main-wrapper{
    opacity: 0;
    transition: opacity 1s ease-in-out!important;
}
    @media screen and (max-width: 600px) and        (orientation: portrait){
        .main-wrapper{
            opacity: 1;
      }
    }
.wrapper-background{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

/* #endregion GENERAL STYLING */

/* #region WELCOME SCREEN */

.welcome-screen-wrapper{
    display: flex;
    position: relative;
    height: 100vh;
    width: 100%;
    color: white;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    @media screen and (max-width: 600px) and (orientation: portrait){
        .welcome-screen-wrapper{
            height: auto;
            justify-content: flex-start;
        }
    }
    .welcome-screen-container{
        display: flex;
        flex-direction: column;
        align-items: center;      
        text-align: center;  
    }
        .main-title{
            margin-top: 2rem;
            font-family: Libre Franklin, Verdana, Geneva, Tahoma, sans-serif;
            font-weight: 500;
            text-align: center;
            font-size: calc(1vw + 1.4em);
        }
        @media screen and (max-width: 600px) and (orientation: portrait){
            .welcome-screen-container h1{
                margin-top: 4rem;
          }
        }
        .welcome-screen-container h1 #mother{
            display: block;
            position: relative;
            left: 5px;
            margin-top: 1rem;
            font-family: Libre Franklin-Black, Verdana, Geneva, Tahoma, sans-serif;
            font-size: calc(1vw + 2em);
            letter-spacing: .05em;
            line-height: .8em;
            text-transform: uppercase;
            transform: scale(.8);
            animation: scaleAnimation 1s forwards;
        }
        .welcome-screen-container h1 #nature{
            display: block;
            margin-bottom: 1rem;
            font-family: Libre Franklin-Black, Verdana, Geneva, Tahoma, sans-serif;
            font-size: calc(1vw + 2.1em);
            line-height: .9em;
            text-transform: uppercase;
            transform: scale(.8);
            animation: scaleAnimation 1s forwards;
        }
        .welcome-screen-wrapper p{
            margin: 0 0 1rem 0;
            font-size: calc(1vw + .8em);
            line-height: 1.45em;
        }
        .welcome-screen-buttons{
            display: flex;
            margin: 0rem 0rem 2rem;
        }
    .welcome-screen-menu{
        display: flex;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 1.1rem 0 1.1rem;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: .8em;
        font-weight: bold;
        color: black;
        background-image: linear-gradient(0deg, #ffffff, #ffffff99,  #ffffff00);
        gap: 3rem;
        justify-content: center;
    }
        @media screen and (max-width: 600px) and (orientation: portrait){
            .welcome-screen-menu{
                position: relative;
                display: none;
            }
        }
        .welcome-screen-menu-item{
            padding: 0.7rem 1rem;
            border: 0.1rem solid var(--color-1);
            border-radius: 5px;
            font-family: Libre Franklin, Verdana, Geneva, Tahoma, sans-serif;
            font-size: 1.1em;
            font-weight: 500;
            color: var(--color-1);
            background-color: white;
        }
        
        @media screen and (max-width: 600px) and (orientation: portrait){
            .welcome-screen-container h1{
                margin-top: 4rem;
          }
        }
    .welcome-screen-wrapper .wrapper-background{
        object-fit: cover;
    }

/* #endregion WELCOME SCREEN */

/* #region FLEET */

.fleet-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
    @media screen and (max-width: 600px) and    (orientation: portrait){
        .fleet-wrapper{
            opacity: 1;
      }
    }
    .fleet-wrapper h2{
        margin-top: 2.5rem;
        width: 90%;
        text-align: center;
        font-size: 30pt;
        line-height: 1.2em;
        font-weight: bolder;
        color: var(--color-1);
    }
    .fleet-wrapper h2 span{
        color: var(--color-2);
    }
    .fleet-container{
        display: flex;
        width: 100%;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        text-align: center;
        align-items: center;
        justify-content: center;
        gap: 7%;
    }
        .ship-container{
            display: flex;
            max-width: 24%;
            min-width: 300px;
            flex-direction: column;
            justify-content: center;
            border-radius: 10px;
            box-shadow: 4px 5px 5px 0px rgba(155, 155, 155, 0.75);
            transition: box-shadow 1s ease-in-out;
        }
            @media screen and (max-width: 600px) and (orientation: portrait){
                .ship-container{
                    margin-bottom: 1rem;
                    max-width: 65%;
                }
            }
            .ship-container:hover{
                box-shadow: 4px 5px 5px 0px rgba(117, 117, 117, 0.75);
                transition: box-shadow .5s ease-in-out;
            }
            .ship-container:hover .ship-image{
                filter: brightness(1.2);
                transition: .3s ease-in-out;
            }
            .ship-container:hover .learn-more-button{
                outline: 1px solid var(--color-2);
            }
        .ship-container div{
            width: 100%;
            height: 100%;
        }
        .ship-container img{
            width: 100%;
            margin: 0rem auto 1rem;
            border-radius: 10px 10px 0px 0px;
            transition: .5s ease-in-out;
        }
        .ship-title-image{
            width: 60%!important;
        }
        .ship-title{
            display: none;
        }
        .ship-container p{
            width: 70%;
            margin: auto;
            font-size: .95em;
            line-height: 1.3em;
            cursor: pointer;
        }
        .ship-container .learn-more-button{
            width: fit-content;
            margin: 1rem auto;
            color: var(--color-2);
            border: none;
            outline: none;
        }
        .ship-container .learn-more-button::before{
            background-color: transparent;
        }


/* #endregion FLEET */

.double-wrapper{
    position: relative;
}
    .double-wrapper::before{
        position: absolute;
        top: -1px;
        content: '';
        height: 100px;
        width: 100%;
        background-color: white;
        clip-path: polygon(0 0, 100% 0, 0 68%);
    }
    .double-wrapper::after{
        position: absolute;
        bottom: -1px;
        content: '';
        height: 100px;
        width: 100%;
        background-color: white;
        clip-path: polygon(0 10%, 100% 100%, 0% 100%);
    }

/* #region */

.openseadragon{
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #00d6d3;
    float: left;
    z-index: -1;
}

/* #endregion OPENSEADRAGON */

/* #region BOOK TRIP */

.book-trip-wrapper{
    position: relative;
    display: flex;
    height: 100vh;
    color: white;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
    .book-trip-wrapper h2{
        text-align: center;
        margin-top: 6.5rem;
        margin-bottom: 0;
        font-size: 26pt;
        text-shadow: 2px 1px 5px #00000059;
    }
    .book-trip-wrapper h3{
        margin: 2rem 0 3rem;
        text-align: center;
        max-width: 800px;
        font-size: 1.3em;
        line-height: 1.5em;
    }
    .book-trip-wrapper iframe{
        border: .15rem solid white;
        border-radius: 10px;
        aspect-ratio: 3.5 / 2;
    }
        @media screen and (max-width: 600px) and    (orientation: portrait){
            .book-trip-wrapper iframe{
                width: 80%;
            }
        }
    
    @media screen and (max-width: 600px) and    (orientation: portrait){
        .book-trip-wrapper .book-trip-buttons{
            width: 80%;
        }
    }

/* #endregion BOOK TRIP */

/* #region GALAPAGOS INFO */

.galapagos-info-wrapper{
    position: relative;
    display: flex;
    min-height: 100vh;
    padding-bottom: 100px;
    color: white;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
    .galapagos-info-title{
        width: 90%;
    }
    .galapagos-info-wrapper h2{
        margin-bottom: 0;
        text-align: center;
        font-size: calc(1.6em + .8vw);
        text-shadow: 2px 1px 5px #00000059;
    }
    .galapagos-info-containers{
        display: flex;
        max-width: 88%;
        color: black;
        gap: 1.5rem;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
        @media screen and (max-width: 600px) and (orientation: portrait){
            .galapagos-info-containers{
                justify-content: flex-end
            };
        }
        .info-item{
            display: flex;
            position: relative;
            width: 250px;
            height: 260px;
            margin-top: 80px;
            text-align: center;
            background-color: white;
            border-radius: 10px;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: .5rem;
        }
            @media screen and (max-width: 600px) and (orientation: portrait){
                .info-item{
                    width: 85%;
                    height: 115px;
                    margin-top: 1rem;
                    flex-direction: row;
                    justify-content: flex-end;
                }
            }
            .info-text{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
                @media screen and (max-width: 600px) and (orientation: portrait){
                    .info-text{
                        width: 80%;
                        flex-direction: column;
                        align-items: flex-start;
                        text-align: left;
                    }
                    .info-item h4{
                        display: none;
                    }
                    .info-item p{
                        text-align: left!important;
                        font-size: .8em!important;
                    }
                }
            .info-item-icon{
                position: absolute;
                bottom: 80%;
                width: 120px;
                height: 120px;
                border-radius: 100%;
                background-color: white;
                background-size: 70%;
                background-position: center;
                background-repeat: no-repeat;
                z-index: 0;
            }
                @media screen and (max-width: 600px) and (orientation: portrait){
                    .info-item-icon{
                        position: absolute;
                        top: -3%;
                        right: 80%;
                        background-size: 55%!important;
                    }
                }
                #info-item-icon-1{
                    background-image: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/images/WEBP/icon-paso-1.webp);
                }
                #info-item-icon-2{
                    background-image: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/images/WEBP/icon-paso-2.webp);
                    background-size: 65%;
                }
                #info-item-icon-3{
                    background-image: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/images/WEBP/icon-paso-3.webp);
                    background-size: 60%;
                }
                #info-item-icon-4{
                    background-image: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/images/WEBP/icon-paso-4.webp);
                    background-size: 60%;
                }
                #info-item-icon-5{
                    background-image: url(/wp-content/themes/gogalapagos/template-parts/homepage-test/assets/images/WEBP/icon-paso-5.webp);
                }
            .info-item h4{
                max-width: 85%;
                width: fit-content;
                margin: 0;
                margin-top: 3.3rem;
                border-radius: 5px;
                font-size: 1.2em;
                font-family: var(--font-1);
                color: lightgray;
                z-index: 1;
            }
            .info-item h3{
                max-width: 85%;
                margin: 0;
                margin-top: .5rem;
                color: #003956;
            }
            .info-item p{
                max-width: 85%;
                margin: 0;
                margin-top: .5rem;
                text-align: center;
                line-height: 1.4em;
                font-size: .9em;
                color: #8b8b8b;
            }        
    .book-trip-buttons{
        display: flex;
        margin: 3rem 0;
    }
    .galapagos-info-wrapper .book-trip-buttons{
        display: flex;
        width: 90%;
        justify-content: center;
    }
/* #endregion GALAPAGOS INFO */

/* #region GALAPEDIA */

.galapedia-wrapper{
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
    .galapedia-title-container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
        .galapedia-title-container h2{
            margin-bottom: 0;
        }
        .galapedia-title-container p{
            margin-top: .5rem;
        }
/* #endregion GALAPEDIA */

/* #region TESTIMONIALS */

.testimonials-wrapper{
    position: relative;
    display: flex;
    min-height: 100vh;
    color: white;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
    .testimonials-wrapper .wrapper-background{
        object-fit: fill;
    }
    @media screen and (max-width: 600px) and (orientation:   portrait){
        .testimonials-wrapper .wrapper-background{
            height: 125%;
            object-fit: cover;          
        }
    }
    .testimonials-title-container h2{
        margin-bottom: 0;
    }
        #heart{
            position: relative;
            color: transparent;
        }
        #heart::after{
            position: absolute;
            content: '❤️';
            bottom: 0;
            right: 0;
            left: -5px;
            font-size: calc(1.9em + .8vw);
            color: red;
            animation: heartAnimation 2s infinite;
            transform-origin: center;
            transition: 1s ease-in-out;
        }
    .testimonials-title-container p{
        margin-top: .5rem;
    }
    .testimonials-carousel{
        display: flex;
        color: black;
        gap: 1.5rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
        .testimonial-item{
            display: flex;
            height: 210px;
            max-width: 280px;
            text-align: left;
            padding: 1.5rem;
            background-color: white;
            border-radius: 10px;
            flex-direction: column;
            justify-content: flex-start;
        }
            @media screen and (max-width: 600px) and    (orientation: portrait){
                .testimonial-item{
                    height: auto;
                    max-width: 70%;                    
                }
            }
            .testimonial-item h4{
                width: fit-content;
                margin-top: 0.5rem;
                margin-bottom: 0;
                padding: 0.3rem 0.5rem;
                background-color: #dbede5;
                border-radius: 5px;
                color: #003956;
            }
            .testimonial-item h3{
                margin: 0;
                color: #003956;
            }
            .testimonial-item p{
                margin-top: 0;
                font-size: .95em;
                color: #8b8b8b;
            }

            @media screen and (max-width: 600px) and    (orientation: portrait){
                .testimonials-wrapper .book-trip-buttons{
                    width: 80%;        
                }
            }
/* #endregion TESTIMONIALS */

/* #region ITINERARIES */

.itineraries-wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
    .itineraries-title-container{
        position: relative;
        display: flex;
        width: 70%;
        flex-direction: column;
        align-items: flex-start;
        z-index: 1;
    }
        .itineraries-title-container h2{
            max-width: 650px;
            font-size: calc(1.6em + .8vw);
            margin-top: 7rem;
            text-align: left;
            color: var(--color-1);
            z-index: 1;
        }
            .itineraries-title-container h2 span{
                color: var(--color-2);
            }
        .itineraries-title-container p{
            max-width: 500px;
            margin-top: 0;
            font-size: 1.5em;
            text-align: left;
            color: gray;
            z-index: 1;
        }
    .itineraries-container{
        display: flex;
        position: relative;
        width: 85%;
        height: 350px;
        margin-top: 4rem;
        background-color: #ececec;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
    }
        @media screen and (max-width: 600px) and (orientation:   portrait){
            .itineraries-container{
                height: fit-content;
                width: 90%;
                padding: 1rem 0;
            }
        }
        .itineraries-category{
            display: flex;
            position: absolute;
            top: -25px;
            left: 3rem;
            width: 300px;
            height: 50px;
            border-radius: 10px;
            background-color: #c6c6c6;
        }
            @media screen and (max-width: 600px) and (orientation:   portrait){
                .itineraries-category{
                    top: -43px;
                }
            }
            .itineraries-category::after{
                position: relative;
                content: '';
                right: 50%;
                height: 50px;
                width: 3px;
                background-color: white;
            }
            .itineraries-category button{
                width: 50%;
                height: 100%;
                margin: 0;
                outline: 0;
                font-size: 1.35em;
                font-weight: unset;
            }
            .itineraries-category button::before{
                background-color: transparent;
                outline: 0;
            }
        .itineraries{
            display: flex;
            width: 90%;
            height: 80%;
            aspect-ratio: 1;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }
            @media screen and (max-width: 600px) and (orientation:   portrait){
                .itineraries{
                    height: fit-content;
                    flex-wrap: wrap;
                }
            }
            .itinerary{
                display: flex;
                height: 80%;
                background-color: #003956;
                background-size: cover;
                background-size: 110%;
                background-position: center;
                background-repeat: no-repeat;
                border-radius: 10px;
                align-items: flex-start;
                justify-content: center;
                cursor: pointer;
                aspect-ratio: 1;         
                transition: background-size .5s ease-out;
            }
                @media screen and (max-width: 600px) and        (orientation:   portrait){
                    .itinerary{
                        height: auto;
                        width: 47%;               
                    }
                }
                .itinerary:hover{                    
                    background-size: 100%;
                    filter: brightness(1.2);
                }
                .itinerary-1{
                    background-image: url(https://picsum.photos/500);
                }
                .itinerary-2{
                    background-image: url(https://picsum.photos/501);
                }
                .itinerary-3{
                    background-image: url(https://picsum.photos/502);
                }
                .itinerary-4{
                    background-image: url(https://picsum.photos/503);
                }
                .itinerary-title-container{
                    position: relative;
                    display: flex;
                    width: fit-content;
                    margin-top: 1rem;
                    color: white;
                    gap: 1rem;
                    justify-content: center;
                    align-items: center;
                    pointer-events: none;
                }
                    .itinerary-title-container::after{
                        position: absolute;
                        bottom: 0;
                        content: '';
                        width: 100%;
                        height: 1px;
                    }
                        #itinerary-title-container-1::after{
                            background-color: var(--color-4);
                        }
                        #itinerary-title-container-2::after{
                            background-color: var(--color-2);
                        }
                        #itinerary-title-container-3::after{
                            background-color: var(--color-7);
                        }
                        #itinerary-title-container-4::after{
                            background-color: var(--color-3);
                        }
                    .itinerary-title{
                        font-size: 1em;
                        line-height: 1em;
                        margin: 0;
                        padding: 0.3rem 0.5rem;
                    }
                        #itinerary-1-title{
                            background-color: var(--color-4);
                        }
                        #itinerary-2-title{
                            background-color: var(--color-2);
                        }
                        #itinerary-3-title{
                            background-color: var(--color-7);
                        }
                        #itinerary-4-title{
                            background-color: var(--color-3);
                        }
                    .itinerary-title-container h4{
                        margin: 0;
                        font-family: var(--font-1);
                        font-size: 1em;
                        line-height: 1em;
                    }
    .itineraries-wrapper img{
        position: absolute;
        top: 0;
        right: 122px;
        height: 70%;
        pointer-events: none;
    }
        @media screen and (max-width: 600px) and (orientation: portrait){
            .itineraries-wrapper img{
                height: 50vh;
                right: -22%;            
            }
        }
        

/* #endregion ITINERARIES */

/* #region QUESTIONS */

.questions-wrapper{
    position: relative;
    display: flex;
    min-height: 30vh;
    margin-top: 6rem;
    margin-bottom: 4rem;
    color: white;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    @media screen and (max-width: 600px) and (orientation: portrait){
        .questions-wrapper{
            opacity: 1;
        }
    }
    .questions-wrapper p{
        max-width: 500px;
    }
    .questions-wrapper button{
        background-color: #008bad;
    }

/* #endregion QUESTIONS */

/* #region EXPERIENCE */

.experience-wrapper{
    display: flex;
    position: relative;
    width: 100%;
    height: 100vh;
    margin: 2rem 0;
    align-items: flex-start;
    justify-content: center;
}
    @media screen and (max-width: 600px) and (orientation:   portrait){
        .experience-wrapper{
            opacity: 1;
            height: 100%;
        }
    }
    .experience-container{
        display: flex;
        width: 90%;
        height: 80%;
        margin-top: 2rem;
        flex-direction: column;
        background-image: linear-gradient(270deg, #e1e1e1, white, white);
        border-radius: 10px;
        align-items: flex-start;
    }
        .experience-container h2{
            margin-left: 28%;
            color: var(--color-1);
            font-family: var(--font-black);
            font-size: 2.2em;
            line-height: 1em;
        }
        .experience-items-container{
            display: flex;
            width: 70%;
            margin-left: auto;
            flex-wrap: wrap;
            gap: 1rem;
        }
            @media screen and (max-width: 600px) and (orientation:   portrait){
                .experience-items-container{
                    width: 60%;
                    flex-wrap: nowrap;
                    flex-direction: column;
                }
            }
            .experience-item{
                width: 40%;
                padding-left: 1rem;
            }
                @media screen and (max-width: 600px) and (orientation:   portrait){
                    .experience-item{
                        width: 90%;
                    }
                }
                .experience-item h3{
                    position: relative;
                    display: flex;
                    margin: .5rem 0;
                    color: var(--color-1);
                    align-items: center;
                }
                    .experience-item h3::before{
                        position: absolute;
                        content: '';
                        right: 100%;
                        height: 65%;
                        margin: 0 1rem;
                        background-color: orange;
                        border-radius: 100%;
                        aspect-ratio: 1;
                    }
                .experience-item p{
                    position: relative;
                    right: 2rem;
                    margin: 0;
                    font-size: .8em;
                    color: rgb(76, 76, 76);
                 }
                    @media screen and (max-width: 600px) and (orientation:   portrait){
                        .experience-item p{
                            display: none;
                        }
                    }
        .experience-container .book-trip-buttons{
            margin: 2rem 0 1rem;
            align-self: center;
        }
            @media screen and (max-width: 600px) and (orientation: portrait){
                .experience-wrapper .book-trip-buttons{
                    width: 80%;
                }
            }
    .experience-wrapper .wrapper-background{
        width: 30%;
        height: 80%;
        top: 3rem;
        left: 1rem;
        z-index: 1;
    }
        @media screen and (max-width: 600px) and (orientation: portrait){
            .experience-wrapper .wrapper-background{
                height: 50%;
                left: -67px;
                width: 50%;
                object-fit: contain;
            }
        }

/* #endregion EXPERIENCE */

/* #region POSTS */

.posts-wrapper{
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    .posts-title-container{
        display: flex;
        height: 20%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
        @media screen and (max-width: 600px) and (orientation:   portrait){
            .posts-title-container{
                width: 80%;
            }
        }
        .posts-title-container h2{
            color: var(--color-1);
            margin: 0;
        }
        .posts-title-container span{
            color: var(--color-2);
        }
    .posts-container{
        display: flex;
        width: 100%;
        height: 80%;
        margin-top: 1rem;
        gap: 1rem;
        align-items: flex-start;
        justify-content: center;
    }
        .post{
            display: flex;
            height: 80%;
            flex-direction: column;
            border-radius: 10px;
            background-position: center;
            background-size: 110%;
            background-repeat: no-repeat;
            color: white;
            justify-content: flex-start;
            align-items: center;
            aspect-ratio: 11 / 16;
            transition: background-size .5s ease-out;
            cursor: pointer;
        }
            @media screen and (max-width: 600px) and (orientation:   portrait){
                .post{
                    width: 43%;
                    height: 60%;
                }
            }
            .post:hover{                    
                background-size: 100%;
            }
                #post-1{
                    background-image: url(https://picsum.photos/600/1000);
                }
                #post-2{
                    background-image: url(https://picsum.photos/600/1001);
                }
                #post-3{
                    background-image: url(https://picsum.photos/600/1002);
                }
                    @media screen and (max-width: 600px) and (orientation:   portrait){
                        #post-3{
                            display: none;
                        }
                    }
            .post-info-container{
                display: flex;
                width: 80%;
                height: 48%;
                margin-top: 60%;
                flex-direction: column;
                justify-content: space-between;
                filter: brightness(1);
                pointer-events: none;
            }
            .post-title{
                text-align: left;
            }
            .post-excerpt{
                text-align: left;
                font-size: .9em;
            }
            .post .learn-more-button{
                width: fit-content;
                padding: 0.2rem 0.5rem;
                background-color: var(--color-2);
                border-radius: 5px;
                outline: 0;
                font-family: var(--font-regular);
                align-self: flex-start;
                filter: brightness(1);
                cursor: pointer;
            }