@import url('css/style-extended/typography.css');
@import url('css/style-extended/layout.css');
@import url('css/style-extended/header.css');
@import url('css/style-extended/navs.css');
@import url('css/style-extended/footer.css');
@import url('css/style-extended/images.css');
@import url('css/style-extended/buttons.css');
@import url('css/style-extended/section-banner.css');
@import url('css/style-extended/section-google-review.css');



@media (min-width: 1025px) {
    .fl-module {
        opacity: 0;
        transform: translateY(20px);
        transition: all .4s ease-in-out;
        
        &.show {
            opacity: 1;
            transform: none;
        }
    }
    header .fl-module {
        transform: none;
    }
}

.uabb-adv-accordion ul {
    margin: 0 0 1rem 40px;

    li {
        list-style: disc;
    }
}

/* home */
.home {
    /* @media (max-width: 991px) {
        .with-slide-nav .uabb-image-carousel {
            height: 40vh;

            .slick-list {
                height: 100%!important;
            }
        }
    } */

    .image-slider .slick-list {
        height: 80vh!important;
        
        @media (max-width: 991px) {
            height: 50vh!important;
        }
        
        @media (max-width: 991px) {
            height: 33.33vh!important;
        }

        .slick-track,
        .uabb-image-carousel-content {
            height: 100%;

            img {
                height: 100%!important;
                object-fit: cover;
            }
        }
    }

    .slanted-col {
        .fl-module-box .fl-module-box {
            padding: 40px;
        }
    }

    .wpsr-row {
        row-gap: 20px;
        margin-inline: -10px;

        > div {
            padding-inline: 10px;
        }
    }
    .wpsr-ig-post {
        margin: 0;
    }
    .wpsr-swiper-carousel-wrapper {
        margin-top: 1rem;
    }
}

/* about us */
.page-id-58 {
    .slanted-col {
        .fl-photo {
            margin-bottom: 20px;
            
            &:before, &:after {
                display: none;
            }
        }

        .fl-photo-content {
            clip-path: polygon(0 24px, 100% 0, 100% calc(100% - 24px), 0% 100%);
            display: block;
            padding-top: 100%;

            img {
                position: absolute;
                inset: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: top;
            }
        }
    }
}

/* partners */
.page-id-143 {
    .section-logos {
        .fl-module-box {
            /* grid-template-columns: repeat(3, minmax(0, 20%)); */
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 64px;

            @media (max-width: 991px) {
                gap: 40px;
            }

            @media (max-width: 767px) {
                gap: 20px;
            }

            img {
                height: 100px;
                width: auto;
                object-fit: contain;
            }
        }
    }
}

/* careers */
.page-id-145,
.single-career {
    .fl-page-content .fl-row:first-child {
        .fl-row-content-wrap {
            @media (max-width: 991px) {
                padding-top: 150px!important;
            }

            @media (max-width: 767px) {
                padding-top: 130px!important;
            }
        }
    }

    .career-categories {
        display: flex;
        gap: 10px;
        margin-block: 10px;

        span {
            background: #E8E8E8;
            border-radius: 20px;
            display: block;
            font-size: 14px;
            padding: 6px 14px;
        }

        .career-open {
            background: #89D21E;
            color: #fff;
        }
        .career-closed {
            background: #2B2A35;
            color: #fff;
        }
    }
}

/* mv class x */
.page-id-190 {
    .mv-row {
        /* display: flex;
        flex-wrap: wrap;
        gap: 20px; */

        .mv-col {
            clip-path: polygon(0 24px, 100% 0, 100% calc(100% - 24px), 0% 100%);
            position: relative;
            /* width: calc(25% - 15px); */

            &:not(.mv-col-coming-soon) {
                cursor: pointer;
            }

            @media (max-width: 991px) {
                width: calc(50% - 10px);
            }

            @media (max-width: 767px) {
                width: 100%;
            }

            &:hover {
                .mv-img:before {
                    opacity: 0;
                }
                .mv-img:after {
                    opacity: 1;
                }

                .mv-title {
                    line-height: 1;
                }

                .mv-description {
                    line-height: 1.5;
                    margin: 0;
                    opacity: 1;
                }
            }
        }

        .mv-img {
            position: relative;
            padding-top: 130%;

            img {
                position: absolute;
                inset: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

            &:before, &:after {
                content: '';
                display: block;
                position: absolute;
                inset: 0;
                z-index: 1;
                transition: 1s;
            }

            &:before {
                background: linear-gradient(transparent, #021B2A);
            }
            &:after {
                background: linear-gradient(transparent, #374EAC);
                opacity: 0;
            }
        }

        .mv-txt {
            padding: 24px 24px 40px;
            position: absolute;
            bottom: 0;
            z-index: 1;
        }

        .mv-title {
            color: #fff;
            line-height: 1.3;
            text-transform: uppercase;
            transition: .4s;
        }

        .mv-description {
            color: #fff;
            font-size: 14px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: calc(1.5 * 2 * 1em);
            line-height: 3;
            margin-bottom: -60px;
            opacity: 0;
            transition: .4s;
        }
    }

    &.overflow-hidden {
        overflow: hidden;
        position: relative;

        &:after {
            content: '';
            background: rgba(0,0,0,.75);
            position: absolute;
            inset: 0;
            height: 100%;
            width: 100%;
            z-index: 100;
            transition: .4s;
        }
    }

    &.modal-active {
        .mv-modal {
            transition: none;

            .mv-card {
                transition: none;
            }
        }
    }

    .mv-modal {
        height: 100vh;
        pointer-events: none;
        position: fixed;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: .4s;

        .mv-modal-close {
            color: #fff;
            cursor: pointer;
            font-size: 20px;
            position: absolute;
            right: -30px;
            top: -30px;
            z-index: 1;
        }

        .mv-card {
            background: #fff;
            border-radius: 4px;
            max-width: 1124px;
            width: 90%;
            position: relative;
            opacity: 1;
            visibility: visible;
            transform: translateY(40px);
            transition: .4s;

            @media (max-width: 767px) {
                width: 88%;
            }

            @media (max-height: 768px) {
                height: 90%;
            }

            > div:not(.mv-modal-close) {
                height: 100%;
                padding: 40px;

                @media (max-width: 767px) {
                    padding: 20px;
                }

                @media (max-height: 768px) {
                    margin-right: 5px;
                    overflow: hidden scroll;

                    &::-webkit-scrollbar {
                        width: 4px;
                    }
                    
                    &::-webkit-scrollbar-track {
                        background: rgb(81 119 254 / 35%);
                        border-radius: 4px;
                        margin: 20px;
                    }
                    
                    &::-webkit-scrollbar-thumb {
                        background: #5177fe;
                        border-radius: 4px;
                    }
                }
            }
        }

        .mv-container {
            display: grid;
            row-gap: 20px;

            @media (min-width: 768px) {
                display: flex;
                gap: 40px;
            }

            > div {
                width: 77vw;

                @media (min-width: 768px) {
                    width: 50%;
                }
            }
        }

        .mv-modal-title {
            color: #0d1846;
            font-size: clamp(2rem, 2rem + 2.5vw, 3.875rem);

            @media (max-width: 991px) {
                font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.625rem);
            }
        }

        .mv-modal-description {
            font-size: 16px;

            @media (max-width: 991px) {
                font-size: 14px;
            }

            ul {
                margin-bottom: 1rem;
                line-height: 2;

                @media (max-width: 767px) {
                    display: grid;
                    row-gap: 10px;
                    grid-template-columns: 1fr 2fr;
                    line-height: 1.5;
                }
                
                li {
                    display: flex;
                    gap: 10px;
                }
            }

            img {
                height: 24px;
                width: 24px;
                object-fit: contain;
            }
        }

        .mv-slider-for {
            .slick-track {
                gap: 0;

                div {
                    position: relative;
                    padding-top: 40vh;

                    @media (max-width: 767px) {
                        padding-top: 20vh;
                    }

                    img {
                        position: absolute;
                        inset: 0;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }

        .mv-slider-nav {
            margin-top: 20px;

            .slick-list {
                margin-inline: -10px -5px;
            }

            .slick-track {
                gap: 10px;

                div {
                    position: relative;
                    padding-top: 100px;

                    @media (max-width: 991px) {
                        padding-top: 90px;
                    }

                    @media (max-width: 767px) {
                        padding-top: 80px;
                    }

                    img {
                        position: absolute;
                        inset: 0;
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }
            }

            .slick-slide {
                cursor: pointer;

                &:before, &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0;
                    z-index: 1;
                    transition: 1s;
                }

                &:before {
                    background: linear-gradient(transparent, #021B2A);
                }
                &:after {
                    background: linear-gradient(transparent, #374EAC);
                    opacity: 0;
                }

                &:hover,
                &.slick-current {
                    &:before {
                        opacity: 0;
                    }
                    &:after {
                        opacity: 1;
                    }
                }
            }

            .slick-arrow {
                height: 40px;
                width: 40px;

                svg {
                    height: 20px;
                    width: 20px;
                }

                &:not(:hover) {
                    background: #5177fe!important;

                    svg {
                        fill: #fff;
                    }
                }
            }
        }

        .mv-switch {
            border-top: 1px solid #CDD8DE;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-top: 40px;
            padding-top: 40px;

            @media (max-width: 767px) {
                margin-top: 20px;
                padding-top: 20px;
            }

            h6 {
                margin: 0;
                width: 100%;
            }

            button {
                background: #5177fe;
                border-radius: 20px;
                font-size: 13px;
                font-weight: 400;
                padding: 6px 14px;

                &:hover {
                    background: #0d1846;
                }

                &.mv-btn-active {
                    background: #0d1846;
                    pointer-events: none;
                }
            }
        }

        &.show {
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
            z-index: 101;

            > div {
                opacity: 1;
                visibility: visible;
                transform: none;
            }
        }
    }

    .section-vessel-specifications {
        .uabb-button {
            background: #5177fe!important;
            border: 0;
            border-radius: 60px!important;
            padding: 17px 40px;
            white-space: nowrap;

            span {
                color: #fff;
                font-family: 'Poppins', sans-serif;
                font-weight: 500;
                text-transform: uppercase;
            }

            &:hover {
                background: #fff!important;

                span {
                    color: #0d1846;
                }
            }
        }
    }
    .modal-vessel-specifications-overlay {
        .uabb-modal {
            top: 50%!important;
            transform: translateY(-50%)!important;
        }

        .gallery {
            overflow: visible;
        }

        .gallery-item {
            clear: none;

            img {
                border-width: 1px!important;
                height: 70vh;
                object-fit: contain;
                padding: 0;
            }
        }
        
        .slick-arrow:not(:hover) {
            background: #5177fe!important;

            svg {
                fill: #fff;
            }
        }
    }

    .slick-track {
        display: flex;

        @media (min-width: 576px) {
            gap: 20px;
        }
    }
    .slick-arrow {
        background: #fff!important;
        border-radius: 50%;
        color: #0d1846;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        width: 80px;
        transition: .4s;
        z-index: 1;

        &:before {
            display: none;
        }

        svg {
            height: 36px;
            width: 36px;
            transition: all 0.2s ease-in-out;
        }

        &:hover {
            background: #0d1846!important;

            svg {
                fill: #fff;
            }
        }
    }
}

/* itinerary */
.single-itinerary {
    .map-hotspot {
        .uabb-hotspot-text {
            background: #fff;
            border-radius: 50%;
            font: 700 20px 'Forum', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 64px;
            width: 64px;
            font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);
            margin-top: -52px;
            padding: 0;
            transition: .4s;
            
            @media (max-width: 1199px) {
                height: 52px;
                width: 52px;
            }
            
            @media (max-width: 991px) {
                height: 48px;
                width: 48px;
                margin-top: -40px;
            }
            
            @media (max-width: 767px) {
                height: 40px;
                width: 40px;
                margin-top: -46px;
            }
            
            @media (max-width: 767px) {
                margin-top: -34px;
            }

            &:hover {
                background: #5177FE;
                color: #fff;
            }
        }

        .uabb-hotspot-tooltip-content {
            background: #fff;
            /*clip-path: polygon(
                0 24px,
                calc(50% - 12px) 10px,
                50% 0,
                calc(50% + 12px) 8px,
                100% 0,
                100% calc(100% - 24px),
                0% 100%
            );*/
			overflow:hidden;
            font-size: 14px;
            padding: 0;
            text-align: left;
            width: 300px;

            p {
                color: #0D1846;
                margin: 1rem 24px;

                &:first-child {
                    margin: -24px -24px 1rem;
                }

                @media (max-width: 991px) {
                    margin: 1rem 1rem;

                    &:first-child {
                        margin: -1rem -1rem 1rem;
                    }
                }
            }

            /*img {
                clip-path: polygon(0 24px, 100% 0, 100% calc(100% - 24px), 0% 100%);
            }*/

            strong {
                font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
            }
        }
    }

    .section-days {
        h3 {
            color: #0d1846;
            text-transform: uppercase;
        }

        .fl-module-box {
            @media (max-width: 1199px) {
                margin-inline: 8.33%;
            }

            @media (max-width: 991px) {
                margin-inline: 10px;
            }
        }
    }
    
    .uabb-adv-accordion {
        /*column-count: 2;*/

        .uabb-adv-accordion-item {
            break-inside: avoid;
        }
    }
}

/* destinations */
.single-destination {
    .section-overview {
        .overview-list {
            display: grid;
            gap: 24px;
        }

        .overview-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;

            span {
                display: block;
            }
        }   
    }

    .section-gallery {
        .fl-row-content-wrap {
            padding-inline: 0;
        }

        .fl-module-photo-gallery .fl-module-content {
            margin: 0;
        }

        .uabb-photo-gallery-content {
            padding-top: 100%;

            img {
                clip-path: polygon(0 32px, 100% 0%, 100% calc(100% - 32px), 0% 100%);
                object-fit: cover;
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%!important;
            }
        }
        .uabb-photo-gallery-item {
            padding: 10px;
        }

        .slick-slide {
            clear: none;
        }

        .slick-arrow {
            background: #fff!important;
            border-radius: 50%;
            color: #0d1846;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            width: 80px;
            z-index: 1;

            &:before {
                display: none;
            }

            svg {
                height: 36px;
                width: 36px;
                transition: all 0.2s ease-in-out;
            }

            &:hover {
                background: #0d1846!important;

                svg {
                    fill: #fff;
                }
            }
        }
        .slick-prev {
            left: calc(50vw - (1320px / 2));

            @media (max-width: 1400px) {
                left: 10px;
            }
        }
        .slick-next {
            right: calc(50vw - (1320px / 2));

            @media (max-width: 1400px) {
                right: 10px;
            }
        }
    }
    img.mfp-img {
        padding: 0!important;
    }
    .mfp-wrap button.mfp-arrow {
        background: #fff!important;
        border-radius: 50%;
        color: #0d1846;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
        width: 80px;
        display: none;
    }

    .section-dive-sites {
        .fl-loop-grid {
            display: block;
        }

        .slick-list {
            @media (min-width: 576px) {
                margin-inline: -10px;
            }
        }

        .slick-track {
            display: flex;

            @media (min-width: 576px) {
                gap: 20px;
            }
        }

        .slick-arrow {
            background: #fff!important;
            border-radius: 50%;
            color: #0d1846;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            width: 80px;
            z-index: 1;

            &:before {
                display: none;
            }

            svg {
                height: 36px;
                width: 36px;
                transition: all 0.2s ease-in-out;
            }

            &:hover {
                background: #0d1846!important;

                svg {
                    fill: #fff;
                }
            }
        }
        .slick-prev {
            left: -40px;

            @media (max-width: 575px) {
                left: -20px;
            }
        }
        .slick-next {
            right: -40px;

            @media (max-width: 575px) {
                right: -20px;
            }
        }
    }
}

 /* courses */
.single-course {
    .fl-loop-grid {
        @media (min-width: 991px) {
            grid-template-columns: repeat(3, minmax(0, 25%))!important;
        }
    }
}

/* latest updates */
.page-id-6388 {
    .section-banner {
        background: #0d1846;
    }
}

/* blog */
.page-id-74 {
    .uabb-search-form.uabb-search-form-input.uabb-search-form-inline input[type=search] {
        padding-inline: 24px 50px;
    }
    .uabb-search-form.uabb-search-form-input .icon {
        left: auto;
        right: 24px;
    }

    .section-latest {
        .fl-module-loop:first-child {
            margin-bottom: 80px;

            @media (max-width: 991px) {
                margin-bottom: 40px;
            }

            @media (min-width: 576px) {
                .fl-loop-item a > .fl-module {
                    width: 50%;
                }
            }

            .fl-loop-item > .fl-module-box {
                gap: 8.33%;

                @media (max-width: 575px) {
                    gap: 20px;
                }
            }

            .fl-photo-content {
                width: 100%;
            }

            .slanted-image {
                @media (max-width: 575px) {
                    width: 100%;
                }

                .fl-photo-content {
                    padding-top: 95%;

                    @media (max-width: 1199px) {
                        padding-top: 125%;
                    }

                    @media (max-width: 991px) {
                        padding-top: 140%;
                    }

                    @media (max-width: 767px) {
                        padding-top: 125%;
                    }
                }

                img {
                    position: absolute;
                    inset: 0;
                    height: 100%!important;
                    width: 100%!important;
                    object-fit: cover;
                }
            }
        }
    }
}
.single-post {
    .fl-page-content .content-wrap {
        img.alignnone {
            display: block;
            margin-inline: auto;
        }

        h2 {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(1.375rem, 2vw + 0.5rem, 2rem);
            font-weight: 700;
            line-height: 1.3;
        }
    }

    .blog-post-info {
        gap: 0;

        .fl-module-content {
            align-items: center;
        }

        .fl-author-bio-thumb {
            margin-right: 8px;
            padding: 0;

            img {
                border-radius: 50%;
            }
        }
        .fl-author-bio-name {
            color: #0d1846;
            font-size: 14px;
            font-weight: 400;
            margin: 0;
        }
        .fl-author-bio-text {
            display: none;
        }
        .fl-post-info-sep {
            margin-inline: 4px;
        }

        + .fl-html .fl-breadcrumbs {
            font-size: 14px;
            margin-top: -20px;

            a {
                color: inherit;
                text-decoration: none;

                &:hover {
                    color: #5177fe;
                }
            }
        }
    }

    .social-share-buttons {
        display: flex;
        gap: 10px;
        margin-top: 10px;

        .share-btn {
            background: #5177fe;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;

            &:hover {
                background: #0d1846;
                transform: none;
            }
        }

        svg {
            fill: #fff;
            height: 1rem;
            width: 1rem;
        }
    }

    .fl-backtocategory {
        border-top: 1px solid #BBCBD4;
        margin-top: 20px;
        padding-top: 20px;
        text-align: right;
        
        a {
            text-decoration: none;

            svg {
                transition: .4s;
            }

            &:not(:hover) {
                color: #5177fe;

                svg {
                    fill: #5177fe;
                }
            }

        }
    }
}

/* booking process */
.page-id-6404,
/* signup process */
.page-id-6785 {
    .fl-page-content {
        h2 {
            font-family: Poppins, sans-serif;
            font-size: clamp(1.375rem, 1.196rem + 0.89vw, 2rem);
            font-weight: 600;
            line-height: 1.3;
            text-transform: uppercase;
        }

        ul li {
            margin: 0;
            line-height: 2;
        }
    }
}

/* book now */
.page-id-193 {
    .fl-node-h9ce0l83jnw5 {
        margin-bottom: -55px;

        @media (max-width: 991px) {
            margin-bottom: -80px;
        }
    }

    .fl-node-5ugocbwyifrj {
        margin-top: 0;
        
        iframe {
            margin-inline: -30px;

            @media (max-width: 1320px) {
                margin-inline: -10px;
            }
        }
    }
}

/* contact */
.page-id-80 {
    .fl-page-content {
        .info-list-box {
            clip-path: polygon(0 24px, 100% 0, 100% calc(100% - 24px), 0% 100%);
        }

        iframe {
            margin-bottom: 15px;
        }
    }
}

@media (max-width:767px) {
	#mobile-coral-video {
		.fl-row-content-wrap {
			padding:0 !important;

			.fl-builder-shape-layer {
				z-index:10;
			}
		}
	}

	#coral-video {
		iframe {
			min-height:unset !important;
		}
	}

    /* home how it works */
	#how-it-works .uabb-infobox-title-wrap {
	    justify-content:center;
	}
}