:root {
    --color-white: #FFF;
    --color-black: #000;
    --color-gray: #4A5565;
    --color-dark: #001A2E;
    --color-light: #F9FAFB;
    --color-yellow: #FFB900;
    --color-yellow-light: #F7EEDB;
    /* --color-dark-blue: #002B45; */
    --color-dark-blue: #002C57;
    --font-cormorant-garamond: "Cormorant Garamond", serif;
    --font-inter: "Inter", sans-serif;
}

body {
    position: relative;
    background-color: var(--color-white);
    color: var(--color-dark-blue);
    font-family: var(--font-inter);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation;
}


/* --------------------------------------General-------------------------------------- */

/* Sections */
section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

section.full {
    min-height: 100vh;
}

section.start {
    align-items: start;
}

section.end {
    align-items: end;
}

/* Header */
header {
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0;
    z-index: 100;
    padding: 0 3rem;
    height: 80px;
    background-color: var(--color-white);
    border-bottom: 1px solid #0000001A;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.header__logo span {
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 500;
}

.header__logo-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    aspect-ratio: 1;
    border-radius: 24px;
    overflow: hidden;
}

.header__logo-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

nav a.text {
    text-transform: uppercase;
    font-size: 0.93em;
    font-weight: 500;
}

nav a.button {
    display: flex;
    align-items: center;
    padding: 0 1.6rem;
    height: 44px;
    background-color: var(--color-dark-blue);
    border-radius: 22px;
    color: var(--color-white);
    font-size: 1.07em;
}

.lang-toggle {
    display: grid;
    grid-template-columns: 50px 50px;
    padding: 4px;
    height: 44px;
    background-color: transparent;
    outline: none;
    border: 2px solid var(--color-dark-blue);
    border-radius: 22px;
}

.lang-toggle span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    border-radius: 16px;
    font-size: 0.93em;
    font-weight: 500;
}

.lang-toggle span.current {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    font-weight: 400;
}

#mob-nav-btn {
    display: none;
    width: 44px;
    height: 44px;
    background-color: transparent;
    outline: none;
    border: none;
    font-size: 1.4em;
}

.mob-nav {
    position: fixed;
    display: block;
    top: 80px;
    right: 0;
    z-index: 99;
    width: 100%;
    max-width: 350px;
    background-color: var(--color-white);
    box-shadow: 0 1px 3px 0 #0000001a;
    border-bottom-left-radius: 25px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.mob-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 auto;
    padding: 2rem 3.2rem;
    max-width: 450px;
}

.mob-nav-links > a {
    display: block;
    padding: 0.8rem 1rem;
    border-radius: 16px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.93em;
    font-weight: 500;
    transition: background-color 0.3s;
}

.mob-nav-links > a:hover {
    background-color: #F9FAFB;
}

.mob-nav-btns {
    display: none;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    margin-top: 2.2rem;
}

.mob-nav-btns a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background-color: var(--color-dark-blue);
    border-radius: 20px;
    color: var(--color-white);
}

/* Footer */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5.2rem 3.2rem 8.2rem 3.2rem;
    background: linear-gradient(180deg, #002C57 0%, #001A2E 100%);
    color: var(--color-white);
}

.footer__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1084px;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr repeat(3, auto);
    column-gap: 5.2rem;
    margin-bottom: 3.2rem;
    width: 100%;
}

.footer__block {
    display: flex;
    flex-direction: column;
}

.footer__block > span {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.07em;
}

.footer__block p {
    max-width: 345px;
    color: #FFFFFFB3;
    font-size: 1.07em;
    line-height: 1.63em;
}

.footer__block > a {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    color: #FFFFFFB3;
    font-size: 1.07em;
    line-height: 1.63em;
    transition: color 0.3s;
}

.footer__block > a:hover {
    color: var(--color-white);
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
}

.footer__logo img {
    display: block;
    width: 32px;
    aspect-ratio: 1;
    object-fit: contain;
}

.footer__logo span {
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
}

.footer__sm {
    display: flex;
    column-gap: 1rem;
    margin-top: 0.8rem;
    height: 40px;
}

.footer__sm a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1;
    background-color: #FFFFFF1A;
    border-radius: 20px;
    font-size: 1.33em;
    transition: background-color 0.3s;
}

.footer__sm a:hover {
    background-color: #FFFFFF3A;
}

.footer__privacy {
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
    border-top: 1px solid #FFFFFF1A;
    color: #FFFFFFB3;
    text-align: center;
    font-size: 1.07em;
}

.footer__privacy div {
    display: flex;
    gap: 1.6rem;
}

.footer__privacy a {
    transition: color 0.3s;
}

.footer__privacy a:hover {
    color: var(--color-white);
}

/* Whats */
.whats__modal {
    position: fixed;
    display: block;
    right: 1.6rem;
    bottom: 1.6rem;
    z-index: 200;
}

.whats__modal > div {
    position: relative;
}

.whats__button {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.whats__button button {
    display: block;
    width: 64px;
    aspect-ratio: 1;
    background-color: #25D366;
    outline: none;
    border: none;
    border-radius: 32px;
    color: var(--color-white);
    font-size: 2.2rem;
    transition: background-color 0.3s;
}

.whats__button button:hover {
    background-color: #20BA5A;
}

.whats__button span {
    display: flex;
    align-items: center;
    padding: 0 0.8rem;
    height: 24px;
    background-color: var(--color-white);
    border-radius: 12px;
    color: #6A7282;
    font-size: 0.8em;
}

.whats__chat {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 8px;
    right: 0;
    z-index: 0;
    width: 385px;
    background-color: var(--color-white);
    box-shadow: 0 25px 50px -12px #00000040;
    border: 1px solid #F6F3F4;
    border-radius: 25px;
    opacity: 0;
    translate: 0 -100%;
    transition: opacity 0.3s;
    pointer-events: none;
}

.whats__chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem;
    border-bottom: 1px solid #F6F3F4;
}

.whats__chat-header h3 {
    font-family: var(--font-cormorant-garamond);
    font-size: 2em;
    font-weight: 600;
}

.whats__chat-header button {
    display: block;
    width: 25px;
    background-color: transparent;
    outline: none;
    border: none;
    color: #99A1AF;
    font-size: 1.3em;
    transition: color 0.3s;
}

.whats__chat-header button:hover {
    color: #4A5565;
}

.whats__chat-message {
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
}

.whats__chat-message label {
    margin-bottom: 8px;
    color: #4a5565;
    font-size: 0.93em;
}

.whats__chat-message select {
    display: block;
    margin-bottom: 1.6rem;
    padding: 0 1rem;
    width: 100%;
    height: 45px;
    background-color: transparent;
    outline: none;
    border: 1px solid #EBE6E7;
    border-radius: 16px;
    color: var(--color-dark-blue);
    font-size: 1.07em;
}

.whats__chat-message textarea {
    resize: none;
    display: block;
    margin-bottom: 1.6rem;
    padding: 0.8rem 1rem;
    width: 100%;
    height: 95px;
    background-color: #F9FAFB;
    outline: none;
    border: 1px solid #EBE6E7;
    border-radius: 16px;
    color: var(--color-dark-blue);
    font-size: 0.93em;
    line-height: 1.42em;
}

.whats__chat-message button {
    display: block;
    width: 100%;
    height: 48px;
    background-color: #25D366;
    outline: none;
    border: none;
    border-radius: 16px;
    color: var(--color-white);
    transition: background-color 0.3s;
}

.whats__chat-message button:hover {
    background-color: #20BA5A;
}



/* ----------------------------------------Home---------------------------------------- */

/* Hero */
.home__hero-cont {
    min-height: calc(100vh - 80px);
}

.home__hero-cont video {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home__hero-cont .overlay {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #00000040;
}

.home__hero {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 3.2rem;
    color: var(--color-white);
    text-align: center;
}

.home__hero h1 {
    margin-bottom: 1.6rem;
    max-width: 780px;
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.home__hero > p {
    margin-bottom: 2.66rem;
    max-width: 670px;
    font-size: 1.33em;
    line-height: 1.75;
}

.home__hero-btns {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.home__hero-btns a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    outline: none;
    border: none;
    border-radius: 30px;
    font-size: 1.2em;
}

.home__hero-btns a:first-child {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

.home__hero-btns a:last-child {
    background-color: #FFFFFF1A;
    border: 1px solid #FFFFFF4D;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: 0.3s background-color;
}

.home__hero-btns a:last-child:hover {
    background-color: #FFFFFF33;
}

.home__hero-reviews {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 1.33rem;
    height: 50px;
    background-color: #FFFFFF1A;
    border: 1px solid #FFFFFF4D;
    border-radius: 25px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home__hero-reviews i {
    color: var(--color-yellow);
}

.home__hero-reviews p {
    font-size: 1.07em;
}

.home__hero-reviews span {
    font-size: 1.07em;
    color: #FFFFFFCC;
}

/* Services */
.home__service-cont {
    background: center center no-repeat url('../assets/img/home-waves.jpg');
    background-size: cover;
}

.home__service {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7.4rem 3.2rem;
    width: 100%;
    background-color: #FFFFFF1A;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

}

.home__service h2 {
    margin-bottom: 1.6rem;
    text-align: center;
    color: var(--color-white);
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.home__service > p {
    margin-bottom: 5.2em;
    color: #FFFFFFCC;
    text-align: center;
    font-size: 1.33em;
}

.home__service-frames {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1.6rem;
    row-gap: 1.6rem;
    width: 100%;
    max-width: 1084px;
}

.home__service-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: #FFFFFF33;
    border-radius: 24px;
    transition: background-color 0.3s, scale 0.3s;
    transform-origin: center center;
    cursor: default;
}

.home__service-frame:hover {
    background-color: #FFFFFF4C;
    scale: 105%;
}

.home__service-frame div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
    width: 64px;
    aspect-ratio: 1;
    background-color: var(--color-dark-blue);
    border: 1px solid #FFFFFF4D;
    border-radius: 32px;
}

.home__service-frame div svg {
    color: var(--color-white);
}

.home__service-frame h3 {
    margin-bottom: 1rem;
    color: var(--color-white);
    text-align: center;
    text-shadow: 0 1px 3px #0000002A;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
}

.home__service-frame p {
    color: #FFFFFFCC;
    text-align: center;
    text-shadow: 0 1px 2px #0000004A;
    font-size: 1.07em;
    line-height: 1.63em;
}

/* Experiences */
.home__exp {
    padding: 7.4rem 3.2rem;
    background-color: var(--color-light);
}

.home__exp h2 {
    margin-bottom: 1.6rem;
    text-align: center;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.home__exp > p {
    margin-bottom: 5.2rem;
    color: var(--color-gray);
    text-align: center;
    font-size: 1.33em;
}

.home__exp-catamarans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.6rem;
    row-gap: 2.6rem;
    width: 100%;
    max-width: 1084px;
}

.home__exp-item {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 288px auto;
    width: 100%;
    background-color: var(--color-white);
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    border-radius: 24px;
    transition: box-shadow 0.3s;
    overflow: hidden;
}

.home__exp-item:hover {
    box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}

.home__exp-item-img {
    display: block;
    width: 100%;
    height: 288px;
    overflow: hidden;
}

.home__exp-item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.3s;
    transform-origin: center center;
}

.home__exp-item-img img:hover {
    scale: 105%;
}

.home__exp-item-content {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    height: 100%;
}

.home__exp-item-content h3 {
    font-family: var(--font-cormorant-garamond);
    font-size: 2em;
    font-weight: 400;
}

.home__exp-item-content a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    width: 100%;
    height: 48px;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    font-size: 1.07em;
    transition: background-color 0.3s;
}

.home__exp-item-content a:hover {
    background-color: var(--color-dark);
}

.home__exp-item-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    margin: 1.6rem 0 2rem 0;
}

.home__exp-item-list i {
    font-size: 1.33em;
}

.home__exp-item-list p {
    color: var(--color-gray);
    font-size: 1.07em;
}

/* Booking */
.home__booking-cont > img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.home__booking {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 7.4rem 3.2rem;
    width: 100%;
    min-height: inherit;
    background-color: #0000000A;
    color: var(--color-white);
}

.home__booking h2 {
    margin-bottom: 1.6rem;
    text-align: center;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.home__booking > p {
    margin-bottom: 5.2rem;
    text-align: center;
    font-size: 1.33em;
}

.home__booking-frames {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2rem;
    row-gap: 2rem;
    width: 100%;
    max-width: 1084px;
}

.home__booking-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: #FFFFFF1A;
    border: 1px solid #FFFFFF4D;
    border-radius: 24px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform-origin: center center;
    transition: 0.3s background-color, scale 0.3s;
    cursor: default;
}

.home__booking-frame:hover {
    background-color: #FFFFFF33;
    scale: 105%;
}

.home__booking-frame span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    aspect-ratio: 1;
    background-color: #FFFFFF33;
    border: 1px solid #FFFFFF4C;
    border-radius: 40px;
    font-family: var(--font-cormorant-garamond);
    font-size: 2em;
}

.home__booking-frame h3 {
    margin: 1.6rem 0 1rem 0;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
}

.home__booking-frame p {
    color: #FFFFFFCC;
    font-size: 1.07em;
    line-height: 1.63em;
}

/* Reviews */
.home__reviews-cont {
    padding: 7.4rem 3.2rem;
    background-color: var(--color-yellow-light);
}

.home__reviews-cont h2 {
    margin-bottom: 1.6rem;
    text-align: center;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.home__reviews-cont > p {
    margin-bottom: 5.2rem;
    color: var(--color-gray);
    text-align: center;
    font-size: 1.33em;
}

.home__reviews-cont a {
    display: flex;
    align-items: center;
    margin-top: 3.2rem;
    padding: 0 2rem;
    height: 56px;
    background-color: var(--color-dark-blue);
    border-radius: 28px;
    color: var(--color-white);
    font-size: 1.07em;
    transition: background-color 0.3s;
}

.home__reviews-cont a:hover {
    background-color: var(--color-dark);
}

.home__reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    width: 100%;
    max-width: 1084px;
}

.home__reviews-item {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    width: 100%;
    background-color: var(--color-white);
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    border-radius: 24px;
    transition: box-shadow 0.3s;
}

.home__reviews-item:hover {
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
}

.home__reviews-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
}

.home__reviews-stars i {
    color: var(--color-yellow);
    font-size: 1.33em;
}

.home__reviews-item > p {
    margin-bottom: 1.6rem;
    color: #364153;
    font-size: 1.07em;
    line-height: 1.63em;
}

.home__reviews-user {
    padding-top: 1rem;
    border-top: 1px solid #F6F3F4;
}

.home__reviews-user p {
    margin-bottom: 4px;
    font-size: 1.07em;
    line-height: 1.5em;
}

.home__reviews-user span {
    color: #6A7282;
    font-size: 0.93em;
}

/* Ready */
.home__ready-cont {
    padding: 7.4rem 3.2rem;
}

.home__ready-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 1084px;
    min-height: 500px;
    border-radius: 24px;
    overflow: hidden;
}

.home__ready {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
    background-color: var(--color-dark-blue);
}

.home__ready h2 {
    margin-bottom: 1.6rem;
    color: var(--color-white);
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2rem;
    font-weight: 400;
}

.home__ready p {
    margin-bottom: 2rem;
    color: #FFFFFFCC;
    font-size: 1.33em;
    line-height: 1.63em;
}

.home__ready div {
    display: flex;
    gap: 1rem;
}

.home__ready a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 56px;
    border-radius: 28px;
    transition: 0.3s background-color;
}

.home__ready a.solid {
    background-color: var(--color-white);
    font-weight: 500;
}

.home__ready a.blur {
    background-color: #FFFFFF1A;
    border: 1px solid #FFFFFF4D;
    color: var(--color-white);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home__ready a.blur:hover {
    background-color: #FFFFFF33;
}

.home__ready a.solid:hover {
    background-color: #F2F2F5;
}




.home__ready-img {
    display: block;
    width: 100%;
    height: 100%;
}

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


/* ----------------------------------------Tours--------------------------------------- */

.tours__hero {
    gap: 1.6rem;
    padding: 7.4rem 3.2rem;
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
    text-align: center;
}

.tours__hero h1 {
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.tours__hero p {
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

/* Catamarans */
.tours__catamarans-cont {
    padding: 5.2rem 3.2rem;
}

.tours__catamarans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.6rem;
    row-gap: 2.6rem;
    width: 100%;
    max-width: 1084px;
}

.tours__catamarans-item {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 288px auto;
    width: 100%;
    background-color: var(--color-white);
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    border-radius: 24px;
    transition: box-shadow 0.3s;
    overflow: hidden;
}

.tours__catamarans-item:hover {
    box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}

.tours__catamarans-item-img {
    display: block;
    width: 100%;
    height: 288px;
    overflow: hidden;
}

.tours__catamarans-item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.3s;
    transform-origin: center center;
}

.tours__catamarans-item-img img:hover {
    scale: 105%;
}

.tours__catamarans-item-content {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    height: 100%;
}

.tours__catamarans-item-content h3 {
    font-family: var(--font-cormorant-garamond);
    font-size: 2em;
    font-weight: 400;
}

.tours__catamarans-item-content a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    width: 100%;
    height: 48px;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    font-size: 1.07em;
    transition: background-color 0.3s;
}

.tours__catamarans-item-content a:hover {
    background-color: var(--color-dark);
}

.tours__catamarans-item-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    margin: 1.6rem 0 2rem 0;
}

.home__exp-item-list i {
    font-size: 1.33em;
}

.tours__catamarans-item-list p {
    color: var(--color-gray);
    font-size: 1.07em;
}

/* Privacy */
.tours__privacy-cont {
    padding: 7.4em 3.2rem;
}

.tours__privacy {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    width: 100%;
    max-width: 1084px;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    text-align: center;
}

.tours__privacy h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.tours__privacy p {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 750px;
    color: #FFFFFFCC;
    font-size: 1.33em;
    line-height: 1.2em;
}

.tours__privacy a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background-color: var(--color-white);
    border-radius: 30px;
    color: var(--color-dark-blue);
    font-size: 1.2em;
    transition: background-color 0.3s;
}

.tours__privacy a:hover {
    background-color: #F6F3F4;
}



/* ----------------------------------------Vessel---------------------------------------- */

.vessel__hero-cont {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: calc(100vh - 80px - 4rem) auto;
}

.vessel__swiper {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    position: relative;
    display: block;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.vessel__swiper .swiper {
    width: 100%;
    height: 100%;
}

.vessel__swiper .swiper-slide {
    display: block;
    width: 100%;
    height: 100%;
}

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

.vessel__hero {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    grid-template-rows: auto min-content;
    column-gap: 2rem;
    z-index: 1;
    padding: 3.2rem 1rem 1rem 1rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,#000000B3 0%, #00000033 50%, #00000000 100%);
}

.vessel__hero button {
    align-self: center;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background-color: #FFFFFFCC;
    outline: none;
    border: none;
    border-radius: 24px;
    font-size: 1.33em;
    transition: background-color 0.3s;
}

.vessel__hero #swiper-prev {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.vessel__hero #swiper-next {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

.vessel__hero button:hover {
    background-color: var(--color-white);
}

.vessel__hero-info {
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    max-width: 1084px;
    color: var(--color-white);
}

.vessel__hero-title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: center;
    display: block;
    width: 100%;
    max-width: 1084px;
    color: var(--color-white);
}

.vessel__hero-title a {
    display: flex;
    gap: 8px;
    margin-bottom: 1.6rem;
    width: max-content;
    font-size: 1.07em;
}

.vessel__hero-title h1 {
    margin-bottom: 0.8rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2rem;
    font-weight: 400;
}

.vessel__hero-title p {
    font-size: 1.33em;
}

.vessel__hero-tags {
    align-self: end;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    width: 100%;
    max-width: 1084px;
}

.vessel__hero-tags span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    height: 55px;
    background-color: #FFFFFF1A;
    border: 1px solid #FFFFFF4D;
    border-radius: 27.5px;
    color: var(--color-white);
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vessel__hero-features {
    justify-self: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 4rem 3.2rem;
    width: 100%;
    max-width: calc(1084px + 6.4rem);
}

.vessel__hero-features h3 {
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
}

.vessel__features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1.6rem;
}

.vessel__feature-item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.8rem;
    padding: 1rem;
    background-color: var(--color-yellow-light);
    border-radius: 16px;
}

.vessel__feature-item span {
    display: block;
    margin-top: 6px;
    width: 8px;
    height: 8px;
    background-color: var(--color-dark-blue);
    border-radius: 4px;
}

.vessel__feature-item p {
    color: #364153;
    font-size: 1.07em;
    line-height: 1.5em;
}

/* Tours */
.vessel__tours {
    padding: 7.4rem 3.2rem;
}

.vessel__tours h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.vessel__tours > p {
    margin-bottom: 4.2rem;
    color: var(--color-gray);
    text-align: center;
    font-size: 1.33em;
}

.vessel__tours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.6rem;
    width: 90%;
    /* max-width: 1084px; */
}

.vessel__tour-item {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 400px auto;
    width: 100%;
    background-color: var(--color-white);
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    border-radius: 24px;
    transition: box-shadow 0.3s;
    overflow: hidden;
}

.vessel__tour-item:hover {
    box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}

.vessel__tour-img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.vessel__tour-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.3s;
    transform-origin: center center;
}

.vessel__tour-img img:hover {
    scale: 105%;
}

.vessel__tour-img span {
    position: absolute;
    display: flex;
    align-items: center;
    top: 1rem;
    right: 1rem;
    padding: 0 1rem;
    height: 40px;
    background-color: #FFFFFFF2;
    border-radius: 20px;
    font-size: 0.93em;
}

.vessel__tour-info {
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.vessel__tour-info p {
    margin-bottom: 1.6rem;
    color: #4A5565;
    font-size: 1.07em;
    line-height: 1.63em;
}

.vessel__tour-info a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    width: 100%;
    height: 48px;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    font-size: 1.07em;
    transition: background-color 0.3s;
}

.vessel__tour-info a:hover {
    background-color: var(--color-dark);
}

.vessel__tour-header {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.8rem;
    margin-bottom: 1rem;
}

.vessel__tour-header h3 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.07em;
    font-weight: 400;
}

.vessel__tour-header .from {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: end;
    color: #6A7282;
    text-align: right;
    font-size: 0.93em;
}

.vessel__tour-header .price {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    line-height: 1.33em;
}

/* Book */
.vessel__book-cont {
    padding: 7.4em 3.2rem;
}

.vessel__book {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    width: 100%;
    max-width: 1084px;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    text-align: center;
}

.vessel__book h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.vessel__book p {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 750px;
    color: #FFFFFFCC;
    font-size: 1.33em;
    line-height: 1.2em;
}

.vessel__book a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background-color: var(--color-white);
    border-radius: 30px;
    color: var(--color-dark-blue);
    font-size: 1.2em;
    transition: background-color 0.3s;
}

.vessel__book a:hover {
    background-color: #F6F3F4;
}



/* ---------------------------------------Booking--------------------------------------- */

.booking__banner {
    display: block;
    width: 100%;
    height: 70vh;
}

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

.booking__grid-cont {
    padding: 5.2rem 3.2rem;
}

.booking__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 3.2rem;
    row-gap: 4.2rem;
    width: 100%;
    max-width: 1084px;
}

.booking__info {
    display: flex;
    flex-direction: column;
}

.booking__info h1 {
    margin-bottom: 1rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.booking__grid .subtitle {
    margin-bottom: 2rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    line-height: 1.24em;
}

.booking__info h2 {
    margin: 3.2rem 0 1.6rem 0;
    font-family: var(--font-cormorant-garamond);
    font-size: 2.4em;
    font-weight: 400;
}

.booking__info > p {
    color: #364153;
    font-size: 1.2em;
    line-height: 1.63em;
}

.booking__info iframe {
    width: 100%;
    height: 400px;
    border-radius: 16px;
}

.booking__features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.booking__features-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: min-content auto;
    column-gap: 1rem;
    row-gap: 4px;
    padding: 1.6rem;
    width: 100%;
    background-color: var(--color-yellow-light);
    border-radius: 24px;
}

.booking__features-item.double {
    grid-column: 1 / -1;
}

.booking__features-item div {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    font-size: 1.6em;
}

.booking__features-item span {
    color: #4A5565;
    font-size: 0.93em;
}

.booking__features-item p {
    font-size: 1.2em;
    line-height: 1.56em;
}

.booking__bring {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 2rem;
    width: 100%;
    background-color: #F9FAFB;
    border-radius: 24px;
}

.booking__bring i {
    font-size: 8px;
    line-height: 20px;
}

.booking__bring span {
    color: #364153;
    font-size: 1.07em;
    line-height: 20px;
}

.booking__included {
    display: grid;
    align-items: center;
    grid-template-columns: 24px 10fr 19fr;
    column-gap: 1rem;
    row-gap: 0.8rem;
}

.booking__included i {
    font-size: 24px;
}

.booking__included .hr {
    grid-column: 2 / 4;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #0000001A;
}

.booking__included span {
    font-size: 1.06em;
}

.booking__included p {
    color: #4A5565;
    font-size: 0.93em;
    line-height: 1.5em;
}

.booking__included.not i,
.booking__included.not span {
    color: #6A7282;
}

.booking__add-ons {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1.07rem;
    row-gap: 6px;
}

.booking__add-ons h3 {
    font-family: var(--font-cormorant-garamond);
    font-size: 1.8em;
    font-weight: 400;
}

.booking__add-ons .price {
    text-align: end;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.8em;
}

.booking__add-ons span {
    color: #4A5565;
    font-size: 1.15em;
}

.booking__add-ons p {
    margin-top: 6px;
    color: #364153;
    line-height: 1.5em;
}

.booking__add-ons hr {
    grid-column: 1 / 3;
    margin: 1rem 0;
    border-color: #0000001A;
    background-color: #0000001A;
    color: #0000001A;
}

/* Aside Frame */
.booking__frame-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.booking__frame {
    position: sticky;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 100px;
    padding: 2rem;
    border: 2px solid var(--color-dark-blue);
    border-radius: 24px;
    text-align: center;
}

.booking__frame span {
    margin-bottom: 8px;
    color: #4A5565;
    font-size: 0.93em;
}

.booking__frame .price {
    margin-bottom: 8px;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.booking__frame .deposit {
    margin-bottom: 8px;
    font-family: var(--font-cormorant-garamond);
    font-size: 2.2em;
    font-weight: 400;
}

.booking__frame .hr {
    display: block;
    margin: 1.6rem 0;
    width: 100%;
    height: 1px;
    background-color: #0000001A;
}

.booking__frame a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    width: 100%;
    height: 50px;
    border: 2px solid var(--color-dark-blue);
    border-radius: 25px;
    font-size: 1.07em;
}

/* Gallery */
.booking__gallery-cont {
    padding: 5.6rem 4.2rem;
    background-color: #F9FAFB;
}

.booking__gallery-cont h2 {
    font-family: var(--font-cormorant-garamond);
    font-size: 2.4em;
    font-weight: 400;
}

.booking__gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin: 3.2rem 0 2.4rem 0;
    width: 100%;
    max-width: 1084px;
}

.booking__gallery-img {
    display: block;
    height: 240px;
    border-radius: 24px;
    overflow: hidden;
}

.booking__gallery-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.45s cubic-bezier(.4, 0, .2, 1);
    transform-origin: center center;
    cursor: pointer;
}

.booking__gallery-img img:hover {
    scale: 110%;
}

/* All Tours */
.booking__all-tours {
    gap: 3.2rem;
    padding: 7.4rem 3.2rem;
}

.booking__all-tours h2 {
    text-align: center;
    font-family: var(--font-cormorant-garamond);
    font-size: 2.4em;
    font-weight: 400;
}

.booking__all-tours a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 56px;
    background-color: var(--color-dark-blue);
    border-radius: 28px;
    color: var(--color-white);
    font-size: 1.07em;
    transition: background-color 0.3s;
}

.booking__all-tours a:hover {
    background-color: var(--color-dark);
}



/* ----------------------------------------About---------------------------------------- */

.about__hero {
    gap: 1.6rem;
    padding: 7.4rem 3.2rem;
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
    text-align: center;
}

.about__hero h1 {
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.about__hero p {
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

/* Story */
.about__story-cont {
    padding: 7.4rem 3.2rem;
}

.about__story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.2rem;
    row-gap: 4rem;
    width: 100%;
    max-width: 1084px;
}

.about__story-img {
    align-self: center;
    display: block;
    width: 100%;
    aspect-ratio: 47 / 35;
}

.about__story-img img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: cover;
}

.about__story-texts h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.about__story-texts p {
    color: #364153;
    font-size: 1.2em;
    line-height: 1.66em;
}

.about__story-texts p:not(:last-child) {
    margin-bottom: 1rem;
}

/* Values */
.about__values-cont {
    padding: 7.4rem 3.2rem;
    background-color: var(--color-yellow-light);
}

.about__values {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.about__values h2 {
    margin-bottom: 1.6rem;
    text-align: center;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.about__values > p {
    margin-bottom: 5.2rem;
    color: var(--color-gray);
    text-align: center;
    font-size: 1.33em;
}

.about__values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.6rem;
    row-gap: 1.6rem;
    width: 100%;
    max-width: 1084px;
}

.about__values-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: var(--color-white);
    border-radius: 24px;
    cursor: default;
}

.about__values-item div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.6rem;
    width: 64px;
    aspect-ratio: 1;
    background-color: var(--color-dark-blue);
    border-radius: 32px;
}

.about__values-item div svg {
    color: var(--color-white);
}

.about__values-item h3 {
    margin-bottom: 1rem;
    text-align: center;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
}

.about__values-item p {
    color: #364153;
    text-align: center;
    font-size: 1.07em;
    line-height: 1.63em;
}

/* Fleet */
.about__fleet-cont {
    padding: 7.4rem 3.2rem;
}

.about__fleet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.2rem;
    width: 100%;
    max-width: 1084px;
}

.about__fleet-img {
    align-self: center;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    box-shadow: 0 20px 25px -5px #0000001A, 0 8px 10px -6px #0000001A;
    border-radius: 24px;
    overflow: hidden;
}

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

.about__fleet-texts h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.about__fleet-texts > p {
    margin-bottom: 1rem;
    color: #364153;
    font-size: 1.2em;
    line-height: 1.66em;
}

.about__fleet-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.6rem;
    margin-top: 2rem;
    width: 100%;
}

.about__fleet-labels div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1.6rem;
    background-color: var(--color-yellow-light);
    border-radius: 24px;
}

.about__fleet-labels span {
    font-family: var(--font-cormorant-garamond);
    font-size: 2em;
}

.about__fleet-labels p {
    color: #364153;
    font-size: 1.07em;
}

/* Crew */
.about__crew-cont {
    padding: 7.4rem 3.2rem;
    background-color: #F9FAFB;
}

.about__crew {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.2rem;
    row-gap: 2.6rem;
    width: 100%;
    max-width: 1084px;
}

.about__crew-img {
    align-self: center;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    box-shadow: 0 20px 25px -5px #0000001A, 0 8px 10px -6px #0000001A;
    border-radius: 24px;
    overflow: hidden;
}

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

.about__crew-texts h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.about__crew-texts > p {
    margin-bottom: 1rem;
    color: #364153;
    font-size: 1.2em;
    line-height: 1.66em;
}

.about__crew-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.6rem;
    row-gap: 1.6rem;
    margin-top: 2rem;
    width: 100%;
}

.about__crew-labels div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.8rem;
    padding: 1.6rem;
    background-color: var(--color-white);
    border-radius: 24px;
}

.about__crew-labels svg {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
    color: var(--color-dark-blue);
}

.about__crew-labels span {
    font-size: 1.2em;
    line-height: 1.56em;
}

.about__crew-labels p {
    color: #364153;
    font-size: 0.93em;
    line-height: 1.43em;
}

/* Trust */
.about__trust {
    padding: 7.4rem 3.2rem;
    gap: 4rem;
}

.about__trust h2 {
    text-align: center;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2rem;
    font-weight: 400;
}

.about__trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1.6rem;
    row-gap: 1.6rem;
    width: 100%;
    max-width: 1084px;
}

.about__trust-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    background-color: var(--color-yellow-light);
    border-radius: 24px;
    text-align: center;
}

.about__trust-item span {
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2rem;
}

.about__trust-item i {
    color: var(--color-yellow);
    font-size: 0.52em;
}

.about__trust-item p {
    color: #364153;
    font-size: 1.2em;
}

/* Privacy */
.about__ready-cont {
    padding: 7.4em 3.2rem;
}

.about__ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    width: 100%;
    max-width: 1084px;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    text-align: center;
}

.about__ready h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.about__ready p {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 750px;
    color: #FFFFFFCC;
    font-size: 1.33em;
    line-height: 1.2em;
}

.about__ready a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background-color: var(--color-white);
    border-radius: 30px;
    color: var(--color-dark-blue);
    font-size: 1.2em;
    transition: background-color 0.3s;
}

.about__ready a:hover {
    background-color: #F6F3F4;
}



/* ---------------------------------------Gallery-------------------------------------- */

.gallery__title {
    gap: 1.6rem;
    padding: 7.4rem 3.2rem;
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
    text-align: center;
}

.gallery__title h1 {
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.gallery__title p {
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

/* Grid */
.gallery__grid-cont {
    padding: 5.2rem 3.2rem;
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 1.6rem;
    width: 100%;
    max-width: 1084px;
}

.gallery__item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    cursor: default;
}

.gallery__item:nth-child(9n - 8) {
    grid-column: 1 / 3;
    grid-row: span 2;
}

.gallery__item:nth-child(9n - 4) {
    grid-column: 2 / 4;
    grid-row: span 2;
}

.gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.45s cubic-bezier(.4, 0, .2, 1);
    transform-origin: center center;
}

.gallery__item:hover img {
    scale: 110%;
}

.gallery__item-footer {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: end;
    top: 0;
    left: 0;
    gap: 8px;
    padding: 2rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,#000000B3 0%, #00000033 50%, #00000000 100%);
    color: var(--color-white);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(.4, 0, .2, 1);
}

.gallery__item-footer span {
    font-size: 0.93em;
    line-height: 1.43em;
}

.gallery__item-footer h3 {
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.33em;
}

.gallery__item:hover .gallery__item-footer {
    opacity: 1;
}

/* Memories */
.gallery__memories-cont {
    padding: 7.4em 3.2rem;
}

.gallery__memories {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    width: 100%;
    max-width: 1084px;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    text-align: center;
}

.gallery__memories h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.gallery__memories p {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 750px;
    color: #FFFFFFCC;
    font-size: 1.33em;
    line-height: 1.2em;
}

.gallery__memories a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background-color: var(--color-white);
    border-radius: 30px;
    color: var(--color-dark-blue);
    font-size: 1.2em;
    transition: background-color 0.3s;
}

.gallery__memories a:hover {
    background-color: #F6F3F4;
}



/* --------------------------------------Reviews-------------------------------------- */

.reviews__hero {
    gap: 1.6rem;
    padding: 7.4rem 3.2rem;
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
    text-align: center;
}

.reviews__hero h1 {
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.reviews__hero > p {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

.reviews__hero-grade {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 2rem;
    height: 84px;
    background-color: var(--color-white);
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    border-radius: 42px;
}

.reviews__hero-stars {
    display: flex;
    gap: 4px;
}

.reviews__hero-stars i {
    color: var(--color-yellow);
    font-size: 1.33em;
}

.reviews__hero-grade .vr {
    display: block;
    width: 1px;
    height: 32px;
    background-color: #d1d5dc;
    border-radius: 0.5px;
}

.reviews__hero-grade span {
    display: block;
    text-align: start;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    line-height: 1.33em;
}

.reviews__hero-grade p {
    color: #4A5565;
    font-size: 0.93em;
    line-height: 1.43em;
}

/* Grid */
.reviews__grid-cont {
    padding: 5.2rem 3.2rem;
}

.reviews__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    width: 100%;
    max-width: 1084px;
}

.reviews__grid-item {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid #EBE6E7;
    border-radius: 24px;
    transition: box-shadow 0.3s;
    cursor: default;
}

.reviews__grid-item:hover {
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}

.reviews__grid-item > p {
    margin-bottom: 1.6rem;
    color: #364153;
    font-size: 1.07em;
    line-height: 1.66em;
}

.reviews__item-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 1rem;
}

.reviews__item-stars i {
    color: var(--color-yellow);
    font-size: 1.33em;
}

.reviews__item-activity {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0 1rem;
    width: max-content;
    height: 32px;
    background-color: var(--color-yellow-light);
    border-radius: 16px;
    font-size: 0.93em;
}

.reviews__item-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 1.6rem;
    border-top: 1px solid #EBE6E7;
}

.reviews__item-author .name {
    font-size: 1.07em;
    line-height: 1.5em;
}

.reviews__item-author .location {
    color: #6A7282;
    font-size: 0.93em;
    line-height: 1.43em;
}

.reviews__item-author .date {
    color: #99A1AF;
    font-size: 0.93em;
    line-height: 1.43em;
}

/* Trip Advisor */
.reviews__trip-advisor {
    padding: 7.4rem 3.2rem;
    background-color: var(--color-yellow-light);
    text-align: center;
}

.reviews__trip-advisor h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.reviews__trip-advisor p {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

.reviews__trip-advisor a {
    display: flex;
    align-items: center;
    column-gap: 8px;
    padding: 0 2rem;
    height: 60px;
    background-color: #00AF87;
    border-radius: 30px;
    color: var(--color-white);
    font-size: 1.2em;
    transition: background-color 0.3s;
}

.reviews__trip-advisor a:hover {
    background-color: #009874;
}

/* Story */
.reviews__story-cont {
    padding: 7.4em 3.2rem;
}

.reviews__story {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem;
    width: 100%;
    max-width: 1084px;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    text-align: center;
}

.reviews__story h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.reviews__story p {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 750px;
    color: #FFFFFFCC;
    font-size: 1.33em;
    line-height: 1.2em;
}

.reviews__story a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background-color: var(--color-white);
    border-radius: 30px;
    color: var(--color-dark-blue);
    font-size: 1.2em;
    transition: background-color 0.3s;
}

.reviews__story a:hover {
    background-color: #F6F3F4;
}



/* ----------------------------------------Blog---------------------------------------- */

.blog__title {
    gap: 1.6rem;
    padding: 7.4rem 3.2rem;
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
    text-align: center;
}

.blog__title h1 {
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

/* Grid */
.blog__grid-cont {
    padding: 0 3.2rem 7.4rem 3.2rem;
}

.blog__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
    max-width: 1084px;
}

.blog__item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    border-radius: 24px;
    transition: box-shadow 0.3s;
    overflow: hidden;
}

.blog__item:hover {
    box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}

.blog__item-img {
    display: block;
    width: 100%;
    height: 256px;
    overflow: hidden;
}

.blog__item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.3s;
    transform-origin: center center;
}

.blog__item-img img:hover {
    scale: 105%;
}

.blog__item-info {
    padding: 1.6rem;
}

.blog__item-info span {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1rem;
    color: #6A7282;
    font-size: 0.93em;
}

.blog__item-info h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 0.8em;
    height: calc(1 * 1.2em);
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.2em;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.blog__item-info p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 1.6rem;
    height: calc(4 * 1.5em);
    color: #4A5565;
    font-size: 1.07em;
    line-height: 1.5em;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.blog__item-info a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    color: #0A9EA8;
    font-size: 1.07em;
}

/* Pagination */
.blog__pagination {
    display: flex;
    gap: 1.6rem;
    margin-top: 4rem;
}

.blog__pagination a {
    display: flex;
    align-items: start;
    justify-content: center;
    padding-bottom: 2px;
    width: 36px;
    aspect-ratio: 1;
    border-radius: 18px;
    font-family: var(--font-cormorant-garamond);
    font-size: 2em;
    line-height: 1em;
}

.blog__pagination a.current {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    cursor: default;
}



/* ----------------------------------------Post---------------------------------------- */

.post__cont {
    padding: 7.4rem 3.2rem;
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
}

.post {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
}

.post h1 {
    margin-bottom: 2rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.post .author {
    margin-bottom: 1rem;
    color: #364153;
    font-size: 1.33em;
}

.post .date {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1rem;
    color: #6A7282;
    font-size: 1em;
}

.post h2 {
    margin: 3.2rem 0 1.6rem 0;
    font-family: var(--font-cormorant-garamond);
    font-size: 3em;
    font-weight: 400;
}

.post h3 {
    margin: 3.2rem 0 1.6rem 0;
    font-family: var(--font-cormorant-garamond);
    font-size: 2.5em;
    font-weight: 400;
}

.post h4 {
    margin: 1.6rem 0;
    font-family: var(--font-cormorant-garamond);
    font-size: 2em;
    font-weight: 400;
}

.post h5 {
    margin: 1.6rem 0;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.8em;
    font-weight: 400;
}

.post p,
.post ol,
.post ul {
    margin: 0.8rem 0;
    color: #4A5565;
    font-size: 1.07em;
    line-height: 1.33em;
}

.post ol,
.post ul {
    padding-left: 40px;
}

.post a {
    color: #0A9EA8;
    text-decoration: underline;
}

.post img {
    display: block;
    margin: 40px auto 60px auto;
    width: max-content;
    max-width: 100%;
    max-height: 350px;
    border-radius: 10px;
    object-fit: contain;
}

.ql-align-right {
    text-align: right;
}

.ql-align-center {
    text-align: center;
}

.ql-align-justify {
    text-align: justify;
}

.ql-indent-1 {
    padding-left: 2rem;
}

.ql-indent-2 {
    padding-left: 4rem;
}

.ql-indent-3 {
    padding-left: 6rem;
}

li[data-list=bullet] {
    list-style-type: disc;
}

li.ql-indent-1 {
    margin-left: 2rem;
    padding-left: 0;
    list-style-type: lower-alpha;
}

li.ql-indent-2 {
    margin-left: 4rem;
    padding-left: 0;
    list-style-type: lower-roman;
}

li.ql-indent-3 {
    margin-left: 6rem;
    padding-left: 0;
    list-style-type: decimal;
}

li[data-list=bullet].ql-indent-1 {
    margin-left: 2rem;
    padding-left: 0;
    list-style-type: circle;
}

li[data-list=bullet].ql-indent-2 {
    margin-left: 4rem;
    padding-left: 0;
    list-style-type: square;
}

li[data-list=bullet].ql-indent-3 {
    margin-left: 6rem;
    padding-left: 0;
    list-style-type: disc;
}

/* Keywords */
.post__keywords {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.2rem;
    row-gap: 0.8rem;
}

.post__keywords span {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 45px;
    background-color: var(--color-dark-blue);
    border-radius: 22.5px;
    color: var(--color-white);
    font-size: 1.07em;
}

/* Not found */
.post__not-found {
    gap: 3.2rem;
    padding: 7.4rem 3.2rem;
    min-height: calc(100vh - 80px);
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
    text-align: center;
}

.post__not-found h1 {
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.post__not-found p {
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

.post__not-found a {
    color: #0A9EA8;
}

.post__not-found a:hover {
    text-decoration: underline;
}



/* ---------------------------------------Contact--------------------------------------- */

.contact__title {
    gap: 1.6rem;
    padding: 7.4rem 3.2rem;
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
    text-align: center;
}

.contact__title h1 {
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.contact__title p {
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

/* Grid */
.contact__grid-cont {
    padding: 5.2rem 3.2rem;

}

.contact__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 3.2rem;
    row-gap: 1.6rem;
    width: 100%;
    max-width: 1084px;
}

/* Form */
.contact__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    column-gap: 1.6rem;
    padding: 2.66rem;
    border: 1px solid #EBE6E7;
    border-radius: 24px;
}

.contact__form .two-columns {
    grid-column: 1 / -1;
}

.contact__form h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 2.4em;
    font-weight: 400;
}

.contact__form p {
    margin-bottom: 2rem;
    color: #4A5565;
    font-size: 1.07em;
    line-height: 1.5em;
}

.contact__form label {
    margin-bottom: 8px;
    color: #364153;
    font-size: 0.93em;
}

.contact__form input,
.contact__form select,
.contact__form textarea {
    display: block;
    margin-bottom: 1.6rem;
    padding: 0 1.07rem;
    width: 100%;
    height: 50px;
    background-color: #F9FAFB;
    outline: 1px solid #EBE6E7;
    border: none;
    border-radius: 16px;
    font-size: 1.07em;
}

.contact__form textarea {
    resize: none;
    padding: 0.8rem 1.07rem;
    height: 145px;
}

.contact__form input::placeholder,
.contact__form textarea::placeholder {
    color: #002C5780;
}

.contact__form input:focus {
    outline: 2px solid #0A9EA8;
}

.contact__form button {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    padding: 0 2rem;
    height: 60px;
    background-color: var(--color-dark-blue);
    outline: none;
    border: none;
    border-radius: 30px;
    color: var(--color-white);
    font-size: 1.2em;
    transition: background-color 0.3s;
}

.contact__form button:hover {
    background-color: var(--color-dark);
}

.contact__form button i {
    font-size: 0.9em;
    rotate: -45deg;
}

/* Aside */
.contact__aside {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.contact__links {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 1.07rem;
    row-gap: 1.6rem;
    width: 100%;
    padding: 2rem;
    background-color: var(--color-yellow-light);
    border-radius: 24px;
}

.contact__links h3 {
    grid-column: 1 / 3;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
}

.contact__links-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    color: var(--color-white);
    font-size: 1.5em;
}

.contact__links-texts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact__links span {
    color: #4A5565;
    font-size: 0.93em;
    line-height: 1.43em;
}

.contact__links a,
.contact__links p {
    font-size: 1.2em;
    line-height: 1.55em;
}

.contact__book {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background-color: var(--color-dark-blue);
    border-radius: 24px;
    text-align: center;
}

.contact__book h3 {
    margin-bottom: 1rem;
    color: var(--color-white);
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
}

.contact__book p {
    margin-bottom: 1.6rem;
    color: #FFFFFFCC;
    font-size: 1.07em;
    line-height: 1.5em;
}

.contact__book a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    height: 56px;
    background-color: var(--color-white);
    border-radius: 28px;
    color: var(--color-dark-blue);
    font-size: 1.07em;
    font-weight: 500;
    transition: background-color 0.3s;
}

.contact__book a:hover {
    background-color: #F6F3F4;
}

.contact__faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border: 1px solid #EBE6E7;
    border-radius: 24px;
    text-align: center;
}

.contact__faq h3 {
    margin-bottom: 1rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 1.6em;
    font-weight: 400;
}

.contact__faq p {
    margin-bottom: 1.6rem;
    color: #4a5565;
    font-size: 1.07em;
    line-height: 1.5em;
}

.contact__faq a {
    color: #0A9EA8;
    font-size: 1.07em;
}

.contact__faq a:hover {
    text-decoration: underline;
}

/* Location */
.contact__location {
    padding: 7.4rem 3.2rem;
    background-color: #F9FAFB;
}

.contact__location h2 {
    margin-bottom: 3.2rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 2.4em;
    font-weight: 400;
}

.contact__location iframe {
    display: block;
    width: 100%;
    height: 500px;
    max-width: 1084px;
    border-radius: 24px;
}



/* -----------------------------------------FAQ----------------------------------------- */

.faq__title {
    gap: 1.6rem;
    padding: 7.4rem 3.2rem;
    background: linear-gradient(180deg, #F7EEDB 0%, #FFFFFF 100%);
    text-align: center;
}

.faq__title h1 {
    font-family: var(--font-cormorant-garamond);
    font-size: 4em;
    font-weight: 400;
}

.faq__title p {
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

/* Questions */
.faq__questions-cont {
    padding: 5.2rem 3.2rem;
}

.faq__questions-cont > div {
    width: 100%;
    max-width: 1084px;
}

.faq__questions-cont h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 2rem;
    font-weight: 400;
}

.faq__questions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq__questions:not(:last-child) {
    margin-bottom: 3.2rem;
}

.faq__question-item {
    border: 1px solid;
    border-color: #EBE6E7;
    border-radius: 24px;
    transition: border-color 0.3s;
}

.faq__question-item:hover {
    border-color: #0A9EA8;
}

.faq__question-item button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem;
    width: 100%;
    background-color: transparent;
    outline: none;
    border: none;
    font-size: 1.2em;
}

.faq__question-item button i {
    color: #99A1AF;
}

.faq__question-item i.fa-chevron-up {
    color: #0A9EA8;
}

.faq__question-ans {
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 0.3s;
}

.faq__question-ans p {
    padding: 0 1.6rem 1.6rem 1.6rem;
    color: #364153;
    font-size: 1.07em;
    line-height: 1.63em;
}

/* Contact */
.faq__contact {
    padding: 7.4rem 3.2rem;
    background-color: var(--color-yellow-light);
    text-align: center;
}

.faq__contact h2 {
    margin-bottom: 1.6rem;
    font-family: var(--font-cormorant-garamond);
    font-size: 3.2em;
    font-weight: 400;
}

.faq__contact p {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 760px;
    color: #4A5565;
    font-size: 1.33em;
    line-height: 1.63em;
}

.faq__contact a {
    display: flex;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background-color: var(--color-dark-blue);
    border-radius: 30px;
    color: var(--color-white);
    font-size: 1.2em;
}



/* --------------------------------------Specials-------------------------------------- */

.hidden {
    display: none;
}

.visible {
    opacity: 1;
    pointer-events: all;
}

.grecaptcha-badge {
    display: none !important;
}




/* -------------------------------------Responsive------------------------------------- */

@media screen and (max-width: 1340px) {
    /* General */
    nav a.text {
        display: none;
    }

    #mob-nav-btn {
        display: block;
    }
}

@media screen and (max-width: 1200px) {
    /* Booking */
    .booking__frame .hr {
        margin: 1.2rem;
    }
}

@media screen and (max-width: 1024px) {
    /* General */
    .footer__grid {
        column-gap: 4.5rem;
    }
    /* Home */
    .home__service,
    .home__booking {
        padding: 7.4rem 2rem;
    }

    .home__service-frame,
    .home__booking-frame {
        padding: 2rem 1.4rem;
    }

    .home__ready div {
        flex-direction: column;
    }

    .home__ready a {
        justify-content: center;
    }

    /* Booking */
    .booking__grid {
        grid-template-columns: 1fr 280px;
    }

    /* Contact */
    .contact__grid-cont {
        padding: 5.2rem 2rem;
    }

    .contact__grid {
        column-gap: 2rem;
    }

    .contact__form {
        padding: 2.66rem 2rem;
    }

    .contact__links {
        grid-template-columns: 40px 1fr;
    }

    .contact__links-icon {
        font-size: 1.3em;
    }

    .contact__links a,
    .contact__links p {
        font-size: 1em;
    }
}

@media screen and (max-width: 900px) {
    /* General */
    header {
        padding: 0 1.8rem;
    }
    footer {
        padding: 5.2rem 2.6rem 8.2rem 2.6rem;
    }
    .footer__grid {
        grid-template-columns: repeat(3, auto);
        row-gap: 3.2rem;
    }
    .footer__block:first-child {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: start;
        gap: 3.2rem;
    }

    .footer__block p {
        max-width: 400px;
    }

    /* Home */
    .home__service,
    .home__booking {
        padding: 7.4rem 3.2rem;
    }

    .home__service-frames,
    .home__booking-frames {
        grid-template-columns: 1fr 1fr;
    }

    .home__reviews-cont {
        padding: 7.4rem 2rem;
    }

    .home__ready {
        padding: 4rem 3.2rem;
    }

    /* Vessel */
    .vessel__hero {
        grid-template-rows: 1fr 48px 1fr;
        padding: 3.2rem 1.6rem 1rem 1.6rem;
    }

    .vessel__hero-title {
        grid-column: 1 / -1;
    }

    .vessel__hero #swiper-prev,
    .vessel__hero #swiper-next {
        grid-row: 2 / 3;
    }

    .vessel__hero-tags {
        grid-column: 1 / -1;
        grid-row: 3 / 4;
    }

    .vessel__tours {
        padding: 5.2rem 3.2rem 7.4rem 3.2rem;
    }

    /* Booking */
    .booking__info h1 {
        font-size: 3em;
    }

    .booking__features-grid {
        grid-template-columns: 100%;
        gap: 1.2rem;
    }

    .booking__grid {
        grid-template-columns: 1fr 260px;
    }

    .booking__gallery-cont {
        padding: 5.6rem 3.2rem;
    }

    /* About */
    .about__trust-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about__values-cont {
        padding: 7.4rem 2rem;
    }

    .about__crew-labels {
        grid-template-columns: 100%;
    }

    /* Gallery */
    .gallery__grid-cont {
        padding: 5.2rem 2.2rem;
    }

    .gallery__grid {
        grid-auto-rows: 220px;
    }

    .gallery__item-footer {
        padding: 1.6rem;
    }

    /* Reviews */
    .reviews__grid-cont {
        padding: 5.2rem 2.2rem;
    }

    /* Blog */
    .blog__item-info h2 {
        height: calc(2 * 1.2em);
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }

    /* Contact */
    .contact__grid-cont {
        padding: 5.2rem 3.2rem;
    }

    .contact__grid {
        grid-template-columns: 100%;
    }

    .contact__links a,
    .contact__links p {
        font-size: 1.2em;
    }

    .contact__links {
        grid-template-columns: 48px 1fr;
    }

    .contact__links-icon {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 760px) {
    /* General */
    nav a.button,
    nav .lang-toggle {
        display: none;
    }

    .mob-nav {
        max-width: unset;
        border-bottom-left-radius: 0;
    }

    .mob-nav-btns {
        display: grid;
    }

    .lang-toggle {
        grid-template-columns: 48px 48px;
        height: 40px;
    }

    .lang-toggle span {
        height: 28px;
        font-size: 0.9em;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

    .footer__block:first-child {
        flex-direction: column;
        gap: 0;
    }

    .footer__block:last-child {
        grid-column: 1 / -1;
    }

    .footer__privacy {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .whats__modal {
        right: 1.07rem;
        bottom: 1.07rem;
    }

    .whats__button span {
        display: none;
    }

    .whats__button button {
        width: 56px;
        font-size: 2em;
    }

    .whats__chat {
        top: -0.8rem;
        width: calc(100vw - 2.14rem);
        max-width: 350px;
    }

    .whats__chat-message textarea {
        height: 115px;
    }

    /* Home */
    .home__hero h1,
    .home__exp h2,
    .home__service h2,
    .home__booking h2,
    .home__reviews-cont h2,
    .home__ready h2 {
        font-size: 2.2em;
    }

    .home__service-frames,
    .home__booking-frames {
        grid-template-columns: 100%;
        max-width: 350px;
    }
    .home__exp-catamarans {
        grid-template-columns: 100%;
        max-width: 400px;
    }

    .home__reviews {
        grid-template-columns: 100%;
        max-width: 400px;
    }

    .home__ready {
        text-align: center;
    }

    .home__ready div {
        margin: 0 auto;
    }

    .home__ready-grid {
        grid-template-columns: 100%;
    }

    .home__ready-img img {
        height: 280px;
    }

    /* Tours */
    .tours__hero h1,
    .tours__privacy h2 {
        font-size: 2.2em;
    }

    .tours__catamarans {
        grid-template-columns: 100%;
        max-width: 400px;
    }

    .tours__privacy {
        padding: 4rem 2rem;
    }

    /* Vessel */
    .vessel__hero-title h1 {
        font-size: 2.6em;
    }

    .vessel__hero-tags {
        grid-template-columns: 1fr 1fr;
    }

    .vessel__hero-features {
        padding: 4rem 2.2rem;
    }

    .vessel__tours-grid {
        grid-template-columns: 100%;
        max-width: 500px;
    }

    .vessel__tours h2,
    .vessel__book h2 {
        font-size: 2.2em;
    }

    .vessel__book {
        padding: 4rem 2rem;
    }

    /* Booking */
    .booking__info h1 {
        margin-bottom: 2.2rem;
        font-size: 2.2em;
    }

    .booking__info h2 {
        font-size: 2em;
    }

    .booking__grid {
        grid-template-columns: 100%;
    }

    .booking__frame-track {
        grid-row: 1 / 2;
    }

    .booking__frame {
        justify-self: center;
        width: 100%;
        max-width: 400px;
    }

    .booking__gallery-cont {
        padding: 5.6rem 2.2rem;
    }

    .booking__gallery-cont h2,
    .booking__all-tours h2 {
        font-size: 2.2rem;
    }

    .booking__gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* About */
    .about__hero h1,
    .about__story-texts h2,
    .about__values h2,
    .about__fleet-texts h2,
    .about__crew-texts h2,
    .about__trust h2,
    .about__ready h2  {
        font-size: 2.2em;
    }

    .about__story-cont {
        padding: 5.2rem 3.2rem;
    }

    .about__story {
        grid-template-columns: 100%;
        max-width: 550px;
    }

    .about__values-grid {
        grid-template-columns: 100%;
        max-width: 400px;
    }

    .about__fleet {
        display: flex;
        flex-direction: column-reverse;
        row-gap: 2.6rem;
        max-width: 550px;
    }

    .about__crew {
        grid-template-columns: 100%;
        max-width: 550px;
    }

    .about__crew-labels {
        max-width: 300px;
    }

    .about__ready {
        padding: 4rem 2rem;
    }

    /* Gallery */
    .gallery__title h1,
    .gallery__memories h2 {
        font-size: 2.2em;
    }

    .gallery__grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }

    .gallery__item {
        height: 200px;
    }

    .gallery__item:nth-child(9n - 8),
    .gallery__item:nth-child(9n - 4) {
        grid-column: unset;
        grid-row: unset;
    }

    .gallery__item:nth-child(3n + 1) {
        grid-column: 1 / 3;
        height: 300px;
    }

    .gallery__memories {
        padding: 4rem 2rem;
    }    

    /* Reviews */
    .reviews__hero h1,
    .reviews__trip-advisor h2,
    .reviews__story h2 {
        font-size: 2.2em;
    }

    .reviews__story {
        padding: 4rem 2rem;
    }

    .reviews__grid {
        grid-template-columns: 100%;
        max-width: 450px;
    }

    /* Blog */
    .blog__title h1 {
        font-size: 2.6em;
    }

    .blog__grid {
        grid-template-columns: 100%;
        max-width: 500px;
    }

    /* Post */
    .post h1 {
        font-size: 2.8em;
    }

    .post h2 {
        font-size: 2.4em;
    }

    .post h3 {
        font-size: 2em;
    }

    .post h4 {
        font-size: 1.8em;
    }

    .post h5 {
        font-size: 1.6em;
    }

    /* Contact */
    .contact__title h1,
    .contact__location h2 {
        font-size: 2.2em;
    }

    .contact__grid-cont {
        padding: 5.2rem 2rem;
    }

    .contact__form h2 {
        font-size: 1.9em;
    }

    .contact__form {
        grid-template-columns: 100%;
    }

    .contact__form #email {
        grid-row: 6 / 7;
    }

    .contact__form #guests {
        grid-row: 10 / 11;
    }

    /* FAQ */
    .faq__title h1,
    .faq__contact h2 {
        font-size: 2.2em;
    }

    .faq__questions-cont {
        padding: 5.2rem 2.2rem;
    }

    .faq__questions-cont h2 {
        font-size: 1.6em;
    }
}

@media screen and (max-width: 480px) {
    /* General */
    header {
        padding: 0 1.2rem;
    }

    .header__logo-img {
        width: 40px;
    }

    .header__logo span {
        font-size: 1.4em;
    }

    .mob-nav-links {
        padding: 2rem 2.8rem;
    }

    /* Home */
    .home__hero {
        padding: 0 2.4rem;
    }

    .home__hero-btns a {
        padding: 0 1.6rem;
        font-size: 1.07em;
    }

    .home__exp {
        padding: 7.4rem 2.2rem;
    }

    .home__ready-cont {
        padding: 5.2rem 2.2rem;
    }

    .home__ready {
        padding: 4rem 2.6rem;
    }

    /* Tours */
    .tours__catamarans-cont {
        padding: 5.2rem 2.2rem;
    }
    .tours__privacy-cont {
        padding: 7.4em 2.2rem;
    }

    /* Vessel */
    .vessel__hero-cont {
        grid-template-rows: calc(100vh - 80px) auto;
    }

    .vessel__hero {
        padding: 3.2rem 1.4rem 1rem 1.4rem;
    }

    .vessel__features-grid {
        grid-template-columns: 100%;
    }

    .vessel__tours {
        padding: 5.2rem 2.2rem 7.4rem 2.2rem;
    }

    .vessel__tour-item {
        grid-template-rows: 320px auto;
    }

    .vessel__book-cont {
        padding: 7.4em 2.2rem;
    }

    /* Booking */
    .booking__grid-cont {
        padding: 5.2rem 1.8rem;
    }

    .booking__gallery-cont {
        padding: 5.6rem 1.2rem;
    }

    .booking__gallery-grid {
        gap: 1.2rem;
    }

    .booking__add-ons {
        grid-template-columns: 1fr 80px;
        row-gap: 10px;
    }

    .booking__add-ons h3 {
        font-size: 1.6em;
    }

    .booking__add-ons .deposit {
        text-align: end;
    }

    .booking__add-ons p {
        grid-column: 1 / 3;
    }

    .booking__add-ons > br {
        display: none;
    }

    /* About */
    .about__story-cont,
    .about__fleet-cont,
    .about__crew-cont,
    .about__ready-cont {
        padding: 5.2rem 2.2rem;
    }

    .about__trust {
        padding: 7.4rem 1.8rem;
    }

    .about__trust-item {
        padding: 1.4rem;
    }

    .about__trust-item span {
        font-size: 2.2em;
    }

    /* Gallery */
    .gallery__grid-cont {
        padding: 5.2rem 1.2rem;
    }

    .gallery__grid {
        gap: 1.2rem;
    }

    .gallery__memories-cont {
        padding: 7.4em 2.2rem;
    }

    /* Reviews */
    .reviews__hero {
        padding: 7.4rem 1.8rem;
    }

    .reviews__hero-grade {
        padding: 0 1.8rem;
    }

    .reviews__hero-grade p {
        font-size: 0.9em;
    }

    .reviews__grid-cont {
        padding: 5.2rem 1.8rem;
    }

    .reviews__trip-advisor,
    .reviews__story-cont {
        padding: 7.4rem 2.2rem;
    }

    /* Blog */
    .blog__grid-cont {
        padding: 0 2rem 7.4rem 2rem;
    }

    /* Post */
    .post__cont {
        padding: 5.2rem 1.8rem;
    }

    .post__keywords {
        column-gap: 0.8rem;
        row-gap: 0.6rem;
    }

    .post__keywords span {
        padding: 0 1.2rem;
        height: 35px;
        border-radius: 17.5px;
        font-size: 0.9em;
    }

    /* Contact */
    .contact__grid-cont {
        padding: 5.2rem 1.6rem;
    }

    .contact__form {
        padding: 2rem 1.6rem;
    }

    .contact__links {
        grid-template-columns: 38px 1fr;
        padding: 2rem 1.2rem;
    }

    .contact__links a, .contact__links p {
        font-size: 1em;
    }

    .contact__location {
        padding: 7.4rem 2.2rem;
    }

    .contact__location iframe {
        height: 350px;
    }

    /* FAQ */
    .faq__questions-cont {
        padding: 5.2rem 1.6rem;
    }

    .faq__question-item button {
        padding: 1.2rem;
    }

    .faq__question-item button span {
        text-align: start;
        font-size: 16px;
    }
}

/* IPhone SE */
@media screen and (max-width: 376px) and (max-height: 668px) {

}



/* -------------------------------------Animations------------------------------------- */



/* Keyframes */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}
@keyframes fade-out {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loader-animation {
    0% {
        top: 96px;
        left: 96px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 78px;
        left: 78px;
        width: 36px;
        height: 36px;
        opacity: 0;
    }
}
@keyframes loader-text {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}