body{
        background:#E3C5BB;
        margin:0 auto;
    }

  /*Navigation*/
.top-bar, .top-bar ul {
    background:#DFE2CF;
}

.top-bar img {
    width:175px;
  }

.top-bar a {
    font-weight:bold;
    color:black;
}

.top-bar a:hover {
    color:#764248;
}

.title-bar-title {
    font-family: "Carattere", cursive;
    margin-left:5px;
}

.title-bar {
    background:#DFE2CF;
    color:black;
}

        /* Hero section styling */
.hero {
   /*  background-image: url('images/darcy-cookies.jpg'); Replace with your image URL */
    background-color:#DDA3B2;
    background-size: cover; /* Cover the entire section */
    background-position: center; /* Center the image */
    height:40vh; /* Full viewport height */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    color: rgb(0, 0, 0); /* Text color */
    text-align: center; /* Center text */
    position: relative; /* Position for overlay */
}

/* Optional overlay for better text visibility */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 173, 198, 0.5); /* Black overlay with transparency */
    z-index: 1; /* Place overlay below content */
}

/* Hero content styling */
.hero-content {
    position: relative; /* Position for content above overlay */
    z-index: 2; /* Place content above overlay */
}

.hero-content img {
    width:35%;
    padding:1%;
}

.hero .button {
    font-weight:bold;
    background:#764248;
}

.hero-banner {
    background:#DDA3B2;
}

.hero-banner h1 {
    font-family: "Carattere", cursive;
    font-size:3em;
    font-style: normal;
    font-weight:400;
}

.hero-banner .button {
    font-weight:bold;
    background:#764248;
}

.social img {
    width: 100px;
}

.hero-content h1 {
    font-family: "Carattere", cursive;
    font-size:3em;
    font-style: normal;
    font-weight:400;
}

/*Section Content*/

section {
    padding:1%;
}

.social-widget {
    background:#764248;
}

.h3 {
    text-decoration: underline;
    font-family: "Carattere", cursive;
    font-size:3em;
}

.faq-section {
}

.callout {
    background:#DDA3B2;
}

.costs {
    color:#764248;
    font-weight:bold;
}

footer {
    background:#DFE2CF;
    float:left;
    position:relative;
    width:100%;
    padding-bottom:1%;
}

footer ul {
    list-style:none;
}

footer img {
    width:125px;
    min-width:50px;
    max-width:200px;
}

.footer-brand {
    text-align: center;
}

.desktop-mobile {
    display:none;
}

.form-container {
    position: relative;
    width: 100%; /* Full width */
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow:hidden; /* Hide overflow */
    min-height:800px;
    touch-action: pan-y; /* Allow vertical scrolling */
}

.form-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    border: 0; /* Remove border */
    overflow: auto; /* Allow scrolling within the iframe */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}

@media screen and (max-width: 900px) and (orientation:portrait) {
.desktop-order {
    display:none;
}

.desktop-mobile {
    display: none;
}

.hero {
    height:45vh;
}

.hero-banner h1 {
    font-size:2em;
}

.social img {
    width:75px;
}

}