:root {
    
    --contacts-title-font-size: 45px;
    --contacts-title-margin: 120px 0 0 200px;
    
    --contacts-photo-width: 580px;
    --contacts-photo-height: 580px;
    --contacts-photo-margin: 130px 0 0 100px;
    
    --contact-info-margin: 120px 200px 0 0;
    --contacts-subtitle-font-size: 40px;
    --contacts-phone-title-margin-top: 120px;
    --contacts-address-title-margin-top: 50px;
    --contacts-text-font-size: 20px;
    --contacts-text-margin: 20px 0 0 0;
    
    --contacts-form-padding-top: 50px;
    --contacts-form-title-font-size: 40px;
    
    --orb-1-width: 1000px;
    --orb-1-height: 800px;
    --orb-1-top: -180px;
    --orb-1-right: -30px;
    
    --orb-2-width: 800px;
    --orb-2-height: 500px;
    --orb-2-top: -180px;
    --orb-2-left: -100px;
    
    --contacts-scale: 1;
}

@media screen and (min-width: 7680px) {
    :root {
        --contacts-scale: 4;
    }
}

@media screen and (min-width: 5760px) and (max-width: 7679px) {
    :root {
        --contacts-scale: 3;
    }
}

@media screen and (min-width: 3840px) and (max-width: 5759px) {
    :root {
        --contacts-scale: 2;
    }
}

@media screen and (min-width: 2880px) and (max-width: 3839px) {
    :root {
        --contacts-scale: 1.5;
    }
}

@media screen and (min-width: 2560px) and (max-width: 2879px) {
    :root {
        --contacts-scale: 1.333;
    }
}

@media screen and (min-width: 2400px) and (max-width: 2559px) {
    :root {
        --contacts-scale: 1.25;
    }
}

@media screen and (min-width: 2133px) and (max-width: 2399px) {
    :root {
        --contacts-scale: 1.111;
    }
}

@media screen and (min-width: 1920px) and (max-width: 2132px) {
    :root {
        --contacts-scale: 1;
    }
}

@media screen and (min-width: 1728px) and (max-width: 1919px) {
    :root {
        --contacts-scale: 0.9;
    }
}

@media screen and (min-width: 1600px) and (max-width: 1727px) {
    :root {
        --contacts-scale: 0.833;
    }
}

@media screen and (min-width: 1536px) and (max-width: 1599px) {
    :root {
        --contacts-scale: 0.8;
    }
}

@media screen and (min-width: 1366px) and (max-width: 1535px) {
    :root {
        --contacts-scale: 0.711;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1365px) {
    :root {
        --contacts-scale: 0.667;
    }
}

@media screen and (min-width: 1097px) and (max-width: 1279px) {
    :root {
        --contacts-scale: 0.571;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1096px) {
    :root {
        --contacts-scale: 0.533;
    }
}

@media screen and (min-width: 960px) and (max-width: 1023px) {
    :root {
        --contacts-scale: 0.5;
    }
}

@media screen and (min-width: 769px) and (max-width: 959px) {
    :root {
        --contacts-scale: 0.4;
    }
}

/* Заголовок h1 на странице контактов */
.contacts-main-title {
    font-family: 'Russo One', sans-serif;
    font-size: calc(var(--contacts-title-font-size) * var(--contacts-scale));
    color: white;
    margin: calc(120px * var(--contacts-scale)) 0 0 calc(200px * var(--contacts-scale));
    position: absolute;
}

/* Фото на странице контактов */
.contacts-photo {
    width: calc(var(--contacts-photo-width) * var(--contacts-scale));
    height: calc(var(--contacts-photo-height) * var(--contacts-scale));
    object-fit: cover;
    margin: calc(130px * var(--contacts-scale)) 0 0 calc(100px * var(--contacts-scale));
}

/* Контактная информация */
.contact-info {
    margin: calc(120px * var(--contacts-scale)) calc(200px * var(--contacts-scale)) 0 0;
    float: right; 
}

/* Заголовок контактов */
.contacts-subtitle {
    font-family: 'Russo One', sans-serif;
    font-size: calc(var(--contacts-subtitle-font-size) * var(--contacts-scale));
    color: white;
    margin: 0;
}

/* Первый подзаголовок контактов */
.contacts-phone-title {
    margin-top: calc(var(--contacts-phone-title-margin-top) * var(--contacts-scale));
}

/* Адрес заголовок */
.contacts-address-title {
    margin-top: calc(var(--contacts-address-title-margin-top) * var(--contacts-scale));
}

/* Текст контактов */
.contacts-text {
    font-family: 'Golos Text', sans-serif;
    font-size: calc(var(--contacts-text-font-size) * var(--contacts-scale));
    color: white;
    margin: calc(20px * var(--contacts-scale)) 0 0 0;
    line-height: 1.4;
}

/* Раздел 2: Форма */
.contacts-form-section {
    padding-top: calc(var(--contacts-form-padding-top) * var(--contacts-scale));
    clear: both; 
}

/* Заголовок в разделе формы */
.contacts-form-title {
    font-family: 'Russo One', sans-serif;
    font-size: calc(var(--contacts-form-title-font-size) * var(--contacts-scale));
    color: white;
    text-align: center;
    margin: 0;
}

/* Сферы */
.contacts-orb {
    position: absolute;   
    width: calc(500px * var(--contacts-scale));
    height: calc(500px * var(--contacts-scale));
    border-radius: 50%;
    filter: blur(calc(60px * var(--contacts-scale)));
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
}

/* Сферы в Hero */
.orb-1 {
    width: calc(var(--orb-1-width) * var(--contacts-scale));
    height: calc(var(--orb-1-height) * var(--contacts-scale));
    background: radial-gradient(circle, 
        #0cc9b9 0%,
        #22d3d3 24%,
        #63e7e1 61%,
        transparent 70%);
    top: calc(var(--orb-1-top) * var(--contacts-scale));
    right: calc(var(--orb-1-right) * var(--contacts-scale));
}

.orb-2 {
    width: calc(var(--orb-2-width) * var(--contacts-scale));
    height: calc(var(--orb-2-height) * var(--contacts-scale));
    background: radial-gradient(circle, 
        #0cc9b9 0%,
        #22d3d3 24%,
        #63e7e1 61%,
        transparent 70%);
    top: calc(var(--orb-2-top) * var(--contacts-scale));
    left: calc(var(--orb-2-left) * var(--contacts-scale));
}

/* МОБИЛЬНАЯ ВЕРСИЯ (до 768px) */
@media screen and (max-width: 768px) {
    /* Отступ для шапки */
    .contacts-main {
        padding-top: 80px;
    }

    /* Секция с контактами */
    .contacts-section {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* ЗАГОЛОВОК */
    .contacts-main-title {
        font-family: 'Russo One', sans-serif;
        font-size: 32px;
        color: white;
        margin: 0 15px 30px 15px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        order: 1;
    }

    /* ФОТО */
    .contacts-photo {
        width: 280px !important;
        height: 280px !important;
        object-fit: cover;
        margin: 0 0 30px 15px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        order: 2;
    }

    /* КОНТАКТНАЯ ИНФОРМАЦИЯ */
    .contact-info {
        margin: 0 15px 40px 15px !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        order: 3;
        float: none; 
    }

    .contacts-subtitle {
        font-family: 'Russo One', sans-serif;
        font-size: 28px;
        color: white;
        margin: 0 0 10px 0 !important;
    }

    .contacts-phone-title {
        margin-top: 0 !important;
    }

    .contacts-address-title {
        margin-top: 25px !important;
    }

    .contacts-text {
        font-family: 'Golos Text', sans-serif;
        font-size: 16px;
        color: white;
        margin: 0 0 15px 0 !important;
        line-height: 1.4;
    }

    /* ЗАГОЛОВОК ФОРМЫ */
    .contacts-form-title {
        font-family: 'Russo One', sans-serif;
        font-size: 28px;
        color: white;
        text-align: left;
        margin: 0 15px 20px 15px !important;
    }

    /* Секция с формой */
    .contacts-form-section {
        padding: 0 15px 40px 15px !important;
    }
    
    /* Сферы */
    .contacts-orb {
        position: absolute;   
        width: 200px;
        height: 200px;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.6;
        z-index: -1;
        pointer-events: none;
    }

    /* Сферы в Hero */
    .orb-1 {
        width: 400px;
        height: 320px;
        background: radial-gradient(circle, 
        #0cc9b9 0%,
        #22d3d3 24%,
        #63e7e1 61%,
        transparent 70%);
        top: -72px;
        right: -12px;
    }

    .orb-2 {
        width: 320px;
        height: 200px;
        background: radial-gradient(circle, 
        #0cc9b9 0%,
        #22d3d3 24%,
        #63e7e1 61%,
        transparent 70%);
        top: -72px;
        left: -40px;
    }
}

/* до 480 */
@media screen and (max-width: 480px) {
    .contacts-main-title {
        font-size: 28px !important;
        margin: 0 10px 25px 10px !important;
    }

    .contacts-photo {
        width: 240px !important;
        height: 240px !important;
        margin: 0 0 25px 10px !important;
    }

    .contact-info {
        margin: 0 10px 30px 10px !important;
    }

    .contacts-subtitle {
        font-size: 24px !important;
    }

    .contacts-text {
        font-size: 14px !important;
    }

    .contacts-form-title {
        font-size: 24px !important;
        margin: 0 10px 15px 10px !important;
    }

    .contacts-form-section {
        padding: 0 10px 30px 10px !important;
    }
}

/* Стили для кликабельного номера телефона на странице контактов */
.contacts-phone-link {
    color: white !important;
    text-decoration: none !important;
    font-family: 'Golos Text', sans-serif;
    font-size: inherit;
    line-height: inherit;
    transition: opacity 0.3s ease;
    display: inline-block;
}

.contacts-phone-link:hover {
    opacity: 0.8;
    text-decoration: none !important;
}

/* Для мобильных устройств */
@media screen and (max-width: 768px) {
    .contacts-phone-link {
        color: white !important;
        -webkit-text-fill-color: white !important; /* Для Safari */
    }
}

/* Дополнительно для всех устройств */
.contacts-text a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}