/* ========================================= */
/* A. CALIBRE FONT DEFINITIONS (@font-face)  */
/* Ensure these files are in your wwwroot/fonts folder */
/* (KEEP ALL OF THESE HERE) */
/* ========================================= */

/* Calibre Thin (Weight 100) */
@font-face {
    font-family: 'Calibre';
    font-weight: 100;
    font-style: normal;
    src: url('/fonts/CALIBRE-THIN_0.OTF') format('opentype');
    font-display: swap;
}

/* Calibre Light (Weight 300) */
@font-face {
    font-family: 'Calibre';
    font-weight: 300;
    font-style: normal;
    src: url('/fonts/CALIBRE-LIGHT_0.OTF') format('opentype');
    font-display: swap;
}

/* Calibre Regular (Weight 400) */
@font-face {
    font-family: 'Calibre';
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/CALIBRE-REGULAR.OTF') format('opentype');
    font-display: swap;
}

/* Calibre Medium (Weight 500) */
@font-face {
    font-family: 'Calibre';
    font-weight: 500;
    font-style: normal;
    src: url('/fonts/CALIBRE-MEDIUM_0.OTF') format('opentype');
    font-display: swap;
}

/* Calibre Semibold (Weight 600) */
@font-face {
    font-family: 'Calibre';
    font-weight: 600;
    font-style: normal;
    src: url('/fonts/CALIBRE-SEMIBOLD_0.OTF') format('opentype');
    font-display: swap;
}

/* Calibre Bold (Weight 700) */
@font-face {
    font-family: 'Calibre';
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/CALIBRE-BOLD_0.OTF') format('opentype');
    font-display: swap;
}

/* Calibre Black (Weight 900) */
@font-face {
    font-family: 'Calibre';
    font-weight: 900;
    font-style: normal;
    src: url('/fonts/CALIBRE-BLACK.OTF') format('opentype');
    font-display: swap;
}


/* ========================================= */
/* Variables                                 */
/* ========================================= */
:root {
    --color-yellow_bright: #E2EC9F;
    --color-yellow: #D7DE92;
    --color-green: #33C1C1;
    --color-grey-darker: #999999;
    --color-grey: #B1B1B1;
    --color-text-lightGrey: #dbdbdb;
    --color-lightGrey: #d9d9d9;
    --color-title-gray: #adadad;
    --color-black: #000000;
    --color-teal: #2fb6b0;
    --color-white: #ffff;
    --color-light-blue: #3fa1ff;
    --color-see-blue: #94cded;
    --color-image-border-lemon-yellow: #ffff8e;
    --color-subheading-mist-blue: #688e9a;
    --color-body-gray: #4d4d4d;
    --color-bright-blue: #33c1c1;
    --color-accent: #18bdb3;
    --color-sea-weed: #688e9a;
    --color-sunset-blue: #d9f2f9;
    --color-sage: #80a68f;
}

/* Mobile-first page specific styles for Services_Reflexology */
/*:root {
    --muted-blue: #dbeff2;
    --accent: #7fcfd1;
    --text: #2b2b2b;
    --soft-shadow: 0 6px 18px rgba(0,0,0,0.08);
}*/

/* ========================================= */
/* B. BASE LAYOUT & GLOBAL STYLES          */
/* (KEEP THESE HERE) */
/* ========================================= */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

body {
    margin-bottom: 60px;
}



body {
    /* Set the global page background color to match the fade */
    font-family: 'Calibre', sans-serif;
}

/* Any universal reset or base utility classes */
.container {
    margin: 0 auto;
    max-width: 1200px;
}


/* Title / intro */
.meet-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-teal);
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

    .meet-title .icon {
        width: 50px;
        height: 30px;
        background: url('../../images/blackfoot.png') center/contain no-repeat;
        /*background-image: url('/images/foot-icon.png');*/
        /*background-size: contain;*/
        /*background-repeat: no-repeat;*/
        /*opacity: 0.95;*/
    }

    /*.meet-title strong {
        font-size: 1.25rem;
    }*/

    span.mediumfont {
        font-weight: 500; 
}


/* header shared */
.header {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    background-color: #f2f2f2;
}


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

semibold {
    font-weight: 600 !important;
}

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


h3
{
    font-size: 28px;
}