/* buttons definition */

.button__header--big {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: clamp(16.75rem, -0.625rem + 50vw, 31.25rem);
    height: clamp(5.15rem, -0.625rem + 10vw, 6.15rem);;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    background-color: var(--main-orange);
    color: var(--main-white);
    cursor: pointer;
    transition: .1s ease-in-out;
}

.button__header--big:hover {
    background-color: var(--main-green);
}

.button__header--round {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
    background-color: var(--main-green);
    color: var(--main-white);
    transform: rotate(-25deg);
    cursor: pointer;
    transition: .2s ease-in-out;
}

.button__header--round:hover {
    transform: rotate(25deg);
    background-color: var(--main-orange);
}

.button__info--big {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: clamp(12.5rem, -0.625rem + 50vw, 18.75rem);
    height: clamp(2.1875rem, -0.625rem + 6vw, 3.125rem);
    padding-left: clamp(0.625rem, -0.625rem + 6vw, 0.9375rem);
    padding-right: clamp(0.625rem, -0.625rem + 6vw, 0.9375rem);
    background-color: var(--main-orange);
    color: var(--main-white);
    padding-top: 1px;
    cursor: pointer;
    transition: .2s ease-in-out;
    pointer-events: all;
}

.button__info--big--open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: clamp(12.5rem, -0.625rem + 50vw, 18.75rem);
    height: clamp(2.1875rem, -0.625rem + 6vw, 3.125rem);
    padding-left: clamp(0.625rem, -0.625rem + 6vw, 0.9375rem);
    padding-right: clamp(0.625rem, -0.625rem + 6vw, 0.9375rem);
    background-color: var(--main-orange);
    color: var(--main-white);
    padding-top: 1px;
    cursor: pointer;
    transition: .2s ease-in-out;
    pointer-events: all;
}

.button__info--big--close {
    display: none;
    justify-content: space-between;
    align-items: center;
    width: clamp(12.5rem, -0.625rem + 50vw, 18.75rem);
    height: clamp(2.1875rem, -0.625rem + 6vw, 3.125rem);
    padding-left: clamp(0.625rem, -0.625rem + 6vw, 0.9375rem);
    padding-right: clamp(0.625rem, -0.625rem + 6vw, 0.9375rem);
    background-color: var(--main-orange);
    color: var(--main-white);
    padding-top: 1px;
    cursor: pointer;
    transition: .2s ease-in-out;
    pointer-events: all;
}

.button__info--big:hover {
    background-color: var(--main-green);
}

.button__info--big--open:hover {
    background-color: var(--main-green);
}

.button__info--big--close:hover {
    background-color: var(--main-green);
}

.button__footer--big {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: clamp(3.5rem, -1rem + 99vw, 40rem);
    height: clamp(3.5rem, -0.625rem + 10vw, 6.26rem);
    padding-left: clamp(1.5625rem, -0.625rem + 6vw, 3.125rem);
    padding-right: clamp(1.5625rem, -0.625rem + 6vw, 2.1875rem);
    border-radius: 200px;
    border: 2px solid var(--main-white);
    background-color: var(--main-green);
    color: var(--main-white);
    margin-bottom: clamp(0.75rem, -0.625rem + 3vw, 3.125rem);
    cursor: pointer;
    transition: .2s ease-in-out;
}

@media (min-width: 2500px) {
    .button__footer--big {
        width: clamp(3.5rem, -1rem + 99vw, 100rem);
        height: clamp(3.5rem, -0.625rem + 10vw, 8rem);
    }
}

.button__footer--big:hover {
    background-color: var(--main-white);
    color: var(--main-green)
}

.button__footer--big:hover > .button__icon--30 {
    filter: brightness(0) saturate(100%) invert(30%) sepia(53%) saturate(2425%) hue-rotate(145deg) brightness(85%) contrast(91%);
}

.button__gallery {
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 3.125rem;
    height: 3.125rem;
    background-color: var(--main-orange);
    cursor: pointer;
    pointer-events: none;
}

/* Icons */
/* give this class to image tag of svg */

.button__icon--35 {
    width: 2.1875rem;
    height: 2.1875rem;
}

.button__icon--30 {
    width: clamp(1rem, -0.625rem + 6vw, 1.875rem);
    height: clamp(1rem, -0.625rem + 6vw, 1.875rem);
}

.button__icon--footer {
    width: clamp(3rem, -1rem + 10vw, 7rem);
    height: clamp(3rem, -1rem + 10vw, 7rem);
}

.button__icon--30static {
    width: 1.875rem;
    height: 1.875rem;
}

.button__icon--25static {
    width: 1.5625rem;
    height: 1.5625rem;
}

.button__icon--25 {
    width: clamp(0.9375rem, -0.625rem + 6vw, 1.5625rem);
    height: clamp(0.9375rem, -0.625rem + 6vw, 1.5625rem);
}