* {
    box-sizing: border-box;
}
html {
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
	padding:0;
	margin:0;
}

body {
    background: white;
	background-repeat: no-repeat;
	min-height: 100vh;
	background: linear-gradient(180deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(255, 255, 255, 1) 100%);
	padding:0;
	margin:0;
}
header.header{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: black;
  border-bottom: solid;
  padding: 0.5rem 1rem;
  border-bottom:1px solid #676767;
}
header.header > img{
  max-height: 127px; /* Set the height of your image  */
  width: auto;
}
nav{
  display: flex;
  flex-direction: row;
  flex: 1; /* Use the rest of the available space of the <header> */
  justify-content: center; /* Keep the links in the center of this element  */
  align-items: center; /* Puts the links vertically in the center of the <nav> */
}
nav a{
  padding: 1rem;
  text-decoration: none; /* Take away the default link styling  */
  color: white;
  border-bottom: 2px solid transparent;
}
nav a:hover{
  border-bottom: 2px solid white;
  transition: border-bottom 0.4s ease-in;
}	
.mobile {
	display:none;
}

.intro {
	color:white;
	font-size:1.4rem;
	border-top:1px solid black;
    padding: 1rem;
	background-color:rgba(0, 0, 0, 0.5);
	border-bottom:1px solid black;
	line-height:1.4em
}
.intro a {
	color:white;
}
.intro a:hover {
	text-decoration:none;
}
.card-container {
    display: grid;
    padding: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 1rem;
	transition: all 0.5s ease-in-out;
}

.card {
	display: grid;
    box-shadow: 0px 0px 4px #555;
    background-color: white;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    opacity: 1;
	transform: scale(1);
	visibility: visible;
}
.card.hidden {
    opacity: 0;
    transform: scale(0.95);
    visibility: hidden;
    /* This prevents the card from taking up space after the fade */
    position: relative; 
    pointer-events: none;
}
.featured {
	border:1px solid #6b6b6b;
	background-color:#fffad0;
}
.card__title h1 {
    font-size: 1.5rem;
    padding: .5rem;
	margin:0;
}
.card__date {
	font-size: 0.7rem;
    padding: 0;	
	margin:0;
	color:#353535;
}
.card__description {
    padding: 0 .5rem .5rem .5rem;
    line-height: 1.6em;
}
.card__thumbnail {
	margin:0;
}
.card__gap {
	top:0;
	overflow:hidden;
	height:12px;
	position:relative;
}
.card__gap img{
	filter:blur(30px) saturate(3);
	margin:0;padding:0;
}
.tag {
  background-color: #ccc;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  margin: 0;
  padding: 2px 10px;
  text-transform: uppercase;
  text-decoration:none;
}
.tag:hover {
  text-decoration:underline;
}
.tag-turquoise {
  background-color: #008080;
}
.tag-blue {
  background-color: #002147;
}
.tag-black {
  background-color: #1A1D1A;
}
.tag-green {
  background-color: #125935;
}
.tag-red {
  background-color: #9d2219;
}
.tag-yellow {
  background-color: #4d4902;
}
.tag-orange {
  background-color: #b85411;
}
	

img {
    max-width: 100%;
}
.card__btn__p {
	display: flex;
  	justify-content: flex-end;
}
.card__btn {
	display: blaock;
	background-color: #003366;
	color: #fff;
	border-radius: 3px;
	font-size: 1.2rem;
	margin: 0;
	padding: 5px 10px 5px 10px;
	max-width:150px;
	text-align:center;
	text-decoration:none;
	transition: background-color 0.5s ease-out;
	
}
.card__btn:hover {
	background-color: #19528c;
}

.card__source {
	font-size:0.7rem;
	display: flex;
  justify-content: flex-end;
	margin:0;
}
.card__source a{
	color:#2A7B9B;
	text-decoration:none;
}
.card__source a:hover{
	color:#2A7B9B;
	text-decoration:underline;
}
.card__tags {
	margin:0;
}
.card__source a::after {
  content: '';
  position: relative;
  left: 0.1em;
  height: 6px;
  width: 6px;
  margin-right: 0.1em;
  background: url('http://cdn.onlinewebfonts.com/svg/img_423119.png');
  background-size: auto;
  background-size: 6px 6px;
  vertical-align: 5px;
  opacity: 0.8;
  display: inline-block;
}
	

@media only screen and (max-width: 1500px) {
	nav,header.header,header.header > img{
		display:block!important;
		clear:both
	}
	nav{
	  padding:1rem 0.5rem 0.5rem 0.5rem;
	}
	nav a{
	  padding: 0.5rem;
	  text-decoration: none; /* Take away the default link styling  */
	  color: white;
	  border-bottom: 2px solid transparent;
	}
}
@media (min-width: 600px) {
    .card-container {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
	.mobile {
		display:block;
	}
	.desktop {
		display:none;
	}
}
.footer {
	text-align:center;
	color:white;
	background-color:#1A1D1A;
	border-top:1px solid white;
	font-size:0.8rem;padding:5px;
	
}
.footer a {
	color:white;
}
.footer a:hover {
	text-decoration:none;
}
.countries {
	text-align:center;
	border-bottom:1px solid black;
	padding:1rem;
}
.countries a {
	color:black;
}
.countries a:hover {
	color:#3e3e3e;
}
.btn-contact {
	    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: #444;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    font-size: 14px;
    min-width: 40px;
    text-align: center;
}
.btn-contact:hover {
	background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
select {
	width:150px;
	padding:5px;
	font-size:1rem;
}
select option {
	font-size:1rem;
}

/* Pagination Container */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	
    justify-content: center;
	clear:both;
}

.pagination-section {
	margin:0 auto;
	
	padding:1rem;
}
.pagination a, 
.pagination span {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: #444;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    font-size: 14px;
    min-width: 40px;
    text-align: center;
}

/* Hover state for links */
.pagination a:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Active Page State */
.pagination a.active {
    background-color: #007bff;
    color: #ffffff;
    border-color: #007bff;
    font-weight: 600;
    pointer-events: none; /* Prevents clicking the current page */
}

/* The Ellipsis (...) */
.pagination span {
    border-color: transparent;
    background: transparent;
    color: #999;
    padding: 10px 4px;
    min-width: 20px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .pagination {
        gap: 4px;
    }
    .pagination a {
        padding: 8px 12px;
        font-size: 13px;
    }
}