@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");

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

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 1rem;
            color: #fff;
            background-color: rgb(56, 128, 196);
            width: 100%;
            font-weight: bold;
            z-index: 9999;
            height: 5rem;
            position: fixed;
            top: 0;
        }

        .navbar img {
            height: 4rem;
            margin-left: 2rem;
        }

        .text {
            width: 60%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-left: 5rem;
        }

        .text a {
            text-decoration: none;
            color: #fff;
        }
        a {
            text-decoration: none;
        }

        .text a:hover {
            color: black;
            animation: wiggle 0.3s ease;
        }

        @keyframes wiggle {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(5deg); }
            50% { transform: rotate(-5deg); }
            75% { transform: rotate(5deg); }
        }

        .mnl {
            display: none;
        }

        .mnl:hover {
            color: rgb(0, 0, 0);
            animation: wiggle 0.3s ease;
        }

        .tiket {
            text-decoration: none;
            color: #fff;
            border-radius: 10px;
            padding: 5px 10px;
            background-color: rgb(16, 204, 195);
        }

        .tiket:hover {
            background-color: rgb(14, 180, 172);
            transform: scale(1.1);
        }

        .content {
            flex: 1;
            min-height: 39rem;
            padding-top: 5rem; /* Padding to ensure content is not hidden under navbar */
        }

        .gene {
            display: none;
            height: 2rem;
        }

        .ocean {
            height: 80px; /* Change the height of the waves here */
            width: 100%;
            position: relative;
            overflow-x: hidden;
            margin-top: auto; /* Push the waves to the bottom */
        }

        .wave1 {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
            position: absolute;
            width: 200%;
            height: 100%;
            animation: wave 10s -3s linear infinite;
            transform: translate3d(0, 0, 0);
            opacity: 0.8;
        }

        .wave1:nth-of-type(2) {
            bottom: 0;
            animation: wave 18s linear reverse infinite;
            opacity: 0.5;
        }

        .wave1:nth-of-type(3) {
            bottom: 0;
            animation: wave 20s -1s linear infinite;
            opacity: 0.5;
        }

        @keyframes wave {
            0% { transform: translateX(0); }
            50% { transform: translateX(-25%); }
            100% { transform: translateX(-50%); }
        }

        footer {
            position: relative;
            /* padding-bottom: 50px ;  */
            color: white;
            text-align: center;
        }

        .futer {
            display: flex;
            background-color: #01468b;
            justify-content: space-around;
            align-items: center;
            height: auto;
            flex-wrap: wrap;
            padding-bottom: 8px; /* Ensure the waves do not cover the footer content */
        }

        .futer img {
            height: 5rem;
        }

        .kontakK {
            line-height: 1.5;
        }

        .kontakK h3 {
            margin-bottom: 10px;
        }

        .kontakK p {
            margin: 0;
        }

        .d1, .d2 {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .d1 svg, .d2 svg {
            margin-right: 10px;
        }
        
        .butfut {
            background-color: #ADD8E6;
            color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 10px;
        }

        .background {
            top: 0;
              position: absolute;
              width: 100%;
              height: 50rem;
              background-size: cover;
              background-position: center;
              transition: opacity 1s ease-in-out;
          }
          .background.hidden {
              opacity: 0;
          }
          /* h2 {
            margin-top: 30rem;
          } */
  
          .container {
       position: relative;
          float: right;
          /* background-color: red; */
       width: 50%;
       height: 10rem;
       margin-top: 20rem;
       }
       .container h1{
       position: absolute;
       transform: translate(-50% , -50%);
       font-size: 8em;
       }
       .container h1:nth-child(1){
       color: transparent;
       -webkit-text-stroke: 2px #03a9f4;
       }
       .container h1:nth-child(2){
       color: #03a9f4;
       animation: animate 4s ease-in-out infinite;
       }
       @keyframes animate {
            100%, 0%
            {
                 clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
            }
            50%
            {
                 clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
            }
       }
       .container h2{
       position: absolute;
       transform: translate(-50% , -50%);
       font-size: 7em;
       }
       .container h2:nth-child(1){
       color: transparent;
       -webkit-text-stroke: 2px #03a9f4;
       }
       .container h2:nth-child(2){
       color: #03a9f4;
       animation: animate1 4s ease-in-out infinite;
       }
       @keyframes animate1 {
            100%, 0%
            {
                 clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
            }
            50%
            {
                 clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
            }
       }
      .wbu {
          margin-top: 7rem;
      }
       .promo {
            margin-top: 45rem;
            width: 100%;
            background-color: #cce0ff;
            height: auto;
            
       }
       svg {
            font-weight:bold;
            max-width:600px;
            height:auto;
       }
       .lembar {
            width: 90%;
            margin-top: 3rem;
            display: flex;
            margin: auto;
            flex-wrap: wrap;
            
            align-items: center;
            justify-content: space-around;
       }
       /* .lem {
            height: 10rem;
            width: 17rem;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 3rem;
            background-image: url('../gambar/bgpromoair.jpg');
            box-shadow: 5px 5px 15px rgba(0,0,0,0.3), -5px -5px 15px rgba(255,255,255,0.8);
       } */
       .lem {
        position: relative; /* Required for absolute positioning of the pseudo-element */
        height: 10rem;
        width: 17rem;
        border-radius: 10px;
        text-align: center;
        margin-bottom: 3rem;
        background-image: url('../gambar/bgpromoair.jpg');
        background-size: cover; /* Ensure the background image covers the entire element */
        background-position: center; /* Center the background image */
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.8);
    }
    
    .lem::before {
        content: ''; /* Required for the pseudo-element */
        position: absolute; /* Position it absolutely within .lem */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5); /* Black with 30% opacity */
        border-radius: 10px; /* Match the border radius of the parent */
        z-index: 1; /* Ensure it’s behind any text/content */
    }
    
    .lem > * {
        position: relative; /* Position content inside the .lem */
        z-index: 2; /* Ensure content is above the overlay */
    }
       .lem img {
            height: 10rem;
            width: 17rem;
            z-index: -9999;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.3), -5px -5px 15px rgba(255,255,255,0.8);
       }
       .harga {
            color: #ffff;
            font-size: 2rem;
            text-shadow: 1px 1px 0 #999,
                           2px 2px 0 #888,
                           3px 3px 0 #777,
                           4px 4px 0 #666,
                           5px 5px 0 #555,
                           6px 6px 0 #444,
                           7px 7px 0 #333,
                           8px 8px 0 #222,
                           9px 9px 0 #111;     
            }
       .kethar {
            /* margin-top: -2rem; */
            color: #ffff;
          text-shadow: 1px 1px 1px rgb(0, 0, 0),
            -1px -1px 1px rgba(0, 0, 0, 0.973);
            /* text-shadow: 0 1px 0 #ccc,
                           0 2px 0 #c9c9c9,
                           0 3px 0 #bbb,
                           0 4px 0 #b9b9b9,
                           0 5px 0 #aaa,
                           0 6px 1px rgba(0,0,0,.1),
                           0 0 5px rgba(0,0,0,.1),
                           0 1px 3px rgba(0,0,0,.3),
                           0 3px 5px rgba(0,0,0,.2),
                           0 5px 10px rgba(0,0,0,.25),
                           0 10px 10px rgba(0,0,0,.2),
                           0 20px 20px rgba(0,0,0,.15); */
            padding: 3px;
            padding-top: 10px;
            line-height: 15px;
       }
       .blog {
            width: 85%;
            margin: auto;
            height: auto;
            display: flex;
            padding-top: 2rem;
            padding-bottom: 2rem;
            /* background-color: #003301; */
            justify-content: space-between;
            flex-wrap: wrap;
       }
       .kontak {
            background-color: #3e495a;
            height: auto;
            width: 100%;
            padding-top: 1rem;
            padding-bottom: 8rem;
             padding-bottom: 1rem;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
       }
       .contact-form {
              background: #fff;
              padding: 20px;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
              border-radius: 5px;
              width: 350px;
          }
          .contact-form h2 {
              margin: 0 0 15px;
          }
          .contact-form input,
          .contact-form textarea {
              width: 90%;
              padding: 10px;
              margin: 10px 0;
              border: 1px solid #ccc;
              border-radius: 5px;
          }
          .contact-form button {
              background: #28a745;
              color: #fff;
              border: none;
              padding: 10px 15px;
              border-radius: 5px;
              cursor: pointer;
          }
          .contact-form button:hover {
              background: #218838;
          }

        @media only screen and (max-width: 1000px) {
            .navbar {
                height: 4rem;
            }

            .text {
                display: none;
            }

            .navbar img {
                height: 3rem;
                margin-left: -10px;
            }

            .mnl {
                display: inline-block;
                font-size: 0.9rem;
                text-align: center;
                cursor: pointer;
            }

            .gene {
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-color: white;
                height: 2rem;
                width: 100%;
                position: fixed;
                top: 4rem;
                z-index: 999;
                transition: transform 0.3s ease-out;
                transform: translateY(-100%);
            }

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

            .gene p {
                font-size: 0.8rem;
            }
            .futer img {
            height: 4rem;
        }
        .kontakK {
            font-size: 14px;
        }
        .background {
            top: 0;
              position: absolute;
              width: 100%;
              height: 27rem;
              background-size: cover;
              background-position: center;
              transition: opacity 1s ease-in-out;
          }
          .background.hidden {
              opacity: 0;
          }
  
          .container {
       position: relative;
          float: right;
       width: 50%;
       margin-top: 8rem;
       }
       .container h1{
       position: absolute;
       transform: translate(-50% , -50%);
       font-size: 6em;
       }
       
       .container h2{
       position: absolute;
       transform: translate(-50% , -50%);
       font-size: 5em;
       }
       
       
       .wbu {
          margin-top: 5rem;
      }
       .promo {
            margin-top: 22rem;
       }
      }
      @media only screen and (max-width: 650px) {
          .container h1{
       position: absolute;
       transform: translate(-50% , -50%);
       font-size: 4em;
       }
       .container h2{
       position: absolute;
       transform: translate(-50% , -50%);
       font-size: 3em;
       }
       .background {
              height: 20rem;
          }
          .container {
       margin-top: 5rem;
       }
       .promo {
            margin-top: -2rem;
            /* background-color: blue; */
       }
        }

        @media only screen and (max-width: 400px) {
            .navbar {
                height: 4rem;
            }

            .text {
                display: none;
            }

            .navbar img {
                height: 3rem;
                margin-left: -1px;
            }

            .mnl {
                display: inline-block;
                font-size: 0.9rem;
                text-align: center;
                cursor: pointer;
            }
            .ocean {
            height: 50px; /* Change the height of the waves here */
            width: 100%;
            position: relative;
            overflow-x: hidden;
            margin-top: auto; /* Push the waves to the bottom */
        }
        .futer img {
            height: 3rem;
        }
        .kontakK {
            font-size: 11px;
        }
        .background {
            top: 4rem;
            position: absolute;
            width: 100%;
            height: 13rem;
            background-size: cover;
            background-position: center;
            transition: opacity 1s ease-in-out;
        }
        .background.hidden {
            opacity: 0;
        }

        .container h1{
     position: absolute;
     transform: translate(-50% , -50%);
     font-size: 3em;
     }
     
     .container h2{
     position: absolute;
     transform: translate(-50% , -50%);
     font-size: 2em;
     }
     .wbu {
        margin-top: 3rem;
    }
      .promo {
          margin-top: -4rem;
     }
        }