@keyframes placeHolderShimmer {
            0% {
                background-position: -468px 0
            }
            100% {
                background-position: 468px 0
            }
        }

        .linear-background {
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name: placeHolderShimmer;
            animation-timing-function: linear;
            background: #f6f7f8;
            background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
            background-size: 1000px 104px;
            height: 338px;
            position: relative;
            overflow: hidden;
            border-radius: 16px;

        }


        .linear-background2 {
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name: placeHolderShimmer;
            animation-timing-function: linear;
            background: #f6f7f8;
            background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
            background-size: 1000px 104px;
            height: 600px;
            position: relative;
            overflow: hidden;
            border-radius: 16px;

        }

        .linear-background3 {
            animation-duration: 1s;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name: placeHolderShimmer;
            animation-timing-function: linear;
            background: #f6f7f8;
            background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
            background-size: 1000px 104px;
            height: 600px;
            position: relative;
            overflow: hidden;
            border-radius: 16px;
        }

        /*********************************/
        #cityModal {
        position: fixed;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255,255,255,.04);
        z-index: 99999;
        contain: layout paint;
        }
        #cityModal.active {
        backdrop-filter: blur(0.2px);
        -webkit-backdrop-filter: blur(0.2px);
        animation: fadeInBg .4s ease forwards;
        }

        .city-modal-content {
        background: linear-gradient(145deg, #fff, #f8f8f8);
        border-radius: 30px;
        padding: 70px 30px;
        max-width: 520px;
        width: 90%;
        text-align: center;
        box-shadow: 0 8px 40px rgba(0,0,0,.15);
        border: 1px solid rgba(255,136,0,.2);
        transform: translateY(40px);
        opacity: 0;
        will-change: transform, opacity;
        }
        #cityModal.active .city-modal-content {
        transform: translateY(0);
        opacity: 1;
        transition: transform .5s ease, opacity .5s ease;
        }

        .city-modal-content h2 {
        font-size: 1.4rem;
        line-height: 1.8;
        margin-bottom: 30px;
        }
        .city-modal-content h2 span {
        color: #ff8800;
        font-weight: 700;
        }
        .arrow-icon {
        color: #ff8800;
        margin-right: 6px;
        animation: arrowBounce 1.2s infinite;
        }

        .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 20px;
        }

        .card {
        height: 120px;
        background: linear-gradient(135deg, #ff9a00, #ffb347, #ff8c00);
        border-radius: 22px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        cursor: pointer;
        font-weight: 600;
        transition: transform .3s ease, box-shadow .3s ease;
        box-shadow: 0 8px 22px rgba(255,136,0,.25);
        }
        .card:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 15px 35px rgba(255,136,0,.4);
        }
        .card i {
        font-size: 44px;
        margin-bottom: 10px;
        }

        .loader-circle {
        width: 36px;
        height: 36px;
        border: 3px solid rgba(255,136,0,.2);
        border-top-color: #ff8800;
        border-radius: 50%;
        animation: spin .8s linear infinite;
        }

        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }
        @keyframes arrowBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

        @media (max-width:600px){
        .card { height: 110px; }
        .city-modal-content { padding: 25px 15px; }
        }
          /* Globe hidden visually but still measurable */
        #globe-container {
        opacity: 0;
        pointer-events: none;
        transition: opacity .6s ease;
        }

        #globe-container.globe-visible {
        opacity: 1;
        pointer-events: auto;
        }

        /* Bubble */
        #saudi-bubble {
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s ease;
        }

        #saudi-bubble.globe-visible {
        opacity: 1;
        }

        /* Hide header until loader finishes */

        .fancybox__container {
            top: 80px !important;
            height: calc(100% - 80px) !important;
        }

        #globe-container {
            min-height: 360px;
        }

        @media (max-width: 768px) {
            #globe-container {
                min-height: 300px;
            }
        }
        @media (max-width: 768px) {
            #saudi-bubble {
                backdrop-filter: none;
            }
        }
        .floating-container .element-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            position: absolute;
        }
        .floating-container .float-element i {
            z-index: 10;
            position: relative;
        }

        @media (max-width: 992px) {
            .customCursor,
            .customCursorInner {
                display: none !important;
            }
        }