.arrow-container {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            width: 40px; /* Adjust size as needed */
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000; /* Ensure the arrows appear on top */
        }

        .arrow {
            width: 20px; /* Adjust size as needed */
            height: 20px;
            border: solid #333; /* Arrow color */
            border-width: 0 3px 3px 0;
            padding: 3px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .arrow:hover {
            transform: scale(1.2); /* Increase size on hover */
        }

        .arrow-left {
            transform: rotate(135deg); /* Pointing left */
        }

        .arrow-right {
            transform: rotate(-45deg); /* Pointing right */
        }