body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: black;
            padding-bottom: 25px;
            /* Prevent content from being hidden under the footer */
            overflow-x: hidden;
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 25px 20px;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }

        .navbar .logo {
            color: rgba(16, 90, 199, 1);
            font-size: 20px;
            font-weight: bold;
            margin-left: 90px;
        }

        .navbar .menu {
            display: flex;
            position: relative;
            gap: 70px;
        }

        .navbar .menu a {
            text-decoration: none;
            color: rgba(16, 90, 199, 1);
            font-size: 16px;
            position: relative;
        }

        .navbar .menu a:hover {
            color: #fff;
        }

        .navbar .menu .dropdown {
            position: relative;
        }

        .navbar .menu .dropdown-content {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            width: 250px;
            height: auto;
            background-color: rgba(0, 0, 0, 0.9);
            padding: 25px;
            border-radius: 5px;
            flex-direction: column;
        }

        .navbar .menu .dropdown-content a:hover {
            color: #fff;
        }

        .navbar .menu .dropdown-content a {
            color: rgba(16, 90, 199, 1);
            text-decoration: none;
            margin: 5px 0;
            padding-top: 20px;
        }

        .navbar .menu .dropdown:hover .dropdown-content {
            display: flex;
        }

        .navbar .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .navbar .hamburger div {
            background-color: rgba(16, 90, 199, 1);
            height: 3px;
            width: 25px;
            margin: 3px 0;
        }

        .navbar .telephone {
            color: rgba(16, 90, 199, 1);
            font-size: 20px;
            text-decoration: none;
            display: flex;
            margin-right: 7%;
        }

        .navbar .telephone:hover {
            color: #fff;
        }

        section {
            margin-bottom: 16%;
        }

        .main {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            margin-left: 10%;
            margin-top: 10%;
        }

        .left {
            flex: 1;
            max-width: 30%;
            margin-top: 30px;
        }

        .left h1 {
            font-size: 3rem;
            margin-bottom: 35px;
            margin-top: 10px;
        }

        .links {
            display: flex;
            gap: 25px;
            font-size: 30px;
            text-decoration: none;
            color: #2f9cf0;
            margin-top: 43px;
            margin-bottom: 35px;
        }

        .links a {
            color: #2f9cf0;
        }

        .links a:hover {
            color: #fff;
        }

        .button {
            display: inline-block;
            width: 100px;
            padding: 10px;
            background-color: #2f9cf0;
            color: white;
            text-align: center;
            margin-top: 20px;
            margin-right: 40px;
            border-radius: 5px;
            text-decoration: none;
        }

        .button:hover {
            background-color: #1a7bbf;
        }

        .text-me:hover {
            background-color: #1a7bbf;
        }

        .text-me {
            display: inline-block;
            width: 100px;
            padding: 10px;
            background-color: #2f9cf0;
            color: white;
            text-align: center;
            margin-top: 10px;
            border-radius: 5px;
            text-decoration: none;
        }

        .right {
            flex: 1;
            text-align: center;
            max-width: 60%;
            overflow: hidden;
            /* Ensures clean blending */
        }

        .right img {
            width: 43%;
            height: auto;
            object-fit: cover;
            /* Keeps image proportional */
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
        }

        .scroll {
            position: absolute;
            bottom: 0%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            width: 100%;
            color: azure;
            font-size: 16px;
            transition: opacity 0.5s ease-in-out;
        }

        .hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            /* Prevents interaction when hidden */
        }

        .about-section {
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 40px;
        }

        /* Active state when section becomes visible */
        .about-section.visible h1,
        .about-section.visible p {
            opacity: 1;
            transform: translateY(0);
        }

        .about-section h1 {
            color: #2f9cf0;
            font-size: 30px;
            opacity: 0;
            transform: translateY(70px);
            transition: transform 0.7s ease, opacity 0.6s ease;
        }

        .about-section p {
            font-size: 30px;
            color: antiquewhite;
            line-height: 1.6;
            margin-top: 10%;
            padding: 70px;
            text-align: justify;
            opacity: 0;
            transform: translateY(50px);
            transition: transform 0.7s ease, opacity 0.6s ease;
        }

        .projects-section {
            text-align: center;
            padding: auto 0;
            opacity: 0;
            /* Initially hidden */
            transform: translateY(70px);
            transition: opacity 0.7s ease-in, transform 0.7s ease-out;
        }
        .projects-section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .projects-section h1 {
            font-size: 30px;
            color: #2f9cf0;
            margin-bottom: 100px;
        }
        .projects-section p {
            font-size: 19px;
            color: antiquewhite;
            margin-bottom: -200px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        /* Categories Section */
        .categories-section {
            margin-top: 50px;
        }
        .categories-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 160px;
            max-width: 1600px;
            margin: 0 auto 0 auto;
            align-items: center;
            /* Centers items vertically */            
        }
        .category {
            flex: 1;
            width: 100%;
            min-width: 280px;
            max-width: 500px;            
            background-color: #fff;            
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            margin: 0px 16px;            
            opacity: 0;
            transform: scale(0.3);
            transition: opacity 0.6s ease, transform 0.6s ease;
            animation: zoomIn 1s cubic-bezier(0.25, 0.1, 0.25, 1);
        }
        .category.appear {
            opacity: 1;
            transform: scale(1);
        }
        .category h3 {
            color: #0073e6;
            text-align: center;
            margin-bottom: 20px;
        }
        .project {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }
        .project:hover {
            transform: translateY(-5px);
            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
        }
        .project h4 {
            color: #2f9cf0;
            margin-bottom: 5px;
        }
        .project p {
            font-size: 14px;
            color: #2f9cf0;
        }

        @keyframes zoomIn {
            0% {
                transform: scale(0.3);
            }
            100% {
                transform: scale(1);
            }
        }

        footer {
            color: white;
            text-align: center;
            padding: 15px;
            width: 100%;
        }
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        footer a {
            color: white;
            text-decoration: none;
            margin: 0 3px;
        }
        footer a:hover {
            text-decoration: underline;
        }


        @media screen and (max-width: 768px) {
            .navbar {
                flex-wrap: wrap;
            }
            .navbar .menu {
                display: none;
                flex-direction: column;
                gap: 52px;
                background-color: rgba(0, 0, 0, 0.9);
                position: absolute;
                top: 60%;
                right: 10%;
                width: 150px;
                height: auto;
                border-radius: 5px;
                padding: 52px 15px;
            }
            /*.navbar .menu a{
                padding: 25px;
            }*/
            .navbar .logo {
                margin-left: 7px;
            }
            .navbar .menu.active {
                display: flex;
            }
            .navbar .hamburger {
                display: flex;
                margin-right: 50px;
                margin-left: -160px;
            }
            .navbar .menu .dropdown-content {
                width: auto;
                padding: 10px;
                position: relative;
                left: 7%;
                background-color: inherit;
            }
            .navbar .menu .dropdown-content a {
                padding: 6px 0;
                white-space: normal;
            }

            .main {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 0 43px 0 0;
                margin-top: 88px;
            }
            .left,
            .right {
                max-width: 100%;
                margin-top: 30px;
            }
            .right img {
                height: auto;
                border-radius: 50%;
                border: 2px solid #2f9cf0;
                margin-top: 20px;
                height: 300px;
                width: 300px;
            }
            .links {
                justify-content: center;
            }
            .scroll {
                display: none;
            }

            .about-section p {
                padding: 7px;
                font-size: 20px;
            }

            .projects-section {
                margin-top: 7px;
            }
            #info {
                padding: 0 7px;
                margin-top: 50px;
            }
            .categories-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 60px;                                
            }
            .category {
                min-width: 100%;
                margin: 10px 20px;
            }

            footer {
                padding: 10px;
            }
            .footer-container p {
                font-size: 14px;
            }
            footer a {
                margin: 5px 2px;
            }

        }

        @media screen and (min-width: 0px) and (max-width: 375px) {
            
            .main h1 {
                font-size: 2.5rem;
            }

            .button,
            .text-me {
                width: 80px;
                padding: 8px;
                font-size: 12px;
            }
            .right img {
                width: 80%;
                height: auto;
            }

            .projects-section p {
                margin-bottom: 100px;
            }
            .categories-container {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                justify-content: center;
                gap: 20px;
                padding: 20px;                
            }
            .category {
                min-width: 100%;
                margin: 10px 15px;                
            }
        }