@font-face {
	font-family: AirbnbCereal;
	src: url("./fonts/AirbnbCereal_W_XBd.otf") format("opentype");
	font-weight: bold;
	font-display: swap;
}
@font-face {
	font-family: AirbnbCereal;
	src: url("./fonts/AirbnbCereal_W_Md.otf") format("opentype");
	font-weight: medium;
	font-display: swap;
}
@font-face {
	font-family: AirbnbCereal;
	src: url("./fonts/AirbnbCereal_W_Lt.otf") format("opentype");
	font-weight: light;
	font-display: swap;
}
@font-face {
	font-family: AirbnbCereal;
	src: url("./fonts/AirbnbCereal_W_Bk.otf") format("truetype");
	font-weight: normal;
	font-display: swap;
}
/* @font-face {
	font-family: AirbnbCereal;
	src: url("./fonts/AirbnbCereal_W_Bd.otf") format("opentype");
	font-weight: normal;
} */
body {
	font-family: AirbnbCereal;
	font-size: 14px;
	line-height: 1.43;
}
#social-icons a {
    text-decoration: none;
    color: var(--bs-body-color);
}
#social-icons a:hover {
    opacity: 0.7;
}
.bg-light {
    background-color: rgb(241, 241, 241) !important;
}
.logo-wrap {
	max-width: 120px;
}
nav {
	padding: 25px 40px !important;
	background: #fff;
	box-shadow: 0 3px 3px 0px rgba(0,0,0,0.3);
	border-radius: 25px;
	width: auto !important;
}
nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
nav ul li {
	display: inline-block;
}
nav ul li a {
	text-decoration: none;
	color: #000;
	font-size: 19px;
	font-weight: 600;
}
nav ul li a.active {
	color: rgb(245, 146, 67);
}
.ajaxpe {
	pointer-events: none;
	opacity: 0.4;
	transition: all 0.4s ease;
}
.fs12 {
	font-size: 12px;
}
.fs14 {
	font-size: 14px;
}
.fs16 {
	font-size: 16px;
}
.fs17 {
	font-size: 17px;
}
.fs18 {
	font-size: 18px;
}
.fs20 {
	font-size: 20px;
}
.fs22 {
	font-size: 22px;
}
.fs24 {
	font-size: 24px;
}
.fs26 {
	font-size: 26px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 12px; /* Adds space below image */
	text-align: center;
	margin-bottom: 20px; /* Adds space below caption */
}

.swiper-slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	overflow: visible;
}


.img-box {
	height: 300px;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 0.5rem;
	overflow: visible;
}


.swiper-slide img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	display: block;
}
.fs34 {
	font-size: 34px;
}
.fs45 {
	font-size: 45px;
}
.fs50 {
	font-size: 50px;
}
.fs55 {
	font-size: 55px;
}
.rounded-45 {
    border-radius: 22px;
}
.btn-warning {
    background: rgb(245, 146, 67);
}
h1 {
	display: block;
	font-size: 35px !important;
	color: rgb(245, 166, 67) !important;
}
h1:not(.normal) {
	margin-top: 380px !important;
}
.feet-img {
	width: 50px;
	margin-top: -20px;
}
/* .hero-section {
	background-image: url(../imgs/bg.jpg); 
	padding: 0 0 200px 0;
	background-size: cover;
	background-position: 80% 15%;
	color: #fff;
	position: relative;
} */

.hero-section {
    position: relative;
    overflow: hidden;
    /* Remove original background-image but keep padding */
    padding: 0 0 200px 0;
    background: transparent;
}

.hero-video {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: right top;
    z-index: 0;
	transform: scale(0.6);
    transform-origin: top right;
}

@media (max-width: 767px) {
    .hero-video {
        right: -20%;
        transform: scale(0.45);
    }
}

/* Maintain existing content positioning */
.hero-section .container {
    position: relative;
    z-index: 1;
}

.hero-splash {
    /* Existing styles */
    position: absolute;
    bottom: -10px;
    left: 3%;
    max-width: 240px;
    
    /* New additions */
    z-index: 999 !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}
.water-splash {
    position: absolute;
    top: -10px;
    right: 3%;
    z-index: 0;
    max-width: 240px;
    pointer-events: none;
}
.water-splash.contact {
	top: unset;
	bottom: 0;
}

/* Sliders */
.swiper {
	width: 100%;
	text-align: center;
	overflow: visible;
}
input, textarea {
    padding: 24px 20px !important;
    font-size: 18px !important;
    border: none !important;
    border-radius: 10px !important;
}
button {
	font-size: 24px !important;
}

.icon-list .icon {
    width: 48px;
    text-align: right;
}
.icon-list .icon + p {
    width: calc(100% - 48px);
    display: inline-block;
    padding-left: 20px;
    font-size: 12px;
    margin-bottom: 0 !important;
	color: #747474;
}
.icon-list .icon img {
    max-width: 100%;
}
.icon-list div[class*="col-"] {
    display: flex;
    align-items: center;
}

/* Animation */
@keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0)
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0)
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@keyframes fadeInLeft {
    from {
        transform: translate3d(-40px, 0, 0)
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@-webkit-keyframes fadeInLeft {
    from {
        transform: translate3d(-40px, 0, 0)
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@keyframes fadeInRight {
    from {
        transform: translate3d(40px, 0, 0)
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@-webkit-keyframes fadeInRight {
    from {
        transform: translate3d(40px, 0, 0)
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}
@keyframes jello {
	11.1% {
		transform: none
	}
	22.2% {
		transform: skewX(-12.5deg) skewY(-12.5deg)
	}
	33.3% {
		transform: skewX(6.25deg) skewY(6.25deg)
	}
	44.4% {
		transform: skewX(-3.125deg) skewY(-3.125deg)
	}
	55.5% {
		transform: skewX(1.5625deg) skewY(1.5625deg)
	}
	66.6% {
		transform: skewX(-0.78125deg) skewY(-0.78125deg)
	}
	77.7% {
		transform: skewX(0.390625deg) skewY(0.390625deg)
	}
	88.8% {
		transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
	}
	100% {
		transform: none
	}
}
.jello {
	animation: jello 2s infinite;
	transform-origin: center
}
.center {
	display: inline-block
}
.animate-jello {
	transform-origin: center;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-iteration-count: 1;
}
.jello {
	animation-name: jello;
	-webkit-animation-name: jello;
}
.center {
	display: inline-block;
}


.animate {
	opacity: 0;
	animation-duration: .6s;
	-webkit-animation-duration: .6s;
}
.animated {
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
}
.animated.left {
	animation-name: fadeInLeft;
	-webkit-animation-name: fadeInLeft;
}
.animated.right {
	animation-name: fadeInRight;
	-webkit-animation-name: fadeInRight;
}
@media (max-width: 767px){
	.menu-toggle {
		display: inline-block;
		transition: all 0.4s ease;
	}
	.menu-toggle.active {
		position: fixed;
		top: 24px;
		right: 24px;
		background: rgba(0,0,0,0.4);
		border-radius: 40px;
		z-index: 2;
	}
	body:not(.home) .menu-toggle:not(.active) {
		background: rgba(14, 41, 60, 0.5);
		border-radius: 6px;
	}
	.hero-section, .hero-video {
		border-bottom-left-radius: 140% 7%;
		border-bottom-right-radius: 140% 7%;
		padding: 0 0 40px 0;
	}
	.water-splash {
		width: 40%;
	}
	.fs14-mob {
		font-size: 14px;
	}
	.fs16-mob {
		font-size: 16px;
	}
	.fs18-mob {
		font-size: 18px;
	}
	.fs35-mob {
		font-size: 35px;
	}
	nav {
		width: 200px !important;
		position: fixed;
		left: -200px;
		top: 20px;
		height: calc(100% - 40px);
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		transition: all 0.4s ease;
		padding: 25px 10px !important;
		z-index: 2;
	}
	nav.vis {
		left: 0px;
	}
	nav ul {
		flex-direction: column;
		width: 100%;
	}
	nav ul li + li {
		margin-top: 15px;
	}
	/* Nav ham */
	.menu-toggle svg {
        fill-rule: evenodd;
        clip-rule: evenodd;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 1.5;
        cursor:pointer;
 }
	.menu-toggle svg path {
		fill: none;
		stroke: white;
		stroke-width: 2px;
	}
	.menu-toggle #top, #bottom {
		stroke-dasharray: 30, 75.39;
		transition: all 0.6s cubic-bezier(0.6, 0.33, 0.67, 1.29);
	}
	.menu-toggle.active svg #top, .menu-toggle.active svg #bottom {
		stroke-dasharray: 75.39;
		stroke-dashoffset: -60;
	}
	.menu-toggle svg:nth-child(2) {
		transform: rotate(0deg);
		transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
	}
	.menu-toggle svg:nth-child(2) path {
		transition: all 0.4s ease-in-out 0.6s;
	}
	.menu-toggle svg:nth-child(2).active {
		transform: rotate(180deg);
	}
	.menu-toggle .rocket #top {
		stroke-dasharray: 30, 88;
	}

	/* Icons with tooltips */
	.mob-tooltip-icon-wrap {
		position: relative;
		display: inline-block;
	}
	.mob-tooltip-icon-wrap + .mob-tooltip-icon-wrap {
		margin-left: 20px;
	}
	.mob-tooltip-icon-wrap .icon {
		width: 40px;
		height: 40px;
		display: inline-block;
	}
	.mob-tooltip-icon-wrap .icon img {
		max-width: 100%;
		max-height: 100%;
	}
	.mob-tooltip-icon-wrap .icon-tooltip {
		background: rgb(77, 77, 77);
		position: absolute;
		top: 145%;
		width: 200px;
		left: 50%;
		transform: translateX(-50%) translateY(10px);
		color: #fff;
		border-radius: 10px;
		padding: 8px;
		font-size: 12px;
    	line-height: 1.5;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: all 0.4s ease;
	}
	.mob-tooltip-icon-wrap .icon-tooltip:before  {
		content: "";
		position: absolute;
		border-bottom: 15px solid rgb(77, 77, 77);
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		bottom: 97%;
		left: 45%;
		margin-left: -5px;
		margin-top: -5px;
	}
	.mob-tooltip-icon-wrap.vis .icon-tooltip {
		opacity: 1;
		visibility: visible;
		pointer-events: all;
		transform: translateX(-50%) translateY(0);
	}
}

:root, [data-bs-theme=light] {
	--swiper-navigation-color: #b5b5b5;
	--bs-light-rgb: rgb(241, 241, 241);
}
.swiper .swiper-button-prev, .swiper .swiper-rtl .swiper-button-next {
	left: 0px;
}
.swiper .swiper-button-next, .swiper .swiper-rtl .swiper-button-prev {
	right: 0px;
}

.dinos-separator {
	height: 80px;
	background-image: url(../imgs/dinosaurpattern.png);
	background-size: cover;
	background-size: cover;
}
.page-content {
	z-index: 1;
    position: relative;
}

/* Footer */
footer {
	background: rgba(14,41,60);
    color: #fff;
	position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
}
footer .footer-pad {
	padding-top: 120px;
	padding-bottom: 120px;
}
footer a {
	text-decoration: none;
    color: rgb(206, 212, 215);
	font-size: 14px;
}
footer .social-icons a {
	color: #fff;
}

.social-icons a:hover {
    opacity: 0.7;
}

@media (min-width: 768px){
	.logo-wrap {
		max-width: 150px;
	}
	h1, h1:not(.normal) {
		font-size: 42px !important;
		margin-top: 60px !important;
	}
	nav ul li + li {
		margin-left: 30px;
	}
	.feet-img {
		width: 80px;
	}
	.hero-section {
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background-position: 10% 15%;
	}
	.swiper {
		text-align: left;
	}
	.dinos-separator {
		height: 130px;
	}
	footer .footer-pad {
		padding-top: 150px;
		padding-bottom: 150px;
	}
}
@media (min-width: 1025px){
	h1 {
		font-size: 48px !important;
	}
}

.img-multiply {
	mix-blend-mode: multiply;
  }

/* Cartoon-style Buy Now buttons */
.btn-cartoon {
	display: inline-block;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background: linear-gradient(135deg, #ff6b6b, #ff8e53);
	border: none;
	border-radius: 50px;
	box-shadow: 0 8px 15px rgba(255, 107, 107, 0.4);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	z-index: 10;
}

.btn-cartoon:before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.5s;
}

.btn-cartoon:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 12px 20px rgba(255, 107, 107, 0.6);
	background: linear-gradient(135deg, #ff5252, #ff7043);
}

.btn-cartoon:hover:before {
	left: 100%;
}

.btn-cartoon:active {
	transform: translateY(-1px);
	box-shadow: 0 6px 10px rgba(255, 107, 107, 0.4);
}