.sdtContent{
  padding: 0px 150px !important;
}
.country {
  color: #2C3059;
  font-size: 2.25rem;
  font-weight: 400;
  font-family: 'Bellefair';
  line-height: 54px;
  width: 800px;
  height: 54px;
}

.sub-content {
  color: #2C3059;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter';
  line-height: 25.6px;
  width: 800px;
  height: 52px;
}

.texts-dark {
  color: #6A6D87 !important;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter';
  line-height: 22.4px;
  padding: 4px 12px 4px 12px !important;
  background-color: #F2F2FA !important;
}

.image-container {
  display: grid;
  overflow: hidden;
}

.images {
  display: grid;
  grid-template-columns: auto auto;
  height: 624px;
  width: 1140px;
}

.image {
  grid-column: 1/ -1;
  grid-row: 1 / -1;
  width: 558px;
  height: 300px;
  object-fit: cover;
}

.highlightsClass {
  width: 1140px;
  height: 470px;
}

.highlightHeader {
  font-size: 32px;
  line-height: 48px;
  font-weight: 400;
  color: #2C3059;
  width: 192px;
  height: 48px;
  font-family: 'Bellefair';
}

.higlight-content {
  font-size: 16px;
  line-height: 25.6px;
  font-weight: 400;
  color: #6A6D87;
  width: 956px;
  height: 130px;
  font-family: 'Inter';
}

.highlight-images {
  display: grid;
  grid-template-columns: auto auto auto;
  height: 236px;
  width: 1140px;
}

.higlight-image {
  grid-column: 1/ -1;
  grid-row: 1 / -1;
  width: 369px;
  height: 236px;
  object-fit: cover;
}

.weatherSection {
  width: 1140px;
  height: 311px;
}

.weatherHeader {
  font-family: 'Bellefair';
  font-size: 32px;
  font-weight: 400;
  color: #2C3059;
  line-height: 48px;
  width: 1140px;
  height: 48px;
}

.weatherCards {
  width: 1140px;
  height: 204px;
}

.weatherInfo {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 400;
  color: #9596AC;
  line-height: 19.2px;
  width: 198px;
  height: 19px;
}

.essentialFactsSection {
  width: 1140px;
  height: 549px;
}

.efSectionHeader {
  font-family: 'Bellefair';
  font-size: 32px;
  font-weight: 400;
  color: #2C3059;
  line-height: 48px;
  width: 1140px;
  height: 48px;
}

.efSection-content {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 500;
  color: #9596AC;
  line-height: 27px;
  width: 1140px;
  height: 27px;
}

.infoSection {
  width: 1140px;
  height: 378px;
  justify-content: space-between;
}

div.info-image {
  vertical-align: top;
  display: inline-block;
  text-align: center;

}

.efImages {
  width: 155px;
  height: 155px;
}

.img-content {
  /* display: block; */
  color: #2C3059;
  font-size: 18px;
  line-height: 27px;
  font-weight: 700;
  font-family: 'Inter';
  text-align: center;
  width: 300px;
  height: 207px;
}

.currency {
  width: 300px;
  height: 378px;
}

.evisa {
  width: 300px;
  height: 314px;
}

.caption {
  font-size: 18px;
  font-weight: 700;
  color: #2C3059;
  font-family: 'Inter';
  line-height: 27px;
  text-align: center;
  width: 300px;
  height: 27px;
}

.sub-caption {
  display: block;
  width: 300px;
  height: 52px;
  font-size: 16px;
  font-weight: 400;
  color: #6A6D87;
  line-height: 25.6px;
  text-align: center;
}

.electricity-unit {
  font-size: 16px;
  font-weight: 700;
  color: #2C3059;
  line-height: 25.6px;
  text-align: center;
}

.more-details {
  font-size: 16px;
  font-weight: 700;
  color: #684B9B;
  width: 159px;
  height: 48px;
  border-radius: 8px;
  line-height: 25.6px;
  text-align: center;
  cursor: pointer;
}

.arrow-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.fareSectionHeader {
  width: 1140px;
  height: 48px;
  font-size: 32px;
  line-height: 48px;
  font-weight: 400;
  font-family: 'Bellefair';
  color: #2C3059;
}

.fareSection {
  /* width: 1305px;  */
  height: 437px;
  padding: 80px 150px 80px 150px;
  background-color: #F9F9FC !important;
}

.similarDestination {
  /* width: 1305px; */
  height: 467px;
}

.sDestinationHeader {
  width: 1140px;
  height: 48px;
  font-size: 32px;
  line-height: 48px;
  font-weight: 400;
  font-family: 'Bellefair';
  color: #2C3059;
}

.subdest-header {
  width: 1140px;
  height: 27px;
  font-size: 18px;
  line-height: 27px;
  font-weight: 500;
  font-family: 'Inter';
  color: #9596AC;
}

.destImgSection {
  /* width: 1305px; */
  height: 360px;
  display: grid;
  grid-template-columns: auto auto auto;
}

.dest-image-container {
  display: grid;
  overflow: hidden;
  position: relative;
}

.dest-image {
  grid-column: 1/ -1;
  grid-row: 1 / -1;
  width: 480px;
  height: 360px;
  object-fit: cover;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.overlay {
  width: 480px;
  grid-column: 1/ -1;
  grid-row: 1/ -1;
  transition: 0.3s;
  transform: translateY(100%);
  display: flex;
  justify-content: center;
  background: radial-gradient(rgba(44, 48, 89, 0.8), rgba(221, 222, 236, 0));
}

.text {
  color: white;
  font-size: 28px;
  position: absolute;
  font-weight: 400;
  line-height: 42px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -30%);
  top: -10px;
  font-family: 'Bellefair' !important;
}

.dest-image-container:hover .overlay {
  transform: translateY(65%);
  height: 100%;
  background-color: #696969!important;
}

.countryName {
  opacity: 0;
}

.dest-image-container:hover .text>span {
  display: none;
}

.dest-image-container:hover .text>.countryName {
  opacity: 1;
  font-family: 'Bellefair' !important;
  margin-top: 30px !important;
}

.discoverButton {
  border-radius: 30px !important;
  background: var(--primary-surface-weak, #96949b) !important;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
  padding: 12px 12px !important;
  height: 50px;
  width: 153px;
  border: 1px solid #ffffff !important;
  font-size: 16px !important;
  line-height: 25.6px;
  font-weight: 700 !important;
  font-family: 'Inter' !important;
  color: #FFFFFF !important;
}

.hoverButton {
  border-radius: 30px !important;
  background: var(--primary-surface-weak, #F5EFFF) !important;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
  padding: 3px 24px 5px 24px !important;
  height: 50px;
  width: 153px;
  border: 1px solid #FFFFFF !important;
  font-family: 'Inter' !important;

}

.hoverButton>span {
  color: var(--primary-text, #684B9B);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 25.6px;
}

.topright {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 16px !important;
  width: 121px;
  height: 40px;
  border-radius: 32px !important;
  padding: 6px 12px 8px 12px !important;
  background-color: #344054 !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  font-family: 'Inter' !important;
}

.overlayButtons {
  width: 432px !important;
  height: 50px !important;
}