:root{
box-sizing: border-box;
padding: 0px;
margin: 0px;

--primary: #EB3D1F;
--secondary: #F8CF3A;
--dark-base: #000000;
--light-base: #FFFFFF;
--primary-body-text: #424242;
--primary-secondary-gradient: linear-gradient(136deg, #EB3D1F 24.53%, #F0912C 84.98%);
--primary-gradient-light: linear-gradient(90deg, #FFC000 0.17%, #F8CF3A 87.29%);
--icon-gradient-01: linear-gradient(180deg, #67D7C9 0%, #00AB8E 100%);
--icon-gradient-02: linear-gradient(90deg, #FFC000 0.17%, #F8CF3A 87.29%);
--icon-gradient-03: linear-gradient(180deg, #A7469A 0%, #B969AE 100%);

--spantaran-font:"spantaran";
--montserrat-font:"montserrat";

--font-size-70: clamp(2.5rem, 1.9264rem + 2.8681vw, 4.375rem);
--font-size-60: clamp(2.1875rem, 1.7095rem + 2.3901vw, 3.75rem);
--font-size-50: clamp(2.375rem, 2.1456rem + 1.1472vw, 3.125rem);
--font-size-40: clamp(1.625rem, 1.3573rem + 1.3384vw, 2.5rem);
--font-size-36: clamp(1.75rem, 1.597rem + 0.7648vw, 2.25rem);
--font-size-30: clamp(1.25rem, 1.0588rem + 0.956vw, 1.875rem);
--font-size-27: clamp(1.125rem, 0.9529rem + 0.8604vw, 1.6875rem);
--font-size-22: clamp(0.875rem, 0.722rem + 0.7648vw, 1.375rem);
--font-size-20: clamp(0.875rem, 0.7603rem + 0.5736vw, 1.25rem);
--font-size-18: clamp(1rem, 0.9618rem + 0.1912vw, 1.125rem);
--font-size-16: clamp(0.875rem, 0.8368rem + 0.1912vw, 1rem);
--font-size-14: 14px;

--section-block-padding: clamp(5rem, 4.2352rem + 3.8241vw, 7.5rem);
--section-inline-padding: clamp(1.25rem, 0.4852rem + 3.8241vw, 3.75rem);
}


@font-face {
font-family: "spantaran";
src: url(./fonts/spantaran/spantaran.ttf);
font-weight: 700;
}

@font-face {
font-family: "montserrat";
src: url(./fonts/montserrat/Montserrat-Italic.ttf);
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: "montserrat";
src: url(./fonts/montserrat/Montserrat-MediumItalic.ttf);
font-weight: 500;
font-style: italic;
}

@font-face {
font-family: "montserrat";
src: url(./fonts/montserrat/Montserrat-SemiBoldItalic.ttf);
font-weight: 600;
font-style: italic;
}

@font-face {
font-family: "montserrat";
src: url(./fonts/montserrat/Montserrat-BoldItalic.ttf);
font-weight: 700;
font-style: italic;
}

body{
margin: 0;
}

p{
margin: 0;
font-family: var(--montserrat-font);
}

h1, h2, h3, h4, h5, h6{
margin: 0;
font-family: var(--spantaran-font);
}

.full-section-spacing{
padding-block: var(--section-block-padding);
padding-inline: var(--section-inline-padding);
}

.grid-column-2{
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(1.875rem, 0.5366rem + 6.6922vw, 6.25rem);
}


.splash-section{
position: relative;
overflow: hidden;
height: 100vh;
max-width: 100%;
}

.splash-section .splash-container{
background-image: url(./photos/splash-banner-background-image.webp);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
margin: 2em;
display: flex;
justify-content: center;
align-content: stretch;
align-items: center;
flex-wrap: wrap;
height: -webkit-fill-available;
}

.splash-top-header{
display: grid;
grid-template-columns: 1fr 1fr;
align-content: center;
}

.splash__left-col-wrapper{
position: absolute;
left: -2rem;
top: -2em;
}

.splash__left-col{
background: var(--primary);
font-family: var(--montserrat-font);
font-size: var(--font-size-22);
color: var(--light-base);
font-weight: 600;
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
padding: 25px 40px 100px;
position: relative;
}

.splash__left-col-wrapper::before{
content:"";
width: 105%;
height: 100%;
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
background: var(--dark-base);
position: absolute;
}

.splash__left-col-wrapper p{
width: 60%;
transform: rotate(-2deg);
}

.splash-header__play-icon{
position: absolute;
top: 0;
right: 50%;
transform: translate(200%, 25%);
}


.splash__right-col-wrapper{
display: flex;
justify-content: end;
align-items: baseline;
}


.tripadvisor-col p{
font-family:var(--montserrat-font);
color: var(--dark-base);
font-size: 14px;
font-weight: 700;
width: 140px;
padding-right: 50px;
padding-top: 30px;
}

.tripadvisor-col{
display: inline-flex;
align-items: center;
justify-content: end;
position: absolute;
top: -2em;
right: -2em;
background: url(./photos/tripadvisor-background.svg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 329px;
height: 155px;
}


.splash-content-col{
display: flex;
justify-content: center;
}

.splash-content-col-wrapper{
background: var(--primary-secondary-gradient);
width: 500px;
height: 500px;
text-align: center;
display: grid;
gap: 2rem;
align-content: center;
justify-content: center;
border-radius: 700px;
padding: 1rem;
position: relative;
box-shadow: -10px 10px 0px #000000;
}

.title-style{
text-shadow: 4px 4px 0px #000;
-webkit-text-stroke-width: 0.02em;
-webkit-text-stroke-color: black;
}

.splash-banner-heading{
font-family: var(--spantaran-font);
color: var(--light-base);
font-size: var(--font-size-70);
line-height: 0.8em;
}

.splash-text{
width: 60%;
margin: 0px auto;
font-family:var(--montserrat-font);
color: var(--light-base);
font-size: var(--font-size-20);
font-weight: 500;
line-height: 1.1em;
}


.splash-youtube-icon{
background: var(--dark-base);
position: absolute;
transform: translate(20px, -120px);
height: 120px;
width: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.splash-inner-section{
max-width: 100%;
background: var(--primary-gradient-light);
padding-inline: var(--section-inline-padding);
padding-top: 40px;
padding-bottom: 15px;
clip-path: polygon(0 25%, 100% 12%, 100% 100%, 0% 100%);
}

.splash-inner-section-extra-wrapper{
position: relative;
overflow: hidden;
margin-top: -113px;
}

.splash-inner-section-extra-wrapper::before{
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
background: #000000;
clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 100%);
}

.container-wrapper{
width: 1440px;
max-width: 100%;
margin: auto;
}

.splash-inner-section-wrapper{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}

.splash-inner-col-1{
font-size: var(--font-size-30);
}

.splash-inner-col-2{
display: grid;
align-content: center;
gap:5px;
}

.splash-inner-column{
font-family: var(--montserrat-font);
font-weight: 400;
}

.icon-box{
display: inline-flex;
gap: 15px;
align-items: center;
text-decoration: none;
font-family: var(--montserrat-font);
font-weight: 600;
color: var(--dark-base);
font-size: var(--font-size-22);
}

.icon-box__icon{
display: flex;
position: relative;
}

.icon-box__icon img{
width: 22px;
}

.icon-box-col{
display:flex;
justify-content: end;
}

.icon-box-phone-no{
letter-spacing: 0.03em;
}

.header-navigation{
position: relative;
background: var(--dark-base);
height: 140px;
padding-inline: var(--section-inline-padding);
}

.header-navigation::before{
content: "";
height: 50px;
width: 100%;
background: var(--light-base);
position: absolute;
bottom: 0;
left: 0;
clip-path: polygon(0 100%, 100% 40%, 100% 100%, 0% 100%);
}

.primary-menu{
margin: 0;
padding: 0;
list-style: none;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}

.website-logo-image{
width: 400px;
max-width: 100%;
position: relative;
}

.navigation-column{
width: 36%;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}

.navigation-logo-column{
width: 28%;  
text-align: center;
position: relative;
}

.navigation-logo-column .menu-items{
margin-top: -110px;
}


.primary-menu .menu-item{
position: relative;
color: var(--light-base);
text-decoration: none;
font-family: var(--montserrat-font);
font-size: var(--font-size-18);
}

.primary-menu .menu-item::before{
content: "";
height: 1px;
width: 0%;
background: var(--light-base);
position: absolute;
bottom: -2px;
left: 0;
transition: 0.3s all;
}

.primary-menu .menu-item:hover::before{
width: 100%;
}

.website-logo::before{
display: none;
}

.about-us-section{
overflow: hidden;
}

.about-us-section-wrapper{
display: grid;
gap: 130px;
}

.about-us-image{
position: relative;
}

.about-us-image img{
width: 100%;
filter: drop-shadow(-10px 10px 0px var(--dark-base));
}

.heading-60{
font-size: var(--font-size-60);
color: var(--light-base);
line-height: 1em;
}

.body-text-18{
font-size: var(--font-size-18);
color: var(--primary-body-text);
line-height: 1.4em;
}

.about-us-content{
display: grid;
align-content: center;
gap: 30px;
}

.button-block{
display: block;
position: relative;
}

.button-block .cta-button{
color: var(--light-base);
font-size: var(--font-size-27);
font-family: var(--spantaran-font);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}

.button-block .cta-button .button-text{
position: absolute;
transform: translate(0px, -3px);
}

svg:not(:root){
overflow: visible !important;
}

.button-block .cta-button svg path{
filter: drop-shadow(0px 0px 0px black);
transition: 0.1s all;
}

.button-block .cta-button:hover svg path{
filter: drop-shadow(-4px 4px 0px black);
}

.divider-heading{
display: flex;
gap:30px;
justify-content: center;
align-items: center;
}

.divider-line{
width: 200px;
max-width: 100%;
height: 2px;
border-radius: 50px;
background: var(--dark-base);
}

.heading-50{
font-size: var(--font-size-50);
color: var(--light-base);
}

.caution-section-wrapper{
text-align: center;
display: grid;
gap: 30px;
}

.body-text-36{
position: relative;
color: var(--dark-base);
font-size: var(--font-size-36);
font-weight: 500;
}

.inline-link{
text-decoration: none ;
font-weight: 700;
color: var(--dark-base);
display: inline-block;
position: relative;
}

.inline-link::before{
content:"";
height: 2px;
width: 5%;
background: var(--dark-base);
position: absolute;
bottom: 0;
left: 0;
transition: 0.5s all;
}

.inline-link:hover::before{
width: 100%;
}

.caution-section{
background: var(--secondary);
padding: 80px 100px;
border-radius: 30px;
width: 80%;
max-width: 100%;
margin: 0px auto;
position: relative;
box-shadow: -10px 10px 0px #000000;
}

.caution-shape{
position: absolute;
top: 0;
left: 50%;
transform: translate(-45%, -149px);
z-index: 1;
}

.background-styling img{
filter: none;
}

.background-styling{
position: absolute;
bottom: -30%;
right: -30%;
}

.website-branding-logo{
position: absolute;
left: 0;
bottom: 0;
transform: translate(-100px, 80px);
}

.why-you-would-love-it-section{
background: var(--primary-secondary-gradient);
position: relative;
}

.why-you-would-love-it-section-wrapper{
display: grid;
gap: 50px;
}

.love-it-content-block-wrapper{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 100px;
align-items: center;
background: url(./photos/black-dot-splashing-ink.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.love-it-title-block{
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

.heading-70{
font-size: var(--font-size-70);
color: var(--light-base);
line-height: 1em;
}

.love-it-title-block .heading-70{
width: 40%;
}


.card-counter{
font-family: var(--montserrat-font);
font-size: var(--font-size-40);
color: var(--light-base);
font-weight: 700;
display: inline-flex;
justify-content: center;
align-items: center;
background: var(--dark-base);
height: 70px;
width: 70px;
border-radius: 50%;
position: absolute;
}

.card-counter-1{
left: 0;
top: 0;
transform: translate(-20px, -20px);
}

.card-counter-2{
right: 0;
top: 0;
transform: translate(35px, 65px);
}

.card-counter-3{
left: 0;
bottom: 0;
transform: translate(-30px, -10px);
}

.love-it-slider .card-counter-1,
.love-it-slider .card-counter-2,
.love-it-slider .card-counter-3{
left: 0;
bottom: 0 !important;
top: inherit;
transform: translate(-30px, -10px);
}



.card-icon{
display: inline-flex;
}

.love-it-card__01 .card-icon-box__cotent{
width: 85%;
}

.love-it-card__03 .card-icon-box__cotent{
width: 85%;
margin-left: auto;
}

.streetgo-karting__card-icon-box{
background: var(--icon-gradient-01);
height: 235px;
width: 235px;
box-shadow: -6px -4px 0 #000000;
}

.safety-and-compliance__card-icon-box{
height: 280px;
width: 280px;   
background: var(--icon-gradient-02);
box-shadow: 6px -4px 0 #000000;
}

.many-awesome-options__card-icon-box{
height: 250px;
width: 250px;   
background: var(--icon-gradient-03);
box-shadow: -6px 4px 0 #000000;
}

.card-icon-box{
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
position: relative;
}

.streetgo-karting__card-icon-box img{
width: 80px;
max-width: 100%;
}

.safety-and-compliance__card-icon-box img{
width: 100px;
max-width: 100%;
filter: brightness(0);
}

.many-awesome-options__card-icon-box img{
width: 110px;
max-width: 100%;
}

.card-icon-box__text,.card-icon-box__text .inline-link{
color: var(--light-base);
font-size: var(--font-size-18);
}

.card-icon-box__text .inline-link::before{
background: var(--light-base);
}

.love-it-card__01 .card-icon-box__cotent,
.love-it-card__02 .card-icon-box__cotent{
display: grid;
gap: 20px;
text-align: end;
}

.love-it-card__03 .card-icon-box__cotent{
display: grid;
gap: 20px;
}

.love-it-cards-wrapper{
position: relative;
}

.streetgo-karting__card-icon-box{
position: absolute;
right: -67%;
bottom: -120px;
}

.safety-and-compliance__card-icon-box{
position: absolute;
right: -135%;
top: -270px;
}

.many-awesome-options__card-icon-box{
position: absolute;
left: -105%;
bottom: -100px;
}


.love-it-content-block-wrapper .double-row{
display: grid;
gap: 100px;
}

.zigzag-divider{
position: relative;
height: 58px;
width: 100%;
background: url(./photos/zigzag-box-background.jpg);
background-position: center;
background-size: auto;
}

.why-you-would-love-it-section{
overflow: hidden;
}

.why-you-would-love-it-section::before,
.why-you-would-love-it-section::after{
content: "";
height: 60px;
width: 100%;
position: absolute;
top: -1px;
background: #FFFFFF;
left: 0;
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
}

.why-you-would-love-it-section::before{
width: 130%;
background: #000000;
}


.street-kart-options-section{
background: url(./photos/street-kart-options-background.webp);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
text-align: center;
overflow: hidden;
}

.street-kart-carousel-wrapper{
display: flex;
gap: 30px;
position: relative;
}

.carousel-card{
  width: 33.33%;
max-width: 100%;
position: relative;
background: #ffffff;
text-align: center;
padding: 30px 30px 40px;
border-radius: 34px 20px 20px 20px;
clip-path: polygon(1% 1%, 100% 0, 100% 100%, 0% 100%);
}

.carousel-card-wrapper{
display: grid;
gap: 20px;
}

.kart-carousel__image{
position: relative;
}

.kart-carousel__image img{
width: 100%;
max-width: 100%;
position: relative;
}

.kart-carousel__content{
display: grid;
gap: 10px;
}

.kart-carousel__content .heading-40{
font-size: var(--font-size-36);
}

.heading-40{
font-size: var(--font-size-40);
color: var(--light-base);
}

.street-kart-options-section-wrapper{
display: flex;
flex-wrap: wrap;
gap: 50px;
justify-content: center;
}

.street-kart-options-section .divider-heading{
justify-content: start;
}

.street-kart-options-section  .body-text-18{
text-align: left;
}

.street-kart-options-section .caution-section {
box-shadow: -12px 12px 0px #FFFFFF;
margin-top: 70px;
}


.street-kart-options-section::before, .street-kart-options-section::after {
content: "";
height: 60px;
width: 100%;
position: absolute;
bottom: -1px;
background: #FFFFFF;
right: 0;
transform: scale(-1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
}

.street-kart-options-section::before{
width: 130%;
background: #F8CF3A;
}

.street-kart-options-section{
padding-bottom: calc(var(--section-block-padding) + 60px);
}

.Reservations-block{
display: grid;
grid-template-columns: 1.5fr 1fr;
align-items: center;
gap: 100px;
}

.Reservations-column{
position: relative;
max-width: 100%;
}

.Reservations-column img{
position: relative;
width: 100%;
max-width: 100%;
}

.Reservations-column-2{
display: grid;
align-content: center;
gap: 30px;
}

.Reservations-content{
display: grid;
gap: 20px;
}

.list-content{
display: flex;
align-items: center;
gap: 20px;
font-family: var(--montserrat-font);
font-weight: 500;
color: var(--primary-body-text);
font-size: var(--font-size-18);
}

.list-counter{
display: inline-flex;
justify-content: center;
align-items: center;
height: 60px;
width: 60px;
border-radius: 50%;
background: var(--primary);
color: var(--light-base);
font-size: var(--font-size-22);
font-family: var(--montserrat-font);
font-weight: 600;
flex-shrink: 0;
}

.Reservations-section-wrapper{
display: grid;
gap: 100px;
}

.activity-flow-block{
grid-template-columns: 1fr 1fr;
}

.activity-flow-block img{
width: 100%;
filter: drop-shadow(-10px 10px 0px var(--dark-base));
}

.activity-flow-block .list-counter{
background: var(--icon-gradient-01);
}

.activity-flow-block-column .background-styling img{
filter: none;
}

.activity-flow-block-column .background-styling{
top: -20%;
right: -25%;
}

.Reservations-section{
overflow: hidden;
}

.street-kart-specs-section{
background: var(--icon-gradient-03);
overflow: hidden;
position: relative;
padding-top: calc(var(--section-block-padding) + 60px );
}

.street-kart-specs-block{
display: flex;
gap: 100px;
position: relative;
}

.kart-specs-content{
display: grid;
gap: 25px;
color: var(--light-base);
font-size: var(--font-size-16);
font-family: var(--montserrat-font);
}

.kart-specs-content .specs-title{
font-weight: 600;
}

.specs-list-col{
display: grid;
gap: 5px;
align-content: center;
position: relative;
}

.street-kart-specs-content-column{
display: grid;
gap: 50px;
align-content: center;
position: relative;
}


.street-kart-specs-slider-column{
position: relative;
width: 50%;
}

.street-kart-specs-slider-column .background-styling{
bottom: -24%;
right: 25%;
}

.double-button{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
}

.double-button .cta-button{
color: var(--dark-base);
}


.street-kart-specs-slider-column .slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.street-kart-specs-slider-column .prev, .street-kart-specs-slider-column .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 50%;
user-select: none;
background: #000000;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px !important;
}

.street-kart-specs-slider-column  .prev {
left: -3%;
}

.street-kart-specs-slider-column  .next {
right: -3%;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px){
.prev, .next,.text {font-size: 11px}
}

.street-kart-specs-slider-column .mySlides img{
filter: drop-shadow(-10px 10px 0px var(--dark-base));
}

.street-kart-specs-section::before, .street-kart-specs-section::after {
content: "";
height: 60px;
width: 100%;
position: absolute;
top: -1px;
background: #FFFFFF;
left: 0;
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
}

.street-kart-specs-section::before {
width: 130%;
background: #000000;
}

.kart-specs-title-block .heading-70{
width: 70%;
}

.memories-section-wrapper {
display: grid;
gap: 50px;
justify-content: center;
text-align: center;
}

.memories-section{
position: relative;
overflow: hidden;
background-image: linear-gradient(to bottom, rgb(255 255 255), rgb(117 19 93 / 0%)), url(./photos/unforgettable-memories-background.webp);
background-position: bottom;
background-size: 100% auto;
background-repeat: no-repeat;
}

.memories-section::before, .memories-section::after {
content: "";
height: 60px;
width: 100%;
position: absolute;
bottom: -1px;
background: #000;
left: 0;
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
transform: scale(-1);
}


.memories-section::after {
bottom: -1px;
background: linear-gradient(89deg, #ee7227 0% , #ef7e29 -4%, #ee6425 23.53%, #eb3d1f 67.98%);
height: 40px;
}

.memories-carousel .memories-title{
font-family: var(--spantaran-font);
font-size: var(--font-size-30);
color: var(--dark-base);
font-weight: 700;
}

.memories-carousel .memories-description{
font-size: var(--font-size-18);
color: var(--primary-body-text);
text-align: left;
line-height: 24px;
height: 180px;
overflow-y: scroll;
padding: 30px 25px 30px 0px;
position: relative;
}

.memories-carousel .card-content{
padding: 40px 30px 30px;
}

.memories-description::-webkit-scrollbar {
  width: 2px;
}

::-webkit-scrollbar-track {
  background: #EAEAEA;
}

::-webkit-scrollbar-thumb {
  background: #EB3D1F;
}

.memories-text{
position: relative;
}

.memories-text::before{
content: "";
height: 40px;
width: 100%;
position: absolute;
top: -1px;
left: 0;
background: linear-gradient(0deg, transparent, #f2f2f2, #f2f2f2);
z-index: 1;
}

.memories-text::after{
content: "";
height: 40px;
width: 100%;
position: absolute;
bottom: -1px;
left: 0;
background: linear-gradient(0deg, #f2f2f2, #f2f2f2, transparent);
z-index: 1;
}

.memories-carousel .image-content{
overflow: hidden;
}

.memories-carousel .image-content::before,
.memories-carousel .image-content::after{
content: "";
height: 30px;
width: 100%;
position: absolute;
bottom: 0;
background: #000000;
left: 0;
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
z-index: 1;
transform: scale(-1);
}

.memories-carousel .image-content::after{
background: #f2f2f2;
height: 20px;
width: 102%;
}

.memories-carousel .card:hover{
background: var(--secondary);
}

.memories-carousel .card:hover .card-content{
background: var(--secondary);
}

.memories-carousel .card:hover .image-content::after{
background: var(--secondary);
}

.memories-carousel .card:hover .memories-text::after{
background: linear-gradient(0deg, #f8cf3a, #f8d03f, transparent);
}

.memories-carousel .card:hover .memories-text::before{
background: linear-gradient(0deg, transparent, #f8cf3a, #f8d03f);
}

.street-kart-carousel .card{
background: transparent;
}

.street-kart-carousel .swiper-navBtn{
display: none;
}


.book-your-tour-section{
background: var(--primary-secondary-gradient);
position: relative;
overflow: hidden;
}

.book-your-tour-block{
display: grid;
grid-template-columns: 1fr 1fr;
gap:100px;
}

.tour-content-column{
display: grid;
align-content: center;
gap:30px;
}

.tour-title-block h2{
width: 80%;
}

.tour-title-content {
color: var(--light-base);
}

.tour-content-column .cta-button{
color: var(--dark-base);
}

.tour-form-column{
background: var(--light-base);
padding: 60px;
border-radius: 25px;
}

.form-input label{
display: none;
}

.form-input select,
.form-input input{
width: 100%;
max-width: 100%;
height: 70px;
border-radius: 50px;
padding: 0px 20px;
font-family: var(--montserrat-font);
font-size: var(--font-size-18);
outline: none !important;
border: none;
background: #F0F0F0;
}

.date-selector input{
width: 93.4%;
}

.tour-form{
display: grid;
gap: 20px;
}

.tour-form .cta-button .button-text input{
background: transparent;
padding: 15px 39px 15px;
border: none;
outline: none;
font-family: var(--spantaran-font);
color: var(--light-base);
font-size: var(--font-size-27);
cursor: pointer;
}

.tour-form .button-block{
text-align: center;
margin-top: 20px;
}

.selector-input select option:first-child{
display: none;
}

#selector-dropdown{
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='40' viewBox='0 0 24 24' width='40' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 50%;
}

.footer-section{
background: var(--dark-base);
position: relative;
overflow: hidden;
}

.footer-columns{
display: grid;
align-content: baseline;
gap: 100px;
grid-template-columns: 1fr 1fr 1fr;
}

.footer-col{
position: relative;
}

.footer-title-block .heading-30{
color: var(--light-base);
font-family: var(--spantaran-font);
font-size: var(--font-size-30);
line-height: 1em;
}

.footer-col .icon-box__icon{
height: 60px;
width: 60px;
background: var(--primary);
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 50px;
}

.footer-col .icon-box {
  display: inline-flex;
  gap: 15px;
  font-weight: 400;
  color: var(--light-base);
  font-size: var(--font-size-18);
}

.footer-col .icon-box img{
filter: contrast(0) brightness(100);
}

.footer-col .icon-box-col{
width: 100%;
justify-content: flex-start;
}

.footer-col .location-icon-box{
align-items: flex-start;
}


.footer-col{
display: grid;
gap: 50px;
align-content: start;
}

.footer-icon-box-col{
display: grid;
gap: 20px;
}

.footer-logo img{
width: 100%;
}

.footer-text{
color: var(--light-base);
font-size: var(--font-size-18);
line-height: 35px;
}

.footer-col-2{
align-content: center;
}

.footer-menu-section {
background: #141414;
padding-block: calc(var(--section-block-padding) - 80px);
overflow: hidden;
}

.footer-list-items{
list-style: none;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 20px;
position: relative;
}

.footer-list-items .footer-menu-item{
text-decoration: none;
color: var(--light-base);
font-family: var(--montserrat-font);
font-size: var(--font-size-18);
position: relative;
}

.footer-list-items .footer-menu-item::before{
content: "";
height: 1px;
width: 0%;
background: var(--light-base);
position: absolute;
bottom: -2px;
left: 0;
transition: 0.3s all;
}

.footer-list-items .footer-menu-item:hover::before{
width: 100%;
}

.copyright-section{
background: var(--dark-base);
padding-block: calc(var(--section-block-padding) - 90px);
}

.copyright-text{
color: var(--light-base);
font-size: var(--font-size-18);
font-family: var(--montserrat-font);
text-align: center !important;
}

.swiper-pagination{
display: none;
}

.love-it-slider .card-icon-box{
position: relative !important;
top: inherit !important;
left: inherit !important;
right: inherit !important;
bottom: inherit !important;
transform: translate(0, 0) !important;
box-shadow: -6px 4px 0 #000000;
}

.love-it-slider .card-icon-box__cotent{
  text-align: center !important;
}




/* Slideshow container */
.love-it-slider .slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.love-it-slider .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.love-it-slider .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.love-it-slider .prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.love-it-slider .text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  width: 100%;
  text-align: center;
}



/* The dots/bullets/indicators */
.love-it-slider .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.love-it-slider .active, .love-it-slider .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.love-it-slider .fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}



.love-it-slider .love-it-content-block-wrapper{
grid-template-columns: 1fr;
}

.love-it-slider .card-icon-box {
height: 160px !important;
width: 160px !important;
}

.love-it-slider .card-icon-box img {
width: 80px !important;
max-width: 100%;
}

.love-it-slider  .card-icon-box__cotent {
width: 100%;
}

.love-it-slider  .love-it-cards-wrapper{
display: grid;
justify-items: center;
text-align: center;
gap: 20px;
}

.love-it-slider-section .why-you-would-love-it-section-wrapper{
display: flex;
gap: 50px;
flex-wrap: wrap;
justify-content: center;
}

.love-it-slider-section .love-it-title-block .heading-70 {
width: 100%;
}

.love-it-slider-section .card-counter {
height: 55px;
width: 55px;
}

.love-it-slider-section .swiper-navBtn {
display: block !important;
}

.love-it-slider-section .swiper-button-prev{
left: 20px !important;
}

.love-it-slider-section .swiper-button-next{
right: 20px !important;
}

.love-it-slider-section .love-it-content-block-wrapper {
background-size: 240px;
background-position: top center;
}

.love-it-slider-section{
display: none;
}

.love-it-desktop-section{
display: block;
}

.mobile-website-logo{
display: none;
}

.memories-carousel-wrapper{
display: flex;
gap:30px;
}

.memories-carousel-wrapper .memories-card{
width: 33.33%;
max-width: 100%;
}


.memories-card{
background:#f2f2f2;
}


@media screen and (max-width: 1250px){

.love-it-content-block-wrapper {
gap:clamp(2.5rem, 2.1176rem + 1.912vw, 3.75rem);
grid-template-columns: 1.5fr 1fr 1.5fr;
}

.safety-and-compliance__card-icon-box {
height: 190px;
width: 190px;
}

.streetgo-karting__card-icon-box {
height: 180px;
width: 180px;
}

.many-awesome-options__card-icon-box {
height: 210px;
width: 210px;
}

.streetgo-karting__card-icon-box {
  right: -52%;
  bottom: 0px;
}

.safety-and-compliance__card-icon-box {
right: -95%;
top: -265px;
}


.many-awesome-options__card-icon-box {
bottom: 0px;
left: -80%;
}

}



@media screen and (max-width: 1100px){


.many-awesome-options__card-icon-box img {
width: 90px;
}

.safety-and-compliance__card-icon-box img {
width: 85px;
}

.many-awesome-options__card-icon-box {
height: 185px;
width: 185px;
}

.safety-and-compliance__card-icon-box {
height: 175px;
width: 175px;
}

.streetgo-karting__card-icon-box {
height: 160px;
width: 160px;
}

.safety-and-compliance__card-icon-box {
right: -95%;
top: -210px;
}

}


@media screen and (max-width: 1024px){

.splash-content-col-wrapper {
width: 380px;
height: 380px;
gap: 1.5rem;
}

.splash-youtube-icon {
transform: translate(10px, -80px);
height: 90px;
width: 90px;
}

.tripadvisor-col {
width: 275px;
height: 130px;
}

.tripadvisor-col p {
width: 130px;
padding-right: 25px;
padding-top: 22px;
}


.splash-youtube-icon img {
width: 50px;
}

.header-navigation {
height: 100px;
}

.grid-column-2 {
grid-template-columns: 1fr;
}

.caution-section {
padding: 50px 20px;
width: auto;
margin: 0px auto;
position: relative;
box-shadow: -5px 5px 0px #000000;
}

.love-it-title-block .heading-70 {
width: 100%;
}

.love-it-desktop-section{
display: none;
}

.love-it-slider-section{
display: block;
}

.love-it-cards{
margin-bottom: 50px;
}


.carousel-card{
height: auto !important;
}

.kart-carousel-card{
margin-bottom: 30px;
}

.street-kart-carousel-wrapper{
flex-wrap: wrap;
}
.carousel-card {
width: 100%;
max-width: 100%;
}


.street-kart-specs-block{
flex-wrap: wrap;
}


.Reservations-block {
grid-template-columns: 1fr;
gap: 50px;
}

.Reservations-column-1{
grid-row: 2;
}
.Reservations-column-2{
grid-row: 1;
}

.Reservations-title-block{
text-align: center;
}

.street-kart-specs-column{
width: 100%;
}

.book-your-tour-block {
grid-template-columns: 1fr;
gap: 50px;
}

.memories-carousel-wrapper{
flex-wrap: wrap;
}

.memories-carousel-wrapper .memories-card{
width: 100%;
}


.footer-columns {
gap: 50px;
grid-template-columns: 1fr;
}

.footer-col-2{
grid-row: 1;
}

.footer-col-1{
grid-row: 2;
}

.footer-list-items .footer-list-item{
width: 100%;
}

.footer-menu-list{
columns: 2;
}

.footer-logo{
text-align: center;
}

.footer-logo img {
width: 75%;
}

.footer-menu-section {
padding-block: calc(var(--section-block-padding) - 50px);
}

.copyright-section {
padding-block: calc(var(--section-block-padding) - 50px);
}

.primary-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

.navigation-column {
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
gap: 10px;
}

.navigation-column  .menu-items {
width: 100%;
}

.navigation-logo-column {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 20px);
}

.navigation-logo-column .menu-items {
margin-top: 0;
}

.website-logo-image {
width: 200px;
}

}





@media screen and (max-width: 724px){


.mobile-website-logo{
display: block;
}

.mobile-website-logo{
width: 40%;
position: relative;
}

.mobile-website-logo img{
width: 100%;
position: relative;
margin-top: -15px;
}

.splash-content-col-wrapper{
width: 320px;
height: 320px;
gap: 1rem;
box-shadow: -5px 5px 0px #000000;
}

.splash-text {
width: 80%;
}

.splash-top-header {
grid-template-columns: 1fr;
}

.splash__left-col {
padding: 30px 20px 80px;
}

.splash-header__play-icon {
transform: translate(170%, 15%);
}

.tripadvisor-col {
top: 4em;
right: 0em;
width: 230px;
height: 110px;
}

.tripadvisor-col p {
font-size: 10px;
font-weight: 700;
width: 102px;
padding-right: 30px;
padding-top: 18px;
transform: rotate(-2deg);
}

.splash-inner-section-extra-wrapper {
margin-top: -139px;
}

.splash-youtube-icon img{
width: 50px;
}

.splash-youtube-icon {
transform: translate(20px, -75px);
height: 90px;
width: 90px;
}

.navigation-logo-column .menu-items {
margin-top: 0px;
}

.header-navigation::before{
display: none;
}

.splash-inner-section-wrapper {
grid-template-columns: 1fr;
}

.splash-inner-column {
text-align: center;
}

.splash-inner-col-2{
margin-top: 10px;
justify-content: center;
}

.grid-column-2 {
grid-template-columns: 1fr;
}

.divider-line , .website-branding-logo{
display: none;
}

.caution-section {
padding: 50px 20px;
width: auto;
margin: 0px auto;
position: relative;
box-shadow: -5px 5px 0px #000000;
}

.background-styling {
bottom: -29%;
right: 0%;
width: 80%;
}

.about-us-content {
text-align: center;
}

.caution-shape {
transform: translate(-45%, -106px) scale(.4);
}


.activity-flow-block-column .background-styling {
top: 40%;
right: -6%;
}

.street-kart-specs-block {
grid-template-columns: 1fr;
gap: 50px;
}

.kart-specs-title-block .heading-70 {
width: 100%;
}

.street-kart-specs-content-column {
text-align: center;
}

.double-button {
gap: 20px;
justify-content: center;
}

.tour-form-column {
padding: 40px 20px;
border-radius: 20px;
}

.date-selector input {
width: 88.4%;
}

.memories-carousel .card-content {
padding: 30px 20px 30px;
background: #f2f2f2;
margin-top: -1px;
z-index: 1;
}


.street-kart-specs-slider-column .background-styling img{
width: 80%;
}

.street-kart-specs-slider-column .background-styling {
bottom: -90px;
right: 25%;
}

.street-kart-options-section .caution-section {
box-shadow: -8px 8px 0px #FFFFFF;
margin-top: 30px;
}

.street-kart-specs-slider-column {
width: 100%;
}

.book-your-tour-section {
background: linear-gradient(179deg, #EB3D1F 24.53%, #F0912C 84.98%);
}

.memories-section::after {
background: linear-gradient(180deg, #eb3d1f 23.53%, #eb3d1f 67.98%);
}

.tour-content-column{
text-align: center;
justify-content: center;
}

.tour-title-block h2 {
width: 100%;
}


.header-navigation{
height: 80px;
}

}


