/* Prevent horizontal scroll */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

@font-face {
    font-family: 'Cairo';
    src: url('./fonts/Cairo-VariableFont_slnt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Russo One';
    src: url('./fonts/RussoOne-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Russo One';
  }

  p, 
  small,
  label,
  caption,
  cite,
  code,
  pre,
  kbd,
  samp,
  var,
  a,
  button,
  input,
  textarea,
  select,
  option {
    font-family: 'Cairo';
  }

.line-1 {
    position: relative;
    top: 50%;  
    width: 20.18em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    text-align: center;
    white-space: wrap;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

@keyframes blink {
    0%, 45% {
        opacity: 1;
    }
    50%, 95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.typewriter-cursor {
    display: inline-block;
    animation: blink 1.2s ease-in-out infinite;
    font-weight: 300;
    color: inherit;
    opacity: 1;
}

.anim-typewriter{
    width:0;
    /*animation: typewriter 4s steps(44) 1s 1 normal both,
               blinkTextCursor 500ms steps(44) infinite normal;*/
  }

/* Page Transition Styles */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #002f6c;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

.page-transition.active {
    visibility: visible;
}

.page-transition__wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #002f6c 0%, #001f4d 50%, #002f6c 100%);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.page-transition__wave-1 {
    background: #002f6c;
}

.page-transition__wave-2 {
    background: #002a5a;
}

.page-transition__wave-3 {
    background: #001f4d;
}

.page-transition__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(249, 198, 66, 0.3);
    border-top-color: #f9c642;
    border-radius: 50%;
    opacity: 0;
    z-index: 10;
}

.page-fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

/* Mobile Menu Styles */
.menu-link {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.menu-link:hover {
    box-shadow: 0 10px 25px rgba(249, 198, 66, 0.15);
}

.menu-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(249, 198, 66, 0.05) 0%, rgba(249, 198, 66, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0.5rem;
}

.menu-link:hover::before {
    opacity: 1;
}

.mobile-menu-cta {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mobile-menu-cta::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.mobile-menu-cta:hover::after {
    width: 300px;
    height: 300px;
}