/* Global resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

/* Hide body until fully loaded */
body {
    visibility: hidden;
}

/* Remove default link styling */
a,
a:visited,
a:hover,
a:active {
    color: inherit;
    text-decoration: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* ---------------------------------------------------------------------- */
/* Carousel arrow styling with z-index to show on top */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #292823;
    color: #F6F0F0;
    border: none;
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
}

.prev {
    left: 50px;
}

.next {
    right: 50px;
}

/* Bounce animations */
.bounce-right {
    animation: bounceRight 0.3s ease forwards;
}

.bounce-left {
    animation: bounceLeft 0.3s ease forwards;
}

@keyframes bounceRight {
    0% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(20px);
    }

    100% {
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes bounceLeft {
    0% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(-50%) translateX(-20px);
    }

    100% {
        transform: translateY(-50%) translateX(0);
    }
}

/* ---------------------------------------------------------------------- */
/* Other existing styles remain unchanged */

.slides-box-icon {
    align-self: stretch;
    flex: 1;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: contain;
}

.slogan {
    padding-top: 4vh;
    margin-bottom: 4vh;
    /* replaced margin: 60px auto 0 auto; */
    font-size: 100px;
    text-align: center;
    width: 100%;
}

.header2 {
    align-self: stretch;
    position: relative;
    box-shadow: none;
    background-color: #F6F0F0;
    height: 89px;
}

.header1 {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: none;
    border: none;
}

.about {
    position: relative;
    cursor: pointer;
}

.about1 {
    position: relative;
}

.page-links {
    position: absolute;
    top: 24px;
    right: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
}

.placeholder-logo-icon {
    width: 100px;
    position: relative;
    max-height: 100px;
}

.logo {
    position: absolute;
    top: 2px;
    left: 0;
    height: 100%;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
}

.header {
    position: absolute;
    width: 100%;
    /* was calc(100% + 20px) */
    top: 0;
    right: 0;
    /* was -20px */
    left: 0;
    height: 89px;
}

.frame-child {
    align-self: stretch;
    position: relative;
    box-shadow: none;
    background-color: #292823;
    height: 400px;
}

.footer {
    position: relative;
    width: 100%;
    margin-top: 60px;
    font-size: 24px;
    color: #f6f0f0;
    background-color: transparent;
}

.footer-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 0;
    box-sizing: border-box;
}

.header003 {
    position: absolute;
    bottom: 111px;
    left: calc(50% - 112.5px);
    font-size: 24px;
    display: inline-block;
    width: 257px;
}

.clock-icon {
    position: absolute;
    bottom: 117px;
    left: calc(50% - 144.5px);
    width: 20px;
    height: 20px;
}

.monday {
    margin: 0;
}

.days {
    position: absolute;
    bottom: 0;
    left: calc(50% - 90.5px);
    display: inline-block;
    width: 130px;
    height: 105px;
}

.times {
    position: absolute;
    bottom: 0;
    left: calc(50% + 39.5px);
    display: inline-block;
    width: 105px;
    height: 105px;
}

.hours {
    width: 289px;
    position: relative;
    height: 139px;
    font-size: 13px;
}

.header0031 {
    position: absolute;
    bottom: 59px;
    left: calc(50% - 111px);
    display: inline-block;
    width: 257px;
    cursor: pointer;
}

.adress {
    position: absolute;
    bottom: 0;
    left: calc(50% - 89px);
    font-size: 13px;
    display: inline-block;
    width: 235px;
    height: 53px;
}

.phone-icon {
    position: absolute;
    bottom: 58px;
    left: calc(50% - 146px);
    width: 24px;
    height: 24px;
}

.contact {
    width: 292px;
    position: relative;
    height: 87px;
}

.header0032 {
    position: absolute;
    bottom: 81px;
    left: calc(50% - 109px);
    display: inline-block;
    width: 255px;
}

.instagram {
    font-family: Kameron;
}

.links {
    position: absolute;
    bottom: 0;
    left: calc(50% - 87px);
    font-size: 13px;
    display: inline-block;
    width: 233px;
    height: 75px;
}

.vector-icon {
    position: absolute;
    bottom: 82px;
    left: calc(50% - 146px);
    width: 24px;
    height: 24px;
}

.follow {
    width: 292px;
    position: relative;
    height: 109px;
}

.hours-parent {
    position: absolute;
    width: calc(100% - 303px);
    top: 162px;
    right: 162px;
    left: 141px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 142px;
}

.header002 {
    width: 307px;
    position: absolute;
    margin: 0 !important;
    top: 10px;
    left: calc(50% - 165px);
    display: inline-block;
    z-index: 0;
}

.header002-wrapper {
    position: absolute;
    width: calc(100% - 1130px);
    top: 57px;
    right: 1030px;
    left: 100px;
    height: 96px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 64px;
}

.vector-icon1 {
    width: 40px;
    position: relative;
    height: 40px;
}

.vector-wrapper {
    position: absolute;
    width: calc(100% - 1436px);
    top: 326px;
    right: 138px;
    left: 1298px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    cursor: grab;
}

/* Menu PDF image */
.dandelion-cafe-menupdf-page {
    display: block;
    width: 80%;
    max-width: 1200px;
    margin: 40px auto;
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 5;
}

/* Main menu container */
.menu {
    width: 100%;
    position: relative;
    background-color: #F6F0F0;
    height: 100%;
    overflow: visible;
    text-align: left;
    font-size: 35px;
    color: #292823;
    font-family: Kameron;
}

/* ---------------------------------------------------------------------- */
/* About Section Yellow Bar */
.about3 {
    background-color: #FFD700;
    /* a nice yellow */
    padding: 20px;
    margin: 40px auto;
    max-width: 1042px;
    text-align: center;
}

.about3 .header3 {
    font-size: 36px;
    margin-bottom: 10px;
    font-weight: bold;
}

.about3 .body {
    font-size: 18px;
    line-height: 1.5;
}

.rectangle-div {
    width: 100%;
    background-color: #fada7a;
    /* Remove fixed height so the rectangle grows with content */
    /* If you really want a fixed height, you can keep height: 571px */
    padding: 60px 20px;
    /* space on top/bottom and left/right */
    box-sizing: border-box;
}

/* A centered container for the heading and body text */
.about-content {
    /* Restrict maximum width so text doesn't stretch too wide */
    max-width: 800px;
    /* Center the .about-content block horizontally */
    margin: 0 auto;
    /* text-align: left ensures paragraphs are left aligned */
    text-align: left;
}

.header234 {
    font-family: Kameron, serif;
    font-size: 64px;
    color: #292823;
    margin-bottom: 20px;
    /* space after heading */
}

.body234 {
    font-family: Kameron, serif;
    font-size: 24px;
    color: #292823;
    line-height: 1.5;
    /* spacing between lines */
}

.p2 {
    padding-top: 2%;
}