@media (max-width: 1400px) {
    header {
        padding: 20px 40px;
    }

    main {
        width: 100%;
        position: unset !important;
        margin-top: 96px;
    }


    nav {
        flex-direction: row !important;
        left: 0;
        top: calc(100% - 8.6%);
        width: 100%;
        height: 8.6% !important;
        padding: 0;
    }

    .logo_navbar {
        display: none;
    }

    .logo_header_mobile {
        display: unset !important;
    }

    .header_mobile_container {
        display: flex !important;
    }

    .nav_items {
        justify-content: space-around !important;
        flex-direction: row;
        width: 100%;
        height: 100%;
        gap: 0px;
    }

    .nav_items a {
        width: unset !important;
    }

    .nav_item_active {
        flex-direction: column;
        justify-content: center !important;
        align-items: center;
        min-width: 80px;
        width: unset;
        height: 100%;
        border-radius: 16px;
        font-size: 0.875rem;
        padding: 0;
        gap: 4px;
    }

    .nav_item_active img,
    .nav_item img {
        width: 100%;
        height: 32%;
    }

    .nav_item {
        flex-direction: column;
        justify-content: center !important;
        width: 80px;
        height: 76px;
        padding: 0;
        font-size: 0.875rem;
    }

    .nav_privacy_legal {
        display: none !important;
    }

    .contacts_layout_wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        gap: 3%;
    }

}

@media (max-width: 1010px) {
     .headline_with_divider {
        width: 95%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
    }

    .headline_with_divider h1 {
        font-size: 3rem;
    }

    .headline_with_divider h6 {
        font-size: 1.25rem;
    }

    .head_dividing_line {
        display: none;
    }

    .headline_vector_vertical {
        display: unset !important;
    }
    
}

@media (max-width: 768px) and (orientation: portrait) {
    body {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    header {
        height: 8.6%;
        width: 100%;
        position: unset;
        padding: unset;
    }

    .header_container {
        width: 100%;
        padding: 10px;
    }

    .header_content {
        display: none;
    }

    .help_content a {
        display: none;
    }

    .user_circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    nav {
        flex-direction: row !important;
        left: 0;
        top: calc(100% - 8.6%);
        width: 100%;
        height: 8.6% !important;
        padding: 0;
    }

    .logo_navbar {
        display: none;
    }

    .logo_header_mobile {
        display: unset !important;
    }

    .header_mobile_container {
        display: flex !important;
    }

    .nav_items {
        justify-content: space-around !important;
        flex-direction: row;
        width: 100%;
        height: 100%;
        gap: 0px;
    }

    .nav_items a {
        width: unset !important;
    }

    .nav_item_active {
        flex-direction: column;
        justify-content: center !important;
        align-items: center;
        min-width: 80px;
        width: unset;
        height: 100%;
        border-radius: 16px;
        font-size: 0.875rem;
        padding: 0;
        gap: 4px;
    }

    .nav_item_active img,
    .nav_item img {
        width: 100%;
        height: 32%;
    }

    .nav_item {
        flex-direction: column;
        justify-content: center !important;
        width: 80px;
        height: 76px;
        padding: 0;
        font-size: 0.875rem;
    }

    .nav_privacy_legal {
        display: none !important;
    }

    .small_logout_win {
        height: 200px;
        top: 7%;
        right: 2%;
    }

    .small_logout_win_help {
        display: flex !important;
    }


    main {
        position: absolute !important;
        margin: 0;
        width: 100%;
        height: 82.8%;
        padding: unset;
        left: unset;
        top: unset;
        overflow: auto;
    }

    .contacts_layout_wrapper {
        justify-content: center;
        align-items: center;
        gap: 0;
    }

    .contacts_overview {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        background: rgba(246, 247, 248, 1);
        align-items: center;
    }

    .headline_with_divider {
        width: 95%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        margin: 0
    }

    .headline_with_divider h1 {
        font-size: 3rem;
    }

    .headline_with_divider h6 {
        font-size: 1.25rem;
    }

    .head_dividing_line {
        display: none;
    }

    .headline_vector_vertical {
        display: unset !important;
    }

    .contacts_btn_back {
        display: unset !important;
        top: 5%;
        left: 90%;
        background: none;
        border: none;
        position: sticky;
        height: 32px;
        width: 32px;
        object-fit: cover;
    }

    .contact_detail {
        width: 95%;
        height: 100%;
        transition: none;
    }

    .contact_detail_header {
        gap: 0;
    }

    .detail_actions {
        display: none;
    }

    .contact_info h5 {
        padding: 0;
    }

    .contactlist_area {
        width: 100%;
        box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.08);
    }

    .add_contact_btn {
        position: absolute;
        top: 90%;
        left: 83%;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: unset;
        padding: unset;
        margin: unset;
    }

    .add_contact_btn>span {
        display: none;
    }

    #overlay-container {
        width: 95%;
        height: 82%;
        transform: translateX(105%);
    }

    .overlay_content_inner {
        flex-direction: column;
    }


    .closebutton_blue::before {
        background-color: rgba(255, 255, 255, 1);
    }

    .closebutton_blue::after {
        background-color: rgb(255, 255, 255);
    }

    .overlay_container_left {
        width: 100%;
        height: 100%;
        flex-grow: 1;
        padding: 0;
        align-items: center;
    }

    .add_contact_head_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 95%;
    }

    .form_layout {
        position: absolute;
        margin: 0;
        height: unset;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .overlay_container_right {
        width: 100%;
        height: 100%;
        flex-grow: 1;
        padding: 0;
    }

    .join_logo {
        display: none;
    }

    #addnew-contact-form {
        width: 100%;
        height: 100%;
        padding-top: 20%;
        gap: 1;
        align-items: center;
    }

    .input_icon_wrapper {
        width: 95%;
        margin: 0;
    }

    .input-icon {
        top: 50%
    }

    .overlay_buttons {
        margin-top: 3%;
    }

    .btn_cancel {
        display: none;
    }

    .contact_edit_mobile_btn {
        z-index: 2;
        position: absolute;
        top: 90%;
        left: 83%;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: unset;
        padding: unset;
        margin: unset;
    }

    .edit_contacts_mobile_nav {
        position: absolute;
        top: 86%;
        left: 75%;
        background-color: white;
        border-radius: 15px 15px 0 15px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        padding: 15px;
        width: 100px;
        z-index: 2;
    }

    .edit_contacts_mobile_nav_item {
        display: flex;
        align-items: center;
        margin: 10px 0;
        font-size: 0.875rem;
        color: rgb(42, 54, 71);
        cursor: pointer;
    }

    .edit_contacts_mobile_nav_icon {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
}