body {
            background: #f4f4f4;
            font-family: Arial, sans-serif;
            color: #333333;
        }

        #page {
            width: 85%;
            margin: 30px auto;
        }

        #header {
            background: #2f5d50;
            color: #ffffff;
            text-align: center;
            padding: 35px 20px 25px;
        }

        #header h1 {
            margin: 0;
            font-size: 40px;
        }

        #header p {
            margin-top: 10px;
            font-size: 18px;
        }

        #nav {
            background: #d9e5db;
            text-align: center;
            padding: 16px 10px;
            border-bottom: 3px solid #9cb8a5;
        }

        #nav a {
            display: inline-block;
            margin: 6px 10px;
            padding: 10px 16px;
            color: #21443a;
            text-decoration: none;
            font-weight: bold;
            background: #ffffff;
            border: 1px solid #9cb8a5;
        }

        #nav a:hover {
            background: #21443a;
            color: #ffffff;
        }

        #hero {
            background: #ffffff;
            padding: 25px;
            display: flex;
            gap: 4%;
            align-items: stretch;
        }

        .hero-text {
            width: 48%;
            display: flex;
            flex-direction: column;
        }

        .hero-image {
            width: 48%;
        }

        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-banner {
            clear: both;
            margin-top: 24px;
        }

        .hero-banner img {
            width: 100%;
            height: 320px;
            display: block;
            object-fit: cover;
        }

        .main-section {
            display: flex;
            gap: 4%;
            align-items: stretch;
        }

        #content {
            display: flex;
            flex-direction: column;
            width: 58%;
            background: #fffaf4;
            padding: 25px;
            box-sizing: border-box;
            margin-top: 20px;
        }

        .main-image {
            width: 100%;
            margin-top: 20px;
            flex: 1;
            min-height: 320px;
        }

        .main-image img {
            width: 100%;
            height: 100%;
            display: block;
            border: 1px solid #cccccc;
            object-fit: cover;
        }

        .brand-photo {
            margin-top: 20px;
            padding: 12px;
            background: #ffffff;
            border: 1px solid #cccccc;
            text-align: center;
        }

        .brand-photo img {
            width: 100%;
            max-height: 250px;
            height: auto;
            display: block;
            object-fit: cover;
        }

        .brand-photo p {
            margin: 10px 0 0;
            font-size: 15px;
            color: #555555;
        }

        #products {
            width: 38%;
            background: #e4ede4;
            padding: 25px;
            box-sizing: border-box;
            margin-top: 20px;
        }

        #content h2,
        #products h2,
        #highlights h2 {
            margin-top: 0;
            color: #21443a;
        }

        .product-card {
            background: #ffffff;
            padding: 14px;
            margin-bottom: 18px;
            border: 1px solid #cccccc;
            min-height: 320px;
        }

        .product-card img {
            width: 100%;
            height: auto;
            display: block;
        }

        .product-card h3 {
            margin-bottom: 8px;
            color: #2f5d50;
        }

        .price-list {
            background: #ffffff;
            padding: 18px;
            border: 1px solid #cccccc;
            margin-top: auto;
        }

        .price-list h3 {
            margin: 0 0 14px;
            color: #2f5d50;
        }

        .price-row {
            padding: 10px 0;
            border-bottom: 1px solid #e3e3e3;
            overflow: hidden;
            font-weight: bold;
        }

        .price-row:last-child {
            border-bottom: 0;
        }

        .price-row span:first-child {
            float: left;
            color: #333333;
        }

        .price-row span:last-child {
            float: right;
            color: #21443a;
        }

        #highlights {
            clear: both;
            background: #ffffff;
            padding: 25px;
            overflow: hidden;
            border-top: 1px solid #e1d9cf;
        }

        .highlight-box {
            width: 31%;
            float: left;
            margin-right: 3.5%;
            background: #f6f0e8;
            padding: 18px;
            box-sizing: border-box;
            border: 1px solid #d8d0c8;
            min-height: 180px;
        }

        .highlight-box:last-child {
            margin-right: 0;
        }

        #footer {
            clear: both;
            background: #1f3f36;
            color: #ffffff;
            text-align: center;
            padding: 20px;
        }

        @media (max-width: 768px) {
            #page {
                width: 94%;
                margin: 15px auto;
            }

            .hero-text,
            .hero-image,
            #content,
            #products,
            .highlight-box {
                width: 100%;
                float: none;
                margin-right: 0;
            }

            .hero-image {
                margin-top: 18px;
            }

            .hero-banner img {
                height: 220px;
            }

            #content,
            #products,
            .highlight-box {
                margin-bottom: 18px;
            }

            #header h1 {
                font-size: 34px;
            }
        }