@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
body{
    
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    width:100%;
    margin: auto;

}

.container{
    width:100%;
    background-color:#152F2D;
    margin: auto;

}
a {
    text-decoration: none;
}

ul{
list-style: none;

}

/* H  E  A  D  E  R  start*/

.sticky {
	position: sticky;
	top: 0;
    z-index:1 ;
    background-color:#152F2D;
    border-bottom:#C59041 solid 1px ;
    display: flex;
    justify-content: space-between;
    padding: 0  20px;
}


header  .res{
    color:white;
    background: #CB5109;
    padding:8px 50px;
    margin-left:25px;
    font-weight: bold;
    font-size: 14px;   
    letter-spacing: 1px;
    border-radius: 10px;
 
}
header .res:hover{
    background: white;
    color:#CB5109;
  
}

header div:last-child{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;


}

header nav ul {
display: flex;
justify-content: space-between;
font-family: 'Roboto', sans-serif;
font-size: 13px;
letter-spacing: 1px;
font-weight:300;
padding: 0;

}
header nav ul li a{
    color:#C59041;
}

header nav ul li a:hover{
    color:#EB5E0B;

}

header nav ul li + li{
margin-left: 25px;

}
header nav ul li .current{
    color:#EB5E0B;
}

header .logo img {
width: 200px;
padding: 5px 0;


}


/* H  E  A  D  E  R  end  */

/* F I G U R E  start*/

figure   img{
    width:100%;   
    height: 300px;
    object-fit: cover;
    object-position: center;
  
    }
.home{
    height:1000px;
    background-image: url("Photos/pexels-kelly-lacy-2869215.jpg");
    background-attachment: fixed;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
}

figure{
    
    position: relative;
    margin: auto;
    width:100%;
    margin-top: 0;
    background-color: #F3F5F5;
    
}
figure h1{
    position:absolute;
    color: white;
    font-family: 'Satisfy', cursive;
    font-size: 40px;
    bottom: 70px;
    text-align: center;
    width:100%;
   
}

.home form{
    display: flex;
    flex-wrap: wrap;
    position:absolute;
    width: 100%;
    margin: auto;
    bottom: 80px;
    justify-content: center;
    align-items: center;
   
    
    
}

.home form input{
    padding:5px 20px;
    background: none;
    border:none;
    color:black;
    height:20px;
    font-size: 14px;
    width:170px;
    text-align: center;
    
}

.home form button{
    background:#CB5109 ;
    color:white;
    border: none;
    font-weight: bold;
    height:45px;
    width: 260px;
    border-radius: 10px;
    letter-spacing: 1px;
    font-size:  14px;
    margin-left: 20px;
    

}

.home form button:hover {
    background: white;
    color:#CB5109;
}

.home form label{
    color:black;
    font-size: 14px;
    width:170px;
    height: 20px;
    padding-top: 5px;
    text-align: center;
    
}
.home form div{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color:white ;
    /* border:0.5px solid white; */

}
.home form div +div{
    border-left: 5px white solid;
}

/* F  I  G  U  R  E  end*

/* M  A  I  N  start*/


main section a:hover{
    color:#EB5E0B;

}
main section p{
    color: black;
}
main >div{
    background: #f8fdfd;
  /* background-image: url("./Photos/Pattern-background-01.png");
    background-repeat: no-repeat;
    background-size: cover;  */
}

main >div .bienvenue{
  max-width:1200px;
    margin:auto;
   padding:80px 15px;
    justify-content: center;
}
.a .bienvenue{
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    align-items: center;
}
main .bienvenue p{
    font-weight: 300;
    max-width:1000px;
    margin:auto;
    line-height:22px ;
    font-size: 20px;
    line-height: 40px;
    text-align: left;
    padding-left: 30px;
    padding-top: 50px;
    margin: auto;
}
main .bienvenue div{
  max-width:600px;
}
main .bienvenue img{
   width:500px;
    object-fit: contain;

}
main h2{
    font-family: 'Lato', sans-serif;
    font-size:40px;
    font-weight: 800;
    text-align: center;
    padding-left: 30px;
    letter-spacing: 0px;
    line-height: 38px;
    width:100%;
    margin: auto;
    color:#175F5D;

}
.a .bienvenue h2{
    text-align: left;
}

.chambres{
    max-width: 1200px;
    margin:auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:50px;
}



main .card{
   padding: 50px 0;
    
}
main .card p{
    font-family: 'Lato', sans-serif;
    color: #C59041;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    max-width:400px;
}

main .card h3{
    font-family: 'Lato' sans-serif;
    color:#EB5E0B;
    font-weight: bolder;
    font-size: 35px;
    letter-spacing:2px;
    width:100%;
    text-align: center;
    line-height: 30px;
}
main .card a{
    color:#EB5E0B;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    text-decoration: underline;
    padding:20px 0;
    width:100%;
    text-align:center
}


main .card img{
    /* max-width: 550px; */
    height: 500px;
    object-fit: cover;
    border-radius: 10px;

}
/* MAIN ACCUEIL*/
.home  img{
    width:100%;   
    height: 630px;
    object-fit: cover;
    object-position: top;
  
    }
.home h1{
    position:absolute;
    color: white;
    font-family: 'Satisfy', cursive;
    font-weight: lighter;
    font-size: 70px;
    bottom: 125px;
    text-align: center;
    width:100%;
       
    }    
    main .a .bienvenue{
        max-width: 1200px;
        
    }
main .accueil{
    display: flex;
    flex-direction: column;
   padding: 50px 0;
}
main .accueil .sous-accueil{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 1200px;
    margin: auto;


}
main .accueil img{
    width:780px;
    height:420px;
    object-fit: cover;
    border-radius: 10px;
    

}
main .accueil div{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width:100%;
    margin: 0;
    justify-content: space-around;
   
}

main .accueil .txt{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: left;
    align-items:flex-start;
    width:300px;
    padding:120px 40px 120px 40px;
    border: 1px solid #C54F09;
    

}


main .accueil h3{
    font-family: 'Karla', sans-serif;
    color:#C54F09;
    font-weight: 800;
    line-height:40px ;
    font-size: 45px;
    letter-spacing: 1px;
    margin-top: 0;
    text-align: left;
    
    

}
main .accueil div p{
    font-family: 'Lato', sans-serif;
    color: #C59041;
    font-weight: 300;
    line-height: 20px;
    font-size: 16px;
    
}

main .accueil a{
    color:#C54F09;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    padding:20px 0;
   
}
main .accueil a:hover{
    color:#175F5D;

}

/*  MAIN CHAMBRES  */
    

main .chambres .textc{
    border:1px solid #C54F09;
    max-width: 550px;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 20px;
   padding: 50px 0;
}
main .chambres .textc p{
    margin-top: 50px;
}
main .chambres .textc h3{
    margin: 0;
    font-weight: 800;
}

main .chambres a{
    color:#C54F09;
    border: 1px solid #C54F09 ;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    width: 200px;
    padding:5px 0;
    letter-spacing: 1px;
    font-size:  18px;
    margin-top: 30px; 
    text-align: center;
   
}
main .chambres a:hover{
    background:#C54F09 ;
    color:white;
}   
main .chambres .card img{
    width: 550px;
     height:350px;
     object-fit: cover;
 }
 
/*   RESTAURANT start*/


.r p{
    margin-bottom: 20px;
}


.restaurant .card{
   display: flex;
   flex-direction: row;
    max-width: 1100px;
    margin: auto;
    object-fit: cover;    
   padding: 50px 0;
}
.restaurant .card .txt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:500px;
    margin-left:20px;
    padding-left: 60px;
    border: 1px solid #C54F09 ;
    height: 650px;

}
.restaurant .card:nth-child(2) .txt{
    margin-right: 20px;
    margin-left: 0;
}
.restaurant .card .txt h3{
    font-size: 60px;
    text-align: left;   
        font-weight: 800;
      

}
main .restaurant .charge{
    text-align: left;
    text-decoration: none;

}
main .restaurant  .charge:hover{
color:#175F5D;
}
.restaurant .card img{
   width:590px;
   height: 650px;
   object-fit: cover;
}

main .restaurant a:last-child{
    color:#C54F09;
    border: 1px solid #C54F09 ;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    width: 200px;
    padding:5px 0;
    letter-spacing: 1px;
    font-size:  18px;
    margin-top: 30px; 

}
.restaurant a:last-child:hover{
    background: white;
    color:#CB5109;
    border:none;
  
}
/* R E S T A U R A N T end*/

/* SPA */
main .spa {
    max-width: 1300px;
    margin: auto;
    display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

main .spa .card {
    width:100%;
    margin:auto;
}
main .spa .card .txt{
    display: grid;
    grid-template-columns:30% 45% 25%;
    padding:35px 30px;
    border: 1px solid #C54F09 ;
    margin-top: 20px;

}
main .spa .card .txt >div {
   display: flex;
   flex-direction: column;
    
}
main .spa .card .txt h3{
    text-align: left;
    font-weight: 800;
    font-size: 40px;
    line-height: 36px;

}
main .spa .card .txt p{
    width:400px;

}
main .spa{
    display: flex;
    flex-direction: column;
    align-items: center;
}
main .spa .card img{
   width: 100%;
    height:350px;
    object-fit: cover;
}

main .spa .txt a:last-child{
    color:#C54F09;
    border: 1px solid #C54F09 ;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    padding:5px 0px;
    letter-spacing: 1px;
    font-size:  18px;
    margin-top: 30px; 

}
.spa .txt a:last-child:hover{
    background: white;
    color:#CB5109;
    border:none;
}
.spa .txt .charge{
    text-align: left;
    text-decoration: none;
    margin-left: 50px;

}
.spa .txt  .charge:hover{
color:#175F5D;
}

/* C O N T A C T start */

    .ct{
        width:100%;
        margin:auto;
        display: flex;
        align-items: center; 
        justify-content:center;
        padding:40px 0;
        background-color:#F3F5F5;
        
    }
    .ct .bienvenue{
       
        width:500px;
        text-align: left;
        margin: 0;
        padding: 0;

    
    }
    .ct .bienvenue  p{
        text-align: left;
        padding: 0;
        margin-top: 50px;
      
    }
    .ct .bienvenue h2{
        text-align: left;
        padding: 0;
        color: black;
        font-size: 35px;
    }
    .ct form{
        border:1px solid #C54F09;
        border-radius: 10px;
       width:550px;
        padding: 50px 0px;
        margin-left:50px;
  
    }
    
    .ct form label{
        font-size: 20px;    
        font-size: 14px;
        height: 20px;
        padding-top: 15px;
        padding-left: 10px; 
    }
    .ct form div{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width:100%;

        
    }
  .ct form .msg{
        display: flex;
        flex-direction: column;
        border-bottom: gainsboro 1px solid;
        max-width: 600px;
       text-align: left;      
       margin-left: 10px;
       
    }

    .ct form >div >div{
        display: flex;
        flex-direction: column;
        border-bottom: gainsboro 1px solid;
        width:50%;
        margin:10px;
    }
   
    .ct form input, select{
        border:none;
        background-color: rgba(202, 201, 201,0);
        color:black;
        height:40px;
        font-size: 15px;
        width:95%;
        text-align: left;
               
    }
    .ct form textarea{
        border:none;   
        color:black;
        background-color: rgba(202, 201, 201,0);
        height:150px;
        font-size: 15px;
        width:95%;
       text-align: left;
        text-align: left;
       
    }
    .ct form .send{
        display: flex;
        justify-content: center;
    }
    .ct form button{
        color:#C54F09;
        border: 1px solid #C54F09 ;
        border-radius: 10px;
        font-weight: 600;
        height:35px;
        width: 200px;
        letter-spacing: 1px;
        font-size:  16px;
        margin-top: 30px; 
        margin-left: 10px;
        text-align: center;
        background-color: #F3F5F5;

}

    .ct form button:hover {
        background:#C54F09 ;
        color:#F3F5F5;
    }
    

    .carte{
        display:flex;
        justify-content: center;
        align-items: center;
        width:100%;
        margin:auto;
        background-color: #152F2D;
        padding-top: 50px;   
        padding-bottom: 100px;
      
    }
    .carte div:first-child div p{
        color:#C54F09;
        font-weight: 600;
        width:400px;
        text-align: right;

    }
    .carte div:first-child div{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .carte div:first-child{
        max-width:650px;
    }
    .carte div:last-child{
        padding-top: 80px;
        margin-left: 20px;
    }
    .carte div p{
        max-width:620px;
        font-weight: 300;
        font-size: 15px;
        line-height: 25px;
        text-align: left;
        color:#C59041;
       
    }
    .carte div h4{
        font-weight: 700;
        font-size: 15px;
        color:#C59041;
        
       
    }
   .carte > div > div {
       padding-top: 30px;
   }
   .carte h2{
       color:#C54F09 ;
       font-size: 55px;
       font-weight: 800;
       text-align: left;
       padding: 0;
       width: 50%;
       line-height: 45px;
   }

/* C O N T A C T end */


/* R E S E R V E R start*/

.reservation{
    background-image: url("Photos/pexels-kelly-lacy-2869215-2.jpg");
    background-size: cover;
    background-position-x: center;
    padding: 30px 0;
   
}    
.reservation form{
    display:flex;
    flex-direction: column;
    align-items: center;
    width:50%;
    margin:auto;
    background:rgb(255,255,255,0.8);
    padding:20px 0;
    
    }
.reservation form+form{
        margin-top: 20px;
    }
.reservation form input, select{
    padding:5px 10px;    
    border:none;
    color:black;
    font-size: 15px;
    text-align: center;          
}

.reservation input[type="date"], input[type="time"]{
    width:90%;
}

.reservation form >div{
    width:80%;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;  
    margin-top: 20px;
    
    
}

.reservation form >div >div{
    display: flex;
    flex-direction: column;
    width:80%;
    background: white; 
    align-items: center;
    justify-content: center;
    border:none;
    margin-top: 0;
}
.reservation form div div+div{
    margin-left: 20px;
    
}
.reservation form div div label{
    text-align: center;
    font-size: 14px;
    height: 20px;
   /*  padding-top: 5px; */
  
}
.reservation form label{
    font-size: 20px;    
    font-size: 14px;
    height: 20px;
    padding-top: 5px;
}
.reservation form button{
    background:#C54F09 ;
    border-radius: 10px;
    color:white;
    border: none;
    font-weight: bold;
    height:40px;
    width: 300px;
    letter-spacing: 1px;
    font-size:  18px;
    margin-top: 30px;
    margin-bottom: 30px;    
}

.reservation form button:hover {
    background: white;
    color:#C54F09 ;
}
.reservation form h3{
    font-family: 'karla', sans-serif;
    font-weight: 800;
    color:#C54F09 ;
    font-size: 30px;
    letter-spacing: 1px;
    width:100%;
    text-align: center;
}
.reservation form .col{
    display: flex;
    flex-direction: column;
 background: white;
 margin-top: 20px;
}

.reservation form label{
    text-align: center;
}
.rv section:last-child {
   display: flex;
   justify-content: center;
}
.rv section:last-child p{
    color:#C59041;
    font-size: 25px;
    line-height: 30px;
    text-align: left;
    padding:30px 0;
}

/* R E S E R V E R end*/


/* F  O  O  T  E  R  start*/

footer{
    background:#EDF3F3;
   padding:0px 30px;
    
}
footer .fpart1{
    max-width: 1200px;
    display: flex;
   justify-content: space-between;
   align-items: center;
    margin:auto;
    padding: 20px 0;
}
footer .logo {
    display: flex;
    flex-direction: column;
    align-items: left;

}

footer .logo ul{
    padding:0;
}
footer  a{
    color: black;

}
footer  a:hover{
    color:#C54F09;

}
footer .logo img{
    width: 200px;
  
}
footer li,p{
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight:400;
    line-height: 15px;    
}


/*  Réseaux Sociaux  */

footer .rs {
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

footer .fpart1 .rs ul{
 
    padding: 0;
    justify-content: space-between;

}

footer  .rs li + li{
    margin-top: 10px;   
}
footer .rs img{
    width:30px;
    

}
    


/*  Menu  */

footer > div .menuf{
    text-align: left;

}

footer > div .menuf li{
    line-height: 30px;

}

footer .menuf li a:hover{
    color:#C54F09;;
   
}


/*  Copyright  */

hr{
    border:solid 0.1px rgb(202, 201, 201);
}




footer .copy p{
   text-align: center;
   font-size: 0.7em;
   padding-bottom: 3px;   
    
}
/* F  O  O  T  E  R  end*/

/* R E S P O N S I V E */

/* Tablette 1024px à 768px */
@media screen  and (max-width: 1024px){
   
    header .logo img{
        width:180px;
    }
    header .res{
        padding:8px 40px;
        margin-left: 10px;
    }
    header nav ul li + li{
        margin-left: 10px;
        
        }
    .home{
        background-image: url("Photos/pexels-kelly-lacy-2869215-2.jpg");
        height:600px;
        background-position: center;
        background-attachment:initial;
        background-repeat: no-repeat;
        }
    .home h1{
        bottom:200px;
    } 
    .home form button{
        margin-left: 0;
        margin-top: 20px;
    }
    .home form div{
        margin-top: 10px;
    }
    main >div .bienvenue{
        padding: 100px 15px;
    }
    .a .bienvenue h2{
        text-align: center;
        padding-top: 30px;
    }
    .a .bienvenue{
       padding-top:50px;
    }


    main h2, p{
        padding-left: 0;
    }
    main .bienvenue p{
        padding-left: 0;
    }
    
    main .accueil .txt{
        width:80%;
        margin-top: 20px;
    }
    main .accueil img{
        width:90%;

    }
    main .accueil .sous-accueil{
        margin-top: 80px;
    }
    main .accueil .sous-accueil:nth-child(2){
        flex-direction: column-reverse;
    }
    .chambres{
        grid-template-columns: auto;
        row-gap:50px;
        justify-content: center;
    
    }
    .restaurant .card{
        flex-direction: column;
        align-items: center;
        
     }
     .restaurant .card .txt {
         padding-left: 0;
         margin-left: 0;
         margin-top: 20px;
         align-items: center;
         width:550px;

     }
     .restaurant .card a{
         text-align: center;
    
     }
     .restaurant .card .txt h3{
        text-align: center;
     }
     .restaurant .card:nth-child(2) .txt{
        margin-right: 0px;
     }
     .restaurant .card:nth-child(2){
        flex-direction: column-reverse;
    }
    main .spa .card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    main .spa .card .txt{
        width:90%;
        grid-template-columns: none;  
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    main .spa .card .txt h3{
        text-align: center;
    }
    .spa .txt .charge{
       margin:0;
    }

    footer .logo img{
        width: 180px;
          
    }
    .carte{
        flex-direction: column;
        padding: 30px 0;
    }
    
    .carte div:last-child{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .reservation form{
        width:80%;
        }
    .ct{
        flex-direction: column;
    }
    .ct form{
        width:85%;
        margin: auto;
        margin-top: 50px;
    } 

}


/* Mobile 767px à 320px */
@media screen  and  (max-width: 767px){
    .home h1{
    font-size: 55px;
    bottom:350px;
       
    }
    .sticky{
        padding:0;
        justify-content: center;
    }
    header .logo img{
        padding:5px 10px;
    }
    header .res{
       margin: 0;
       margin-bottom:20px;
    }
    header >div{
        height: 180px;
        padding:0 ;
    }
    header nav ul {
        flex-direction: column;
        justify-content: flex-end;
    }
    header nav ul li + li{
        margin-left: 0px;
        padding-top: 15px;
       
    }
    header div:last-child{
        justify-content: space-around;
    }
    header >div div:last-child{
        width:100%;
       display: flex;
       align-items: baseline;
       justify-content: center;
    }
    .home form div +div{
        border-left: none;
    }
    .home form div {
       border-bottom: 3px solid white;
    }
    .home form button{
        width: 210px;
    }
    .a .bienvenue{
        display: flex;
        flex-direction: column;
         align-items: center;
      
    }   
    main h2,p{
        margin: 0;
    }

    main .bienvenue img{
        padding: 0;
        width:100%;
    }
    main >div .bienvenue{
        padding: 70px 10px;
    }
    main .accueil .sous-accueil{
        margin-top: 40px;
    }
   
    main .accueil img{
        width:90%;
     
    }
    main .accueil .txt{
        width:70%;
        margin-top: 20px;
    }
    
    
    main .sous-accueil:last-child img{
        padding-top: 30px;
    }
    main .card{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    main .card img{
        max-width: 360px;
    }
    main .card p{
        width:300px;
        text-align:justify;
    }
        

    .restaurant .card .txt h3{
        font-size: 40px;
    }
    .restaurant .card .txt{
        width:360px;
        height: 500px;
    }  
   
    main .spa .card .txt{
        grid-template-columns: 100%;
        justify-content: center;
        padding: 35px 0;
        align-items: center;
        text-align: center;
        width:360px;
    }
    main .spa .card .txt p{
        width:300px;
        text-align:justify;
    }
    main .chambres .textc{
        width:360px;
    }
    .ct form{
        width:95%;
        margin: auto;
        margin-top: 50px;
    } 
    .ct .bienvenue {
        width:95%; 
    }
   .ct form div {
        flex-direction: column;
       
    }
    
    .ct form >div >div{
        width:100%;
        padding: 0;
        margin: 0;
    }
    
    .ct form .msg{
        margin-left: 0px;
    } 
    .carte{
        justify-content: center;
        padding:30px 0;
    }

    .carte div:first-child{
        width:100%;
        margin:auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      

    }   
    .carte div:first-child div{
        flex-direction: column;
        align-items: flex-start;
        padding-left: 30px;
        width:300px;
    
    } 
    .carte div:first-child div p{
        text-align: left;
        margin-top: 20px;
        width:300px;

    }
    .carte div:first-child div h2{
        width:300px;
    }
    .carte div:last-child{
        width:95%;
        padding:30px 0px;
        margin:0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .carte iframe{
        width: 95%;
    }
   
    .reservation form .col{
        width: 300px;
       
    }
   .rv section:last-child p{
    font-size: 20px;
   
}
    .reservation form{
        width:90%;
        }
    .reservation form div{
        width:300px;
        flex-direction: column;

    }
    .reservation form > div > div{
        width:300px;
    }
    .reservation form div div+div{
        margin-left: 0px;
        margin-top: 20px;
    }
    footer .fpart1{
       flex-direction: column;
    }
    footer .fpart1 .infos li p{
        text-align: center;
       
    }
     
    footer .menuf ul{
        padding:0;
    }
    footer > div .menuf li{
        line-height: 30px;
        text-align: center;
    
    }
    .rs p{
        width:100%;
        margin: auto;
        text-align: center;
        margin-top: 30px;
    }

}