/* @font-face {
        font-family: 'MyCustomFont';
        src: url('./Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('ttf');
        font-weight: normal;
        font-style: normal;
    } */
    @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
        html,
        body {
          position: relative;
          height: 100%;
        }
        .dancing-font{
            font-family: "Dancing Script", cursive;
        }
    
        body {
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          font-family: 'MyCustomFont', sans-serif;
          padding: 0;
        }
    
        .swiper {
          width: 100%;
          height: 100%;
        }
    
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    
        .swiper-slide img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .slideone{
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.516)), 
                        url("../images/pexels-change-c-c-974768353-20810988.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
        }

        .header-fish{
            background-image: url("../images/headerimg1.webp");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .clip-1{
            clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
        }
        .clip-2{
            clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%);
        }
        .clip-3{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
        }
        .clip-4{
          clip-path: polygon(0 14%, 100% 0, 100% 100%, 0% 100%);
        }

          .background-img {
            background-image: linear-gradient(to left top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../images/headerbg.jpeg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .mobile-menu {
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }
        .mobile-menu.show {
            transform: translateX(0);
        }
        /* Ensure images scale properly */
        img {
            max-width: 100%;
            height: auto;
        }