/* Tutorials responsive & adaptive */
@media (max-width: 1200px) {
    .tutorials-section .section-header { gap: 16px; }
    .tutorials-section .section-header .section-title { font-size: 42px; }
    .tutorials-section .tutorials-list { gap: 24px; }
}

@media (max-width: 992px) {
    .tutorials-section .section-header { flex-direction: column; align-items: flex-start; }
    .tutorials-section .section-header .section-title { font-size: 38px; }

    .tutorials-section .tutorial-card { flex: 0 0 320px; }

    .tutorials-section .tutorial-info { margin-top: 28px; padding: 0 16px 8px 16px; }
    .tutorials-section .tutorial-info .video-title { font-size: 22px; }

}

@media (max-width: 768px) {
    .tutorials-section .section-header .section-title { font-size: 32px; }

    .tutorials-section .tutorial-card { flex: 0 0 calc(50% - 16px); }
    .tutorials-section .tutorials-list { gap: 20px; }


    .tutorials-section .video-title { font-size: 16px; }
}

@media (max-width: 576px) {
    .tutorials-section .section-header .section-title { font-size: 28px; }

    .tutorials-section .tutorial-card { flex: 0 0 100%; }
    .tutorials-section .tutorials-list { gap: 16px; margin: 30px 0; }

    .tutorials-section .tutorial-card { padding: 8px; }
    .tutorials-section .tutorial-info { margin-top: 20px; padding: 0 12px 8px 12px; }
    .tutorials-section .tutorial-info .video-title { font-size: 20px; width: 82%; }

    .hero-section-component::after {
        border-radius:  25px 25px 0px 0px;
    }

    .footer-side::after {
        border-radius: 0px 0px 25px 25px;
    }
}

@media (max-width: 400px) {
    .tutorials-section .section-header .section-title { font-size: 26px; }


    .tutorials-section .tutorial-info .video-title { font-size: 18px; }
}