/* About Us responsive & adaptive (excluding .timeline) */
@media (max-width: 1200px) {
    /* Identity */
    .identity-section { margin: 30px 0 140px; }
    .identity-section .section-title { font-size: 42px; }
    .identity-grid .row { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
    .section-header { gap: 16px; }

    /* Benefits */
    .caparol-benefits .benefits-grid .benefits-text { gap: 140px; }
    .benefits-grid .benefits-text .left-side .headline { font-size: 44px; }

    .benefits-visual .info-cards .card { padding: 26px; }
}

@media (max-width: 1050px) {
    .info-cards {
        display: flex !important;
        flex-direction: row;
width: 100%;
    }

    .info-cards .crad {
        display: none;
    }
}

@media (max-width: 992px) {
    /* Identity */
    .identity-section { margin: 24px 0 120px; }
    .identity-section .section-title { font-size: 38px; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .identity-grid .row { grid-template-columns: 1fr 1fr; }

    /* Benefits */
    .caparol-benefits .benefits-grid .benefits-text { flex-direction: column; gap: 24px; }
    .benefits-grid .benefits-text .left-side, 
    .benefits-grid .benefits-text .right-side { min-width: auto; }
    .benefits-grid .benefits-text .right-side { align-items: flex-start; }
    .info-cards .card p{
        font-size: 18px !important;
        letter-spacing: normal !important;
    }

    /* Buttons under timeline */
    .buttons { flex-wrap: wrap; gap: 16px; }

    /* About tutorials block */
    .tutorial-section .tutorial-card .tutorial-title { font-size: 36px; }
}

@media (max-width: 768px) {
    /* Identity */
    .identity-section { margin: 20px 0 100px; }
    .identity-section .section-title { font-size: 32px; }
    .identity-grid .row { grid-template-columns: 1fr; }
    .identity-card p { font-size: 15px; line-height: 24px; }

    /* Benefits */
    .benefits-grid .benefits-text .left-side .headline { font-size: 34px; }
    .benefits-grid .benefits-text .right-side .lead { font-size: 18px; }
    .benefits-grid .benefits-text .right-side .subtext { font-size: 16px; line-height: 24px; }
   
    
    /* Buttons */
    .buttons { flex-direction: column; align-items: stretch; }

    /* About tutorials block: horizontal scroll */
   
    .tutorial-section .tutorial-card .tutorial-title { font-size: 24px; }

    .tutorial-section {
        margin: 80px 0 50px;
    }

  
    .info-cards {
        overflow-y: scroll;     
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-snap-align: center;
        width: 100%;
    }

    .info-cards .card {
        flex: 0 0 350px;
        border: 1px solid #e9e9e9;
    }
    .info-cards .card p{
        font-size: inherit !important;
        letter-spacing: normal !important;
    }

    .benefits-visual {
        background-image: none !important;
    }

    .info-cards {
        /* Transparent scrollbar */
        scrollbar-color: transparent transparent;
    }
    .info-cards::-webkit-scrollbar {
        height: 8px;
        background: transparent;
    }
    .info-cards::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 8px;
    }
}

@media (max-width: 670px) {
    .tutorial-card {
        padding: 16px;
    }
    .tutorial-section .tutorial-card .tutorial-title { font-size: 18px; }

    .tutorial-section {
        margin: 80px 0 0;
    }
}

@media (max-width: 576px) {
    /* Identity */
    .identity-section { margin: 16px 0 80px; }
    .identity-section .section-title { font-size: 28px; }

    /* Benefits */
    .benefits-grid .benefits-text .left-side .headline { font-size: 28px; }

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

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

    .tutorial-list {
        flex-direction: column;
    }
}

@media (max-width: 400px) {
    .tutorial-section .tutorial-card .tutorial-title { font-size: 24px; }
    
}