#logo {
  width: 300px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  image-rendering: auto;
  object-fit: contain;
  display: inline-block !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}

.flexslider {
  position: relative;
  z-index: 1;
  overflow: visible;
  width: 100%;
  height: 600px;
}

.flexslider::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 9999;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: flickerLogos 8s infinite steps(1);
  opacity: 0.8; /* ✨ Desktop opacity control */
}

/* Mobile-only changes */
@media screen and (max-width: 768px) {
  .flexslider::after {
    width: 100px;  /* Shrink for mobile */
    height: 120px;
    opacity: 0.6;  /* ✨ Mobile opacity control */
  }
}

/* Flicker animation */
@keyframes flickerLogos {
  0%, 90% {
    background-image: url('https://cdn.freewebstore.com/origin/1021818/asset9.svg?v=1750484835887');
    transform: translate(-50%, -50%) scale(1);
  }
  91%, 92% {
    background-image: url('https://cdn.freewebstore.com/origin/1021818/asset8.svg?v=1750484880152');
    transform: translate(-50%, -50%) scale(1.1);
  }
  93%, 100% {
    background-image: url('https://cdn.freewebstore.com/origin/1021818/asset9.svg?v=1750484835887');
    transform: translate(-50%, -50%) scale(1);
  }
}


/* Floating animation separated */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
/* Hide the original Freewebstore copyright branding */
#copyright a[href*="freewebstore.com"] {
  display: none !important;
}

/* Optionally hide the entire original copyright container text */
#copyright {
  color: transparent !important;
  position: relative;
}
/* ------------------ NAVIGATION LINKS ------------------ */
#header3_main_nav_inner a {
  color: #fff;
  text-decoration: none;
  padding: 10px 15px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.3s ease;
}

#header3_main_nav_inner a:hover {
  animation: pulse 0.3s ease forwards;
  color: #e60073;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

#header3_main_nav_inner a.active {
  color: #00ccff;
  border-bottom: 2px solid #00ccff;
  font-weight: 700;
}

/* ------------------ LOGO ANIMATION ------------------ */
.header2_item_logo a {
  position: relative;
  display: inline-block;
  width: 300px; /* adjust if needed */
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe1.svg?v=1750647257375");
  animation: logoFlash 1.5s steps(1) 5s forwards;
}

.header2_item_logo a picture,
.header2_item_logo a img {
  display: none !important;
}

/* Animation returns to frame 1 at the end */
@keyframes logoFlash {
  0%   { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe1.svg?v=1750647257375"); }
  25%  { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe2.svg?v=1750647273643"); }
  50%  { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe4.svg?v=1750647292647"); }
  75%  { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe3.svg?v=1750647305582"); }
  100% { background-image: url("https://cdn.freewebstore.com/origin/1021818/yourlogoframe1.svg?v=1750647257375"); }
  
}

use this exact code but allow me to change background footer color: /* STEP 1: Kill the footer background so floating elements can show */
footer,
#footer_links_container,
#newsletter_main_container,
#copyright,
#social_media_container,
.footer_links_section,
#newsletter,
.container {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* STEP 2: Use BODY ::before to inject floating svgs container */
body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  background-image:
    url("https://cdn.freewebstore.com/origin/1021818/hellokitty.svg?v=1750648678526"),
    url("https://cdn.freewebstore.com/origin/1021818/cat.svg?v=1750648717107"),
    url("https://cdn.freewebstore.com/origin/1021818/converse.svg?v=1750648732424"),
    url("https://cdn.freewebstore.com/origin/1021818/kitty.svg?v=1750648742007"),
    url("https://cdn.freewebstore.com/origin/1021818/misssixty.svg?v=1750648752191"),
    url("https://cdn.freewebstore.com/origin/1021818/stars.svg?v=1750648761658"),
    url("https://cdn.freewebstore.com/origin/1021818/stars_1.svg?v=1750648771625"),
    url("https://cdn.freewebstore.com/origin/1021818/copcopine.svg?v=1750648781574"),
    url("https://cdn.freewebstore.com/origin/1021818/diesel.svg?v=1750648792392"),
    url("https://cdn.freewebstore.com/origin/1021818/hg.svg?v=1750648801725"),
    url("https://cdn.freewebstore.com/origin/1021818/vans.svg?v=1750648811259");
  background-repeat: no-repeat;
  background-size: 75px;
  background-position:
    -200px 5vh,    /* float 1 → */
    110vw 12vh,    /* float 2 ← */
    -150px 19vh,   /* float 3 → */
    120vw 26vh,    /* float 4 ← */
    -100px 33vh,   /* float 5 → */
    115vw 40vh,    /* float 6 ← */
    -130px 47vh,   /* float 7 → */
    125vw 54vh,    /* float 8 ← */
    -170px 61vh,   /* float 9 → */
    130vw 68vh,    /* float 10 ← */
    -150px 75vh,   /* float 11 → */
    135vw 82vh,    /* float 12 ← */
    -100px 98vh;   /* float 13 → */
  animation: float-1 60s linear 1,
             float-2 80s linear 2,
             float-3 90s linear 1,
             float-4 70s linear 1,
             float-5 100s linear 1,
             float-6 120s linear 2,
             float-7 85s linear 1,
             float-8 110s linear 1,
             float-9 95s linear 1,
             float-10 60s linear 2,
             float-11 105s linear 1,
             float-12 115s linear 2,
             float-13 55s linear 2;
}

/* STEP 3: Keyframe Animations for each direction */
@keyframes float-1 { to { background-position: -120vw 5vh, -110vw 12vh, -100px 19vh, -90vw 26vh, -80px 33vh, -70vw 40vh, -130px 47vh, -125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-2 { to { background-position: 110vw 5vh, -10vw 12vh, -150px 19vh, 120vw 26vh, -100px 33vh, 115vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, -20vw 89vh; } }
@keyframes float-3 { to { background-position: -120vw 5vh, -110vw 12vh, -120vw 19vh, -120vw 26vh, -100px 33vh, -115vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-4 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -100px 33vh, 115vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, -20vw 89vh; } }
@keyframes float-5 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-6 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -30vw 33vh, -40vw 40vh, -130px 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, -20vw 89vh; } }
@keyframes float-7 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, 120vw 47vh, 125vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-8 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -30vw 33vh, -40vw 40vh, -50vw 47vh, -60vw 54vh, -170px 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, -20vw 89vh; } }
@keyframes float-9 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, 120vw 47vh, 125vw 54vh, 120vw 61vh, 130vw 68vh, -150px 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-10 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -30vw 33vh, -40vw 40vh, -50vw 47vh, -60vw 54vh, -70vw 61vh, -80vw 68vh, -150px 75vh, 135vw 79vh, -20vw 89vh; } }
@keyframes float-11 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, 120vw 47vh, 125vw 54vh, 120vw 61vh, 130vw 68vh, 120vw 75vh, 135vw 82vh, 120vw 89vh; } }
@keyframes float-12 { to { background-position: 120vw 5vh, -10vw 12vh, -150px 19vh, -20vw 26vh, -30vw 33vh, -40vw 40vh, -50vw 47vh, -60vw 54vh, -70vw 61vh, -80vw 68vh, -90vw 75vh, -100vw 82vh, -110vw 89vh; } }
@keyframes float-13 { to { background-position: 120vw 5vh, 110vw 12vh, 120vw 19vh, 120vw 26vh, 120vw 33vh, 115vw 40vh, 120vw 47vh, 125vw 54vh, 120vw 61vh, 130vw 68vh, 120vw 75vh, 135vw 82vh, 120vw 89vh; } }
@media (max-width: 769px) {
  body::before {
    /* Only show 3 SVGs */
    background-image:
      url("https://cdn.freewebstore.com/origin/1021818/hellokitty.svg?v=1750648678526"),
      url("https://cdn.freewebstore.com/origin/1021818/cat.svg?v=1750648717107"),
      url("https://cdn.freewebstore.com/origin/1021818/converse.svg?v=1750648732424");
    
    background-position:
      -200px 10vh,
      110vw 25vh,
      -150px 40vh;
    
    animation: float-1 60s linear 1,
               float-2 80s linear 2,
               float-3 90s linear 1;
  }
}/* Footer background gradient: blue to pink */
footer {
  background: linear-gradient(to right, #ace5ff, #ffcce5) !important;
  position: relative;
  z-index: 0;
}