/* پرده‌ها حالت اولیه بسته */
    .curtain {
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        background: rgba(101, 101, 101, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(12px);
        opacity: 0;
        /* ← قبل از ورود ماوس مخفی */
        pointer-events: none;
        transition: opacity 0.25s linear;
        /* محو/ظاهر شدن نرم */
    }

    .curtain.visible {
        opacity: 1;
    }

    .curtain-left {
        right: 0;
        opacity: 0;
    }

    .curtain-right {
        left: 0;
        opacity: 0;
    }

    /* انیمیشن باز شدن */
    .center-text.animate p {
        opacity: 1;

    }

    .curtain-left.with-border {
        border-left: 1px solid #000;
    }

    .curtain-right.with-border {
        border-right: 1px solid #000;
    }

    .center-text.animate .curtain-left {
        border-left: 1px solid #000;
        animation: curtainOpenLeft 1.5s forwards;
    }

    .center-text.animate .curtain-right {
        border-right: 1px solid #000;
        animation: curtainOpenRight 1.5s forwards;
    }

    /* انیمیشن بسته شدن */
    .center-text.closing p {
        opacity: 0;
    }

    .center-text.closing .curtain-left {
        border-left: 1px solid #000;
        animation: curtainCloseLeft 1.5s forwards;
    }

    .center-text.closing .curtain-right {
        border-right: 1px solid #000;
        animation: curtainCloseRight 1.5s forwards;
    }

    @keyframes curtainOpenLeft {
        0% {
            width: 50%;
        }

        100% {
            width: 0;
        }
    }

    @keyframes curtainOpenRight {
        0% {
            width: 50%;
        }

        100% {
            width: 0;
        }
    }

    @keyframes curtainCloseLeft {
        0% {
            width: 0;
        }

        100% {
            width: 50%;
        }
    }


    @keyframes curtainCloseRight {
        0% {
            width: 0;
        }

        100% {
            width: 50%;
        }
    }
 .custom-popup .maplibregl-popup-content {
        padding: 0;
        overflow: hidden;
        background: transparent;
        border:2px solid #c2a26e;

    }

    .contact-popup {
      width: clamp(100px, 20vw, 300px);
      height: fit-content;
        background:  #f0f0f0;
    }

    .contact-popup .contact-image {
        width: 100%;
        height: clamp(50px,10vw,150px);
        overflow: hidden;
    }

    .contact-popup .contact-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .contact-popup .contact-content { 
    height:fit-content;
      padding: clamp(5.5px,1.1vw,16px);
        /*padding-top: clamp(5px,1vw,15px);*/
        /*padding-bottom:clamp(10px,2vw,30px);*/
        /*padding-left: clamp(10px,2vw,30px);*/
        /*padding-right: clamp(5px,1vw,15px);*/
        background-color: #f0f0f0;
        font-family: var(--default-font);
         -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
    }

    .contact-popup .contact-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: clamp(5px, 1vw, 15px);
            gap: clamp(1px, 0.5vw, 100px);
    }

    .contact-popup .contact-title {
        margin: 0;
        font-size: clamp(8px, 1vw, 50px);
        font-family: var(--default-font);
        font-weight:800;

    }

    .contact-popup .tag-label {
    color:black;
    background-color: white;
        line-height: 1.5;
    }
.contact-popup .contact-description p {
        margin: 0;
         line-height: 1.1;
         font-weight: 200;
    font-size: clamp(8px, 0.8vw, 50px);
    }

    /* استایل برای دکمه بستن پاپاپ */
    .custom-popup .maplibregl-popup-close-button {

        display: none;

    }
    .mapboxgl-popup-content, .maplibregl-popup-content {
    border-radius: 0px;
    }
   @media screen and (max-width:767px) {
        .contact-popup .contact-title {
                font-size: clamp(5px, 1vw, 15px);
        }
        .contact-popup .tag-label {
                line-height: 1;
                padding: clamp(1px, 0.7vw, 300px) clamp(0.1px, 1vw, 300px);
        }
        .contact-popup .contact-description p{
                font-size: clamp(5px, 1vw, 15px);
        }
      .contact-popup  .icon-link {
              gap: clamp(1px, 0.5vw, 100px);
      }
        
    }