/* Responsive SVG styles */
.responsive-svg {
    width: 100%;
    height: auto;
    max-width: 500px; /* Maximum size on large screens */
}

/* Mobile devices (phones) */
@media (max-width: 768px) {
    .responsive-svg {
        max-width: 200px;
        width: 80vw; /* 80% of viewport width */
    }
}

/* Tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
    .responsive-svg {
        max-width: 350px;
        width: 60vw; /* 60% of viewport width */
    }
}

/* Desktop devices */
@media (min-width: 1025px) {
    .responsive-svg {
        max-width: 500px;
        width: 30vw; /* 30% of viewport width */
    }
}