.ad-container {
  text-align: center;

  background-color: lightgray;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  max-width: 400px;
  width: 98%;
  overflow: hidden;
}

.ad-container:hover {
  transform: scale(1.05);
}

.ad-text {
  font-size: 1.5em;
  color: #333;
  margin: 5px;
  position: relative;
  z-index: 1;
}

.rainbow {

  --border-size: 0.3rem;
  border: var(--border-size) solid transparent;

  /* Paint an image in the border */
  border-image: conic-gradient(
      from var(--angle),
      #d53e33 0deg 90deg,
      #fbb300 90deg 180deg,
      #377af5 180deg 270deg,
      #399953 270deg 360deg
    )
    1 stretch;
  background: rgb(255 255 255 / var(--opacity));
}

@supports (background: paint(houdini)) {
  @property --opacity {
    syntax: "<number>";
    initial-value: 0.5;
    inherits: false;
  }

  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes opacityChange {
    to {
      --opacity: 1;
    }
  }

  @keyframes rotate {
    to {
      --angle: 360deg;
    }
  }

  .rainbow {
    animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;
  }

  /* Hide the warning */
  .warning {
    display: none;
  }
}

  

   html {
    overflow-x: hidden;
}
@media (min-width: 801px) {
    .ima{
          height: 310px !important;
        border-right: 2px solid;
    background-size: contain;
        border-bottom-left-radius: 21px;
          
    }
}
@media (max-width: 800px) {
       .ima{
         height: 300px !important;
          max-Width:320px !important;
    }

}