@media (max-width: 1250px) {

    .responsiveLogo { display: block; height: 56px; padding-left: 16px; }

    .main-link-responsive { color: #CDCDCD; }

    .sidebar { display: none; }

    .help-link { display: none; }

    .header-content p { display: none; }

    .detailsContainer { display: none; padding-left: 24px; padding-top: 36px; }

    .contactsSection { width: 100%; }

    .header-content { margin: 0px 8px 0px 8px; }

    .headerSection { flex-direction: column; gap: 0px; align-items: baseline; margin-bottom: 32px; position: relative; }

    .contactsHeaderText { font-size: 54px; margin-bottom: 12px; }

    .separatorLine { height: 4px; width: 88px; background-color: #29ABE2; position: absolute; bottom: -32px; }

    .contactsUnderText { font-size: 20px; }

    .selectedContactHeader { gap: 16px; }

    .contactButtons { display: none; }

    .active_side { padding: 8px 12px 8px 12px; border-radius: 16px; }

    .main-content { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 72px; }

    .responsive-footer { position: fixed; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; 
        gap: 30px; background-color: #2A3647; z-index: 1000; }

    .detailsInitialsCircle { width: 80px; height: 80px; border-radius: 50%; display: flex; justify-content: center; align-items: center; 
        font-size: 27px; color: white; border: 3px solid #FFFFFF; margin-bottom: 0px; }

    #detailsName { font-size: 34px; }

    .leftContactOverlay { width: 100%; border-top-left-radius: 24px; border-bottom-left-radius: 0px; height: 100%; border-top-right-radius: 24px; }

    .rightContactOverlay { width: 100%; height: 100%; border-bottom-left-radius: 24px; }

    #addContactForm > * { width: 100%; height: 100%; flex-direction: column; }

    #editContactForm > * { width: 100%; height: 100%; flex-direction: column; }

    .addDetailsContainer { height: 100%; display: flex; align-items: center; justify-content: center; width: 100%; left: 0%; top: -50%; }

    .leftContactText { align-items: baseline; margin-left: 24px; }

    .addContactLogo { display: none; }

    .addContactSeparatorLine { top: 63%; left: 28.5px; width: 104px; }

    .addContactContainer { width: 100%; position: relative; gap: 16px; right: 0; }

    .editContactContainer { width: 100%; position: relative; gap: 16px; right: 0; height: 114%;}

    .addContactButtons { justify-content: center; text-align: left; }

    .editContactButtons { justify-content: center; text-align: left; }

    #cancelContactAdd { display: none; }

    .addContactClose { display: none; }

    .editContactLogo { display: none; }

    #editContactHeadline { align-items: center; justify-content: left; font-size: 47px; margin-left: 24px; }

    .editContactseparatorLine { width: 88px; left: 24.5px; }

    .addContactCloseButton { display: flex; position: absolute; top: 24px; right: 12px; width: 24px; height: 24px; cursor: pointer; }

    #addContactHeadline { font-size: 47px; }

    .addContactSubText { font-size: 20px; }

    .addHeader { position: absolute; bottom: 12.5%; right: 36px; transition: 0.3s ease-in-out; }

    .addHeader:hover { transition: 0.3s ease-in-out; }

    .addContact { width: 100%; border-radius: 30px; box-shadow: 0px 4px 4px 0px #00000040; transition: 0.3s ease-in-out;}

    .addContact:hover { background: #29ABE2; transition: 0.3s ease-in-out;}

    .addHeaderText { font-size: 0px; gap: 0px; }

    .responsiveEditContacts {
        width: 64px; height: 64px; position: absolute; bottom: 11.7%; right: 32px; transition: opacity 0.3s ease-in-out; cursor: pointer; display: flex;
    }

    .responsiveEditContactDetails {
        position: absolute; bottom: 48.7%; transition: 0.3s ease-in-out; cursor: pointer; display: flex; width: 96px; height: 40px; transition: 0.3s ease-in-out; right: 4px;
    }

    .responsiveDeleteContactDetails {
        position: absolute; bottom: 4.7%; transition: 0.3s ease-in-out; cursor: pointer; display: flex; width: 96px; height: 40px; transition: 0.3s ease-in-out; right: 4px;
    }

    .responsiveEditContactDetails:hover {
        transform: scale(1.1); transition: 0.3s ease-in-out;
    }

    .responsiveDeleteContactDetails:hover {
        transform: scale(1.1); transition: 0.3s ease-in-out;
    }

    .responsiveMoreDetails {
        box-shadow: 0px 4px 4px 0px #00000040; background: #FFFFFF; bottom: 22.7%; right: 104px;
    }

    .responsiveContactDetailsButtons {
        position: absolute; bottom: 18.7%; right: 75px; height: 96px; width: 104px; background: #FFFFFF; box-shadow: 0px 4px 4px 0px #00000040;
        border-bottom-left-radius: 20px; border-top-right-radius: 20px; border-top-left-radius: 20px; z-index: 999;
    }
    
    .responsiveEditContacts.hover {
        opacity: 0; transition: opacity 0.3s ease-in-out;
    }
    
    .responsiveEditContactsContainer:hover .responsiveEditContacts.default {
        opacity: 0; transition: opacity 0.3s ease-in-out;
    }
    
    .responsiveEditContactsContainer:hover .responsiveEditContacts.hover {
        opacity: 1; transition: opacity 0.3s ease-in-out;
    }
}

@media (max-width: 450px) {
    .contactWrapper { width: 97%; padding: 14px 24px 15px 0px; }

    .initialsCircle { margin-right: 12px; margin-left: 12px; }

    .contactHeader { width: 90%; padding: 20px 24px 15px 10px; }

    .addName, .addPhone, .addEmail { width: 294px; border: 1px solid #D1D1D1; padding: 13px 21px; border-radius: 8px; height: 48px; font-size: 18px; 
        font-weight: 400; line-height: 24px; text-align: left; transition: border-color 0.3s; }

    .editName, .editPhone, .editEmail { width: 294px; border: 1px solid #D1D1D1; padding: 13px 21px; border-radius: 8px; height: 48px; font-size: 18px; 
        font-weight: 400; line-height: 24px; text-align: left; transition: border-color 0.3s; }
}

@media (max-height: 730px) { .addContactContainer { gap: 8px; height: 115%; } }

.show-details { display: flex; flex-direction: column; }

.hide-contacts { display: none; }

.detailsInitialsCircle { transition: 0.3s ease-in-out; }

.detailsInitialsCircle:hover { transform: scale(1.3); transition: 0.3s ease-in-out; }