/* Color tone => Blue Skies */

    /* General Styles */

    body {

        font-family: Arial, sans-serif;

        background-color: #ffffff; 

        margin: 0;

        padding: 0;

    }



    /* Navbar Styles */

    nav {

        background: linear-gradient(45deg, #d6eaf8, #a9cce3);

        padding: 1em;

        display: flex;

        justify-content: center;

        align-items: center;

        position: sticky;

        top: 0;

        transition: top 0.3s;

        box-shadow: 2px 2px 2px #2980b9;

        z-index: 100;

    }



    h2 {

        font-size: 50px;

    }



    h2, p, a, label {

        color: #2980b9;

    }



    nav ul {

        list-style: none;

        display: flex;

        gap: 20px;

    }

    nav ul li {

        display: inline;

    }

    nav ul li a {

    text-decoration: none;

    font-size: 1.2em;

    color: #2980b9;

    padding: 10px 20px;

    border: 2px solid #2980b9;

    border-radius: 10px;

    background: transparent;

    transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease;

}

nav ul li a:hover {

    background: #d6eaf8;

    color: #000000;

    transform: scale(1.1);

    box-shadow: 0 0 10px #2980b9, 0 0 20px #2980b9;

}



    #home img {border-radius: 0; width: 50%; box-shadow: -5px -5px 15px #fff, 5px 5px 15px #aaa; border: 2px solid #ddd;}

.hover-effect {transition: transform 0.2s ease, box-shadow 0.2s ease;}

.hover-effect:hover {transform: translateY(-5px); box-shadow: -10px -10px 20px #fff, 10px 10px 20px #aaa;}

    #about {background: linear-gradient(135deg, #FF9A9E, #FF6A88); padding: 50px; color: #FFFFFF; text-align: center; border-radius: 20px; position: relative; overflow: hidden;}

#about::before {content: ''; position: absolute; top: -30px; left: 40px; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; animation: float 6s ease-in-out infinite;}

#about::after {content: ''; position: absolute; bottom: -40px; right: 60px; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; animation: float 8s ease-in-out infinite;}

@keyframes float {0%, 100%: {'transform': 'translateY(0)'}; 50%: {'transform': 'translateY(-20px)'};}

#about .gallery {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px;}

#about .gallery img {width: 100%; border-radius: 10px; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0.8;}

#about .gallery img:hover {transform: scale(1.1); opacity: 1;}

#about h2 {font-size: 32px; font-weight: bold; color: #FFFFFF; margin-bottom: 20px;}

#about p {font-size: 18px; color: #FFDEE9; line-height: 1.8;}

    #requirements .low, #requirements .req {background: #FFFFFF; padding: 25px; border: 2px solid #E0E0E0; border-radius: 8px; font-family: 'Arial', sans-serif; font-size: 16px; color: #424242; text-align: left; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: border-color 0.3s ease, box-shadow 0.3s;}

#requirements .low:hover, #requirements .req:hover {border-color: #90CAF9; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}

    #contact {display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff9a9e, #a1c4fd); padding: 60px; margin: 30px auto; border-radius: 25px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); border: 5px solid #ff9a9e;}

#contact .card-contact {display: flex; flex-direction: column; align-items: center; background: #ffffff; padding: 40px; border-radius: 15px; gap: 20px; box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);}

#contact .card-contact label {color: #ff6f61; font-size: 14px; font-family: "Comic Sans MS", cursive, sans-serif;}

button {background: linear-gradient(135deg, #ff9a9e, #a1c4fd); color: #fff; padding: 12px 30px; border-radius: 25px; font-size: 16px; cursor: pointer; transition: transform 0.3s ease, background 0.3s ease;}

button:hover {background: linear-gradient(135deg, #a1c4fd, #ff9a9e); transform: scale(1.05); box-shadow: 0 4px 10px rgba(255, 154, 158, 0.3);}

    #menu-toggle {

        display: none;

    }



    /* Section Styles */

    section {

        padding: 2em;

        text-align: center;

    }



    /* Contact Form Styles */

    form {

        display: flex;

        flex-direction: column;

        gap: 1em;

        width: 70%;

    }

    form label {

        font-weight: bold;

    }

    form input, form textarea, form button {

        padding: 10px;

        border: 1px solid #1abc9c;

        border-radius: 5px;

    }



    /* LINE Contact Styles */

    .line-contact {

        text-align: center;

        margin-top: 2em;

        width: 70%;

    }



    /* Media Query for Mobile */

    @media (max-width: 768px) {

        h2 {

            font-size: 30px;

        }

        nav ul {

            display: none;

            flex-direction: column;

        }

        #menu-toggle {

            display: block;

            margin-left: auto;

        }

        #contact .card-contact {

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            padding: 20px 0px;

        }

        a {

            box-shadow: none;

        }

        #about .gallery {

            display: grid;

            grid-template-columns: repeat(1, 1fr);

            gap: 10px;

        }

    }