* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Arial, sans-serif;
     direction: ltr;
     text-align: left;
 }

 body {
     background-image: url(offersimage.jpeg);
     background-size: 100% 1000px;
     background-repeat: no-repeat;
 }

 header {
     background-color: rgba(0, 0, 0, 0.7);
     padding: 10px 0 10px 0;
     width: 100%;

 }

 header nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 25px;
     color: #ffffff;
    flex-wrap: wrap;
 }

 nav h1 {
     padding-left: 10px;
     padding-top: 10px;
     cursor: pointer;
     font-size: 2em;
     text-wrap: nowrap;
 }

 .name-icon {
     display: flex;
 }

 ul {
     display: flex;
     list-style: none;
 }

 nav ul li {
     margin: 0 10px;

 }

 nav ul li a {
     color: #ffffff;
     text-decoration: none;
     padding: 10px 15px;
     font-size: 1.2em;
 }


 ul li a:hover {
     color: #ffbd51;
     border-radius: 5px;
 }

 ul .libooking a {
     background-color: #ffbc5184;
     color: #ffffff;
     border-radius: 5px;
 }

 ul .libooking a:hover {
     background-color: rgba(255, 255, 255, 0);
     color: #ffbd51;
     border-radius: 5px;
 }

 .container {
     display: grid;
     grid-template-columns: auto auto auto auto auto;
     margin-bottom: 110px;
     
 }

 #ph {
     border: 1px solid rgba(0, 0, 0);
     border-radius: 20px;
     text-align: center;
     padding: 40px;
     margin: 40px;
     background-color: #000000a7;
     color: #ffbd51;
     font-size: 3em;
 }

 .offer {
     text-align: center;
     background: rgba(255, 255, 255, 0.828);
     padding: 15px;
     margin: 15px 0;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 .offer h2 {
     margin: 7px;
     padding: 7px;
     text-align: center;
     color: #a70000;
 }

 .offer p {
     margin: 7px;
     padding: 7px;
     text-align: center;
     color: #555;
 }

 .container :hover {
     background-color: #ffbd51;
     transform: scale(1.09);
     border-radius: 10px;
 }

 .but {
     margin: 7px;
     padding: 7px;
     text-align: center;
     border-radius: 10px;
     border: solid black 1px;
     background-color: #a700003e;
     text-decoration: none;
     color: #555;
     text-wrap: nowrap;
 }

 footer {
     display: grid;
     grid-template-columns: auto 800px;
     justify-content: space-between;
     text-align: center;
     align-items: center;
     padding: 25px;
     background-color: rgba(0, 0, 0, 0.7);
     color: #ffffff;
 }

 footer div a {
     padding: 20px;
 }
 
 @media (max-width: 768px) {
     header nav {
         flex-direction: column;
         padding: 15px;
     }

     #h1p1 {
         font-size: 1.8em;
         margin-bottom: 15px;
     }

     nav ul {
         flex-wrap: wrap;
         justify-content: center;
     }

     nav ul li {
         margin: 5px;
     }

     footer {
         grid-template-columns: 1fr;
         gap: 20px;
     }
 }

 @media (max-width: 480px) {

     #h1p1 {
         font-size: 1.5em;
     }

     nav ul li a {
         font-size: 1em;
         padding: 8px 12px;
     }

     footer div a {
         padding: 10px;
         margin: 5px 0;
     }
 }

 @media (max-width: 320px) {
     nav ul li {
         margin: 5px 0;
     }
 }