/* General Reset */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* Body */
html, body {
   height: 100%;
   width: 100%;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #f5f5f5; /* Background colour */
   color: #333; /* Text colour */
}

/* Hero Section Container */
.hero-container {
   display: flex;
   flex-direction: column; /* Stack items vertically */
   justify-content: center;
   align-items: center;
   text-align: center;
   height: 100vh; /* Full viewport height */
   width: 100%;
   padding: 20px; /* Safe padding for smaller screens */
   /*background-color: #0077cc; !* Hero background color *!*/
   /*background: linear-gradient(-45deg, #773b0a, #2d720b, #05425d, #006644);*/

   /*background: linear-gradient(-45deg, #6b3709, #2e720c, #053448, #524807);*/
   /*background-size: 400% 400%;*/
   /*animation: gradient 30s ease infinite;*/

   background-color: hsl(160, 100%, 9%);

   color: #ffffff; /* Text color */
}

@keyframes gradient {
   0% {
      background-position: 0% 50%;
   }
   50% {
      background-position: 100% 50%;
   }
   100% {
      background-position: 0% 50%;
   }
}

/* Logo */
.logo img {
   width: 400px; /* Adjust size */
   height: auto;
   margin-bottom: 3rem;
}

/* Heading */
.content h1 {
   font-size: 2.5rem; /* Large heading for desktop */
   margin-bottom: 10px;
   line-height: 1.2;
   max-width: 500px;

   font-family: "Playfair Display", serif;
   font-optical-sizing: auto;
   font-weight: 600;
   font-style: normal;
}
.content h1 span {
   color: hsl(181, 100%, 80%);
}

/* Paragraph */
.content p {
   font-size: 1.2rem;
   margin-bottom: 30px;
   max-width: 500px; /* Limit text width */
   line-height: 1.6;
}

.content p.openning-soon {
   color: hsl(332, 100%, 70%);
   padding: 2rem 2rem;
   font-size: 2em;
   font-weight: bolder;
   letter-spacing: 0.4em;

}

/* Button */
.btn {
   display: inline-block;
   background-color: #ffffff;
   color: hsl(160, 100%, 15%);
   text-decoration: none;
   padding: 10px 20px;
   font-size: 1rem;
   border-radius: 5px;
   transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
   background-color: hsl(160, 100%, 15%);
   color: #ffffff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
   .content h1 {
      font-size: 2rem; /* Slightly smaller heading */
   }

   .content p {
      font-size: 1rem; /* Slightly smaller paragraph text */
   }

}

/* Responsive Adjustments */
@media (max-width: 450px) {
   .content h1 {
      font-size: 1.5rem; /* Slightly smaller heading */
   }

   .content p {
      font-size: 1rem; /* Slightly smaller paragraph text */
   }

   .content p.openning-soon {
      font-size: 1.5em;
      padding: 1em 1em;
   }

   .logo img {
      /*max-width: 300px; !* Adjust logo size *!*/
      width: 95%;
   }
}

@media (max-width: 300px) {
   .content h1 {
      font-size: 1.2rem; /* Slightly smaller heading */
   }

   .content p {
      font-size: 1rem; /* Slightly smaller paragraph text */
   }

   .content p.openning-soon {
      font-size: 1.2em;
      padding: 1em 1em;
   }
}