@import url("/src/css/output.css");
@import url("/src/css/root.css");
@import url("/src/css/anima.css");
@import url("/src/css/modal.css");
@import url("/src/css/card.css");


#navbar {
  height: 6rem !important;
  transition: height 0.5s ease-in-out !important;
}

#navbar.is-scrolled {
  background-color: rgba(255, 255, 255, 1) !important;
  height: 4rem !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); 
}

.logo {
  min-width: 150px;
  min-height: 62px;
  background-image: url('assets/images/logo/logo-ligth.svg');
  background-repeat: no-repeat;  
  background-position: center;     
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
  transform-origin: left center;
}

#navbar.is-scrolled .logo, 
        #navbar.menu-open .logo { /* Додаємо умову для відкритого меню */
            background-image: url('assets/images/logo/logo-dark.svg');
            transform: scale(0.85);
        }
        
        /* Також міняємо колір бургер-кнопки на темний, якщо меню відкрите на білому фоні */
        #navbar.menu-open #mobile-menu-button {
            color: #111827; /* gray-900 */
        }

.mesh-background {
    position: relative;
    min-height: 800px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #24376F; 
    background-image:
        radial-gradient(at 0% 100%, #6700c7 0px, transparent 50%),
        radial-gradient(at 100% 100%, #002281 0px, transparent 50%),
        radial-gradient(at 100% 0%, #1971ff 0px, transparent 50%),
        radial-gradient(at 0% 0%, #24376F 0px, transparent 50%);
}

.me-background {
    background-color: #24376F; 
    background-image:
        radial-gradient(at 0% 100%, #6700c7 0px, transparent 50%),
        radial-gradient(at 100% 100%, #002281 0px, transparent 50%),
        radial-gradient(at 100% 0%, #1971ff 0px, transparent 50%),
        radial-gradient(at 0% 0%, #24376F 0px, transparent 50%);
}

.menu-color {
  color: var(--white-color)
}

.ico-color {
  color: var(--cyan-color);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); 
}
.is-scrolled .ico-color  {

  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.0)); 
}

.is-scrolled .menu-color {
  color: var(--blue-color);
}


.quote {
  display: inline-block;
  background-color: var(--yellow-color) !important;
  color: var(--blue-color);
  border: 1px solid transparent;
  transition: all 400ms ease-in-out !important;
}

.is-scrolled .quote {
  display: inline-block;
  background-color: var(--blue-color) !important;
  color: var(--yellow-color) !important;;
  border: 1px solid transparent;
  transition: all 400ms ease-in-out !important;
}

.quote:hover {
  background-color: oklch(54.6% 0.245 262.881) !important;
  color: white !important;
  border: 1px solid white !important;
}
/* ОДИН КЛАС ДЛЯ ВСІХ БЛОКІВ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: transform, opacity;
}

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

.shadow-levitation {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}


.contact-phone-link:hover {
    color: #25D366;
}

.contact-email-link:hover {
    color: #22d3ee; /* cyan-400 */
}


      .bg-brand-blue {
        background-color: #1e3a8a;
      }
      .text-brand-blue {
        color: #1e3a8a;
      }
      .bg-brand-yellow {
        background-color: #e2f331;
      }