@media only screen and (min-width: 4000px) and (max-width: 10000px) {

    .containArea {
        bottom: 80px;
    }

    .nameContainer h3 {
        font-size: 190px;
    }

    .nameContainer p {
        font-size: 60px;
    }

    .socialContainer {
        margin-top: 100px;
    }

    .iconRounded {
        font-size: 50px;
        padding: 20px;
    }

    .bioGraphy {
        margin-top: 100px;
    }

    .bioGraphy a {
        font-size: 120px;
    }

    .modal-dialog {
        max-width: 1150px;
    }

    #myModal .modal-body p {
        font-size: 45px;
        line-height: normal;
    }

    #myModal .close {
        font-size: 5rem;
    }

    .tooltip:hover:after {
        width: 300px;
        top: -150px;
        left: -100px;
        font-size: 50px;
    }

    .tooltip:hover:before {
        display: none;
    }

}




@media only screen and (min-width: 1920px) and (max-width: 3999px) {

    .nameContainer h3 {
        font-size: 80px;
    }

    .nameContainer p {
        font-size: 30px;
    }

    .iconRounded {
        font-size: 30px;
        padding: 20px;
    }

    .bioGraphy a {
        font-size: 50px;
    }

    .tooltip:hover:after {
        width: 150px;
        top: -100px;
        left: -50px;
        font-size: 30px;
    }

    .tooltip:hover:before {
        display: none;
    }

}


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

    .bodyContainer img {
        height: 100vh;
        display: block;
        margin: auto;
        width: 100%;
    }

}

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

    .containArea {
        width: 100%;
    }

    .nameContainer {
        margin-top:10px;
    }

    #myModal .modal-dialog {
        top: 50% !important;
    }

    .containArea {
        bottom: 15px;
    }

    .nameContainer h3 {
        font-size: 40px;
    }

    .nameContainer p {
        padding: 0px;
    }

    .bioGraphy {
        margin-top: 15px;
    }

    .bioGraphy a {
        font-size: 30px;
        padding: 5px 20px;
    }
    

}


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

    .socialContainer ul li {
        padding: 0 3px;
    }

    .containArea {
        opacity: 1;
    }

}


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

}


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

    .nameContainer h3 {
        font-size: 50px;
    }

    .nameContainer p {
        font-size: 16px;
    }

}