@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
    
    @font-face {
         font-family: 'Cotton';
        src: url('../fonts/Cotton-Regular.eot');
        src: url('../fonts/Cotton-Regular.eot?#iefix') format('embedded-opentype'),
             url('../fonts/Cotton-Regular.woff2') format('woff2'),
             url('../fonts/Cotton-Regular.woff') format('woff'),
             url('../fonts/Cotton-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'MyCustomFont';
        src: url('../fonts/CormorantGaramond-Bold.woff2') format('woff2'),
             url('../fonts/CormorantGaramond-Bold.woff') format('woff'),
             url('../fonts/CormorantGaramond-Bold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
    }
    @font-face {
        font-family: 'MyCustomFont-light';
        src: url('../fonts/CormorantGaramond-Light.woff2') format('woff2'),
             url('../fonts/CormorantGaramond-Light.woff') format('woff'),
             url('../fonts/CormorantGaramond-Light.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'MyCustomFont-medium';
        src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2'),
             url('../fonts/CormorantGaramond-Regular.woff') format('woff'),
             url('../fonts/CormorantGaramond-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    
    
    :root {
     --color-primary: #8B4513;
     --color-secondary: #FBE1D0;
     --primary-font:'MyCustomFont';
     --secondary-font:"Roboto", sans-serif;
     --main-font:'Cotton';
     --color-heading-dark: #8B4513;
     --color-heading-black: #000000;
     --h1: 35px;
     --h2: 30px;
     --h3: 24px;
     --h4: 22px;
     --h5: 18px;
     --h6: 14px;
    }
    
    * { box-sizing: border-box; }
    
    html {
      margin: 0;
      padding: 0;
      font-size: 10px;
      overflow: hidden;
      overflow-y: auto;
      scroll-behavior: auto !important;
    }
    body{
        margin: 0;
        box-sizing:border-box;
        /* background: #fcf0e5; */
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6{
        font-family:var(--primary-font);
    }
    h1{
      font-size: var(--h1);
      line-height: 1.3;
      font-weight: 700;
    }
    
    h2{
      font-size: var(--h2);
      line-height: 1.1;
    }
    
    h3{
      font-size: var(--h3);
      line-height: 1.2;
    }
    
    h4{
      font-size: var(--h4);
      line-height: 1.2;
    }
    
    h5{
      font-size: var(--h5);
      line-height: 1.2;
    }
    
    h6{
      font-size: var(--h6);
      line-height: 1.2;
    }
    
    
    
    /* ////////////////////////////////////////////////////////////////
    --------------------------------------------------------------
    //////////////////////////////////////////////////////////////// */
    
    .wrapper {
        /* max-width: 480px; */
        margin: 0 auto;
    }
    
    .hero .logo h1 {
        font-family: var(--primary-font);
        font-size: 22pt;
        line-height: normal;
    }
    
    .logo {
        display: flex;
        align-items: center;
    }
    .hero {
        position: relative;
        height: 100vh;
        width: 100%;
        background: url('background.jpg') center/cover no-repeat;
        display: flex;
        flex-direction: column;
        color: #fff;
        justify-content: space-between;
    }
     .video-js {
        color: #fff;
        position: absolute;
        top: 0;
        height: 100vh;
        width: 100%;
    }
    .video-js .vjs-tech {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100vh;
           min-height: 91vh;
           object-fit: cover;
    }
    
    /* Dark overlay */
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0 0 0 / 42%) 70%, rgb(139 69 19 / 79%));
        z-index: 9;
    }
    
    .header {
        position: relative;
        z-index: 99;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        top: 0;
        background: rgba(106, 53, 15, 0.6);
        border-radius: 0;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    .logo img {
        height: 40px;
    }
    
    .menu-icon {
        width: 28px;
        cursor: pointer;
    }
    
    .menu-icon span {
        display: block;
        height: 3px;
        background: #fff;
        margin: 6px 0;
        border-radius: 2px;
    }
    
    .content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 0 25px 60px;
        z-index: 99;
    }

    .masaya-logo {
    padding: 15px 0 30px 0;
}
    .welcome {
        letter-spacing: 12px;
        font-size: 16px;
        margin-bottom: 0;
        font-family: var(--secondary-font);
        font-weight: 300;
    }
    
    .hero h1 {
      font-family: var(--main-font);
      font-size: 112px;
      font-weight: normal;
      letter-spacing: 2px;
      display: inline-block;
      margin: 0;
      line-height: 100px;
    }
    
    .subtitle {
        font-size: 32pt;
        margin: 10px 0px;
        font-family: var(--primary-font);
    }
    
    .description {
        font-size: 16pt;
        opacity: 0.85;
        margin-bottom: 30px;
        line-height: 21pt;
        font-family: 'MyCustomFont-light';
        font-weight: 300;
        padding: 0;
        margin-top: 0;
        letter-spacing: 0.34pt;
    }
    
    .buttons {
        display: flex;
        flex-direction: row;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }
    
    .btn-primary {
        background: #f2d1b3;
        color: var(--color-primary);
        padding: 16px 30px;
        border-radius: 30px;
        border: none;
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
        width: 80%;
        max-width: 280px;
        font-family: var(
        --secondary-font);
        border: 1px solid var(--color-primary);
        font-size: 16px;
    }
    
    .btn-outline {
        background: transparent;
        color: #fff;
        padding: 16px 30px;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 1);
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
        width: 80%;
        max-width: 280px;
        font-family: var(--secondary-font);
        font-size: 16px;
    }
    
    @media(min-width: 768px) {
        h1 {
            font-size: 72px;
        }
    
        .subtitle {
            font-size: 26px;
        }
    
        .description {
            max-width: 700px;
            margin: 0 auto 50px;
        }
    }
    
    
    .seasideView img {
        width: 100%;
    }
    
     .about-masaya {
            padding: 30px 15px;
            text-align: center;
            color: #a56a4f;
            font-size: 15px;
            line-height: 1.8;
        }
    
        .about-masaya p {
            font-size: 19px;
            line-height: 30px;
            color: var(--color-primary);
            margin: 0;
            font-family: 'MyCustomFont-medium';
        }
        .main {
        background: url(../img/bg-mobile.png);
        background-repeat: repeat-y;
        background-position: center;
        background-size: 100%;
    }
    
    .upcomingEvent {
        overflow: hidden;
    }
    
     .events-title  h2{
            text-align: center;
            letter-spacing: 2px;
            color: var(--color-primary);
            margin-bottom: 30px;
            font-family: 'MyCustomFont';
            font-size: 44pt;
        }
    
    
        .poster-card {
            position: relative;
            width: 100%;
            /* height: 350px; */
            border-radius: 28px;
            overflow: hidden;
            color: #fff;
            box-shadow: 7px 5px 20px 0px rgb(0 0 0 / 10%);
        }
    
        .poster-card .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
            padding: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    
        .poster-card .top-text {
            font-size: 30px;
            font-weight: 500;
            letter-spacing: 2px;
            margin: 5px 0;
            font-family: var(--primary-font);
        }
    
        .poster-card .date {
            font-size: 60px;
            font-weight: 700;
            line-height: 1;
            font-family: var(--secondary-font);
        }
    
        .poster-card .date sup {
            font-size: 40px;
            font-weight: 400;
        }
    
        .poster-card .bottom-text {
            font-size: 16px;
            margin-top: 15px;
            line-height: 1.5;
            max-width: 300px;
            font-family: var(--secondary-font);
        }
        
    .swiper {
          width: 100%;
          height: 100%;
          margin: 0;
          padding-bottom: 50px;
        }
    
        .swiper-slide {
          
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    
        .swiper-slide img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .upcomingEvent .swiper-pagination-bullet{
        border: 1px solid #8B4513;
        background: transparent;
        width: 10px;
        height: 10px;
    }
    
    .upcomingEvent .swiper-pagination-bullet-active {
        background: #8B4513;
        width: 13px;
        height: 13px;
    }
    
    .heading-title {
        text-align: center;
    }
    
    .heading-title h2 {
        color: var(--color-primary);
        font-size: 44pt;
        font-family: var(--primary-font);
        margin: 50px 0 0 0;
        position: relative;
        padding: 0 0 20px 0;
    }
    
    .heading-title h2:after{
        position:absolute;
        content:'';
        background:#000;
        width: 80px;
        height: 3px;
        left: 50%;
        bottom: 0;
        border-radius: 10px;
        transform: translate(-50%, 0px);
    }
    
    /* masaya menu */
    .masaya-menu{
        /* max-width:900px; */
        width: auto;
        margin: 0 10px 50px;
    }
    
    .masaya-menu .title{
        text-align: left;
        margin-bottom: 15px;
        letter-spacing: 0;
        font-size: 28px;
        position: relative;
        overflow: hidden;
    }
    .masaya-menu .title:after {
        width: 100%;
        height: 2px;
        background: #000;
        content: "";
        position: absolute;
        margin-left: 10px;
        bottom: 14px;
    }
    .heading-title p {
        font-size: 20px;
        font-style: italic;
        padding: 0 10%;
    }
    
    .masaya-menu .grid{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 10px;
    }
    
    .masaya-menu .card{
        position:relative;
        overflow:hidden;
        border-radius:18px;
        background: transparent;
        border: none;
    }
    
    .masaya-menu .card img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }
    
    .masaya-menu .card span{
        position:absolute;
        bottom:12px;
        left:50%;
        transform:translateX(-50%);
        color:white;
        font-size: 14pt;
        width: 100%;
        text-align: center;
        font-family: var(--primary-font);
        text-transform: uppercase;
    }
    
    /* Layout areas */
    
       .masaya-menu .masaya-menu .card-large{
        grid-row: auto;
    }
   .masaya-menu .middle {
    display: grid;
    grid-template-rows:1fr 1fr;
    gap: 10px;
}
    .masaya-menu .card:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 53%, rgb(0 0 0 / 90%) 100%);
    }
    .masaya-menu .card-wide{
        /* grid-column: span 2; */
        /* height:200px; */
    }
    
    .masaya-menu .card-large img{
        height:100%;
    }
    
    .card.card-large img {
        height: 100%;
    }
    
    .masaya-menu .card-wide img {
        height: 100%;
        width: 100%;
    }
    
    .masaya-story {
        padding: 20px 15px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
    }
    .masaya-story .card{position: relative;overflow: hidden;border-radius: 18px;margin-bottom: 10px;width: 32.7%;background: transparent;border: none;}
    
    .masaya-story .card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .masaya-story .card:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 53%, rgb(0 0 0 / 90%) 100%);
    }
    
    
    .masaya-story .card span{
    position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 14pt;
        width: 100%;
        text-align: center;
        font-family: var(--primary-font);
        text-transform: uppercase;
        }
    
        .services{
        max-width: 960px;
        margin:auto;
        padding: 15px 0 0;
        text-align:center;
        display: flex;
        gap: 90px;
    }
    
    
    .service-item{
        margin-bottom: 30px;
    }
    .service-item h3{
        margin-top:15px;
        color: var(--color-primary);
        font-weight:600;
        margin-bottom: 0;
        font-family: var(--secondary-font);
        font-size: 14pt;
    }
    
    .service-item p{
        font-size: 16px;
        color: var(--color-primary);
        margin-top:8px;
        font-family: var(--secondary-font);
    }
    .service-item .icon {
        background: var(--color-primary);
        display: inline-block;
        border-radius: 50%;
        padding: 10px;
    }
    
    .reserve-table {
        background: rgb(255 241 232 / 80%);
        border: 1px solid var(--color-primary);
        margin: 30px 15px;
        border-radius: 20px;
        padding-bottom: 30px;
    }
    
    
    
    /* /////////////////////////////footer start //////////////////////////////*/
    .contact-section{
        max-width:420px;
        margin:auto;
        text-align:center;
        padding:40px 20px;
        color: #000;
    }
    
    .contact-section .logo h1{
        color:#a45533;
        letter-spacing:3px;
        margin-bottom: 10px;
        font-size: 30pt;
        margin-top: 10px;
    }
    
    .contact-section h2{
        font-weight:500;
        margin-bottom:30px;
        color: var(--color-primary);
        font-size: 24pt;
    }
    
    .contact-section .menu{
        list-style:none;
        padding:0;
        margin:0 0 40px 0;
    }
    
    .contact-section .menu li{
        margin: 20px 0;
    }
    
    .contact-section .menu a{
        text-decoration:none;
        color: #000;
        font-size: 16pt;
        font-family: var(--secondary-font);
    }
    
    .contact-section .menu a:hover{
        color:#a45533;
    }
    
    .contact-section .address h3,
    .contact-section .phone h3{
        color:#a45533;
        margin-bottom:8px;
        font-family: var(--secondary-font);
        font-size: 20px;
        margin: 0 0 10px 0;
    }
    
    .contact-section .address{
        margin-bottom:30px;
    }
    
    .contact-section .phone{
        margin-bottom:40px;
    }
    
    .contact-section .footer{
        font-size:14px;
        color: #000;
    }
    .contact-section .footer p{
          font-size: 14pt;
          font-family: var(--secondary-font);
    }
    
    .contact-section .footer span{
        display:block;
        margin-top:6px;
        font-size: 14px;
        font-family: var(--secondary-font);
    }
    
    .contact-section .address p, .phone p {
        font-family: var(--secondary-font);
        font-size: 18px;
        margin: 0;
        letter-spacing: 0;
        color: #000;
    }
    .contact-section .logo {
        flex-direction: column;
    }
    
    .contact-section .logo img {
        height: 120px;
    }
    
    .contact-section .address img {
        height: 35px;
    }
    .contact-section .phone img{
        height: 35px;
    }


@media(max-width: 768px) {
    .masaya-menu .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
}
.masaya-menu .card-wide {
    grid-column: span 2;
    height: 200px;
}
.masaya-story .card{
    width: 100%;;
}
.services{
    display: block;
}
.buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.poster-card .top-text{
        font-size: 28px;
                line-height: normal;
}
.poster-card .date{
                font-size: 50px;
}
.poster-card .date sup{
  font-size: 30px;
}
.poster-card{
    height: 350px;
}
.masaya-logo img {
    width: 80%;
}
}