/* Header and Navigation */
.header_box_menu_left,
.header_box_menu_right {
    width: 50%;
    float: left;
}

nav a#pull {
    display: none;
}

#navigation {
    clear: both;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

#navigation a {
    color: #99ccff;
    text-transform: uppercase;
    font-weight: bolder;
    display: block;
    line-height: 2.333em;
    padding: 0.50em;
    text-decoration: none;
}

#navigation li {
    display: inline-block;
}

#navigation ul {
    font-size: 1.3vh;
    list-style: none;
    margin: 0;
    padding-left: 0;
    text-align: right;
}

#navigation li li a {
    color: #fff;
}

#navigation ul ul {
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;
}

#navigation ul ul ul {
    left: 100%;
    top: 0;
}

#navigation ul ul a {
    background: #f9f9f9;
    color: #444;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px;
    width: 168px;
    text-align: left;
}

#navigation li:hover > a,
#navigation ul ul :hover > a,
#navigation a:focus {
    background: transparent;
    color: #fd66c3;
}

#navigation ul li:hover > ul {
    display: block;
}

#navigation .current_page_item > a,
#navigation .current_page_ancestor > a {
    font-weight: bold;
}

/* Full viewport height for body and html */
html, body {
    height: 100%;
    margin: 0;
}

/* Video Background */
.video-background {
    position: relative;
    width: 100%;
    background-color: #000;
    overflow: hidden;
    z-index: 0;
}

.video {
    width: 100%;
    max-height: 100%;
}

.video-background .video_title_overlay h1 {
	display: none;
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    padding: 0 5%;
    font-family: "Satisfy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: calc(18px + 5.0vw);
    width: 100%;
    text-shadow:
        0 0 5px black,
        0 0 15px #99ccff,
        2px 2px 3px grey;
    color: #fff;
}

.video_title_overlay_small {
    height: 50px;
    padding: 0 5%;
}



.video_title_overlay_small h1 {
    font-family: "Satisfy", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: calc(18px + 1.5vw);
    width: 100%;
    text-align: left;
    text-shadow:
        0 0 5px black,
        0 0 15px #99ccff,
        2px 2px 3px grey;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 2%;
}

.video-background .menu_overlay {
    position: absolute;
    top: 40px;
    height: 70px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    text-align: center;
    z-index: 1;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    border-bottom: 1px solid #99ccff;
}

/* Overlay text styling */
.video-background .overlay h1 {
    font-size: 3rem;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hulu {
	background: #000;
}

@media (max-width: 768px) {
    .video-background .overlay h1 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .video-background .overlay h1 {
        font-size: 1.5rem;
    }
}

/* Editorial */
.editorial {
    display: block;
    width: 100%;
    height: 60px;
    max-height: 60px;
    margin: 0;
    z-index: 5;
    bottom: 0;
    position: absolute;
    left: 0;
    float: left;
}

/* Parallax */
.parallax1 > use {
    animation: move-forever 10s linear infinite;
}

@keyframes move-forever {
    0% {
        transform: translateX(85px);
    }
    100% {
        transform: translateX(-85px);
    }
}

/* Pool */
.pool {
    padding: 0 5%;  
    background: #1eb5d0;
    overflow: auto;
    padding: 5%;
}

.pool-float-image {
    border-radius: 20px;
    object-fit: cover;
    animation: skew 4s infinite alternate;
}

@keyframes skew {
    0% {
        transform: skewX(2deg);
    }
    100% {
        transform: skewX(-2deg);
    }
}

/* Cruise Info */
#cruse_info_center {
    text-align: center;
}

.cruise_info {
    display: inline-block;
    background-color: #f1ebda;
    padding: 10px 30px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    border-radius: 20px;
    margin-top: 3%;
}

.cruise_info h2 {
    font-size: 42px;
    line-height: 42px;
}

.cruise_info h3 {
    font-size: 32px;
    line-height: 32px;
}

.cruise_info_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Evenly space the boxes */
}

.cruise_info_box {
    background-color: transparent;
    color: white;
    padding: 20px;
    margin: 10px;
    flex: 1 1 calc(25% - 20px); /* Make each box take up 25% of the width minus margin */
    box-sizing: border-box;
    text-align: center;
}

.cruise_icon-circle {
    display: inline-flex; /* Allows centering */
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Makes it a circle */
    background-color: #ff66c4; /* Circle color */
    color: white; /* Icon color */
    font-size: 45px; /* Adjust icon size */
	border: 0px solid #ffffff; /* Border color and thickness */
	height:100px;
	width: 100px;
}

.cruise_info_box h2 {
	text-transform: uppercase;
	font-size: 30px;
	line-height: 20px;
}

.cruise_info_box h3 {
	text-transform: uppercase;
	font-size: 22px;
	line-height: 20px;
}

.cruise_info_box h4 {
	text-transform: uppercase;
	font-size: 18px;
	line-height: 20px;	
}

.cruise_info_box h5 {
	text-transform: uppercase;
	font-size: 12px;	
	line-height: 12px;	
}

/* Mobile Styles */
@media (max-width: 768px) {
    .cruise_info_box {
        flex: 1 1 100%; /* Stacks boxes on mobile */
    }
}

.cruise_link {
    font-size: calc(18px + 0.7vw);
  font-family: "Poppins", sans-serif;
  font-weight: 700; 
    display: inline-block;
    background-color: #ff66c4;
    padding: 10px 30px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    border-radius: 20px;
    margin-top: 3%;
}

/* Miscellaneous */
.tour_box {
    position: relative; 
    padding: 0 5%;  
    background-image: url('images/light_cheetah_background.png');
}

.vip-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-color: transparent;
}

.vip-centered-button {
  background-color: #181818;
  color: #f9f2d7;
  padding: 15px 30px;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  width: auto;
}


.netflix_box {
    position: relative;
    padding: 0 5%;  
    background: #000;
    background-image: url('images/netflix_background_banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.podcast_box {
    position: relative;
    padding: 0 5%;
    background-image: url('images/light_cheetah_background.png');
}


.podcast_title a,
.podcast_title a:link,
.podcast_title a:hover, 
.podcast_title a:visited {
    color: #99ccff;
}
.podcast_title {
    font-size: calc(18px + 1.3vw);
  font-family: "Poppins", sans-serif;
  font-weight: 700; 
    display: flex;
    justify-content: space-between; /* Align items to the edges */
    align-items: center; /* Align items vertically centered if needed */
    background-color: #000;
    padding: 10px 30px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    border-radius: 20px;
    color: #99ccff;
}


.podcast_description {
    font-size: calc(18px + 0.6vw);  
    display: block;
    justify-content: space-between; /* Align items to the edges */
    align-items: center; /* Align items vertically centered if needed */
    background-color: #000;
    padding: 10px 30px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    border-radius: 20px;
    color: #f9f2d7;
}

.podcast_description a,
.podcast_description a:link,
.podcast_description a:hover, 
.podcast_description a:visited {
    color: #99ccff;
    text-decoration: none; 
    font-weight: bold;
}


.call_button {
    background-color: #f9f2d7; /* Button color */
    color: #000; /* Text color */
    padding: 15px 15px; /* Padding for size */
    text-transform: uppercase; /* Uppercase text */
    border: 1px solid #000; /* No border */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s; /* Smooth transition */
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
	margin: 0 auto;
}


.call_button:hover {
    background-color: #f9f2d7; /* Darker color on hover */
}


.merch_box {
    position: relative;
    padding: 0 5%;
    background-image: url('images/yellow_merch_background.png');
}

.merch_image {
    border-radius: 20px;
    margin: 10px;
}

#merch_style {
    text-align: center;
    text-transform: uppercase;
}

#merch_style h3 {
    text-align: center; 
}

#merch_style h4 {
    text-align: center; 
    color: #ff66c4;
}


.shop_button {
    background-color: #f9f2d7; /* Button color */
    color: #000; /* Text color */
    padding: 15px 15px; /* Padding for size */
    text-transform: uppercase; /* Uppercase text */
    border: 0px solid #000; /* No border */
    border-radius: 20px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s; /* Smooth transition */
	font-size: calc(18px + 1vw);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
	margin: 0 auto;
}

.shop_button:hover {
    background-color: #f9f2d7; /* Darker color on hover */
}


.about_box {
    position: relative;
    padding: 0 5%;
    background-image: url('images/light_cheetah_background.png');
}

#about_photo {
    border-radius: 20px;
    object-fit: cover;
    height: 500px;
}

.about_info {
    background-color: #181818;
    padding: 10px 30px;
    margin: 0 auto;
    text-transform: uppercase;
    border-radius: 20px;
    color: #f9f2d7;
}

.about_info h2 {
    font-size: calc(18px + 1.4vw);  
    color: #99ccff;
    text-align: center;
}

    
.about_social_icons,
.about_social_icons a,
.about_social_icons a:link,
.about_social_icons a:hover, 
.about_social_icons a:visited {
    font-size:calc(18px + 0.8vw);
    text-transform:uppercase;
    text-align: center;
    color: #99ccff; 
    width:100%;
}

.contact_box {
    position: relative;
    padding: 0 5%;
    background-color: #000;
    color: #f9f2d7;
}

.footer_contact_emails {
	text-transform: uppercase;
}

.footer_contact_emails h3 {
	text-transform: uppercase;
	color: #f9f2d7;
}

.footer_contact_emails h4, {
	font-size: 13px;
	text-transform: uppercase;
	color: #f9f2d7 !important;
}
.footer_contact_emails h4 a:link {
	font-size: 13px;
	text-transform: uppercase;
	color: #99ccff !important;
}

#footer {
    color: #f9f2d7;
    text-transform: uppercase;
}

#footer a,
#footer a:link,
#footer a:hover, 
#footer a:visited {
    color: #99ccff;
    text-decoration: none;
}

.shadow_bar {
  position: absolute; /* Position this specific image absolutely */
  top: 0; /* Aligns the image to the top of the container */
  left: 0; /* Optionally align to the left */
  width: 100%; /* Optionally set width if needed */
  height: auto; /* Optionally set height if needed */
}

.gold_title,
.cream_title,
.cream_title,
.black_title,
.pink_title,
.red_title {
    font-size: calc(20px + 2vw);
  font-family: "Poppins", sans-serif;
	font-weight: 700; 
    font-style: normal;
    margin: 0 auto;
    text-align:center;  
    text-transform: uppercase;
    padding-top: 2%;
}

.gold_title {
    font-size: calc(18px + 3.5vw);	
    color: #99ccff; 
}

.red_title {
    font-size: calc(18px + 3.5vw);	
    color: #990000; 
}

.cream_title {
    color: #f9f2d7;
}

.black_title {
    color: #0b0b0b;
}

.pink_title {
    color: #ff66c4;
}