/* style the mega text on the home page */
.main-section-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    font-size:55px;
    font-weight: bolder;
    color: yellow;
}
/* style the image container */
.image-container {
    max-width: 100%;
    height: auto;
}
/* style the regular text on the other web pages */
main {
    color: lightgray;
}
u.bullet-item {
    color: white;
}
h6 > u {
    color: yellow;
}
/* Style the <hr> element */
hr.thick {
    border: none; /* Remove the default border */
    height: 4px;  /* Set the desired thickness */
    background-color: white; /* Set the line color */
}
hr.thin {
    border: none; /* Remove the default border */
    height: 2px;  /* Set the desired thickness */
    background-color: white; /* Set the line color */
}
/* Styling of the CSS grid */
.grid-container-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px; /* You can adjust the gap between grid items if desired */
}
.grid-container-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px; /* You can adjust the gap between grid items if desired */
}
.grid-item {
    min-width: 150px;
    min-height: 150px;
    background-color: rgba(241,242,241,1);
    border: 1px solid gray;
    padding: 5px;
}
.grid-item-lg {
    min-width: 100%;
    min-height: 400px;
    padding: 5px;
}
.grid-item-lg h6 {
    display: block;
    color: yellow;
}
.grid-item-lg img {
    border: 2px solid black;
    margin-bottom: 10px;
}
.grid-item-sm {
    min-width: 120px;
    height: 90px;
    background-color: lightcyan;
    border: 1px solid gray;
    padding: 5px;
}
.grid-heading {
    font-weight: bold;
    color: gray;
    line-height: 100%;
}
.grid-heading-sm {
    font-size: large;
    font-weight: bold;
    color: gray;
    line-height: 100%;
}
.grid-text{
    font-weight: normal;
    line-height: 100%;
}
div.grid-item a {
    text-decoration: none;
    color: #0f5132;
}
div.grid-item-sm a {
    text-decoration: none;
}
/* Styling for smaller screens */
@media (max-width: 768px) {
    .grid-container-2{
          grid-template-columns: 1fr; /* Single column for screens up to 768px wide */
          grid-template-rows:1fr;
          gap: 10px;
    }
    .grid-item-lg {
        max-height: 200px;
    }
    .grid-item-lg img {
        border: 2px solid black;
        margin-bottom: 10px;
    }
}
.grid-container-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns in the grid */
  gap: 10px; /* Gap between grid items */

  /* Media query for screens smaller than or equal to 768px */
  @media (max-width: 768px) {
    grid-template-columns: 1fr; /* Single column for screens up to 768px wide */
  }
}

/* other styles */
a.special-link {
    color: #0dcaf0;
    margin-bottom: 5px;
}
img.flag-img {
    width: 128px;
    height: 64px;
    border: 1px solid black;
    margin-bottom: 5px;
}

/* adjustment for anchor offset problem  */
:target::before {
    content: "";
    display: block;
    height: 80px; /* Adjust this value to match the height of your sticky header */
    margin: -80px 0 0; /* Adjust this value to be negative of the header height */
}

/* form text area */
#contact_message{
    margin-bottom: 5px;
}

.undecorated {
    text-decoration: none;
    color: yellow;
}