* {
    box-sizing: border-box;
}

/*.sidebar {*/
/* position: absolute; */
/* width: 33.3333%; */
/*height: 100%;*/
/* 
    top: 0;
    left: 0;
    */
/*overflow: hidden;
    padding-right: 0;
    padding-left: 0;*/
/* border-right: 1px solid rgb(0 0 0 / 25%); */
/*}*/

.map {
    padding-right: 0;
    padding-left: 0;
    /* 
    position: absolute;
    left: 33.3333%;
    width: 66.6666%;
    top: 0;
    bottom: 0; 
    */
}

.marker {
    border: none;
    cursor: pointer;
    height: 56px;
    width: 56px;
    background-image: url('/images/marker.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.mapboxgl-popup-close-button {
    color: #fff;
    font-size: 2rem;
    margin-top: 16px;
    margin-right: 10px;
    outline: none;
}

.mapboxgl-popup-content {
    padding: 0;
    width: 320px;
    margin-top: 0px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgb(255 255 255 / 20%);
}

    .mapboxgl-popup-content .img-container {
        overflow: hidden;
    }

        .mapboxgl-popup-content .img-container img {
            transition: transform 0.5s ease;
        }

            .mapboxgl-popup-content .img-container img:hover {
                transform: scale(1.1);
            }

.mapboxgl-popup {
    max-width: 320px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
    margin-top: 0px;
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
    border-bottom-color: var(--sm-primary);
}


#map {
    /*border: 2px solid #e9e9e9;*/
    /*border-radius: 16px;*/
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
}

.section.marina-list-section {
    position: relative;
    margin-top: -160px;
    z-index: 1;
}

    .section.marina-list-section .marina-list-wrapper {
        background: #fff;
        padding: 30px 40px 40px;
        border-radius: 16px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
    }


.marina-hero {
    position: relative;
    overflow: hidden;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 60px 0;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.26);
}

    .marina-hero .hero-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

        .marina-hero .hero-background video, .marina-hero .hero-background img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

    .marina-hero:hover .hero-background img {
        transform: scale(1.1);
    }

    .marina-hero .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, color-mix(in srgb, var(--sm-dark), transparent 60%) 0%, color-mix(in srgb, var(--sm-dark), transparent 80%) 50%, color-mix(in srgb, var(--sm-dark), transparent 90%) 100%);
        z-index: 1;
    }

    .marina-hero .hero-text .weather-status {
        font-size: 2rem;
        line-height: 1;
        padding: 0;
        margin: 0;
        color: var(--sm-white);
        font-family: Raleway;
        letter-spacing: 2px;
    }

    .marina-hero .hero-text .temprature {
        font-size: 5rem;
        margin: 0;
        color: var(--sm-white);
        padding: 0;
        line-height: 1;
        font-family: Raleway;
        font-weight: 600;
    }

        .marina-hero .hero-text .temprature.temprature-min {
            color: color-mix(in srgb, var(--sm-white), transparent 50%);
        }

    .marina-hero .hero-text .marina-meta {
        display: flex;
        margin-top: 100px;
    }

        .marina-hero .hero-text .marina-meta .icon {
            display: flex;
            font-size: 3rem;
            color: var(--sm-white);
            padding: 12px 5px;
        }

        .marina-hero .hero-text .marina-meta .text {
            display: flex;
            font-size: 1.2rem;
            color: var(--sm-white);
            padding: 5px;
            line-height: 1.6;
        }

    .marina-hero .hero-text .hero-title {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        line-height: 1.2;
        color: var(--sm-white);
    }

    .marina-hero .hero-text .hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        opacity: 0.9;
        line-height: 1.6;
        color: var(--sm-white);
    }

    .marina-hero .hero-text .hero-buttons .btn {
        padding: 12px 30px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-radius: 50px;
        transition: all 0.3s ease;
    }

        .marina-hero .hero-text .hero-buttons .btn.btn-primary {
            background-color: var(--sm-wprimary);
            border-color: var(--sm-wprimary);
            color: var(--sm-white);
        }

            .marina-hero .hero-text .hero-buttons .btn.btn-primary:hover {
                background-color: color-mix(in srgb, var(--sm-wprimary), transparent 20%);
                border-color: color-mix(in srgb, var(--sm-wprimary), transparent 20%);
                transform: translateY(-2px);
            }

        .marina-hero .hero-text .hero-buttons .btn.btn-outline {
            background-color: transparent;
            border: 2px solid var(--sm-white);
            color: var(--sm-white);
        }

            .marina-hero .hero-text .hero-buttons .btn.btn-outline:hover {
                background-color: var(--sm-wprimary);
                color: var(--sm-white);
                transform: translateY(-2px);
                border-color: var(--sm-wprimary);
            }

    .marina-hero .booking-form-wrapper .booking-form {
        background-color: var(--sm-white);
        background-color: color-mix(in srgb, var(--sm-dark), transparent 50%);
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 10px 30px color-mix(in srgb, var(--sm-default), transparent 75%);
        backdrop-filter: blur(5px);
        transition: all 0.3s ease;
    }

        .marina-hero .booking-form-wrapper .booking-form .form-row .form-group {
            border-bottom: 2px solid color-mix(in srgb, var(--sm-white), transparent 80%);
        }

        .marina-hero .booking-form-wrapper .booking-form .form-row:last-child .form-group {
            border-bottom: 0;
        }

        .marina-hero .booking-form-wrapper .booking-form .form-title {
            color: var(--sm-white);
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .marina-hero .booking-form-wrapper .booking-form label {
            color: var(--sm-white);
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 1rem;
            font-family: Raleway;
        }

        .marina-hero .booking-form-wrapper .booking-form .form-value {
            border: 0;
            padding: 12px 0px;
            font-size: 0.9rem;
            color: color-mix(in srgb, var(--sm-white), transparent 15%);
            background-color: transparent;
            display: block;
            width: 100%;
            font-weight: 400;
            line-height: 1.5;
        }

        .marina-hero .booking-form-wrapper .booking-form .form-control, .marina-hero .booking-form-wrapper .booking-form .form-select {
            border: 2px solid color-mix(in srgb, var(--sm-white), transparent 80%);
            border-radius: 8px;
            padding: 12px 15px;
            font-size: 14px;
            color: var(--sm-white);
            background-color: transparent;
            transition: all 0.3s ease;
        }

            .marina-hero .booking-form-wrapper .booking-form .form-control:focus,
            .marina-hero .booking-form-wrapper .booking-form .form-select:focus {
                border-color: var(--sm-wprimary);
                box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--sm-wprimary), transparent 75%);
                outline: none;
            }

            .marina-hero .booking-form-wrapper .booking-form .form-control::placeholder,
            .marina-hero .booking-form-wrapper .booking-form .form-select::placeholder {
                color: color-mix(in srgb, var(--sm-default), transparent 50%);
            }

        .marina-hero .booking-form-wrapper .booking-form .btn-primary {
            background-color: var(--sm-wprimary);
            border-color: var(--sm-wprimary);
            color: var(--sm-white);
            padding: 12px 20px;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

            .marina-hero .booking-form-wrapper .booking-form .btn-primary:hover {
                background-color: color-mix(in srgb, var(--sm-wprimary), transparent 20%);
                border-color: color-mix(in srgb, var(--sm-wprimary), transparent 20%);
                transform: translateY(-1px);
            }

        .marina-hero .booking-form-wrapper .booking-form.booking-form-horizontal {
            padding: 1.5rem 2rem;
        }

@media (max-width: 992px) {
    .marina-hero .hero-text {
        text-align: center;
        margin-bottom: 3rem;
    }

        .marina-hero .hero-text .hero-title {
            font-size: 2.5rem;
        }

        .marina-hero .hero-text .hero-subtitle {
            font-size: 1.1rem;
        }

    .marina-hero .booking-form {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .marina-hero .hero-text .hero-title {
        font-size: 2rem;
    }

    .marina-hero .hero-text .hero-subtitle {
        font-size: 1rem;
    }

    .marina-hero .hero-text .hero-buttons .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }

        .marina-hero .hero-text .hero-buttons .btn:last-child {
            margin-bottom: 0;
        }

    .marina-hero .booking-form-wrapper .booking-form {
        padding: 1.5rem;
    }
}

@media (min-width: 768px) {
    .marina-hero .booking-form-wrapper .booking-form.booking-form-horizontal .form-row .form-col .form-group {
        border-right: 2px solid color-mix(in srgb, var(--sm-white), transparent 80%);
    }

    .marina-hero .booking-form-wrapper .booking-form.booking-form-horizontal .form-row .form-col:last-child .form-group {
        border-right: 0;
    }
}


.section.marina-capacity-section {
}

    .section.marina-capacity-section .metadata-wrapper {
    }

    .section.marina-capacity-section .metadata-wrapper {
        background-color: var(--sm-primary);
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 10px 30px color-mix(in srgb, var(--sm-default), transparent 75%);
        backdrop-filter: blur(5px);
        transition: all 0.3s ease;
    }

@media (min-width: 768px) {
    .section.marina-capacity-section .metadata-wrapper .meta-column .meta-info {
        border-right: 2px solid color-mix(in srgb, var(--sm-white), transparent 80%);
    }

    .section.marina-capacity-section .metadata-wrapper .meta-column:last-child .meta-info {
        border-right: 0;
    }
}

.section.marina-capacity-section .metadata-wrapper .title {
    color: var(--sm-white);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-family: Raleway;
}

.section.marina-capacity-section .metadata-wrapper .text {
    border: 0;
    padding: 12px 0px;
    font-size: 1rem;
    color: color-mix(in srgb, var(--sm-white), transparent 15%);
    background-color: transparent;
    display: block;
    width: 100%;
    font-weight: 400;
    line-height: 1.5;
}