.our-sections {
        padding: 60px 0;
        overflow: hidden;
    }



    .section-card {
        flex: 1;
        position: relative;
        height: 500px;
        overflow: hidden;
        text-decoration: none;
        transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    .section-card:hover {
        flex: 1.5;
    }

    .section-image-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .section-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .section-card:hover .section-image {
        transform: scale(1.1);
    }

    .section-name {
        position: absolute;
        top: 7px;
        right: 50px;
        text-align: center;
        color: var(--name-color);
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        padding: 10px 15px;
        height: fit-content;
        z-index: 2;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transform: rotate(-90deg);
        transform-origin: top right;
        white-space: nowrap;
    }

    .section-card:hover .section-name {
        transform: rotate(0deg);
        font-size: 22px;
            right: 8px;
    }

    body.dark .section-name {
        color: var(--name-color-dark);
    }

    @media (max-width: 992px) {
        .section-card {
            height: 350px;
        }

        .section-name {
            font-size: 17px;
        }

        .section-card:hover .section-name {
            font-size: 20px;
        }
    }

    @media (max-width: 768px) {
        .sections-grid {
            flex-direction: column;
        }

        .section-card {
            height: 300px;
            flex: none;
            width: 100%;
        }

        .section-card:hover {
            flex: none;
        }

        .section-card:hover .section-image {
            transform: scale(1.05);
        }

        .section-name {
            transform: rotate(0deg);
            top: 20px;
            right: 20px;
            left: auto;
        }

        .section-card:hover .section-name {
            transform: rotate(0deg);
        }
    }

    @media (max-width: 576px) {
        .our-sections {
            padding: 40px 0;
        }

        .section-card {
            height: 250px;
            flex: none;
        }

        .section-name {
            font-size: 16px;
        }

        .section-card:hover .section-name {
            font-size: 18px;
        }
    }