/* ===============================
   GLOBAL FULL-SITE BACKGROUND
================================ */


/* ===============================
   FLOATING OBJECT end POSITIONING ball the nav bar 1
================================ */

.floating-object-ball {
  left: 55%;               /* adjust horizontal position ball, more the 500 is right*/
  transform: translateX(-60%); /* adjust vertical position ball 1 top  more the 500 is up */
  bottom: 70vh;            /* adjust vertical position ball 1 top  more the 500 is up */
  position: absolute;
  will-change: transform;
   width: clamp(100px, 10vw, 160px);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.25));

  width: 160px;
  pointer-events: none;
  z-index: 1;
}

.float-item-ball {
  width: 100%;
  height: auto;
  display: block;

  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.25));
  will-change: transform;
}

/* ===============================
   ANIMATION Media Queries ojo for the deploy the app
================================ */

@media (max-width: 900px) {

  /* HERO IMAGE CENTERED */
  .hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  /* SHOE — STOP ANIMATION */
  .hero-shoe {
    max-width: 320px;
    transform: rotate(26deg);
    /* animation: none !important;   */   /* ⛔ stop floating for the Shoe */
    will-change: auto;
    margin-top: 225px;   /* 👈 MOVE SHOE DOWN */
  }

  /* BALL — STATIC ON MOBILE */
  .floating-object-ball {
    position: absolute;

    top: 125%;           /* MOVE BALL BELOW SHOE */
    left: 40%;
    width: 140px;

    animation: none !important;
    transform: translateX(-55%) !important;

    will-change: auto;
  }
/* Animation Stop below 900px */
  /* .float-item-ball {
    animation: none !important;
    transform: none !important;
  } */  
}




/* @media (max-width: 900px) { */

  /* HERO IMAGE CENTERED */
  /* .hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
     position: relative;
  } */

  /* SHOE SCALE & POSITION */
  /* .hero-shoe {
    max-width: 320px;
    transform: rotate(26deg);
  } */

  /* BALL — RESET DESKTOP ABSOLUTE */
  /* .floating-object-ball {
    position: absolute;
     */

    /* CENTER ABOVE SHOE */
    /* left: 35%;
    bottom: auto;
    top: 600px;

    transform: translateX(-50%);
    width: 150px;
  }
} */

/* ===============================
   FLOATING OBJECT POSITIONING     ball the about 2
================================ */

.floating-object {
  position: absolute;
  bottom: 25%;           /* adjust vertical position for about ball */
  left: 69%;                  /* adjust horizontal position right or left for about ball */
  transform: translateX(-50%);
  padding: 10px 2px;  /* reduce padding on smaller and space optional*/
  bottom: -500px;            /* adjust vertical position for about ball */

  width: clamp(100px, 18vw, 160px);

  pointer-events: none;
  z-index: 1;
}

.float-item {
  width: 100%;
  height: auto;
  display: block;

  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.25));
  will-change: transform;
}

.float-item,
.float-item-ball {
  will-change: transform;
}


@media (max-width: 768px) {

  .floating-object {

    transform: translate(-120%, 100%); /* true center */
    bottom: -930px;            /* adjust position for mobile */
    width: 100px;                 /* adjust size for mobile */
    opacity: 0.95;                /* softer look */
    left: 70%;                   /* center horizontally */
    z-index: 2;

  }

}
/* ===============================



/*   VIEW SHOES BUTTON STYLES
================================ */

#view-shoes {
    background-color: rgba(255, 51, 0, 0.774); /* Set the button background color */
    color: #fff; /* Set the button text color */
    font-size: 1rem; /* Set the button font size */
    font-weight: normal; /* Set the button font weight */
    font-family: Arial, sans-serif; /* Set the button font family */
    padding: 1rem 1.5rem; /* Set the button padding */
    margin-left: 15px; /* Add a margin to the left of the button */
    border-radius: 5px; /* Add rounded corners to the button */
    border: none; /* Remove the button border */
    cursor: pointer; /* Change the cursor to a pointer when hovering over the button */
    text-decoration: none; /* Remove any text decoration from the button */
    transition: all 0.3s ease; /* Add a transition effect to the button */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a box-shadow to the button */
    position: relative; /* Set the position property to relative */
    overflow: hidden; /* Hide any overflowing content */
    z-index: 1; /* Set the stack order of the button */
}

#view-shoes:hover {
    color: #fff; /* Keep the text color the same on hover */
    transform: scale(1.1); /* Enlarge the button on hover */
}

#view-shoes:hover::before {
    content: ''; /* Add an empty content */
    position: absolute; /* Set the position property to absolute */
    top: 0; /* Position the content at the top */
    left: 0; /* Position the content at the left */
    right: 0; /* Position the content at the right */
    bottom: 0; /* Position the content at the bottom */
    background-color: #0056b3; /* Set the background color of the content */
    z-index: -1; /* Set the stack order of the content */
    border-radius: 5px; /* Add rounded corners to the content */
    transition: all 0.3s ease; /* Add a transition effect to the content */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Add a box-shadow to the content */
}

#view-shoes:focus {
    outline: none; /* Remove the focus outline */
}