.popular-div{background-color: white;padding:20px 15px;border-radius: 16px;}
.popular-div a{text-decoration: none;font-size: 15px;color: white;}
.popular-div i{color: var(--dynamic-color);}
.desti-div{height: 250px;position: relative;overflow: hidden;width: 100%;border-radius:16px;cursor: pointer;transition: all 2s ease-in-out;}
.desti-img{height: 100%;width: 100%;}
.desti-img img{height: 100%;width: 100%;object-fit: cover;}
.desti-div .textNs {position: absolute;top: 0;left: 0;z-index: 1; height: 100%; width: 100%; background: linear-gradient(0deg, #000000c9, rgba(0, 0, 0, 0.54) 22.22%, rgba(0, 0, 0, 0) 50%, transparent);}
.desti-div .textNs > div{ display: flex;justify-content: end;padding: 18px;flex-direction: column;height: 100%;align-items: center;}
.heading{color: white;font-size: 16px;font-weight: 500;opacity: 1;transition: opacity 0.5s ease;}
.desti-div:hover .heading{opacity: 0;}
.desti-div:hover .ovrlysec{ opacity: 1;}
.ovrlysec {position:absolute;top: 0;background: #0000008f;height: 100%;width: 100%;z-index: 2;color: #fff;opacity: 0;transition: opacity 0.5s ease;}
.heading-two{font-size: 23px;line-height: 16px;}
.desti-detail{font-size: 13px;}
.tours{background-color: var(--dynamic-color);padding: 4px 11px;border-radius: 4px;width: fit-content;font-size: 14px;font-weight: 500;}

@media (min-width:901px) and (max-width:1100px){
  .desti-div{height: 210px;}
  .heading-two{font-size: 20px;}
  .tours{font-size: 13px;}
}
@media (min-width:710px) and (max-width:900px){
  .desti-div{height: 180px;}
  .heading-two{font-size: 18px;}
  .tours{font-size: 12px;}
}