:root{
    --transition: all 0.75 ease;
   
}
*{
    box-sizing: border-box ;
    padding: 0;
    margin: 0;
    font-family: 'Playfair Display' , serif; 	
}
html{
    scroll-behavior: smooth; 
}
body{
	line-height: 1.6;
    background-color: #fafafa; 
}
.btn{
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    padding: 10px;
    width: 140px;
    display: block;
    margin: 15px auto;
    cursor: pointer;
    transition: var(--transition);
}
.btn:hover{
	opacity: 0.85;
}
.flex{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
h1, h2, h3, h4, h5, h6{
	padding: 8px 0;
}
img{
	width: 100;
	display:block;
}
@media(max-width: 500px){
	body{
		font-size: 14px;
      /*  width: 100%;*/
	}
}
@media (min-width:900px) {
    body{
        width: 100%;
    }
}

/* header */
.header{
	background: url("pictures/front.jfif"); 
	background-repeat: no-repeat;
    background-attachment: fixed;
	opacity: 0.9;
	height: 990;
    background-size: 100%;
    overflow:hidden;
	color:#fce0e0;
	font-size: 1.5em;
	padding: 0px;	
    margin: 0;
	display: flex;
	flex-direction: column;
	align-content: stretch;
}
.head-top{
    z-index: 100;
	display: flex;
    position: fixed;
    width: 100%;
	justify-content: space-between;
	align-items: center;
    background-color: black;
    opacity: 1;  
}
.cover{
    background-color: black;
    opacity: 0.5;
    z-index: 1;
    width: 100%;
}
.head-top span{
	cursor: pointer; 
	letter-spacing: 2px;
	transition: var(--transition);
	font-size: 2.3rem;
	color: whitesmoke;
}
.head-top span:hover{
	color:red; 
}
.head-bottom{ 
	flex: 1; 
	text-align: center; 
    color: white;
	width: 80vw; 
	margin: 0 auto; 
	font-size: 1.3em;	
} 
.head-bottom h2{  
	padding: 22px 0; 
	font-size: 45px; 
    color: rgb(252, 248, 248); 
	border-bottom: 1px solid #fff;  
}
.head-bottom p{
	font-size: 20px;
	margin: 45px auto;
	width: 60vw;
    z-index: 2; 
}
.head-btn{
	margin: 20px 0;
	font-size: 20px;
	font-weight: bold;
	border: 3px solid #fff;
	background: transparent;
	padding: 13px 20px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	cursor: pointer;
	transition: var(--transition);
    border-radius: 50%; 
} 
.head-btn:hover{ 
	background: red;
} 
.button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}
.site-nav{
    margin-right: 100px;
}

.loggedin{
    margin: 20px 0;
	font-size: 20px;
	font-weight: bold;
	
	padding: 13px 20px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	cursor: pointer;
	transition: var(--transition);
     
}
@media(max-width: 500px){
    .site-nav #nav-btn{
        margin: 0 0 0 60px;
        font-size: 30px;
    }
    .site-nav #nav-btn span{
        display: none;
    }
    .head-top img{
        width: 70px;
        height: 70px;
    }
    .site-name span{
        font-size: 20px;
        margin: 0 0 0 20px;
    }
    .header{
        background: url("pictures/front.jfif"); 
        height: 650px; 
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
	.head-btn{
		font-size: 17px; 
        display: flexbox;
	}
	.head-bottom h2{
		font-size: 28px;
        overflow: scroll;
	}
	.head-bottom p{
		font-size: 17px;
		margin: 20px auto;
       display: none;
	}
    
}
@media (min-width: 700px) and (max-width: 1000px) {
    .site-nav #nav-btn span{
        display: none;
        overflow-y: hidden; 
    }
}


/* --------    dark/light theme  toggle    --------------    */

#abc {
	background-color: #fafafa; 
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
	margin-right: -200px;
	transition: background 0.2s linear;
    box-sizing: border-box ;
}

body.dark {
	background: #292C35; 
}

.checkbox {
	opacity: 0;
	position: absolute; 
}

.label {
	background-color: #111;
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	position: relative;
	height: 20px;
	width: 50px;
	transform: scale(1.5);
}

.label .ball {
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 1px;
	left: 2px;
	height: 20px;
	width: 20px;
	transform: translateX(0px);
	transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
	transform: translateX(24px);
}


.fa-moon {
	color: #f1c40f;
}

.fa-sun {
	color: #f39c12;
}

@media(max-width: 500px){
    
   .label{
      width: 40px;
      height: 15px;
      margin: 0 0 0 40px;
   }
   .label .ball {
    height: 15px;
	width: 15px;
   }
   .fa-moon {
	display: none;
}

.fa-sun {
	display: none;
}

}

/* end of toggle*/
              
              
/* ----------side nav ------------*/
.sidenav{
    opacity: 0.9;
    display:none;
    height:100%;
    width:300px;
    position:fixed;
    z-index:10;
    top:0;
    right:0;
    background-color: black;
    overflow-x:hidden;
    padding-top:60px;
    }
    
    .sidenav a{
      text-decoration:none;
      padding:8px 8px 20px 70px;
      font-size:25px;
      font-family:cursive;
      color: white;
      display:block;
    }
    .sidenav a:hover{
      color: red;
    }
    .sidenav .closebtn{
      position:absolute;
      color:white;
      top:0;
      cursor: pointer;
      right:25px;
      font-size:40px;
      margin-left:50px;
    }
    
    .sidenav .btn{
        background: #5ac994;
        border-radius: 5%;
        margin:8px 5px 8px 70px;
        padding: 0;
        color: black;
      }
      .sidenav .btn a{
        color: white;
        font-size: 17px;
        padding: 10px 10px 10px 10px;
      }
      @media(max-width: 500px){
        .sidenav{
            width: 100%;
            text-align: justify;
        }
      }
  /*---------side nav ends-------------*/

/*all headings */
.title{
    color: orange;
    letter-spacing: 5px;
    text-transform: uppercase;
}
/*-----------------services---------------------*/ 
.services .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
  }
  
.services .box-container .box{
    flex:1 1 40rem;
    margin: 0 25px 10px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    border:1px solid rgba(0,0,0,.3);
    cursor: pointer;
    border-radius: .2rem;
  }
  .box{
      height: 350px;
  }
  
.services .box-container .box .image{
    height:100%;
    width:100%;
    object-fit: cover;
    position: absolute;
    top:-100%; 
    left:0;
  }
  .image {
    transition: .5s ease;
  }
 
 .box :hover  {
    opacity: 1;
  }
.services .box-container .box .content{
    text-align: center;
    background:#fff;
    padding:2rem;
    color:red;
  }
  
.services .box-container .box .content img{
    margin:1.5rem 0;
    color:royalblue;
  }
  
.services .box-container .box .content h3{
    font-size: 2.9rem;
    color:black;
  }
  
.services .box-container .box .content p{
    font-size: 2.0rem;
    color:black;
    padding:1rem 0;
  }
  
.services .box-container .box:hover .image{
    top:0;
  }
  
.services .box-container .box:hover .content{
    transform: translateY(100%);
  }
  .logo{
      left: 10px;
  }

  @media(max-width: 500px){
    .services .box-container .box{
        margin: 0 25px 0 25px;
    }
    .services .box-container .box .content p{
       font-size: 1.5rem;
    }
  }
/*-------------services ends-------------*/

/*---------------rooms-------------------------*/


.rooms{
    
    width: 100%;
}
.title h1{
    margin: 0 0 0 20px;
}
.rooms-container{
    margin: 0 20px 0 20px;
}
.room{
    margin: 45px 20px;
    padding-bottom: 25px;
    background: #2e2e2e;
    color: #fff;
}
.room-text{
    padding: 5px 20px;
}
.room-text h3{
    font-size: 24px;
}
.room-text ul{
    list-style-type: none;
    margin: 15px 0;
}
.room-text ul li{
    padding: 7px 0;
}
.room-text ul li i{
    color: var(--yellow);
    margin-right: 10px;
}
.rate{
    opacity: 0.8;
}
.rate span{
    font-size: 40px;
    font-weight: 900;
    color: orange;
}
.room-image{
    overflow: hidden;
}
.room-image img{
    transition: var(--transition);
}
.room-image:hover img{
    transform: scale(1.1);
}
.room-text .btn{
    background-color: #fafafa;
}
@media (max-width:500px){
    .room-image{
        width: 100%;  
    } 
    .room-text h2{
        color: orange;
        
        }
}
@media (min-width: 800px) and (max-width:1023px){  
    .rooms-container{ 
        display: flex; 
        flex-wrap: wrap; 
        flex-direction: row;
        margin: auto;
        gap: 10px;
        align-items: center;
       

    }
    .room{
        flex: 0 0 calc(50% - 20px);
        margin: 0 20px 0 20px;
        flex-direction: column;
    } 
    .room-image{
        width: 100%;
    }
    .room-text h2{
        color: orange;
        
        }
}
@media(min-width: 1024px){
    .rooms{
        margin: 40px 0;
    }
    .rooms-container{
        flex-direction: column;
    }
    .room{
        display: flex;
        padding-bottom: 0;
        margin: 5px 0;
        flex-direction: row;
    }
    .room-image{
        flex: 1;
    }
    .room-image img{
        height: 100%;
    }
    .room-text{
        flex: 1;
        font-size: 1.9rem;
    }
    .room-text h2{
    color: orange;
    
    }
    .room:nth-child(even){
        flex-direction: row-reverse;
    }
}
/*---------------rooms ends-----------------*/

/* ------------------customers ----------------------*/
.custom{
    background-image: url('pictures/BgImage.jpg');
    background-attachment: fixed;
}
.checked {
    color: orange;
}
.customers{
    margin-top: 50px;
    padding: 40px 10px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/customer-banner.jpg") center/cover no-repeat fixed;
  }
  .customer{
    background: #fff;
    padding: 35px;
    text-align: center;
    margin: 20px 25px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    cursor: pointer;
    transition: var(--transition);
  }
  .rating{
    margin: 10px 0;
    color: var(--yellow);
  }
  .customer h3{
    font-size: 25px;
  }
  .customer p{
    opacity: 0.7;
    line-height: 1.8;
    width: 60%;
    margin: 0 auto;
  }
  .customer img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 25px auto;
  }
  .customer span{
    font-weight: 700;
    opacity: 0.7;
  }
  .customer:hover{
    transform: translateY(-18px);
  }
  @media(min-width: 950px){
    .customers-container{
      /*  display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 30px;*/
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .customer{
        margin: 10px 15px;
    }
  }
  @media(min-width: 1370px){
    .customers-container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
  }
  @media(max-width: 500px){
    .customer{
        gap: 10px;
    }
    .customer p{
        width: 100%;
    }
    .customer img{
        width: 100px;
        height: 100px;
    }
  }

  /*-----------------footer-------------------------*/
footer{
    background-color: #2e2e2e;
    color: whitesmoke;
    text-align: center;
}
.footer-container{
    width: 85vw;
    margin: 0 auto;
    padding: 30px 0;
}
code{
    font-size: 1.5rem;
}
.flex{
    font-size: 2.5rem;
}
.footer-container p, .footer-container a, .footer-container span{
    opacity: 0.8;
}
.footer-container a{
    display: block;
    color: white;
    text-decoration: none;
}
.social-icon{
    list-style: none;
    display: flex;
    justify-content: center;
}
.social-icon li{
    margin: 0 10px;
    width: 50px;
    height: 50px;
}
.fa-facebook:hover{
    background-color: white;
    color: rgb(39, 39, 121);;
}
.fa-pinterest:hover{
    background-color: white;
    color: rgb(170, 19, 45);
}
.fa-instagram:hover{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); 
    color: black;
}
.fa-twitter:hover{
    color: rgb(46, 46, 235);
    background-color: white;
}
.contact-item span{
    display: block;
}

@media (min-width:900px){
    .footer-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap:20px
    }
}
@media (min-width:1170px){
    footer{
        text-align: left;
    }
    .footer-container{
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px; 
    }
    .footer-container div:nth-child(1){
        padding-right: 40px;
    }
    .contact-item{
        display: grid;
        grid-template-columns: 10% 90%;
        margin-bottom: 15px;
        align-items: center;
    }
    .list{
        margin-bottom: 10px;
        grid-template-rows: 50%;
    }
}