.container {
          margin: 0 auto; 
        }

        body {
          font-family: "Inter", sans-serif;
          background-color: white;
          color: #370B18;
        }

        h1 {
          color: #5A1126;
          font-family: "Kalnia", serif;
          font-weight: 500;
          text-align: center;
        }

        /* header */

        header h1 {
          border-bottom: 1px solid #BB788B;
          margin-bottom: 0;
          padding-bottom: 3px;
        }

        nav {
          border-bottom: 1px solid #BB788B;
        }

        nav ul {
          list-style-type: none;
          text-align: center;
          padding: 0;
          margin: 0;
        }

        nav ul li {
          display: block;
          margin: 10px 0;
          padding-top: 5px;
          padding-bottom: 5px;
          }

        nav ul li a:link, nav ul li a:visited {
          color: #9c1d41;
          text-decoration: none;
          font-weight: bold;
        }

        nav ul li a:hover, nav ul li a:active {
          color: #cc6885;
          text-decoration: none;
          font-weight: bold;
        }

        nav ul li:nth-child(-n+3) {
          border-bottom: 0.5px solid #E6C9CF; 
          padding-bottom: 17px; 
          margin-left: 20px;
          margin-right: 20px;       
          }

        /* packages */


        #packages {
          background-color: #FFF7F6;
          text-align: center;
          padding: 20px 0;
          border-bottom: 1px solid #E6C9CF;
        }

        .package-item {
          max-width: 500px;
          margin: 0 auto 40px;
          padding: 0 20px;
        }

        .package-item p {
          margin: 10px 0;
          text-align: center; 
          border-bottom: 0.1px solid #dfdfdf;
          padding-bottom: 20px;
        }

        #packages div {
          margin: auto;
        }

        #packages h2 {
          margin-top: 0;
          font-family: "Bebas Neue", sans-serif;
          font-weight: normal;
          font-size: 34px;
          color: #5A1126;
          margin-bottom: -5px;
        }

        #packages h3 {
          color: #953450;
          font-weight: 500;
          font-size: 25px;
          margin-top: 0;
        }

        #packages p {
          max-width: 350px;
          text-align: left;
          padding-bottom: 20px;
          border-bottom: 0.1px solid #dfdfdf;
          margin-top: -10px;
          margin-left: auto;
          margin-right: auto;
        }

        #packages img {
          padding-top: 20px;
        }

        /* hours */

        #hours {
          text-align: center;
          border-bottom: 1px solid #E6C9CF;
          padding-bottom: 15px;
        }

        #hours h2 {
          font-family: "Bebas Neue", sans-serif;
          font-weight: normal;
          font-size: 34px;
          color: #5A1126;
          margin-bottom: -5px;
        }

        #hours h3 {
          font-size: 23px;
          font-weight: 600;
          font-family: "Inria Sans", sans-serif;
          margin-top: 0;
          margin: 0;
          padding-top: 10px;
          padding-bottom: 5px;
          color: #69464F;
          border-bottom: 0.1px solid #dfdfdf;;
          margin-left: 60px;
          margin-right: 60px;
        }

        #dates {
          display: grid;
          grid-template-columns: 1fr 1fr;
          margin-top: 0;
        }

        .date h4 {
          color: #953450;
          font-weight: 600;
        }

        .date p {
          margin-top: -18px;
        }

        /* appointments */

        #appointment {
          text-align: center;
          background-color: #FFF7F6;
          padding-top: 20px;
          padding-bottom: 30px;
        }

        #appointment h2 {
          font-family: "Bebas Neue", sans-serif;
          font-weight: normal;
          font-size: 34px;
          color: #5A1126;
          margin-bottom: -5px;
          margin-top: 0;
          padding-bottom: 20px;
        }

        .form {
          max-width: 400px;
          margin: 0 auto;
          background-color: #ffffff;
          padding: 25px 20px;
          border-radius: 16px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
          display: flex;
          flex-direction: column;
          gap: 15px;
        }


        .form label {
          text-align: left;
          font-weight: bold;
          color: #5A1126;
          margin-bottom: 5px;
        }


        .form input,
        .form select {
          padding: 10px 12px;
          border: 1px solid #E6C9CF;
          border-radius: 10px;
          background-color: #fff;
        }

        .form input:focus,
        .form select:focus {
          border-color: #BB788B;
          outline: none;
        }


        .form button {
          background-color: #f393ab;
          color: white;
          border: none;
          border-radius: 12px;
          padding: 12px;
          font-weight: bold;
          cursor: pointer;
          transition: 0.3s ease;
        }

        /* footer */

        #footer {
          text-align: center;
          color: white;
          background-color: #C1AE96;
          padding-top: 20px;
          padding-bottom: 20px;
        }

        #footer h1 {
          color: white;
          margin-top: 0;
        }

        #headerbutton {
          display: none;
        }


@media (min-width: 800px) {

        /* header */

        #headerimage {
          position: relative;
          border-bottom: 3px solid #ecc0cd;
        }

        #headerbutton {
          position: absolute;
          bottom: 20px;
          left: 40px;
          display: flex;
          flex-direction: column;
          align-items: flex-start; 
          gap: 10px;
        }

        #headerbutton button {
          width: auto;
          max-width: 300px;
          padding: 10px 20px;
          background-color: #FEFBF1;
          border-color: #FEFBF1;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
          border-radius: 20px;
          color: #953450;
          height: 50px;
          font-weight: bold;
        }

        #headerbutton button {
          background-color: #FEFBF1;
          border-color: #FEFBF1;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
          border-radius: 20px;
          color: #953450;
          height: 50px;
          font-weight: bold;
        }

        .topheader {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          width: 100%;    
          box-sizing: border-box;
        }

        .topheader h1 {
          text-align: left;
          margin: 0;
          margin-bottom: -15px;
        }

        nav {
          text-align: right;
        }

        nav ul li {
          display: inline-block;
          font-size: 16px;
          padding-left: 5px;
          padding-right: 5px;
        }

        nav ul li:nth-child(-n+3) {
          border-bottom: none; 
          padding-bottom: 0px; 
          margin: 0 10px;       
        }

        #headerimage {
          background-image: url(images/tabletheader.png);
          height: 300px;
          background-size: cover;
          background-position: center;
          margin: 0;
          border-top: 3px solid #BB788B;
          display: block;
        }

        header, nav, ul, li,  header h1 {
          margin: 0;
          padding: 0;
          border: none;
          margin-bottom: -25px;
        }


      /* packages */  

        #packages h2 {
          margin: 0;
          padding-top: 25px;
        }

        .packagegallery {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: auto auto;
          gap: 30px;
          justify-items: center;
          max-width: 900px;
          margin: 0 auto;
        }

        .packagegallery .package-item {
          width: 100%;
          max-width: 350px;
          text-align: center;
        }

        .packagegallery .package-item:nth-child(3) {
          grid-column: 1 / 3;
          justify-self: center;
        }

      /* hours  */

        #hours {
          width: 800px;
          margin: auto;
        }

        #dates {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          margin-top: 0;
        }

}



@media (min-width: 1440px) {

        #headerimage {
          background-image: url(images/header.png);
          height: 500px;
          background-size: cover;
          background-position: center;
          margin: 0;
          border-top: 3px solid #BB788B;
        }

        #headerbutton {
          position: absolute;
          bottom: 20px;
          left: 40px;
        }
        
        nav ul li {
          padding-left: 15px;
          padding-right: 15px;
        }

        .packagegallery {
          display: flex;
          justify-content: center;
        }

}