/* background image for the entire webpage, font style for the website */
body {
    background-image: url('img/background.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
	margin-bottom: 80px;
	font-family: 'Roboto', sans-serif;
}
h2, h3, p, footer {
    font-family: 'Roboto', sans-serif;
}
/* Style for the maximum width and height of images */
.max-img {
    max-width: 100%; 
    max-height: 500px;
}
/* the Navbar */
.navbar {
    background-color: #1e3c72 !important; 
}

.navbar-light .navbar-nav .nav-link {
    color: #fff; 
}

/* Navbar Hover Color */
.navbar-light .navbar-nav .nav-link:hover {
    color: #000033; 
    background-color: transparent; 
}

/* Customize Columns */
.col-md-4 {
    width: 30%;
	background-color: #283149; 
    color: #fff; 
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
}
.col-md-4 a.btn-primary {
    background-color: #0052cc; 
    color: #fff; 
}
.col-md-6 {
    width: 100%;
	background-color: #283149; 
    color: #fff; 
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
}

/* container customization */
.container.custom-container {
    background-color: rgba(0, 0, 0, 0.5); 
    color: #fff; 
    border-radius: 10px;
    padding: 20px;
    margin: 20px auto;	
}
.container {
	background-color: #1e3c72;
}

/* footer customization */
#footer {
     position: fixed;
      bottom: 0;
      width: 100%;
      background: rgba(30, 60, 114, 0.7);
      color: #fff;
      padding: 10px;
      text-align: center;
      backdrop-filter: blur(2px);
}
.text-white {
    color: #fff; 
}

/* button customization */
.btn {
  margin-bottom: 10px; 
}
.btn-hover:hover {
  background-color: #000033 !important;
  border-color: #000033; 
  color: #fff;
  transition: background-color 0.3s ease; 
}

/* quiz options customization */
.answer-label {
  display: inline-block;
  width: 50%; 
  margin: 5px 0; 
}
.options-container {
  display: grid;
  grid-template-columns: 1fr 1fr; 
}

/* carousel customization */
#carousel .carousel-indicators {
    list-style: none;
    bottom: 15px;
}
#carousel .carousel-indicators li {
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0 4px; 
}
#carousel .carousel-indicators .active {
    background-color: #fff;
}
#carousel .carousel-indicators li::before {
    display: none; 
}
#carousel .carousel-indicators li::after {
    content: ""; 
}
/* quiz options hovering customization */
#quizForm label:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* the hover effect for the GitHub logo */
.github-link:hover img {
    filter: brightness(5%);
}

/* Mobile-specific styles */
@media only screen and (max-width: 767px) {
    .container.custom-container {
        padding: 10px; 
        margin: 10px auto; 
    }

    .col-md-4,
    .col-md-6 {
        width: 100%; 
        margin: 0 0 20px; 
        padding: 10px; 
    }

    /* Additional spacing adjustments */
    .container .btn {
        margin-bottom: 10px; 
    }
	#carousel .carousel-item img {
    object-fit: cover;
    height: 200px; 
}
}