/* Basic Style */
.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Default for all screens */
  .full-viewport {
    object-fit: cover;
  }    
  
  /* Hero Section */
  
  
  .hero {
    background-color: lightgrey;
    background-size: cover;
    text-align: center;
    padding: 20px; /* Add some padding for spacing */
  }
  
  .hero-main {
    padding: 15px;
  }
  
  .hero .carousel {
    max-width: 1200px; /* Restrict the carousel width */
    margin: 0 auto; /* Center the carousel */
  }
  
  .hero .carousel-inner {
    max-height: 600px; /* Set a max height for the carousel */
    overflow: hidden; /* Ensure overflow is hidden to avoid unwanted scrollbars */
  }
  
  .hero .carousel-inner img {
    width: 100%; /* Ensure images stretch to fill the container width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Adjust image scaling for a clean fit */
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: invert(1); /* Ensure the control icons are visible on dark backgrounds */
  }
  
  
  .hero-main h2 {
    font-size: 1rem;
    color: #615151;
  }
  

  .main {
    font-family: "sofachrome", sans-serif;
    font-weight: 500;
    font-style: italic;
    }
    
  .fontSec  {
    font-family: "droid-sans-mono", monospace;
    font-weight: 400;
    font-style: normal;
    }
    
  .blog-header-logo {
      font-family: "sofachrome", sans-serif;
      font-size: 2.25rem;
    }

  .blog-header-logo:hover {
    text-decoration: none;
  }
  
  h1 {
  font-family: "sofachrome", sans-serif;
  }

  h2, h3, h4, h5, h6 {
  font-family: "sofachrome", sans-serif;
  }
  .flex-auto {
    flex: 0 0 auto;
  }
  
  .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
  
  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }
  
  @media (min-width: 992px) {
    .home-image {
      width: 100%;
    }
    .text-content {
      padding-right: 50px;
    }
  }
  
  @media (max-width: 991px) {
    .carousel-item {
      width: 100%;
      padding: -15px;
    }
  }