/* 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; }

    /* Timeline: switch to vertical list */
    .timeline-scroll-section { 
        padding: 80px 0; 
        margin-top: 0; 
        overflow: visible; 
    }
    .timeline-scroll-section .timeline-scroll-wrapper { 
        padding-left: 0; 
        padding-right: 0; 
    }
    .timeline-scroll-section .timeline-scroll {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        transform: none !important; /* ensure no leftover transforms */
    }
    .timeline-scroll-section .timeline-scroll .timeline-item {
        min-width: auto;
        width: 100%;
        height: auto;
        align-items: flex-start;
        flex-direction: row;
        gap: 8px;
    }
    .timeline-scroll .timeline-item .year {
        font-size: 40px;
        line-height: 1;
    }

    .timeline-scroll .timeline-item .year::before { right: 0; top: 0; }

    /* Remove absolute positioning and center alignment on mobile */
    .timeline-scroll .timeline-item .desc {
        position: static;
        text-align: left;
        max-width: 100%;
        font-size: 16px;
        line-height: 24px;
        color: #4b4b4b;
    }

    .timeline-scroll .timeline-item .dot {
        background-color: transparent;
        width: 16px;
        height: 16px;
    }
    .timeline-scroll .timeline-item .dot span { display: none; }

    .timpline-date { 
        flex-direction: row; 
        align-items: center; 
        gap: 12px; 
    }

    /* CTA bubble under list */
    .cta-bubble { 
        display: none;
    }

    .timeline-scroll-section {
        margin-top: 0;
        padding: 80px 0;
    }

    .caparol-benefits  {
        margin-bottom: 80px;
    }

}

@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; }

    .benefits-visual .info-cards .card {
        background: var(--primary);
    }

    .benefits-visual .info-cards .card strong {
        color: #fff;
    }
   
    
    /* 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; }
    
}