@charset "utf-8";
/* CSS Document */
        .hero-banner {
            position: relative;
            width: 100%;
            min-height: 550px;
            display: flex;
            align-items: center;
            overflow: hidden;
            font-family: georgia-regular, sans-serif;
        }

        /* Background Image */
        .hero-banner picture {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .hero-banner picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
        }

        /* Dark Overlay */
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            z-index: 2;
        }

        /* Content Container */
        .hero-container {
            position: relative;
            z-index: 3;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 30px;
            box-sizing: border-box;
        }

        /* Hero Content */
        .hero-content {
            max-width: 650px;
            color: #ffffff;
        }

        .hero-content h1 {
            margin: 0 0 20px;
            font-size: 52px;
			font-weight: normal;
            line-height: 1.15;
            font-weight: 400;
        }

        .hero-content p {
            margin: 0 0 30px;
            font-size: 20px;
            line-height: 1.6;
            font-weight: 400;
        }

        /* Button */
        .hero-button {
            display: inline-block;
            padding: 14px 30px;
            background: #b21117;
            color: #ffffff;
            text-decoration: none;
            font-size: 16px;
            font-weight: 600;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .hero-button:hover {
            background: #6faa48;
            transform: translateY(-2px);
        }


        /* =========================================
           TABLET
        ========================================= */

        @media (max-width: 991px) {

            .hero-banner {
                min-height: 480px;
            }

            .hero-container {
                padding: 50px 25px;
            }

            .hero-content {
                max-width: 560px;
            }

            .hero-content h1 {
                font-size: 42px;
            }

            .hero-content p {
                font-size: 18px;
            }
        }


        /* =========================================
           MOBILE
        ========================================= */

        @media (max-width: 767px) {

            .hero-banner {
                min-height: 300px;
                align-items: center;
            }

            .hero-container {
                padding: 40px 20px;
            }

            .hero-content {
                max-width: 100%;
                text-align: center;
            }

            .hero-content h1 {
                font-size: 32px;
                line-height: 1.2;
                margin-bottom: 15px;
            }

            .hero-content p {
                font-size: 16px;
                line-height: 1.5;
                margin-bottom: 25px;
            }

            .hero-button {
                padding: 12px 25px;
                font-size: 15px;
            }

            .hero-banner picture img {
                object-position: center center;
            }
        }


        /* =========================================
           SMALL MOBILE
        ========================================= */

        @media (max-width: 480px) {

            .hero-banner {
                min-height: 480px;
            }

            .hero-container {
                padding: 30px 18px;
            }

            .hero-content h1 {
                font-size: 28px;
            }

            .hero-content p {
                font-size: 15px;
            }
        }






/* Main Wrapper */ .projects-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; box-sizing: border-box; font-family: georgia-regular, sans-serif; } /* Two-column layout */ .projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; } /* Individual Section */ .project-section { width: 100%; border: 1px solid #dddddd; border-radius: 6px; overflow: hidden; background: #ffffff; } /* Section Heading */ .project-section-title { margin: 0; padding: 18px 20px; background: #b21117; color: #ffffff; font-size: 22px; line-height: 1.3; font-weight: 700; text-align: center; } /* Project List */ .project-list { margin: 0; padding: 0; list-style: none; } /* Individual Project */ .project-list li { position: relative; margin: 0; padding: 16px 20px 16px 42px; border-bottom: 1px solid #e5e5e5; color: #434343; font-size: 16px; line-height: 1.5; background: #ffffff; box-sizing: border-box; } .project-list li:last-child { border-bottom: none; } /* Bullet */ .project-list li::before { content: ""; position: absolute; left: 20px; top: 24px; width: 7px; height: 7px; background: #b21117; border-radius: 50%; } /* Hover Effect */ .project-list li { transition: background-color 0.25s ease; } .project-list li:hover { background-color: #f5f5f5; } /* ========================================= TABLET ========================================= */ @media (max-width: 991px) { .projects-wrapper { padding: 20px; } .projects-grid { gap: 20px; } .project-section-title { font-size: 20px; padding: 16px; } .project-list li { padding: 15px 16px 15px 38px; font-size: 15px; } .project-list li::before { left: 17px; top: 22px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .projects-wrapper { padding: 15px; } /* Stack sections vertically */ .projects-grid { grid-template-columns: 1fr; gap: 20px; } .project-section-title { font-size: 19px; padding: 15px; } .project-list li { padding: 14px 15px 14px 38px; font-size: 15px; line-height: 1.45; } .project-list li::before { left: 17px; top: 21px; width: 6px; height: 6px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .projects-wrapper { padding: 10px; } .projects-grid { gap: 15px; } .project-section-title { font-size: 18px; padding: 14px 12px; } .project-list li { padding: 13px 12px 13px 34px; font-size: 14px; } .project-list li::before { left: 14px; top: 19px; } }