* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    width: 100%;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background-color: #ff6700;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--head-color);
    border-radius: 8px;
}

:root {
    --head-color: #ffcf09;
    --nav-color: #84163d;
    --heading-color: #ffc700;
    --main-color: #35c2ff;
    --main-rgba-color: rgba(53, 194, 255, 0.8);
    --ride-0-box-color: linear-gradient(rgba(207, 104, 77, 0.4), rgba(207, 104, 77, 0.4));
    --ride-1-box-color: linear-gradient(rgba(136, 68, 199, 0.4), rgba(136, 68, 199, 0.4));
    --ride-2-box-color: linear-gradient(rgba(73, 195, 165, 0.4), rgba(73, 195, 165, 0.4));
    --ride-3-box-color: linear-gradient(rgba(198, 67, 71, 0.4), rgba(198, 67, 71, 0.4));
    --ride-0-box-border-color: #ffc100;
    --ride-1-box-border-color: #00ffc2;
    --ride-2-box-border-color: #ea0000;
    --ride-3-box-border-color: #dbff00;
    --heading-wave-border-color: linear-gradient(to left, rgb(100, 16, 46) 50%, transparent 50%);
}

/* utility classes */
#pre-loader {
    width: 100vw;
    height: 100vh;
    background: var(--head-color);
    z-index: 120;
    transform: scale(1);
    transition: all 3s;
}

#pre-loader img.chakrview {
    width: 6%;
    top: calc(50% - 85px);
    left: 50.7%;
    z-index: 130;
}

@keyframes rotate-chakr {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#pre-loader img.logomojpark {
    position: absolute;
    width: 13%;
    z-index: 140;
}

.high-index {
    position: relative;
    z-index: 22;
}

.section-heading {
    font-family: 'Moul', cursive;
    letter-spacing: 0.8;
    color: #84163d !important;
}

/* head section */
#head {
    background-color: var(--head-color);
}

#head a {
    color: var(--nav-color);
    font-size: 0.8rem !important;
}

#head a.social-link {
    padding: 0px 7px;
}

/* navbar section */
#navbar {
    background: #ff791f;
    position: sticky;
    top: 0px;
}

#navbar img.navbar-logo {
    width: 70%;
}

#nav-links a.nav-link {
    font-family: 'Moul', cursive;
    font-size: 1rem;
    letter-spacing: 0.7;
}

#nav-links a.nav-link::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0px;
    width: 0%;
    height: 3px;
    background-color: #fff;
    transition: all 0.2s;
}

#nav-links a.nav-link:hover {
    color: var(--head-color) !important;
}

#nav-links a.nav-link:hover::after {
    width: 100%;
}

.nav-ticket span.ticket {
    background-color: var(--head-color);
    border: 1px solid var(--head-color);
    border-radius: 0px 4px 4px 0px;
    font-family: 'Moul', cursive;
    font-size: 1rem;
    padding: 0.3rem 0.4rem;
    transition: all 0.3s;
}

.nav-ticket span.ticket-icon {
    border: 1px dotted var(--head-color);
    border-radius: 4px 0px 0px 4px;
    transition: all 0.3s;
}

.nav-ticket span.ticket-icon svg {
    fill: var(--head-color);
    width: 0.76rem;
}

.sidebar-bar i {
    color: var(--head-color);
}

.sidebar-bar i:hover {
    text-shadow: 0px 0px 14px var(--head-color);
}

/* background svg */
.cele img {
    width: 250%;
    top: 127px;
    left: -50px;
    opacity: 0.3;
    filter: invert(0.50);
    z-index: 5;
}

@keyframes beat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

.horse img {
    width: 4.5%;
    top: 265px;
    left: 29%;
    transform: rotate(340deg);
    z-index: 6;
    animation: snake 4s infinite;
}

@keyframes snake {
    0% {
        transform: rotate(340deg);
    }

    50% {
        transform: rotate(380deg);
    }

    100% {
        transform: rotate(340deg);
    }
}

.horse-01 img {
    width: 4%;
    top: 126px;
    left: 91vw;
    transform: rotate(20deg);
}

.boat img {
    width: 2.8%;
    top: 158px;
    left: 9%;
    transform: rotate(35deg);
    z-index: 6;
    animation: snake 4s infinite;
}

.roller img {
    width: 4.5%;
    top: 600px;
    left: 91%;
    transform: rotate(15deg);
    z-index: 6;
}

.boat-01 img {
    width: 4%;
    top: 200px;
    left: 0px;
    transform: rotate(315deg);
}

.horse-02 img {
    left: 91%;
}

.boat-02 img {
    top: 0px !important;
    left: 61%;
    width: 3%;
}

.boat-03 img {
    width: 3.5%;
    left: 65%;
    top: -635px;
    filter: invert(1);
}

.boat-04 img {
    width: 3.8%;
    top: 0px;
    left: 70vw;
}

.horse-03 img {
    width: 3.5%;
    left: 6%;
    top: -800px;
}

.horse-04 img {
    width: 3.5%;
    top: 95px;
    left: 17%;
    transform: rotate(20deg);
    filter: invert(1);
}

.roller-02 img {
    width: 4%;
    top: -35px;
    left: 40%;
    filter: invert(1);
}

.horse-05 img {
    width: 4.3%;
    left: 88%;
    top: 850px;
    filter: invert(1);
}

.horse-06 img {
    width: 4%;
    top: -300px;
    left: 4vw;
}

.horse-07 img {
    top: -500px;
    left: 92vw;
}

/* sidebar Section */
#sidebar {
    width: 250px;
    height: 100vh;
    background-color: #8d1942;
    top: 0px;
    right: 0px;
    z-index: 99;
    translate: 100%;
    transition: all 1.2s;
    display: none;
}

#sidebar .container {
    height: 100svh;
}

#sidebar .sidebar-close-col {
    background-color: var(--nav-color);
}

#sidebar .sidebar-logo {
    top: 5px;
}

#sidebar .nav-ticket span.ticket {
    padding-left: 0.3rem !important;
    padding-right: 0.3rem !important;
    font-weight: 500 !important;
}

#sidebar .sidebar-link {
    font-size: 0.95rem !important;
}

#sidebar .sidebar-link:hover {
    color: var(--head-color) !important;
}

#sidebar .sidebar-link i {
    font-size: 0.8rem !important;
    left: 0px;
    transition: all 0.3s;
}

#sidebar .sidebar-social-col {
    background-color: var(--nav-color);
    bottom: 0px;
}

/* heading section */
#heading {
    background-color: #ffcf09;
}

/* booking section  */
#booking {
    background: linear-gradient(to bottom, #ffcf09, #ffc740);
}

#booking .ticket-book {
    overflow: hidden;
    background-color: #ff6700;
}

#booking .ticket-book .book-box {
    background: url(../svg/elemets.svg);
    background-size: 107%;
    background-position: 100px 50%;
}

#booking h1 {
    font-weight: 900;
}

#booking a.book-btn {
    background-color: var(--head-color);
    color: var(--nav-color);
    font-weight: 900;
    transition: all 0.3s;
}

#booking a.book-btn:hover {
    box-shadow: 0px 0px 14px 0px var(--head-color);
}

/* play-center section */
#play-center::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../image/mojmela-ride-bg-1.webp) no-repeat center/cover;
}

#play-center .play-para-heading {
    font-weight: 800;
}

#play-center .play-para-message {
    font-weight: 500;
    text-align: justify;
}

#play-center .play-para-images img {
    width: 93%;
    height: 100%;
}

#play-center .play-para-images img:nth-child(1) {
    top: 10px;
    left: 0px;
    z-index: 2;
}

#play-center .img-shadow {
    width: 93%;
    height: 100%;
    top: 10px;
    left: 17px;
    z-index: 2;
    box-shadow: inset 0px 0px 22px 18px #ffc740;
}

#play-center .img-shadow-2 {
    left: 0px;
    box-shadow: inset 0px 0px 22px 18px #ffcc4a;
}

#play-center .play-center-box {
    transition: all 0.3s;
    width: 92%;
}

#play-center .play-heading {
    padding-top: 8rem !important;
}

#play-center .play-center-box:hover {
    transform: scale(1.1);
}

#play-center .img-box {
    overflow: hidden;
    border-radius: 27px 27px 0px 0px;
}

#play-center .play-center-content {
    background-color: #fff;
    min-height: 175px;
    border-radius: 0px 0px 25px 25px;
}

#play-center .play-main-para {
    font-weight: 500;
}

#play-center h3.play-box-heading {
    font-weight: 900;
    letter-spacing: 0.4;
    min-height: 54px;
}

#play-center .play-center-content p {
    font-size: 0.78rem;
    font-weight: 500;
}

/* Ride section */
#ride::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../image/mojmela-ride-element.webp) no-repeat center/cover;
}

#ride .roller-coaster img {
    bottom: -21svh;
    left: 2vw;
    width: 63vw;
    opacity: 0.1;
}

#ride .svg-cover {
    width: 58vw;
    height: 0px;
    background-color: #ffcd02;
    bottom: 0px;
    z-index: 1;
    left: 2vw;
    box-shadow: 0px 0px 20px 36px #ffcd02;
}

#ride .ride-heading-para {
    font-weight: 500;
}

#ride .ride-box {
    width: 90%;
    height: 220px;
    background-position: 100% 100%;
    cursor: pointer;
}

#ride .ride-box-01 {
    background: var(--ride-0-box-color), url(../image/ride-1.webp) no-repeat;
    background-size: 310px;
    box-shadow: -1px 1px 1px 2px var(--ride-0-box-border-color);
}

#ride .ride-box-02 {
    background: var(--ride-1-box-color), url(../image/ride-2.webp) no-repeat;
    background-size: 310px;
    box-shadow: -1px 1px 1px 2px var(--ride-1-box-border-color);
}

#ride .ride-box-03 {
    background: var(--ride-2-box-color), url(../image/ride-3.webp) no-repeat;
    background-size: 340px;
    box-shadow: -1px 1px 1px 2px var(--ride-2-box-border-color);
}

#ride .ride-box-04 {
    background: var(--ride-3-box-color), url(../image/ride-4.webp) no-repeat;
    background-size: 100% 100%;
    box-shadow: -1px 1px 1px 2px var(--ride-3-box-border-color);
}

#ride .ride-box::before {
    content: "";
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 0%;
    height: 0%;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 1.5s;
}

#ride .ride-box:hover::before {
    animation: inset-ride 0.85s ease-in-out forwards;
}

@keyframes inset-ride {
    0% {
        width: 0%;
        height: 0%;
    }

    85% {
        width: 103%;
        height: 103%;
    }

    100% {
        width: 100%;
        height: 100%;
    }
}

/* Blog Section */
#blog .section-heading {
    color: #ffc100 !important;
}

#blog::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../image/mojmela-ride-bg-2.webp) no-repeat center/cover;
}

#blog .blog-bottom-bg-img img {
    bottom: 0px;
    left: 0px;
    z-index: 2;
}

.blog-extra-heading {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#blog .svg-cover {
    width: 56vw;
    opacity: 1;
    background: #ffcd02;
    z-index: 2;
    bottom: 0px;
    box-shadow: 0px 0px 20px 36px #ffcd02;
}

#blog p.blog-heading-para {
    font-weight: 500;

}

#blog .blog-box {
    height: 230px;
}

#blog .home-blog-content-box {
    z-index: 22;
}

#blog .blog-box::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../image/home\ blog.webp) no-repeat;
}

#blog .blog-box::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #84163d;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.6;
}

#blog .blog-box h2 {
    font-family: 'Moul', cursive;
    letter-spacing: 0.8;
}

#blog .home-blog-btn {
    background-color: #ffc100;
    font-weight: 600;
    color: #84163d !important;
    transition: all 0.3s;
}

#blog .home-blog-btn:hover {
    background-color: #84163d;
    color: #ffc100 !important;
}

#blog .blog-roller-svg {
    bottom: -40px;
    width: 860px;
    left: 1400px;
}

/* event section */
#events .event-bg-element {
    z-index: 2;
    top: 0px;
    width: 120%;
    left: -190px;
}

#events::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #f7d2c5;
}

#events .events-bottom-bg-img img {
    bottom: 0px;
    left: 0px;
    z-index: 2;
}

#events .svg-cover {
    width: 78vw;
    left: -35vw;
    bottom: 0px;
    box-shadow: 0px 0px 20px 36px #ffcd02;
    z-index: 2;
}

#events p.event-para {
    font-size: 0.9rem;
    font-weight: 500;
}

.event-images img {
    width: 250px;
    height: 230px;
}

.event-images img:nth-child(2) {
    top: 25px;
    left: 220px;
}

.event-images img:nth-child(3) {
    top: 110px;
    left: 65px;
}

.event-svg {
    position: absolute;
    bottom: -100px;
    left: 0;
    width: 115%;
    overflow: hidden;
    line-height: 0;
}

.event-svg svg {
    position: relative;
    display: block;
    width: calc(173% + 1.3px);
    height: 300px;
}

.event-svg .shape-fill {
    fill: var(--head-color);
}

/* review section */
#reviews::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #e9f0f9;
}

#reviews .roller-coaster img {
    width: 70vw;
    top: calc(0svh + 200px);
    right: -51svw;
    transform: scale(1.3);
    opacity: 0.5;
    z-index: 2;
}

#reviews .customer-review {
    background: linear-gradient(#e85617, #c2420b);
    width: 95%;
}

#reviews .customer-profile h2.customer-name {
    font-weight: 600;
    color: #84163d;
}

#reviews .customer-profile img {
    width: 23px;
}

#reviews p.customer-para {
    font-size: 0.8rem;
    font-weight: 500;
    display: inline;
}

#reviews .read-more-review,
#reviews .read-less-review {
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.8rem;
}

#reviews .extra-review-para {
    display: none;
}

#reviews .arrow-box {
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: rotate(45deg);
    background-color: #c4430b;
}

#reviews .review-overflow::-webkit-scrollbar {
    display: none;
}

/* Get-in-touch section */
#get-in-touch .get-in-touch-heading {
    background-color: #540320;
}

#get-in-touch .get-in-touch-heading h1 {
    letter-spacing: 0.9;
}

#get-in-touch .get-in-touch-main {
    background: linear-gradient(rgba(84, 3, 32, 0.95), rgba(84, 3, 32, 0.95)), url(../svg/amusment.svg);
    background-repeat: no-repeat;
    background-size: 2600px;
    background-position: -400px calc(100% - 0%);
}

#get-in-touch .get-in-touch-link:hover {
    color: var(--head-color) !important;
}

#get-in-touch .get-in-touch-link::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 0%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s;
}

#get-in-touch .get-in-touch-link:hover::before {
    width: 100%;
}

#get-in-touch li a,
#get-in-touch td {
    font-size: 0.9rem;
    letter-spacing: 0.7;
    font-weight: 500;
}

#get-in-touch td i {
    color: var(--head-color);
    font-size: 0.9rem;
    padding: 0.2em 0.4em;
}

#get-in-touch td {
    padding-bottom: 7px;
    line-height: 1.3;
}

/* foot section */
#foot {
    background-color: #ff6700;
}

#foot .foot-link {
    color: #000;
    transition: all 0.3s;
}

#foot .foot-link:hover {
    text-shadow: 0px 0px 1px #84163d;
}

#foot .mojmela-location .foot-location {
    color: #84163d;
}

#foot .mojmela-copyright-link {
    font-weight: 500;
}

#foot .footer-creactive-link {
    color: yellow;
    font-weight: 500;
}

#mojmela-deals img {
    cursor: pointer;
}