@media only screen and (max-width: 1230px) {
    /* +++++++++ index +++++++++ */
    body {
        height: 100%;
        min-height: 1825px !important;
        margin: 0 5%;
    }
    .container {
        position: sticky;
        top: 10rem;
        display: grid;
        grid-template-columns: 1fr;
        height: 37rem;
        grid-gap: 30px;
        background-color: #ffffff;
        border-radius: 20px;
    }
    .right {
        background-color: rgb(247, 249, 250);
        border-radius: 1rem;
        position: relative;
        top: 41rem;
    }
    .right .card-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .left .avatar {
        background-size: cover;
        width: 6.7rem;
        border-radius: 50%;
        position: absolute;
        top: 2rem;
    }
    .contact {
        display: grid;
        border-radius: 0 0 20px 20px;
        text-align: center;
    }
    .top-container .ham-menu {
        height: fit-content;
        position: absolute;
        right: 13px;
    }
    .ham-menu ul {
        padding: 12px;
    }
    .top-section .top-container .info p {
        text-align: justify;
        line-height: 25px;
        position: relative;
        margin: 20px;
        top: 13px;
        color: rgb(54, 69, 90);
        left: -1.9rem;
        padding: 0 30px;
    }
    .latest-news h2 {
        color: rgb(53, 67, 88);
    }
    .email-container {
        margin: 10px 22%;
        position: relative;
        top: -1rem;
        display: flex;
        justify-content: center;
    }
    .top-section .top-container .info h2 {
        margin: 20px;
        padding-bottom: 16px;
        color: rgb(53, 67, 88);
    }
    .location-container,
    .git-container {
        position: relative;
        right: 1.8rem;
        padding: 5px 0;
    }
    .coa {
        color: rgb(215, 232, 252);
        text-align: center;
        padding: 10px 18px;
        background: #256af3;
        background: -moz-linear-gradient(top, #256af3 0%, #3488f4 100%);
        background: -webkit-linear-gradient(top, #256af3 0%, #3488f4 100%);
        background: linear-gradient(to bottom, #256af3 0%, #3488f4 100%);
        border-radius: 24px;
        padding: 12px 28px;
        display: flex;
        justify-content: center;
        margin-top: 2rem;
        width: 10rem;
    }
    .web-card,
    .email-card,
    .mobile-card,
    .support-card {
        margin: 20px;
    }
    @media only screen and (max-width: 600px) {
        .contact {
            display: block;
            padding: 20px 0;
        }
        .web-card,
        .email-card,
        .mobile-card,
        .support-card {
            margin: 4px auto;
            display: grid;
            grid-template-columns: 1fr 4fr;
            justify-content: inherit;
        }
        .web-card img,
        .email-card img,
        .mobile-card img,
        .support-card img {
            width: 32px;
        }
        .top-section .top-container .info h2 {
            font-size: 1.4rem;
        }
        .top-section .top-container .info p {
            font-size: large;
            text-align: start;
        }
        .latest-news h2 {
            font-size: 1.4rem;
            text-align: center
        }
        .email-container {
            font-size: large;
        }
        .ham-menu ul li a {
            color: rgb(162, 192, 249);
            padding: 0 10px;
            font-size: smaller;
        }
    }
    /* +++++++++ index +++++++++ */
}