@charset "UTF-8";

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS Variables */
:root {
    /* Colors */
    --color-1: #422B7C;
    /* Main */
    --color-2: #6A4D94;
    /* Accent */
    --color-3: #fff;
    /* Main Background */
    --color-4: #222222;
    /* Text */
    --color-5: #4C4E52;
    /* Footer */
    --color-6: #00854D;

    --color-1-opacity: #422B7C55;
    --color-2-opacity: #6A4D9455;
    --color-3-opacity: #ffffff55;
    --color-4-opacity: #22222255;
    --color-5-opacity: #4C4E5255;

    --color-1-opacity-darker: #422B7C99;
    --color-2-opacity-darker: #6A4D9499;
    --color-3-opacity-darker: #ffffff99;
    --color-4-opacity-darker: #22222299;
    --color-5-opacity-darker: #4C4E5299;

    /* Body */
    --page-background: var(--color-3-opacity-darker);
    --page-img: url('../images/design/page-bg.webp');
    --text: var(--color-4);
    --text-font: "Noto Sans", sans-serif;
    --headers: var(--color-4);
    --headers-font: "Holtwood One SC", serif;
    --links: var(--color-1);
    --links-hover: var(--color-2);

    /* Buttons */
    --btn-font-size: 0.75rem;
    --btn-border-radius: 100px;
    --btn-bg: var(--color-1);
    --btn-text: var(--color-3);
    --btn-border: var(--color-1);
    --btn-shadow: var(--color-4-opacity) 0px 1px 3px, var(--color-4-opacity) 0px 1px 2px;
    --btn-hover-bg: var(--color-3);
    --btn-hover-text: var(--color-1);
    --btn-focus-shadow: 0 0 0 0.25rem var(--color-1-opacity);

    /* Header */
    --header-background: var(--color-3);
    --header-text: var(--color-4);
    --header-text-hover: var(--color-1);

    /* Footer */
    --footer-background: var(--color-4);
    --footer-text: var(--color-3);
    --footer-text-hover: var(--color-1);

    /* Gallery */
    --gallery-bg: var(--color-4);

    /* Modal */
    --modal-text: var(--color-4);
    --modal-bg: var(--color-3);
    --modal-btn-text: var(--color-3);
    --modal-close-btn-shadow: var(--color-1-opacity);

    /* Reviews colors */
    --reviews: var(--color-4-opacity);
    --reviews-stars: var(--color-6);
    --reviews-text: var(--color-3);
    --reviews-title: var(--color-3);
    --reviews-border: var(--color-4-opacity-darker);

    /* Forms/nav colors */
    --form-inputs: var(--color-3);
    --dropdown: var(--color-3);
    --dropdown-text: var(--color-4);
    --dropdown-border: var(--color-1);
    --dropdown-hover: var(--color-1);
    --dropdown-hover-text: var(--color-3);

    /* Calendar */
    --calendar-month-border: var(--color-1);
    --calendar-month-bg: var(--color-3);
    --calendar-month-day: var(--color-1);
    --calendar-month-highlight: var(--color-1-opacity);
    --calendar-month-number: var(--color-1);

    /* Calendar Event Feed */
    --cal-btn-font-size: 0.75rem;
    --cal-btn-border-radius: 100px;
    --cal-btn-bg: var(--color-1);
    --cal-btn-text: var(--color-3);
    --cal-btn-border: var(--color-1);
    --cal-btn-shadow: var(--color-4-opacity) 0px 1px 3px, var(--color-4-opacity) 0px 1px 2px;
    --cal-btn-hover-bg: var(--color-3);
    --cal-btn-hover-text: var(--color-1);
    --cal-btn-focus-shadow: 0 0 0 0.25rem var(--color-1-opacity);
    --cal-btn-padding-x: 0.75rem;
    --cal-btn-padding-y: 0.375rem;
    --cal-btn-font-size: 1rem;
    --cal-btn-font-weight: 400;
    --cal-btn-line-height: 1.5;
    --cal-btn-border-width: 1px;
    --cal-btn-border-color: transparent;
    --cal-btn-hover-border-color: transparent;

    /* Map */
    --map: grayscale(0);
}


.accent-1 {
    background-color: var(--color-6);
    color: var(--color-3);
    --btn-bg: var(--color-3);
    --btn-text: var(--color-1);
    --btn-hover-bg: var(--color-1);
    --btn-hover-text: var(--color-3);
    --btn-focus-shadow: 0 0 0 0.25rem var(--color-1-opacity);
    --headers: var(--color-3);
    --text: var(--color-3);
    --links: var(--color-1);
    --links-hover: var(--color-2);
}

.accent-2 {
    background-color: transparent;
    color: var(--color-1);
    --btn-bg: var(--color-1);
    --btn-text: var(--color-3);
    --btn-hover-bg: var(--color-3);
    --btn-hover-text: var(--color-1);
    --btn-focus-shadow: 0 0 0 0.25rem var(--color-2-opacity);
    --headers: var(--color-4);
    --text: var(--color-4);
    --links: var(--color-1);
    --links-hover: var(--color-2);
}

/* Typography and Colors */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--headers);
    font-family: var(--headers-font) !important;
    text-transform: capitalize
}

p,
body,
li,
a,
table {
    color: var(--text);
    font-family: var(--text-font) !important
}

.big {
    font-size: larger;
}

.headers-font {
    font-family: var(--headers-font)
}

.text-font {
    font-family: var(--text-font);
    font-size-adjust: .45;
}

a {
    color: var(--links);
    text-decoration: none
}

a:hover,
a:focus {
    color: var(--links-hover)
}

/* Buttons */
[class^="btn"]:not(.btn-close),
button#header-arrows,
.subscribe-button,
.portfolio-shuffle a,
div.form-group.d-grid.gap-2>button,
.cta-button {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border-radius: var(--btn-border-radius);
    -webkit-box-shadow: var(--btn-shadow) !important;
    box-shadow: var(--btn-shadow) !important;
    text-decoration: none !important;
    border: none
}

[class^="btn"]:not(.btn-close):hover,
[class^="btn"]:not(.btn-close):active,
button#header-arrows:hover,
button#header-arrows:active,
.subscribe-button:hover,
.subscribe-button:active,
.portfolio-shuffle a:hover,
.portfolio-shuffle a:active,
div.form-group.d-grid.gap-2>button:hover,
div.form-group.d-grid.gap-2>button:active,
.cta-button:hover,
.cta-button:active {
    background: var(--btn-hover-bg) !important;
    color: var(--btn-hover-text) !important
}

[class^="btn"]:not(.btn-close):focus,
button#header-arrows:focus,
.subscribe-button:focus,
.portfolio-shuffle a:focus,
div.form-group.d-grid.gap-2>button:focus,
.cta-button:focus {
    background: var(--btn-hover-bg) !important;
    color: var(--btn-hover-text) !important;
    -webkit-box-shadow: var(--btn-focus-shadow) !important;
    box-shadow: var(--btn-focus-shadow) !important;
    text-decoration: none !important;
    border: none
}

.btn-close:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.25rem var(--modal-close-btn-shadow);
    box-shadow: 0 0 0 0.25rem var(--modal-close-btn-shadow);
    opacity: 1;
}

/* Footer */
.footer {
    background-color: var(--footer-background);
    color: var(--footer-text);
    padding-top: 1rem
}

.footer h1,
.footer .h1,
.footer h2,
.footer .h2,
.footer h3,
.footer .h3,
.footer h4,
.footer .h4,
.footer h5,
.footer .h5,
.footer h6,
.footer .h6,
.footer p,
.footer body,
.footer li,
.footer a,
.footer-wrapper h1,
.footer-wrapper .h1,
.footer-wrapper h2,
.footer-wrapper .h2,
.footer-wrapper h3,
.footer-wrapper .h3,
.footer-wrapper h4,
.footer-wrapper .h4,
.footer-wrapper h5,
.footer-wrapper .h5,
.footer-wrapper h6,
.footer-wrapper .h6,
.footer-wrapper p,
.footer-wrapper body,
.footer-wrapper li,
.footer-wrapper a {
    color: var(--footer-text)
}

.footer-wrapper {
    background: var(--footer-background);
    color: var(--footer-text)
}

.footer-nav.nav .nav-link {
    color: var(--footer-text);
    text-decoration: none;
    padding: .5rem 1rem
}

.footer-nav.nav .nav-link:hover,
.footer-nav.nav .nav-link:focus,
.footer-nav.nav .nav-link:active {
    color: var(--color-6)
}

.footer hr {
    border-color: var(--footer-text);
    opacity: 1
}

.footer a,
footer.fixed-bottom a {
    color: var(--footer-text);
    text-decoration: none
}

.footer a:hover,
.footer a:active,
.footer a:focus {
    color: var(--footer-text-hover)
}

/* Social Media */
.social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 0
}

.social li {
    display: inline-block;
    margin: 0 10px
}

.social li a {
    width: 40px;
    height: 40px;
    font-size: 24px;
    color: var(--color-3);
    -webkit-transition: color 300ms, background 300ms;
    -o-transition: color 300ms, background 300ms;
    transition: color 300ms, background 300ms;
    text-decoration: none
}

.social li a:hover,
.social li a:focus {
    color: var(--primary-color, --color-4);
    text-stroke-width: 1px;
    text-stroke-color: var(--color-3)
}

.social li a:focus {
    -webkit-box-shadow: 0 0 0 2pt var(--color-1);
    box-shadow: 0 0 0 2pt var(--color-1)
}

.social .facebook {
    --primary-color: #3B5998
}

.social .twitter {
    --primary-color: #000000
}

.social .instagram {
    --primary-color: #cd486b
}

.social .google-plus {
    --primary-color: #DB4437
}

.social .google {
    --primary-color: #4285F4
}

.social .youtube {
    --primary-color: #ff0000
}

.social .yelp {
    --primary-color: #af0606
}

.social .pinterest {
    --primary-color: #BD081C
}

.social .tumblr {
    --primary-color: #35465c
}

.social .linkedin {
    --primary-color: #0077B5
}

.social .trip-advisor {
    --primary-color: #00af87
}

.social .vimeo {
    --primary-color: #1ab7ea
}

/* Tooltips */
.template-tooltip {
    --bs-tooltip-max-width: auto;
    --bs-tooltip-bg: var(--color-1-opacity-darker);
    --bs-tooltip-color: var(--color-3);
    --bs-tooltip-font-size: 1rem;
    font-family: var(--text-font)
}

.template-tooltip .tooltip-inner {
    text-align: left
}

/* Miscellaneous */
.spillover {
    background-color: var(--color-1);
    padding: 9px 0;
    text-align: center
}

.spillover * {
    margin: auto
}