/* Look and Behaviors */
html {
    scroll-behavior: smooth;
}
body {
   background: linear-gradient(90deg, white, gray);
   background-color: #eee;
}


/* Reset some default margin/padding */
body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* Set up the header with a background image */
.header {
  background-image: url('../img/BeerBackground.jpg');
  background-size: cover;
  background-position: center;
  height: 400px;
  max-height: 400px; /* Maximum height for the header */
  width: 100%; /* Ensure the header spans the full width of the viewport */
  position: relative; /* Needed for positioning the small image */
  /* display: flex;
  justify-content: space-between;
  align-items: flex-start; */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  color: #fff; /* Set the font color for the header content */
  
}

/* Additional styling for the small image */
.small-image {
  position: absolute;
  bottom: -60px; /* Adjust the distance from the bottom as needed */
  left: 20px; /* Adjust the distance from the left as needed */
  width: 400px; /* Width of the small image */
  height: 189px; /* Height of the small image */
}

/* Additional styling for the Main Logo */
.main-logo {
  position: absolute;
  bottom: -60px; /* Adjust the distance from the bottom as needed */
  left: 20px; /* Adjust the distance from the left as needed */
  width: 400px; /* Width of the small image */
  height: 189px; /* Height of the small image */
}

/* Styling for navigation sections */
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding:0;
  list-style: none;
}
.nav-list li {
    flex-grow: 1;
    flex-shrink: 1;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-right: 15px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold; /* Make the text bold */
  font-size: 24px; /* Adjust the font size */
}


.nav-list ul li a i {
  font-size: 24px; /* Adjust the icon size as needed */
  margin-right: 10px;
}



/* Styling for the about section */
.about-section {
  text-align: center;
  padding: 10px 0; /* Add space above and below the content */
}

.about-section h2 {
  font-family: 'Helvetica', sans-serif; /* Choose an attractive font */
  font-size: 36px; /* Adjust the font size as needed */
  margin-bottom: 20px; /* Add space below the heading */
}

.about-section p {
  font-size: 18px; /* Adjust the font size for paragraphs */
  margin-bottom: 20px; /* Add space below each paragraph */
}

/* Styling for the footer */
.footer {
  background-color: #333; /* Change the background color as needed */
  color: #fff; /* Change the text color as needed */
  text-align: center;
  padding: 10px;
}



/* Add spacing to the margins of sections */
.maincontent-wrapper section {
  margin: 60px 40px 40px 40px; /* Add spacing at the top and bottom, and left and right */
  color: #333; /* Set the font color to dark charcoal */
}


/* Styling for the main section */
.main-section {
  text-align: left;
  padding: 40px 0; /* Add space above and below the content */
}

.main-section h2 {
  font-family: 'Quicksand';color: rgba(51, 51, 51, 1.0); /* Choose an attractive font */
  font-size: 52px; /* Adjust the font size as needed */
  margin-bottom: 20px; /* Add space below the heading */
}

.main-section p {
  font-family: 'Root UI';color: rgba(51, 51, 51, 1.0); /* Choose an attractive font */
  font-size: 18px; /* Adjust the font size for paragraphs */
  margin-bottom: 24px; /* Add space below each paragraph */
}
/* Add spacing to the margins of other sections */
.content-wrapper section {
  margin: 40px 100px 40px 100px; /* Add spacing at the top and bottom, and left and right */
  color: #333; /* Set the font color to dark charcoal */
}


/* Styling for the about section */
.about-section {
  text-align: center;
  padding: 40px 0; /* Add space above and below the content */
}

.about-section h2 {
  font-family: 'Quicksand';color: rgba(51, 51, 51, 1.0); /* Choose an attractive font */
  font-size: 36px; /* Adjust the font size as needed */
  margin-bottom: 20px; /* Add space below the heading */
}

.about-section p {
  font-family: 'Root UI';color: rgba(51, 51, 51, 1.0); /* Choose an attractive font */
  font-size: 18px; /* Adjust the font size for paragraphs */
  margin-bottom: 20px; /* Add space below each paragraph */
}


/* Styling for the contact section */
.contact-section {
  text-align: center;
  padding: 40px 0; /* Add space above and below the content */
}

.contact-section h2 {
  font-family: 'Quicksand';color: rgba(51, 51, 51, 1.0); /* Choose an attractive font */
  font-size: 36px; /* Adjust the font size as needed */
  margin-bottom: 20px; /* Add space below the heading */
}
.contact-section h3 {
  font-family: 'Quicksand';color: rgba(51, 51, 51, 1.0); /* Choose an attractive font */
  font-size: 28px; /* Adjust the font size as needed */
  margin-bottom: 20px; /* Add space below the heading */
}

.contact-section p {
  font-family: 'Root UI';color: rgba(51, 51, 51, 1.0); /* Choose an attractive font */
  font-size: 18px; /* Adjust the font size for paragraphs */
  margin-bottom: 20px; /* Add space below each paragraph */
}
.channels a, .channels span {
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    word-wrap: break-word;
    max-width: 100%;
    transition: opacity .1s ease-in-out 0s;
    align-content: center;
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
}