/*id=#*/
@font-face {
    font-family: 'GoodDog';
    src: url('../assets/fonts/GoodDog.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body.thank-you
{
    background-image: url('../assets/images/DDH\ Logo\ no\ BG2.png'); 
    background-size: 20%;
    background-position: top center;
    background-repeat: no-repeat;
}

.index_page, .background_logo_nav, .booking-container, .login, .services_page, .thank-you
{
    /* background-image: url('../assets/images/BG.jpeg'); */
    /* background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    max-width: 90%;
    display: flex;e
    flex-direction: column;
    justify-content: space-between;
    padding-right: 10%;
    padding-left: 10%;*/
font-family: 'GoodDog', cursive; 
}


/*Header stuff---------------*/
#header
{
    width: 90%;              /* Sets the width of the header to 80% of the viewport */
    margin: 0 auto;          /* Centers the header horizontally */
    padding: 10px;           /* Optional padding for visual spacing */
    /* border: black 3pt solid; */
}

.logo{
    width: 150px;
    height: auto;
}

.navLink{
    width: 100px;
    height:auto;
    
}

nav{
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.navLink:hover
{
    box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.6);
}

#login_btn
{
    position: absolute;     /* Position the button relative to the header */
    top: 20px;              
    right: 180px; 
}

#login_btn:hover
{
    box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.6);
}
/*---------------------------------------*/
/*Footer stuff---------------------------*/
#footer
{
    background-color: #009FE0;
    width: 90%;              /* Sets the width of the header to 80% of the viewport */
    margin: 0 auto;          /* Centers the header horizontally */
    padding: 0;           /* Optional padding for visual spacing */
    /* border: black 3pt solid; */
}

#footer_links
{
    font-size: 15px;
    display: flex;          /* Use flexbox to layout the links */
    justify-content: center; /* Center the links horizontally */
    gap: 50px; 
    margin-top:auto;             /* Add space between each link */
    padding: 0;         
    align-items: flex-start; /* Align items to the top of the container */
    text-align: center;     /* Center text inside the container */
    width:100%;
    box-sizing: border-box;
}

#footer_links a
{
    text-decoration: none;  /* Remove underline from links */
    color: inherit;         /* Inherit text color from the parent element */
    /* border: #000 solid 2px; */
}

#footer_p {
    margin-top:auto;
    margin-bottom:0;
    padding: 0;
    font-size: 10px; /* Adjusted for readability */
    text-align: center;
    
    /* border: #000 solid 2px; */
}
/*----------------------------------------*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* overflow-x: hidden; */

}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-wrapper > footer {
  margin-top: auto;
}

.page-wrapper {
  background-image: url('../assets/images/BG.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.main-content {
  flex: 1; /* critical: this fills space and pushes footer down */
  padding: 20px;
}



/*index.html page styling--------------------------------------------------------
/*Container for the two boxes in the body*/
.container {
    display: flex;            /* Enables Flexbox layout */
    justify-content: space-between; /* Distributes space between the two divs */
    width: 90%;
    /* margin:10px auto; */
    margin: 0 auto;
    padding: 10px;

    /* border: black 3pt solid; */
}


.home_sub-title
{
    color:#d7d4d4;
    text-shadow:  -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */;
    text-align: center;
    
}

#left
{
    width: 45%;
    margin-left: auto;
    margin-right: 10px;
    padding: 5px;
    background-color: #009FE0;
    border: solid 4px grey;
    font-size: 18px;
    /* text-align: center; */
}

#center
{
     width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    background-color: #009FE0;
    border: solid 4px grey;
    font-size: 18px;
}

#right
{
    width: 45%;
    margin-left: 10px;
    margin-right: auto;
    padding:5px;
    background-color: #009FE0;
    border: solid 4px grey;
    /* text-align: center; */
}

.list_container
{
    display: flex;         /* Enables Flexbox layout */
    justify-content: center;
    gap: 20px;             /* Optional: adds space between the lists */
}

.opening_times
{
    list-style-type: none; /* Removes bullet points */
    padding: 0;           /* Removes padding */
    width: 200px;         /* Optional: sets a fixed width for the lists */
    text-align: center;
}

ul li
{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}
/*--------------------------------------------------------------------------------------*/

#ddh, #dawn, #james, #abbie
{
    width: 90%;
    margin: 10px auto;
    padding: 25px;
    background-color: #009FE0;
    border: solid 4px grey;
    border-radius: 150px; /* Keeps the rounded corners */
    display: flex;
    flex-direction: column;
    align-items: center; 
    display: flex;
    flex-direction: column;
    
}

.ddh_sub-title
{
    color: #d7d4d4;
    text-shadow: -1px -1px 0 #000,  /* Top-left shadow */
                 1px -1px 0 #000,  /* Top-right shadow */
                -1px 1px 0 #000,  /* Bottom-left shadow */
                 1px 1px 0 #000;  /* Bottom-right shadow */
    text-align: center;
    margin: 0;
}

.ddh-content
{
    display: flex;
    align-items: center; /*Center the image and text vertically*/
    justify-content: center;
    margin-top: 20px;  /*Space between title and content */
    width: 100%;
    max-width: 100%;
    flex-direction: row; /*Default direction */
}

.ddh-content p
{
     display: flex;
    align-items: center; /* Center text if it's short */
    height: 100%;
}

.ddh-content.reverse
{
    flex-direction: row-reverse; /* Reverse direction for alternating items */
}

#ddh_img
{
    /*border: solid 3px grey;
    border-radius: 50%; /* Make the image round */
    /*width: auto; /* Let the width adjust automatically */
    /*height: auto; /* Adjust height automatically */
    /*max-height: 300px; /* Max height to prevent overflow */
    /*max-width: 300px; /* Max width to prevent overflow */
    /*object-fit: cover; /* Ensure the image covers the height without distortion */
    /*margin-right: 20px; /* Space between image and text */
    /*align-self: center; /* Ensures it's not pushed away by content height */
    /*flex-shrink: 0; /* Prevent shrinking */
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: none;
    object-fit: cover;
    align-self: center;
}

.ddh-content.reverse #ddh_img
{
    margin-right: 0;
    margin-left: 20px; /* Space on the other side for reversed direction */
}

#ddh, #dawn, #james, #abbie
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ddh p, #dawn p, #james p, #abbie p
{
    width: 100%;
    max-width: 500px; /* Adjust as needed */
    margin: 0 auto;
    overflow: auto; /* Ensure text wraps properly */
}



/* login.html style */
.login-container {
    max-width: 400px;
    margin: 5px auto;
    padding: 40px;
    border: 1px solid #009FE0;
    border-radius: 10px;
    background-color: #f9f9f9;
}
.login-container h2 {
    text-align: center;
}
.login-container input[type="text"], .login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.login-container button {
    width: 100%;
    padding: 10px;
    background-color:#009FE0;
    color:white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.login-container button:hover {
    background-color:white;
    color:#009FE0;
    box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.6);
}

#BH{
    text-align: center;
}



.service-list li{
    color:#d7d4d4;
    text-shadow:  -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */;
    /* text-align: center; */
}

.services_page p, .service-list p
{
    color:#000;
    text-align: center;
}

.service-container p {
  text-align: center;
  margin: 0 auto 10px auto;
}


ol{
    margin: 0 auto;
  width: fit-content;
    text-align:  center;
}

form {
  max-width: 400px; /* limit width so form doesn't span full container */
  width: 100%;      /* allow it to shrink on smaller screens */
  margin: 0 auto;   /* center horizontally within parent */
}
#form-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 700px;
    margin: 40px auto;
    padding: 30px;
    background-color: #009FE0;
    border: solid 4px grey;
    font-size: 18px;
    box-sizing: border-box;
}

form {
    max-width: 100%;
    width: 100%;
}

form input, form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

form button {
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
}

.email-link {
  color: black;
  text-decoration: none;
  /* outline: 2px solid grey; */
}

.message
{
  display: flex;
  flex-direction: column;  /* stack vertically instead of horizontally */
  justify-content: center;  /* center vertically */
  align-items: center;      /* center horizontally */
  height: 100vh;
  text-align: center;

    
}

/* ================== MOBILE OPTIMIZATION ================== */
@media (max-width: 768px) {
body, html {
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
  }

  /* Header and nav full width */
  header, nav {
    width: 100%;
    box-sizing: border-box;
  }

  /* Nav background and wrapping */
  nav ul {
    display: flex;
    flex-wrap: wrap;  /* allow nav items to wrap to next line */
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #009FE0; /* adjust to your nav background color */
  }

  nav ul li {
    flex: 1 1 auto; /* allow nav items to shrink and grow */
    text-align: center;
    margin: 0;
    padding: 0;
  }

  nav ul li a {
    display: block;
    padding: 12px 10px;
    color: white;
    text-decoration: none;
    font-size: 1em;
  }


  /* .container {
    flex-direction: column; /* stack containers vertically */
   /* width: 100%;
  }

  #left,
  #right {
    width: 100%;
    margin: 10px 0; /* spacing between stacked containers */
 /* } */

  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  #left, #right {
    width: 100%;
    margin: 0 0 10px 0;
    box-sizing: border-box;
  }

  /* General adjustments for smaller screens */
  h1, h2, h3 {
    font-size: 1.4em;
    text-align: center;
    margin: 10px 0;
  }

  p, li {
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
  }

  /* Make sure forms fit */
  form, .form-container {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }

  input[type="text"], input[type="email"], input[type="tel"], textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
  }

  button, input[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    margin-top: 8px;
    cursor: pointer;
  }


 /*------------------*/

 #ddh, #dawn, #james, #abbie {
    padding: 10px;         /* reduce padding */
    border-radius: 30px;   /* less rounded, more compact */
  }

  .ddh-content {
    flex-direction: column; /* stack vertically on mobile */
    align-items: center;
  }

  .ddh-content.reverse {
    flex-direction: column; /* ensure reversed also stacks vertically */
  }

  #ddh_img {
    width: 200px; /* reduce image size */
    height: 200px;
    margin-bottom: 10px;
  }

  .ddh-content p {
    font-size: 1em;
    line-height: 1.5;
    margin: 0 auto;
    text-align: center;
  }

  /*-----------*/


  .service-list li {
  text-align: center;
}

.service-list li p {
  margin: 0 auto;
  text-align: center;
}

 
}