/*#######Responsive Media and Animations#######*/
/*Media resposive Root Value*/
@media screen and (min-width: 1125px) {
    :root {
        /*Typography and Font*/

        --biggest-font-size: 4rem;
        --bigger-font-size: 2rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}


/*Navigation for mobile*/
@media screen and (max-width: 1023px) {
    .nav_menu {
        position: fixed;
        top: 0;
        right: -100%;
        text-align: center;
        background-color: hsla(0, 0%, 10%, .3);
        width: 75%;
        height: 100%;
        padding: 4.5rem 0 0 3rem;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        transition: right .4s;
    }

    .nav_list {
        display: flex;
        flex-direction: column;
        row-gap: 3rem;
    }

    .nav_link {
        color: var(--title-color);
        font-weight: var(--font-medium);
    }

    .nav_link:hover {
        color: var(--first-color);
    }

    .nav_close {
        position: absolute;
        top: 1rem;
        right: 1.5rem;

    }

    .show_menu {
        right: 0;
    }
}

/*Small Devices*/
@media screen and (min-width: 320px) {
    .container {
        margin-inline: 1rem;
    }

    .skills_content {
        grid-template-columns: max-content;
        row-gap: 1rem;
    }

    .service_card {
        padding-block: 1.5rem;
    }

}


/*Medium Devices*/
@media screen and (min-width: 576px) {

    .home_conatainer,
    .about_container,
    .skill_container,
    .services_container,
    .projects_container,
    .contact_container {
        grid-template-columns: 360px;
        justify-content: center;
    }
}



@media screen and (min-width: 738px) {
    .nav_menu {
        width: 55%;
    }

    .home_container,
    .about_container,
    .skills_container {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        text-align: center;
    }

    .home_data,
    .about_data,
    .skills_data,
    ::is(.about_data, .skills_data) :is(.section_subtitle, .section_title) {
        text-align: initial;
    }

    /* .home_social {
        justify-content: initial;
    } */

    .home_blob .about_blob {

        width: 400px;
    }

    .about_data {
        order: 1;
    }

    .services_container,
    .projects_container {

        grid-template-columns: repeat(2, 352px);
    }
}


/*Large Devices*/

@media screen and (min-width: 1023px) {
    .section {
        padding-block: 7rem 2rem;
    }

    .section_subtitle {
        font-size: var(--normal-font-size);
    }

    .nav {
        height: calc(var(--header-height) + 1.5rem);
    }

    .nav_close,
    .nav_toggle {
        display: none;
    }

    .nav_list {
        display: flex;
        flex-direction: row;
        column-gap: 3rem;
    }

    .nav_menu {
        width: initial;
    }

    .blur_header {
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }

    .conatainer {
        margin-inline: auto;
    }

    .home_container {
        grid-template-columns: 455px 550px;
        column-gap: 7rem;
        padding-block: 2rem 3rem;
    }

    .home_blob {
        width: 550px;
    }

    .home_content {
        row-gap: 4.5rem;
    }

    .home_description {
        margin-block: 1.5rem 2.5rem;
    }

    .home_social {
        align-items: center;
        column-gap: 1.5rem;
    }


    .about_container {
        grid-template-columns: 550px 460px;
        column-gap: 4.5rem;
        padding-bottom: 1rem;
    }

    .about_blob {
        width: 550px;
    }

    .about_description {
        margin-bottom: 3rem;
    }

    .skills_container {
        grid-template-columns: repeat(2, 350px);
        column-gap: 10rem;
        padding-bottom: 4rem;
    }

    .skills_description {
        margin-bottom: 3rem;
    }

    .skills_content {
        grid-template-columns: repeat(3, 150px);
        column-gap: 1rem;
    }

    .skills_group {
        row-gap: 1.5rem;

    }

    .skills_items {
        font-size: var(--h2-font-size);
    }

    .services_container {
        grid-template-columns: repeat(3, 352px);
        padding-block: 2.5rem 4rem;
    }

    .skills_content {
        column-gap: 8rem;
    }

    .services_card {
        padding: 3.5rem 2rem;
    }

    .projects_container {
        grid-template-columns: repeat(3, 350px);
        row-gap: 3rem;
        padding-block: 2.5rem 4rem;
    }

    .projects_button {
        font-size: var(--normal-font-size);
    }

    .contact_container {
        grid-template-columns: 680px;
        padding-block: 2.5rem 2rem;
    }

    .contact_form {
        row-gap: 1.5rem;
    }

    .contact_group {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.5rem;
    }

    .contact_input {
        padding: 1.5rem;
    }

    .conatact_form textarea {
        height: 20rem !important;
    }

    .footer {
        padding-block: 4.5rem 4rem;
    }

    .footer_container {
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        text-align: inherit;

    }

    .footer_title {
        font-size: var(--bigger-font-size);
    }

    .footer_social {
        column-gap: 1.5rem;
    }

    .footer_copy {
        margin: 0;
        justify-self: flex-end;
    }

    .scrollup {
        right: 3rem;
    }
}