/* Responsive Design */
@media (max-width: 1024px) {
    .arrow-down{
        height: 70px;
        width: 70px;
    }
    .header-content {
        padding: 15px
    }

    .header-title {
        font-size: 48px;
    }

    /* a propos de moi */
    .APDM-frame-photo {
        width: 55%;
    }

    .btn-cv {
        width: 50%;
    }

    .photo-me {
        width: 100%;
    }

    .APDM-section {
        margin: 10px;
        padding: 10px;
        width: 100%;
    }

    .APDM-text {
        width: 100%;
    }

    .frame-row {
        width: 80%;
        gap: 30px;
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 100% !important;
    }

    /* techno */
    .technologies-container {
        width: 100% !important;
        align-items: center;
    }

    .technologies-content {
        width: 100%;
        align-items: center;
    }

    .technologies-cards-title {
        font-size: 36px;
    }

    .technologies-cards {
        width: 100%;
        font-size: 20px;
    }

    /* project */
    .project-row {
        flex-direction: column;
        height: 40%;
        gap: 40px
    }
}

@media (max-width: 768px) {
    .btn-cv {
        width: 70%;
    }

    .header-btn-redirect {
        display: flex;
        flex-direction: column;
        gap: 15px
    }

    .APDM-frame-progress {
        width: 100%;
    }

    .project-row {
        width: 100%;
        align-items: center;
    }

    .project-card {
        width: 90%;
        padding: 10px
    }

}

@media (max-width: 468px) {

    .header-section{
        height: 90vh;
    }

    .btn-cv {
        width: 100%;
    }

    .header-title {
        font-size: 3rem;
        padding: 15px
    }

    .section-subtitle {
        margin-bottom: 20px;
    }

    .APDM-section {
        margin: 0
    }

    .projects-section,
    .hero {
        padding: 30px 20px;
        min-width: none;
    }

    .frame-row {
        width: 100%;
    }

    .technologies-section {
        padding: 10px
    }

    .technologies-content {
        width: 100%;
    }

    .technologies-container {
        width: 100%;
    }

    .technologies-cards {
        width: 100%;
    }

    .portfolio-footer-section {
        flex-direction: column;
    }

    .hero-title {
        padding: 15px;
        font-size: 3rem
    }
}