@media (max-width: 1199px) {
  .menu-button {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 6.37vw;
    height: 6.27vw;
    gap: 3.4vw;
    padding-top: 0.23vw;
  }
  
  .menu-button span {
    display: block;
    width: 6.27vw;
    height: 0.27vw;
    background-color: var(--color-3);
  }

  .menu-button.closing span:first-child {
    animation: unrotate 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }
  
  .menu-button.closing span:last-child {
    animation: unrotate2 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }
  
  @keyframes unrotate {
    from { transform: translateY(1.835vw) rotate(45deg); }
    to { transform: translateY(0) rotate(0deg); }
  }
  
  @keyframes unrotate2 {
    from { transform: translateY(-1.835vw) rotate(-45deg); }
    to { transform: translateY(0) rotate(0deg); }
  }
  
  .menu-close {
    border: none;
    background: none;
    cursor: pointer;
    width: 6.27vw;
    height: 6.27vw;
    position: relative;
    padding: 0;
  }
  
  .menu-close span {
    position: absolute;
    width: 6.27vw;
    height: 0.27vw;
    background-color: var(--color-3);
    left: 0;
    top: 50%;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  
  .menu-close span:first-child {
    transform: translateY(-1.835vw);
  }
  
  .menu-close span:last-child {
    transform: translateY(1.835vw);
  }
  
  .mobile-menu.animated .menu-close span:first-child {
    transform: rotate(45deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .mobile-menu.animated .menu-close span:last-child {
    transform: rotate(-45deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .btn {
    background-color: var(--color-button);
    color: white;
    padding: 2vw 6vw;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .page-link {
    font-size: 3.75vw;
    font-weight: var(--font-weight-medium);
    color: var(--color-4);
    text-transform: uppercase;
  }
  .btn-read-more {
    font-size: var(--mobile-font-size-nav1);
    font-weight: var(--font-weight-regular);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-4);
    text-transform: uppercase;
    text-decoration: underline;
  }

  .btn-expand {
    border: none;
    background: none;
    cursor: pointer;
    width: 9.77vw;
    height: 9.77vw;
    position: relative;
    padding: 0;
  }
  
  .btn-expand::before,
  .btn-expand::after {
    content: '';
    position: absolute;
    width: 9.77vw;
    height: 0.26vw;
    background-color: var(--color-1);
    top: 50%;
    left: 0;
  }
  
  .btn-expand::before {
    transform: rotate(90deg);
  }
  
  .btn-expand::after {
    transform: rotate(0deg);
  }

  .btn-send {
    background-color: var(--color-1);
    color: var(--color-3);
    border: 0.23vw solid var(--color-3);
  }
  
  .btn-send:hover {
    background-color: var(--color-4);
    color: var(--color-1);
  }

}

@media (min-width: 1200px) {
.btn {
    background-color: var(--color-button);
    font-size: var(--font-size-nav);
    color: white;
    padding: 0.88vw 2.65vw;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .btn:hover {
    background-color: var(--color-button-hover);
  }

  .btn-read-more {

    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-regular);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-4);
    text-transform: uppercase;
    text-decoration: underline;
  }

  .page-link {
    font-size: 1.14vw;
    font-weight: var(--font-weight-regular);
    color: var(--color-4);
    text-transform: uppercase;
  }

  .btn-expand {
    border: none;
    background: none;
    cursor: pointer;
    width: 2.95vw;
    height: 2.95vw;
    position: relative;
    padding: 0;
  }
  
  .btn-expand::before,
  .btn-expand::after {
    content: '';
    position: absolute;
    width: 2.95vw;
    height: 2px;
    background-color: var(--color-1);
    top: 50%;
    left: 0;
  }
  
  .btn-expand::before {
    transform: rotate(90deg);
  }
  
  .btn-expand::after {
    transform: rotate(0deg);
  }

  .btn-send {
    background-color: var(--color-1);
    color: var(--color-3);
    border: 1px solid var(--color-3);
  }
  
  .btn-send:hover {
    background-color: var(--color-4);
    color: var(--color-1);
  }
}