/*pop up*/


  .popup-button {
    position: fixed;
    top: 50%; 
    right: -2%; 
    padding: 10px 20px;
    transform: rotate(270deg);
    background-color: #FF5A00; 
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000; 
  }
  
    .no-scroll {
        overflow: hidden;
    }

.popup {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            overflow: auto;
            z-index:9999;
        }

        .popup-content {
            position: relative;
            margin: auto;
            /* padding: 20px; */
            width: 100%;
            height:100%;
            /* max-width: 600px; */
            background: white;
            /* border-radius: 8px; */
            text-align: center;
            align-content: center;
        }

        .close-btns {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-btns img{
          width:30px;
        }

        .close-btns:hover,
        .close-btns:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .pop-up {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    width:80%;
    margin:auto;
    /* gap: 10px; */
  }

  .popup-box {
    border: 1px solid #ccc;
    /*padding: 20px;*/
   
    align-content:center;
    text-align: center;
  }

  .popup-box img {
    max-width: 100%;
    height: auto;
  }
  
  .popup-box-right{
       background-color:#021E53;
  }
  
    .popup-box-left{
       background-color:#ffffff;
  }

  /* Styles for Mobile */
  @media (max-width: 768px) {
    .pop-up {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
    }
    
  }
  
  /*end popup*/