/* MAIN HEART LOGO STYLES */
.heart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  perspective: 1000px;
  transition: transform 0.5s ease;
  margin-top: clamp(3rem, 20vw, 15rem);
  margin-bottom: clamp(3rem, 5vw, 10rem);
}

.heart-container .c-shape {
  position: absolute;
  width: 120px;
  height: 200px;
  border: 36px solid #F28D79;
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
  transition: filter 0.5s ease;
}

/* Base translateX values (for 120px width) */
.heart-container .left {
  transform: rotateY(-0deg) rotateZ(-25deg) rotateX(-32deg) translateX(-12px); /* 10% of width */
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.heart-container .right {
  transform: rotateY(-0deg) rotateZ(25deg) rotateX(-32deg) translateX(12px); /* 10% of width */
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.heart-container:hover .c-shape {
  filter: drop-shadow(0 0 20px rgba(242, 199, 121, 0.8)) 
          drop-shadow(0 0 40px rgba(242, 199, 121, 0.6));
}

/* Tablet Scaling (83% of original) */
@media only screen and (max-width: 64rem) {
  .heart-container {
    height: 167px;
  }
  
  .heart-container .c-shape {
    width: 100px;
    height: 167px;
    border-width: 30px;
  }
  
  .heart-container .left {
    transform: rotateY(-0deg) rotateZ(-25deg) rotateX(-32deg) translateX(-10px); /* 10% of 100px */
  }
  
  .heart-container .right {
    transform: rotateY(-0deg) rotateZ(25deg) rotateX(-32deg) translateX(10px); /* 10% of 100px */
  }
}

/* Mobile adjustments (62.5% of original) */
@media only screen and (max-width: 47.9375rem) {
  .heart-container {
    height: 125px;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  
  .heart-container .c-shape {
    width: 75px;
    height: 125px;
    border-width: 22.5px;
  }
  
  .heart-container .left {
    transform: rotateY(-0deg) rotateZ(-25deg) rotateX(-32deg) translateX(-7.5px); /* 10% of 75px */
  }
  
  .heart-container .right {
    transform: rotateY(-0deg) rotateZ(25deg) rotateX(-32deg) translateX(7.5px); /* 10% of 75px */
  }
}

/* Small Mobile (50% of original) */
@media only screen and (max-width: 30rem) {
  .heart-container {
    height: 100px;
  }
  
  .heart-container .c-shape {
    width: 60px;
    height: 100px;
    border-width: 18px;
  }
  
  .heart-container .left {
    transform: rotateY(-0deg) rotateZ(-25deg) rotateX(-32deg) translateX(-6px); /* 10% of 60px */
  }
  
  .heart-container .right {
    transform: rotateY(-0deg) rotateZ(25deg) rotateX(-32deg) translateX(6px); /* 10% of 60px */
  }
}

/* NAVBAR-SPECIFIC FIXES */
.navbar .heart-container {
  /* Reset positioning */
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 25px !important;
  width: 35px !important; /* Slightly wider container */
  margin: 0 8px !important; /* Balanced side margins */
  perspective: 500px !important;
}

.navbar .c-shape {
  position: absolute !important;
  width: 28px !important;
  height: 42px !important;
  border: 10px solid #F28D79 !important;
  border-radius: 50% !important;
  /* Reset transforms */
  transform: none !important;
}

.navbar .left {
  left: 0 !important;
  transform: rotateY(-0deg) rotateZ(-30deg) rotateX(-32deg) translateX(-1.5px) !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.navbar .right {
  right: 0 !important;
  transform: rotateY(-0deg) rotateZ(30deg) rotateX(-32deg) translateX(1.5px) !important;
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* MAIN HEART STYLES REMAIN UNCHANGED FROM BEFORE */
/* ... (keep all your existing hero heart styles) ... */

.navbar .heart-container:hover .c-shape {
  filter: drop-shadow(0 0 20px rgba(242, 199, 121, 0.9)) 
          drop-shadow(0 0 40px rgba(242, 199, 121, 0.7)) !important;
}