/***************************************************
 * Generated by SVG Artista on 5/14/2025, 1:22:42 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(254, 254, 254);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(254, 254, 254);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s both;
          animation: animate-svg-fill-1 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 24, 23);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(29, 24, 23);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s both;
          animation: animate-svg-fill-2 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(26, 22, 21);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(26, 22, 21);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.2000000000000002s both;
          animation: animate-svg-fill-3 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(26, 22, 21);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(26, 22, 21);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.4000000000000001s both;
          animation: animate-svg-fill-4 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.4000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(166, 38, 35);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(166, 38, 35);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.6s both;
          animation: animate-svg-fill-5 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.6s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(73, 109, 166);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(73, 109, 166);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.8s both;
          animation: animate-svg-fill-6 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.8s both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(136, 190, 41);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(136, 190, 41);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2s both;
          animation: animate-svg-fill-7 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2s both;
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(252, 246, 124);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(252, 246, 124);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2.2s both;
          animation: animate-svg-fill-8 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2.2s both;
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(30, 25, 25);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(30, 25, 25);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2.4000000000000004s both;
          animation: animate-svg-fill-9 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2.4000000000000004s both;
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(30, 25, 25);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(30, 25, 25);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2.6s both;
          animation: animate-svg-fill-10 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2.6s both;
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(30, 25, 25);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(30, 25, 25);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-fill-11 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2.8s both;
          animation: animate-svg-fill-11 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 2.8s both;
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(26, 22, 21);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(26, 22, 21);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-fill-12 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 3s both;
          animation: animate-svg-fill-12 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 3s both;
}

/* Additional styles for fullscreen overlay and transitions will be added here later */
#fullscreen-logo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #FEFEFE; /* Match SVG background */
    z-index: 2147483647; /* Max z-index */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#fullscreen-logo-overlay.visible {
    opacity: 1;
    visibility: visible;
}

#fullscreen-logo-overlay svg {
    width: 80vw; /* Adjust as needed */
    height: 80vh; /* Adjust as needed */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* When body has .logo-animation-active, hide scrollbars */
body.logo-animation-active {
    overflow: hidden;
}

/* Styles for the logo when it's in the header */
#animated-logo-placeholder {
    /* 
    This placeholder is now intended to be a flex/grid item in your header.
    Its height should be 90% of the main header bar's height.
    Its width will depend on the column it's in or specific layout needs.
    Positioning should be handled by the parent header's flex/grid.
    */
    height: 90%; /* Takes 90% of its parent's height (e.g., the header bar). */
    width: auto; /* Or a specific width like 200px, or 100% if inside a defined column */
    /* background-color: rgba(255,0,0,0.1); */ /* For debugging layout */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative;
}

.logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; 
    height: 100%;
    position: relative; /* Keep for replay link positioning if needed */
}

/* SVG within .logo-wrapper (which is inside #animated-logo-placeholder) */
#animated-logo-placeholder .logo-wrapper svg {
    width: auto; /* Maintain aspect ratio, it will be constrained by height */
    height: 80px; /* Fill the height of the .logo-wrapper */
    max-width: 100%; 
    display: block;
}

#replay-logo-animation {
    display: block;
    text-align: center;
    font-size: 0.7em;
    /* margin-top: 5px; */ /* Removed direct margin-top, rely on flex in .logo-wrapper */
    color: #666;
    text-decoration: underline;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    right: 10px; 
    /* transform: translateX(-50%); */
}

#replay-logo-animation:hover {
    color: #000;
}
/* Final state class to prevent re-animation if SVG is re-injected */
.logo-final-state .svg-elem-1,
.logo-final-state .svg-elem-2,
.logo-final-state .svg-elem-3,
.logo-final-state .svg-elem-4,
.logo-final-state .svg-elem-5,
.logo-final-state .svg-elem-6,
.logo-final-state .svg-elem-7,
.logo-final-state .svg-elem-8,
.logo-final-state .svg-elem-9,
.logo-final-state .svg-elem-10,
.logo-final-state .svg-elem-11,
.logo-final-state .svg-elem-12 {
    animation: none !important; /* Stop SVG Artista animations */
}

.logo-final-state .fil0 { fill: rgb(254, 254, 254); }
.logo-final-state .fil1 { fill: rgb(29, 24, 23); }
.logo-final-state .fil2 { fill: rgb(26, 22, 21); } /* Applied to multiple elements */
.logo-final-state .fil3 { fill: rgb(166, 38, 35); }
.logo-final-state .fil4 { fill: rgb(73, 109, 166); }
.logo-final-state .fil5 { fill: rgb(136, 190, 41); }
.logo-final-state .fil6 { fill: rgb(252, 246, 124); }
.logo-final-state .fil7 { fill: rgb(30, 25, 25); } /* Applied to multiple elements */

/* Ensure paths that use .fil2 and .fil7 get their final colors */
.logo-final-state .svg-elem-3, 
.logo-final-state .svg-elem-4,
.logo-final-state .svg-elem-12 {
    fill: rgb(26, 22, 21);
}
.logo-final-state .svg-elem-9,
.logo-final-state .svg-elem-10,
.logo-final-state .svg-elem-11 {
    fill: rgb(30, 25, 25);
}

/* Added styles for header layout and logo positioning */
header.ovatheme_header_default {
    min-height: 70px; /* Example: Set a minimum height for your header */
    /* background-color: #f0f0f0; */ /* For debugging header area */
}

header.ovatheme_header_default .container,
header.ovatheme_header_default .row.d-flex { 
    height: 100%; /* Ensure row and container try to fill the header height */
    min-height: inherit; /* Inherit min-height from header.ovatheme_header_default */
}

/* Column containing the navigation */
.ova-nav-area {
    /* Add any specific styles for the navigation area if needed */
    /* e.g., align-self: stretch; if its parent .row is a flex container with align-items-stretch */
}

/* Column containing the animated logo placeholder */
.ova-logo-area-container {
    height: 100%; /* Make this column take full height of its row */
    min-height: inherit; /* Inherit min-height for consistency */
    display: flex;
    align-items: center; 
    justify-content: flex-end; /* Aligns #animated-logo-placeholder to the right of this column */
    /* background-color: rgba(0,0,255,0.1); */ /* For debugging this column */
}

/* Overriding previous #animated-logo-placeholder styles for better context */
#animated-logo-placeholder {
    height: 90%; /* 90% of .ova-logo-area-container's height */
    width: auto; /* Let SVG aspect ratio define width based on height */
    /* max-width: 250px; */ /* Optional: Set a max-width for the logo if needed */
    display: flex; /* Already set, but ensure it is */
    justify-content: center; 
    align-items: center; 
}

/* Ensure the .logo-wrapper and svg also fill the placeholder correctly */
#animated-logo-placeholder .logo-wrapper {
    height: 100%;
    width: 100%; /* Make wrapper fill placeholder if placeholder has a defined width via svg aspect ratio */
    display: flex; /* Already set, kept for clarity */
    flex-direction: column; /* Already set */
    align-items: center; /* Already set */
    justify-content: center; /* Already set */
}

#replay-logo-animation {
    /* Styles for replay link are mostly fine, ensure it's visible */
    /* margin-top: 3px; */ /* Small gap if needed */
}

/* Add explicit dimensions for the final state logo in header */
#animated-logo-placeholder .logo-wrapper svg.logo-final-state {
    width: 142px !important; /* Set a fixed width */
    height: 80px !important; /* Set a fixed height */
    min-width: 142px !important; /* Prevent shrinking */
    min-height: 80px !important; /* Prevent shrinking */
}

/* For mobile dimensions */
@media (max-width: 1199.98px) {
    #animated-logo-placeholder .logo-wrapper svg.logo-final-state {
        width: 124px !important;
        height: 70px !important;
        min-width: 124px !important;
        min-height: 70px !important;
    }
}

@media (max-width: 767.98px) {
  #animated-logo-placeholder .logo-wrapper svg.logo-final-state {
      width: 106px !important;
      height: 60px !important;
      min-width: 106px !important;
      min-height: 60px !important;
  }
}