@charset "utf-8";
/* CSS Document */
@font-face {font-family: 'Hikurangi';
src: url("Fonts/Hikurangi_2023.ttf") }
@font-face {font-family: 'Canela';
src: url("Fonts/CanelaText-Medium-Trial.otf")}
@font-face {font-family: 'Sansation';
src: url("Fonts/Sansation-Regular.ttf")}
@font-face {font-family: 'Opensans';
src: url("Fonts/OpenSans-Regular.ttf")}
/*colours Red Ochre #913831
Charcoal Grey #4B4B4D
Fern Green#4F7942
Paua Blue #007791
Linen #faf0e6 */
body {
margin: 0;
padding: 0;
}
.bento-container {
}
.Order {width: 22.6%;height: 100vh;float: left; padding: 0.5%; font-size: 22px}
.bento-item1, .bento-item2, .bento-item3, .bento-item4 {
position:relative;
background: #fff;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
height: 40%  
}
.RH, .LH {width: 36.2%;height: 100vh; float: left;margin: 1% }
.bento-item1:hover, .bento-item2:hover, .bento-item3:hover, .bento-item4:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
/*position absolute specifies the exact position relative to the 'relative' container*/
.parallax {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("Tokomaru bay- background.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.title {
position: sticky;
font-family: "Sansation";
top: 0;
background-color:#913831;
padding: 10px;
font-size: 18px;
color: #faf0e6;
z-index: 2;
text-align: center;
}
.content  {
position: relative;
z-index: 1;
padding: 0 20px; /*only padding right and left to avoid the last line of text being pushed off! */
height: 100%; /* Ensure the content fills the bento item */
overflow-y: auto; /* Enable vertical scrolling of contents within the bento box */
}
.content p {
position: relative;
z-index: 1;
padding: 20px;
font-family: "Opensans";
font-size: 18px;
font-weight: bold;
color: #4B4B4D;
}
.content img {
border-radius: 10px;
display: block;
margin: 10px 0;
}
/*enlarge image when hovered over*/
.content img:hover {transform: scale(1.5) translateX(30px); transition: transform 0.5s}
@media (max-width: 850px) {
.RH, .LH, .RH2, .LH2, .Order {width:100%;   padding: 0px; margin-left: 0px; margin-right: 0px
}
.bento-item1, .bento-item2,.bento-item3,.bento-item4, .Order {height: 300px;overflow-y:scroll}
.Banner {vertical-align: middle; height: 290px; 
}
.title {float: left;
text-align: center; height: 40px; z-index: 2}
.content p {
position: relative;
z-index: 1;
padding: 0px;
font-family: "Opensans";
font-size: 12px;
font-weight: bold;
color: #007791;
}
}