@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat', sans-serif;
}   

body{
  font-family:'Quicksand', sans-serif;
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
}

.loading-spinner{
  width:1rem;
  height:1rem;
  display:inline-block;
  margin-right:0.55rem;
  vertical-align:-0.15em;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:spin 0.75s linear infinite;
}

button:disabled{
  cursor:not-allowed;
  opacity:0.72;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

/* NAV */

.brand-logo{
  display:flex;
  align-items:center;
  gap:0.75rem;
  min-width:0;
  text-decoration:none;
}

.brand-logo__image{
  width:52px;
  height:52px;
  flex:0 0 auto;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(8,28,58,0.1);
}

.brand-logo__text{
  color:#081c3a;
  font-family:'Montserrat', sans-serif;
  font-size:clamp(1.05rem, 4vw, 1.5rem);
  font-weight:800;
  letter-spacing:0;
  white-space:nowrap;
}

.mobile-menu-button{
  width:44px;
  height:44px;
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  border:1px solid rgba(8,28,58,0.16);
  border-radius:999px;
  color:#081c3a;
  background:#fff;
}

.mobile-menu-button span{
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform 0.25s ease, opacity 0.25s ease;
}

.mobile-menu-button.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.mobile-menu-button.is-open span:nth-child(2){
  opacity:0;
}

.mobile-menu-button.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu{
  border-top:1px solid rgba(15,23,42,0.08);
  padding:0.75rem 0 1rem;
}

.mobile-menu a{
  display:block;
  padding:0.85rem 0.25rem;
  color:#334155;
  font-weight:700;
  text-decoration:none;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible{
  color:#3b82f6;
}

/* HERO */

.hero-section{
  background:url('reacf.png') center/cover no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(8,28,58,0.75),
    rgba(8,28,58,0.7)
  );
  z-index:1;
}

/* SLOW HERO ANIMATION */

.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('reacf.png') center/cover no-repeat;
  animation:zoomHero 18s ease-in-out infinite alternate;
  z-index:0;
}

@keyframes zoomHero{
  from{
    transform:scale(1);
  }

  to{
    transform:scale(1.12);
  }
}

/* SERVICE CARD */

.service-card{
  background:white;
  border-radius:28px;
  overflow:hidden;
  transition:0.5s;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.service-card:hover{
  transform:translateY(-10px);
}

.service-card__image{
  width:100%;
  height:clamp(220px, 38vw, 288px);
  object-fit:cover;
}

.footer-logo{
  display:flex;
  align-items:center;
  gap:1rem;
}

.footer-logo__image{
  width:64px;
  height:64px;
  flex:0 0 auto;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.25);
}

/* SCROLL REVEAL */

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:all 1s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* HERO INTRO */

.fade-up{
  animation:fadeUp 1.3s ease;
}

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

@media (max-width:640px){
  .brand-logo{
    gap:0.55rem;
  }

  .brand-logo__image{
    width:44px;
    height:44px;
  }

  .service-card{
    border-radius:20px;
  }

  .footer-logo{
    align-items:flex-start;
  }

  .footer-logo__image{
    width:56px;
    height:56px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:0.01ms !important;
  }
}