/* Reset default margins and paddings */
@font-face {
    font-family: Roboto;
    src: url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
  }
* {
    margin:auto;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #333;
}

/* Logo Styling */
.logo {
    height: 100%;

}

/* Ensure logo fills the header height */
.logo img {
    height: 100%;
    width: auto;
}

/* navigation bar */
nav{
    background-color: #fff;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
}

nav ul{
    width: 100%;
    list-style: none;
    display:flex;
    justify-content: flex-end;
}

nav li{
    height:150px;
}

nav a{
    height: 100%;
    padding: 0px 10px;
    text-decoration: none;
    display:flex;
    color:black;
    align-items: center;
}
nav a:hover{
    color:#660033;
}


.quote-btn{
    background-color: #c886a7;
    border-radius: 20px;
    padding:10px 15px;
}

.sidebar{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:250px;
    z-index: 999;
    background-color: #ffffff63;
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    display:none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.sidebar li{
    width: 100%;
}
.sidebar a{
    width: 100%;
}
.sidebar svg{
    align-items: flex-start;
}

.menu-button{
    display:none;
}
/* Ensures the section takes the full viewport width */
.hero {
    width: 100vw; /* Full viewport width */
    margin: 0;
    padding: 0;
}

/* Hero Image Styling */
.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/banner1.png");
    height: 50vh; /* Makes it take the full viewport height */
    width: 100vw; /* Ensures it stretches from left to right */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Optional: Adjust the text inside */
.hero-text {
    text-align: center;
    color: white;
}


.hero h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}


.cta-button {
    background-color: #660033;
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    border-radius: 5px;
}

.cta-button:hover {
    background-color:#fff;
    color:#660033;;
    border: solid #660033 2px;
}


/* Section Styling */
section {
    padding: 50px 20px;
    text-align: center;
}

/* Services Section */
.services {
    padding: 50px 20px;
    text-align: center;
    background-color: #efedee;
}

.serviceinfo{
    margin:3em;
}

.services h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color:#660033;
}

.services ul{
    text-align: left;;
    font-weight: bold;
    margin-bottom: 1em;
}

.checked-list {
    position: relative;
    list-style: none;
    padding-left: 30px; /* Space for check mark */
}

.checked-list::before {
    content: "✔"; /* Unicode check mark */
    color:#660033;    
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}

.checked-list li {
    margin: 5px 0;
}

.services h3{
    margin-top:3em;
    margin-bottom: 3em;
}

.services p{
    text-align: left;
    margin-bottom: 1em;
}

.additionalservices p{
    color:#660033;
}

/* Global Image Style */
img {
    width: 200px;
}

/* Contact Section */
.contact{
    background-color: #c886a7;
}
.contact form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact h2{
    color:#660033;
    text-align: left;
    font-size: 40px;
}

#contact-form{
    display: flex;
    justify-content: right;
}
.contact p{
    text-align: left;
}
.contact input,
.contact textarea {
    width: 300px;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact button {
    background-color: #660033;;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Container for all label-input pairs */
.form-container {
    display: flex;       /* Aligns children horizontally */
    gap: 20px;           /* Space between each pair */
    flex-wrap: nowrap;   /* Keeps them in a single row; remove if you want wrapping */
  }
  
  /* Each label-input pair */
  .form-group {
    display: flex;
    flex-direction: column; /* Places label above input */
    min-width: 120px;       /* Adjust as needed for responsiveness */
  }
  
  /* Basic styling */
 
  .quote {
    max-width: 100%;
    padding-top: 3em; 
    margin:5em;
  }
  
  .quote label {
    margin-bottom: 5px;
    color:#660033;
  }

  .quote input{
    padding-bottom: 10px;
  }

  .quote h2{
    color:#660033;
    text-align: center;
    font-size:2em;
  }

  .quote h3{
    color:#660033;
    padding-bottom:20px;
    margin:3em;
  }
  
  .quote input,
  .quote select {
    padding: 8px;
    font-size: 14px;
    width: 100%;         /* Ensures they fill the container width */
  }

  #quoteButton{
    background-color: #660033;
    color:#fff;
    padding:10px 30px;
    margin-top:20px;
  }
  #price{
    color:#660033;
    font-weight: bold;
    margin-top: 20px;
    font-size: 20px;;
  }

 .container h2{
    color:#660033;
 }

.step-container{
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* contact information in booking page */

.middlecontainer{
    margin:10em;
}

.contactinfo input{
    display:block;
    padding: 10px;
    font-size: 14px;
    width: 50%; 
    margin-bottom:15px;
    
}

.contactinfo h3{
    color:#660033;
    margin-bottom: 15px;
}

/* Footer */
footer {
    background-color: #660033;
    color: white;
    text-align: center;
    padding: 15px 0;
}

@media (max-width: 768px) {

    .hideOnMobile{
        display: none;
    }

    .menu-button{
        display:block;
    }


    .hero h2 {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }

    .form-container {
        display: block;  /* Change from flex to block on small screens */
    }

}

@media (max-width: 430px) {
    .sidebar{
        width:100%;
    }
    .hero h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
}