@media only screen and (max-width: 600px) {
    /********** CLASS R *******/
    .r-heading {
        font-weight: bolder;
        font-size: 3rem;
    }
    
    .r-p {
        font-size: 1.3rem;
        font-weight: 500;
    }


    /********** navbar **********/

    .nav-item {
        margin: 1rem 0;
        text-align: end;
    }
    
    /********** home **********/ 

    .profile {
        margin: 30% 10% 25% 10%; 
    }

    .card-custom {
        margin: 0 auto ;
        right: 0%;
    }

    .phone-title {
        font-size: 3rem;
    }

    .phone-p-subtitle {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .profile-img {
        border-radius: 100%;
        border: 3px solid var(--c-2);
    }

    .circle:nth-child(2) {
        bottom: 15px;
        right: -16px;
        animation-name: move-down1;   
    }

    .card-inner {
        border-radius: 100%;
        width: 100%;
        height: 80%;
    }

    .li {
        width: 45px;
        height: 45px;
        position: relative;
        right: 10%;
        &:hover {
            width: 50px;
            height: 50px;
        }
    }

    /********** About-Me **********/

    .about-me-m {
        margin: 3.5rem 10%;
    }

    /********** my work **********/

    .p-h3-size {
        font-size: 2.2rem;

    }

    .card-p {
        margin: 5% auto;
        width: 85%;
        height: 65%;
    }

    .last-card-m {
        margin-bottom:15%;
    }

    .skill-heading {
        margin: 5rem 0 3rem 0;
    }

    .yt-size {
        height: 130%;
        width: 100%;
        padding: 2.5rem 0;
    }

    /********** Contact Me **********/

    .contact-m {
        margin: 5% 12%;
    }

    .form {
        padding: 5%;
    }

    .contact-head1 {
        margin-top: 3rem;
        font-size: 2rem;
    }

    .contact-d {
        font-size: 1.3rem;
    }

    .contact-head2 {
        font-weight: 700;
        margin-top: 3rem;
        font-size: 2rem;
    }

    .display {
        display: inline-flex;
        align-items: center;
    }

    .phone-num {
        align-items:baseline;
    }

    .add-e-p {
        position: relative;
        top: 10px;
    }


    /********** Footer **********/

    .footer {
        margin: 15% 0 8% 0;
    }

    .f-font-size{
        font-size: 1.2rem;
    }
    
}


@media only screen and (min-width: 600px) and (max-width:991px) {
    .card-custom {
        position: relative;
        right: 0;
        top: -5%;
    }
}

@media only screen and (min-width: 992px) and (max-width:1350px) {
    .card-custom {
        position: relative;
        right: 35%;
    }
}