/*

Avenues Physio-Fitness
(c) 2024 Byteworks Limited
www.byteworks.nz

Written by Noah Ball

/*

/* Font Imports */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');



/* Halfmoon Variables */

:root {
    --apf-blue: #54bceb;
    --apf-blue-hover: #3F9CCB;
    --bs-font-sans-serif: 'Poppins', sans-serif;
}

body {
    overflow-x: hidden;
}

/* Element Colour Overrides */

.apf-button {
    --bs-btn-bg: var(--apf-blue);
    --bs-btn-hover-bg: var(--apf-blue-hover);
    --bs-btn-active-bg: var(--apf-blue-hover);
}

.apf-inv-button {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-active-bg: #FFFFFF;
    --bs-btn-color: var(--apf-blue);
    --bs-btn-hover-color: var(--apf-blue-hover);
}

.apf-alert {
    --bs-alert-bg: var(--apf-blue);
    --bs-alert-border-color: var(--apf-blue);
    color: #FFFFFF;
}

footer {
    --bs-border-color: #FFFFFF;
}

/* Carousel Hero */


.carousel {
    margin-bottom: 2rem;
}

.carousel-inner {
    border-radius: 0 0 30px 30px;
}

.carousel-item {
    min-height: 85vh;

    @media (min-width: 390px) { /* Custom breakpoint */
        min-height: 85vh;
    }

    @media (min-width: 576px) {
        min-height: 60vh;
    }

    @media (min-width: 768px) {
        min-height: 55vh;
    }

    @media (min-width: 1200px) {
        min-height: 35vh;
    }
}

.carousel-item:nth-of-type(1) {
    background-image: url("/img/hero.jpg");
    background-size: cover;
    position: relative;
}

.carousel-item:nth-of-type(1) .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    color: #fff;

    @media (min-width: 576px) {
        max-width: 60vw;
    }   
}

.hero-blue-tint {
    background-color: #38aee495 ;
    background-blend-mode: soft-light
}

.background-filter::after {
    -webkit-backdrop-filter: blur(4px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
    backdrop-filter: blur(4px); /* Supported in Chrome 76 */
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    top: 0;
  }
  
  .background-filter {
    position: relative;
  }

.u-non-blurred {
    position: relative;
    z-index: 1;
  }

/* Alert */


.apf-alert {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0.5rem var(--bs-alert-padding-x);
}

.apf-alert h5 {
    display: inline-block;
    vertical-align: middle;
}

.apf-alert h5 {
    margin-bottom: 0;
    line-height: 2;
}

.apf-alert h5 button {
    margin-bottom: 0.2rem;
    margin-left: 0.7rem;
}

/* Intro Section */

.intro {
    margin-top: 2.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.intro .vision {
    display: flex;
    align-items: center;
}

.intro .bio p {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.intro .bio img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .intro {
        padding: 0px;
    }

    .intro .bio img {
        float: left;
    }

    .intro .bio {
        display: flex;
        align-items: center;
    }

    .intro .bio p {
        margin-top: 0px;
    }

    .intro .bio img {
        margin-right: 2rem;
        text-align: unset;
    }
}

.vision {
    border: 5px solid #54BCEB50;
    border-radius: 30px;
    padding: 2rem;
}

.vision .fw-bolder {
    color: var(--apf-blue)
}

/* Values Section */


.values {
    background-color: var(--apf-blue);
    margin-top: 3rem;
    padding: 1.5rem;
}

.values .col {
    display: flex;
    justify-content: center;
}

.values .card {
    background-color: var(--apf-blue);
    border: none;
    color: #FFFFFF;
}

.values .card-body {
    text-align: center;
}

.values .person {
    background-color: #FFFFFF;
    width: 90px;
    padding: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}

/* Navigation Section */


.dw-title {
    text-align: center;
    color: var(--apf-blue);
    margin-bottom: 2rem;
}

.doorway {
    margin-top: 2.5rem;
}

.doorway .col {
    padding: 0.7rem 1rem 0.7rem 1rem;
}

.door {
    color: #FFFFFF;
    height: 4.5rem;   
    border-radius: 15px;
    padding: 0.4rem 2rem 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;    
    background-size: cover;
    position: relative;
}

.door h3 {
    margin-left: auto;
    float: right;
}

/* Footer */

.footer-cnt {
    padding: 3rem !important;
    padding-bottom: 0 !important;
    background-color: var(--apf-blue);
    color: #FFFFFF;
}

.footer-contact {
    box-sizing: border-box;
}

.footer-contact h5 {
    word-wrap: break-word;
}

.footer-cnt .text-muted {
    color: #FFFFFF !important;
}

.footer-cnt img {
    margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .footer-rt {
        float: right;
    }
}

.footer-links {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 992px) {
    .footer-links {
        padding-top: 0;
        padding-bottom: 0;
    }

    .footer-contact-info {
        float: right;
    }
}

/* Book Now Modal */

#book-now .modal-content {
    border: none;
    background-color: var(--apf-blue);
    color: #FFFFFF;
    padding: 2rem;
}

#book-now .modal-header {
    border: none;
}

#book-now .btn-close, #services-modal .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 1.0;
}

#book-now .modal-body h5 {
    margin-top: 1rem;
}

/* Flickity Homepage */
.flickity-carousel {
    margin-bottom: 0;
    border-radius: 30px;    
}

.flickity-carousel  .carousel-cell {
    width: 28%;
    height: 200px;
    margin-right: 0px;
  }

  .flickity-carousel .carousel-cell img {
    width: 100%;
  }
  
  .flickity-carousel .carousel-cell:before {
    display: block;
    text-align: center;
    line-height: 200px;
    font-size: 80px;
    color: white;
  }
  
/* Page Template */


.header {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    background-color: var(--apf-blue);
    color: #FFFFFF;
}

.page-content {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
    color: var(--apf-blue);
}

.pale-border {
    padding: 0.3rem;
    margin-top: 0.5rem;
    border: solid;
    border-color: #CDECF9;
    border-radius: 1rem;
    border-width: 0.3rem;
}

@media (min-width: 768px) {
    .info-box {
        width: 18rem;
        float: right;
    }
}

/* Services Cards */

.service {
    margin-top: 1.5rem
}

@media (min-width: 992px) {
    .services .row {
        margin-top: 1.5rem;
    }

    .service {
        margin-top: 0;
    }
}

.service {
    background-color: var(--apf-blue);
    color: #FFFFFF;
}

.service {  
    border: none;
    border-radius: 1.5rem !important;
    --bs-card-inner-border-radius: 1.5rem !important;
    cursor: pointer;
}

.service p {
    text-decoration: none !important;
    border-bottom-style: none !important;
    padding: 0.2rem;
}

.service .card-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.service .card-body {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.service h4 {
    margin: 0;
    color: #FFFFFF;
}

.arrow-lg {
    font-size: 1.3rem;
    padding-left: 0.7rem;
    line-height: inherit !important;
    vertical-align: middle;
}

#services-modal .modal-header {
    background-size: cover;
    color: #FFFFFF;
    padding: 2rem;
}

#services-modal .modal-body {
    padding: 1.5rem;
}

/* Studio Page */

.studio-header {
    padding: 0;
}

.studio-text {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.studio-header h1 {
    font-size: 3rem;
    display: table-caption;
    line-height: 3rem;
}

.studio-header .video {
    background-image: url("/img/carousel/one.jpg");
    background-size: cover;
}

@media (max-width: 575px) {
    .studio-text {
        display: none;
    }
    
    .studio-header .video {
        width: 100%;
        height: 12rem;
    }
}

.studio-row {
    margin-top: 2rem;
}

.studio-class {
    background-color: var(--apf-blue);
    padding: 1.5rem;
    border-radius: 0 1rem 1rem 0;
    color: #FFFFFF;
    width: 85%;
}

.studio-class h3 {
    color: #FFFFFF;
}

.studio-img {
    background-size: cover;
    border-radius: 1rem 0 0 1rem
}

.flex-center {
    display:flex; align-items:center;
    justify-content: center;
}

/* Pricing Page */
.pricing-card {
    margin-bottom: 1.5rem;
}

.easyclaim-logo {
    padding-right: 0;
}

.pricing-sm {
    margin-top: 1rem;
    margin-bottom: 0;
    color: var(--apf-blue);
}

.accordion-header {
    border-radius: 1rem;
    background-color: var(--apf-blue);
}

.accordion-body {
    margin-top: 0.5rem;
    padding: 1.5rem;
    background-color: #d3ebf7;
    border-radius: 1rem;
}

.accordion-title {
    color: #FFFFFF !important;
}

.accordion-button:focus {
    border: none;
    box-shadow: none;
}

.accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-radius: 1rem;
    --bs-accordion-btn-icon-width: 1.5rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
    margin-top: 1rem;
}

/* .faq-item {
    color: #FFFFFF;
    background-color: var(--apf-blue);
    margin-top: 1rem;
    border-radius: 1rem;
}

.faq-item h5 {
    color: #FFFFFF;
    margin-bottom: 0;
}

.faq-collapse {
    background-color: #d3ebf7;
    color: #000000;
    width: 100%;
    border-radius: 0 0 1rem 1rem;
} */

/* Community Page */

.community-container img {
    margin-left: 2rem;
    border-radius: 30px;
}

.community-container .pale-border {
    padding-bottom: 0.5rem !important;
}

.community-carousel .carousel-cell img {
    object-fit: contain;
    height: 80px;
    margin: 3rem;
}

@media (min-width: 576px) {
    .community-carousel .carousel-cell img {
        height: 5rem;
        object-fit: contain;
    }
}

.community-carousel-2 .carousel-cell img {
    object-fit: contain;
    height: 200px;
    margin: 3rem;
}

@media (min-width: 576px) {
    .community-carousel-2 .carousel-cell img {
        height: 15rem;
        object-fit: contain;
    }
}