/* Basic styles for the popup */
.popup {
    display: none;
    width: 100%;
    height: 100vh;
    background: red;
    position: fixed;
    z-index: 9999;
    top: 0;
    background: rgba(255, 0, 0, 0.09);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.4px);
    -webkit-backdrop-filter: blur(5.4px);
    --webkit-backdrop-filter: blur(5.4px);
}
.popup-body {
    display: flex; /* Hidden by default */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 99;
    width: 840px;
    border-radius: 20px;
    height: 600px;
}

.pop-image {
    background-image: url(https://klientusvetaine.online/wp-content/uploads/2024/07/IK_OK_1199.jpg);
    background-position: 82% 50%;
  width: 40%;
  height: 100%;
  border-radius: 20px 0px 0px 20px;
  background-size: cover;
}

.pop-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pop-content img {
    width: 240px;
}

.popup.active {
    display: block; /* Show the popup */
}

.popup-option {
    display: block;
    margin: 10px 0;
}

#pop-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
}

.pop-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.city-block {
    padding: 40px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(152, 26, 26, 1);
    color: white;
    margin: 10px;
    font-size: 20px;
    text-align: center;
    transition: .2 ease;
    width: 50% ;
    height: 300px;
}

.city-block img {
    margin-bottom: 20px;
}

.city-block:hover {
    color: white;
box-shadow:
  0.9px 0.8px 2.2px rgba(0, 0, 0, 0.02),
  2.1px 1.9px 5.3px rgba(0, 0, 0, 0.028),
  3.9px 3.6px 10px rgba(0, 0, 0, 0.035),
  6.9px 6.5px 17.9px rgba(0, 0, 0, 0.042),
  13px 12.1px 33.4px rgba(0, 0, 0, 0.05),
  31px 29px 80px rgba(0, 0, 0, 0.07)
;
background: rgb(128, 17, 17);
}

.pop-title {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
}

.pop-actions b {
    font-size: 22px;
}

@media(max-width: 1100px){
    .popup-body {
        width: 600px;
    }
    .pop-content {
        width: 100%;
    }
    .city-block {
        padding: 10px;
        font-size: 16px;
        height: 240px;
    }
}

@media(max-width: 770px){
    .popup-body {
        flex-direction: column;
        width: 90%;
        height: auto;
    }
    .pop-content {
        width: 100%;
    }
    .pop-actions {
        flex-direction: column;
    }
    .city-block {
        width: 100%;
        height: 240px;
    }
}