/* Responsive Styles */

  @media (max-width:1417px) {
      .desktop-navbar .nav-link {

          margin: 0px 18px;
      }

      .inner-content {

          left: 48%;
      }
  }

  @media (max-width:1399px) {


      .doray-back-title {
          font-size: 100px;
      }
  }


  @media (max-width: 1199.98px) {
      .doray-back-title {
          font-size: 120px;
      }

      .doray-title {
          font-size: 4rem;
      }

      .section-title {
          font-size: 52px;
          margin-bottom: 60px;
      }

      .about-title h3 {

          font-size: 45px;
      }

      .desktop-navbar .nav-link {
          margin: 0 10px;
          font-size: 15px;
      }

      .desktop-navbar .book-btn {
          margin-left: 10px;
          padding: 8px 15px;
          font-size: 15px;
      }
  }


  @media (max-width: 1040px) {
      .desktop-navbar .nav-link {
          margin: 0px 8px;
      }
  }

  @media (max-width: 1002px) {
      .desktop-navbar .nav-link {
          font-size: 14px;
      }
  }

  @media (max-width: 991.98px) {
      .desktop-navbar {
          display: none;
      }

      .mobile-navbar {
          display: flex;
          padding-top: 32px;

      }

      .top-header {
          justify-content: space-around;
          flex-wrap: wrap;
          padding: 5px 0;
      }

      .top-header>div {
          padding: 5px 10px;
      }

      .top-mail {
          display: none;
      }

      .hero-section h1 {
          font-size: 60px;
      }

      .doray-hotel-section {
          padding-top: 150px;
      }

      .doray-back-title {
          font-size: 80px;
          top: 50px;
      }

      .doray-images-grid {
          grid-template-columns: 1fr;
          gap: 20px;
      }

      .doray-title {
          font-size: 3rem;
      }

      .section-padding {
          padding: 80px 0;
      }

      .section-title {
          font-size: 42px;
          margin-bottom: 50px;
      }

      .facility-icon {
          width: 80px;
          height: 80px;
          font-size: 32px;
      }

      .facility-title {
          font-size: 20px;
      }

      .voucher-box,
      .customer-review {
          max-width: 100%;
      }

      .img-box6 {
          width: 100%;
          padding: 20px 0px !important;
      }

      .desktop-navbar {
          padding-top: 60px;
      }

      .desktop-navbar .navbar-brand img {
          max-height: 100px;
      }

      .top-header {
          padding: 8px 0;
      }

      .close-btn {

          top: 132px;
          right: 10px;
      }

      #image1,
      #image3 {
          display: none;

      }

      .hero-bg {

          padding-top: 45px;
      }
  }

  @media(max-width:835px) {
      .top-mail {
          display: none !important;
      }
  }

  @media (max-width: 767.98px) {
      .doray-hotel-section {

          padding-top: 15px;
      }



      .doray-back-title {
          font-size: 60px;
          top: 99px;
      }


      .doray-title {
          font-size: 2.5rem;
      }

      .doray-description {
          font-size: 1rem;
      }

      .section-title {
          font-size: 36px;
          margin-bottom: 40px;
      }

      .section-subtitle {
          margin-bottom: 20px;
      }

      .section-title h2,
      .section-title .h2 {
          font-size: 28px;
      }

      .voucher-box,
      .customer-review {
          padding: 20px;
      }

      .play-btn {
          width: 60px;
          height: 60px;
      }

      .discount-animation {
          width: 150px;
          height: 150px;
      }

      .discount-animation span {
          transform-origin: 0 75px;
      }

      .desktop-navbar {
          display: none;
      }

      .mobile-navbar {
          display: flex;
      }

      .top-header {
          position: fixed;
          top: 0;
          padding: 5px 0;
          gap: 10px 15px;
          background-color: rgba(0, 0, 0, 0.9);
      }

      .top-header>div {
          gap: 5px;
      }

      .top-header a,
      .top-header i {
          font-size: 12px;
      }

      .about-title h3 {
          font-size: 35px;
      }

      .doray-back-title.show {

          display: none;
      }

      .hero-section {
          background-position: top center;
          /* ya left center */
      }
  }

  @media(max-width:667px) {
      .hero-bg {

          padding-top: 54px;
      }
  }

  @media (max-width: 575.98px) {

      .top-header a,
      .top-header i {
          font-size: 14px;
      }

      .mobile-navbar .offcanvas {
          width: 85%;
      }

      .doray-back-title {
          font-size: 40px;
      }

      .doray-title {
          font-size: 2rem;
      }

      .doray-btn {
          padding: 10px 20px;
          font-size: 14px;
      }

      .section-padding {
          padding: 60px 0;
      }

      .section-title {
          font-size: 28px;
      }

      .facility-card {
          padding: 20px 15px;
      }

      .hero-section h1 {
          font-size: 45px;
      }

      .doray-back-title {
          display: none;
      }

      .top-mail {
          display: none !important;
      }

      .inner-haeding {

          font-size: 18px;
      }

      .close-btn {
          top: 178px;
          right: 10px;
      }

      .about-title h3 {
          font-size: 28px;
      }

  }

  @media (max-width: 480px) {
      .top-header {
          justify-content: space-around;
          gap: 5px 10px;
          flex-direction: column;
      }

      .top-header>div {
          flex: 1 0 45%;
          justify-content: center;
      }

      .mobile-navbar .offcanvas {
          width: 85%;
      }

      .mobile-navbar {
          padding-top: 81px;
      }

      .about-reserv {
          flex-direction: column-reverse;

      }

      .about-reserv a {
          margin: 10px 0px;
      }

      .about-page {
          padding: 0px 20px;
      }

      .hero-bg {

          padding-top: 130px !important;
      }

      .hero-content {

          bottom: 10px;
      }

      .theme-btn.book-now-btn {

          font-size: 12px;
      }
  }

  @media (max-width:400px) {
      .mobile-navbar {

          padding-top: 63px;
      }

      .top-header a,
      .top-header i {
          font-size: 10px;
      }
  }

  @media (max-width:304px) {
      .mobile-navbar {

          padding-top: 73px;
      }
  }