:root{
    color-scheme: light dark;
    --body-background: light-dark(#FFFFFF, #010101);
    --background: light-dark(#B9DAF0, #000033);
    --text: light-dark(#000003, #e7e7e7);
    --text-invert: light-dark(#FFFFFF, #000003);
    --link-text: light-dark(#000003, #FFFFFF);
    --link-hover: light-dark(#001aff, #aaaaaa);
    --hamburger: light-dark(#000003, #DDDDFF);
    --hamburger-x: light-dark(#FF0000, #FF0000);
    --navbar: light-dark(#289eff, #0026ff);
    --footer: light-dark(#289eff, #0026ff);
    --button: light-dark(#0026ff, #0026ff);
    --button-text: light-dark(#e7e7e7, #e7e7e7);
    --accent: light-dark(#289eff, #0026ff);
    --text-accent: light-dark(#339933, #95f560);
    font-size: 150%;
    font-family:sans-serif;
    @media(orientation: portrait){
        font-size: 100%;
    }
}

html{
    scroll-behavior: smooth;
}

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

.full-flex-center{
    width: 100%; 
    display: flex; 
    align-items: center;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 0px 0px rgba(0, 100, 255, 0.7);
        color: var(--text);
    }
    50% {
        box-shadow: 0 0 10px 5px rgba(0, 100, 255, 0.7);
        color: var(--link-hover);
        background-color: var(--accent);
    }
    100% {
        box-shadow: 0 0 0px 0px rgba(0, 100, 255, 0);
        color: var(--text); 
    }
}

:target {
    animation: glow 2.5s ease-out; /* 'glow' is the animation name, 1.5s is the duration */
  }

body{
    margin: 0;
    color: var(--text);
    background-color: transparent;
    width: 100%;
    scroll-behavior: smooth;
}

h3{
    scroll-margin-top: 200px;
}

h2{
    scroll-margin-top: 200px;
}

a{
    color: var(--link-text);
}

.accent-text{
    color: var(--text-accent);
    font-weight: bold;
    font-size: 1.05rem;
}

h1 .accent-text{
    font-size: 2.15rem;
}

a:hover{
    color: var(--link-hover);
}

.body-background{
    background-color: var(--body-background);
    display: flex;
    flex-direction: column;
    width: 100%;
}

/*Nav Elements*/

.navbar{
    display: flex;
    height: 10vh;
    width: 100%;
    background-color: transparent;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    transition: all 0.5s;

    @media(prefers-color-scheme: light){
        .hamburger{
            background-color: var(--text-invert);
        }
        .hamburger::after{
            background-color: var(--text-invert);
        }
        .hamburger::before{
            background-color: var(--text-invert);
        }
    }
}

.navbar.scrolled{
    background-color: var(--navbar);

    @media(prefers-color-scheme: light){
        .hamburger{
            background-color: var(--hamburger);
        }
        .hamburger::after{
            background-color: var(--hamburger);
        }
        .hamburger::before{
            background-color: var(--hamburger);
        }
    }
}

.navbar img{
    max-height: 100%;
}

.navlinks{
    height: 100%;
    min-width: 40%;
    display: flex;
    align-items: center;
}

.navlinks.right{
    justify-content: space-around;
    padding-right: 3vw;
}

.navlinks.left{
    justify-content: flex-start;
    padding-left: 2vw;
}

.navlinks a{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0% 2%;
    font-size: clamp(1px, 2rem, 1.6vw);
    max-width: 33%;
    text-decoration: none;
    border-radius: 5px;
    @media(prefers-color-scheme: light) and (orientation: landscape){
        color: var(--text-invert);
    }
}

.navbar.scrolled .navlinks a{
    @media(prefers-color-scheme: light){
        color: var(--text);
    }
}

.navlinks a:hover{
    @media(prefers-color-scheme: light){
        color: var(--link-hover);
    }
}

.navbar.scrolled .navlinks a:hover{
    @media(prefers-color-scheme: light){
        color: var(--link-hover);
    }
}

.navbar.scrolled .navlinks a.phone:hover{
    @media(prefers-color-scheme: light){
        color: var(--text);
    }
}

.navlinks p{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0% 2%;
    font-size: clamp(1px, 2rem, 1.6vw);
    max-width: 33%;
    text-decoration: none;
    border-radius: 5px;
    margin: 0;
    cursor: pointer;
    color: var(--link-text);
    @media(prefers-color-scheme: light) and (orientation: landscape){
        color: var(--text-invert);
    }
}

.navbar.scrolled .navlinks p{
    color: var(--link-text);
    @media(prefers-color-scheme: light){
        color: var(--text);
    }
}

.navbar.scrolled .navlinks p:hover{
    color: var(--link-hover);
    @media(prefers-color-scheme: light){
        color: var(--link-hover);
    }
}

.navlinks a.phone{
    background-color: green;
    max-height: 50%;
    color: var(--button-text);
    transition: all 0.5s;
    box-shadow: green 0px 0px 2px 2px;
    text-shadow: 2px 2px 3px var(--text-invert);
    text-decoration: none;
    @media(orientation: portrait){
        max-height: 70%;
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    @media(prefers-color-scheme: light){
        text-shadow: 2px 2px 3px var(--text-invert);

    }
}

.navlinks a.phone:hover{
    transform: translateY(-10%);
    box-shadow: green 0px 0px 15px 5px;
}

.navlinks a.email{
    background-color: green;
    max-height: 50%;
    color: var(--button-text);
    transition: all 0.5s;
    box-shadow: green 0px 0px 2px 2px;
    text-shadow: 2px 2px 3px var(--text-invert);
    @media(orientation: portrait){
        max-height: 70%;
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    @media(prefers-color-scheme: light){
        text-shadow: 2px 2px 3px var(--text-invert);

    }
}

.navlinks a.email:hover{
    transform: translateY(-10%);
    box-shadow: green 0px 0px 15px 5px;
}

.navlinks a.booknow{
    background-color: var(--booknow-color);
    max-height: 50%;
    color: var(--button-text);
    transition: all 0.5s;
    box-shadow: #006aff 0px 0px 2px 2px;
    @media(orientation: portrait){
        max-height: 70%;
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        text-align: center;
    }
    @media(prefers-color-scheme: light){
        color: var(--text-invert);
    }
}

.navlinks a.booknow:hover{
    transform: translateY(-10%);
    box-shadow: #006aff 0px 0px 15px 5px;
}

.navlinks a.email img{
    margin-right: 1ch;
    transition: all 0.5s;
    @media(prefers-color-scheme: light){
        filter: invert(1);
    }
    @media(orientation: portrait){
        margin-right: 0ch;
    }
}

.navlinks a.phone img{
    margin-right: 1ch;
    transition: all 0.5s;
    @media(prefers-color-scheme: light){
        filter: invert(1);
    }
    @media(orientation: portrait){
        margin-right: 0ch;
    }
}

.navbar.scrolled .navlinks a.email{
    img{
        margin-right: 1ch;
        @media(prefers-color-scheme: light){
            filter: invert(0);
        }
    }
    @media(prefers-color-scheme: light){
        text-shadow: none;
    }
}

.navbar.scrolled .navlinks a.phone{ 
    img{
        margin-right: 1ch;
        @media(prefers-color-scheme: light){
            filter: invert(0);
        }
    }
    @media(prefers-color-scheme: light){
        text-shadow: none;
    }
}.navbar.scrolled .navlinks a.email:hover{
    color: var(--text);
}

.navbar.scrolled .navlinks a.phone:hover{ 
    color: var(--text);
}

.navlinks a.book{
    max-height: 50%;
}

.navlinks a img{
    max-height: 50%;
    max-width: 100%;
}

@media(prefers-color-scheme: dark){
    .navlinks a img{
        filter: invert(1);
    }
}

.hamburger-holder{
    display: none;
}

.drop-down{
    display: none;
}

@media(orientation: portrait){
    .navbar .navlinks{
        display: none;
    }
    
    .navbar .navlinks.right{
        display: flex;
    }

    .hamburger-holder{
        display: flex;
        justify-content: center;
        align-items: center;
        width: min(20%, 100px);
        height: 100%;
        padding-right: min(5%, 50px);
    }

    .hamburger::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--hamburger);
        position: absolute;
        border-radius: 100px;
        top: -250%;
        transition: all 0.5s;
    }

    .hamburger{
        background-color: var(--hamburger);
        width: min(80%, 100px);
        height: min(10%, 4px);
        border-radius: 100px;
        position: relative;
        transition: all 0.5s;
    }

    .hamburger::after{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--hamburger);
        position: absolute;
        border-radius: 100px;
        top: 250%;
        transition: all 0.5s;
    }

    .hamburger-holder.clicked{

        .hamburger::before{
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--hamburger-x);
            position: absolute;
            border-radius: 100px;
            transform: rotate(-90deg);
            top: 0%;
        }
    
        .hamburger{
            background-color: var(--hamburger-x);
            width: min(80%, 100px);
            height: min(10%, 4px);
            border-radius: 100px;
            transform: rotate(45deg);
            position: relative;
        }
    
        .hamburger::after{
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--hamburger-x);
            position: absolute;
            transform: rotate(-90deg);
            border-radius: 100px;
            top: 0%;
        }

    }

    .drop-down{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 90dvh;
        width: 100%;
        position: fixed;
        top: -90vh;
        z-index: 9;
        background-color: var(--background);
        transition: all 0.5s;

        .navlinks{
            overflow: auto;
            max-height: 70%;
        }
    }

    .social-icons{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: min(20%, 300px);
        width: 100%;
    }

    .social-icons a{
        height: 80%;
    }

    .social-icons a img{
        max-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .drop-down .navlinks{
        flex-direction: column;
        justify-content: flex-start;
    }

    .navlinks{
        width: 100%;
    }

    .drop-down .navlinks a{
        font-size: clamp(1px, 5rem, 7vmin);
        height: auto;
        padding: 3% 20%;
        text-decoration: none;
        max-width: 100%;
        text-align: center;
    }

    .drop-down .navlinks p{
        font-size: clamp(1px, 5rem, 7vmin);
        height: auto;
        padding: 3% 20%;
        text-decoration: none;
        max-width: 100%;
        text-align: center;
    }

    .sub-drop-body a{
        font-size: clamp(1px, 3rem, 7vmin);

    }

    .drop-down.open{
        top: 10vh;
    }

    .button-text{
        display: none;
    }
}

.drop-top-container{
    height: 100%;
    position: relative;
    padding: 0% 2%;
    padding-right: 7%;
}

.drop-top-container p{
    max-width: 100%;
}

.drop-top-container p:hover{
    color: var(--link-hover);
    @media(prefers-color-scheme: light){
        color: var(--link-hover);
    }
}

.drop-top{
    position: relative;
    height: 100%;
    max-width: 100%;
}

.drop-nav a{
    color: var(--text);
}

.drop-top::after{
    content: "";
    display: block;
    background-color: var(--link-text);
    width: 20px;
    height: 3px;
    position: absolute;
    right: -25px;
    transform: rotate(60deg);
    border-radius: 50px;
    transition: all 0.5s;
    @media(prefers-color-scheme: light){
        background-color: var(--text-invert);
    }
}

.drop-top::before{
    content: "";
    display: block;
    background-color: var(--link-text);
    width: 20px;
    height: 3px;
    position: absolute;
    right: -33px;
    transform: rotate(-60deg);
    border-radius: 50px;
    transition: all 0.5s;
    @media(prefers-color-scheme: light){
        background-color: var(--text-invert);
    }
}

.drop-top-container:hover .drop-top::after{
    transform: rotate(-60deg);
}

.drop-top-container:hover .drop-top::before{
    transform: rotate(60deg);
}

.navbar.scrolled .drop-top::after{
    @media(prefers-color-scheme: light){
        background-color: var(--text);
    }
}

.navbar.scrolled .drop-top::before{
    @media(prefers-color-scheme: light){
        background-color: var(--text);
    }
}

.drop-nav{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 80%;
    left: 0%;
    width: fit-content;
    background-color: var(--body-background);
    padding: 20%;
    border-radius: 15px;
    transition: all 0.5s;
    overflow: hidden;
    max-height: 80vh;
    a{
        transition: all 0.5s;
    }
}

.drop-nav a{
    padding: 10% 0%;
}

.drop-down-cta{
    max-height: 30%;
    height: 30%;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;

    a.phone{
        background-color: green;
        max-height: 30%;
        color: var(--button-text);
        transition: all 0.5s;
        box-shadow: green 0px 0px 2px 2px;
        text-shadow: 2px 2px 3px var(--text-invert);
        height: 25%;
        width: 80%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 2rem;
        text-decoration: none;
        @media(prefers-color-scheme: light){
            text-shadow: 2px 2px 3px var(--text);
    
        }
    }
    
    a.phone:hover{
        transform: translateY(-10%);
        box-shadow: green 0px 0px 15px 5px;
    }
    
    a.email{
        background-color: green;
        max-height: 50%;
        color: var(--button-text);
        transition: all 0.5s;
        box-shadow: green 0px 0px 2px 2px;
        text-shadow: 2px 2px 3px var(--text-invert);
        height: 25%;
        width: 80%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 2rem;
        text-decoration: none;
        @media(prefers-color-scheme: light){
            text-shadow: 2px 2px 3px var(--text);
    
        }
    }
    
    a.email:hover{
        transform: translateY(-10%);
        box-shadow: green 0px 0px 15px 5px;
    }
    
    a.booknow{
        background-color: var(--booknow-color);
        max-height: 50%;
        color: var(--button-text);
        transition: all 0.5s;
        box-shadow: #006aff 0px 0px 2px 2px;
        height: 25%;
        width: 80%;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 2rem;
        @media(prefers-color-scheme: light){
            color: var(--text-invert);
        }
    }
    
    a.booknow:hover{
        transform: translateY(-10%);
        box-shadow: #006aff 0px 0px 15px 5px;
    }
    
    a.email img{
        margin-right: 1ch;
        transition: all 0.5s;
        max-height: 100%;
        @media(prefers-color-scheme: light){
            filter: invert(1);
        }
        @media(orientation: portrait){
            margin-right: 0ch;
        }
    }
    
    a.phone img{
        margin-right: 1ch;
        transition: all 0.5s;
        max-height: 100%;
        @media(prefers-color-scheme: light){
            filter: invert(1);
        }
        @media(orientation: portrait){
            margin-right: 0ch;
        }
    }
}

.sub-drop{
    display: flex;
    flex-direction: column;
    transition: all 0.5s;
    width: 100%;
    align-items: center;

    .sub-drop-head{
        position: relative;
        text-align: center;
    }

    .sub-drop-head::after{
        content: "";
        display: block;
        position: absolute;
        height: 5px;
        width: 2rem;
        right: 1.2rem;
        object-position: left;
        background-color: var(--text);
        transform: rotate(45deg);
        border-radius: 5px;
        transition: all 0.5s;
    }

    .sub-drop-head::before{
        content: "";
        display: block;
        position: absolute;
        height: 5px;
        width: 2rem;
        right: 0rem;
        object-position: left;
        background-color: var(--text);
        transform: rotate(-45deg);
        border-radius: 5px;
        transition: all 0.5s;
    }

    .sub-drop-head.open::after{
        transform: rotate(-45deg);
    }

    .sub-drop-head.open::before{
        transform: rotate(45deg);
    }


    .sub-drop-body{
        width: 100%;
        height: 0px;
        margin: 0% 0%;
        display: flex;
        align-items: center;
        flex-direction: column;
        overflow: hidden;
        transition: all 0.5s;
        border-color: var(--text);
        border-style: solid;
        border-width: 0px 0px;
        a{
            font-size: 1.75rem;
            @media(orientation: portrait){
                font-size: clamp(1px, 3rem, 7vmin);
            }
        }
    }

    .sub-drop-head.open + .sub-drop-body{
        margin: 0% 0% 5% 0%;
    }
}

/*END NAV*/

.hero-div{
    background-color: rgba(from var(--background) r g b / 0.4);
    min-height: 100vh;
    height: auto;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: black;
    @media(prefers-color-scheme: light){
        color: var(--text-invert);
    }
    @media(orientation: portrait){
        height: 100vh;
    }
}

.hero-div .hero-image{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    object-fit: cover;
    filter: brightness(0.3);
    background-color: black;
    object-position: center;
}

.hero-holder{
    display: flex;
    width: 100%;
    min-height: calc(100% - 10vh);
    position: absolute;
    top: 10vh;
    align-items: center;

    @media(orientation: portrait){
        flex-direction: column;
        height: calc(100% - 10vh);
    }
}

.hero-info{
    width: calc(60% - 10%);
    z-index: 2;
    padding: 5%;

    @media(orientation: portrait){
        width: calc(100% - 10%);
    }
}

.hero-info.service{
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    @media(orientation: portrait){
        display: block;
    }
}

.hero-pics{
    position: relative;
    width: calc(40% - 5%);
    height: calc(100% - 10%);
    min-height: 50vh;
    overflow: hidden;
    z-index: 1;

    @media(orientation: portrait){
        width: calc(100% - 5%);
        display: grid;
        width: 100%;
        height: 80%;
        grid-template-columns: repeat(2, minmax(20%, 1fr));
        grid-template-rows: repeat(2, minmax(1%, 1fr));
        grid-auto-rows:  minmax(40vh, 1fr);
        gap: 0.5rem;
        padding: 5% 0%;
        min-height: auto;
    }

    img{
        border: solid rgba(from var(--accent) r g b / 0.4) 5px;
        border-radius: 5px;
    }
}

.hero-pics img:nth-child(1){
    position: absolute;
    bottom: 55%;
    left: 0%;
    max-width: 60%;
    max-height: 40%;
    object-fit: contain;
    @media(orientation: portrait){
        position:static;
        max-width: 100%;
        max-height: 100%;
        display: block;
        justify-self: right;
    }
}

.hero-pics img:nth-child(2){
    position: absolute;
    bottom: 55%;
    left: 62%;
    max-width: 35%;
    max-height: 35%;
    @media(orientation: portrait){
        position:static;
        max-width: 100%;
        max-height: 100%;
        display: block;
        justify-self: right;
    }
}

.hero-pics img:nth-child(3){
    position: absolute;
    top: 45%;
    left: 0%;
    max-width: 35%;
    max-height: 35%;
    @media(orientation: portrait){
        position:static;
        max-width: 100%;
        max-height: 100%;
        display: block;
        justify-self: left;
    }
}

.hero-pics img:nth-child(4){
    position: absolute;
    top: 45%;
    left: 38%;
    max-width: 60%;
    max-height: 45%;
    @media(orientation: portrait){
        position:static;
        max-width: 100%;
        max-height: 100%;
        display: block;
        justify-self: left;
    }
}

.hero-div .call-button{
    background-color: var(--button);
    color: var(--button-text);
    padding: 3% 8%;
    text-align: center;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.5s;
    font-size: 1rem;
    @media(orientation: landscape){
        left: 10%;
        top: 40%;
    }
}

.hero-div .call-button:hover{
    font-size: 1.25rem;
    box-shadow: rgba(from var(--button) r g b / 0.5) 0px 0px 10px 10px;
}

.hero-div .map-button{
    background-color: var(--button);
    color: var(--button-text);
    padding: 3% 8%;
    text-align: center;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.5s;
    font-size: 1rem;
    text-wrap: nowrap;
    @media(orientation: landscape){
        right: 10%;
        top: 40%;
        bottom: auto;
    }
}

.hero-div .map-button:hover{
    font-size: 1.25rem;
    box-shadow: rgba(from var(--button) r g b / 0.5) 0px 0px 10px 10px;
}

.hero-div p{
    margin-bottom: 5%;
}

/*

.hero-div h1{
    margin-top: 0;
    font-size: clamp(1px, 3rem, 8vmin);
    position: absolute;
    z-index: 1;
    top: 10vh;
    text-align: center;
}

.hero-div p{
    padding: 1% 10%;
    position: absolute;
    font-size: clamp(1px, 1.5rem, 5vmin);
    z-index: 1;
    bottom: 0;
}

.hero-div .call-button{
    position: absolute;
    z-index: 2;
    top: 25%;
    background-color: var(--background);
    padding: 3% 8%;
    text-align: center;
    border-radius: 50px;
    @media(orientation: landscape){
        left: 10%;
        top: 40%;
    }
}

.hero-div .map-button{
    position: absolute;
    z-index: 2;
    bottom: 30%;
    background-color: var(--background);
    padding: 3% 8%;
    text-align: center;
    border-radius: 50px;
    @media(orientation: landscape){
        right: 10%;
        top: 40%;
        bottom: auto;
    }
}
*/

.home-section{
    width: calc(100% - 10%);
    padding: 5% 5%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    min-height: 90vh;
    height: auto;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    background-color: var(--body-background);
    @media(orientation: portrait){
        height: auto;
        padding: 10% 5%;
    }

    h3{
        width: 100%;
        text-align: center;
    }
}

.top-section{
    width: calc(100% - 10%);
    padding: 0% 5%;
    padding-top: calc(10vh + 5vh);
    padding-bottom: 5vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 80vh;
    background-color: var(--background);
    @media(orientation: portrait){
        height: auto;
        padding: 10% 5%;
        padding-top: 10vh;
    }

    h3{
        width: 100%;
        text-align: center;
    }
}

.home-section.secondary{
    background-color: var(--background);
}

.home-section.stretch{
    height: auto;
}

.home-section.min{
    min-height: 90vh;
}

.home-section.top{
    padding-top: 10vh;
}

.home-section.transparent{
    background-color: transparent;
    @media(prefers-color-scheme: light){
        color: var(--text-invert);
    }
}

.rotating-section{
    width: 110%;
    display: flex;
    overflow: hidden;
}

.rotating-section div{
    min-width: 20%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    @media(orientation: portrait){
        min-width: 33%;
    }
}

.rotating-section div img{
    width: 50%;
    display: block;
    justify-self: center;
}

@media(prefers-color-scheme: dark){
    .rotating-section div img{
        filter: invert(1);
    }
}

.rotating-section div p{
    width: 80%;
    display: block;
    justify-self: center;
}

.hours-div{
    display: flex; 
    width: 100%; 
    @media(orientation: portrait){
        flex-direction: column-reverse;
        align-items: center;
    }
}

.hours-info{
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    width: 50%; 
    align-items: center; 
    justify-content: space-around; 
    text-align: center;
    @media(orientation: portrait){width: calc(100% - 10%);}
}

.footer{
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--footer);
    padding-top: 5%;
    position: relative;
    z-index: 1;
    color: var(--link-text);
    img{
        max-width: 50%;
        justify-self: center;
        display: block;
    }
    @media(orientation: portrait){
        padding-top: 10%;
    }

    .accent-text{
        font-weight: bolder;
        @media(prefers-color-scheme: light){
            color: var(--text);
        }
    }
    a.accent-text:hover{
        @media(prefers-color-scheme: light){
            color: var(--link-hover);
        }
    }
}

.footer-body{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: auto;
    @media(orientation: portrait){
        flex-direction: column;
        height: auto;
    }
}

.footer-company{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding: 2.5%;
    background-color: var(--special-background);
    border: double var(--text) 5px;
    border-radius: 50px;

    @media(orientation: portrait){
        flex-direction: row;
    }

    a.booknow{
        background-color: var(--booknow-color);
        max-height: 50%;
        color: var(--button-text);
        transition: all 0.5s;
        box-shadow: #006aff 0px 0px 2px 2px;
        padding: 5%;
        text-decoration: none;
        @media(orientation: portrait){
            max-height: 70%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1rem;
            text-align: center;
            justify-self: center;
        }
        @media(prefers-color-scheme: light){
            color: var(--text-invert);
        }
    }
    
    a.booknow:hover{
        transform: translateY(-10%);
        box-shadow: #006aff 0px 0px 15px 5px;
    }
}

.footer-section{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    height: 100%;
    width: 80ch;
    @media(orientation: portrait){
        flex-direction: row;
        width: 100%;
    }
}

.footer-body img{
    width: 100%;
    object-fit: contain;
    max-height: 30vh;
    object-position: center;
}

.footer-links{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    width: 50%;
    height: -webkit-fill-avaialble;
    height: 100%;
    @media(orientation: portrait){
        flex-direction: column;
        align-items: center;
    }
}

.footer-links h3{
    font-size: clamp(1px, 1.5rem, 8vmin);
    font-weight: bolder;
}

.footer-links a{
    font-size: clamp(1px, 1rem,6vw);
    margin: 5% 0%;
    @media(orientation: landscape){
        font-size: clamp(1px, 1rem,5vw);
        margin: 0;
    }
}

.footer-link-row{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: -webkit-fill-available;
    h4{
        font-size: 1.25rem;
        color: var(--link-text);
        @media(prefers-color-scheme: light){
            color: var(--text);
        }
    }
    a h4{
        color: var(--link);

    }
    p{
        margin: 1% 0%;
    }
}

.footer-link-row.locations{
    max-height: 60vh;
    overflow-y: auto;
}

#copyright{
    font-size: 2rem;
    text-align: center;
    margin: 5% 0% 0% 1%;
    a{
        font-size: 2rem;
    }
}

.contact-div{
    display: flex;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    @media(orientation: portrait){
        flex-direction: column;
        height: auto;
    }
}

.background-image{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}
.contact-form-div{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    @media(orientation: portrait){
        width: 100%;
        height: auto;
        margin: 10% 0%;
    }
}

.contact-form-div form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: var(--background);
    padding: 2.5% 5%;
    border-radius: 50px;
    border: solid var(--text) 5px;
    box-shadow: 5px 5px 25px 2px var(--text);
    width: 90%;
}

.contact-form-div h1{
    margin-top: 0;
    max-width: 100%;
}

h1 .accent-text.head{
    font-size: 2.15rem;
}

.contact-form-div form label{
    font-size: 1rem;
}

.contact-form-div form input{
    border-radius: 5px;
    background-image: linear-gradient(black 10%, #090909 60%, #333333);
    color: var(--text);
    font-size: 1.5rem;
    max-width: 100%;
    @media(prefers-color-scheme: light){
        background-image: linear-gradient(white 40%, #CCCCCC 70%, #999999);

    }
}

.contact-form-section{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;

    div{
        width: 45%;
    }
}

.contact-form-div form textarea{
    border-radius: 5px;
    background-image: linear-gradient(black 10%, #090909 60%, #333333);
    color: var(--text);
    font-size: 1rem;
    width: 100%;
    resize: vertical;
    height: 20%;
    min-height: 10ch;
    border: inset var(--text-invert) 3px;
    @media(prefers-color-scheme: light){
        background-image: linear-gradient(white 40%, #CCCCCC 70%, #999999);

    }
}

.add-images-button {
    cursor: pointer;
    background-color: transparent;
    border: 2px solid var(--accent);
    color: var(--special-backgroud);
    font-size: 1rem;
    padding: 12px 25px;
    border-radius: 8px;
    margin-top: 15px; /* Adjust spacing */
    transition: all 0.3s ease;
    font-weight: 600;
}

.add-images-button:hover {
    background-color: var(--special-backgroud);
    color: var(--link-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#images{
    
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 0%;
    cursor: pointer;
}

.loader-holder{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.loader{/* HTML: <div class="loader"></div> */
    
      width: 100px;
      padding: 8px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--accent);
      --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
      -webkit-mask: var(--_m);
              mask: var(--_m);
      -webkit-mask-composite: source-out;
              mask-composite: subtract;
      animation: l3 1s infinite linear;
    }
    @keyframes l3 {to{transform: rotate(1turn)}
}

button.send-message{
    cursor: pointer;
    background-color: transparent;
    border: 2px solid var(--accent);
    color: var(--special-backgroud);
    font-size: 2rem;
    padding: 12px 25px;
    border-radius: 8px;
    margin-top: 15px; /* Adjust spacing */
    transition: all 0.3s ease;
    font-weight: 600;

}

.send-message:hover {
    background-color: var(--special-backgroud);
    color: var(--link-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.small-note{
    font-size: 0.75rem;
}

.contact-info{
    padding: 2.5%;
    width: calc(50% - 5%);
    height: calc(100% - 10%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    a{
        font-size: 2rem;
        text-align: center;
        margin: 5% 0%;
    }

    .contact-hours{
        width: 100%;
        margin-bottom: 5%;
    }
    
    .hours-table{
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    .contact-map{
        height:50%;
        width: 100%;
    }

    .contact-info{
        display: flex;
        justify-content: space-around;
        width: 100%;
        font-size: 1.25rem;
        font-weight: bolder;
        margin: 10% 0%;
    }
    @media(orientation: portrait){
        width: calc(100% - 10%);
        height: auto;
    }
}

.collage {
    display: grid;
    width: 100%;
    height: 80%;
    grid-template-columns: repeat(3, minmax(30vh, 1fr));
    grid-auto-rows:  minmax(60vh, auto);
    gap: 0.5rem;
    padding: 5% 0%;

    @media screen and (max-width: 1600px) {
        grid-template-columns: repeat(2, minmax(30vh, 1fr));
    }

    @media screen and (max-width: 1200px) {
        grid-template-columns: repeat(1, minmax(30vh, 1fr));
    }

    @media(orientation: portrait){
        grid-template-columns: repeat(1, minmax(18%, 1fr));
        grid-template-rows: repeat(auto-fit, minmax(30vh, 1fr));
    }

    a{
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
        border-radius: 5px;

        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            object-fit: cover;
            cursor: pointer;
            transition: all 0.5s;
            overflow: hidden;
        }

        div{
            position: absolute;
            z-index: 1;
            height: 100%;
            width: 100%;
            background-color: transparent;
            transition: all 0.5s;

            h3{
                background-color: var(--background);
                width: fit-content;
                margin: 0;
                padding: 2%;
                margin-top: 2%;
                border-radius: 50px;
                width: 80%;
                justify-self: center;
                position: relative;
            }

            p{
                overflow: hidden;
                transition: all 0.5s ease-out;
                background-color: var(--background);
                margin: 0;
                width: calc(70% - 10%);
                padding: 0% 5%;
                border-radius: 0px 0px 50px 50px;
                justify-self: center;
                @media(orientation: landscape){
                    max-height: 0vh;

                }
            }

            .arrow{
                background-color: var(--accent);
                height: 2ch;
                width: 2ch;
                border-radius: 100%;
                display: block;
                position: absolute;
                top: 20%;
                left: 2%;
                transform: rotate(-450deg);
                transition: all 0.5s;
                @media(orientation: portrait){
                    display: none;
                }
            }
            .arrow::after{
                content: "";
                display: block;
                background-color: var(--text);
                height: 5px;
                width: 1.5ch;
                position: absolute;
                left: -0.1ch;
                top: 45%;
                transform: rotate(60deg);
                transition: all 0.5s;
                border-radius: 5px;
            }
            .arrow::before{
                content: "";
                display: block;
                background-color: var(--text);
                height: 5px;
                width: 1.5ch;
                position: absolute;
                top: 45%;
                left: 0.55ch;
                transform: rotate(-60deg);
                transition: all 0.5s;
                border-radius: 5px;
            }
        }

        div:hover{
            background-color: rgba(from var(--background) r g b / 0.6);
            p{
                max-height: 70vh;
                padding: 5%;
                transition: all 0.5s ease-in;
            }

            .arrow{
                left: calc(100% - 2ch - 2%);
                transform: rotate(0deg);
            }

            @media(orientation: portrait){
                p{
                    padding: 10%;
                }
            }
        }

        @media(orientation: portrait){
            display: flex;
            flex-direction: column-reverse;
            height: fit-content;
            min-height: fit-content;
            text-decoration: none;
            margin: 5% 0%;
            img{
                position: relative;
                top: auto;
                left: auto;
                z-index: 0;
                height: 200px;
            }
            div{
                position: relative;
                top: auto;
                left: auto;
                z-index: 0;
                h3{
                    width: 100%;
                    border-radius: 0;
                    text-decoration: none;
                }
                p{
                    max-height: fit-content;
                    height: fit-content;
                    border-radius: 0;
                    width: calc(100% - 20%);
                    padding: 10%;
                }
            }
        }
    }

    a:hover{
        img{
            transform: rotate(3deg) scale(1.1);
        }
        color: var(--link-text);
    }
}

.portfolio {
    display: grid;
    width: calc(100% - 20%);
    padding: 10%;
    height: 80%;
    grid-template-columns: repeat(3, minmax(18%, 1fr));
    grid-template-rows: repeat(auto, minmax(18%, 1fr));
    gap: 0.5rem;
    overflow: hidden;

    div{
        height: calc(100% - 10px);
        width: calc(100% - 10px);
        border: groove var(--background) 5px;
        object-fit: cover;
        cursor: pointer;
        transition: all 0.5s;
        overflow: hidden;

        img{
            max-width: 100%;
        }
    }

    div:hover{
        scale: 1.1;
        transform: rotate(5deg);
    }

    @media(orientation: portrait){
        grid-template-columns: repeat(2, minmax(18%, 1fr));

    }
}

.artist-row{
    height: 35%;
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;

    .home-artist{
        background-color: var(--body-background);
        padding: 1%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc(30% - 10%);
        border: solid var(--navbar) 5px;
        border-radius: 20% 5% 20% 5%;
        transition: all 0.5s;
        height: 100%;

        h3{
            margin: 0;
        }

        p{
            margin: 2%;
        }

        img{
            max-width: 100%;
            max-height: 50%;
            object-fit: cover;
            object-position: center;
        }

        @media(orientation: portrait){
            width: 80%;  
            height: 40vh;
            margin: 10% 0%;
        }
    }

    @media(orientation: portrait){
        flex-direction: column;   
    }

    .home-artist:hover{
        scale: 1.1;
        transform: rotate(5deg);
    }
}

@media(prefers-color-scheme: dark){
    .social-icons a img{
        filter: invert(1);
    }
}

#artists{
    display: flex;
    flex-direction: column;
    align-items: center; 

    div{
        background-color: var(--background);
        border: solid var(--navbar) 5px;
        padding: 5%;
        height: 20vh;
        width: calc(90% - 10%);
        margin: 2% 0%;
        transition: all 0.5s;
        overflow: hidden;
    }

    div.selected{
        width: calc(100% - 10% - 10px);
        margin: 0;
    }

    div.unselected{
        width: calc(100%);
        height: 0vh;
        margin: 0;
        padding: 0;
        border-width: 0;
    }

    img{
        float: right;
        max-height: 80%;
        max-width: 50%;
    }
}

#artist-info{
    overflow: hidden;
    transition: all 0.5s;

    #portfolio{
        height: auto;
        grid-template-columns: repeat(3, minmax(10%, 1fr));
        grid-template-rows: repeat(auto-fill, minmax(20vh, 1fr));

        @media(orientation: portrait){
            grid-template-columns: repeat(2, minmax(10%, 1fr));

        }

        img{
            object-fit: contain;
            max-width: 100%;
            max-height: 100%;
        }
    }

    .social-icons{
        width: 100%;
        display: flex;
        justify-content: space-around;
        max-height: 20vh;

        a{
            width: 20%;
            max-height: 100%;

            img{
                max-width: 100%;
                max-height: 100%;
            }
        }
    }

    #bio{
        padding: 15% 5%;

        @media(orientation: landscape){
            padding: 5% 15%;
        }

        img{
            display: block;
            justify-self: center;
        }
    }
}

#modal{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 15;
    top: 0;
    left: 0;

    img{
        max-width: 100%;
        max-height: 100%;
    }
}

/*About Us*/

.about-us-div{
    display: flex;
    height: 100%;
    width: 100%;

    @media(orientation: portrait){
        flex-direction: column-reverse;
    }
}

.about-us-info{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0% 5%;

    .social-icons{
        max-height: 20%;
        height: 100px;
        width: 100%;
        display: flex;
        justify-content: space-around;

        a{
            height: 100%;
            width: 20%;

            img{
                max-height: 100%;
                max-width: 100%;
            }
        }
    }

    @media(orientation: portrait){
        width: 100%;
        padding: 10% 0%;
    }
}

.social-icons{
    max-height: 30%;
    height: 300px;
    width: 100%;
    margin: 10px 0%;
    display: flex;
    justify-content: space-around;

    a{
        height: 100%;
        width: 20%;
        margin: 0;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        @media(prefers-color-scheme: dark){
            filter: invert(1);
        }
    }
}

.about-us-info-header{
    display: flex;
    align-items: center;
    justify-content: space-around;
    h2{
        width: fit-content;
    }
}

.seperator{
    background-color: var(--accent);
    height: 5px;
    flex-grow: 1;
}

.owner-quote{
    display: flex;
    margin-top: 3%;

    img{
        max-height: 100%;
        max-width: 40%;
        border-radius: 50px;
        object-fit: cover;
        max-height: 400px;
        float: right;
    }

    .owner-name{
        font-size: 2rem;
    }

    div{
        padding: 2%;
    }
}

.about-us-second{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    video{
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }

    @media(orientation: portrait){
        width: 100%;
        padding: 10% 0%;
    }
}

.section-divider{
    position: relative;
    z-index: 8;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    picture{
        position: absolute;
        width: 100%;
        img{
            width: 100%;
        }
    }

    h2{
        position: absolute;
        z-index: 9;
        text-align: center;
        background-color: rgba(from var(--background) r g b / 0.8);
        border-radius: 50px;
        padding: 1%;
    }
}

.process-div{
    display: flex;
    height: 40vh;
    width: 100%;
    justify-content: center;
    align-items: center;

    @media(orientation: portrait){
        flex-direction: column;
        margin-top: 50px;
        height: 40%;
    }

    .process-step{
        width: calc(30% - 10%);
        min-width: 15ch;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        border: solid rgba(from var(--accent) r g b / 0.4) 5px;
        padding: 1%;
        background-color: var(--special-backgroud);
        position: relative;
        min-height: 100%;
        height: fit-content;

        h3{
            margin: 0;
            text-align: left;
        }

        @media(orientation: portrait){
            width: calc(100% - 10%);
            height: auto;
            min-height: 20ch;
        }
    }

    .process-arrow{
        width: 100px;
        height: 80%;
        background-color: transparent; /* Light gray background */
        position: relative;
        @media(orientation: portrait){
            width: 60%;
            height: 100px;
            display: block;
            justify-self: center;
        }
    }
    .process-arrow::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--accent);
        /* This is the key: a polygon clip-path with percentage values */
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
        @media(orientation: portrait){
            clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        }
    }

    .process-arrow-holder{
        width: 100px;
        height: 80%;
        background-color: transparent; /* Light gray background */
        position: relative;
        margin-left: -50px;
        @media(orientation: portrait){
            width: 60%;
            height: 100px;
            margin-left: 0;
            margin-top: -50px;
        }
    }
    .process-arrow-holder::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--accent);
        /* This is the key: a polygon clip-path with percentage values */
        clip-path: polygon(100% 50%, 0% 100%, 100% 100%);
        @media(orientation: portrait){
            clip-path: polygon(100% 100%, 50% 100%, 100% 0%);
        }
        
    }
    .process-arrow-holder::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--accent);
        /* This is the key: a polygon clip-path with percentage values */
        clip-path: polygon(100% 50%, 100% 0%, 0% 0%);
        @media(orientation: portrait){
            clip-path: polygon(0% 100%, 50% 100%, 0% 0%);
        }
    }

    a.phone{
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: green;
        max-height: 50%;
        color: var(--button-text);
        transition: all 0.5s;
        box-shadow: green 0px 0px 2px 2px;
        text-shadow: 2px 2px 3px var(--text-invert);
        max-height: 20%;
        height: 2ch;
        width: fit-content;
        padding: 5%;
        text-decoration: none;
        border-radius: 5px;
        @media(orientation: portrait){
            max-height: 70%;
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @media(prefers-color-scheme: light){
            text-shadow: 2px 2px 3px var(--text-invert);
    
        }
        img{
            max-height: 100%;
        }
    }
    
    a.phone:hover{
        transform: translateY(-10%);
        box-shadow: green 0px 0px 15px 5px;
    }

    a.booknow{
        background-color: var(--booknow-color);
        max-height: 50%;
        color: var(--button-text);
        transition: all 0.5s;
        box-shadow: #006aff 0px 0px 2px 2px;
        padding: 5%;
        text-decoration: none;
        @media(orientation: portrait){
            max-height: 70%;
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1rem;
            text-align: center;
        }
        @media(prefers-color-scheme: light){
            color: var(--text-invert);
        }
    }
    
    a.booknow:hover{
        transform: translateY(-10%);
        box-shadow: #006aff 0px 0px 15px 5px;
    }
}

.call-to-action{
    height: 90vh;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    @media(prefers-color-scheme: light){
        color: var(--text-invert);
    }

    h2{
        font-size: 2rem;
    }

    .cta-img{
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: cover;
        top: 0;
        left: 0;
        z-index: -2;
        object-position: top right;
        filter: brightness(0.3);
    }

    .cta-buttons{
        display: flex;
        width: 100%;
        justify-content: space-around;
        height: 10vh;
    }

    a.phone{
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: green;
        height: calc(100% - 2%);
        color: var(--button-text);
        transition: all 0.5s;
        box-shadow: green 0px 0px 2px 2px;
        text-shadow: 2px 2px 3px var(--text-invert);
        width: fit-content;
        text-decoration: none;
        border-radius: 5px;
        padding: 0% 5%;
        @media(orientation: portrait){
            width: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @media(prefers-color-scheme: light){
            text-shadow: 2px 2px 3px var(--text-invert);
            img{
                filter: invert(1);
            }
        }
        img{
            max-height: 70%;
        }
    }
    
    a.phone:hover{
        transform: translateY(-10%);
        box-shadow: green 0px 0px 15px 5px;
    }

    a.booknow{
        background-color: var(--booknow-color);
        height: calc(100% - 2%);
        color: var(--button-text);
        transition: all 0.5s;
        box-shadow: #006aff 0px 0px 2px 2px;
        text-decoration: none;
        display: flex;
        align-items: center;
        border-radius: 5px;
        padding: 0% 5%;
        @media(orientation: portrait){
            width: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1rem;
            text-align: center;
        }
        @media(prefers-color-scheme: light){
            color: var(--text-invert);
        }
    }
    
    a.booknow:hover{
        transform: translateY(-10%);
        box-shadow: #006aff 0px 0px 15px 5px;
    }
}

.service-info-div {
    display: flex;
    width: 100%;
    align-items: stretch;
    justify-content: center; /* Adjust as needed */
    gap: 20px; /* Use a gap for spacing instead of margins */
    @media(orientation: portrait){
        flex-direction: column;
    }
    h2{
        font-size: 2rem;
    }
}

.side-pics {
flex: 1;
overflow: hidden; /* The key property to clip the images */
    @media(orientation: portrait){
        display: flex;
        flex-direction: row;
        max-height: 100px;
        width: 100%;
    }
}

.service-info {
height: fit-content;
flex: 2; /* Adjust flex values to control column widths */
padding: 0% 5%;
    @media(orientation: portrait){
        padding: 0;
    }
    h3{
        margin-top: 15%;
        font-size: 1.5rem;
    }
}

/* Optional: to help with the image rotation */
.side-pics img {
width: 100%;
height: auto;
object-fit:contain;
max-width: 100%;
/* You would use a transform/animation here to move the images */
@media(orientation: portrait){
    height: 100%;
    min-height: 100%;
    max-height: 100px;
    width: auto;
    margin: 0% 5%;
}
}

.icons-info{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
.info-snippet{
    display: flex;
    align-items: center;
    max-height: 50px;
    margin: 5% 0%;
    img{
        max-height: 100%;
        width: 50px;
    }
    img.invert{
        @media(prefers-color-scheme: dark){
            filter: invert(1);
        }
    }
    p{
        width: fit-content;
        padding: 0% 20px;
    }
}
}
img.invert{
    @media(prefers-color-scheme: dark){
        filter: invert(1);
    }
}

.why-us{
    @media(orientation: landscape){
        width: 60%;
    }
    img{
        float: right;
        max-height: 300px;
        border-radius: 50px;
        border: groove var(--accent) 5px;
        max-width: 50%;
        @media(orientation: landscape){
            max-height: 600px;
        }
    }
}

.table-of-contents{
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(50% - 10%);
    padding: 5%;
    border: solid var(--text) 2px;
    border-radius: 20px;
    margin-bottom: 10%;
    a{
        font-size: 1.2rem;
        margin: 2% 0%;
        width: 100%;
        position: relative;
        text-align: left;
        padding-left: 5%;
        text-decoration: none;
    }
    a:before{
        content: "•";
        left: 2%;
        font-size: 1.5rem;
    }
    @media(orientation: portrait){
        width: calc(100% - 10%);

    }
}

.table-of-contents.fill{
    width: calc(100% - 10%);
}

#quote-button{
    position: fixed;
    right: -30vw;
    bottom: 5vh;
    z-index: 10;
    transition: all 0.5s;
    background-color: var(--button);
    width: fit-content;
    padding: 1% 2%;
    border-radius: 25px;
    border: groove var(--text) 2px;
    color: var(--button-text);
    text-decoration: none;
    @media(orientation: portrait){
        font-size: 1.5rem;
        padding: 3% 5%;
        right: -80vw;
    }
}

#quote-button:hover{
    color: var(--link-hover);
    transform: translateY(-5px);
    box-shadow: var(--button) 0px 5px 10px 5px;
}

#quote-button.scrolled{
    right: 5vw;
}

.pricing-section{
    background-color: var(--background);
    width: calc(100%);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 25px;
    margin: 5% 0%;
    h2{
        font-size: 4rem;
        text-align: center;
        margin: 0;
        padding: 2% 0%;
        width: 100%;
        @media(orientation: portrait){
            font-size: 2.5rem;
        }
    }
}

.pricing-info{
    display: flex;
    height: fit-content;
    width: 100%;
    border: solid var(--text) 1px;
    border-radius: 25px;
    overflow: hidden;

    .pricing-categories{
        display: flex;
        flex-direction: column;
        width: 30%;
        height: -webkit-fill-available;
        background-color: transparent;
        border-right: solid var(--text) 1px;
        @media(orientation: landscape){
            border-radius: 0px 0px 0px 25px;
        }

        p{
            cursor: pointer;
            box-sizing: border-box;
            width: 100%;
            margin: 0;
            padding: 10% 0%;
            text-align: center;
            position: relative;
            z-index: 1;
            transition: all 0.5s;
            background-color: rgba(from var(--body-background) r g b / 1);
        }

        P:hover{
            background-color: rgba(from var(--accent) r g b / 1);
        }
    }

    .pricing-body{
        width: 70%;
        display: flex;
        overflow: hidden;

        .pricing-body-top{
            display: flex;
            width: 100%;
            flex-direction: row;
            justify-content: space-around;
            h3{
                width: 45%;
            }
            img{
                max-width: 45%;
            }
        }

        div{
            box-sizing: border-box;
            width: 100%;
            min-width: 100%;
            padding: 5%;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: fit-content;

            img{
                box-sizing: border-box;
                max-width: 100%;
                max-height: 30vh;
                object-fit: contain;
                border-radius: 50px;
                object-fit: contain;
                border: inset var(--body-background) 5px;
            }
        }
    }
}

@media(orientation: portrait){

    .pricing-section{
        width: calc(111%);
        height: fit-content;
    }
    
    .pricing-info{
        flex-direction: column;
        height: -webkit-fill-available;
        border-radius: 0px 0px 25px 25px;
    
        .pricing-categories{
            flex-direction: row;
            overflow-x: auto;
            width: calc(100% - 2px);
            height: 10vh;
            border-bottom: solid var(--text) 1px;
            border-right: none;
            border-radius: 0px;
    
            p{
                width: fit-content;
                padding: 0% 5%;
                display: flex;
                align-items: center;
                min-width: 33.3%;
            }
        }
    
        .pricing-body{
            width: 100%;
            overflow: auto;
            height: fit-content;
        }
    }
    

}


a.booknow{
    background-color: var(--booknow-color);
    color: var(--button-text);
    transition: all 0.5s;
    box-shadow: #006aff 0px 0px 2px 2px;
    border-radius: 5px;
    text-decoration: none;
    @media(orientation: portrait){
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        text-align: center;
    }
    @media(prefers-color-scheme: light){
        color: var(--text-invert);
    }
}

a.booknow:hover{
    transform: translateY(-5px);
    box-shadow: #006aff 0px 3px 10px 5px;
}

.blurbs{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .blurb{
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        height: 100%;
        width: 30%;

        img{
            box-sizing: border-box;
            max-height: 80%;
            max-width: 100%;
            border-radius: 100%;
            padding: 10%;
            background-color: var(--special-backgroud);
            object-fit: contain;
            border: solid var(--text) 1px;
        }

        img.invert{
            @media(prefers-color-scheme: dark){
                border: solid var(--text-invert) 1px;
            }
        }
    }

    @media(orientation: portrait){
        flex-direction: column;

        .blurb{
            width: 100%;
            height: auto;

            img{
                max-height: 35vh;
            }
        }
    }
}

.booknow{
    background-color: #006aff; 
    color: white;
    text-transform: uppercase; 
    font-family: 'Square Market', 'helvetica neue', helvetica, arial, sans-serif; 
    letter-spacing: 1px; 
    font-weight: bolder; 
    cursor: pointer;
}

.facebook{
    background-image: url('/facebookOutline.svg');
}

.facebook:hover{
    background-image: url('/facebookFull.svg');
}

.instagram{
    background-image: url('/instagramOutline.svg');
}

.instagram:hover{
    background-image: url('/instagramFull.svg');
}

.tiktok{
    background-image: url('/tiktokOutline.svg');
}

.tiktok:hover{
    background-image: url('/tiktokFull.svg');
}

.float-right{
    float: right;
    margin: 2%;
    max-width: 30%;
}

.float-left{
    float: left;
    margin: 2%;
    max-width: 30%;
}

.center-self{
    display: block;
    justify-self: center;
}

.privacy-policy{
    padding: 0% 20%;
    padding-top: 10vh;
    background-color: var(--body-background);
    padding-bottom: 5%;
}