@font-face {
    font-family: 'Rubik-Light';
    src: url('/assets/font/rubik/Rubik-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Rubik-Regular';
    src: url('/assets/font/rubik/Rubik-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Rubik-Bold';
    src: url('/assets/font/rubik/Rubik-Bold.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Light';
    src: url('/assets/font/Montserrat/Montserrat-Light.ttf') format('truetype');
    font-style: normal;
}
@font-face {
  font-family: 'Montserrat-Regular';
  src: url('/assets/font/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-style: normal;
}
@font-face {
  font-family: 'Merriweathersans';
  src: url('/assets/font/Merriweather/Merriweathersans-Light.ttf') format('truetype');
  font-style: normal;
}
@font-face {
    font-family: 'Sofia-Pro';
    src: url('/assets/font/sofia-pro/SofiaProRegular.otf') format('truetype');
    font-style: normal;
}
  
/* Usage */
/* Rubik */
.rubik-light {
    font-family: 'Rubik-Light', sans-serif !important;
    font-weight: 200;
    font-style: normal;
}
.rubik-regular {
    font-family: 'Rubik-Regular', sans-serif !important;
    font-weight: 400;
    font-style: normal;
}
.rubik-bold {
    font-family: 'Rubik-Bold', sans-serif !important;
    font-weight: 700;
    font-style: normal;
}  

/* Monterrat */
.Montserrat-Light {
  font-family: 'Montserrat-Light', sans-serif !important;
  font-weight: 200;
  font-style: normal;
}  

/* Merryweather */
.merryweather-light {
    font-family: 'Merriweathersans', sans-serif !important;
    font-weight: 200;
}  

/* Sofia Pro */
.sofia-pro {
    font-family: 'Sofia-Pro', sans-serif !important;
    font-weight: 900;
    font-style: normal;
}  

/* Font Align */
.text-start {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-end {
    text-align: right;
}

/* Font Size */
/* Extra Small: 0.75rem (12px) */
.font-xs {
    font-size: 0.75rem;
}
/* Small: 0.875rem (14px) */
.font-sm {
    font-size: 0.875rem;
}
/* Base: 1rem (16px) */
.font-base {
    font-size: 1rem;
}
/* Large: 1.125rem (18px) */
.font-lg {
    font-size: 1.125rem;
}
/* Extra Large: 1.25rem (20px) */
.font-xl {
    font-size: 1.25rem;
}
/* 2X Large: 1.5rem (24px) */
.font-2xl {
    font-size: 1.5rem;
}
/* 3X Large: 1.875rem (30px) */
.font-3xl {
    font-size: 1.875rem;
}
/* 4X Large: 2.25rem (36px) */
.font-4xl {
    font-size: 2.25rem;
}
/* 5X Large: 3rem (48px) */
.font-5xl {
    font-size: 3rem;
}
/* Font Colours */
.text-white {
  color: white !important;
}
.text-grey {
  color: grey !important;
}
.text-brown {
  color: #393d40 !important;
}
.text-blue {
  color: #84bcd4 !important;
}
.text-dark-blue {
  color: #536169 !important;
}
.text-red {
  color: rgba(205, 96, 96, 1) !important;
}
.text-black {
  color: #080404 !important;
}

/* Text */
p {
  font-size: 1em;
}
a {
  font-size: 1em;
}

label b {
  font-size: 1em;
}

/* Background */
.bg-red {
  background-color: rgba(205, 96, 96, 1);
}
.bg-red-white {
  background-color: white;
  border: 0.1px solid rgba(205, 96, 96, 1);
}
.bg-white {
  background-color: white;
}
.bg-lightgrey {
  background-color: #f6f5fa;
}

/* Font Decoration */
.no-decoration {
  text-decoration: none;
}
.no-decoration:hover {
  text-decoration: none;
}

.custom-gutters {
  background-color: #dfe0e0 !important;
  margin-left: -15px; /* Adjust as needed */
  margin-right: -15px; /* Adjust as needed */
}

.custom-gutters > .col-12,
.custom-gutters > .col-sm-6,
.custom-gutters > .col-md-4,
.custom-gutters > .col-lg-3 {
  padding-left: 15px; /* Adjust as needed */
  padding-right: 15px; /* Adjust as needed */
  padding-top: 15px;
  padding-bottom: 15px;
}

/* When active, slide over */
.slide-in.active {
  transform: translateX(-100%);
}

.page-container {
  background-color: #080404;
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.popup {   
  position: fixed;   
  top: 50%;   
  left: 50%;   
  transform: translate(-50%, -50%);   
  background: white;   
  min-width: 60%;   
  padding: 20px;   
  border-radius: 8px;   
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);   
  z-index: 1000;

  /* Flexbox for centering content vertically and horizontally */
  display: flex;
  align-items: center;        /* Vertical centering */
  justify-content: center;    /* Horizontal centering */
  flex-direction: column;     /* Stacks items vertically, adjust as needed */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.popup button {
  margin-top: 10px;
}

/* Current page slides out (moves down and fades out) */
.page-container.slide-out {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in;
}

/* New incoming page starts off-screen at the top */
.new-page {
  position: absolute;
  top: 0%;
  width: 100%;
  min-height: 100vh;
  background: white;
  opacity: 0;
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

/* New page moves into view from the top */
.new-page.active {
  transform: translateY(0);
  opacity: 1;
}

/* Banner */
.banner {
  width: 100%;
  margin: 0;
  text-align: left; /* Align text to the left */
  background-color: white; /* Adjust based on design */
  color: #84bcd4;
  padding: 10px;
}

/* Banner Container */
.banner-container {
  width: 100%;
  display: flex;
  justify-content: space-between; /* Text on the left, button on the right */
  align-items: center;
  margin: 0 auto;
  
  /* Moves banner above footer */
  position: relative;
  top: -40px; /* Adjust this to move it incrementally above the footer */
  box-shadow: -10px -10px 0px rgba(180, 180, 181, 0.5);
}

.d-flex {
  display: flex;
  justify-content: space-between; /* Pushes text left and button right */
  align-items: center; /* Vertically aligns items */
  flex-wrap: wrap; /* Ensures responsiveness on smaller screens */
}

/* Btn */
.btn-primary {
  font-family: Montserrat-Regular;
  text-decoration: none;
  color: #fff;
  background-color: rgba(205, 96, 96, 1);
  border-color: rgba(205, 96, 96, 1);
  padding: 10px;
  border-radius: 2em;
  width: 100%;
  font-size: 1.2em;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.btn-dark {
  font-family: Montserrat-Regular;
  text-decoration: none;
  color: #fff;
  background-color: #343a40;
  border-color: #343a40;
  padding: 10px;
  border-radius: 2em;
  width: 100%;
  font-size: 1em;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.btn-secondary {
  font-family: Montserrat-Regular;
  text-decoration: none;
  color: white;
  padding: 10px;
  border-radius: 2em;
  width: 100%;
  font-size: 1em;
  border: grey;
  background: grey; /* Adjust last value (0.8) for background opacity */
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.btn-secondary:hover, 
.btn-primary:hover {
  text-decoration: none;
}

.btn-outline,
button.btn-outline,
input[type="submit"].btn-outline {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 2px solid white;
  color: white;
  background-color: transparent;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.btn-outline:hover,
button.btn-outline:hover,
input[type="submit"].btn-outline:hover {
  background-color: white;
  transform: scale(1.05);
  color: black;
  text-decoration: none;
}

.btn-white,
button.btn-white,
input[type="submit"].btn-white {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 2px solid black;
  color: black !important;
  background-color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.btn-white:hover,
button.btn-white:hover,
input[type="submit"].btn-white:hover {
  background-color: black;
  transform: scale(1.05);
  color: white !important;
  text-decoration: none;
}


/* Footer */
.footer {
  background-color: #141d2a;
  color: white;
}

/* Site Nav */
.full-screen-menu ul {
  list-style: none;
  padding: 0;
  height: 100vh;
  width: 80%;
  margin-left: 10%;
  box-sizing: border-box;
  margin-right: 10%;
}

.full-screen-menu .nav-link {
  font-size: 1.5rem;
  padding: 10px;
}

.navbar {
  position: fixed !important;
  z-index: 99999;
  display: contents;
  width: 100%;
}
.navbar-collapse.collapse.show {
  align-items: center;
  justify-content: center;
  background-color: white;
  z-index: 9999;
}

body.nav-open {
  position: fixed;
  width: 100%;
  overflow: hidden; /* Prevent scrolling */
}

/* Icons */
.icons {
  background-image: url('/assets/images/logo-1.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 8em 7em;
  height: 40vh;
}

/* Body */
body {
  max-width: 100%;
  margin: 0 auto;
}

/* Inputs */
.primary-image-container {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
}

/* Loader Wrapper */
.upload-container {
  height: 200px;
  background-size: cover;
  position: relative;
  background-position: center;
}

/* Loader background */
.loader-wrapper {
  position: absolute;
  display: flex;
  opacity: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  background-color: rgba(205, 96, 96, 1); /* Semi-transparent */
}

/* Spinner */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #fff; /* White border */
  border-top: 5px solid transparent; /* Creates the spinning effect */
  border-radius: 50%;
  animation: spin 1s linear infinite; /* Apply animation */
}

.red-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(205, 96, 96, 1); /* White border */
  border-top: 5px solid transparent; /* Creates the spinning effect */
  border-radius: 50%;
  animation: spin 1s linear infinite; /* Apply animation */
}

/* Keyframe animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.form-check-input {
  transform: scale(1.2); /* Increase radio button size */
  margin-right: 5px;
}

.form-check-label {
  font-weight: 500;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

#app.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

@keyframes slideInUp {
  from {
      transform: translateY(40px);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

.animate-box {
  opacity: 0;
  animation: slideInUp 0.6s ease forwards;
}

/* Use nth-child inside a shared group */
.button-group .animate-box:nth-child(1) { animation-delay: 0.3s; }
.button-group .animate-box:nth-child(2) { animation-delay: 0.5s; }
.button-group .animate-box:nth-child(3) { animation-delay: 0.7s; }
.button-group .animate-box:nth-child(4) { animation-delay: 0.9s; }
.button-group .animate-box:nth-child(5) { animation-delay: 1.1s; }
.button-group .animate-box:nth-child(6) { animation-delay: 1.3s; }
.button-group .animate-box:nth-child(7) { animation-delay: 1.5s; }
.button-group .animate-box:nth-child(8) { animation-delay: 1.7s; }
.button-group .animate-box:nth-child(9) { animation-delay: 1.9s; }
.button-group .animate-box:nth-child(10) { animation-delay: 2.1s; }
.button-group .animate-box:nth-child(11) { animation-delay: 2.3s; }
.button-group .animate-box:nth-child(12) { animation-delay: 2.5s; }
.button-group .animate-box:nth-child(13) { animation-delay: 2.7s; }
.button-group .animate-box:nth-child(14) { animation-delay: 2.9s; }
.button-group .animate-box:nth-child(15) { animation-delay: 3.1s; }
.button-group .animate-box:nth-child(16) { animation-delay: 3.3s; }
.button-group .animate-box:nth-child(17) { animation-delay: 3.5s; }
.button-group .animate-box:nth-child(18) { animation-delay: 3.7s; }
.button-group .animate-box:nth-child(19) { animation-delay: 3.9s; }
.button-group .animate-box:nth-child(20) { animation-delay: 4.1s; }