@media (max-width: 1024px)
{
    .container{
        width:100% !important;
    }
    .menu li a {
        padding: 25px 12px;
        font-size: 14px;
    }
    .header.fixed .menu li a {
        padding: 15px 12px;
    }
   .footer-content{
        gap:0;
    }
    .about-sec
    {
        gap:25px;
    }
    p img {
        margin: 6px 10px;
    }
}
@media (max-width: 768px)
{
    .togal-menu {
        display: block;
    }
    .togal-menu i.fas.fa-bars, .togal-menu i.fas.fa-times {
        font-size: 20px;
    }
    .togal-menu.active .fas.fa-times {
        display: block;
        position: relative;
        z-index: 9;
    }
    .logo {
        width: 22%;
        padding: 5px 0;
    }
    .togal-menu i.fas.fa-times {
        display: none;
    }
    .fas.fa-times {
        display: none;
    }
    .navbar-menu {
        position: absolute;
        top: 100%;
        background: #fff;
        width: 100%;
        height: 100vh;
        left: 0;
        display: none;
        text-align: center;
    }
    .menu li {
        display: block;
    }
    .menu li a {
        padding: 20px 30px;
        border-bottom: 1px solid #eee;
    }
    .header.fixed .menu li a {
        padding: 20px 30px;
    }
    .about-sec {
        display: none;
    }
    .about-sec.mobile {
        display: Block !important;
    }
    .about-sec.mobile .about-content {
        width: 85%;
        margin: 0 auto;
    }
     .about-sec.mobile .about-image {
        width: 100%;
    }
     .about-sec.mobile .about-content p {
        margin-top: 25px;
    }
    .booking-main {
        width: 85%;
        margin: 0 auto;
        padding:0 0 50px 0;
    }
    .booking-box {
        width: calc(100%/2 - 30px);
    }
    .booking-sec {
        gap: 50px;
    }
    .room-sec {
        display: none;
    }
    .room-sec.mobile {
        display: Block !important;
    }
    .room-sec.mobile .room-content {
        width: 85%;
        margin: 0 auto;
    }
    .room-sec.mobile .room-image {
        width: 100%;
    }
    .room-sec.mobile .room-image{
        margin-bottom: 25px;
    }
    .table-main {
        gap: 25px;
    }
    .time-drn {
        width: 70%;
    }
    .header.fixed .logo {
        width: 15%;
    }
    .plan
    {
        display: none;
    }
    .place-mobile {
        display: Block !important;
        padding: 40px 0;
    }
    .place-content p {
        width: 225px;
        display: flex;
        justify-content: space-between;
    }
    .place-content p {
        width: 215px;
        display: flex;
        justify-content: space-between;
    }
    p img {
        width: 100%;
    }
    h1::after {
        content: "";
        width: 30px;
    }
    h1::first-letter{
        font-size: 32px;
    }
    h2::first-letter
    {
        font-size:28px;
    }
    #hero-carousel i {
        top: 45%;
        width: 45px;
        left: 40px;
        height: 45px;
        line-height: 45px;
    }
    .about-content h1,.room-content h1,.time-drn h1,.custom-model-wrap h1
    {
        font-size:26px;
    }
    
    .footer-bottom-social h2,.footer-menu h2,.custom-model-wrap h2,.gallery-title h2
    {
        font-size:24px;
    }
    .title h1::after
    {
        width: 30px;
    }
    .contact-page-sec .contact-page-form h2::after,.panel-title h2::after 
    {
       width: 30px;
    }
}
@media (max-width: 560px)
{
    .time-drn {
        width: 90%;
    }
    .place-content p {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #hero-carousel i {
        top: 40%;
        width: 40px;
        left: 20px;
        font-size:18px;
        height: 40px;
        line-height: 40px;
    }
}
@media (max-width: 425px)
{
    .booking-box {
        width: calc(100%/1 - 30px);
    }
    .booking-sec
    {
       justify-content: center;
    }
    .footer-content {
        display: grid;
        grid-template-columns:unset;
        padding: 4rem 0;
    }
    .copyright-text
    {
        font-size:15px;
    }
    #hero-carousel i {
        top: 40%;
        width: 35px;
        left: 15px;
        font-size: 16px;
        height: 35px;
        line-height: 35px;
    }
    .booking-main, .room-sec.mobile .room-content,.about-sec.mobile .about-content {
        width: 90%;
        margin: 0 auto;
    }
    .page-title span
    {
        font-size:28px;
    }
    nav.breadcrumbs
    {
        font-size:14px;
    }
     .about-content h1,.room-content h1,.time-drn h1,.custom-model-wrap h1
    {
        font-size:22px;
    }
    
    .footer-bottom-social h2,.footer-menu h2,.custom-model-wrap h2,.gallery-title h2,.panel-title h2
    {
        font-size:20px;
    }
    .table-main
    {
        width:100%;
    }
    iframe#imgsrc {
        width: 350px;
        height: 300px;
    }
    .button_play_big {
        width: 60px !important;
        height: 70px!important;
        left: 55%!important;
        top: 55%!important;
    }
    .logo {
        width: 35%;
        padding: 5px 0;
    }
    .header.fixed .logo {
        width: 25%;
    }
    .navbar-menu {
        top: 100%;
    }
    .time-drn h1::before {
        width: 100px;
    }
    .time-drn h1::after
    {
        width:24px;
    }
}
@media (max-width: 375px)
{
    .copyright-text
    {
        font-size:14px;
    }
    .search-box {
        width: 310px;
    }
    h1::first-letter{
        font-size: 28px;
    }
    h2::first-letter
    {
        font-size:24px;
    }
    h1::after {
        width: 25px;
    }
    h1::before
    {
        width:110px;
    }
    footer h2::after
    {
      width: 24px;
    }
    footer h2::before
    {
      width: 74px;
    }
    .gallery-title h2::before
    {
        width: 70px;
    }
    .gallery-title h2::after
    {
        width: 22px;
    }
    .panel-title h2::after {
        width: 24px;
    }
    .panel-title h2::before {
        width: 100px;
    }
     .about-content h1,.room-content h1,.time-drn h1,.custom-model-wrap h1
    {
        font-size:20px;
    }
    
    .footer-bottom-social h2,.footer-menu h2,.custom-model-wrap h2,.gallery-title h2,.panel-title h2
    {
        font-size:18px;
    }
     #hero-carousel i {
        width: 35px;
        left: 10px;
        font-size: 14px;
        height: 35px;
        line-height: 35px;
        
     }
}