/* POPUP CONTENT FULL */

.popup-full-container {
    position: fixed;
	display:none;
    top: 50%;
    left: 50%;
    z-index: 1000000000;
    transform: translate(-50%, -50%);
    background: #fff;
    padding:2rem;
    max-width:25vw;
    border-radius:40px;
}

.popup-full-container .image{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -4rem;
}

.popup-full-container .item-list{
    margin: 5rem 0 3rem;
}

.popup-full-container .message {
    font-size: 24px;
    color: #002776;
    margin-bottom: 10px;
    font-family: "Marcellus";
    text-align: center;
}

.popup-full-container .description {
    text-align: center;
}

.popup-full-container .item{
    padding:1rem;
    margin:1rem 0;
}

.popup-full-container.has-border .item{
    border:1px solid #002776;
    border-radius: 30px;;
}

.popup-full-container .close-popup{
    text-align: right;
    cursor:pointer;
}

.overlay-popup-whale-watching{
	display:none;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    background: #000;
    opacity:0.6;
    z-index: 9999999;
}


@media only screen and (min-width: 1281px) and (max-width: 1600px) {
	.popup-full-container .image{
		margin-top:2rem;
	}
	
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
	.popup-full-container .image{
		margin-top:2rem;
	}
	
	.popup-full-container .description {
		font-size:14px;
	}
	
	.popup-full-container .message{
		font-size:20px;
	}
	
	.popup-full-container .cta button{
		font-size:14px;
	}
}


@media only screen and (max-width: 768px) {
	
	.popup-full-container{width:85vw;max-width:unset;}
	
}


/* POPUP SIDE CONTAINER*/

.popup-side-container{
	/* Hidden until the JS reveals it with display:flex (see script.js showSidePopupInstance).
	   Do not re-add a second display declaration here: the last one wins and the popup
	   would stay permanently rendered off-screen. */
	display:none;
    position: fixed;
    right: -35rem;
    top: 13vh;
    width: 25rem;
    z-index: 1000;
    flex-wrap: wrap;
    background: #fff;
    padding: 0 1rem 1rem 1rem;
    border-radius: 40px;
	gap:15px;
	box-shadow: -7px 8px 20px -10px rgba(0,0,0,0.75);
-webkit-box-shadow: -7px 8px 20px -10px rgba(0,0,0,0.75);
-moz-box-shadow: -7px 8px 20px -10px rgba(0,0,0,0.75);


}

@keyframes float {
            0% {
                transform: translate(0, -50%) translateY(50%);
            }
            50% {
                transform: translate(0, -50%) translateY(55%);
            }
            100% {
                transform: translate(0, -50%) translateY(50%);
            }
        }

.popup-side-container .item{
	flex:1;
	padding:0 0.3rem;
}

.popup-side-container .item .cta a{
	color:#979797;
	text-decoration:underline;
}

.popup-side-container .image{
	flex:0 0 40%;
	position:relative;
	animation: float 3s ease-in-out infinite;
}

.popup-side-container .image img{
	position:absolute;
	top:50%;
	transform:translate(1%,-50%) !important;
}

.popup-side-container .close-popup{
	
    text-align: right;
    width: 100%;
    position: relative;
    right: 0;
	cursor:pointer;
}


.popup-side-container .close-popup span{
	
    text-align: right;
    position: absolute;
    right: 2rem;
    top: -0.9rem

}

.popup-side-container .message {
    font-size: 16px;
    color: #002776;
    margin-bottom: 10px;
    font-family: "Marcellus";
}



@media only screen and (max-width: 768px) { 
	.popup-side-container{
		width:105vw;
		
	}

}

/* CONTENT FULL */

.flat-content-container {
    display: flex;
}

.flat-content-container.has-border .item {
    position: relative; /* Ensure the pseudo-elements are positioned relative to the item */
    padding: 2rem;
    flex-wrap: wrap;
    background-color: transparent; /* Ensure the background is transparent */
    border-radius: 30px; /* Ensure the border-radius matches the pseudo-element */
    z-index: 1; /* Ensure the main content is above the pseudo-elements */
}

.flat-content-container.has-border .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px; /* Adjust padding to ensure border thickness */
    background: linear-gradient(to right, #00D1FF, #00358B);
    border-radius: 30px; /* Ensures the border is rounded */
    z-index: -1;
    mask-composite: exclude; /* Ensures the background is cut out */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
}

.flat-content-container .item {
    display: flex;
    align-items: center;
}

.flat-content-container .image {
    margin-right: 20px;
    flex: 0 0 40%;
}

.flat-content-container .image img {
    max-width: 100%;
    height: auto;
}

.flat-content-container.v2 .item {
    flex: 0 0 100%;
	gap:5rem;
}

.flat-content-container.v2 .image {
    position: relative;
}

.flat-content-container.v2 .image img {
    position: absolute;
    transform: translate(10%, -50%);
    top: 50%;
}

.flat-content-container.v2 .cta button {
    margin: 0;
}

.flat-content-container .content {
    text-align: left;
    flex: 1;
}

.flat-content-container .message {
    font-size: 24px;
    color: #002776;
    margin-bottom: 10px;
    font-family: "Marcellus";
    text-align: center;
}

@media only screen and (min-width: 1280px) and (max-width: 1366px) {
	.flat-content-container .message{
		font-size:20px;
	}
	
	.flat-content-container.v2 .item{
		gap:2rem;
	}
	
	.flat-content-container.has-border .item{
		padding:1rem;
	}
	
}


@media only screen and (max-width: 768px) {

    .flat-content-container .image,
    .flat-content-container .content {
        flex: 0 0 100%;
    }

    .flat-content-container.has-border .item {
        flex-wrap: wrap;
    }

    .flat-content-container .image img {
        display: block;
        margin: 0 auto;
    }

    .flat-content-container .content {
        margin-top: 1rem;

    }
	
	.flat-content-container.v2 .image img{
		transform:translate(50%, -50%);
		max-width:40vw;
	}
}