@import url("buttons.css");
@import url("bouncer.css");
@import url("page-header.css");
@import url("inputs.css");
@import url("dance-class-card.css");

@font-face {
    font-family: 'Playlist Script';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Playlist Script.woff') format('woff');
}

@font-face {
    font-family: 'Futura Maxi';
    src: url('fonts/Futura Maxi CG Bold Regular.otf');
}


@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-VariableFont_wght.ttf');
}

:root {
    --blue: #00ACDC;
    --blue-dark: #0084A8;
    --blue-light: #0FCBFF;
    --pink: #F72279;
    --pink-dark: #AC064A;
    --pink-light: #F95397;
    --pink-super-light: #F7227915;
    --purple: #812990;
    --purple-dark: #5C1D67;
    --purple-light: #A434B7;
    --green: #00C100;
    --black: #333333;
    --grey: #333333;
    --light-grey: #F7f7f7;
    --gradient: linear-gradient(323deg, #812990 0%, #F72279 100%);
    --success: #1FDB32;
    --error: #D70000;
    --big-shadow: 0px 8px 64px 16px rgba(0, 0, 0, 0.20);
    --card-shadow: 0px 4px 32px 8px #EDEDED;
    --card-shadow-hover: 4px 8px 24px 8px rgba(0, 0, 0, 0.2);
    --button-shadow: 4px 4px 16px 0px rgba(48, 29, 36, 0.15);
    --button-corners: 50px;
    --card-corners: 32px;
    --card-padding: 24px 32px;
    --body-font: 'Raleway', Arial, sans-serif;
    --futura-heading-font: 'Futura Maxi', Arial, sans-serif;
    --letter-spacing-body: 0.1px;
    --line-height-body: 24px;
    --heading-colour: #333333;
    --body-colour: #333333;
}

@media (min-width: 1200px) {
    .right-container {
        padding-right: calc(calc(100% - 1140px ) / 2);
    }
}

@media (min-width: 1400px) {
    .right-container {
        padding-right: calc(calc(100% - 1320px ) / 2);
    }
}

@media (min-width: 1650px){
    .container {
        max-width: 1400px;
    }

    .right-container {
        padding-right: calc(calc(100% - 1400px ) / 2);
    }
}

@media (min-width: 1900px) {
    .container {
        max-width: 1650px;
    }

    .right-container{
        padding-right: calc(calc(100% - 1650px ) / 2);
    }
}

html {
  font-size: 1rem;
  scroll-behavior: smooth;
}

html {
  position: relative;
  min-height: 100%;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}

.card {
    border: none;
    border-radius: var(--card-corners);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Futura Maxi',sans-serif;
    color: var(--black);
}

/*.playlist.h2.heading {
    font-size: 3rem;
}*/

.oneRem {
    font-size: 1rem;
}

@media (min-width: 992px){
    .oneRem {
        font-size: 1.25rem;
    }
}

.link-primary {
    color: var(--pink);
}

.link-primary:hover, .link-primary:focus {
    color: var(--pink-dark);
}

.raleway {
    font-family: Raleway !important;
}

/*@media (min-width: 992px) {
    .hero-section h1, .hero-section-4 h1, .hero-section-5 h1 {
        font-size: 2.5rem;
    }
}*/
/*p {
    font-size: 1.25rem !important;
}*/

.mobile-img{
    width: 100px;

}

@media (max-width: 576px) {
    /*.hero-section h1, .hero-section-4 h1, .hero-section-5 h1, .hero-section-6 h1 {
        font-size: 2rem;
    }*/
    }

    @media (min-width: 577px) {
        /*.hero-section h1, .hero-section-4 h1, .hero-section-5 h1, .hero-section-6 h1 {
            font-size: 2.5rem;
        }*/
    }


    @media (min-width: 992px) {
        /*.hero-section h1, .hero-section-4 h1, .hero-section-5 h1, .hero-section-6 h1 {
            font-size: 3rem;
        }*/

        
    }

    @media (min-width: 1200px) {
        /*.hero-section h1, .hero-section-4 h1, .hero-section-5 h1, .hero-section-6 h1 {
            font-size: 3.5rem;
        }*/
        p, li, .accordion-body {
            font-size: 18px;
        }
    }

    @media (min-width: 1400px) {
      /*  .hero-section h1, .hero-section-4 h1, .hero-section-5 h1, .hero-section-6 h1 {
            font-size: 5rem;
        }*/

      /*  p {
            font-size: 1.25rem;
            letter-spacing: var(--letter-spacing-body);
            line-height: var(--line-height-body);
        }*/

        /* .hero-section p, .hero-section-4 p, .hero-section-5 p {
            font-size: 1.1rem !important;
            letter-spacing: var(--letter-spacing-body);
            line-height: 1.4rem;
        }*/

        .h1, h1 {
            font-size: 3rem;
        }

        .h2, h2 {
            font-size: 2.5rem;
        }

        .h3, h3 {
            font-size: 2rem;
        }

        .h4, h4 {
            font-size: 1.5rem;
        }

        .playlist.h2.heading {
            font-size: 3rem;
        }
    }

    @media (min-width: 1650px) {
        .hero-section h1, .hero-section-4 h1, .hero-section-5 h1, .hero-section-6 h1 {
            font-size: 4.5rem;
        }
    }


    @media (min-width: 1900px) {
        /*.hero-section h1, .hero-section-4 h1, .hero-section-5 h1, .hero-section-6 h1 {
            font-size: 5rem;
        }*/

        /*.hero-section p, .hero-section-4 p, .hero-section-5 p {
            font-size: 1.2rem !important;
            line-height: 1.6rem;
        }*/
        /*    .h1, h1 {
        font-size: 3.5rem;
    }

    .h2, h2 {
        font-size: 3rem;
    }

    .h3, h3 {
        font-size: 2.5rem;
    }

    .h4, h4 {
        font-size: 2rem;
    }*/
    }

    h1 .playlist, h2.playlist, h3.playlist, h4.playlist {
        font-family: 'Playlist Script',sans-serif;
    }

    .futura {
        font-family: 'Futura Maxi' !important;
    }

    .playlist {
        font-family: 'Playlist Script' !important;
    }

    .montserrat {
        font-family: var(--body-font) !important;
    }


    .font-blue {
        color: var(--blue) !important;
    }

    .font-purple {
        color: var(--purple) !important;
    }

    .font-pink {
        color: var(--pink) !important;
    }

    .font-black {
        color: var(--black) !important;
    }

    .font-grey {
        color: var(--grey) !important;
    }

    p {
        font-family: var(--body-font);
        color: var(--grey);
        
    }

    .small-box-container {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .box-container {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .big-box-container {
        padding-top: 160px;
        padding-bottom: 160px;
    }

    @media (min-width: 992px){
        .box-container {
            padding-top: 8rem;
            padding-bottom: 8rem;
        }
    }

    .big-top {

    }

    .text-white-light {
        color: #ffffff50;
    }

    .text-pink {
        color: var(--pink);
    }

.heading-underline-svg {
    width: 100%;
    max-width: 400px;
    transform: translateY(-16px);
}

.section-heading-text-container {
    /*position: relative;*/
    height: 60px;
    width: min-content;
}

.section-heading-title.futura {
    text-transform: uppercase;
    font-size: 24px;
}


.section-title {
    position: relative;
}

    .section-heading-title {
        
    }

    .section-heading {
    }

.header-container {
    padding-top: 24px; 
    padding-bottom: 100px; 
}

.shadow-heading {
    text-transform: uppercase;
    /*position: absolute;*/
    color: #00000010;
    transform: translateX(-6px);
    transition: 1.5s ease-in-out;
    transform-origin: 0% 100%;
    z-index: -1;
    /*transform: translateY(-80px) translateX(-5px);*/
}

    .shadow-heading-container:has(.shadow-heading.is-visible) {
        transform: scale(1.5) translate(-3px, -4px);
        width: 12px;
    }

    @media (max-width: 1399px) {
        .shadow-heading.is-visible {
            /*font-size: 72px;*/
            bottom: 16px;
            left: -5px;
        }
    }

    @media (min-width: 1400px) {
        .shadow-heading.is-visible {
            /*font-size: 96px !important;*/
            bottom: 0px;
            left: -5px;
        }
    }

/*    @media (min-width: 1900px) {
        .shadow-heading.is-visible {
            font-size: 126px !important;
            bottom: -14px;
            left: -8px;
        }
    }*/

    .shadow-heading.white {
        color: rgba(255,255,255,.1);
    }

    .shadow-heading.center {
        margin-left: auto;
        margin-right: auto;
        transform-origin: 50% 100% !important;
        text-align: center;
        /*transform: translateY(-80px) translateX(0px) !important;*/
    }

    .underline-title > * h1, .underline-title > * h2, .underline-title > * h3, .underline-title > * h4 {
        margin-bottom: 0;
    }

    .title-underline-large {
        width: 100px;
        height: 8px;
        background: var(--pink);
    }

    .title-underline-medium {
        width: 75px;
        height: 6px;
        background: var(--pink);
    }

    .title-underline-small {
        width: 50px !important;
        height: 4px;
        background: var(--pink);
        transform: translateY(-8px);
    }

    .title-underline-medium.white {
        background: #fff !important;
    }

    .title-underline-medium.blue {
        background: var(--blue) !important;
    }


   

    .title-underline-medium {
        transform: translateX(-100%) translateY(-10px);
        opacity: 0;
        transition: .3s ease-in-out;
        transition-delay: .8s;
    }

        .title-underline-medium.is-visible {
            transform: translateX(0%) translateY(-10px);
            opacity: 1;
        }

@media (min-width:992px) {

    .fade-container.is-visible .fade-in {
        animation: fadeIn 1s cubic-bezier(.17,.12,0,.99) forwards;
    }

    .fade-in {
        transform: translateY(500px);
        opacity: 0;
    }


    .fade-in-0 {
        animation-delay: .3s !important;
    }

    .fade-in-1 {
        animation-delay: .5s !important;
    }

    .fade-in-1 {
        animation-delay: .5s !important;
    }

    .fade-in-2 {
        animation-delay: .7s !important;
    }

    .fade-in-3 {
        animation-delay: .9s !important;
    }

    .fade-in-4 {
        animation-delay: 1.1s !important;
    }

    .fade-in-5 {
        animation-delay: 1.3s !important;
    }

    .fade-in-6 {
        animation-delay: 1.5s !important;
    }

    .fade-in-7 {
        animation-delay: 1.7s !important;
    }

    .fade-in-8 {
        animation-delay: 1.9s !important;
    }

    @keyframes fadeIn {
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

    /*footer {
        margin-top: 80px;
    }*/

    @media (min-width: 992px){
        .text-box-left {
            padding-right: 32px;
        }

        .text-box-right {
            padding-left: 32px;
        }
    }

    

    @media (min-width:1650px) {
        /*    .text-box {
        max-width: 600px;
    }*/

        .text-box-left {
            padding-right: 64px;
        }

        .text-box-right {
            padding-left: 64px;
        }
    }

  /*  @media (min-width:1900px) {
        .text-box-left {
            padding-right: 80px;
        }

        .text-box-right {
            padding-left: 80px;
        }
    }*/

    .header-img {
        border-radius: var(--card-corners);
    }

   

    .text-blue {
        color: var(--blue);
    }

    .glider-dot.active {
        background: var(--pink);
    }

    .no-bottom {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .bottom {
        padding-bottom: 80px;
    }

    .big-bottom {
        margin-bottom: 240px !important;
    }

    .wave {
        width: 105%;
        z-index: 5;
        position: absolute;
    }

    .arrow-btn {
        background: none;
        border: none;
    }

  



.text-box {
    /*max-width :600px;*/
}

    .text-24 {
        font-size: 24px !important;
    }

    .gap-8 {
        gap: 64px;
    }

    .span-dance {
        color: var(--pink) !important;
    }

.span-fit {
    color: var(--purple) !important;
}



@media (max-width: 991px){
    .adj-img {
        width:95% !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/*@media (min-width: 992px) {
    .adj-img {
        width: 95% !important;
    }
}*/

.random {
    display: none;
}
@media (min-width: 768px) {
    .random {
        display: block;
    }
}

.sub-page-heading {
    background: url(../assets/images/bg-pattern.svg);
    background-size: auto;
    background-position: left top;
    background-repeat: repeat;
    padding: 80px 0;
    
}

    .sub-page-heading h1 {
        color: #ffffff;
        text-transform: uppercase;
    }

    

    @media (max-width: 1199px){
        .basic-img {
            width: 100%;
        }
    }

@media (min-width: 1200px) {
    .basic-img {
        width: 550px;
    }
}

@media (min-width: 1400px) {
    .basic-img {
        width: 600px;
    }
}


@media (min-width: 1650px) {
    .basic-img {
        width: 650px;
    }
}

/*@media (min-width: 1900px) {
    .basic-img {
        width: 700px;
    }
}
*/
.sub-page-heading-2 {
    position:relative;
    transform: translateY(-80px);
    padding: 160px 0 80px 0;
}

    .sub-page-heading-2.about-page {
       /* background: url(../assets/images/about/header.svg);*/
        background: url(../assets/images/bg-pattern.svg);
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
    }

.sub-page-heading-2 h1 {
    text-transform: uppercase;
}

/*.sub-page-heading-2-img {
    position:absolute;
    width:100%;
    top:0;
    right:0;
}*/





 

.class-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 6px;
    margin-top: 4px;
}

    .class-dot.blue {
        background: var(--blue);
    }

    .class-dot.pink {
        background: var(--pink);
    }

    .class-dot.purple {
        background: var(--purple);
    }
td > * {
    float: left;
}

.upper {
    text-transform: uppercase;
}

.gap-64 {
    gap: 64px;
}



.faq-img {
    width:350px;
    height:679px;
}

.random-testimonial {
    background: var(--pink);
    position:relative;

}

@media (max-width: 991px) {
    .random-testimonial {
        padding-top: 100px;
        padding-bottom: 100px;
    }
        .random-testimonial .test-quote {
            width: 100px !important;
            left: 16px;
            top: -50px !important;
        }
}

@media (min-width: 992px){
    .random-testimonial {
        padding-top:160px;
        padding-bottom:160px;
    }

}

/*@media (min-width: 1900px) {
    .random-testimonial {
        padding-top: 260px;
        padding-bottom: 260px;
    }
        .random-testimonial .test-quote {
            width: 260px !important;
            left: 16px;
            top: -160px !important;
        }
}
*/
.random-testimonial .container {
    position: relative;
}

.random-testimonial h3 {
    z-index:2;
}

.random-testimonial .test-quote {
    width: 160px;
    position: absolute;
    z-index: 0;
    color: #FF3386;
    left: 16px;
    top:-80px;
}

    .random-testimonial .bottom-corner {
        width: 80px;
        bottom:0;
        right:0;
        position: absolute;
        width: 25%;
    }

.cta-2 {
    padding-top: 260px;
    padding-bottom: 260px;
    background: url(../assets/images/cta-2-bg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
}

@media (max-width: 991px){
    .cta-2 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (max-width: 1899px) {
    .cta-2 {
        padding-top: 160px;
        padding-bottom: 160px;
    }
}

a {
    color: var(--blue);
}


.flex-same {
    flex: 1 1 0px;
}

@media (min-width: 1400px){
    .flex-xxl-same {
        flex: 1 1 0px;
    }
}


.bg-light-grey {
    background: var(--light-grey);
}


.bg-pink{
    background: var(--pink);
}

.corners {
    border-radius: var(--card-corners);
}

@media (min-width:992px) {
    .header-img {
        width: 450px;
    }
}

@media (min-width:1200px) {
    .header-img {
        width: 600px;
    }
}

@media (min-width:1400px) {
    .header-img {
        width: 700px;
    }
}

@media (min-width:1650px) {
    .header-img {
        width: 800px;
    }
}

.tick-container {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    background: var(--blue);
}

    .tick-container svg {
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
    }

/*    .tick-container.blue {
        background: var(--blue);
    }

    .tick-container.pink {
        background: var(--pink);
    }

    .tick-container.purple {
        background: var(--purple);
    }*/

.dance-fit-list {
    padding-left: 0 !important;
}

.heading-line {
    height:2px;
    width:64px;
    background: var(--pink);
}

.heading-line.white {
    background: #ffffff !important;
}

h2.oneRem{
    margin-bottom:0;
}

@media(max-width:992px){
    .set-img {
        width:100%;
    }
}

@media(max-width:991px) {
    .set-img {
        width: 100%;
    }
}

@media(min-width:992px) {
    .set-img {
        max-width: 100%;
        width: 100%;
    }
}

@media(min-width:1400px){
    .page-heading-h2{
        font-size:3.5rem;
    }

   
}

@media(min-width:1200px) {
    .page-heading-h2 {
        font-size: 3rem;
    }
}


    .page-heading-h2 {
        font-size: calc(2.325rem + .9vw);
    }

.bg-pink-gradient {
    background: linear-gradient(180deg, #F72279 41.58%, #E00B5D 100%);
}

/*.accordion-button:not(.collapsed) {
    box-shadow: 0px 0px 16.744px 8px rgba(247, 34, 121, 0.25);
}*/




.font-400 {
    font-weight: 400 !important;
}



.doodle{
    position: absolute;
}

h1,h2,h3,h4,h5,h6 {
    font-weight:400;
}

.width-100 {
    width:100%;
}

.doodle-animate {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition:.8s ease-in-out;
}

    .doodle-animate.is-visible {
        stroke-dashoffset: 0;
    }

.underline-doodle {
    width:100%;
    position:absolute;
}

.animate-doodle path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: .8s ease-in-out;
    transition-delay: 1.3s;
}

.animate-doodle.is-visible path {
    stroke-dashoffset: 0;
}

    .animate-doodle.is-visible path:nth-child(2) {
        transition-delay: 1.5s;
    }

    .animate-doodle.is-visible path:nth-child(3) {
        transition-delay: 1.9s;
    }

.underline.animate path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: .8s ease-in-out;
    transition-delay:.5s;
}

.underline.animate.observe path {
    stroke-dashoffset: 0;
}

    .underline.animate.observe path:nth-child(2) {
        transition-delay: 1s;
    }

.heart-animate {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: 1.5s ease-in-out;
    transition-delay: 1s;
}

.test-heart {
    width: 40px;
    left: -40px;
    top: -40px;
}

.heart-animate.is-visible {
    stroke-dashoffset: 0;
}

.modal-content {
    background: #333333;
    padding: 24px 32px;
    border-radius: 32px;
    border: none !important;
    box-shadow: 0 4px 16px 8px #00000025;
}

.modal-backdrop.show {
    backdrop-filter:blur(20px);
    opacity:1 !important;
    background: #00000050 !important;
}

@media (min-width: 768px){
    #getInTouchModal .modal-dialog {
        max-width: 700px;
        margin: 1.75rem auto;
    }

    #getInTouchModal .modal-content {
        padding: 24px 32px;
    }
}

@media (min-width: 1400px) {
    #getInTouchModal .modal-dialog {
        max-width: 1000px;
        margin: 1.75rem auto;
    }
}

.htmx-indicator:not(.htmx-request) {
    display: none !important;
}

.get-in-touch-form-container:has(.htmx-indicator.htmx-request) #get-in-touch-form {
    display: none !important;
}

.booking-container {
    width:100%;
}

@media (min-width: 992px){
    .booking-container {
        max-width: 700px !important;
    }
}

.top-container {
    margin-top: 40px;
    margin-bottom: 40px;
}

.view-map-btn:not(.grid-detail) {
    text-transform: none !important;
    text-decoration: underline;
    font-family: var(--body-font);
    color: var(--pink);
    padding:2px 0;
    border-radius: 0 !important;
}

    .view-map-btn:hover {
        color: var(--pink);
    }