/* Laptops and Small Screen Desktops */
@media (min-width: 1200px) and (max-width: 1700px) {

    /* NavBar */
    .navbar_container {
        padding: 20px 20px;
        padding-inline: 85px;
    }

    /* NavBar */

    /* Hero */
    .hero_container {
        padding: 0px 20px;
        padding-inline: 85px;
        height: calc(100vh - 93px);
        background-size: 100% 15%;
    }

    .hero_container div.content_container,
    .hero_container div.model_container {
        width: 50%;
    }

    .hero_container .content_container {
        gap: 30px;
    }

    .hero_container .content_container .content h4 {
        font-size: 23px;
    }

    .hero_container .content_container .content h2 {
        width: 100%;
        font-size: 65px;
        margin: 25px 0px;
    }

    .hero_container .content_container .content h2 span {
        font-size: 20px;
    }

    .hero_container .content_container .content p {
        font-size: 35px;
    }

    .hero_container .content_container .button {
        padding: 15px 35px;
        border: 0.5px solid var(--myPink);
    }

    .hero_container .model_container {
        width: 550px !important;
        height: 550px;
    }

    /* Hero */

    /* About */
    .about_container {
        padding: 0px 20px;
        padding-inline: 85px;
        background-size: 100% 17%;
    }

    .about_container .model_container {
        width: 550px !important;
        height: 550px;
    }

    .about_container .content_container {
        width: 45%;
        padding: 0px 0px;
        padding-left: 20px;
    }

    .about_container .content_container p {
        font-size: 18px;
        line-height: 27px;
    }

    /* About */

    /* Skills */
    .skills_container {
        padding: 0px 20px;
        padding-inline: 85px;
        background-size: 100% 20%;
    }

    .skills_container .content_container {
        width: 40%;
        gap: 15px;
    }

    .skills_container .icon_container {
        width: 55%;
        gap: 15px;
    }

    .skills_container .icon_container .icon {
        width: 120px;
        height: 120px;
    }

    .skills_container .icon_container .icon i {
        font-size: 60px;
    }

    .skills_container .icon_container .icon .popUp_container {
        top: -60%;
        width: 125%;
        height: 60%;
        gap: 5px;
    }

    /* Skills */

    /* Services */
    .services_container {
        padding: 0px 20px;
        padding-inline: 85px;
        gap: 40px;
        background-size: 100% 12%;
    }

    .services_container .card_container .card {
        flex-shrink: 0;
        width: 45%;
        height: 185px;
        gap: 10px;
    }

    .services_container .card_container .card .logo_container i {
        font-size: 75px;
    }

    /* Services */

    /* Projects */
    .project_container {
        padding: 0px 20px;
        padding-top: 20px;
        padding-bottom: 10%;
        padding-inline: 85px;
        gap: 40px;
        background-size: 100% 6%;
    }

    .project_container .main_content .project {
        width: 500px;
        height: 375px;
    }

    .project_container .main_content .project .projectImage {
        width: 275px;
    }

    .project_container .main_content .project .projectContent {
        width: 300px;
        height: auto;
        max-height: 85%;
        left: 35%;
        gap: 8px;
    }

    /* Projects */

    /* Contact */
    .contact_container {
        height: auto;
        padding: 0px 20px;
        padding-top: 20px;
        padding-bottom: 7%;
        padding-inline: 85px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 35px;
        background-size: 100% 5%;
    }

    .contact_container .main_container .image_container {
        width: 45%;
        height: 575px;
        border-radius: 10px;
    }

    .contact_container .main_container .content_container #heading {
        font-size: 25px;
        font-family: "Roboto Mono", monospace;
    }

    .contact_container .main_container .content_container .row1 .formContainer {
        gap: 12px;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row {
        width: 90%;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row input,
    .contact_container .main_container .content_container .row1 .formContainer .row textarea {
        font-size: 18px;
        height: 35px;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row textarea {
        height: 100px;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row button {
        padding: 10px 15px;
        font-size: 15px;
    }

    .contact_container .main_container .content_container .seperator {
        margin-block: 30px;
        width: 50%;
        height: 2px;
    }

    /* Contact */

    /* Footer */
    .footer_container {
        padding-inline: 85px;
    }

    /* Footer */

    /* Video */
    .video_container i {
        height: 40px;
        width: 40px;
        font-size: 20px;
    }

    .video_container video {
        width: 70%;
        border-radius: 7px;
    }

    /* Video */
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1199px) {
    #heading {
        width: 100%;
        text-align: center;
    }

    /* NavBar */
    .navbar_container {
        padding: 20px 20px;
        padding-inline: 30px;
    }

    .navbar_container .logo_container a {
        font-size: 30px;
        transition: 0.3s ease;
    }

    .navbar_container .links_container {
        gap: 10px;
    }

    .navbar_container .links_container a {
        font-size: 15px;
    }

    /* NavBar */

    /* Hero */
    .hero_container {
        padding: 0px 20px;
        padding-inline: 40px;
        padding-top: 30px;
        padding-bottom: 30px;
        height: fit-content;
        background-size: 100% 8%;

        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 25px;
    }

    .hero_container div.content_container,
    .hero_container div.model_container {
        width: 100%;
    }

    .hero_container .content_container {
        align-items: center;
        gap: 10px;
    }

    .hero_container .content_container .content h4 {
        font-size: 20px;
    }

    .hero_container .content_container .content h2 {
        width: 100%;
        font-size: 50px;
        margin: 15px 0px;
    }

    .hero_container .content_container .content h2 span {
        font-size: 18px;
    }

    .hero_container .content_container .content p {
        font-size: 28px;
    }

    .hero_container .content_container .button {
        align-self: flex-end;
        padding: 10px 30px;
        border: 0.5px solid var(--myPink);
    }

    .hero_container .model_container {
        width: 400px !important;
        height: 400px;
    }

    /* Hero */

    /* About */
    .about_container {
        padding: 0px 20px;
        height: fit-content;
        padding-top: 13%;
        padding-inline: 40px;
        background-size: 100% 15%;

        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 18px;
    }

    .about_container .model_container {
        width: 400px !important;
        height: 400px;
    }

    .about_container .content_container {
        width: 100%;
        padding: 0px 0px;
        padding-left: 20px;
    }

    .about_container .content_container p {
        font-size: 15px;
        line-height: 24px;
    }

    /* About */

    /* Skills */
    .skills_container {
        height: fit-content;
        padding: 0px 20px;
        padding-top: 20px;
        padding-inline: 40px;
        background-size: 100% 13%;
        flex-direction: column;
        justify-content: flex-start;
        gap: 30px;
    }

    .skills_container .content_container {
        width: 100%;
        gap: 15px;
    }

    .skills_container .content_container .skills {
        width: 100%;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 18px;
    }

    .skills_container .content_container .skills .row {
        width: 80%;
    }

    .skills_container .icon_container {
        width: 100%;
        gap: 12px;
    }

    .skills_container .icon_container .icon {
        width: 95px;
        height: 95px;
    }

    .skills_container .icon_container .icon i {
        font-size: 40px;
    }

    .skills_container .icon_container .icon .popUp_container {
        top: -60%;
        width: 180%;
        height: 70%;
        gap: 5px;
    }

    /* Skills */

    /* Services */
    .services_container {
        padding: 0px 20px;
        height: fit-content;
        padding-top: 30px;
        padding-inline: 40px;
        gap: 40px;
        background-size: 100% 8%;
    }

    .services_container .card_container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .services_container .card_container .card {
        flex-shrink: 0;
        width: 85%;
        height: 145px;
        gap: 10px;
    }

    .services_container .card_container .card .logo_container i {
        font-size: 50px;
    }

    .services_container .card_container .card .content h5 {
        font-size: 20px;
    }

    .services_container .card_container .card .content p {
        font-size: 13px;
    }

    /* Projects */
    .project_container {
        padding: 0px 20px;
        padding-top: 30px;
        padding-inline: 40px;
        gap: 40px;
        background-size: 100% 4%;
    }

    .project_container .main_content {
        row-gap: 30px;
    }

    .project_container .main_content .project {
        width: 500px;
        height: 375px;
    }

    .project_container .main_content .project .projectImage {
        width: 300px;
        filter: grayscale(0%);
    }

    .project_container .main_content .project:hover>.projectImage {
        background-size: 115% 115%;
        filter: grayscale(0%);
    }

    .project_container .main_content .project .projectContent {
        width: 325px;
        height: auto;
        max-height: 85%;
        left: 35%;
        gap: 8px;
    }

    /* Projects */

    /* Contact */
    .contact_container {
        height: fit-content;
        padding: 0px 20px;
        padding-top: 30px;
        padding-bottom: 8%;
        padding-inline: 40px;
        gap: 30px;
        background-size: 100% 5%;
    }

    .contact_container .main_container {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
    }

    .contact_container .main_container .image_container {
        width: 100%;
        height: 200px;
        border-radius: 5px;
    }

    .contact_container .main_container .content_container {
        padding: 10px 0px;
        width: 100%;
        height: 350px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .contact_container .main_container .content_container .seperator {
        align-self: center;
        margin-block: 0px;
        margin-inline: 0px;
        width: 2px;
        height: 180px;
    }

    .contact_container .main_container .content_container .seperator p {
        padding: 10px 5px;
        color: white;
    }

    .contact_container .main_container .content_container #heading {
        font-size: 25px;
        font-family: "Roboto Mono", monospace;
    }

    .contact_container .main_container .content_container .row1 {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .contact_container .main_container .content_container .row1 .formContainer {
        gap: 12px;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row {
        width: 100%;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row input,
    .contact_container .main_container .content_container .row1 .formContainer .row textarea {
        font-size: 18px;
        height: 35px;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row textarea {
        height: 100px;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row button {
        padding: 10px 15px;
        font-size: 15px;
    }

    .contact_container .main_container .content_container .row2 {
        width: 20%;
        gap: 15px;
    }

    .contact_container .main_container .content_container .row2 .social_container {
        width: fit-content;
        flex-direction: column;
    }

    /* Contact */

    /* Footer */
    .footer_container {
        padding-inline: 40px;
    }

    .footer_container .main_content {
        width: 500px;
        padding-bottom: 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
    }

    .footer_container .container_copyright {
        width: 500px;
        border-top: 0.5px dashed rgba(255, 255, 255, 0.500);
        padding-block: 25px;
    }

    /* Footer */

    /* Video */
    .video_container {
        /* by Default */
        height: calc(100vh - 77px);
        top: 77px;
    }

    .video_container i {
        height: 40px;
        width: 40px;
        font-size: 20px;
    }

    .video_container video {
        width: 90%;
        border-radius: 7px;
    }

    /* Video */
}

/* Mobile Phones */
@media (max-width: 600px) {
    #heading {
        width: 100%;
        text-align: center;
        font-size: 26px;
    }

    /* NavBar */
    .navbar_container {
        padding: 20px 20px;
        padding-inline: 15px;
    }

    .navbar_container .logo_container a {
        font-size: 22px;
        transition: 0.3s ease;
    }

    .navbar_container .links_container {
        display: none;
    }

    .navbar_button {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0.5px solid var(--myPink);
        border-radius: 5px;
        padding: 10px;
    }

    .navbar_button i {
        color: var(--myPink);
        font-size: 15px;
    }

    .navbar_button.active {
        border: 0.5px solid white;
        background-color: white;
    }

    .navbar_button.active i {
        color: #2a2a2a;
    }

    .collapsable_navbar_container {
        width: 100%;
        padding: 20px 15px;
        background-color: var(--myPink);
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 78px;
        z-index: 8;
        transform: translateY(calc(-250px - 77px));
        transform-origin: bottom;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.500);
        transition: 0.4s ease;
    }

    .collapsable_navbar_container a {
        text-decoration: none;
        color: white !important;
        font-size: 17px;
        font-family: "Roboto Mono", monospace;
        font-weight: 700;
        letter-spacing: 2px;
        position: relative;
        transition: 0.3s ease;
    }

    .collapsable_navbar_container a::after {
        content: '';
        width: 100%;
        height: 1px;
        background-color: white;
        position: absolute;
        bottom: -2px;
        left: 0;
        transition: 0.3s ease;
    }

    .collapsable_navbar_container.active {
        transform: translateY(0px);
        position: sticky;
    }

    /* NavBar */

    /* Hero */
    .hero_container {
        padding: 0px 20px;
        padding-inline: 15px;
        padding-top: 15px;
        padding-bottom: 30px;
        height: fit-content;
        background-size: 100% 6%;

        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
    }

    .hero_container div.content_container,
    .hero_container div.model_container {
        width: 100%;
    }

    .hero_container .content_container {
        align-items: center;
        gap: 10px;
    }

    .hero_container .content_container .content h4 {
        font-size: 18px;
    }

    .hero_container .content_container .content h2 {
        width: 100%;
        font-size: 30px;
        margin: 10px 0px;
    }

    .hero_container .content_container .content h2 span {
        font-size: 16px;
    }

    .hero_container .content_container .content p {
        font-size: 23px;
    }

    .hero_container .content_container .button {
        align-self: flex-end;
        padding: 10px 20px;
    }

    .hero_container .content_container .button a {
        font-size: 14px;
        font-weight: 500;
    }

    .hero_container .model_container {
        width: 250px !important;
        height: 250px;
    }

    /* Hero */

    /* About */
    .about_container {
        padding: 0px 20px;
        height: fit-content;
        padding-top: 15%;
        padding-bottom: 30px;
        padding-inline: 15px;
        background-size: 100% 8%;

        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
    }

    .about_container .model_container {
        width: 250px !important;
        height: 250px;
    }

    .about_container .content_container {
        width: 100%;
        padding: 0px 0px;
        padding-left: 0px;
        gap: 5px;
    }

    .about_container .content_container p {
        font-size: 15px;
        line-height: 20px;
        text-align: center;
    }

    /* About */

    /* Skills */
    .skills_container {
        height: fit-content;
        padding: 0px 20px;
        padding-top: 20px;
        padding-inline: 15px;
        background-size: 100% 10%;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
    }

    .skills_container .content_container {
        width: 100%;
        gap: 10px;
    }

    .skills_container .content_container .skills {
        width: 100%;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .skills_container .content_container .skills .row {
        width: 100%;
        gap: 5px;
    }

    .skills_container .content_container .skills .row p {
        font-size: 17px;
    }


    .skills_container .content_container .skills .row .progress {
        height: 7px;
    }

    .skills_container .icon_container {
        width: 100%;
        gap: 7px;
    }

    .skills_container .icon_container .icon {
        width: 50px;
        height: 50px;
    }

    .skills_container .icon_container .icon i {
        font-size: 25px;
    }

    .skills_container .icon_container .icon .popUp_container {
        top: -135%;
        width: 175%;
        height: 135%;
        gap: 3px;
    }

    .skills_container .icon_container .icon .popUp_container p {
        font-size: 10px;
    }

    /* Skills */

    /* Services */
    .services_container {
        padding: 0px 20px;
        height: fit-content;
        padding-top: 20px;
        padding-inline: 15px;
        gap: 20px;
        background-size: 100% 6%;
    }

    .services_container .card_container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .services_container .card_container .card {
        flex-shrink: 0;
        width: 100%;
        height: 150px;
        max-height: 200px;
        gap: 5px;
    }

    .services_container .card_container .card .logo_container i {
        font-size: 40px;
    }

    .services_container .card_container .card .content h5 {
        font-size: 16px;
    }

    .services_container .card_container .card .content p {
        font-size: 12px;
    }

    /* Projects */
    .project_container {
        padding: 0px 20px;
        padding-top: 20px;
        padding-bottom: 8%;
        padding-inline: 15px;
        gap: 20px;
        background-size: 100% 2%;
    }

    .project_container .main_content {
        row-gap: 30px;
    }

    .project_container .main_content .project {
        flex-shrink: 0;
        width: 265px;
        height: 510px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .project_container .main_content .project .projectImage {
        width: 100%;
        height: 250px;
        filter: grayscale(0%);
    }

    .project_container .main_content .project .projectImage i {
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
    }

    .project_container .main_content .project:hover>.projectImage {
        background-size: 115% 115%;
        filter: grayscale(0%);
    }

    .project_container .main_content .project:hover>.projectImage>i {
        transform: translate(-50%, 50%);
    }

    .project_container .main_content .project .projectContent {
        width: 265px;
        height: auto;
        padding: 5px 10px;
        max-height: none;
        left: 0%;
        top: 40%;
        gap: 5px;
    }

    /* Projects */

    /* Contact */
    .contact_container {
        height: fit-content;
        padding: 0px 20px;
        padding-top: 20px;
        padding-bottom: 15%;
        padding-inline: 15px;
        gap: 20px;
        background-size: 100% 5%;
    }

    .contact_container .main_container {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        position: relative;
    }

    .contact_container .main_container .image_container {
        display: none;
    }

    .contact_container .main_container .image_container::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.010);
        backdrop-filter: blur(4px);
    }

    .contact_container .main_container .content_container {
        padding: 10px 15px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .contact_container .main_container .content_container .seperator {
        align-self: center;
        margin-block: 30px;
        margin-inline: 0px;
        width: 50%;
        height: 2px;
    }

    .contact_container .main_container .content_container .seperator p {
        background-color: var(--myPink);
        padding: 5px 10px;
        color: white;
    }

    .contact_container .main_container .content_container #heading {
        font-size: 20px;
        font-family: "Roboto Mono", monospace;
    }

    .contact_container .main_container .content_container .row1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .contact_container .main_container .content_container .row1 .formContainer {
        gap: 12px;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row {
        width: 100%;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row input,
    .contact_container .main_container .content_container .row1 .formContainer .row textarea {
        font-size: 18px;
        height: 35px;
        color: white;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row textarea {
        height: 100px;
    }

    .contact_container .main_container .content_container .row1 .formContainer .row button {
        padding: 10px 15px;
        font-size: 15px;
    }

    .contact_container .main_container .content_container .row2 {
        width: 100%;
        gap: 15px;
    }

    .contact_container .main_container .content_container .row2 .social_container {
        width: 100%;
        flex-direction: row;
    }

    /* Contact */

    /* Footer */
    .footer_container {
        padding-inline: 15px;
        padding-top: 30px;
    }

    .footer_container .main_content {
        width: 100%;
        padding-bottom: 25px;
    }

    .footer_container .main_content h2 {
        font-size: 25px;
    }

    .footer_container .main_content .footer-menu p {
        font-size: 15px;
    }

    .footer_container .container_copyright {
        width: 100%;
    }

    .footer_container .container_copyright p {
        font-size: 15px;
    }

    /* Footer */

    /* Video */
    .video_container {
        /* by Default */
        height: calc(100vh);
        top: 77px;
    }

    .video_container i {
        height: 30px;
        width: 30px;
        font-size: 15px;
        top: 10px;
        right: 10px;
    }

    .video_container video {
        width: 95%;
        height: 50%;
        background-color: rgba(0, 0, 0);
        object-fit: contain;
        border-radius: 7px;
    }

    /* Video */
}