@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
body{   
    font-family: 'Hind', sans-serif;
    padding-top: 100px;
    background-color: #faf7f4;
    color:#444444;
    font-size: 1.1rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 4px;
    padding-left: 4px;
}

.btn-primary {
    color: #fff;
    background-color: #8ec760;
    border-color: #8ec760;
}

.btn-primary:hover {
    background-color: #6d9948;
    border-color: #6d9948;
}

/* ============================================================= 
   ======================= Navbar ============================== 
   ============================================================= */

.navbar{
    background-color: #faf7f4;
    padding: .8rem 1rem;
}

.navbar.shrink{
    border-bottom:2px solid #e8e8e8;

}

.navbar.shrink .logo{
    width: 120px;
    transition: .25s;
}

.logo{
    width: 200px;
    position: absolute;
    transition: .25s;
    top: 5px;
}

.navbar-expand-lg .navbar-collapse {
    flex-direction: column;
    margin-top: 14px;
}

.nav-link {
    padding: .5rem 1rem .2rem;
}

.nav-item a{
    text-transform: uppercase;
    color: #212121;
    font-weight: 600;
}

.nav-item.dropdown a.dropdown-item{
    font-weight: 400;
}

.nav-item.active a{
    color: #B7093A;
}

.nav-item.active{
    border-bottom: 4px solid #B7093A;
}

.navbar-nav,
.navbar-contact-details{
    margin-left:auto;
}

.navbar-number{
    border-right:2px solid #cccccc;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.navbar-number h6{
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-bottom: 0;
    font-weight: 200;
}

.navbar-number h6 span{
    font-weight: 700;
}

.navbar-social ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-social-item{
    width:30px;
    opacity: .2;
    margin-left:8px;
}

.navbar-social-item:hover{
    opacity: .4;
    cursor: pointer;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}
.dropdown > .dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

/* ============================================================= 
   ===================== Jumbotron ============================= 
   ============================================================= */

.jumbotron.home{
    background-color: #121212;
    overflow: hidden;
    padding: 0;
    -webkit-clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 80%);
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 80%);
}

.jumbotron{
    background-color: #121212;
    overflow: hidden;
}

.cd-hero__content,
.cd-hero__content h2{
    text-align: left !important;
}

.cd-hero__content h2{
    text-transform: uppercase;
    font-weight: 800;
}

.cd-hero__content h2 span{
    color: #B7093A;
}

.cd-hero__content h2,
.cd-hero__content p {
    margin: 0;
}

.cd-hero__content.cd-hero__content--half-width:first-of-type {
    left: 20%;
}

.cd-hero__btn {
    font-size: 1rem;
}

.cd-hero__btn.cd-hero__btn--secondary {
    background-color: #333333;
}

.cd-hero__btn:hover {
    font-size: 1rem;
    color: #B7093A;
    text-decoration: none;
}


/* ============================================================= 
   ================== Classes Section ========================== 
   ============================================================= */

   .classesSection{
    margin-top: -200px;
    position: relative;
}

.classesSection .backshape{
    background-color: #e8e8e8;
    position: absolute;
    height: 80%;
    width: 100%;
    bottom: 0;
    -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
    z-index: -10;
}

.main_classes{
    width:25%;
    flex: 0 0 25%;
    margin-bottom:1rem;
    padding-right: .5rem;
    padding-left: .5rem;
}

.classContainer{
    background-color: #212121;
    color: #ffffff;
    padding: 0;
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: column;
}

.classContainer:hover{
    box-shadow: 0 0 0 4px #212121; 
}

.second .classContainer{
    padding: 20px 0 0;
}

.class-heading{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.classImg{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 70%);
}

.classContent{
    padding: 20px;
}

.classContent h4{
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.1rem;
}

.classFive h6,
.classSix h6,
.classSeven h6,
.classEight h6{
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1rem;
}

.classMore{
    padding: 0 20px 20px;
    margin-top: auto;
}

.classMore a{
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8rem;
    color: #ee1e23;
}


/* ============================================================= 
   ================== Call To Action =========================== 
   ============================================================= */

.ctaSection{
    padding: 3rem 0;
    /* background-color: #e8e8e8; */
}
.ctaContainer{
   background-color: #B7093A; 
   padding: 44px 24px;
   text-align: center;
   color: #ffffff;
   text-transform: uppercase;
}
.ctaContainer:hover{
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 1); 
}
.ctaContainer h2{
    font-weight: 700;
}
.ctaContainer h6 span{
    font-weight: 700;
}

/* ============================================================= 
   ======================= Info ================================ 
   ============================================================= */

    .infoSection{
        padding: 0 0 20px;
       position: relative;
    }

    .infoSection .backshape{
        background-color: #e8e8e8;
        position: absolute;
        height: 90%;
        width: 100%;
        top: 0;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
        z-index: -10;
    }

    .infoSection .heading{
       text-align: center;
       padding: 0 0 54px;
       text-transform: uppercase;
       position: relative;
    }

    .infoSection .heading h2:before{
        content: '“';
        font-size: 6rem;
        font-family: 'Noto Sans JP', sans-serif;
        position: absolute;
        opacity: .05;
        left: 3%;
        top: -70%;
    }

    .infoSection .heading h2:after{
        content: '”';
        font-size: 6rem;
        font-family: 'Noto Sans JP', sans-serif;
        position: absolute;
        opacity: .05;
        right: 3%;
        top: -70%;
    }

    .infoSection .heading h2{
       font-weight: 200;
    }

    .infoSection .heading h2 span{
        color: #B7093A; 
        font-weight: 800;
    }

    .infoSection img{
        width:90%;
    }    

    .infoSection h4{
        text-transform: uppercase;
        font-weight: 700;
        color: #B7093A;
    }

    .infoContent{
       background-color: #ffffff;
       padding: 24px;
       box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
    }

   /* ============================================================= 
    ======================= Bookings ============================== 
    ============================================================= */
    .stageSection{
        position: relative;
    }

    .stageSection .backshape {
        background-color: #e8e8e8;
        position: absolute;
        height: 80%;
        width: 100%;
        bottom: 0;
        -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
        z-index: -10;
    }

    .class-price-options{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .class-price-options .nav-item{
        width:19%;
        text-align: center;
    }

    .class-price-options .nav-item a {
        background-color:#e4e4e4;
        border-radius: 0;
        padding: 1rem 1rem;
        font-size: 1rem;
    }

    .class-price-options .nav-link.active, 
    .class-price-options .show>.nav-link {
        background-color: #B7093A;
    }

    h2.tab-heading{
        text-align: center;
        color: #B7093A;
        padding:1rem 0;
    }

    .bookingIframeSection{
        position: relative;
        padding-top:1.5rem;
        padding-bottom:1.5rem;
    }

    .bookingIframeSection .backshape {
        background-color: #e8e8e8;
        position: absolute;
        height: 90%;
        width: 100%;
        top: 0;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
        z-index: -10;
    }

    .card-header{
        background-color:#2a2a2a;
        color: #ffffff;
        text-transform: uppercase;
        font-weight: 700;
    }

    .small, small {
        font-size: 70%;
    }

    .card-body{
        display: flex;
        flex-direction: column;
    }

    .card-body .btn{
        align-self: flex-end;
        margin-top: auto;
    }

    #paymentSection{
        display: none;
        background-color: #e8e8e8;
        padding-bottom: 2rem;
    }
    
    .paymentContainer,
    .bookingIframe{
        width: 100%;
        padding: 2rem;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: .25rem;
        margin: auto;
        position: relative;
    }
    
    .paymentClose{
        position: absolute;
        top: 12px;
        right:20px;
        cursor: pointer;
    }
    
    .paymentClose i{
        font-size: 2rem;
    }

    /* ============================================================= 
    ====================== Contact Page ============================ 
    ============================================================= */


    .contact-form{ 
        margin-top:15px;
    }

    .contact-form .textarea{ 
        min-height:220px; 
        resize:none;
    }

    .form-control{ 
        box-shadow:none; 
        border-color:#eee; 
        height:49px;
    }

    .form-control:focus{ 
        box-shadow:none; 
        border-color:#00b09c;
    }

    .form-control-feedback{ 
        line-height:50px;
    }

    .main-btn{ 
        background:#00b09c; 
        border-color:#00b09c; 
        color:#fff;
    }

    .main-btn:hover{ 
        background:#00a491;
        color:#fff;
    }

    .form-control-feedback {
        line-height: 50px;
        top: 0px;
    }

    /* ============================================================= 
    ========================= Team ================================= 
    ============================================================= */

    .teamSection{
        color: #ffffff;
        padding: 0 0 200px;
        position: relative;
    }

    .teamSection .backshape{
        background-color: #121212;
        background-image: url("../../img/slide3.jpg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        position: absolute;
        height: 90%;
        width: 100%;
        bottom: 0;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 40%, 100% 80%, 0 100%);
        z-index: -10;
    }

    .teamSection .backshapeTwo{
        background-color: #B7093A;
        position: absolute;
        height: 20%;
        width: 100%;
        bottom: 0;
        z-index: -20;
    }

   .teamSection .heading{
        text-align: center;
        font-weight: 100;
        padding: 54px 0;
        text-transform: uppercase;
        color: #212121;
   }

   .teamSection .heading h1{
        font-weight: 200;
    }

   .teamSection .heading h1 span{
        font-weight: 800;
    }

    .teamContainer{
        background-color: #212121;
    }

    .teamImg{
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
    }

    .teamContent{
        padding: 20px;
    }

    .teamContent h2{
        text-transform: uppercase;
        font-weight: 800;
        font-size: 1.5rem;
    }

    .teamContent h6{
        text-transform: uppercase;
        font-weight: 600;
        font-size: .8rem;
        color: #B7093A;
    }

    /* ============================================================= 
    ===================== Testimonials ============================= 
    ============================================================= */

    .testimonialSection{
        background-color: #B7093A;
        color: #ffffff;
        text-align: center;
        padding: 54px 0;
    }

    .testimonialSection .heading{
        text-align: center;
        font-weight: 100;
        padding: 24px 0;
        text-transform: uppercase;
   }

    .testimonialSection .heading h1{
        font-weight: 200;
    }

   .testimonialSection .heading h1 span{
        font-weight: 800;
    }

    .carousel-indicators{
        display: none;
    }

    .carousel .testimonial {
        padding: 0 0 10px;
        min-height: 130px;
        width: 60%;
        margin: auto;
    }

    .carousel-control-next,
    .carousel-control-prev {
        top: -64px;
        opacity: .2;
    }

    .carousel-control-next:hover,
    .carousel-control-prev:hover,
    .carousel-control-next:focus,
    .carousel-control-prev:focus {
        opacity: .3;
    }

    .item.carousel-item .overview{
        color:#212121;
        font-weight: 700;
    }

    .carousel-control i{
        font-size: 7rem;
    }

   /* ============================================================= 
   ========================== Map ================================= 
   ============================================================= */

    #map {
        height: 400px;
        width: 100%;
    }

   /* ============================================================= 
   ======================== Footer ================================ 
   ============================================================= */

    footer{
        background-color: #121212;
        padding:54px 0;
        color: #ffffff;
        font-weight: 200;
    }

    footer h2{
        color:#B7093A;
        text-transform: uppercase;
        font-weight: 800;
    }

    footer ul{
        text-transform: uppercase;
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 1.1rem;
        font-weight: 600;
    }

    footer ul li{
        margin-bottom: 4px;
    }

    footer ul li.small{
        font-size: .9rem;
        text-transform: none;
        font-weight: 200;
        margin-bottom:24px;
    }

    .footer-social{
        border-bottom: 1px solid #999999;
        padding-bottom: 24px;
        margin-bottom: 24px;
        text-align: center;
    }

    .footer-social ul{
        margin: auto;
        justify-content: center;
    }

    .footer-social-item {
        width: 30px;
        opacity: .4;
        margin-left: 8px;
    }

    .footer-sponsors{
        text-align: center;
    }
    
    .footer-sponsors > div{
        justify-content: space-evenly;
        margin-bottom: 24px;
    }

    .footer-sponsors img{
        max-width:200px;
        max-height: 90px;

    }

    .footer-sponsors p{
        margin-bottom: .3rem;
    }

    .copyright{
        text-transform: uppercase;
        text-align: center;
        border-top: 1px solid #999999;
        padding-top: 20px;
        margin-top: 50px;
    }