/* MEDIA QUERIES */



/* MOBILE NAVIGATION */
@media screen and (max-width: 768px) {
    .header__toggle {
        display: block;
    }

    .nav__list {
        position: fixed;
        top: 0;
        right: -100%; /*-100%*/
        width: 100%;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        transition: right 0.3s ease;
        box-shadow: -4px 0 10px rgba(0,0,0,0.1);
        z-index: 2000;
    }
    .nav__list--open {
        right: 0;
    }

    .nav__link {
        text-transform: uppercase;
        font-size: var(--fs-md);
        padding: var(--space-2);
    }
}














/* HERO - RESPONSIVE */
@media screen and (max-width: 992px) {
    .hero {
        min-height: 100vh;
        padding: 80px 40;
    }

    .hero__title {
        font-size: 16rem;
        margin-bottom: 1rem;
    }
    .hero__subtitle {
        
        font-size: 2.5rem;
    }

    .hero__cta {
        padding: 14px 28px;
    }
}

@media screen and (max-width: 768px) {
    .hero {
        min-height: 100vh;
        padding-block: var(--space-5);
    }

    .hero__title {
        font-size: 13rem;
    }
}


@media screen and (max-width: 480px) {
    .hero__title {
        font-size: 7rem;
        margin-bottom: 3rem;
    }
    .hero__subtitle {
        font-size: 1.5rem;
    }
}











/* ABOUT - RESPONSIVE */

@media screen and (max-width: 992px) {
    .about__title {
        font-size: var(--fs-md);
    }
    .about__paragraph {
        font-size: var(--fs-sm);
    }
}


@media screen and (max-width: 768px) {
    .about__content {
        max-width: 90%;
    }
}


@media screen and (max-width: 480px) {
    .about__title {
        font-size: var(--fs-md);
    }
    .about__paragraph {
        font-size: var(--fs-xs);
    }
}










/* TOOLS - RESPONSIVE */
@media screen and (max-width: 768px) {
    .tools__flex {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 480px) {
    .tools__title {
        font-size: var(--fs-md);
    }
}







/* SERVICES - RESPONSIVE */
@media screen and (max-width: 992px) {
    .services__tile {
        font-size: var(--fs-md);
    }
}


@media screen and (max-width: 768px) {
    .services__cards {
        flex-direction: column;
        margin-inline: auto;
    }
}









/* PORTFOLIO - RESPONSIVE */
/* Portfolio 992px 
 - reduce spacing
 - imagine mai mica
*/

@media screen and (max-width: 992px) {
    .portfolio__text {
        width: 55%;
    }
    .portfolio__image {
        width: 45%;
    }
}


/* Tablet Breakpoint 768px
- Trecem pe layout vertical 
- Imaginea sub text 
*/

@media screen and (max-width: 768px) {
    .portfolio__item {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .portfolio__text,
    .portfolio__image {
        width: 100%;
    }

    .portfolio__text p {
        margin-inline: auto;
    }
    .portfolio__buttons {
        margin: 3rem auto;
        display: flex;
        justify-content: center;
    }
}


/* Mobile 480px
- Fonturi mai mici
- Spacing redus
*/

@media screen and (max-width: 480px) {

    .portfolio__text h4 {
        font-size: var(--fs-md);
    }
    .portfolio__text h5 {
        font-size: var(--fs-sm);
    }
    .portfolio__image img {
        width: 100%;
    }
}














/* CONTACT RESPONSIVE */
@media screen and (max-width: 992px) {
    .contact__flex {
        width: 90%;
    }
    

    .contact__details,
    .contact__form {
        width: 50%;
    }
}


@media screen and (max-width: 768px) {
    .contact__flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .contact__details,
    .contact__form {
        width: 100%;
    }




    .contact__form label {
        text-align: center;
    }

    .contact__form input,
    .contact__form textarea {
        width: 100%;
    }
    .contact__form .btn {
        width: 50%;
        margin: 0 auto;
    }
}


@media screen and (max-width: 480px) {

    .contact__info {
        margin-bottom: var(--space-4);
    }

    .contact__info,
    .contact__social {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .75rem;
    }



    .contact__social {
        margin-bottom: var(--space-6);
    }

    .contact__form textarea {
        color: var(--clr-text);
        resize: none;
    }

}


/* FOOTER RESPONSIVE */

@media screen and (max-width: 480px) {
    .footer p {
        font-size: var(--fs-md);
    }
}