.section {
  padding-top: 4rem; /* Container padding for spacing */     
  padding-bottom: 4rem;
}        


@media (min-width: 768px) {
    
    .section {
      padding-top: 3rem; /* Container padding for spacing */     
      padding-bottom: 3rem;
    }        
    
    .section .container{            
        padding-right: calc(var(--bs-gutter-x)* 1);
        padding-left: calc(var(--bs-gutter-x)* 1);
        margin-right: auto;
    }
}





.banner {
      width: 100%;
      height: auto; /* Adjusts height automatically based on the aspect ratio of the image */
      background-color: #78afe6;
      background-image: url('images/photog-banner-2.jpg');
      background-size: contain; /* Ensures the entire image is shown */
      background-position: bottom center;
      background-repeat: no-repeat;
      padding-bottom: calc(1875 / 2000 * 100%); /* Maintain the aspect ratio of the image */
      position: relative; /* Added for consistent absolute positioning */
  }

  @media (min-width: 768px) {
      .banner  {
          width: 100%;
          background-image: url('images/photog-banner-1.jpg');
          background-size: cover;
          background-position: bottom center;
          background-repeat: no-repeat;
          padding-bottom: calc(1200 / 2560 * 90%);
          position: relative;
      }

      .banner .lead-text{
        width: 50vw;
      }

      .banner p.when{    
        font-size: 1.2rem;
      }
  }

  .section.the-lead {
    text-align: center; /* Center align text */
	font-size:18px;
	line-height:30px;
  }

 .section.the-form {
  text-align: center; /* Center align text */
  background: linear-gradient(to bottom, #fae7d3, #e9e8e8); /* Gradient background */
}

/* Button styles moved to base.css for better maintainability */

.hero-video {
    width: 100%;
    height: 70vh; /* Default height for larger devices */
    object-fit: cover;
}

@media only screen and (max-width: 600px) { /* Adjust the max-width as needed for your breakpoint */
    .hero-video {
        height: auto; /* Unset the height for small devices */
    }
}