@media (max-width:991px) {
    .divide {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;

    }

    .section {
        max-height: 100vh;
    }

    .title-about {
        font-size: 2em;
        margin: 0px;
    }

    .profile img {
        max-width: 100%;
    }

    .line::before {
        content: "";
        max-width: 80px;
        height: 2px;
        background-color: rgb(12, 129, 240);
        position: absolute;
        top: 55%;
        transform: translateX(-100%);
    }

    .line::after {
        content: "";
        max-width: 80px;
        height: 2px;
        background-color: rgb(12, 129, 240);
        position: absolute;
        top: 55%;
    }

    .form {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: normal;
        gap: 0px;
    }

    .text-center {
        text-align: center;
    }

    .gap {
        gap: 20px;
    }

    img {
        transform: scale(0.7);
    }

    .services-section {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 50px;
    }

    section {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 0;
    }

    h1 {
        font-size: 1em;
        text-align: center;
        width: 100%;
    }

    p {
        font-size: 0.8em;
    }

    .contact-location div h1,
    .contact-location div p {
        text-align: start;
    }

    .skill-progress {
        width: 100%;
    }

    .max-width {
        max-width: 100%;
        padding: 20px 20px 20px 20px;
    }

    button {
        display: block;
        margin: auto;
    }

    a {
        display: block;
        margin: auto;
    }

    .main-text {
        margin: 0;
    }

    .card {
        min-height: 200px;
    }

    .nav-links {
        padding: 30px;
        height: 100vh;
        width: 200px;
        position: absolute;
        top: 0;
        right: 0px;
        background-color: red;
        display: flex;
        flex-direction: column;
        gap: 60px;
        z-index: 2;
        transition: 0.5s;
    }

    .rightsection img {
        max-width: 100%;
    }

    .nav-bar .fa-xmark {
        display: block;
        font-size: 2rem;
    }

    .nav-bar .fa-xmark:hover {
        cursor: pointer;
        color: blue;
    }

    .nav-bar .fa-bars:hover {
        color: blue;
        cursor: pointer;
    }

    .nav-bar .fa-bars {
        display: block;
    }

    .nav-links ul li {
        display: block;
        margin: 20px;
    }

    .nav-links ul li a {
        text-align: center;
    }
}

@media (max-width:768px) {}

@media (max-width:479px) {
    input {
        display: block;
        margin: 3px;
    }
}