/* 2025-02-05 */
/* index */
.index-banner {
    z-index: inherit !important;
}
.index-banner .swiper-slide {
    position: relative;
}
.index-banner .swiper-slide .banner-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.index-banner .swiper-slide .banner-text h2 {
    text-align: left;
    font-size: 2.3rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
    color: #555;
    text-shadow: -1px -1px 3px #fff, -1px 1px 3px #fff, 1px -1px 3px #fff, 1px 1px 3px #fff;
}
.index-banner .swiper-slide .banner-text .banner-btn {
    margin-top: 20px;
    border-radius: 6px;
    padding: 6px 50px;
    border: 2px #fff solid;
    color: #FFFFFF;
    display: inline-block;
    transition: all 500ms ease-in-out;
}
.index-banner .swiper-slide .banner-text .banner-btn:hover {
    background-color: rgba(255,255,255,.5);
    color: #555;
    transform: translateY(-5px);
}
.index-banner .swiper-button-prev, .index-banner .swiper-button-next {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background-color: rgba(0,0,0,.5);
    border-radius: 50%;
    transition: all 500ms ease-in-out;
}
.index-banner .swiper-button-prev:hover, .index-banner .swiper-button-next:hover {
    background-color: rgba(0,0,0,.7);
}
.index-banner .swiper-button-prev:after, .index-banner .swiper-button-next:after {
    font-size: 16px;
}
.index-banner .swiper-pagination {
    bottom: 90px !important;
}
@media (max-width: 768px) {
    .index-banner .swiper-pagination {
        bottom: 140px !important;
    }
}
@media (max-width: 600px) {
    .index-banner .swiper-pagination {
        bottom: 0 !important;
    }
}
.index-banner .swiper-pagination-bullet-active {
    /*background: #62B5E5 !important;*/
    background: #FFFFFF !important;
}
.index-banner .swiper-pagination-bullet {
    width: 40px;
    height: 6px;
    border-radius: 10px;
}

.index-bg {
    position: relative;
    z-index: 1;
}
.index-bg:before{
    position: absolute;
    left: 0;
    top: -250px;
    width: 100%;
    height: 800px;
    background-image: url("../images/ocean-bg.svg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    /*z-index: -1;*/
}
@media (max-width: 600px) {
    .index-bg:before {
        top: -100px;
    }
}
.ind-above .webeditor p, .ind-middle .webeditor p, .ind-below .webeditor p {
    margin-bottom: 10px;
}
.ind-above .heading {
    font-size: 1.76rem;
}
.ind-above .about-img {
    margin-left: 20%;
    position: relative;
}
.ind-above .about-img img.b-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.ind-above .about-img img.s-img {
    max-width: 300px;
    height: auto;
    position: absolute;
    bottom: 0;
    left: -45%;
}
@media (max-width: 768px) {
    .ind-above .about-img img.s-img {
        left: -30%;
    }
}
.ind-above .btn {
    transition: all 500ms ease-in-out;
}
.ind-above .btn:hover {
    transform: translateX(3px);
}

@media (max-width: 991px) {
    .ind-above .btn {
        display: block;
        max-width: 200px;
        margin: auto;
    }
}
@media (max-width: 768px) {
    .ind-above, .ind-middle, .ind-below {
        padding: 3.75rem 0 !important;
    }
}
.ind-middle {
    background-image: url("../images/ind-middle-bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

.accordion-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}
@media (max-width: 768px) {
    .accordion-wrapper {
        flex-direction: column;
    }
}

.accordion-details {
    display: flex;
    flex-direction: column;

    background: transparent;
    color: white;

    height: 30rem;
    border-radius: 10px;
    overflow: hidden;

    /* To make the image work …*/
    position: relative;
    z-index: 1;

    --open-size: max(30vw, 70vw);

    /* Hide marker */
    ::marker {
        content: '';
    }

    /* The image is tucked in the summary, because otherwise it would be hidden when not [open] as it ends up in the ::details-content pseudo */
    summary .summary-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        transition: filter 0.5s ease;
    }
    /* Animate the image */
    &[open] summary .summary-img {
        filter: brightness(0.4);
    }

    summary {
        padding: 1rem 1em;
        width: 15vw;
        flex-shrink: 0; /* Prevent shrinking */
        text-align: center;
        cursor: pointer;
        span {
            display: grid;
            place-content: center;
            width: 5rem;
            margin-left: 1rem;
            aspect-ratio: 1;
            border-radius: 50%;
            background: rgb(0 0 0 / 0.25);
            img {
                width: 40px;
                height: auto;
            }
        }
        &::-webkit-details-marker,&::marker {
            display: none;
            color: transparent;
        }
        &:focus {
            outline: none;
        }
    }

    .details-content-wrapper {
        padding: 1.5rem;
        /*width: var(--open-size);*/
        width: 45%;
        box-sizing: border-box;
        h3 {
            padding-bottom: 15px;
            margin-bottom: 15px;
            color: #FFFFFF;
            font-size: 1.5rem;
            letter-spacing: .1rem;
            border-bottom: 1px #ffffff solid;
        }
        .btn {
            margin-top: 20px;
            border: 1px #ffffff solid;
            color: #FFFFFF;
            transition: all 500ms ease-in-out;
            &:hover {
                background-color: rgba(255,255,255,.3);
                transform: translateX(5px);
            }
        }
    }

    &:hover, &:has(summary:focus) {
        /*outline: 3px solid cadetblue;*/
        outline-offset: 3px;
    }
}
@media (max-width: 1440px) {
    .accordion-details {
        .details-content-wrapper {
            width: 58%;
        }
    }
}
@media (max-width: 991px) {
    .accordion-details {
        .details-content-wrapper {
            width: 52%;
        }
    }
}
@media (max-width: 768px) {
    .accordion-details {
        height: auto;
        --open-size: max(30vw, 100%);
        .details-content-wrapper {
            width: var(--open-size);
            margin-bottom: 1.5rem;
        }
    }
}


@media (max-width: 480px) {
   .index-banner .swiper-slide .banner-text h2{
    font-size: 2rem;
   }

}



.details-content-wrapper {
    /* We need margin-trim … */
    :first-child { margin-top: 0; }
    :last-child {	margin-bottom: 0;	}

    /* Animate-in the text when open */
    p {
        transform: translateY(2rem);
        opacity: 0;
        transition: all 0.5s ease;
        transition-delay: 0.5s;
    }

    [open] & p {
        transform: none;
        opacity: 1;
        transition-delay: 0.5s;
    }
}

/* Animation */
::details-content {
    transition: width 0.5s ease-in-out, content-visibility 0.2s ease-in allow-discrete;
    width: 0;
}

[open]::details-content {
    width: var(--open-size);
}