/* Tiny portrait phones (like iPhone SE, 320px) */


/* =======================
   Font Scaling by Screen Width
   ======================= */

html {
  font-size: 13px; /* Very small screens */
}

@media (min-width: 400px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 576px) {
  html {
    font-size: 15px;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 992px) {
  html {
    font-size: 17px;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 19px;
  }
}

@media (min-width: 2100px) {
  html {
    font-size: 19px;
  }
}

/* =======================
   General Layout and Typography
   ======================= 
 */

* {
  box-sizing: border-box;
}
 
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  font-family: 'Roboto', 'Sans-Serif';
  color: #3a3a3a;
  color: white;
  font-size: 1rem;  /* Tied to html font-size */
  line-height: 1.6;
  color: #222;
  margin: 0;
  padding: 0;
  line-height: 150%;
  letter-spacing: +0.005em;
}

.body-lg {
  line-height: 150%;
  letter-spacing: +0.005em;
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Jost', 'Sans-Serif';
  color: black;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

h1 {
  font-size: 2.5rem;  /* ~32px to 47px depending on screen */
  font-weight: 700;
  color: #D4AF37; /* Metallic Gold */
  line-height: 110%;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #B8860B; /* Dark Goldenrod */
  line-height: 110%;
  letter-spacing: -0.02em;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

h3 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #B08D57; /* Bronze Gold */
  line-height: 130%;
  letter-spacing: -0.015em;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #B08D57; /* Bronze Gold */
  line-height: 130%;
  letter-spacing: -0.015em;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

h5 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #B08D57; /* Bronze Gold */
  line-height: 150%;
  letter-spacing: -0.005em;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

h6 {
  font-size: 1rem;
  font-weight: 500;
  color: #B08D57; /* Bronze Gold */
  line-height: 150%;
  letter-spacing: 0em;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
  margin-bottom: 0.5em;
  line-height: 150%;
}

caption{
  line-height: 160%;
  letter-spacing: +0.005em;
}

li{
  font-size: 1rem;  /* Tied to html font-size */
  line-height: 1.6;
  color: #222;
}

/* =======================
   Utility Spacing
   ======================= */

/* Use these classes for spacing between sections */
.section {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.section-small {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Margin Top */
.mt-1rem { margin-top: 1rem; }
.mt-2rem { margin-top: 2rem; }
.mt-3rem { margin-top: 3rem; }
.mt-4rem { margin-top: 4rem; }
.mt-5rem { margin-top: 5rem; }

/* Margin Bottom */
.mb-1rem { margin-bottom: 1rem; }
.mb-2rem { margin-bottom: 2rem; }
.mb-3rem { margin-bottom: 3rem; }
.mb-4rem { margin-bottom: 4rem; }
.mb-5rem { margin-bottom: 5rem; }

/* Margin Left */
.ml-1rem { margin-left: 1rem; }
.ml-2rem { margin-left: 2rem; }
.ml-3rem { margin-left: 3rem; }

/* Margin Right */
.mr-1rem { margin-right: 1rem; }
.mr-2rem { margin-right: 2rem; }
.mr-3rem { margin-right: 3rem; }

/* Padding Top */
.pt-1rem { padding-top: 1rem; }
.pt-2rem { padding-top: 2rem; }
.pt-3rem { padding-top: 3rem; }

/* Padding Bottom */
.pb-1rem { padding-bottom: 1rem; }
.pb-2rem { padding-bottom: 2rem; }
.pb-3rem { padding-bottom: 3rem; }

/* Padding Horizontal (Left + Right) */
.px-1rem { padding-left: 1rem; padding-right: 1rem; }
.px-2rem { padding-left: 2rem; padding-right: 2rem; }

/* Padding Vertical (Top + Bottom) */
.py-1rem { padding-top: 1rem; padding-bottom: 1rem; }
.py-2rem { padding-top: 2rem; padding-bottom: 2rem; }

/*
How to use these classes in HTML

<div class="mt-3rem mb-2rem px-1rem">
  <h2 class="mb-1rem">Section Title</h2>
  <p>Content here</p>
</div>

*/


/* This first rule styles the link in ALL its states.
   It's a great place to set properties that don't change,
   like removing the underline and adding a transition. */
a {
  color: #827020;
  text-decoration: none; /* This removes the underline */
  font-weight: 500; /* Make links bold to stand out */
  line-height: 150%;
  letter-spacing: +0.5%;
  transition: all 0.2s ease-in-out; /* For a smooth hover effect */
}

/* You don't need to specify a:link if your base 'a' style is what you want.
   We'll style :visited to show the user where they've been. */

/* Styles for a link that has been visited */
a:visited {
  color: #B8860B;
}

/* Styles for when the user hovers their mouse over the link */
a:hover {
  /*color: #0056b3; /* A darker blue on hover */
  
  /* background-color: #D4AF37; */
  background-color: #d4af37;
  font-weight: 900;
  text-decoration: none; /* The underline REAPPEARS on hover for clarity */
}

/* Styles for the exact moment the link is being clicked */
a:active {
  color: #b08d57;

}

a.button-link {
  background-color: #827020;
  color: white; /* White text */
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

a.button-link:hover {
  background-color: #D4AF37;
}


#btn-back-to-top {
  position: fixed !important;
  bottom: 20px !important;
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  right: 20px;
  display: none; /* Hidden by default */
  border-radius: 25%;
  width: 40px;
  height: 40px;
  font-size: 1rem;
  font-weight: 900;
  z-index: 1099;
  background-image: url('/images/book-ad-bg.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
/*  background-color: rgb(83, 81, 81); /* Your custom color */
  /*border-color: rgb(195, 6, 6);     /* Set the border to the same color */
  border: none;
  /* 2. Add the blurred shadow */
  /* format: horizontal-offset | vertical-offset | blur-radius | spread-radius | color */
/*  box-shadow: 0 0 5px rgba(60, 60, 60, 0.7); */

  /* Add this line for a smooth animation */
  transition: all 0.2s ease-in-out;
}

#btn-back-to-top:hover {
  transform: scale(1.1) translateY(-5px);
  color: green;
}

table {
	border: none;
}

td, th {
  border: none;
}

tr:nth-child(even) {
  background-color: #F1F2F9;
}
/*
.logo {
  margin-top: 5px;
  margin-left:10px;
  width: 20%;
  height: 20%;
}
*/
.div-spacer {
  height: 5rem;
}

.responsive-heading {
  font-size: clamp(16px, 5vw, 48px); /* Responsive font size */
  white-space: nowrap;              /* Prevent wrapping */
  overflow: hidden;                 /* Optional: prevent overflow */
  text-overflow: ellipsis;         /* Optional: show "..." if it still overflows */
}

.single-line-heading {
  white-space: nowrap; /* Prevents the text from wrapping to the next line */
  overflow: hidden;    /* Hides any content that overflows the element's box */
  text-overflow: ellipsis; /* Adds an ellipsis (...) if text overflows */

  /* Fluid font size for responsiveness */
  /* This ensures the font size scales with the viewport width (vw) */
  /* The clamp() function sets a minimum, preferred, and maximum font size: */
  /* min(1.5rem, 5vw, 3rem) means: */
  /* - minimum size: 1.5rem (e.g., on very small screens) */
  /* - preferred size: 5vw (scales with viewport width) */
  /* - maximum size: 3rem (e.g., on very large screens) */
  font-size: clamp(1.5rem, 5vw, 3rem);

  /* Optional: For better centering or specific alignment */
  text-align: center;
  width: 100%; /* Ensure the heading takes full width for overflow to work */
  display: block; /* Ensure it behaves as a block element */
}

p.long::first-line{
  text-transform: uppercase;
  font-weight: 500;
}

/*--------------------------------------------------------*/
/* National Parks map styles */

#parks-map {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
}

.map {
  width: 100%;
  height: max(400px, 50vh);
  margin-left: auto;
  margin-right: auto;
}

p.popup {
  font-size: 0.8rem;
}

h3.popup {
  font-size: 0.8rem;
}

/*--------------------------------------------------------*/
/* Why It Matters styles */
#why-it-matters{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

#why-it-matters h2 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  /*color: #dd183b;*/
  text-transform: uppercase;
}

#why-it-matters p {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  /* text-align: center; */
  margin: 1rem auto;
}

/*--------------------------------------------------------*/
/* Image of the Week styles */
#image-of-the-week {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

#image-of-the-week img.not-float {
  margin: 0 auto;
  width: 90%;
  /* width: 100%; */
}

#image-of-the-week h2 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  /*color: #dd183b;*/
  text-transform: uppercase;
  text-align: center;
}

#image-of-the-week .desc {
  /* display: flex;
  flex-direction: column;
  justify-content: top; 
  align-items: center; */
  text-align: center;
  justify-items: top;
  align-items: top;
  margin: 0 auto;  
  padding: 0;
}

#image-of-the-week h3 {
  font-family: 'Jost', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
/*  color: #dd183b;*/
  text-transform: uppercase;
  /* text-align: center; */
}

#image-of-the-week p {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  width: 85%;
  margin: 0 auto 1rem;
  text-align: center;
  /* margin-left: 0 !important;
  padding-left: 0 !important; */
}

#image-of-the-week img.float-right {
  float: right;
  width: 55%;
  height: auto;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

/*--------------------------------------------------------*/
/* Did You Know styles */

#did-you-know {
  /* background-color: #f1f2f9;  */
  /* padding: 2rem;  */
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  width: 100%;
}

#didyouknow-news-bg {
  z-index: -99;
  padding-top: 80px;

}

#didyouknow-news {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
  align-items: center;
  padding-top: 80px;
  z-index: -90;
}

#didyouknow{
  /* margin-left: 1em;
  margin-right: 1em; */
  margin: auto;
}

#news{
  margin: 3em 0;
  padding-right: 2em;
  padding-left: 2em;
  text-align: center;
}

#news-brief {
  text-align: left;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

#news-brief h2 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  /*color: #dd183b;*/
  text-align: center;
  text-transform: uppercase;
}

#news-brief p {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  margin: 1rem auto;
}

/*--------------------------------------------------------*/
/* embedded YouTube video styles */

.video-wrapper {
  width: 100%;
  position: relative;
  overflow: visible;
}

/* YouTube container for 16:9 aspect ratio */
.youtube-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  display: none; /* Hidden by default, shown via media query */
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile background video */
.mobile-bg-video {
  width: 100%;
  display: block;
}

.mobile-bg-video video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/*--------------------------------------------------------*/
/* Closing Thoughts styles 
 * image-carousel styles in image-carousel.css 
 */

#closing {
  min-height: min(200px, 70vh);
  /* padding-top: 100px; */
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: #f1f2f9;  */
  /* padding: 2rem;  */
  background-image:  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/carousel/Vancouver_False_Creek_at_sunset_warm_golden_hues__41a3b123-2e46-4a02-a44f-c2ebbcbdf987.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#closing-thoughts {
  /* background-color: #f1f2f9;  */
  /* padding: 2rem;  */
  /* padding: 3rem 0 2rem 0; */
  margin: 0;
  width: 100%;
}

#closing-thoughts h4 {
  padding-top: 0;
  margin-top: 0;
  font-weight: 600;
  font-family: "Cal Sans", sans-serif;
  font-family: "Jost", sans-serif;
  line-height: 1.25rem;
  letter-spacing: 0.1rem;
  font-size: 0.8rem;
}

#closing-thoughts > h4 > i {
  line-height: 5rem;
  font-size: 2rem;
}


/* #thought {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
} */

.shimmer-text {
  font-size: 1rem;
  font-weight: 900;
  font-family: 'Montserrat', serif;
  font-family: "Cal Sans", sans-serif;
  letter-spacing: 0.15rem;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
  color: transparent;
  background: url('../images/Copilot_20250901_093212.png') top/cover no-repeat;
  -webkit-mask-image: linear-gradient(gold, goldenrod); /* fallback for Safari */
  -webkit-mask-clip: text;
  -webkit-text-fill-color: transparent;
  mask-image: linear-gradient(gold, goldenrod);
  mask-clip: text;
}

/*--------------------------------------------------------*/
/* footer styles */
footer {
  /* position: fixed;
  bottom: 0; */
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-items: flex-end;
  align-items: center;
  text-align: center;
  padding-bottom: 5px;
  margin: 0;
  padding-top: 15px;
}

.footer-custom-bg {

  /* Add these lines for the SVG background */
  background-image: url('../images/hero/hero.webp');
  background-size: cover; /* Or 'contain', '100%', etc. */
  background-position: center;
/*  -webkit-filter: blur(2px); /* For older browser compatibility */
/*  filter: blur(2px); /* Adjust the pixel value for desired blur intensity */
 
  background-repeat: no-repeat;
  /* ...other navbar styles... */
  background-position: center center; 
  background-color: transparent;

  /* This positions the image in the horizontal center, 
      and 50px down from the top edge of the navbar. */
/*  background-position: center -110px; */

/*    background-position: center 50px; */
    /* You can mix keywords and pixel values. For example, 
     * left 20px top 50px would position the image 20px from 
     * the left and 50px from the top. It gives you very 
     * precise control over the background's placement. 
     */
}

footer .logo {
  width: 50px;
  height: auto;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 15px;
}

footer p {
  font-size: 0.6rem;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0;
}


/*--------------------------------------------------------*/

/* --- XS Custom Breakpoints: <576px --- */

/* Small portrait phones (360px - 479px) */
@media (min-width: 360px) {
  /* Styles for small portrait phones */
  .page-wrapper {
    padding-left: 5px;
    padding-right: 5px;
  }

  #closing {
    min-height: min(200px, 70vh);
    /* padding-top: 100px; */
    margin-top: 50px;
  }

  #closing-thoughts h4 {
    line-height: 1.25rem;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
  }

  #closing-thoughts > h4 > i {
    line-height: 5rem;
    font-size: 2rem;
  }

  footer .logo {
    width: 55px;
  }

  footer p {
    font-size: 0.6rem;
  }

}

/* Upper-range phones in portrait (480px - 575.98px) */
@media (min-width: 480px) {
  /* Styles for larger portrait phones */

  .page-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  #why-it-matters {
    width: 90%;
  }

  #did-you-know {
    width: 100%;
  }

  #didyouknow-news{
    padding: 0 2em;
  }

  #news {
    text-align: left;
  }

  /* #why-it-matters p {
    text-align: left;
  } */

  #parks-map {
    width: 90%;
  }

  #image-of-the-week {
    width: 100%;
  }

  #image-of-the-week h2 {
    font-size: 2rem;
  }

  #image-of-the-week h3 {
    font-size: 1.5rem;
  }

  #closing {
    min-height: min(200px, 70vh);
    /* padding-top: 100px; */
    margin-top: 50px;
  }

  #closing-thoughts h4 {
    line-height: 1.25rem;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
  }

  #closing-thoughts > h4 > i {
    line-height: 5rem;
    font-size: 2rem;
  }

  footer .logo {
    width: 55px;
  }

  footer p {
    font-size: 0.6rem;
  }

}

/* --- SM: 576px to 767.98px --- */
@media (min-width: 576px) {
  /* SM portrait styles */

  .page-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }

  #why-it-matters {
    width: 80%;
  }

  #why-it-matters h2 {
    margin-bottom: 1rem;
  }

  #parks-map {
    width: 80%;
  }

  #image-of-the-week {
    width: 100%;
  }

  #image-of-the-week h2 {
    font-size: 2rem;
  }

  #image-of-the-week h3 {
    font-size: 1.5rem;
  }

  #closing {
    min-height: min(250px, 70vh);
    /* padding-top: 100px; */
    margin-top: 50px;
  }

  #closing-thoughts h4 {
    line-height: 1.35rem;
    letter-spacing: 0.1rem;
    font-size: 0.9rem;
  }

  #closing-thoughts > h4 > i {
    line-height: 5rem;
    font-size: 2rem;
  }

  footer .logo {
    width: 55px;
  }

  footer p {
    font-size: 0.6rem;
  }

}

/* --- MD: 768px to 991.98px --- */
@media (min-width: 768px) {
    
  .page-wrapper {
    /* Limit the content width for better readability on wide screens */
    max-width: 90%;
    padding-left: auto; /* Center the wrapper */
    padding-right: auto;
  }

  p.popup {
    font-size: 1rem; /* normal size */
  }

  h3.popup {
    font-size: 1.75rem; /* normal size */
  }

  #why-it-matters {
    width: 80%;
  }

  #why-it-matters h2 {
    margin-bottom: 1rem;
  }

  #parks-map {
    width: 80%;
  }

  #image-of-the-week {
    width: 80%;
  }

  #image-of-the-week h2 {
    font-size: 2rem;
  }
  
  /* Show YouTube only on medium+ screens */
  .youtube-container {
    display: block;
  }
  .mobile-bg-video {
    display: none;
  }

  #did-you-know {
    /* width: 90%; */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  #didyouknow-news{
    grid-template-columns: 35% 65%;
    column-gap: 80px;
  }

  #didyouknow {
    margin-top: 60px;
    /* margin-left: 20px; */
    margin-right: 60px;
  }

  #news {
    margin-top: 0;
    /* margin-left: 70px; */
    margin-right: 80px;
  }
  
  #news-brief {
    width: 50%;
  }

  #news-brief h3{
    text-align: left !important;
  }

  #closing {
    min-height: min(300px, 70vh);
    /* padding-top: 100px; */
    margin-top: 50px;
  }

  #closing-thoughts h4 {
    line-height: 1.55rem;
    letter-spacing: 0.15rem;
    font-size: 1.2rem;
  }

  #closing-thoughts > h4 > i {
    line-height: 5rem;
    font-size: 2rem;
  }

  .shimmer-text {
    font-size: 1.5rem;
  }

  footer .logo {
    width: 70px;
  }

  footer p {
    font-size: 0.7rem;
  }

}

/* --- LG: 992px to 1199.98px --- */
@media (min-width: 992px) {
  /* LG portrait styles */
}

/* --- Styles for Tablets (Landscape) & Desktops --- */
@media (min-width: 1024px) {

  .page-wrapper {
    /* Limit the content width for better readability on wide screens */
    max-width: 1200px;
    margin-left: auto; /* Center the wrapper */
    margin-right: auto;
  }

  #didyouknow-news{
    width: 90%;
    margin-left: 0%;
    column-gap: 60px;
  }

  #didyouknow {
    /* margin-top: 60px; */
    /* margin-left: 20px; */
    margin-right: 0;
  }

  #news {
    margin-top: 0;
    /* margin-left: 70px; */
    margin-right: 60px;
  }
  
  #closing {
    min-height: min(400px, 70vh);
    /* padding-top: 100px; */
    margin-top: 50px;
  }

  #closing-thoughts h4 {
    line-height: 2rem;
    letter-spacing: 0.15rem;
    font-size: 1.5rem;
  }

  #closing-thoughts > h4 > i {
    line-height: 5rem;
    font-size: 2.8rem;
  }

  .shimmer-text {
    font-size: 1.5rem;
  }

  footer .logo {
    width: 70px;
  }

  footer p {
    font-size: 0.7rem;
  }

}

/* --- XL: 1200px to 1399.98px --- */
@media (min-width: 1200px) {
  /* XL portrait styles */

  #why-it-matters {
    width: 70%;
  }

  #why-it-matters h2 {
    margin-bottom: 1rem;
  }

  #didyouknow-news{
    grid-template-columns: 40% 60%;
    column-gap: 60px;
  }

  #didyouknow {
    margin-top: 60px;
    /* margin-left: 20px; */
  }

  #news {
    margin-top: 0;
    /* margin-left: 70px; */
    /* margin-right: 80px; */
  }
  
  #parks-map {
    width: 70%;
  }

  #image-of-the-week {
    width: 80%;
  }

  #image-of-the-week .desc {
    margin-left: 0;
  }

  #image-of-the-week h2 {
    font-size: 2rem;
  }

  #image-of-the-week h3 {
    font-size: 1.5rem;
  }

  #image-of-the-week p {
    margin: 0 0;
    padding: 0 0;
  }

  #closing {
    min-height: min(450px, 70vh);
    /* padding-top: 100px; */
    margin-top: 100px;
  }

  #closing-thoughts h4 {
    line-height: 2rem;
    letter-spacing: 0.15rem;
    font-size: 1.5rem;
  }

  #closing-thoughts > h4 > i {
    line-height: 5rem;
    font-size: 3rem;
  }

  .shimmer-text {
    font-size: 1.5rem;
  }

  footer .logo {
    width: 70px;
  }

  footer p {
    font-size: 0.7rem;
  }

}

/* --- XXL: 1400px and up --- */
@media (min-width: 1400px) {
  /* XXL portrait styles */

  #didyouknow-news {
    column-gap: 50px;
  }
  
  /* #didyouknow{
    margin-top: 0;
  } */

  #closing {
    min-height: min(440px, 70vh);
    /* padding-top: 100px; */
    margin-top: 100px;
  }

  #closing-thoughts h4 {
    line-height: 2.2rem;
    letter-spacing: 0.16rem;
    font-size: 1.7rem;
  }

  #closing-thoughts > h4 > i {
    line-height: 5rem;
    font-size: 3rem;
  }

  .shimmer-text {
    font-size: 1.5rem;
  }

  footer .logo {
    width: 80px;
  }

  footer p {
    font-size: 0.8rem;
  }

}

@media (min-width: 2100px) {
  /* XXL portrait styles */

  #closing {
    min-height: min(440px, 70vh);
    /* padding-top: 100px; */
    margin-top: 100px;
  }

  #closing-thoughts h4 {
    line-height: 2.2rem;
    letter-spacing: 0.16rem;
    font-size: 1.7rem;
  }

  #closing-thoughts > h4 > i {
    line-height: 5rem;
    font-size: 3rem;
  }

  .shimmer-text {
    font-size: 1.5rem;
  }

  footer .logo {
    width: 80px;
  }

  footer p {
    font-size: 0.8rem;
  }

}

/* --- FOR PRINT --- */
@media print {
  body {
      background-color: #fff;
      color: #000;
      font-size: 12pt;
  }
  .container {
      box-shadow: none;
      border: 1px solid #ccc;
  }
  /* Hide elements not relevant for printing */
  nav, footer, .no-print {
      display: none;
  }
}