@font-face {
    font-family: 'Youthopia';
    src: 
         url('fonts/YOUTHOPIA.TTF') format('TTF');
    font-weight: normal; /* Adjust if needed */
    font-style: normal; /* Adjust if needed */
}

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

body {
    font-family: 'Youthopia', sans-serif;
}


/* Import and set Inter font globally for the entire document */
body {
    font-family: "Inter", sans-serif;
    font-weight: 400; /* Default weight */
    color: #5d4b3e;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------- HEADER --------- */
header {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #fff;
    width: 100vw;
    height: 100px;
    position: fixed;
    top: 0;
    z-index: 1000;
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.00), 0px 26px 10px 0px rgba(0, 0, 0, 0.04), 0px 15px 9px 0px rgba(0, 0, 0, 0.13), 0px 7px 7px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
}

.navigation-container {
    padding: 16px 0;
    position: relative;
    background-color: #ffffff;
}

.link:hover {
    text-decoration: underline;
}

.link {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
}

.logo {
    height: 130px;
}

.burger-menu {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.navigation ul.active {
    display: flex;
    position: absolute;
    flex-direction: column;
    width: 100%;
    top: 100px;
    left: 0;
    background-color: #ffffff;
    z-index: 1000; /* the higher the number, the closer the element is to the user. Default = 0. I set it to one so that the burger menu items are above the logo */
}

.navigation ul {
    display: none;
}

.navigation ul li {
    margin: 16px 0;
    text-align: center;
}

.burger-menu .line {
    width: 25px;
    height: 2px;
    background-color: #000;
    margin: 3px 0;
    border-radius: 30px;
}

.link {
    color: rgb(0, 0, 0);
}

.active-link {
    color: white;
    background-color: #da6382;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 100px;
    font-family: "Inter", sans-serif;
    width: 100px;
}

header .logo img {
    width: 60px;
    position: fixed;
}

header .icons a img {
    width: 25px;
    margin-left: 250px;
    margin-top: 15px;
}

/* --------- HEADER END ---------- */

/* ------------------ OUTDOORS/INDOORS PAGE --------------- */

.outdoors-indoors {
    position: relative;
    margin-top: 100px;
}

.waves-io {
    width: 100vw;
}

.text-container {
    position: relative;
    margin-top: -420px;
}

.text-container h1 {
    color: #EEEB56;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    margin-bottom: 19px;
}

.text-container p {
    color: #ffffff;
    text-align: center;
    margin-bottom: 19px;
}

.io-images {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 781px;
    margin-bottom: 139px;
}

.io-images a {
    margin-bottom: -129px;
}

/* ------------------ OUTDOORS/INDOORS PAGE END --------------- */

/* ------------------ BOOK A TABLE PAGE END --------------- */

.waves-book {
    width:100vw;
    margin-top: 100px;
}

.book-a-table {
    position: relative;
}

.book-a-table h1 {
    color: #EEEB56;
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-bottom: 22px;
    margin-top: -40px;
}

.arrow {
    margin-left: 83px;
}

/* ------------------ CALENDAR SECTION --------------- */

.calendar-container p {
    color: white;
    text-align: left;
    margin-left: 53px;
    margin-bottom: 20px;
    font-weight: bold;
}

.calendar {
    padding: 20px;
    width: 320px;
    height: 320px;
    background-color: #ffffff;
    border-radius: 20px;
    margin-left: 53px;
    box-shadow: 0px 64px 18px 0px rgba(0, 0, 0, 0.00), 0px 41px 16px 0px rgba(0, 0, 0, 0.01), 0px 23px 14px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
    z-index: 3;
    align-items: center;
    margin-bottom: 78px;
    
}

.calendar h3 {
    color: #2C76A8;
    text-align: left;
    margin: 0;
    padding: 10px 0;
    font-size: 18px;
}

.calendar-container {
    position: relative;
    margin-top: -420px;
    z-index:1;
}

.calendar table {
    width: 100%;
    height: 280px;
    box-align: center;
    color: black;
    border-collapse: collapse;
}

.calendar table th {
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    margin-bottom: 10px;
}

.calendar table td {
    text-align: center;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    width: 14.28%;
    font-size: 12px;
}

.today {
    background-color: #2C76A8;
    color: white;
}

/* ------------------ CALENDAR SECTION END --------------- */


/* ------------------ PARTY SIZE SECTION --------------- */
.party-size p {
    color: #000;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 13px;
}

.circle-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 33px;
}

.circle {
    width: 94px;
    height: 94px;
    background-color: #da6382;
    border-radius: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: bold;
    margin: 10px;
}

/* ------------------ PARTY SIZE SECTION END --------------- */

/* ------------------ VISITING TIME SECTION --------------- */

.visiting-time {
    position: relative;
}

.waves-vt {
    width: 100vw;
}

.visiting-time-container {
    position: relative;
    margin-top: -420px;
}

.visiting-time-container img {
    margin-left: 25px;
}

.visiting-time-container h1 {
    color:#EEEB56;
    margin-bottom: 28px;
    font-size: 24px;
}

/* ------------------ VISITING TIME SECTION END --------------- */

/* ------------------ CONTACT INFO SECTION --------------- */

.contact-info h6 {
    color: #000;
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    margin-left: 56px;
    margin-bottom: 12px;
}

.contact-info input {
    width: 321px;
    height: 47px;
    background-color: #d9d9d9;
    border-radius: 20px;
    border: 2px grey;
    padding: 27px;
    color: #000;
    margin-bottom: 12px;
    align-items: center;
}

.input-container {
    margin-left: 50px;
    margin-bottom: 35px;
}

.book-button {
    width:106px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background-color: #da6382;
    color: white;
    margin-left: 162px;
    box-shadow: 0px 64px 18px 0px rgba(0, 0, 0, 0.00), 0px 41px 16px 0px rgba(0, 0, 0, 0.01), 0px 23px 14px 0px rgba(0, 0, 0, 0.05), 0px 10px 10px 0px rgba(0, 0, 0, 0.09), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);

}



/* ------------------ CONTACT INFO SECTION END --------------- */

/* ------------------- BOOK A TABLE PAGE END --------------------- */

/* ------------ FOOTER ---------------- */
.footer {
    height: 650px;
    width: 100vw;
    background-color: #d9d9d9;
    border-radius: 30px 30px 0 0;
    margin-top: 50px;
    align-items: c;
}

.footer h5 {
    margin-left: 70px;
}

.mapstyle {
    margin-top: 50px;
    margin-left: 40px;
    margin-bottom: 20px;
    width: 350px;
}

.footer-links {
    display: flex;
    flex-direction: space-between;
    align-items: center;
    justify-content: center;
    background-color: #da6382;
    width: 350px;
    height: 31px;
    border-radius: 20px;
    margin-left: 42px;
    margin-top: 20px;
}

.footer-links a {
    text-decoration: none;
    margin-right: 10px;
    margin-left: 10px;
    color: #ffffff;
    font-size: 12px;
}

.text-footer {
    margin-top: 30px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 30px;
}

.logo-footer {
    width: 67px;
    margin-left: 185px;
}

.rights {
    margin-top:10px;
    text-align: center;
    margin-bottom: 20px;
}
/* ------------ FOOTER END -------------- */