body {
    margin: 0;
    padding: 0;
    background: var(--Gray_Background, #343740);
    display: flex;
    justify-content: center; /* картинка по центру */
    /* Roboto/Main_Regular */
    font-family: Roboto, system-ui, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.container {
    position: relative;
    width: 1440px; /* Меняйте ширину контейнера для масштабирования */
    /*border: 1px solid #ccc;*/
}

.container img {
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
    position: relative;
}

/* HEADER */

.overlay-div-header {
    position: absolute;
    top: 0%; /* Позиция относительно контейнера */
    left: 0%;
    width: 100%; /* Используем % для адаптивности */
    height: 20rem;
    min-height: 20rem;
    z-index: 1;
}

header {
    background-color: transparent;
    color: white;
    padding: 15px 20px;
    display: inline-block;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

.header-left {
    padding-left: 60px;
    padding-top: 20px;
    display: flex;
    font-size: 20px;
    color: white;
    gap: 40px;
}

.header-left a {
    color: white;
    font-family: "Exo 2", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 26px */
    letter-spacing: -0.408px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-left a:hover {
    color: #EBFF78; /* Accent color on hover */
}

/* DOG */

.overlay-div-dog {
    position: absolute;
    top: 75%; /* Позиция относительно контейнера */
    left: 20%;
    width: 18%; /* Используем % для адаптивности */
    height: auto;
    min-height: 300px;
    z-index: 1;
}

/* BUTTON */

.overlay-div-button {
    position: absolute;
    top: 23%; /* Позиция относительно контейнера */
    left: 22%;
    width: 27%; /* Используем % для адаптивности */
    height: auto;
    z-index: 1;
}


/* SUBSCRIBE */

.overlay-div-subscribe {
    display: flex;
    padding: 80px;

    width: 31%;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;


    border-radius: 12px;

    /* GlassM */
    box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.18) inset;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    position: absolute;
    top: 71%; /* Позиция относительно контейнера */
    left: 428px;
    height: auto;
    color: white;
    font-weight: bold;
    text-align: left;
    line-height: 1;
    pointer-events: auto; /* чтобы можно было взаимодействовать с формой */
    user-select: auto;
    z-index: 1;

}
.glass-form {
    width: 100%;
}

.glass-form p {
    color: var(--Dark_Green, #15322E);
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.glass-form h2 {
    color: white;
    margin-bottom: 20px;
    font-family: 'Exo 2', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 28.8px */
    letter-spacing: -0.408px;
}

.glass-form input[type="email"] {
    width: 94%;
    padding: 12px;
    margin: 16px 0;
    margin-top: -10px;
    border: none;
    border-radius: 10px;
    outline: none;
    background: #3fa89d;
    backdrop-filter: blur(14px)
}

.glass-form input[type="checkbox"] {
    vertical-align: middle;
}

.glass-form label {
    color: white;
    font-weight: normal;
    user-select: none;
}
.overlay-div-button button,
.glass-form button {
    padding: 20px 60px;
    width: 100%;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 30px;
    border-radius: 12px;
    background: var(--Primary, #EBFF78);
    color: var(--Dark_Green, #15322E);
    font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 26px */
    letter-spacing: -0.408px;
}

.overlay-div-button button:hover,
.glass-form button:hover {
    background: #ABBC4A;
}

.custom-label {
    position: relative;
    display: inline-flex;
    width: 32px;
    height: 32px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.custom-checkbox {
    position: absolute;
    opacity: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.custom-label .icon-on {
    display: none;
}

.custom-checkbox:checked + .custom-label .icon-off {
    display: none;
}

.custom-checkbox:checked + .custom-label .icon-on {
    display: block;
}

/* COOKIE */

.cookie-popup {

    /* Roboto/Main_Regular */
    font-family: Roboto, sans-serif; !important;
    font-style: normal;
    font-weight: 400;
    flex: 1 0 0;
    line-height: 130%; /* 23.4px */
    position: fixed;
    bottom: 1%;
    left: 56%;
    background: #fff;
    border: 1px solid #ccc;
    padding: 15px 20px;
    max-width: 300px;
    font-size: 14px;
    z-index: 1000;
    display: none;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(229, 255, 251, 0.20) 9.62%, rgba(48, 176, 158, 0.20) 90%);
    /* GlassM */
    box-shadow: 0 0 70px 0 rgba(255, 255, 255, 0.18) inset;
    backdrop-filter: blur(20px);
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    color: var(--Secondary_White, #FFF);

}

.cookie-popup button {
    color: #000;
    margin-top: 10px;
    padding: 5px 10px;
    width: 20%;
    border: 1px solid #ccc;
    background: #EBFF78;
    border-radius: 5px;
    cursor: pointer;
}

.cookie-popup button:hover {
    background: #ABBC4A;
}


/* FOOTER */

.overlay-div-footer {
    position: absolute;
    top: 94%; /* Позиция относительно контейнера */
    left: 0%;
    width: 100%; /* Используем % для адаптивности */
    z-index: 1;
    /* Roboto/Main_Regular */
    font-family: Roboto, system-ui, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding-top: 0;
}

.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    padding-top: 0;
    padding-left: 80px;
    padding-bottom: 80px;
}

.footer-left a {
    color: var(--Gray_Background, #343740);

    /* Roboto/Main_Regular */
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    letter-spacing: -0.408px;
    text-decoration: none;
    transition: color 0.3s ease;
    gap: 10px;
}

.footer-right {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 20px;
    gap: 20px;
    margin-top: -36px;
    padding-right: 80px;
    padding-bottom: 80px;
}

.footer-right a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-left a:hover,
.footer-right a:hover {
    color: #EBFF78; /* Accent color on hover */
}

.icon path {
  fill: white; /* цвет по умолчанию */
  transition: fill 0.3s;
}

.icon:hover path {
  fill: #EBFF78; /* цвет при наведении */
}


a:hover {
    color: #EBFF78;
!important;
}