/* Menu */
body:has(.hero-new-xl) #header-django,
body:has(.hero-new-md) #header-django {
    background-color: transparent;
    position: absolute;
}

#header-django .navbar #navbar-menu-header .dropdown_container {
    text-transform: none;
}

#header-django .main-menu li a {
    font-weight: 300;
    font-size: 1rem;
}

#header-django .navbar-nav {
    margin-left: unset !important;
}

#header-django .main-menu li a {
    display: flex;
    align-items: center;
}

#header-django .parent-menu::after {
    content: unset !important;
}

#header-django .parent-menu::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    background: url("/media/filer_public/32/a9/32a95c7d-1433-49e7-907a-8c4c9ce456e1/decoration-tear.svg") no-repeat center;
    background-size: contain;
    transition: background-image 0.3s ease;
}

#header-django .parent-menu.active::before,
#header-django .dropdown_container.active .parent-menu::before,
#header-django .parent-menu:not(.active):hover::before {
    background-image: url("/media/filer_public/f4/95/f495c92f-2541-4e87-a188-64c45357ff0b/decoration-tear-blue.svg");
}

/* Buttons */
.custom-btn-white,
.intro-blue #contact_form button[type="submit"] {
    background-color: transparent;
    color: white;
    border: 1px solid white;
    font-weight: 300;
    border-radius: 50px;
    padding: .2rem 2rem;
    font-size: 1.1rem;
    font-family: inherit;
}

.intro-blue #contact_form button[type="submit"] {
    font-size: 1rem;
    margin-top: 1rem;
}

.custom-btn-white:hover,
.intro-blue #contact_form button[type="submit"]:hover {
    background-color: white;
    color: #012F4E;
    text-decoration: none;
}

.custom-btn-blue {
    background-color: transparent;
    color: #012F4E;
    border: 1px solid #012F4E;
    font-weight: 300;
    border-radius: 50px;
    padding: .2rem 1.5rem;
    font-size: 1.1rem;
}

.custom-btn-blue:hover {
    background-color: #012F4E;
    color: white;
    text-decoration: none;
}

/* Hero */
.hero-new-xl.home::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #012F4E50;
    -webkit-mask-image: radial-gradient(circle 1000px at 1500px 636px, transparent 500px, black 100px);
    -webkit-mask-mode: alpha;
    mask-image: rradial-gradient(circle 1000px at 1500px 636px, transparent 500px, black 100px);
    mask-mode: alpha;
    z-index: 1;
}

.hero-new-xl.home .hero-content {
    align-items: start;
}

.hero-new-xl::after,
.hero-new-md::after {
    background: #012F4E50;
}

.hero-new-xl .hero-content {
    color: white;
}

@media screen and (min-width: 768px) {
    .hero-new-xl.home .hero-content h1 {
        font-size: 3.5rem;
        margin: 0;
        line-height: .7;
    }

    .hero-new-xl.home .hero-content p {
        font-size: 1.5rem;
        color: white;
        font-weight: 200;
        margin-bottom: .7rem;
    }

    .hero-new-xl .hero-content h1 {
        font-size: 4rem;
        margin: 0;
        line-height: 1;
        margin-bottom: 1rem;
    }

    .hero-new-xl .hero-content h1 span.large {
        font-family: "Lamoric Rowen", serif !important;
        font-size: 5rem;
    }

    .hero-new-md .hero-content h1 {
        font-size: 4rem;
        margin: 0;
    }
}

@media screen and (max-width: 767px) {
    .hero-new-xl.home .hero-content {
        align-items: center;
        color: white;
    }

    .hero-new-xl.home .hero-content h1 {
        font-size: 65px;
        text-align: center;
    }

    .hero-new-xl.home .hero-content p {
        font-size: 1.1rem;
        font-weight: 300;
        text-align: center;
    }

    .hero-new-xl.home img,
    .hero-new-xl.right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
    }

    .hero-new-xl .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-new-xl .hero-content h1 span.large {
        font-family: "Lamoric Rowen", serif !important;
        font-size: 3rem;
    }

    .hero-new-md .hero-content h1 {
        font-size: 2.5rem;
        text-align: center;
    }
}

/* Intro velero */
.intro-velero .text-container {
    background-color: #E6D8CF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding: 0 6rem;
}

.intro-velero.blue .text-container {
    background-color: #012F4E;
    color: #E6D8CF;
}

.intro-velero .text-container h2 {
    font-size: 2.5rem;
}

.intro-velero.blue .text-container h2 {
    font-size: 3rem;
}

.intro-velero .text-container p {
    font-size: 1.1rem;
    width: 39ch;
    line-height: 1;
    font-weight: 300;
    padding-bottom: 1rem;
}

.intro-velero.blue .text-container p {
    font-size: 1.1rem;
    width: 33ch;
    line-height: 1.5;
    padding-bottom: 0;
}

.intro-velero .col {
    border: 10px solid white;
}

.intro-velero .col:last-child {
    border-left: none;
}

.intro-velero .spec {
    display: flex;
    flex-direction: row;
    min-width: 250px;
    align-items: center;
}

.intro-velero .spec p {
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 400;
    width: fit-content;
}

.intro-velero .spec img {
    max-height: 44px;
    max-width: 40px;
}

.intro-velero:has(.spec) .text-container {
    align-items: center;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .intro-velero .text-container {
        padding: 0 2rem;
    }

    .intro-velero .text-container h2 {
        font-size: 1.5rem;
    }

    .intro-velero .text-container p {
        width: auto;
        font-size: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .intro-velero {
        flex-direction: column;
    }

    .intro-velero .col {
        border: none;
        width: 100%;
    }

    .intro-velero .col:first-child {
        border-top: none;
    }

    .intro-velero .text-container {
        padding: 2rem;
        align-items: center;
        text-align: center;
    }

    .intro-velero .text-container h2 {
        font-size: 2rem;
        text-align: center !important;
    }

    .intro-velero .text-container p {
        width: auto;
        font-size: 1.2rem;
        text-align: center !important;
    }
}

/* Other services */
.other-services {
    background-color: #012F4E;
    border: 10px solid white;
    border-top: none;
}

.other-services .services {
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.other-services .services h2 {
    font-size: 3rem;
    color: #E6D8CF;
    padding-bottom: 2rem;
}

.other-services .services .item-service {
    padding: 0;
    margin: 0;
    position: relative;
}

.other-services .services .item-service p {
    font-size: 1.7rem;
    position: absolute;
    left: -22px;
    bottom: -6px;
    color: white;
    font-weight: 600;
    writing-mode: sideways-lr;
}

.other-services .services .item-service:hover p {
    font-size: 1.9rem;
    transition: font-size 0.3s ease;
}

.other-services .services .item-service img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    filter: opacity(0.7);
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .other-services .services h2 {
        font-size: 2rem;
    }

    .other-services .services .row {
        gap: 2rem;
    }

    .other-services .services .item-service p {
        font-size: 2rem;
        bottom: 12px;
    }

    .other-services .services .item-service:hover p {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 768px) {
    .other-services {
        border: none;
    }

    .other-services .services {
        align-items: center;
        max-width: 100%;
    }

    .other-services .services h2 {
        font-size: 2rem;
        text-align: center;
    }

    .other-services .services .row {
        gap: 2rem;
    }
}

/* Carousel */
@media screen and (max-width: 768px) {
    .carousel-default {
        margin-top: 0;
    }
}

/* Pricing */
.pricing-container .price-block {
    background-color: #012F4E;
    color: white;
    border: 10px solid white;
    border-top: none;
    padding: 4rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.pricing-container .price-block h3 {
    font-size: 2.2rem;
    margin: 0;
}

.pricing-container .price-block h4 {
    font-size: 1.8rem;
    margin: 0;
}

.pricing-container .price-block:nth-child(even) {
    border-left: none;
}

.pricing-container .price-block:nth-child(2) {
    background-color: #003D66;
}

.pricing-container .price-block:nth-child(3) {
    background-color: #01385D;
}

.pricing-container .price-block:nth-child(4) {
    background-color: #004776;
}

@media screen and (max-width: 968px) {
    .pricing-container .price-block {
        border-right: 10px solid white !important;
        border-top: 10px solid white !important;
        border-left: 10px solid white !important;
        border-bottom: none;
    }

    .pricing-container .price-block:last-child {
        border-bottom: 10px solid white;
    }
}

@media screen and (max-width: 468px) {
    .pricing-container .price-block {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
        gap: 2rem;
    }

    .pricing-container .price-block h3,
    .pricing-container .price-block h4 {
        font-size: 1.5rem;
    }

    .pricing-container .price-block * {
        text-align: center !important;
    }
}

.zones-container {
    position: relative;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

.zones-container .zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.zones-container .zone a {
    display: block;
    width: 100%;
    height: 100%;
}

.zones-container .zone img {
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.3s ease;
    position: absolute;
}

.zones-container .zone:hover img {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.zones-container .zone.top {
    clip-path: polygon(50% 50%, 0 0, 100% 0);
    -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0);
    overflow: hidden;
    will-change: clip-path;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* fuerza composición en algunos Safari */
}

.zones-container .zone.top img {
    height: 50%;
    top: 0;
    width: 100%;
}

.zones-container .zone.top .container {
    position: absolute;
    z-index: 3;
    top: 16%;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    color: white;
    width: fit-content !important;
    pointer-events: none;
}

.zones-container .zone.top .container p {
    font-size: 3rem;
    text-shadow: 0 0 10px #272727;
    pointer-events: none;
}

.zones-container .zone.bottom {
    clip-path: polygon(50% 50%, 0 100%, 100% 100%);
    -webkit-clip-path: polygon(50% 50%, 0 100%, 100% 100%);
    overflow: hidden;
    will-change: clip-path;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* fuerza composición en algunos Safari */
}

.zones-container .zone.bottom img {
    height: 50%;
    bottom: 0;
    width: 100%;
}

.zones-container .zone.bottom .container {
    position: absolute;
    z-index: 3;
    bottom: 14%;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    color: white;
    width: fit-content !important;
    pointer-events: none;
}

.zones-container .zone.bottom .container p {
    font-size: 3rem;
    text-shadow: 0 0 10px #272727;
    pointer-events: none;
}

.zones-container .zone.left {
    clip-path: polygon(50% 50%, 0 0, 0 100%);
    -webkit-clip-path: polygon(50% 50%, 0 0, 0 100%);
    overflow: hidden;
    will-change: clip-path;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* fuerza composición en algunos Safari */
}

.zones-container .zone.left img {
    width: 50%;
    left: 0;
    height: 100%;
}

.zones-container .zone.left .container {
    position: absolute;
    z-index: 3;
    left: 13%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    color: white;
    width: fit-content !important;
    pointer-events: none;
}

.zones-container .zone.left .container p {
    font-size: 3rem;
    text-shadow: 0 0 10px #272727;
    margin: 0;
    pointer-events: none;
}

.zones-container .zone.right {
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    -webkit-clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    overflow: hidden;
    will-change: clip-path;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* fuerza composición en algunos Safari */
}

.zones-container .zone.right img {
    width: 50%;
    right: 0;
    height: 100%;
}

.zones-container .zone.right .container {
    position: absolute;
    z-index: 3;
    right: 11%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    color: white;
    width: fit-content !important;
    pointer-events: none;
}

.zones-container .zone.right .container p {
    font-size: 3rem;
    text-shadow: 0 0 10px #272727;
    margin: 0;
    pointer-events: none;
}

.zones-container .rosa-vientos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.private-charter-text-sea {
    display: flex;
    flex-direction: column;
    border-radius: .25rem;
    font-size: .9rem;
    background-color: #1a4470;
    padding: 28px 20px 10px 25px;
    border: 1px solid #1f324c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

@media screen and (max-width: 968px) {
    .zones-container .zone .container p {
        font-size: 2rem !important;
    }

    .zones-container .rosa-vientos {
        width: 250px;
    }

    .zones-container .zone.left .container {
        left: 0;
    }

    .zones-container .zone.right .container {
        right: 0;
    }

    .zones-container .zone.left .container p,
    .zones-container .zone.right .container p {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }
}

@media screen and (max-width: 468px) {
    .zones-container .zone.right .container {
        right: 2.5rem !important;
    }
}

/* About */
.intro-blue {
    background-color: #012F4E;
    color: #E6D8CF;
    padding: 2rem 0;
}

.intro-blue p {
    margin: 0 auto;
    font-weight: 300;
    font-size: 1rem;
    max-width: 75%;
}

.intro-blue h2 {
    margin: 0 auto;
    font-family: "Lamoric Rowen", serif !important;
    font-size: 2rem;
    max-width: 75%;
}

.about-person .row {
    height: 600px;
    margin: 0;
    padding: 0;
}

.about-person .col {
    height: 100%;
    display: flex;
}

.about-person.cream {
    background-color: #E6D8CF;
    color: #012F4E;
}

.about-person.blue {
    background-color: #012F4E;
    color: white;
}

.about-person .text-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 0 8rem;
}

.about-person .text-content h3 {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: bold;
}

.about-person .text-content ul {
    list-style: none;
    padding-left: 0;
}

.about-person .text-content ul li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 300;
}

.about-person .text-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.about-person.cream .text-content ul li::before {
    background-image: url("/media/filer_public/f4/95/f495c92f-2541-4e87-a188-64c45357ff0b/decoration-tear-blue.svg");
}

.about-person.blue .text-content ul li::before {
    background-image: url("/media/filer_public/32/a9/32a95c7d-1433-49e7-907a-8c4c9ce456e1/decoration-tear.svg");
}

@media screen and (max-width: 768px) {
    .about-person .row {
        height: auto;
        flex-direction: column;
    }

    .about-person .col {
        width: 100%;
        height: auto;
    }

    .about-person .text-content {
        padding: 2rem;
        align-items: center;
        text-align: center;
    }

    .about-person .text-content h3 {
        font-size: 1.3rem;
        text-align: center;
    }

    .about-person .text-content ul {
        width: 100%;
    }

    .about-person .text-content ul li {
        font-size: 0.95rem;
        padding-left: 2rem;
        text-align: center;
        position: relative;
    }

    .about-person .text-content ul li::before {
        position: absolute;
        left: 0;
        top: 5px;
        transform: none;
        width: 20px;
        height: 20px;
    }
}

/* Contact */
.intro-blue #contact_form .form-control:focus,
.intro-blue #contact_form .form-control {
    background-color: transparent;
}

.intro-blue #contact_form .form-control {
    border: 2px solid white;
    padding: 10px 15px;
    color: white;
    font-weight: 200;
}

.intro-blue #contact_form .form-group {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    flex: 0 0 100%;
    font-family: "Source Sans 3", sans-serif;
    color: white;
}

.intro-blue #contact_form .form-group label,
.intro-blue #contact_form a {
    color: white;
}

.intro-blue #contact_form .form-group label {
    position: static !important;
    order: -1 !important;
    color: white;
    text-transform: uppercase;
    margin: 0;
    font-weight: 300;
    font-size: .8rem;
    order: -1;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: .8rem !important;
}

.intro-blue #contact_form .iti__selected-flag {
    padding: 10px;
}

/* Boat cards */
#boat_card_tbg {
    background-color: #012F4E;
    color: white;
}

#boat_card_tbg * {
    color: white !important;
}

#boat_card_tbg .card-body .card-bottom {
    background-color: #002741;
}

#boat_card_tbg {
    border-radius: 20px 0 20px 0;
}

#boat_card_tbg .card-header-carousel .list_img {
    border-radius: 20px 0 0 0;
}

#boat_card_tbg .btn-details-calendar {
    border-radius: 0 0 20px 0;
    background-color: #014573;
}

#boat_card_tbg:hover:not(.not-available) .btn-details-calendar {
    background-color: #0060a0;
}

/* Footer */
@media screen and (min-width: 768px) {
    footer .logo-footer img {
        min-width: 125px;
    }
}

.popover .extra-image img {
    max-width: 250px !important;
    height: auto !important;
    margin-bottom: 1rem;
}

/* Events */
.introduction-events {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7rem;
    gap: 1rem;
}

.container.introduction-events h2 {
    font-size: 2rem;
}

.container.introduction-events *:not(.custom-btn-white) {
    color: white;
}

.private-charter {
    padding: 4rem 2rem;
}

.private-charter * {
    color: white;
}

.private-charter h2 {
    font-size: 2rem;
}

.private-charter-column {
    position: relative;
}

.private-charter-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.private-charter-column:hover img {
    transform: scale(1.05);
}

.private-charter-text {
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    width: 85%;
}
.private-charter-img {
  height: 400px !important; 
  width: 100% !important; 
  object-fit: cover !important; 
  border-radius: 10px !important; 
  filter: brightness(.75) !important;
}

@media screen and (max-width: 768px) {
    .introduction-events {
        padding: 4rem 2rem;
    }

    .container.introduction-events h2 {
        font-size: 1.5rem;
    }
}