/* =========================
         POPUP
      ========================= */
  
    #travelPopup {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: rgb(0 0 0 / 89%);
      /* align-items: center; */
      justify-content: center;
      padding: 15px;
      overflow: auto;
    }
  
    .travel-popup {
      width: 100%;
      max-width: 355px;
      background: #F9F8F8;
      border-radius: 25px;
      position: relative;
      box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
      animation: popupIn .35s ease;
      height: fit-content;
      display: flex;
      flex-direction: column;
      margin: auto;
    }
  
  
    /* =========================
         TOP HERO
      ========================= */
  
    .popup-hero {
      height: 268px;
      position: relative;
     border-radius: 25px;
      background-image:
        url("/resources/images/tennispopup/main-pop.png");
  
      background-size: cover;
      background-position: center;
      color: #fff;
      overflow: hidden;
    }
  
    /* Close */
    .popup-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      border: 0;
      z-index: 10;
      background: transparent;
      cursor: pointer;
      background: transparent;
    }
  
  
    /* =========================
         HERO TEXT
      ========================= */
  
    .hero-content {
      position: absolute;
      left: 14px;
      top: 16px;
      z-index: 2;
      width: 175px;
    }
  
    /* Farehutz */
    .brand {
      margin-bottom: 15px;
  
      img {
        width: 140px;
      }
    }
  
  
    .tennis-championships {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-bottom: 0px;
      color: #303030;
      line-height: 29px;
    }
  
    /* Expert */
    .expert-label {
      color: #1E44A9;
      font-size: 30px;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 4px;
      letter-spacing: 1.8px;
    }
  
    .travel-orange {
      color: #303030;
      font-size: 30px;
      line-height: 18px;
      font-weight: 700;
      margin-bottom: 2px;
      text-transform: uppercase;
    }
  
  
    .hero-description {
      margin-top: 15px;
      font-size: 10px;
      line-height: 13px;
      color: #303030;
      max-width: 156px;
    }
  
  
  
    /* =========================
         CONTENT
      ========================= */
  
    .popup-content {
      padding: 0px 25px 18px;
    }
  
  
    /* =========================
         EXPERT BOX
      ========================= */
  
    .expert-box {
      background: #FEFEFE;
      border-radius: 28px;
      padding: 6px 10px 6px 6px;
      display: flex;
      box-shadow: 0px 0px 4px 0px #0000001A;
      align-items: center;
      justify-content: space-between;
      max-width: 245px;
    }
  
    .expert-name {
      font-size: 14px;
      font-weight: 500;
      color: #303030;
    }
  
    /* =========================
         PHONE BUTTON
      ========================= */
  
    .phoane-btn {
      display: flex;
      align-items: center;
      justify-content: center;
  
      width: 100%;
  
           background: linear-gradient(90deg, #163A9C 0%, #406BE0 74.32%);
      color: #fff;
      box-shadow: 0px 0px 4px 0px #0000001A;
  
      text-decoration: none;
  
      border-radius: 10px;
      padding: 7px 7px 8px;
      transition: .2s;
      margin: 15px 0 6px 0;
    }
  
    .phoane-btn:hover {
      color: #fff;
    }
  
    .phoane-icon {
      margin-right: 9px;
    }
  
    .phoane-small {
      display: block;
      font-size: 10px;
      color: #FEFEFE;
      font-weight: 300;
      line-height: 17px;
    }
  
    .phoane-number {
      display: block;
      font-size: 20px;
      line-height: 18px;
      font-weight: 600;
      letter-spacing: 2px;
      color: #FFFFFF;
    }
  
  
    /* =========================
         BOTTOM TEXT
      ========================= */
  
    .plaan-text {
      text-align: center;
  
      font-size: 9px;
      font-weight: 500;
  
      color: #03113C;
  
      margin: 0;
    }
  
    .plaan-text span {
      color: #1E44A9;
    }
  
  
    /* =========================
         ANIMATION
      ========================= */
  
    @keyframes popupIn {
      from {
        opacity: 0;
        transform: scale(.90) translateY(20px);
      }
  
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
  
  
    /* =========================
         DESKTOP HIDE
      ========================= */
  
    @media (min-width: 768px) {
      #travelPopup {
        display: none !important;
      }
    }