body {
 display: auto;
  background-color: rgb(83, 163, 255);
}
    
.parallax {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  margin-top: 180px;
  background-image: url('Luna Cat Logo B&W Final-1.png');
  background-size: cover;
  background-position: center;
  z-index: -1;
}
      
.rubik-dirt-regular {
  font-family: "Rubik Dirt", system-ui;
  font-weight: 400;
  font-style: normal;
}


.page-title {
  background-color: rgba(0, 0, 0, .15);
  font-family: "Nosifer", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 80px;
  text-align: center;
  text-decoration: wavy;
  color: rgb(30, 125, 4);
  width: auto;
  margin-top: auto;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 7px;
}


    .page-title {
        font-size: 40px;
        margin: 20px auto;
    }

    .menu {
        background-color: rgb(0, 0, 0);
        list-style-type: none;
        padding: 0;
        margin-bottom: 0px;
        display: flex;
    }

        .menu li {
            position: relative;
            display: inline-block;
        }

        .menu a {
            display: block;
            padding: 14px 20px;
            color: white;
            text-decoration: none;
        }

    .submenu {
        display: none;
        position: absolute;
        background-color: rgba(0, 0, 0, .15);
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

        .submenu li {
            display: block;
        }

        .submenu a {
            color: rgba(0, 0, 0, .15);
            padding: 12px 16px;
            text-decoration: none;
            text-align: left;
        }

    .menu li:hover .submenu {
        display: auto;
    }

    .fixed-navbar {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: rgba(128, 128, 128, 0.5);
        transition: all 0.3s ease-in-out;
    }

    .about {
        display: grid;
        grid: auto auto;
        font-size: 25px;
        font-family: "Jolly Lodger", system-ui;
        font-weight: 400;
        font-display: block;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: auto;
        margin-left: 20px;
        margin-right: 55px;
        margin-bottom: 55px;
        padding-bottom: 100px;
    }

    .about-title {
        font-size: 30px;
        font-family: "Nosifer", sans-serif;
        font-weight: bold;
        font-display: block;
        text-align: left;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: auto;
        margin-left: 20px;
        margin-right: 55px;
    }

    .about-text {
        font-size: 25px;
        font-family: "Jolly Lodger", system-ui;
        font-weight: bold;
        font-display: block;
        text-align: left;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: auto;
        margin-left: 20px;
        margin-right: 55px;
    }

    .about-image {
        min-width: 200px;
        min-height: 200px;
        max-width: 45%;
        height: 50%;
        margin-left: 40%;
        margin-right: 50px;
        margin-top: 0px;
        text-align: right;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 60px;
    }

        .about-image img {
            width: 75%;
            height: auto;
        }

    .portfolios-title1 {
        font-size: 20px;
        font-family: "Nosifer", sans-serif;
        font-weight: bold;
        font-display: block;
        text-align: left;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: auto;
        margin-left: 20px;
        margin-right: 50px;
    }

    .portfolios-sections {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        font-size: 30px;
        font-family: "Nosifer", sans-serif;
        font-weight: bold;
        font-display: block;
        text-align: center;
        text-decoration: none;
        color: rgb(30, 125, 4);
        margin-left: 20px;
        margin-right: 5px;
    }

    .portfolios-sections1 {
        display: grid;
        width: auto;
        height: auto;
        grid-template-columns: auto auto;
        justify-content: space-between;
        font-size: 30px;
        font-family: "Nosifer", sans-serif;
        font-weight: bold;
        font-display: block;
        text-align: center;
        text-decoration: none;
        color: rgb(30, 125, 4);
        margin-left: 20px;
        margin-right: 5px;
    }

    .portfolios-menu-items {
        font-size: 20px;
        font-family: "Nosifer", sans-serif;
        font-weight: normal;
        font-display: block;
        text-align: left;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: 450px;
        margin-left: 20px;
        margin-right: 50px;
    }

        .portfolios-menu-items:hover {
            color: rgb(165, 20, 30)
        }

        .portfolios-menu-items:active {
            opacity: 0.7;
        }

    .image1 {
        min-width: 200px;
        min-height: 200px;
        max-width: 55%;
        height: 50%;
        margin-left: 75px;
        margin-right: 50px;
        margin-top: 0px;
        text-align: center;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 60px;
    }

        .image1 img {
            width: 75%;
            height: auto;
        }

    .image2 {
        min-width: 200px;
        min-height: 200px;
        max-width: 65%;
        max-height: 50%;
        margin-left: 50px;
        margin-right: 70px;
        margin-top: 0px;
        text-align: center;
        padding-top: 65px;
        padding-bottom: 0px;
        padding-left: 0px;
    }

        .image2 img {
            width: 60%;
            height: auto;
        }

    .image3 {
        min-width: 200px;
        min-height: 200px;
        max-width: 65%;
        max-height: 50%;
        margin-left: 50px;
        margin-right: 70px;
        margin-top: 0px;
        text-align: center;
        padding-top: 65px;
        padding-bottom: 0px;
        padding-left: 0px;
    }

        .image3 img {
            width: 60%;
            height: auto;
        }

    .portfolio-text {
        max-width: 100%;
        margin-right: 5px;
        margin-left: 250px;
        margin-top: 45px;
        font-size: 25px;
        font-family: "Jolly Lodger", system-ui;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: rgb(30, 125, 4);
        padding-right: 0px;
    }

    .portfolio-text1 {
        max-width: 100%;
        margin-right: 5px;
        margin-left: 250px;
        margin-top: 45px;
        font-size: 25px;
        font-family: "Jolly Lodger", system-ui;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: rgb(30, 125, 4);
        padding-right: 0px;
    }

    .portfolio-text2 {
        max-width: 100%;
        margin-right: 5px;
        margin-left: 250px;
        margin-top: 45px;
        font-size: 25px;
        font-family: "Jolly Lodger", system-ui;
        font-weight: 400;
        text-align: center;
        text-decoration: none;
        color: rgb(30, 125, 4);
        padding-right: 0px;
    }

    .banner {
        font-family: "Jolly Lodger", system-ui;
        width: 100%;
        height: 100vh;
        text-align: center;
        overflow: hidden;
        position: relative;
    }

        .banner .slider {
            font-family: "Jolly Lodger", system-ui;
            position: absolute;
            width: 200px;
            height: 250px;
            top: 10%;
            left: calc(50% - 100px);
            transform-style: preserve-3d;
            transform: perspective(1000px);
            animation: autoRun 100s linear infinite;
        }

    @keyframes autoRun {
        from {
            transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
        }

        to {
            transform: perspective(1000px) rotateX(-10deg) rotateY(360deg);
        }
    }

    .banner .slider .item {
        position: absolute;
        inset: 0 0 0 0;
        transform: rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(550px);
    }

        .banner .slider .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .banner .caption {
        display: none;
        position: absolute;
        inset: 0 0 0 0;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 170, 30, 0.7);
        font-family: "Jolly Lodger", system-ui;
        color: white;
        text-align: center;
        padding: 10px 0;
        box-sizing: border-box;
        transition: opacity 0.3s;
    }

    .item:hover .caption {
        display: block;
    }

    .contact {
        font-size: 25px;
        font-family: "Jolly Lodger", system-ui;
        font-weight: 400;
        font-display: block;
        text-align: left;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: 350px;
        margin-left: 20px;
        margin-right: 50px;
        margin-bottom: 55px;
    }

    .contact-title {
        font-size: 40px;
        font-family: "Nosifer", sans-serif;
        font-weight: bold;
        font-display: block;
        text-align: left;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: auto;
        margin-left: 20px;
        margin-right: 50px;
    }

    .contact-info {
        font-size: 25px;
        font-family: "Jolly Lodger", system-ui;
        font-weight: bold;
        font-display: block;
        text-align: left;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: auto;
        margin-left: 20px;
        margin-right: 50px;
    }

    .page-menu-bottom {
        background-color: rgba(0, 0, 0, .15);
        width: auto;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
        cursor: pointer;
        border-radius: 7px;
    }

    .page-menu-bar-bottom {
        font-size: 17px;
        font-family: "Nosifer", sans-serif;
        font-weight: normal;
        font-display: block;
        text-align: left;
        text-decoration: none;
        color: rgb(30, 125, 4);
        width: auto;
        margin-left: 20px;
        margin-right: 55px;
    }

        .page-menu-bar-bottom:hover {
            color: rgb(165, 20, 30)
        }

        .page-menu-bar-bottom:active {
            opacity: 0.7;
        }

    /* Mobile Styles */
    @media screen and (max-width: 768px) {
        .navbar {
            flex-direction: column;
            text-align: center;
        }

        .nav-item {
            margin: 5px 0;
        }

        h1, h2 {
            font-size: 20px;
        }
    }
    
    @media screen and (max-width: 768px) {