﻿
    .cml-sec {
        position: relative;
        background-color: var(--bg);
        color: var(--text);
    }

    .cml-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .cml-item {
        border: 1.5px solid rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        width: 200px;
        height: 250px;
        overflow: hidden;
        text-align: center;
        transition: box-shadow 0.3s ease;
    }

    .cml-item:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .cml-item-top {
        padding: 5px;
        flex: 0 0 80%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cml-item-mid {
        background-color: rgba(0, 0, 0, 0.07);
        border-top: 1px solid rgba(0, 0, 0, 0.15);
        color: var(--bg);
        flex: 0 0 20%;
        padding: 15px 5px;
    }

    .cml-title {
        color: #000;
        font-size: 18px;
    }

    .cml-brand-image {
        display: block;
        margin: 10px auto 0;
        width: 100%;
        max-width: 120px;
    }

    /* Optional: If you want to style the image with a specific ID */
    .cml-brand-image {
        border-radius: 5px; /* Example style */
        transition: transform 0.3s ease; /* Example style */
    }

    .cml-brand-image:hover {
        transform: scale(1.05); /* Example hover effect */
    }

    .cml-title:hover {
        color: #f60;
        text-decoration: none;
    }

    .cml-item-mid button:hover .cml-title {
        color: #f60; /* Change the color of the title on button hover */
    }

    .cml-container {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }
    .cml-icons {
        display: flex;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .cml-icons a {
        color: #999;
        text-decoration: none;
        font-size: 24px; /* Increase icon size */
        transition: color 0.3s, transform 0.3s; /* Smooth transition for color and scale */
    }
    .cml-icons a:hover {
        color: orange; /* Change color on hover */
        transform: scale(1.2); /* Slightly increase size on hover */
    }
    
