html{
    font-family: Arial, Helvetica, sans-serif;
}
.container{
    width: 1140px;
    margin: 0 auto;
}

.main-header{
    text-align: center;
    font-size: 1.9rem;
}
@media only screen and (max-width:767px) {
    .main-header{
        font-size: 1.6rem;
    }
}

.fa-hotel{
    color:black;
    font-size:1.3rem;
    align-items: center;
    text-decoration: none;
}
.fa-hotel:hover{
    transform: scale(1.1);
    transition:linear .2s;
}

.fa-bell-concierge{
    font-size: 1.4rem;
    align-items:center;
    padding: 0;
    width: auto;
}
a{
    text-decoration: none;
}
.main-navigation{
    font-size: 1.1rem;
    margin:0.7rem;
    padding:0 0.5rem 0;
    display: inline-block;
    position: relative;
    box-shadow:0 0 5px rgb(5 54 77 / 10%);
}
.main-navigation__items{
    margin:0;
    padding:0;
}
.main-navigation__item{
    display: inline-block;
    padding: 1.125rem 0.4rem; /* 10px / 16 = 0.625rem */
}
@media only screen and (max-width:576px) {
    .main-navigation__item{
        padding:0.7rem 0.2rem ;
    }
    .main-navigation{
        font-size: small;
    }
}
.main-navigation__item a{
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1rem; /* 12 / 16 = 0.75rem */ 
    font-weight: 500;
    transition: ease .2s;
}
.main-navigation__item a:hover{
    color: #f6b400;
}
.main-navigation__item.active a{
    color: #f6b400;
}
@media only screen and (max-width:1200px){
    .bell{
        display: none;
    }
}
@media only screen and (max-width:991px){
    .bell{
        display:inline-block;
    }
}
@media only screen and (max-width:767px){
    .bell{
        display: none;
    }
}

/* About us section */
.about-us{
    display: flex;
    align-items: center;
    margin-bottom: 5rem;
    font-family:Arial;
}
.about-us > div{
    flex: 1;
}
.about-us__image img{
    width: 95%;
}
.about-us__description{
    width: 85%;
    font-size:1.1rem;
    line-height: 1.4rem;
}
.about-us__title{

    margin-top: 3rem;
    margin-bottom: 2rem;
}
.section-title{
    margin-bottom: 1.5rem;
    font-weight: 700;
}

@media only screen and (max-width:767px) {
    .about-us{
        display: block;
    }
    .section-title{
        font-size:1.7rem;
        font-weight: 600;
        text-align: center;
        margin-bottom: 1rem;
    }
    .about-us__image{
        text-align: center;
    }
    .about-us__description{
        padding:1rem;
        font-size: 0.8rem;
        line-height:0.9rem;
        width: 102%;
    } 
}
/* Terms of stay */
table{
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    width: 100%;
}
.table__item{
    width: calc(100% /3);
    padding: 5px 20px 5px 0;
    border-top: 1px solid #dedede;
    font-weight: 700;
}
.table__value{
    padding: 15px 0;
    border-top: 1px solid #dedede;
}

/* Carousel */
.main__carousel{
    width:100%;
    box-sizing: inherit;
    display: block;
    padding: 0;
    margin: 0;
}
.carousel-inner{
    position: absolute;
    background-position: center;
}
.carousel-item{
    position: absolute;
    background-size: cover;
    background-position: center;
}

/* Card styles */
.room__cards{
    padding-top: 2rem;
    padding-bottom: 4rem;
}
.card{
    overflow: hidden;
}
.card:hover{
    box-shadow:  0px 15px 20px rgb(5 54 77 / 10%);
    transition: all 0.4s ease 0s;
}
.card-title{
    font-weight: 600;
}

.card-price {
    margin: -10px 0px 20px 90px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f6b400; 
    margin-bottom: 0.5rem;
}

.card__image{
    overflow: hidden;
    vertical-align: middle;
    transition: all 0.4s ease 0s; 
}
.card__image:hover{
    transform: scale(1.02);
}
.card-body{
    margin: 0rem 0.5rem;
    color: #797979;
}
.btn-warning{
    width: 100%;
}
@media only screen and (max-width:991px) {
    .ipad__text-none{
        display: none;
    }
}

/* Gallery section */
.gallery__title{
    margin:1.5rem 0 0.8rem;
    padding-left: 2rem;
}
.photos__image{ 
    width:300px;
    height:200px;
    margin:0 10px 10px 0;
}

.photos__list{
    display:flex;
    flex-wrap: wrap;
}

ul{
    list-style: none;
} 
.photos__item{
    overflow: hidden;
    vertical-align: middle;
    transition: all 0.4s ease 0s; 
}
.photos__item:hover{
    transform: scale(1.02);
}

@media only screen and (max-width:991px){
    .photos__list{
        justify-content: center;
        padding: 0;
    }
    .gallery__title{
        padding: 0;
        text-align: center;
    }
}
@media only screen and (max-width:767px) {
    .photos__image{
        width: 22rem;
        height: 14rem;
        margin-right: 0;
    }
    .photos__list{
        justify-content: center;
        padding: 0;
    }
    .gallery__title{
        padding: 0;
    }
    
}

/* Reviews section */
.head__text{
    padding:1.5rem;
    font-weight: 800;
}

@media only screen and (max-width:576px) {
    .head__text{
        font-size:1.7rem ;
        font-weight: 700;
        padding: 1rem;
        width: 24rem;
    } 
}
@media only screen and (max-width:395px){
    .head__text{
        width: 100%;
        font-size: x-large;
    } 
}
.ratings__header-title{
    padding:0 1.5rem ;
    font-size: 1.7rem;
}
.rating__avg-title{
    margin-bottom: 0.7rem;
    font-weight: 500;
}
.rating{
    display: flex;
    align-self: baseline;
}
.ma{
    padding-left: 1rem;
  }
.max{
    font-size:1.4rem;
    margin-bottom: 0;
    align-self: center;
    padding-top: 4px;
    font-weight: 400;
}

.rating__text{
    padding-left:1rem ;
    font-weight: 500;
}

@media only screen and (max-width:767px){
    .ratings__header-title{
        padding: 0.2rem;
    }
    .w-stars{
        font-size: x-large;
    }
    .rating{
        align-items: center;
    }
    .rating__avg-title{
        font-size: xx-large;
    }
    .ma{
        font-size: xx-large;
    }
    .max{
        font-size: x-large;
    }
    .rating__text{
        font-size: x-large;
    }
}
@media only screen and (max-width:576px){
    .w-stars{
        font-size:large;
    }
    .rating__avg-title{
        font-size: x-large;
    }
    .ma{
        font-size: x-large;
    }
    .max{
        font-size: large;
    }
    .rating__text{
        font-size: large;
    }
}
@media only screen and (max-width:395px){
    .w-stars{
        font-size:medium;
    }
    .rating__avg-title{
        font-size: x-large;
        margin:0;
    }
    .ma{
        font-size: x-large;
    }
    .max{
        font-size: large;
    }
    .rating__text{
        font-size: large;
    } 
}

.ratings__content{
    display: flex;
    width:80rem;
    font-family: Arial, sans-serif;
    margin-bottom: 10rem; 
}
@media only screen and (max-width:1200px){
    .ratings__content{
        width: 40rem;
        display:grid;
        margin: 0;
    }
}
@media only screen and (max-width:767px){
    .rating__text{
        font-weight: 400;
    }
    .ratings__content{
        width: 26rem;
    }
}

.ratings__progress{
    width: 40rem;
    padding: 1.5rem;
}
.progress__title{
    padding-bottom: 0.7rem;
    font-size: 1.5rem;
    font-weight: 600;
    width: 100%;
}
.progress__item{
    display:flex;
    align-items:baseline;
}
.progress__text{
    padding: 0.5rem 0.75rem 0 0;
    font-weight: 600;
    white-space: nowrap;
    width: 7rem;
}
.progress{
    margin:0.5rem 0.75rem 0 0 ;
    min-width:4.5rem;
    width:24rem;
    background-color:wheat;   
}
.progress-bar{
    position: relative;
    overflow: hidden;
}
.progress__count{
    width: 2rem;
}
@media only screen and (max-width:767px){
    .ratings__progress{
        padding:0.5rem 0.2rem;
        width: 34rem;
    }
}
@media only screen and (max-width:576px){
    .ratings__progress{
        width: 25rem;
        padding: 0.5rem 0.2rem;
    }
    .progress__title{
        padding-bottom: 0.3rem;
    }
    .progress__text{
        width: 6.5rem;
    }
    .progress{
        width:15rem;
    }
    .progress__item{
        height: 1.7rem;
    }
}
@media only screen and (max-width:410px){
    .ratings__progress{
        display: none;
    }
}
/* Categories */
.ratings__categories{
    width:40rem;
    padding: 1.5rem;
    padding-left: 3rem;
}
.ratings__title{
    padding-bottom: 0.7rem;
    font-size: 1.5rem;
    font-weight: 600;
    width: 100%;
}
.ratings__categories-text{
    padding: 0.5rem 0.75rem 0 0;
    white-space: nowrap;
    width: 30rem;
    font-weight: 600;
}
.ratings__categories-rate{
    margin:0.5rem 0.75rem 0 0 ;
    min-width:4.5rem;
    width:40rem;
}
.ratings__categories-items{
    vertical-align: middle;
}
.ratings__categories-item{
    width: 100%;
    display: flex;
    height: 2rem;
    align-items: center;
}
.ratings__categories-rate-stars{
    display: flex;
}
.w-stars{
    color: #f6b400;
}
.categories-rate-text{
    width: 2rem;
    margin-left: 0.7rem;
    font-weight: 600;
    align-self: center;
    font-size: 1.1rem;
}
@media only screen and (max-width:1200px) {
    .ratings__categories{
        padding: 1.5rem;
    }
    .ratings__categories-text{
        width:50rem;
    }
}
@media only screen and (max-width:767px){
    .ratings__categories{
        padding:0.5rem 0.2rem;
        width: 34rem;
    }
    .ratings__categories-text{
        width:45rem;
    }
}
@media only screen and (max-width:576px){
    .ratings__categories{
        width: 25rem;
        padding:0.5rem 0.2rem;
    }
    .ratings__title{
        padding-bottom: 0.3rem;
    }
    .ratings__categories-text{
        width:40rem;
    }
    .ratings__categories-item{
        height: 1.7rem;
    }
}
@media only screen and (max-width:395px){
    .ratings__content{
        width: 21.5rem;
    }
    .ratings__categories{
        width: 21.5rem;
    }
    .ratings__categories-text{
        width:40rem;
    }
}

 /* Footer */
.footer{
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    margin-top: 3rem;
}
@media only screen and (max-width:991px) {
    .footer{
        display:block;
    }
}
.social-networks{
    margin-top:5rem;
    height: 4.9rem;
    margin-bottom: 3rem;
    bottom: 3rem;
    background-color: #f6b400;
    display: flex;
    box-shadow:0 15px 20px rgb(5 54 77 / 12%);
    border-radius: 2px;
}
@media only screen and (max-width:767px) {
    .social-networks{
        font-size:small;
        margin-top: 2.5rem;
        height: auto;
        margin-bottom: 1.5rem;
        text-align: center;
    }
}
@media only screen and (max-width:576px) {
    .social-networks{
        font-size:x-small;
        margin-top: 2rem;
        height: auto;
        margin-bottom:2rem;
        text-align: center;
    }
}
.social-networks__title{
    color: #fff;
    display:flex;
    font-size: 1.5rem;
    margin: auto;
}
.icon__network{
    padding: 1.4rem;
    font-size: 2rem;
}

.fa-telegram{
    color:#fff;
    transition: all ease .1s;
}
.fa-telegram:hover{
    color: #fefefe;
    transform: scale(1.1);
}
.fa-instagram{
    color:#fff;
    padding-right: 2.5rem;
    transition: all ease .1s;

}
.fa-instagram:hover{
    color: #fefefe;
    transform: scale(1.1);  
}
@media only screen and (max-width:767px) {
    .icon__network{
        font-size: 1.5rem;
        padding:0.7rem;
    }
    span{
        font-size: medium;
        padding: 0.5rem;
    }
}
@media only screen and (max-width:576px) {
    .icon__network{
        font-size: 1.2rem;
        padding:0.5rem;
    }
    span{
        font-size:small;
        padding: 0.5rem;
    }
}
/* contacts */
.contacts_footer .contacts__item{
    margin-bottom: 20px;
}

.contacts__title{
    color: #f6b400;
    font-size:medium;
}
.footer__contacts{
    padding-top: 2rem;
}
@media only screen and (max-width:576px){
    .footer__contacts{
        padding-top: 1rem;
    }
}
ul{
    list-style: none;
}
.phone__number{
    font-weight: 600;
}
.address__link{
    font-weight: 500;
}
.email__text{
    font-weight: 500;
}
.phone__list,
.contacts__items{
    padding:0;
}
a{
    color: inherit;
    text-decoration: none;
}
.phone__link,
.address__link,
.email__link{
    color: inherit;
    text-decoration: none;
    transition: ease .1s;
}
.email__link:hover{
    cursor: pointer;
    color: #f6b400;
}
.address__link:hover{
    color: #f6b400;
}
.phone__link:hover{
    color: #f6b400;
}

.hr{
    color: #f6b400;
    font-weight:600;
}

@media only screen and (max-width:991px) {
    .contacts__item,.footer__title{
        text-align: center;
    }
}
@media only screen and (max-width:991px) {
    .map{
        text-align: center;
    }
}
@media only screen and (max-width:767px){
    .map{
        display:none;
    }
}