:root {
  /* Custom colors */
--blue-verydark: #1E1A34;   /* rgba(30, 26, 52, 1) */
--blue-dark: #2E008B;       /* rgba(46, 0, 139, 1) */
--blue: #1E22AA;            /* rgba(30, 34, 170, 1) */
--blue-75: #1E22AABF;       /* rgba(30, 34, 170, 0.75) */
--yellow: #DAAA00;          /* rgba(218, 170, 0, 1) */
--orange: #FF9E1B;          /* rgba(255, 158, 27, 1) */
--black: #1E1A34;           /* rgba(30, 26, 52, 1) */


  /* Bulma colors */
  --grey-lighter: #D3D3D3;
  --white-ter: 	#F5F5F5;

  --time-short: 0.5s;
  --time-medium: 1s;
  --time-long: 2s; 
  --time-verylong: 3s;

  --radius: 0.5em;
}





@media only screen and (max-width: 768px) {
  .hero.is-fullheight-mobile {
    height: 100vh;
  }
}



/* ----- GENERAL BEHAVIOR ----- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
}
body {
  font-family: 'Oxygen', sans-serif;
}


/* Helpers */
.is-rounded {
  border-radius: 4px;
}



/* ----- FONTS ----- */
/* Fonts sizes */
.navbar-item.is-size-7 {
  font-size: 0.85rem !important;
}
.contact.is-size-6 {
  font-size: 1rem !important;
}
.contact.is-size-7 {
  font-size: 0.85rem !important;
}



/* ----- MATERIAL ICON HELPERS ----- */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-dark { color: var(black); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.25); }

.material-icons.md-light { color: var(--white-ter); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.25); }


/* Additional modifications */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--white-ter);
  transition: background-color var(--time-medium);
}


/* Color when hover */
.icon-text-row:hover .icon-circle {
  background-color: var(--yellow);
}
.icon-text-row:hover .icon-circle .material-icons {
  color: var(--white-ter);
}



/* ----- TEXT MODS ----- */
/* Horizontal spacers */
.hr-with-text {
  display: flex;
  align-items: center;
}
.hr-with-text.subtitle {
  line-height: 1.25;
}
.hr-with-text::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--blue-75);
  margin-left: 2rem;
}



/* ----- NAVBAR ----- */
.navbar.is-fixed-top {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 1rem; 
  margin-inline: 17em; 
  margin-top: 1.5em
}
.navbar-item {
  border-radius: var(--radius);
  transition: background-color var(--time-short) ease;
}
.navbar-item:hover {
  background-color: rgba(0, 0, 0, 0.075);
  color: inherit;
}



/* ----- ANIMATIONS ----- */
.typewriter {
  overflow: hidden;
  border-right: 4px solid white;
  white-space: nowrap;
  width: 0;
  animation: typing var(--time-verylong) steps(40, end) forwards, blink var(--time-short) step-end infinite;
}

@keyframes typing {
  from { width: 0% }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: var(--yellow); }
}



/* ----- TRANSITIONS ----- */
.transition-hover-y {
  transition: transform var(--time-short) ease;
}
.transition-hover-y:hover {
  transform: translateY(-2px);
}


.transition-fade-in {
  opacity: 0;
  transition: opacity var(--time-long) ease-in;
}
.transition-fade-in.visible {
  opacity: 1;
}



/* ----- VISUAL EFFECTS ----- */
.underline-hover {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.underline-hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background-color: var(--yellow);
  transition: width var(--time-short) ease-out;
}
.box-wrapper:hover .underline-hover::after {
  width: 100%;
}


.curtain {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height var(--time-short) ease;
  overflow: hidden;
}
.curtain-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.curtain-image:hover .curtain {
  height: 100%;
}
.curtain-image img {
  display: block;
  transition: transform var(--time-short) ease;
}
.curtain-image:hover img {
  transform: scale(1.05);
}














.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  max-height: 50px;
  object-fit: contain;
}
















.hero {
  position: relative;
  background: url('/imgs/hero.png') center/cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(315deg,
    rgba(46, 0, 139, 0.5) 15%,
    rgba(30, 34, 170, 0.5) 45%,
    rgba(255, 158, 27, 0.5) 90%);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}













.box-wrapper {
  position: relative;
}

.box-card-image {
  position: absolute;
  left: 75%;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  width: 100%;
  border-radius: var(--radius);
}


.box-wrapper:hover .box-card-image {
  top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 1;
}