.logo {
    width: 140px;
    height: 60px;
}

/* 

Green White Gold

palette 1
    green #8C947D
    tan #DCC1A8
    blue #72858A
    white #E6E0D2

palette 2
    aquamarine #60BBC1
    dark olive green #475131
    light steel blue #F4F5F5
    green-gray #838963
    dim gray #7A6E5F
*/

:root {
--font-color: goldenrod;
}

.colors {
    --color-green: #8c947d;
    --color-tan: #dcc1a8;
    --color-blue: #72858a;
    --color-white: #e6e0d2;

    --color-aquamarine: #60bbc1;
    --color-dark-olive-green: #475131;
    --color-light-steel-blue: #f4f5f5;
    --color-green-gray: #838963;
    --color-dim-gray: #7a6e5f;

}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
}

body {
    /* background-color: #e2ece9; */
    /* background-color: #F4F5F5; */
    background-color: black;
    /* border-left: 30px solid black;
    border-right: 30px solid black;
    border-top: 24px solid black;
    border-bottom: 13vh solid black; */
    /* border-bottom: 24px solid black; */
    width: 100vw;
    min-height: 110vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex-direction: column;
    display: flex;

    /* font-family: "OPTINewsGothicLight"; */
    /* font-family: 'Mulish', sans-serif; */
    /* overflow-x: hidden; */
    /* overflow-y: hidden; */
}

body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    /* make scrollbar transparent */
}

/* a {
    text-decoration: none;
    color: none;
} */

.background-border {
    /* position: absolute; */
    /* top: 120px; */
    /* Start below navbar within the background */
    left: calc(25% - 12px);
    /* Account for border thickness */
    width: calc(50% + 24px);
    /* width: 100%; */
    height: calc(100% - 120px);
    /* Use 100% of background height minus navbar */
    /* border-left: 24px solid black;
    border-right: 24px solid black;
    border-top: 24px solid black;
    border-bottom: 24px solid black; */
    /* padding: 24px; */
    box-sizing: border-box;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.background-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    
}

.background {
    /* position: absolute;
    top: 10%; */
    /* left: 2%; */
    z-index: 2;

    max-width: 68vw;
    /* Optional: set maximum width constraint */
    max-height: 42vh;
    /* Optional: set maximum height constraint */
    /* width: auto; */
    /* Let image determine width */
    /* height: auto; */

    object-fit: contain;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    filter: brightness(0.75) contrast(1) saturate(1);
    transition: all 0.4s;

    --s: 32px;
    /* the size on the corner */
    --t: 4px;
    /* the thickness of the border */
    --g: 12px;
    /* the gap between the border and image */

    padding: calc(var(--g) + var(--t));
    outline: var(--t) solid goldenrod;
    /* the color here */
    outline-offset: calc(-1 * var(--t));
    mask:
        conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0 / calc(100% - var(--s)) calc(100% - var(--s)),
        conic-gradient(#000 0 0) content-box;

    /* flex-grow: 1; */
    /* margin-top: 120px; */

    /* backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); */
    /* background-color: rgba(114, 133, 138, 0.5); */
}

.background:hover {
    filter: brightness(0.7);
    opacity: 0.95;
}

.circle-cover {
    width: 100vw;
    height: 100vh;
    background-color: white;
    mask: radial-gradient(circle at center, transparent 8%, rgba(0, 0, 0, 0.1) 9%, rgba(0, 0, 0, 0.9) 11%, black 12%);
    /* -webkit-mask: radial-gradient(circle at center, transparent 18%, rgba(0,0,0,0.1) 19%, rgba(0,0,0,0.9) 21%, black 22%); */
    z-index: 20;
    position: fixed;
    top: 0;
    left: 0;
}

.gold-dots {
    width: 50vw;
    padding: 0 6px;
    height: 50vh;
    background: radial-gradient(circle at center, #cba135 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center;
    z-index: 100;

    position: absolute;
    left: 25%;
    top: 22%;
    /* z-index: 15; */
    /* transform: translate(-50%, -50%); */
    /* margin: 0 auto; */
}

.body-no-scroll {
    overflow: hidden !important;
}

.header-title {
    color: goldenrod;
    font-size: 78px;
    font-weight: 700;
    z-index: 1;
    text-align: center;
    font-family: "Oswald", sans-serif;
    letter-spacing: 24px;
    margin-top: -6px;
    /* height: 20px; */
    /* margin-top: 8px; */
}

.location {
    font-family: "Noto serif";
    width: 200;
    font-size: 14px;
    margin-left: 52.5%;
    margin-top: -20px;
    height: 100%;
    color: white;
    z-index: 3;
    /* margin-left: 60%; */
}

.navbar-container {
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar {
    width: 100%;
    height: 60px;

    /* background-color: #DCC1A8; */
    /* background-color: #9e836a; */
    /* background-color: #f3d9c0; */

    /* this is the in-use color */
    /* background-color: #CBA135; */

    /* background-color: red; */
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;

    /* opacity: 0; */
    /* transform: translateY(-20px); */
    transition: opacity 1s ease-in-out;
}

.navbar.loaded {
    opacity: 1;
    /* transform: translateY(0); */
}

.nav-animation-container {
    width: 100%;
    height: 60px;
    overflow: hidden;
    position: absolute;
    display: flex;
    justify-content: center;
    /* left: 50%; */
    /* top:20px; */
}

.nav-animation-line {
    width: 4px;
    height: 60px;
    margin: 0 1px;
    opacity: 0.78;
    background-color: rgb(240, 199, 67);
    /* position: absolute; */
    /* left: 50%; */
    /* top:20px; */
}

.body-no-scroll {
    overflow: hidden !important;
}

/* .navbar-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
} */

.logo-container {
    width: 120px;
    height: 120px;
    display: flex;
    /* object-fit: cover; */
    /* justify-content: center; */
    /* align-items: center; */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 11;
    /* margin-right: 20px; */
}

.logo-img {
    width: auto;
    height: auto;
    /* object-fit: cover; */
}

.navsection-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.navsection {
    /* background-color: #72858A; */
    /* background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.5); */
    /* outline-offset: 10px 4px 8px 8px; */
    width: 80px;
    height: 40px;
    /* border: 1px solid #72858A; */
    /* padding-left: 4px;
    padding-right: 20px; */
    /* padding: 0 20px; */
    /* text-align: center; */
    margin: 0 80px;
    /* padding-top: 10px; */
    /* vertical-align: middle; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: rgba(255, 255, 255, 0.12); */
    transition: background-color 300ms;
    cursor: pointer;
}

.navsection:hover {
    /* background-color: rgba(255, 255, 255, 0.4); */
    transition: background-color 300ms;
}

.navbar-style-two-container {
    display: flex;
    height: 100vh;
    align-items: center;
}

.navbar-style-two {
    margin: 0 auto;
    text-align: center;
    color: gold;
    background-color: grey;
}

.layout {
    width: 100%;
    height: calc(100vh - 60px);
    /* height: 100%; */
    padding-top: 60px;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    /* align-items: center; */
    z-index: 1;
    overflow: hidden;
}

.layout-section {
    width: 25%;
    height: 100vh;
    /* background-color: #c7ad94; */
    /* background: linear-gradient(135deg, #fcefe4 0%, #f0e6d6 100%); */

    background-color: #fcefe4;
    z-index: -1;
    /* flex-shrink: 0; */
}

.layout-text-container {
    width: 16vw;
    height: 16vw;
    /* background-color: #CBA135; */

    background-size: cover;
    /* background-position: center; */
    font-family: 'Marvel', sans-serif;
    font-size: 20px;
    position: relative;

    z-index: 10;
    /* border-right: 14px solid #CBA135;
    border-bottom: 1px solid #CBA135; */
}

.layout-text-container-one {
    /* background-image: url('img/extensions-three.jpeg'); */
    top: 6%;
    left: 4%;
    filter: brightness(0.9) saturate(0.9) contrast(0.9);
}

.layout-text-container-two {
    /* background-image: url('img/topper-four.jpeg'); */
    top: 16%;
    left: 10%;
    filter: brightness(0.9) saturate(0.9) contrast(0.9);
}

.layout-text-container-three {
    /* background-image: url('img/extensions-one.jpeg'); */
    top: 6%;
    left: 4%;
    filter: brightness(0.9) saturate(0.9) contrast(0.9);
}

.layout-text-container-four {
    /* background-image: url('img/bride-event.jpeg'); */
    top: 6%;
    left: 4%;
    filter: brightness(0.9) saturate(0.9) contrast(0.9);
}

.layout-text-container-outline {
    width: 16vw;
    height: 16vw;
    position: absolute;
    top: 14.5%;
    left: 2%;
    z-index: -1;
    background-color: #cba135;
    pointer-events: none;
}

.layout-text-container-outline-one {
    top: 14.5%;
    left: 2%;
}

.layout-text-container-outline-one {
    top: 58%;
    left: 3.6%;
}

.layout-text {
    padding: 10px;
    position: absolute;
    top: 102%;
    left: 6%;
    width: 100%;
    font-size: 50px;
    /* font-weight: bold; */
    color: #cba135;
    /* transform: translateY(1100%); */
    font-family: 'Prata', serif;
}

.layout-text-two {
    font-size: 18px;
    color: #cba135;
    font-family: 'Prata', serif;
    position: absolute;
    right: 4%;
    top: 10%;
}

/* .layout-text-container-style-two {
    width: 25%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #CBA135;
    pointer-events: none;
} */

#layout-section-middle {
    /* background-image: url('img/emerald.jpg');
    background-size: cover;
    background-position: 56% 20%;
    background-repeat: no-repeat;
    filter: brightness(0.6); */
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    /* justify-content: center; */
    /* align-items: flex-start; */
    width: 100%;
    height: 100vh;
    z-index: 3;
    flex: 1;
    position: relative;
    /* overflow: hidden; */
    /* border-left: 20px solid #CBA135; */
}

#bgvideo {
    position: absolute;
    /* top: 0; */
    /* Start at top of border container */
    /* left: -36px; */
    /* Start at left of border container */
    /* width: calc(100% + 72px); */
    width: 100%;
    height: 100vh;
    opacity: 0;
    animation: fadeIn 2.2s forwards;
    animation-delay: 0.9s;
    /* Full height of border container */
    object-fit: cover;
    z-index: 0;
    /* filter: blur(8px);
    -webkit-filter: blur(8px); */
    /* opacity: 0.82; */
    /* filter: brightness(0.4); */
    filter: brightness(0.36) contrast(1.05) saturate(0.6);
    /* border-left: 8px solid #CBA135;
    border-right: 8px solid #CBA135; */
    /* margin: 0 -10px; */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.layout-img-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* margin: 0 auto; */
    /* height: calc(100% - 64px); */
    top: 8px;
    left: -7%;
}

.layout-img {
    width: 100%;
    height: 120%;
    z-index: 10;
    /* top: -10%; */
    position: absolute;
    top: -32px;
    /* Hide top 32px */
    bottom: -800px;
    object-fit: cover;
    filter: brightness(0.7) saturate(1.2);
    /* filter: blur(8px);
    -webkit-filter: blur(8px); */
    /* clip-path: inset(0 0 304px 0); */
    /* clip-path: inset(0 0 276px 0); */
}

.home-text {
    width: 300px;
    height: 100px;
    color: white;
    font-size: 32px;

    /* position: absolute;
 top: 20%;
 left: 50%; */
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 1.5s ease-in-out,
        transform 1.5s ease-in-out;
}

.home-text.loaded {
    opacity: 1;
    transform: scale(1);
}

.showcase-navbar {
    transform: translateY(100px);
    width: 25%;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

.showcase-navsection {
    background-color: blue;
    color: white;
    font-size: 32px;
    width: 100%;
    text-align: center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-container {
    /* width: 100%; */
    width: 100vw;

height: 192px;
display: flex;
justify-content: center;
position: absolute;
top: 74%;
pointer-events: none;
    /* overflow: visible !important; */
    /* position: absolute;
    width: 600px;
    height: 300px;
    left: 50%;
    top: 70%;
    transform: translateX(-50%); */
}

.showcase-section {
    /* min-width: 600px;
    width: 600px;
    height: 192px;
    position: relative;
    clip-path: inset(-30px -20px);
    transition: clip-path 0.3s ease;     */

     position: relative;
    width: 100vw;
    height: 192px;
    overflow: visible;          /* no clipping here */
    pointer-events: none;
}

/* Inner wrapper that slides smoothly */
.showcase-slider {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;          /* start from center of section = center of viewport */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    z-index: 10;
}

.showcase {
    width: 184px;
    height: 184px;
    margin: 4px 16px;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.showcase.active {
    transform: scale(1.05);
}

.showcase-img {
    width: 184px;
    height: 184px;
    object-fit: cover;
    transition:
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform-origin 0.2s;
        /* z-index 0.1s; */
    will-change: transform, transform-origin;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.showcase-img.zoomed {
    transform: scale(1.4);
    /* z-index: 202; */
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.showcase-img.center {
    transform: scale(1.2);
    /* z-index: 150; */
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.showcase-img.center.zoomed {
    transform: scale(1.5);
    /* z-index: 200; */
}

.showcase:hover {
    z-index: 20;
}

/* .showcase-section:has(.showcase:hover) {
    clip-path: inset(-50px -38px);
} */

.showcase-container:has(.showcase-img.center:hover) .showcase-borders {
    --g3: 36px;
}

.showcase-borders {
    width: 212px;
    height: 212px;

    pointer-events: none;
    z-index: 0;
     position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

transition: padding 0.3s ease, outline-offset 0.3s ease;


    --s3: 20px;
    /* the size on the corner */
    --t3: 4px;
    /* the thickness of the border */
    --g3: 12px;
    /* the gap between the border and image */

    padding: calc(var(--g3) + var(--t3));
    outline: var(--t3) solid goldenrod;
    /* the color here */
    outline-offset: calc(-1 * var(--t3));
    mask:
        conic-gradient(at var(--s3) var(--s3),
            #0000 75%, #000 0) 0 0 / calc(100% - var(--s3)) calc(100% - var(--s3)),
        conic-gradient(#000 0 0) content-box;
}

.link {
    text-decoration: none;
    /* color: #475131; */
    color: white;
    margin-bottom: 2px;
    font-size: 28px;
    font-weight: 700;
    /* font-family: 'Poppins', sans-serif; */
    font-family: 'Prata', sans-serif;
    letter-spacing: 1.5px;
}

.top-border {
    width: 100vw;
    height: 24px;
    background-color: black;
    position: fixed;
    left: 0;
    top: 0;
}

.title {
    font-family: 'Parisienne', cursive;
    color: white;
    width: 100%;
    text-align: center;
    height: 80px;
    font-size: 40px;
    z-index: 3;
    margin: 8px 0;
    font-weight: 400;
    /* background-color: rgba(255,255,255,0.12); */
    /* transition: background-color 300ms; */
}

/* .title:hover {
    background-color: rgba(255,255,255,0.4);
} */

#transition-overlay {
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    height: 100vh;
    background: black;
    z-index: 4;
    transition: right 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    pointer-events: none;
}

#transition-overlay.active {
    right: 31%;
    pointer-events: all;
}

#transition-overlay-two {
    position: fixed;
    top: 0;
    right: -100vw;
    /* right:0; */
    width: 10.9vw;
    height: 100vh;
    background: black;
    z-index: 4;
    transition: right 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    pointer-events: none;
}

#transition-overlay-two.active {
    right: 0;
    pointer-events: all;
}

#transition-overlay-three {
    position: fixed;
    /* bottom:-100vh; */
    bottom: -200vh;
    right: 10.9vw;
    width: 21vw;
    height: 200vh;
    background: black;
    z-index: 1;
    transition: bottom 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    pointer-events: none;
}

#transition-overlay-three.active {
    bottom: 80vh;
    pointer-events: all;
}

#transition-overlay-four {
    position: fixed;
    bottom: -100vh;
    right: 10.75vw;
    width: 21vw;
    height: 40vh;
    background: black;
    z-index: 1;
    transition: bottom 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    pointer-events: none;
}

#transition-overlay-four.active {
    bottom: 0;
    pointer-events: all;
}

#transition-overlay-alt {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 85vw;
    height: 100vh;
    background: white;
    z-index: 4;
    transition: left 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    pointer-events: none;
}

#transition-overlay-alt.active {
    left: 54.84vw;
    pointer-events: all;
}

#transition-overlay-alt-two {
    position: fixed;
    top: 0;
    left: -20vw;
    width: 18vw;
    height: 100vh;
    background: white;
    z-index: 4;
    transition: left 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    pointer-events: none;
}

#transition-overlay-alt-two.active {
    left: -3vw;
    pointer-events: all;
}

#transition-overlay-alt-three {
    position: fixed;
    bottom: -200vh;
    left: 15vw;
    /* bottom: 0; */
    width: 612px;
    height: 100vh;
    background: white;
    z-index: 1;
    transition: bottom 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    pointer-events: none;
}

#transition-overlay-alt-three.active {
    bottom: 0;
    pointer-events: all;
}

#transition-overlay-alt-four {
    position: fixed;
    bottom: -100vh;
    right: 10.75vw;
    width: 21vw;
    height: 40vh;
    background: black;
    z-index: 1;
    transition: bottom 0.7s cubic-bezier(0.77, 0, 0.18, 1);
    pointer-events: none;
}

#transition-overlay-alt-four.active {
    bottom: 0;
    pointer-events: all;
}

#transition-image {
    background-image: url('img/eye.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 400px;
    height: 600px;
    position: fixed;
    top: 18.35%;
    right: 10.88%;
    z-index: 3;
    display: none;
}

#transition-image-two {
    background-image: url('img/face.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 612px;
    height: 408px;
    position: fixed;
    bottom: 15%;
    left: 15%;
    z-index: 3;
    display: none;
}

/* .imgtwo {
    object-fit: cover;   
    width: 400px;
    height: 600px;
    position: absolute;
    right: 10%;
    border-top: 1px solid white;
    border-right: 1px solid white;
    padding: 16px 16px 4px 4px;
    background: transparent;
} */

/* .imagesection {
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
} */

/* .img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    opacity: 0.9;
    position: absolute;
    top: 0;
    z-index: -1;
    display: none;
} */

#service-wallpaper.active {
    display: block;
}

#about-wallpaper.active {
    display: block;
}

#home-btn-container {
    display: none;
}

#home-btn-container.active {
    display: flex;
}

#services-btn-container {
    display: flex;
}

#services-btn-container.active {
    display: none;
}

.textcontainer {
    width: 260px;
    height: 440px;
    background-color: black;
    position: absolute;
    left: 10%;
    top: 25%;
    padding: 2px 4px;
}

.textstyle {
    color: white;
    font-size: 10px;
}

.imgtwo {
    object-fit: cover;
    width: 400px;
    height: 600px;
    /* margin-left: 48px; */
    position: absolute;
    right: 10%;
    display: block;
    /* border-top: 1px solid white;
    border-right: 1px solid white; */
    padding: 16px 16px 4px 4px;
    /* top right bottom left */
    background: transparent;
    /* ensures padding is visible */

    /* Top and Bottom Fade */
    /* -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.7) 12%,
        rgba(0,0,0,1) 25%,
        rgba(0,0,0,1) 75%,
        rgba(0,0,0,0.7) 88%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.05) 12%,
        rgba(0,0,0,1) 25%,
        rgba(0,0,0,1) 75%,
        rgba(0,0,0,0.05) 88%,
        rgba(0,0,0,0) 100%
    ); */

    /* top right fade */
    /* -webkit-mask-image: linear-gradient(
        225deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.25) 15%,
        rgba(0,0,0,0.5) 30%,
        rgba(0,0,0,0.85) 50%,
        rgba(0,0,0,1) 65%
    );
    mask-image: linear-gradient(
        225deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.25) 15%,
        rgba(0,0,0,0.5) 30%,
        rgba(0,0,0,0.85) 50%,
        rgba(0,0,0,1) 65%
    ); */
}

#img-two-hide.active {
    display: none;
}

.imgtwoContainer {
    /* margin: 0px 48px; */
}

#img-three.active {
    display: block;
}

#img-three {
    display: none;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    object-fit: cover;
    /* scale:1.25;
        height: 58vh; */
}

#white-block {
    background-color: cyan;
    width: 800px;
    height: 500px;
    /* position: absolute;
    top: 0;
    left: 0; */
    z-index: 1000;
}

#brown-block {
    background-color: #dcc1a8;
    position: absolute;
    top: 140px;
    width: 800px;
    height: 600px;
}

.borders {
    width: 40px;
    height: 40px;
    position: absolute;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    right: 30.5%;
    bottom: 15.5%;
}

.imagetext {
    position: absolute;
    top: 50%;
    /* left: 50%; */
    /* margin: 0 auto; */
    text-align: center;
    width: 100%;
    font-size: 42px;
    color: white;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

.hair {
    /* width: calc(100vw - 6vw); */
    width: 50vw;
    height: 100%;
    /* transform: translateY(40vh); */
    /* filter: blur(6px); */
    filter: brightness(0.46);
    object-fit: cover;
    display: block;
    position: fixed;
    /* top: -10vh; */
    left: 40vw;
    /* border: 1px solid #72858A; */
}

.call-message {
    color:rgb(240, 199, 67);
    font-family: 'Noto serif';
    letter-spacing: 0.3rem;
    font-size: 26px;
    font-weight: 350;
    margin-top: 32px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 0px 4px;
    text-align: center;
    /* background:linear-gradient(left, #000, #000) no-repeat 50px 50px; */
    /* box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1); */
    
}

.email-message {
    text-decoration: none;
    color:rgb(240, 199, 67);
}

.schedule-container {
    width: 100%;
    justify-content: center;

    position: absolute;
    top: 58%;
    display: flex;
    /* left: 40%; */
    z-index: 5;
    
    /* text-decoration: none; */
    /* font-family: 'Playfair Display', serif; */
}

.schedule-border {
width: 300px;
    height: 100px;
    /* display: flex; */
    transition: outline 1.2s, padding 1.2s, outline-offset 1.2s;
    --s2: 12px;
    --t2: 4px;
    --g2: 18px;

    padding: calc(var(--g2) + var(--t2));
    outline: var(--t2) solid rgba(218, 165, 32, 0.4);
    outline-offset: calc(-1 * var(--t2));
    mask:
        conic-gradient(at var(--s2) var(--s2),
            #0000 75%, #000 0) 0 0 / calc(100% - var(--s2)) calc(100% - var(--s2)),
        conic-gradient(#000 0 0) content-box;
}

.schedule-container:hover {
    /* outline: var(--t2) solid rgba(218, 165, 32, 1); */
    
}

.schedule {

    background-color: goldenrod;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 28px;

    /* position: absolute; */
    

    width: 20vw;
    height: 10vh;
    max-width: 20vw;
    max-height: 10vh;

    font-family: "Oswald", sans-serif;
    font-weight: 600;

    text-decoration: none;
    color: black;

}

/* .schedulebutton {
    /* color: #475131; */
/* color: #dcc1a8; */
/* text-shadow: 0px 8px 8px white, 0 0 2px white; */
/* border: none; */
/* background-color: rgba(0, 0, 0, 0); */
/* text-decoration: none; */
/* position:absolute; */
/* text-shadow: 0 0 34px #ffffff; */
/* background-color: rgba(255, 255, 255, 0.2); */
/* backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); */
/* background-color: #72858A; */
/* width: 340px; */
/* height: 70px; */
/* border-radius: 10px; */
/* border: 1px solid black; */
/* font-size: 32px; */

/* font-family: "OPTINewsGothicLight"; */
/* font-family: 'Playfair Display', serif; */
/* cursor: pointer; */
/* transition: backgro/und-color 300ms; */
/* background-color: rgba(255, 255, 255, 0.5); */
/* background-color: #7/a6e5f; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center;/ */
/* margin: 250px auto 0px auto; */
/* } */

/* .schedulebutton:hover { */
/* background-color: rgba(255, 255, 255, 0.9); */
/* text-shadow: 0 0 34px #ffffff; */
/* color: #475131; */
/* color: black; */
/* transition: all 300ms; */
/* } */

.zoom-link {
    text-decoration: none;
    color: black;
}

footer {
    position: relative;
    bottom: 0;
    /* color: white; */
    color: var(--font-color);
    /* background-color: #cba135; */
    background-color: black;
    width: 100vw;
    height: 10vh;
    z-index: 3;
    font-family: 'Crimson Pro', serif;
    margin-top: auto;
}

/* width: 96.9vw; */
/* overflow: hidden; */

/* Loading Animations */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-in.loaded {
    opacity: 1;
}

.slide-in-top {
    opacity: 0;
    transform: translateY(-50px);
    transition:
        opacity 1s ease-in-out,
        transform 1s ease-in-out;
}

.slide-in-top.loaded {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition:
        opacity 1s ease-in-out,
        transform 1s ease-in-out;
}

.slide-in-left.loaded {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition:
        opacity 1s ease-in-out,
        transform 1s ease-in-out;
}

.slide-in-right.loaded {
    opacity: 1;
    transform: translateX(0);
}



/* Dynamic Edge Glow */
.edge-glow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
}

.edge-glow-top,
.edge-glow-bottom,
.edge-glow-left,
.edge-glow-right {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}

/* Top edge glow */
.edge-glow-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, 
        rgba(203, 161, 53, 0.4) 0%, 
        rgba(203, 161, 53, 0.2) 30%, 
        rgba(203, 161, 53, 0.1) 60%, 
        transparent 100%
    );
    transform-origin: center top;
}

/* Bottom edge glow */
.edge-glow-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, 
        rgba(203, 161, 53, 0.4) 0%, 
        rgba(203, 161, 53, 0.2) 30%, 
        rgba(203, 161, 53, 0.1) 60%, 
        transparent 100%
    );
    transform-origin: center bottom;
}

/* Left edge glow */
.edge-glow-left {
    top: 0;
    left: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(203, 161, 53, 0.4) 0%, 
        rgba(203, 161, 53, 0.2) 30%, 
        rgba(203, 161, 53, 0.1) 60%, 
        transparent 100%
    );
    transform-origin: left center;
}

/* Right edge glow */
.edge-glow-right {
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(to left, 
        rgba(203, 161, 53, 0.4) 0%, 
        rgba(203, 161, 53, 0.2) 30%, 
        rgba(203, 161, 53, 0.1) 60%, 
        transparent 100%
    );
    transform-origin: right center;
}

/* Active states with enhanced glow */
.edge-glow-top.active {
    opacity: 1;
    box-shadow: 0 0 30px rgba(203, 161, 53, 0.3);
}

.edge-glow-bottom.active {
    opacity: 1;
    box-shadow: 0 0 30px rgba(203, 161, 53, 0.3);
}

.edge-glow-left.active {
    opacity: 1;
    box-shadow: 0 0 30px rgba(203, 161, 53, 0.3);
}

.edge-glow-right.active {
    opacity: 1;
    box-shadow: 0 0 30px rgba(203, 161, 53, 0.3);
}

/* Dynamic Edge Glow - Localized */
.edge-glow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    mix-blend-mode: screen;
}

.edge-glow-spot {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    border-radius: 50%;
}

/* Top edge glow spot */
.edge-glow-top {
    background: radial-gradient(ellipse 100px 80px at center bottom,
        rgba(203, 161, 53, 0.6) 0%,
        rgba(203, 161, 53, 0.4) 30%,
        rgba(203, 161, 53, 0.2) 60%,
        transparent 100%
    );
    transform: translateY(-50%);
}

/* Bottom edge glow spot */
.edge-glow-bottom {
    background: radial-gradient(ellipse 100px 80px at center top,
        rgba(203, 161, 53, 0.6) 0%,
        rgba(203, 161, 53, 0.4) 30%,
        rgba(203, 161, 53, 0.2) 60%,
        transparent 100%
    );
    transform: translateY(50%);
}

/* Left edge glow spot */
.edge-glow-left {
    background: radial-gradient(ellipse 80px 100px at right center,
        rgba(203, 161, 53, 0.6) 0%,
        rgba(203, 161, 53, 0.4) 30%,
        rgba(203, 161, 53, 0.2) 60%,
        transparent 100%
    );
    transform: translateX(-50%);
}

/* Right edge glow spot */
.edge-glow-right {
    background: radial-gradient(ellipse 80px 100px at left center,
        rgba(203, 161, 53, 0.6) 0%,
        rgba(203, 161, 53, 0.4) 30%,
        rgba(203, 161, 53, 0.2) 60%,
        transparent 100%
    );
    transform: translateX(50%);
}

/* Active state with subtle shadow */
.edge-glow-spot.active {
    opacity: 1;
     filter: blur(12px) brightness(1.3);
}


.edge-underglow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;

    background: radial-gradient(
        400px circle at var(--x) var(--y),
        rgba(203,161,53,0.15),
        transparent 70%
    );

    transition: background 0.1s linear;
}

/* PARTICLES */
.edge-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
    mix-blend-mode: screen;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;

    background: radial-gradient(circle,
        rgba(255, 220, 120, 0.9) 0%,
        rgba(203, 161, 53, 0.6) 40%,
        rgba(203, 161, 53, 0.2) 70%,
        transparent 100%
    );

    filter: blur(2px);
    will-change: transform, opacity;
}