body {
    background-color: #f8f9fa;
    height: 100%;
    margin: 0;

}

nav {
    margin-bottom: 20px;
}

.navbar-nav .nav-link:hover {
    background-color: #9BC13B;
    color: #fbfcff;
}

.navbar-light .navbar-toggler {
    color: #2A3814;
    border-color: #2A3814;
  }

.navbar-light .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba(42, 56, 20, 1)" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
  }

.container {
    padding-bottom: 50px;
}

.image-container {
    max-width: 300px;
    margin: 0 auto;
}

.card-img-top {
    width: 100%;
    height: 200px; /* Fixed height */
    object-fit: cover; /* Ensures the image covers the container without distortion */
}

.card-body {
    background-color: #FBFCFF;
}

.options-container button {
    width: 100%;
    margin-bottom: 10px;
}

/* Remove borders from all buttons and set border-radius to 0 */
button {
    border: none;
    border-radius: 0;
}

button:hover {
    border: none;
    border-radius: 0;
}

/* .custom-button {
    transition: background-color 0.3s, color 0.3s;
} */

/* 
.play:hover {
    background-color: #9BC13B !important; 
    color: #212121 !important;
}

.about:hover {
    background-color: #2A3814 !important;
    color: #FBFCFF !important;
}

.learn:hover {
    background-color: #2A3814 !important;
    color: #FBFCFF !important;
} */

/* Hover effect for play again button */
/* .play-button-hover {
    background-color: #9BC13B !important;
    color: #212121 !important;
} */

/* Hover effect for learn more button */
/* .learn-more-button-hover {
    background-color: #2A3814 !important;
    color: #FBFCFF !important;
} */

/* Hover effect for share results button */
/* .share-results-button-hover {
    background-color: #2A3814 !important;
    color: #FBFCFF !important;
} */



.results-list {
    display: flex;
    flex-wrap: wrap;  /* Allows wrapping of items */
    justify-content: left;
    align-content: start;
    gap: 10px;  /* Space between items */
    padding: 10px;
}

.results-list div {
    display: flex;
    flex-wrap: wrap;  /* Allows wrapping of emojis within the div */
    align-items: left;
    padding: 5px;
}

/* Remove borders from custom buttons and set border-radius to 0 */
.btn {
    border: none;
    border-radius: 0;
}

.btn:hover {
    border: solid 1px #9BC13B;
    border-radius: 0;
}

.tech-tools-list {
    list-style-type: kannada;
}

.methods-list {
    list-style-type: kannada;
}

.flag-facts-list {
    list-style-type: kannada;
}

footer {
    margin-top: 50px;
}

.footer-container {
    padding: 10px 0;
}