html {
    scroll-behavior: smooth;
    scroll-padding: 60px;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden; /* Ensure no horizontal scrolling */
}

/* Hero Banner Section Styles /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.marketing-hero {
    height: 600px;
    background-image: url('/IMAGES/marketing/msherobackground.jpg'); /* Replace with your hero image path */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex-column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    z-index: 2;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.933));
  }
  
  
  .hero-image-overlay {
    position: relative;
    top: 200px;
    width: 400px;
    height: 150px;
    z-index: 1; /* Ensure overlay image sits above background */
    margin-bottom: 50px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
    
  }

  .hero-overlay  {
    top: 80px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay color */
    padding: 10px;
    border-radius: 8px;
  }

  .hero-overlay h1 {
    margin-top: 50px;
    font-size: 2em;
   
  }
  
  .hero-overlay p {
    font-size: 1.5em;
  }
  
@media (max-width: 768px) { 
.hero-image-overlay {
    top: 175px;
}

.hero-overlay {
    top: 45px;
}


}

  /* target audience section ////////////////////////////////////////////////////////////////////////////////*/
  .marketing-aspect-target-audience {
    height: 600px;
    background-image: url('/IMAGES/marketing/section2bk.jpg'); /* Replace with the actual image path for Target Audience */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
  }
  
  .marketing-aspect-target-audience .aspect-overlay {
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    padding-right: 30px;
    padding-left: 30px;
    border-radius: 8px;
    backdrop-filter: blur(3px);
  }
  
  .marketing-aspect-target-audience .aspect-overlay h2 {
    color: rgb(37, 176, 240);
    font-size: 2.5em;
    margin-bottom: 0.5em;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
  }
  
  .marketing-aspect-target-audience .aspect-overlay p {
    font-size: 1.5em;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
  }

  /* brand positioning ////////////////////////////////////////////////// */
  .marketing-aspect-brand-positioning {
    height: 600px;
    background-image: url('/IMAGES/marketing/section3bk.jpg'); /* Replace with the actual image path for Target Audience */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
  }
  
  .marketing-aspect-brand-positioning .aspect-overlay {
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    padding-right: 30px;
    padding-left: 30px;
    border-radius: 8px;
    backdrop-filter: blur(3px);
  }
  
  .marketing-aspect-brand-positioning .aspect-overlay h2 {
    color: rgb(81, 240, 37);
    font-size: 2.5em;
    margin-bottom: 0.5em;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
  }
  
  .marketing-aspect-brand-positioning .aspect-overlay p {
    font-size: 1.5em;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
  }


  /* engagement ////////////////////////////////////////////////// */
  .marketing-aspect-engagement {
    height: 600px;
    background-image: url('/IMAGES/marketing/section4bk.jpg'); /* Replace with the actual image path for Target Audience */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.933));
    z-index: 2;
  }
  
  .marketing-aspect-engagement .aspect-overlay {
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    padding-right: 30px;
    padding-left: 30px;
    border-radius: 8px;
    backdrop-filter: blur(3px);
  }
  
  .marketing-aspect-engagement .aspect-overlay h2 {
    color: rgb(250, 112, 255);
    font-size: 2.5em;
    margin-bottom: 0.5em;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
  }
  
  .marketing-aspect-engagement .aspect-overlay p {
    font-size: 1.5em;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
  }

  /* Data-Driven ////////////////////////////////////////////////// */  
  .marketing-aspect-data-driven {
    height: 600px;
    background-image: url('/IMAGES/marketing/section5bk2.jpg'); /* Replace with the actual image path for Target Audience */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.933));
  }
  
  .marketing-aspect-data-driven .aspect-overlay {
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    padding-right: 30px;
    padding-left: 30px;
    border-radius: 8px;
    backdrop-filter: blur(3px);
  }
  
  .marketing-aspect-data-driven .aspect-overlay h2 {
    color: rgb(255, 242, 0);
    font-size: 2.5em;
    margin-bottom: 0.5em;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
  }
  
  .marketing-aspect-data-driven .aspect-overlay p {
    font-size: 1.5em;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.933));
  } 

/* Request Section Styles /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  .marketing-request-section {
    min-height: 600px;
    background-color: #000000;
    background-image: url('/IMAGES/marketing/section6background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center everything horizontally */
    justify-content: center; /* Center everything vertically */
    text-align: center;
}

.form-container {
    background-color: #ffffffaa;
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers all content horizontally */
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.933));
}

#marketingForm input,
#marketingForm textarea,
#marketingForm select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    
}

#marketingForm button {
    padding: 12px 20px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
}

#marketingForm {
    width: 100%; /* Ensures form fills the container */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-aligns content within form */
}

#confirmationMessage {
    margin-top: 20px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    display: none;
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.933));
}