:root,
[data-bs-theme=light] {
    --bs-gray-100: #f7f9f9;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-success: #198754;

    --bs-primary: #458885;
    --bs-primary-rgb: 69, 136, 133;
    --bs-primary-bg-subtle: #e0f5f5;
    --bs-primary-border-subtle: #458b88;

    --bs-button-green: #a0cbc9;

    --bs-secondary: #75C7C5;
    --bs-secondary-rgb: 117, 199, 197;
    --bs-secondary-bg-subtle: #8cdad8;
    --bs-secondary-border-subtle: #7dcac8;

    --bs-tertiary-color: #a82f61;
    --bs-tertiary-color-rgb: 168, 47, 97;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;

    --bs-light: #e6f4f1;
    --bs-light-rgb: 248, 249, 250;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-light-border-subtle: #e9ecef;

    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;
    --bs-dark-bg-subtle: #ced4da;
    --bs-dark-border-subtle: #adb5bd;

    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;

    --bs-heading-color: inherit;
    --bs-link-color: #2d6e6a;
    --bs-link-color-rgb: 38, 99, 95;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #40968f;
    --bs-link-hover-color-rgb: 87, 167, 161;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(168, 47, 97, 0.8);
    --bs-btn-hover-border-color: ;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(168, 47, 97, 0.6);
    --bs-btn-active-border-color: ;

    --nav-bg: rgb(221, 241, 240);
    --nav-bg-dark: rgb(212, 239, 237);
    --nav-border: rgb(213, 239, 237);
}

html {
    min-width: 500px;
    height: 100%;
}

body {
    text-size-adjust: 100%;
}

#nav-bg {
    background: var(--nav-bg);
    /* background: linear-gradient(129deg,rgb(221, 241, 240) 0%, rgb(114, 192, 188) 100%); */
    border-bottom: 1px solid var(--nav-border);
}

h1,
h2,
h3,
h4 {
    color: var(--bs-tertiary-color);
}

.card,
.card-img,
.card-img-bottom,
.card-img-overlay {
    --bs-card-border-width: 0;
    border-radius: 0;
}

.gradient-custom {
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(rgba(250, 112, 154, 0.5), rgba(254, 225, 64, 0.5));

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 23%, rgba(0, 0, 0, 0.55) 91%);
}

.img-card-title {
    top: auto;
    margin-left: 5%;
    padding-bottom: 2%;
}

.gallery-pic h1 {
    font-size: calc(1.32rem + 1.5vw);
}

.gallery-pic h2 {
    font-size: calc(0.6rem + 1.5vw);
}

.pic-link:hover {
    cursor: pointer;
}

.gallery-pic {
    transform: scale(1);
    transition: 400ms;
    overflow: hidden !important;
    padding-left: 0;
    padding-right: 0;
}

.pic-border-right {
    border-right: white 2px solid;
}

.pic-border-bottom {
    border-bottom: white 2px solid;
}

.img-fluid {
    object-fit: cover;
    height: 100%;
}

body {
    min-height: 100%;
    min-height: 100vh;
}

.navbar {
    --bs-navbar-brand-font-size: 1.66rem;
}

.custom-gutter {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 0;
}

.single-picture {
    display: inline-block;
}

.navbar-nav {
    font-size: 1.1rem;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-navbar-color: var(--bs-nav-link-color);
    --bs-navbar-hover-color: var(--bs-nav-link-hover-color);
    --bs-navbar-active-color: var(--bs-nav-link-hover-color);
}

.round-button {
    width: 130px;
    font-size: 95%;
    font-weight: 400;
    color: var(--bs-primary);
}

.round-button-circle a {
    display: block;
    float: left;
    width: 100%;
    padding-top: 50%;
    padding-bottom: 50%;
    line-height: 1em;
    margin-top: -0.5em;
    text-align: center;
    text-decoration: none;
}

.round-button-circle {
    height: 0;
    padding-bottom: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--nav-bg);
}

.round-button-circle:hover {
    background: var(--nav-bg-dark);
    cursor: pointer;
}

.modal-body .round-button {
    margin-top: 50%;
}

.modal-body .round-button-circle {
    margin-top: 50%;
}


.modal-button-wrapper {
    display: flex;
    gap: 5%;
    margin: 0 auto;
    justify-content: center;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: max-content;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1rem;
}

.dropdown-content a:hover {
    background: var(--bs-gray-100);
    color: var(--bs-nav-link-color)
}

.dropdown:hover .dropdown-content {
    display: block;
}

main {
    margin: 0;
}

main h1 {
    padding: 20%;
    height: 380px;
}

h1,
h2,
h3,
h4,
h5,
#logo-type {
    font-family: "Nunito";
    font-weight: 500;
}

h2 {
    font-size: 1.8rem;
}

.btn {
    background-color: var(--bs-tertiary-color);
    --bs-btn-color: #fff;
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-padding-y: 0.2rem;
}

.btn:hover {
    color: var(--bs-btn-hover-color);
}

.location-box {
    background-color: #f9e0e4;
    border-radius: 22%;
    padding: 10% 10%;
    margin-bottom: 10%;
    width: 132px;
}

.location-box a,
.location-box span,
.side-text {
    font-size: 14px;
}

.modal-dialog {
    /* New Centering Properties */
    display: flex;
    /* Enable flex container */
    align-items: center;
    /* Vertical centering */
    justify-content: center;
    /* Horizontal centering, if needed */
    margin: 0 auto;
    /* Ensures it's centered in the viewport */
    height: fit-content;
    width: fit-content;
    /* Important: Takes up the full width of the modal parent */
    /* Override Bootstrap's default margin that might break centering */
    max-width: none;
}

#medical-modal .modal-content {
    min-width: 560px;
}

#transport-modal .modal-content {
    min-width: 690px;
}

#town-centre-modal .modal-content {
    min-width: 780px;
}

#activities-modal .modal-content {
    min-width: 560px;
}

.side-text {
    font-size: 12px;
    width: 230px;
    padding-left: 25px;
}

.triad-wrapper {
    width: 85%;
}

.triad-pic {
    width: 30%;
}

.triad-wrapper,
.triad-middle {
    margin: 0 auto;
}

.footer-container {
    max-width: 80%;
}

footer li {
    --bs-nav-link-padding-y: 0.25rem;
}

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

footer a:hover {
    color: var(--font-blue-hover);
}

footer {
    margin-top: 0;
}

#copyright-mark {
    width: fit-content;
    align-self: center;
    margin: 0 auto;
}

#copyright-wrapper {
    text-align: center;
    align-items: center;
}

#footer-content {
    max-width: 1080px !important;
    margin: auto !important;
}

@media only screen and (min-width: 2020px) {
    .gallery-pic h1 {
        font-size: 50px;
    }

    .gallery-pic h2 {
        font-size: 38px;
    }
}

@media only screen and (min-width: 1921px) {

    .container-fluid,
    #nav,
    #footer-content {
        max-width: 1850px;
    }

    #navbar-wrapper {
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width: 1080px) and (min-width: 1031px) {
    .nav-link {
        font-size: 1.01rem;
    }
}

@media only screen and (max-width: 1030px) and (min-width: 1009px) {
    .nav-link {
        font-size: 0.95rem;
    }
}

@media only screen and (max-width: 1008px) and (min-width: 992px) {
    .nav-link {
        font-size: 0.95rem;
    }
}

@media only screen and (min-width: 991px) {
    .triad-pics {
        width: 85%;
        margin: 0 auto;
    }
}

@media only screen and (max-width:940px) {
    .triad-pics {
        width: 85%;
        margin: 0 auto;
    }

    .gallery-pic h1 {
        font-size: 33px;
    }
}

@media only screen and (min-width:768px) {
    .round-button {
        font-size: 1.1rem;
    }

}

@media only screen and (max-width:768px) {
    #footer-content {
        margin: none !important;
    }
}

@media only screen and (max-width:501px) {
    .triad-pics {
        min-width: 100%;
        margin: 0 auto;
    }

    .gallery-pic h1 {
        font-size: 26px;
    }

    .gallery-pic h2 {
        font-size: 18px;
    }
}