/* Import Poppins font from Google Fonts API */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

    /* Import Newsreader font */
    @import url('https://fonts.googleapis.com/css?family=Newsreader');

    /* Import Libre Franklin font */
    @import url('https://fonts.googleapis.com/css?family=Libre Franklin');
    
    html {
      scroll-behavior: smooth;
    }
    
    h1 {
        font-weight: bold;
    }

    .poppinsFont {
        font-family: 'Poppins', sans-serif;
    }

    .newsreaderFont {
        font-family: 'Newsreader', sans-serif;
    }

    .libreFranklinFont {
        font-family: 'Libre Franklin', sans-serif;
    }

    .pageBG {
      background-color: #f4e7e7;
    }

    .navBarColor {
        background-color: #B44740; /* Light red color */
    }

    .image-size {
        width: 100%;
        max-width: 300px; /* Set the maximum width for images */
        height: 250px; /* Set the height for images */
        object-fit: cover; /* Ensure the images cover the entire area */
    }

    .image-size-lg {
        width: 100%;
        max-width: 500px; /* Set the maximum width for images */
        height: 400px; /* Set the height for images */
        object-fit: cover; /* Ensure the images cover the entire area */
    }

    .image-size-xl {
        width: 100%;
        max-width: 700px; /* Set the maximum width for images */
        height: 600px; /* Set the height for images */
        object-fit: cover; /* Ensure the images cover the entire area */
    }

    .image-size-portrait {
        width: 100%;
        max-width: 300px; /* Set the maximum width for images */
        height: 500px; /* Set the height for images */
        object-fit: cover; /* Ensure the images cover the entire area */
    }

    .hero {
        font-size: 35px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .fadeInFromBottom { /*FADE IN FROM TOP | HIDDEN*/
        opacity: 0;
        filter: blur(5px);
        transform: translateY(30%);
        transition: all 2s;
    }

    .showFromTop { /*FADE IN FROM TOP | SHOW*/
        opacity: 1;
        filter: blur(0px);
        transform: translateY(0%);
    }

    /* Sticky Navbar */
    .sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    /* Scaling size of image and stuff when hovering */
    .hover-scale:hover {
            transform: scale(1.05);
        }

    .hover-scale {
        transition: transform 0.3s ease-in-out;
    }

    /* Sticky Navbar */
    .sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    /* Gradient for Navbar */
    .navbar-gradient {
        background: linear-gradient(to bottom, rgb(198, 57, 47) 20%, rgba(183, 71, 64, 0) 100%);
    }

    .navbar-gradient-pbg {
        background: linear-gradient(to bottom, rgb(198, 57, 47) 20%, #f4e7e7);
    }

    .navbar-gradient-pbg-reverse {
        background: linear-gradient(to top, rgb(198, 57, 47) 20%, #f4e7e7);
    }

    /* START - Hero Animation */
    .hero p {
        will-change: transform, opacity; /* Optimize for expected changes */
        transition: transform 0.1s ease-out, opacity 0.1s ease-out; /* Smooth transition for transformation and opacity */
    }
    /* STOP - Hero Animation */
    
    .hover-color img {
        transition: filter 0.3s ease;
    }
    .hover-color:hover img {
        filter: brightness(100%) saturate(100%) invert(100%) sepia(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    }
    
    /* START - Retro button styling */
    .retro-button-white {
      align-items: center;
      background-color: #FFF;
      border: 2px solid #111;
      border-radius: 8px;
      box-sizing: border-box;
      color: #111;
      cursor: pointer;
      display: flex;
      font-weight: bold;
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      height: 48px;
      justify-content: center;
      line-height: 24px;
      max-width: 100%;
      padding: 0 25px;
      position: relative;
      text-align: center;
      text-decoration: none;
      user-select: none;
      box-shadow: 8px 8px 0 #111;
      transition: box-shadow 0.2s ease-out;
    }
    
    .retro-button-black {
      align-items: center;
      background-color: #000;
      border: 2px solid #FFF;
      border-radius: 8px;
      box-sizing: border-box;
      color: #FFF;
      cursor: pointer;
      display: flex;
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      height: 48px;
      justify-content: center;
      line-height: 24px;
      max-width: 100%;
      padding: 0 25px;
      position: relative;
      text-align: center;
      text-decoration: none;
      user-select: none;
      box-shadow: 8px 8px 0 #FFF;
      transition: box-shadow 0.2s ease-out;
    }
    
    .retro-button-blue {
      align-items: center;
      background-color: #2563eb;
      border: 2px solid #194ab5;
      border-radius: 8px;
      box-sizing: border-box;
      color: #FFF;
      cursor: pointer;
      display: flex;
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      height: 48px;
      justify-content: center;
      line-height: 24px;
      max-width: 100%;
      padding: 0 25px;
      position: relative;
      text-align: center;
      text-decoration: none;
      user-select: none;
      box-shadow: 8px 8px 0 #000;
      transition: box-shadow 0.2s ease-out;
    }
    
    .retro-button-white:hover, 
    .retro-button-black:hover,
    .retro-button-blue:hover {
      box-shadow: 0 0 0 #111, 8px 8px 0 transparent;
      outline: 0;
    }

    
    .retro-button-white:after,
    .retro-button-black:after,
    .retro-button-blue:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      transition: transform 0.2s ease-out;
      transform: translate(-8px, -8px);
    }
    
    .retro-button-white:hover:after,
    .retro-button-black:hover:after,
    .retro-button-blue:hover:after {
      transform: translate(0, 0);
    }
    
    .retro-button-white:active,
    .retro-button-blue:active {
      background-color: #9e9e9e;
    }
    
    .retro-button-black:active {
      background-color: #FFF;
    }
    
    @media (min-width: 768px) {
      .retro-button-white,
      .retro-button-black,
      .retro-button-blue {
        padding: 0 40px;
      }
    }
    /* STOP  - Retro button styling */