:root {
  /* Icon Sizes */
  --navbar-menu-icon-size: 30px;
  --navbar-logo-size: 50px;
  --footer-logo-size: 100px;
  --footer-socials-size: 20px;
  --Logo-3YC-size: 20px;

/* Project Colours */
--primary-colour: #184c88;        
--primary-colour-hover: #173774;     
--primary-colour-active: #0d1f3f;    

--secondary-colour: #279485;      
--secondary-colour-hover: #0c8373;  
--secondary-colour-active: #0a695d; 
--sub-colour: #ffffff;
}

nav {
  background-color: transparent;
  align-self: flex-start;
  width: 100%;
}

.nav-link {
  color: var(--sub-colour);
}

.nav-link:hover {
  color: var(--secondary-colour-hover);
}

.nav-link:active {
  color: var(--secondary-colour-active);
}

.navbar-toggler, .navbar-toggler:focus {
  border: none;
  box-shadow: none;
}

.nav-menu-toggle {
  background-image: url("data:image/svg+xml,%3Csvg width='inherit' height='inherit' viewBox='-0.5 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M2 12.32H22' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 18.32H22' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 6.32001H22' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  width: var(--navbar-icon-size);
  height: var(--navbar-icon-size);
  display: inline-block;
  background-size: contain;
}

.nav-logo {
  width: auto;
  height: var(--navbar-logo-size);
  /* clip-path: circle(); */
}

.nav-menu-icon {
  height: var(--navbar-menu-icon-size);
  width: auto;
}

footer {
background-color: transparent;
align-self: flex-end;
width: 100%;
}

.footer-logo {
  width: var(--footer-logo-size);
  height: var(--footer-logo-size);
}

/* btn-outline-primary styles */
.btn-outline-primary {
  border-color: var(--sub-colour);
  color: var(--sub-colour);
}

.btn-outline-primary:hover {
  border-color: var(--secondary-colour-hover);
  color: var(--sub-colour);
  background-color: var(--secondary-colour-hover);
}

.btn-outline-primary:active {
  border-color: var(--secondary-colour-active) !important;
  color: var(--sub-colour);
  background-color: var(--secondary-colour-active) !important;
}


/* btn-primary styles */
.btn-primary {
  border-color: var(--primary-colour);
  color: var(--sub-colour);
  background-color: var(--primary-colour);
}

.btn-primary:hover {
  border-color: var(--primary-colour-hover);
  color: var(--sub-colour);
  background-color: var(--primary-colour-hover);
}

.btn-primary:active {
  border-color: var(--primary-colour-active) !important;
  color: var(--sub-colour);
  background-color: var(--primary-colour-active) !important;
}

/* btn-secondary styles */
.btn-secondary {
  border-color: var(--secondary-colour);
  color: var(--sub-colour);
  background-color: var(--secondary-colour);
}

.btn-secondary:hover {
  border-color: var(--secondary-colour-hover);
  color: var(--sub-colour);
  background-color: var(--secondary-colour-hover);
}

.btn-secondary:active {
  border-color: var(--secondary-colour-active) !important;
  color: var(--sub-colour);
  background-color: var(--secondary-colour-active) !important;
}

.btn-outline-primary.active {
  background-color: var(--secondary-colour-hover) !important;
  border-color: transparent;
}

.logo-shadow {
  filter: drop-shadow(0px 0px 10px rgba(0, 53, 45, 0.39));
}

.nav-menu-icon path {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.nav-menu-icon.open #first {
  transform: translateY(4.7px) rotate(45deg);
  stroke: rgba(6, 255, 222);
}

.nav-menu-icon.open #second {
  opacity: 0;
}

.nav-menu-icon.open #third {
  transform: translateY(-4.7px) rotate(-45deg);
  stroke: rgba(6, 255, 222, 0.4);
}

body:is(.resourcesPage, .home, .support) {
  background: linear-gradient(135deg, rgb(25, 51, 51), rgb(2, 36, 65));
  min-height: 100svh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

body.login {
  background-color: rgb(7, 7, 17);
  min-height: 100svh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  position: relative;
}

main {
  flex-grow: 1;
  align-items: center;
  display: flex;
}

.resources a {
  color: rgb(94, 118, 255);
  transition: 0.2s ease-in-out;
  text-decoration: none;
}

.resources a:hover {
  color: var(--secondary-colour);
  text-decoration: underline;
}

.form-bg.glow {
  background-color: #071222;
  animation: slideUp 0.5s ease-in-out 1 normal forwards, glow 3s ease-in-out 0.4s infinite normal forwards;
  filter: drop-shadow(0px 0px 2px rgba(6, 255, 222, 0.623));
}

.form-bg {
  background-color: #071222;
  filter: drop-shadow(0px 0px 2px rgba(6, 255, 222, 0.623));
}

.form-bg.no-glow {
  background-color: #071222;
  filter: none;
}

.linkHover {
  text-decoration: none;
  color: white;
  transition: 0.2s ease-in-out;
}

.linkHover:hover {
  color: rgba(6, 255, 222, 0.623);
}

.linkHover.underline {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  color: white;
  transition: 0.2s ease-in-out;
}

.linkHover.underline:hover {
  color: rgba(6, 255, 222, 0.623);
}

@keyframes glow {
  0% {
    filter: drop-shadow(0px 0px 2px rgba(6, 255, 222, 0.623));
  }
  50% {
    filter: drop-shadow(0px 0px 8px rgba(6, 255, 222, 0.637));
  }
  100% {
    filter: drop-shadow(0px 0px 2px rgba(6, 255, 222, 0.623));
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.slideUp {
  animation: slideUp 0.5s ease-in-out 1 normal forwards
}

@keyframes slideDownAndOut {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
  }
}

.slideDownAndOut {
  animation: slideDownAndOut 0.5s ease-in-out 1 normal forwards
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.appear {
  animation: appear 0.4s ease-in-out 1 normal forwards;
}

.appear.slow {
  animation: appear 5s ease-in-out 1 normal forwards;
  opacity: 0;
}

body, html {
  overflow-x: hidden;
}

@media (max-width: 576px) {
  .hero p {
    font-size: 18px !important;
  }
  .eqc-bg-logo > .pic {
    max-width: 90%;
  }
}

.eqc-bg-logo {
  height: auto;
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 0;
  width: 100%;
}

.eqc-bg-logo > .pic {
  opacity: 0.05;
}

.resources li:is(.pdf, .pptx, .zip, .md, .link, .xlsx, .multi, .docx, .ahk) {
  position: relative;
  padding-left: 24px; 
  list-style: none;
}

.resources li:is(.pdf, .pptx, .zip, .md, .link, .xlsx, .multi, .docx, .ahk)::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 6px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 0.3em;
}

.resources li.pdf::before {
  background-image: url("/images/pdf-file-icon.png");
}

.resources li.zip::before {
  background-image: url("/images/zip-folder.png");
}

.resources li.pptx::before {
  background-image: url("/images/pptx.png");
}

.resources li.md::before {
  background-image: url("/images/markdown2.svg");
}

.resources li.link::before {
  background-image: url("/images/link-icon.svg");
}

.resources li.xlsx::before {
  background-image: url("/images/excel.svg");
}

.resources li.multi::before {
  background-image: url("/images/multiFile.svg");
}

.resources li.docx::before {
  background-image: url("/images/word-logo.png");
}

.resources li.ahk::before {
  background-image: url("/images/ahk.png");
}

.viewer div:is(.pdf, .pptx, .zip, .md, .link, .xlsx, .multi, .docx, .ahk) {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
}

.viewer div.pdf {
  background-image: url("/images/pdf-file-icon.png");
}

.viewer div.zip {
  background-image: url("/images/zip-folder.png");
}

.viewer div.pptx {
  background-image: url("/images/pptx.png");
}

.viewer div.md {
  background-image: url("/images/markdown2.svg");
}

.viewer div.link {
  background-image: url("/images/link-icon.svg");
}

.viewer div.xlsx {
  background-image: url("/images/excel.svg");
}

.viewer div.multi {
  background-image: url("/images/multiFile.svg");
}

.viewer div.docx {
  background-image: url("/images/word-logo.png");
}

.viewer div.ahk {
  background-image: url("/images/ahk.png");
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

.slideInLeft {
  animation: slideInLeft 0.5s ease-in-out 1 normal forwards
}

pre {
  white-space: pre-wrap; 
  font-family: inherit; 
  font-size: inherit; 
  line-height: 1.3; 
  margin: 0;
}

.dashBtn {
  width: 250px;
  min-width: max-content;
}

#backToTopBtn {
  --position: 30px;

  position: fixed; 
  bottom: var(--position); 
  right: var(--position);
  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.151));
  background-color: transparent;
  border: none;
}

#backToTopBtn svg {
  --size: 50px;

  height: var(--size);
  width: var(--size);
  transition: 0.1s ease-in-out;
}

@media (min-width: 768px) {
  #backToTopBtn:hover svg {
    --size: 54px;
  }
}

@media (max-width: 768px) {
  #backToTopBtn {
    position: fixed; 
    bottom: 50px; 
    right: 20px;
  }
}

textarea {
  resize: none;
}


.loader {
  height: 80px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
  mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);
  filter: blur(12px);
}
.loader:before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(#0000 35%,#0d8d7c,#0000 65%);
  animation: l1 1s linear infinite;
}
@keyframes l1 {
  to {rotate: 1turn}
}

.contact-btn::before {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 5px;
  content: url("data:image/svg+xml,%3Csvg width='inherit' height='inherit' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5562 12.9062L16.1007 13.359C16.1007 13.359 15.0181 14.4355 12.0631 11.4972C9.10812 8.55901 10.1907 7.48257 10.1907 7.48257L10.4775 7.19738C11.1841 6.49484 11.2507 5.36691 10.6342 4.54348L9.37326 2.85908C8.61028 1.83992 7.13596 1.70529 6.26145 2.57483L4.69185 4.13552C4.25823 4.56668 3.96765 5.12559 4.00289 5.74561C4.09304 7.33182 4.81071 10.7447 8.81536 14.7266C13.0621 18.9492 17.0468 19.117 18.6763 18.9651C19.1917 18.9171 19.6399 18.6546 20.0011 18.2954L21.4217 16.883C22.3806 15.9295 22.1102 14.2949 20.8833 13.628L18.9728 12.5894C18.1672 12.1515 17.1858 12.2801 16.5562 12.9062Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

#eye {
  background-color: transparent;
  border: none;
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  padding-bottom: 5px;
  z-index: 5;
}

#eye img {
  height: 20px;
  width: auto;
}

#passwordContainer {
  position: relative;
}

#passwordContainer input {
  padding-right: 35px;
}

video {
  cursor: pointer;
}