:root{
    --additional-custom-1: #b6a071;
    --custom-button-height: 75px;
}

.custom-button-style{
    --color: var(--color-neutral-bright);


    height: var(--custom-button-height);
    border: 2px solid var(--color);
    background-color: transparent;
    transition: 0.4s;

    svg{
        fill:var(--color);
        stroke:var(--color);
    }

    &:hover{
        cursor: pointer;
        border: 2px solid var(--color) !important;
        background-color: var(--additional-custom-1) !important;
    }

    &.padding{
        padding: 27px 40px;
    }

    &.black{
        --color: var(--color-primary-base);
    }
}

.ui-user-panel{
    /* display: none; */
}

.whatsapp-button{
    position: fixed;
    z-index: 10;
    right: 35px;
    bottom: 180px;

    & img {
        width: 44px;
    }
}

.shadow{
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    opacity: 0;

    transition: .5s;

    &>div{
        position: absolute;
    }

    &>.tint{
    transform: scale(0);

        width: 100%;
    height: 100%;
    border-radius: 50%;

    background: rgb(0 0 0 / 70%);

    transition: .4s;
    }

    &>.custom-button-style{
        pointer-events: none;

        display: flex;
        align-items: center;
        justify-content: center;

        aspect-ratio: 1/1;
    }

    &.type-2{
        &>.custom-button-style{
            position: absolute;
            top: 40px;
            left: 40px;
        }

        &:hover{
            &>.custom-button-style{
                border-color: var(--additional-custom-1);
                background-color: var(--additional-custom-1);
            }
        }
    }
}

div:hover,
a:hover{
    &>.shadow{
        opacity: 1;

        &>.tint{
            transform: scale(2);
        }
    }

    &>.shadow.type-2{
            &>.custom-button-style{
                border-color: var(--additional-custom-1);
                background-color: var(--additional-custom-1);
            }
        }
}


.custom-main-page-btn {
  display: inline-block;

  width: fit-content;
  margin-top: 50px;
  padding: 29px 30px;
  border: 1px solid #e8e8e8;

  font-family: GothamPro-Regular, sans-serif;
  font-size: 16px;
  line-height: 16px;
  color: #000;
  text-align: center;
  text-transform: uppercase;

  background: transparent;

  transition: all 0.6s;

  &:hover {
    border: 1px solid transparent;
    color: #fff;
    background: #000;
  }
}