responsiveness.css

@media all and (min-width: 2560px) {
    .para {
        left: 80.8rem;
        top: -10rem;
        font-size: 2.3rem;
    }
    .my_heading {
        left: 53rem;
        top: 10rem;
        font-size: 100px;
    }
    #myPng {
        left: 30rem;
        top: 2.5rem;
        position: relative;
    }
    .navigationBar {
        height: 7rem;
    }
    .a_tags_1 {
        margin: 0rem 1rem 0rem 1rem;
        font-size: 2rem;
    }
    #heading_id {
        font-size: 3rem;
        padding: 5px 0px;
    }
    .image_container ul li i {
        font-size: 100px;
        left: 21rem;
        position: relative;
    }
    .list_menu {
        padding: 15px;
    }
    #heading_id2 {
        font-size: 3rem;
    }
    .container_s1 {
        padding: 3rem;
    }
    .container_s2 {
        padding: 3rem;
    }
    .container_s3 {
        padding: 3rem;
    }
    .container_s4 {
        padding: 3rem;
    }
    .container_s5 {
        padding: 3rem;
    }
    .container_s6 {
        padding: 3rem;
    }
    div[role="progressbar"] {
        --size: 12rem;
    }
    #heading_id3 {
        font-size: 3rem;
        padding: 3rem 0rem 0rem 0rem;
    }
    .images2 {
        width: 50%;
        
    }
    .para2 {
        top: -30rem;
        left: 101rem;
        font-size: 2rem;
        width: 35rem;
    }
    .about_page_image {
        margin-top: 10px;
    }
    #heading_id4 {
        font-size: 3rem;
        padding-top: 2rem;
    }
    .form_index input, textarea {
        font-size: 2rem;
        padding: 3rem;
    }
    .form_index button {
        font-size: 2rem;
        left: 55.5rem;
        width: 30rem;
    }
    .social a {
        font-size: 3rem;
        padding: 0.5rem;
    }
    .list_1 li a {
        font-size: 2rem;
    }
    .copyright {
        font-size: 1.5rem;
    }
    .list_1 li {
        padding: 1rem 1.5rem;
    }
}
@media all and (min-width: 1440px) and (max-width: 2559px) {
    .para {
        left: 40.3rem;
        top: -5.5rem;
        font-size: 1.5rem;
    }
    .my_heading {
        left: 25rem;
        top: 5.5rem;
        font-size: 4rem;
    }
    #myPng {
        left: 15rem;
        top: 2.5rem;
        position: relative;
        width: 15rem;
        height: 15rem;
    }
    .navigationBar {
        height: 5rem;
    }
    #heading_id {
        font-size: 2.5rem;
        padding: 5px 0px;
    }
    .image_container ul li i {
        font-size: 3rem;
        left: 5.5rem;
        position: relative;
    }
    .list_menu {
        padding: 15px;
    }
    #heading_id2 {
        font-size: 2.5rem;
    }
    #heading_id3 {
        font-size: 2.5rem;
    }
    .para2 {
        font-size: 1.2rem;
        top: -15rem;
    }
    #heading_id4 {
        font-size: 2.5rem;
    }
    .form_index input, textarea {
        font-size: 1.1rem;
        padding: 1.5rem;
    }
    .form_index button {
        font-size: 1.2rem;
        left: 28.1rem;
        width: 20rem;
    }
    .copyright {
        font-size: 0.9rem;
    }
    .social a {
        font-size: 2.5rem;
        padding: 0.5rem;
    }
    .list_1 li a {
        font-size: 1.2rem;
    }
}
@media all and (min-width: 768px) and (max-width: 1023px) {
    #menu {
        display: block;
        position: relative;
        left: 24.5rem;
    }
    #menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    #menu.active .bar:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    #menu.active .bar:nth-child(3) {
        transform: translateY(-15px) rotate(-45deg);
    }
    .navigationBar {
        height: 5rem;
    }
    .navMenu {
        position: fixed;
        left: -100%;
        top: 5rem;
        gap: 0;
        flex-direction: column;
        background-color: #88888871;
        width: 55.7rem;
        height: 45rem;
        text-align: center;
        transition: 0.3s;
        z-index: 1;
    }
    .list_menu {
        margin: 1.6rem;
    }
    .navMenu.active {
        left: 0;

    }
    .headerMain {
        width: 55.7rem;
    }
    .a_tags_1 {
        font-size: 1.5rem;
    }
    .main_body {
        width: 49.5rem;
    }
    .my_heading {
        left: -1rem;
    }
    .para {
        left: 26.2rem;
    }
    .about_me1 {
        width: 49.5rem;
    }
    .form_container {
        width: 49.5rem;
    }
    .images2 {
        height: 17rem;
        width: 26rem;
    }
    .para2 {
        width: 15rem;
        top: -15rem;
        left: 32rem;
    }
    #heading_id {
        width: 55.7rem;
    }
    #heading_id2 {
        width: 55.7rem;
    }
    .images {
        height: 17rem;
        width: 31rem;
        left: 9rem;
        position: relative;
    }
    .image_container ul {
    display: flex;
    flex-direction: row;
    margin-bottom: 20rem;
    top: 19rem;
    left: -22rem;
    
    }
    .services_container1 {
        left: 4rem;
        position: relative;
    }
    .services_container2 {
        left: 4rem;
        position: relative;
    }
    .form_index button {
        font-size: 1rem;
        left: 15rem;
        width: 16rem;
    }
    .footer_of_the_website {
        width: 55.7rem;
    }
    .copyright {
        font-size: 0.8rem;
    }
}
@media all and (min-width: 375px) and (max-width: 424px) {
    #menu {
        display: block;
        position: relative;
        left: 9.5rem;
    }
    .a_tags_1 {
        font-size: 1.5rem;
    }
    #menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    #menu.active .bar:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    #menu.active .bar:nth-child(3) {
        transform: translateY(-15px) rotate(-45deg);
    }
    .navigationBar {
        height: 5rem;
    }
    .navMenu {
        position: fixed;
        left: -100%;
        top: 5rem;
        gap: 0;
        flex-direction: column;
        background-color: #88888871;
        width: 24.5rem;
        height: 45rem;
        text-align: center;
        transition: 0.3s;
        z-index: 1;
    }
    .list_menu {
        margin: 1.6rem;
    }
    .navMenu.active {
        left: 0;

    }
    .headerMain {
        width: 24.5rem;
    }
    #myPng {
        height: 18rem;
    }
    .my_heading {
        position: absolute;
        left: 6rem;
        top: 28rem;
        font-size: 1.5rem;
        
    }
    .para {
        left: 1.98rem;
        top: 3.3rem;
        font-size: 0.7rem;
    }
    .main_body {
        height: 26rem;
    }
    .images {
        width: 18.5rem;
        height: 12rem;
        margin-bottom: 8rem;
    }
    .image_container ul {
        top: 15rem;
        left: -25.5rem;
        display: flex;
        flex-direction: row;
        
    }
    div[role="progressbar"] {
        --size: 4rem;
        margin: 0.5rem;
    }
    .container_s1 {
        height: 5rem;
        
    }
    .container_s2 {
        height: 5rem;
        
    }
    .container_s3 {
        height: 5rem;
        
    }
    .container_s4 {
        height: 5rem;
        
    }
    .container_s5 {
        height: 5rem;
        
    }
    .container_s6 {
        height: 5rem;
        
    }
    .images2 {
        height: 7rem;
        width: 12rem;
    }
    .about_me1 {
        height: 25rem;
    }
    .para2 {
        top: 0.5rem;
        left: 3rem;
        width: 12rem;
        font-size: 0.8rem;
    }
    .form_index input, textarea {
        font-size: 1rem;
        padding: 1rem;
    }
    .list_items_myFav {
        height: 1rem;
    }
    .image_container ul {
        height: 1rem;
    }
    .form_index button {
        font-size: 1rem;
        left: 0.2rem;
        width: 16rem;
    }
    .copyright {
        font-size: 0.6rem;
    }
    .social a {
        font-size: 1.5rem;
        padding: 0.2rem;
    }
    .list_1 li a {
        font-size: 0.7rem;
    }
}
@media all and (min-width: 1024px) and (max-width: 1439px) {
    .form_index button {
        font-size: 1rem;
        left: 18rem;
        width: 16rem;
    }
    .navigationBar {
        height: 4rem;
    }
    .my_heading {
        left: 2rem;
    }
    .para {
        left: 29.2rem;
    }
    .a_tags_1 {
        font-size: 1.5rem;
    }
}