.newspaper {
    /* Create 3 columns */
    column-count: 3;
    column-gap: 10px; /* Space between columns */
    column-rule: 1px solid orange; /* Vertical line between columns */
    
    /* Optional: make it responsive */
    @media (max-width: 900px) {
      column-count: 2;
    }
    @media (max-width: 600px) {
      column-count: 1;
    }
  }

/* Style the main title heading */
h1 {
    color: #0056b3;
    text-align: center;
}

h2 {
    color: #0056b3;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
}

h3 {
    color: #0056b3;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
}

hr {
  border: none;               /* Clear the default styling */
  border-top: 3px solid #edc510; /* Thickness, style, and color */
  width: 95%;                 /* Control the width (optional) */ 
}

/* .................................Text Styles..................... */
.standText {
    margin: 10px;
    font-size: 18px;
    line-height: 1.6;
    background-color: lightyellow;
    color: darkgreen;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

.gray-text-box {
      width: 98%;
      padding: 5px;
      border-radius: 8px;
      border: 3px solid black; /* Gray border */
      background-color: #CBCBCB; /* Light gray background */
      margin: 2px auto;
      font-family: Verdana, sans-serif, sans-serif;
      font-size: smaller;
      font-style:italic;
      line-height: 1.6;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

 .frame {
  margin-left: 20px;
 }

/* .................................Block Styles..................... */
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Optional: prevent the image from overflowing its container */
  max-width: 100%; 
  height: auto;
  border: none;
}

.break-sentence {
  display: block;
  margin-top: 8px; /* Optional: gives it a tiny bit of breathing room */
}

/* .................................List Styles..................... */

ul.cont1 {
    font-size: 18px;
    line-height: 1.6;
    margin: 5px;
}

ul.cont2 {
    font-size: 18px;
    line-height: 1.6;
    margin: 20px;
}

ol.cont3 {
    font-size: 18px;
    line-height: 1.6;
    margin: 5px;
}
/* Apply border to table, header cells, and data cells */
table, th, td {
  border: 1px solid blue; /* 1px width, solid style, black color */
}

.card {
  background: #f6f0e8;
  border: 5px solid #4caf50; /* Green accent border */
  padding: 5px;
  border-radius: 12px;
  margin: 5px;
  box-shadow: 0 4px 8px rgba(0,100,0,0.5);
  transition: transform 0.3s ease;
}

        /* Hover Effect */
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

  /* Card Image */
.card-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Optional: prevent the image from overflowing its container */
  max-width: 100%; 
  height: auto;
  border: none;
  margin-bottom: 5px;
  border-radius: 15px; /* Adjust the value to change the roundness */
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Optional: prevent the image from overflowing its container */
  max-width: 100%; 
  height: auto;
  border: none;
}

        /* Card Content Box */
        .card-content {
            padding: 10px;
        }

        .card-title {
          color:#0056b3;
          font-size: 1.17rem;
          font-weight: 700;
          text-align: center;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        /* Card Description Text */
.card-text {
  margin: 0px 0 5px 0;
  color:darkgreen;
  font-size: 1.3rem;
  line-height: 1.5;
  background-color: lightgoldenrodyellow;
 
}
.card-text::before {
  content: "🌿 ";            /* The emoji prefix */
  font-size: 20px;          /* Makes the emoji larger than the text */
  margin-right: 8px;        /* Pushes the text away from the emoji */
  vertical-align: middle;   /* Aligns the emoji vertically with the text */
        }

.card-link {
   margin: 0 0 20px 0;
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}

.card-list-text {
  margin: 0 0 5px 0;
  color:darkgreen;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.5;
  background-color: lightgoldenrodyellow;
}

.card-list-text::before {
  content: "✓ "; /* Put your emoji here with an optional trailing space */
  font-size: 20px;          /* Makes the emoji larger than the text */
  margin-right: 8px;        /* Pushes the text away from the emoji */
  vertical-align: middle;   /* Aligns the emoji vertically with the text */
}



        /* Card Button */
        .card-btn {
            display: inline-block;
            background-color: #3182ce;
            color: #ffffff;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.9rem;
            transition: background-color 0.2s ease;
        }

        .card-btn:hover {
            background-color: #2b6cb0;
        }

        /* Container rules */
.card-video-container {
  max-width: 800px;        /* Limits the maximum size on large desktop screens */
  width: 100%;             /* Allows it to shrink flexibly on small screens */
  margin: 0 auto;          /* Centers the video container horizontally */
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;

}

.card-video-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Matches standard widescreen video */
}

/* ................ 2. Header & Footer Layout........................ */
.newsletter-header, .newsletter-footer {
    text-align: center;
    /* max-width: 1200px; */
    margin: 0 auto 30px auto;
    padding: 20px;
    background-color:antiquewhite;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.newsletter-footer {
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #666;
}

.newsletter-footer a {
    color: #ff4757;
}

/* .................................Navigation Styles..................... */
    /* Main Navigation Bar */
    .navbar {
      list-style: none;
      padding: 0;
      margin: 0;
      background-color: #333;
      display: flex;
    }

    /* All list items */
    .navbar li {
      position: relative; /* Anchor point for absolute dropdowns */
    }

    /* All links */
    .navbar a {
      color: #fff;
      display: block;
      padding: 15px 25px;
      text-decoration: none;
      white-space: nowrap;
    }

    /* Hover effect on links */
    .navbar a:hover {
      background-color: #228B22;
    }

    /* --- DROPDOWN MENUS --- */
    
    /* Hide all submenus by default */
    .navbar ul {
      display: none;
      position: absolute;
      list-style: none;
      padding: 0;
      margin: 0;
      background-color: #555;
      min-width: 180px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    }

    /* First-level dropdown positioning (drops down) */
    .navbar li:hover > ul {
      display: block;
      top: 100%;
      left: 0;
    }

    /* --- NESTED SUBMENUS (Second level and deeper) --- */
    
    /* Second-level dropdown positioning (flies out to the right) */
    .navbar ul li:hover > ul {
      display: block;
      top: 0;
      left: 100%;
    }

    /* Subtle background variance for nested items */
    .navbar ul a {
      padding: 12px 20px;
      font-size: 14px;
    }

    .navbar ul ul background-color {
      background-color: #555;
    }

  #backToTopBtn {
    display: none;            /* Hidden by default */
    position: fixed;          /* Fixed/sticky position */
    bottom: 20px;             /* 20px from the bottom */
    right: 30px;              /* 30px from the right */
    z-index: 99;              /* Sit on top of other elements */
    border: none;             /* Remove borders */
    outline: none;            /* Remove outline */
    background-color: #333;   /* Button color */
    color: white;             /* Arrow color */
    cursor: pointer;          /* Pointer/hand icon on hover */
    padding: 15px;            /* Internal spacing */
    border-radius: 50%;       /* Make it a circle */
    font-size: 18px;          /* Size of the arrow */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, transform 0.2s;
}

#backToTopBtn:hover {
    background-color: #555;   /* Lighter grey on hover */
    transform: scale(1.1);    /* Slight pop effect */
}