/* HERO */
        .vm-hero {
         background: url('../images/ASDC/v1.jfif') center/cover no-repeat;
            height: 120px;
            position: relative;
        }

            .vm-hero .overlay {
                background: rgba(157, 195, 186, 0.85); 
                height: 100%;
                color: #fff;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .vm-hero h1 {
                font-size: 40px;
            }

            .vm-hero p {
                margin-top: 10px;
            }

        /* SECTION */
        .vm-section {
            padding: 60px 20px;
            background: #f4f7fb;
            font-family: 'Poppins', sans-serif;
        }

        .container {
            max-width: 1100px;
            margin: auto;
        }

        /* ROW */
        .vm-row {
            display: flex;
            align-items: center;
            margin-bottom: 60px;
            gap: 40px;
        }

            .vm-row.reverse {
                flex-direction: row-reverse;
            }

        /* TEXT */
        .vm-text {
            flex: 1;
        }

            .vm-text h2 {
                color: #08807D;
                margin-bottom: 15px;
            }

            .vm-text p, .vm-text li {
                color: #555;
                line-height: 1.7;
            }

        /* IMAGE */
        .vm-image {
            flex: 1;
        }

            .vm-image img {
                width: 100%;
                border-radius: 15px;
                box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            }

        /* VALUES */
        .values {
            text-align: center;
        }

            .values h2 {
                margin-bottom: 30px;
                color: #08807D;
            }

        .value-grid {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .value-card {
            background: #fff;
            padding: 20px;
            width: 240px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: 0.3s;
            border-top: 4px solid #08807D;
        }

            .value-card:hover {
                transform: translateY(-5px);
            }

            .value-card h4 {
                color: #08807D;
            }

        /* MOBILE */
        @media (max-width: 768px) {

            .vm-row {
                flex-direction: column;
            }

                .vm-row.reverse {
                    flex-direction: column;
                }

            .vm-hero h1 {
                font-size: 28px;
                text-align: center;
            }

            .value-card {
                width: 90%;
            }
        }