.offer1-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); 
  z-index: 1000; 
}

.offer1-modal {
  display: none;
  background-color: whitesmoke;
  position: fixed;
  top: 35%;
  right: 30%;
  bottom: 35%;
  left: 30%;
  padding: 42px 24px 42px 24px ;
  z-index: 1001;
  border-radius: 4px;
  border: 4px solid var(--main-color);
}

.offer1-modal_text {
  text-align: center;
  margin-bottom: 48px;
}

.offer1-modal_button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.offer1-modal_close-button,
.offer1-modal_redirect-button {
  padding: 8px 12px 8px 12px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); 
  transition: background-color 0.3s, color 0.3s;
}

.offer1-modal_redirect-button {
  background-color: var(--main-color);
  color: whitesmoke;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); 
  transition: background-color 0.3s, color 0.3s;
}   
.offer1-modal_redirect-button:hover {
  background-color: whitesmoke;
  color: var(--main-color);
} 


.offer1-modal_close-button {
  background-color: whitesmoke;
  color: var(--main-color);
}

.left {
  margin-right: 18px;
}


@media only screen and (max-width: 1100px) {

  .offer1-modal {
    display: none;
    background-color: whitesmoke;
    position: fixed;
    top: 32%;
    right: 5%;
    bottom: 32%;
    left: 5%;
    padding: 24px 24px 24px 24px ;
    z-index: 1001;
    border-radius: 4px;
    border: 4px solid var(--main-color);
  }

  @media only screen and (min-width: 600px) and (max-width: 1100px) {
    .offer1-modal {
      top: 36%;
      bottom: 36%;
    }
  }

}