@media only screen and (min-width: 2561px) and (max-width: 2721px) {
    
    html {
        font-size: 100%;
    }
}

@media only screen and (min-width: 2401px) and (max-width: 2561px) {
    
    html {
        font-size: 95%;
    }
}

@media only screen and (min-width: 2201px) and (max-width: 2400px) {
    
    html {
        font-size: 90%;
    }
}

@media only screen and (min-width: 2001px) and (max-width: 2200px) {
    
    html {
        font-size: 85%;
    }
}

@media only screen and (min-width: 1801px) and (max-width: 2000px) {
    
    html {
        font-size: 80%;
    }
}

@media only screen and (min-width: 1601px) and (max-width: 1800px) {
    
    html {
        font-size: 75%;
    }
}

@media only screen and (min-width: 1428px) and (max-width: 1600px) {
    
    html {
        font-size: 70%;
    }
}

@media only screen and (max-width: 1440px) {
    
    html {
        font-size: 60%;
    }
}

@media only screen and (max-width: 1300px) {
    
    html {
        font-size: 58%;
    }

}

@media only screen and (max-width: 1250px) {
    
    html {
        font-size: 55%;
    }

}

@media only screen and (max-width: 1150px) {
    
    html {
        font-size: 50%;
    }

}


@media only screen and (max-width: 1024px){
    
    html {
        font-size: 48%;
    }

    .address-box span {
        font-size: 2.3rem;
    }

}

@media only screen and (max-width: 950px) {
    
    html {
        font-size: 45%;
    }

}

@media only screen and (max-width: 890px) {
    
    html {
        font-size: 38%;
    }
    .sub-heading {
        font-size: 2rem;
    }

}

@media only screen and (max-width: 768px){
    
    html {
        font-size: 34%;
    }
}
    
@media only screen and (max-width: 700px){
    
        html {
            font-size: 32%;
        }

}

@media only screen and (max-width: 650px){
    
    html {
        font-size: 28%;
    }

} 

@media only screen and (max-width: 600px){
    
    html {
        font-size: 45%;
    }

    .dropdown-content {
        margin-top: 1rem;
        width: 38%;
    }

    .dropdown-content li a {
        font-size: 2.4rem;
    }

    .dropdown-content-2 {
        margin-top: 1rem;
        width: 53%;
    }

    .dropdown-content-2 li a {
        font-size: 2.4rem;
    }

    .nav-inner-container {
        justify-content: space-between;
    }

    .logo img {
        width: 100%;
    }

    .nav-btn {
        display: none;
 
    }

    .nav-btn {
        flex-direction: column;
        position: absolute;
        height: 70rem;
        width: 100%;
        background-color: #ffffff;
        top: 15rem;
        left: 0;
        z-index: 1;
        transition: transform 0.5s ease;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .btn {
        font-size: 2.5rem;
    }

    .fraud-btn a {
        font-size: 2.5rem;
    }

    .contact-btn a {
        font-size: 2.5rem;
    }

    .fraud-btn i {
        font-size: 2.5rem;
        padding-right: 1rem;
    }

    .fraud-btn {
        padding: 1rem 2.7rem;
    }

    .contact-btn {
        padding: 1rem 2.7rem;
    }

    .hamburger{
        display: flex;
    }

    .hamburger-icon {
      display: flex;
      width: 4rem;
    }

    .close-icon{
        margin-left: -25px;
        display: none;
        width: 3rem;
    }

    .heading-box {
        padding: 3.6rem 0rem 2rem;
    }

    .hero-container {
        height: 50rem;
    }

    .hero-content {
        width: 90%;
    }

    .hero-content h1 {
        font-size: 6.5rem;
    }

    .heading {
        font-size: 3rem;
    }

    .about-heading {
        width: 40%;
    }

    .about-outer-container {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }

    .about-details h2 {
        width: 100%;
    }

    .p1 {
        font-size: 2.2rem;
        width: 100%;
    }

    .p2 {
        font-size: 2.2rem;
        width: 100%;
    }

    .p2 span {
        font-size: 2.4rem;
    }

    .about-btn a {
        font-size: 2.5rem;
    }

    .facility-outer-container {
        overflow-x: auto;
        display: flex;
        align-items: center;
        height: 35rem;
        scroll-behavior: smooth;
        column-gap: 2rem;
    }

    .facility-outer-container::-webkit-scrollbar {
        width: 0;
    }

    .facility-box {
        min-width: 70%;
        margin-left: 1.3rem;
    }

    .review-outer-container {
        overflow-x: auto;
        display: flex;
        height: 50rem;
        scroll-behavior: smooth;
        column-gap: 2rem;
        padding: 2rem 0;
    }

    .review-outer-container::-webkit-scrollbar {
        width: 0;
    }

    .review-box {
        min-width: 75%;
        margin-left: 1.3rem;
    }

    .gallery-container {
        margin-top: 2rem;
        height: fit-content;
    }

    .img-2, 
    .img-3,
    .img-5,
    .img-6 {
        display: none;
    }

    .img-container {
        display: grid;
        grid-template-columns: 1fr ;
        row-gap: 2rem;
    }

    .footer-outer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .footer-link {
        width: 90%;
    }

    .media {
        width: auto;
    }

    .accommodation-container {
        height: fit-content;
    }

    .outer-container {
        flex-direction: column;
        row-gap: 3rem;
        padding-bottom: 5rem;
    }

    .box {
        width: 90%;
        margin: auto;
    }

    .a-nathdwara-btn a {
        font-size: 3rem;
    }

    .a-dwarka-btn a {
        font-size: 3rem;
    }

    .member-outer-container {
        row-gap: 3rem;
        flex-direction: column;
    }

    .member-box img {
        width: 100%;
        height: 60rem;
    }

    .member-box {
        gap: 1rem;
    }

    .dwarka-bhavan-container {
        height: 76rem;
        flex-direction: column;
    }

    .bhavan-img {
        width: 100%;
    }

    .bhavan-img img {
        border-radius: 2rem 2rem 0 0;
    }

    .facility-details {
        width: 100%;
    }

    .room-outer-container {
        grid-template-columns: 1fr;
    }

    .hero-bg {
        height: 35rem;
        background-image: url(bg.png);
    }

    .gallery-outer-container {
        grid-template-columns: 1fr;
    }

    .contact-container {
        height: fit-content;
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-box {
        display: grid;
        grid-template-rows: 1fr;
    }

    .phone-box {
        width: 100%;
    }

    .address-box {
        width: 100%;
    }

    .second {
        order: 0;
    }

    .part-1 h1 {
        font-size: 3rem;
    }
    
    .fraud-container p {
        width: 100%;
        margin: 0;
    }

    .fraud_info {
        grid-template-columns: 1fr;
    }

    .fraud-gallery {
        grid-template-columns: 1fr;
    }

    .fraud-img {
        width: 95%;
        margin: auto;
        height: 35rem;
    }

    .modal-dialog {
        width: 80%;
        top: 55%;
    }

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

    .model-details h6 b {
        font-size: 2.5rem;
    }
    
    .modal-body p {
        font-size: 2.5rem;
    }

    .modal-body strong {
        font-size: 2rem;
    }

    .nav-bar {
        z-index: 0;
    }

    .dwarka-bg-container .popup-image img {
        width: 90%;
        height: auto;
    }

    .dwarka-bg-container .popup-image span {
        right: 2rem;
    }

    .modal-body p a {
        font-size: 2.5rem;
    }

    .modal-body strong a {
        font-size: 2rem;
    }

    .left-arrow {
        left: .5rem;
        z-index: 1;
    }

    .right-arrow {
        right: .5rem;
        z-index: 1;
    }
}

@media only screen and (max-width: 550px){
    
    html {
        font-size: 42%;
    }

    .nav-btn {
        top: 14.5rem;
    }

    .member-box img {
        width: 100%;
        height: 58rem;
    }
}

@media only screen and (max-width: 500px){
    
    html {
        font-size: 40%;
    }

    .facility-outer-container {
        height: 37rem;
    }

    .member-box img {
        width: 100%;
        height: 55rem;
    }
}

@media only screen and (max-width: 500px){
    
    html {
        font-size: 38%;
    }
}

@media only screen and (max-width: 450px){
    
    html {
        font-size: 36%;
    }

    .member-box img {
        width: 100%;
        height: 50rem;
    }
}

@media only screen and (max-width: 426px){
    
    html {
        font-size: 40%;
    }

    .nav-btn {
        top: 13.5rem;
    }

    .hero-content h1 {
        font-size: 5rem;
    }

    .hero-content p {
        font-size: 2.5rem;
    }

    .hero-container {
        height: 40rem;
    }

    .about-heading {
        width: 45%;
    }

    .facility-box {
        min-width: 65%;
    }

    .review-box {
        min-width: 85%;
    }

    .gallery-nathdwara-btn {
        width: 45%;
        height: fit-content;
        padding: 2rem 2rem;
        margin: 1rem;
    }

    .gallery-dwarka-btn {
        width: 40%;
        height: fit-content;
        padding: 2rem 2rem;
        margin: 1rem;
    }

    .gallery-btn-box {
        width: 97%;
        display: flex;
        padding: 1rem;
        margin: auto;
    }

    .dwarka-bhavan-container {
        height: 70rem;
    }

    .rooms-facility {
        width: 90%;
        gap: 1rem 2rem;
    }
        
    .fraud-img {
        height: 30rem;
    }
}

@media only screen and (max-width: 376px){
    
    html {
        font-size: 38%;
    }

    .nav-btn {
        top: 13.3rem;
    }

    .about-btn {
        width: 22%;
    }

    .facility-box {
        min-width: 80%;
    }


}

@media only screen and (max-width: 350px){
    
    html {
        font-size: 35%;
    }

}

@media only screen and (max-width: 350px){
    
    html {
        font-size: 32%;
    }
}