/* .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 8rem; 
    height: 100vh; 
    background-color: #333; 
    z-index: 1050; 
  } */

  /* .nav .nav-link { */
    /* color: white; 
    padding: 15px; 
    text-align: left; 
  } */
  
  /* .nav .nav-link:hover { */
    /* background-color: #555; 
  } */
  
  /* #sidebar-logo { */
    /* height: 9rem;
    width: 9rem;
  } */
  
  .palouse-games-text {
    font-size: 2.5rem; 
    color: #ffffff;   /* White color */
    font-weight: bold; /* Make the text bold */
    font-family: 'Arial', sans-serif; 
    margin-bottom: 3rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); 
  }
  
 /* Media query for screens smaller than or equal to 768px */
/* @media (max-width: 768px) {
  .nav {
      width: 200px; 
  }
} */

/* Media query for screens smaller than or equal to 360px */
/* @media (max-width: 360px) {
  .nav {
      width: 2rem !important; 
  } */

  /* .nav .nav-link {
      padding: 10px; 
      font-size: 1rem; 
  }

  #sidebar-logo {
      height: 4rem; /
      width: 4rem;
  }

  .palouse-games-text {
      font-size: 1.8rem; 
      margin-bottom: 2rem; 
  }
} */

#line {
  color: #ffffff;
  background-color: #94382b;
  size: 20px;
  z-index: 1;
}



/* 
.body {
 
    padding-left: 3.5rem;
} */







#social-h2 {
  font-size: 2rem; /* Larger font for the heading */
  text-align: center; /* Center the title */
  color: white; 
  margin-bottom: 4rem;
}


#instagramCarousel {
    max-width: 66.67vw; /* 2/3 of the viewport width */
    margin: 0 auto; /* Center the carousel */
}

#instagramCarousel .carousel-inner img {
    width: 100%; /* Ensure the image takes up the full width of its container */
    height: 15000px; /* Set a fixed height for all images */
    object-fit: cover; /* Maintain aspect ratio while covering the area */
    border-radius: 8px; /* Optional: Add rounded corners */
}

@media (min-width: 768px) {
    #instagramCarousel {
        width: 50vw; /* Make it 50% of the screen width on tablets and larger screens */
    }
    #instagramCarousel .carousel-inner img {
      height: 35rem; /* Adjust height on larger screens */
    }
    .nav {
        width: 100%; /* Make the navbar full width on mobile */
      }

}

@media(min-width: 1024px) {
    #instagramCarousel {
        width: 33.33vw; /* Make it 1/3 of the screen width on larger desktops */
    }
    #instagramCarousel .carousel-inner img {
      height: 50rem; /* Adjust height on larger screens */
    }
    .nav {
        width: 12rem; /* Slightly wider navbar on larger screens */
      }
}

/* For tablets (smaller than 1024px but larger than 768px) */
@media (max-width: 1024px) {
    .nav {
      width: 10rem; /* Adjust width for medium screens */
    }
  }





































/* contact -----------------------------------------------------------------------------------------------------------------**/

#contact-info-h2 {
  font-size: 2rem; 
  text-align: center; 
  color: white; 
  margin-top: 4rem;
}

.contact-info {
  max-width: 400px; /* Restrict the width to make it more compact */
  margin: 0 auto; /* Center the container */
  padding: 20px;
  background-color: #f9f9f9; /* Light background color for readability */
  border-radius: 8px; /* Slightly rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-family: Arial, sans-serif; 
  margin-bottom: 6rem;
  margin-top: 8rem;
}



.contact-info h3 {
  font-size: 1.2rem; /* Slightly larger font for easy reading */
  color: #555; /* Slightly lighter color for contrast */
  line-height: 1.6; /* Increased line spacing for better readability */
  margin-bottom: 8px; /* Space between each h3 element */
}

.contact-info h3:first-child {
  margin-top: 0; /* Remove top margin for the first h3 */
}

.contact-info h3:last-child {
  margin-bottom: 0; 
}