* {
  padding: 0%;
  margin: 0%;
}
@font-face {
  font-family: "Gotham";
  src: url("fonts/Gotham-Medium.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: "Gotham" !important;
  background-color: #fdfceb;
}

@font-face {
      font-family: 'Halo';
      src: url('fonts/Halo-Dek.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
}

h4{
  font-family: 'Halo' !important;
}


@font-face {
      font-family: 'gotham-italics';
      src: url('fonts/gotham-bold-italic.TTF') format('truetype');
      font-weight: normal;
      font-style: normal;
}

.why-text{
  font-family: 'Gotham' !important;
}

.navbar-brand img {
  height: 40px;      /* adjust as needed */
  width: auto;       /* keeps the rectangle shape */
  object-fit: contain;
}

.header-image {
  width: 100%;
  height: 100%;
}

.custom-navbar {
  background-color: #f9f9eb;
  position: absolute;
  top: 3%;
  border-radius: 15px;
  left: 10%;
  width: 80% !important;
  z-index: 999;
}

.nav-links {
  color: black !important;
  text-decoration: none;
  font-family: "Gotham";
  cursor: pointer;
}

.nav-links:focus {
  color: black !important;
  text-decoration: none;
  font-family: "Gotham";
  cursor: pointer;
}

.nav-links:hover {
  color: black !important;
  text-decoration: none;
  font-family: "Gotham";
  cursor: pointer;
}

/* Default: show desktop images, hide mobile images */
.carousel-img-desktop {
  display: block !important;
}

.carousel-img-mobile {
  display: none !important;
}

/* Mobile View */
@media (max-width: 768px) {
  .carousel-img-desktop {
    display: none !important;
  }
  .carousel-img-mobile {
    display: block !important;
  }
}



.menu a {
  color: #cc1731;
  text-decoration: none;
  font-family: "Gotham";
}

/* MAIN CONTENT */
.scroll-container {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  padding: 20px 0;
}

.scroll-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  will-change: transform;
}

.item {
  padding: 15px 30px;
  background: #cc1731;
  color: white;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.marquee {
  display: flex;
  animation: scroll 15s linear infinite;
  white-space: nowrap;
  width: fit-content;
}

.marquee-content {
  display: flex;
  align-items: center;
  padding: 0 0px;
  padding-bottom: 10px;
  flex-shrink: 0;
  background-color: #fdfceb;
}

.marquee-item {
  font-size: 48px;
  font-weight: bold;
  color: #f9f9eb !important;
  margin: 0 30px;
  display: inline-flex;
  align-items: center;
}

.marquee .marquee-item {
  height: 100px; /* Desktop size */
  width: auto; /* Maintain aspect ratio */
  object-fit: contain;
}

/* Section Background */
.why-section {
  background-color: #cd2031;
}

/* Inside card area */
.why-section .container {
  background-color: #fdfceb;
  border-radius: 27px;
}

/* Title */
.why-title {
  color: #cc1731;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.5rem); /* responsive font */
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/* Paragraph Text */
.why-text {
  font-size: clamp(1rem, 1.8vw, 1.5rem); /* responsive font */
  line-height: 1.6;
}

.highlighted-text{
  /* font-family: "gotham-italics" !important  ;   */
}

/* Responsive Padding */
.why-section .container {
  padding: clamp(1rem, 4vw, 3rem);
}

.why-image {
  width: 100%;
  height: auto;        /* Maintain natural aspect ratio */
  object-fit: contain; /* Prevent cropping & distortion */
  max-height: 350px;   /* Optional: limit height to keep layout clean */
  display: block;
  margin: 0 auto;
}


.our-heart {
  background-color: #fdfceb;
}

.our-heart {
  position: relative;
  height:60vw;
}
.our-heart h2{
  font-family: 'Halo' !important;
  color: #cc1731;

}

.title {
  font-weight: bold;
  color: #cc1731;
}

.btn-group {
  display: flex;
  gap: 15px;
}


.social-media-section {
  background-color: #cc1731;
}

.social-media-card {
  border-radius: 20px;
}

.social-media-image {
  height: 100%;
  width: 100%;
  border-radius: 20px;
}

@media (max-width: 576px) {
  .marquee .marquee-item {
    height: 50px; /* Smaller for phones */
  }
}

@media (max-width: 768px) {
  .marquee .marquee-item {
    height: 80px;
  }
}

@media (max-width: 1200px) {
  .marquee .marquee-item {
    height: 30px;
  }
}

@media (min-width: 1400px) {
  .marquee .marquee-item {
    height: 140px;
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

.logo-container img {
  height: 100px;
  width: 100%;
}

 .background-heart {
      position: absolute;
      /* top: -30%; */
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 500px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 0;
      transition: opacity 0.4s ease, background-image 0.4s ease;
    }

   

    .carousel-cell {
      width: 40%;
      height: 250px;
      margin-right: 10px;
      border-radius: 10px;
      overflow: hidden;
      /* background: #fff; */
    }

    .carousel-cell img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* CONTROL PANEL (buttons + name) */
    .controls {
      /* position: absolute;
      top: 30%; */
      position: relative;
      width: 100%;
      /* margin-top: 20px; */
      display: flex;
      justify-content: center;
      align-items: center;
      /* gap: 5px; */
      color: #000000 !important;
      font-size: 1.6rem !important;
      z-index: 3;
    }

    .product-name {
      font-size: 24px;
      font-weight: 700;
      text-align: center;
    }

    .nav-btn {
      background: none;
      border: none;
      font-size: 24px;
      font-weight: 700;
      cursor: pointer;
      color: #000000 !important;
      margin: 0px 10px;
    }

    .nav-btn svg {
      width: 100%;
      height: 100%;
    }

    /* ============================================================
   DEFAULT (desktop)
   ============================================================ */
    .carousel-cell {
      width: 40%;
      height: 250px;
    }

    /* ============================================================
   LARGE DESKTOP (Very large monitors)
   ≥ 1600px
   ============================================================ */
    @media (min-width: 1600px) {
      .carousel-cell {
        width: 30%;
        height: 350px;
      }

      .background-heart {
        height: 650px;
        /* top: 10%; */
      }

      .flickity-viewport {
        height: 500px !important;
      }
      .social-medida-title{
        margin-top: 150px;
      }
      
    }

    /* ============================================================
   DESKTOP (Standard 1366–1599px)
   ============================================================ */
    @media (max-width: 1599px) and (min-width: 1366px) {
      .carousel-cell {
        width: 35%;
        height: 600px;
        padding-top: 50px;
      }

      .background-heart {
        height: 50vw;
      }
      .social-medida-title{
        margin-top: 80px;
      }
    
    }

    /* ============================================================
   SMALL DESKTOP / LARGE TABLET
   1024px – 1365px
   ============================================================ */
    @media (max-width: 1365px) and (min-width: 1024px) {
      .carousel-cell {
        width: 45%;
        height: 540px;
        padding-top: 20px;
      }

      .background-heart {
        height: 50vw;
      }
      .why-section-img-thumb{

      }

      .flickity-viewport{
        height: 600px;
      }
      }
       .social-medida-title{
        margin-top: 10px;
      }
      
    

    /* ============================================================
   TABLET LANDSCAPE
   768px – 1023px
   ============================================================ */
    @media (max-width: 1023px) and (min-width: 768px) {
      .carousel-cell {
        width: 55%;
        height: 530px;
        padding-top: 20px;
      }

      .background-heart {
        height: 60vw;
      }

      .our-heart{
        height: 65vw
      }

      .flickity-viewport {
        height: 500px !important;
      }
        .social-medida-title{
        margin-top: 80px;
      }
    }

    /* ============================================================
   TABLET PORTRAIT / LARGE MOBILE
   600px – 767px
   ============================================================ */
    @media (max-width: 767px) and (min-width: 600px) {
      .carousel-cell {
        width: 70%;
        height: 450px;
        padding-top: 48px;
      }

      .background-heart {
        height: 80vw;
        /* top: -20%; */
      }
 .our-heart{
        height: 85vw
      }
       .social-medida-title{
        margin-top: 50px;
      }
      .navbar-brand img {
  height: 20px;      /* adjust as needed */
  width: auto;       /* keeps the rectangle shape */
  object-fit: contain;
}
.footer-desktop-image{
    display: none;
  }
  .footer-menu{
    padding: 0px !important;
  }

  .why-section-img-thumb img{
    height: auto;
    width: 10%;
  }
.custom-navbar {
  background-color: #f9f9eb;
  position: absolute;
  top: 1%;
  border-radius: 15px;
  left: 10%;
  width: 80% !important;
  z-index: 999;
}
  
    }

    /* ============================================================
   MEDIUM MOBILE
   480px – 599px
   ============================================================ */
    @media (max-width: 599px) and (min-width: 480px) {
      .carousel-cell {
        width: 80%;
        height: 380px;
        padding-top: 48px;
      }

      .background-heart {
        height: 80vw;
        /* top: -15%; */
      }

       .our-heart{
        height: 85vw
      }

     .footer-desktop-image{
    display: none;
  }
       .social-medida-title{
        margin-top: 80px;
      }

      .flickity-viewport {
        height: 50px !important;
      }
      .footer-menu{
    padding: 0px !important;
    padding-bottom: 30px;
  }
     .navbar-brand img {
  height: 20px;      /* adjust as needed */
  width: auto;       /* keeps the rectangle shape */
  object-fit: contain;
}

 .why-section-img-thumb img{
    height: auto;
    width: 10%;
  }
    }

    /* ============================================================
   SMALL MOBILE
   375px – 479px
   ============================================================ */
    @media (max-width: 479px) and (min-width: 375px) {
      .carousel-cell {
        width: 90%;
        height: 250px;
        padding-top: 30px;
      }

      .background-heart {
        height: 72vw;
        /* top: -10%; */
      }
.footer-desktop-image{
    display: none;
  }

   .our-heart{
        height: 90vw
      }
      .footer-menu{
    padding: 0px !important;
  }

   .why-section-img-thumb img{
    height: auto;
    width: 15%;
  }

   .flickity-viewport {
        height: 290px !important;
      }
       .social-medida-title{
        margin-top: 80px;
      }
      .navbar-brand img {
  height: 20px;      /* adjust as needed */
  width: auto;       /* keeps the rectangle shape */
  object-fit: contain;
}
      
    }

    /* ============================================================
   EXTRA SMALL MOBILE (iPhone SE, very small screens)
   ≤ 374px
   ============================================================ */
    @media (max-width: 374px) {
      .carousel-cell {
        width: 100%;
        height: 250px;
        padding-top: 30px;
      }

      .background-heart {
        height: 80vw;
        /* top: -5%; */
      }
.footer-desktop-image{
    display: none;
  }
    .our-heart{
        height: 85vw
      }
    .footer-menu{
    padding: 0px !important;
  }

  .flickity-viewport {
        height: 240px !important;
      }
      .social-medida-title{
        margin-top: 80px;
      }
      .navbar-brand img {
      height: 20px;      /* adjust as needed */
      width: auto;       /* keeps the rectangle shape */
      object-fit: contain;
    }
    }

    .social-medida-title{
      font-family: 'Halo';
    }

.footer-fonts{
  color: #fdfceb;
  font-family: 'Halo';
}

.footer-input{
  border: 1px solid #cc1731 !important;
}

/* FOOTER BASE */
footer {
  width: 100%;
  background-color: #cc1731; /* Your footer background */
  padding: 40px 0px 0px 0px;
  color: #fdfceb;
}

/* Footer columns */
footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Common footer text styling */
.footer-fonts span,
.footer-input {
  font-size: 1.3rem;
}

/* Make images responsive */
footer img {
  max-width: 80%;
  height: auto;
}


/* Centering and spacing on mobile */
@media (max-width: 991px) {

  footer .row > div {
    text-align: center !important;
  }

  .footer-fonts {
    padding: 20px 10px;
  }

  /* Hide bottom-left image or move it cleanly */
  footer .col-md-3 img:last-child {
    position: static !important;
    width: 60%;
    margin: 20px auto 0;
    display: block;
  }

  /* Adjust navigation text */
  footer span {
    font-size: 1.2rem !important;
    display: block;
    margin-bottom: 10px;
  }

  /* Email box full width */
  footer input.footer-input {
    width: 100% !important;
  }

  /* Fix footer form box using full width */
  footer .col-md-3 .p-3 {
    margin: auto;
    width: 90%;
    border-radius: 15px;
  }
}

/* Extra mobile responsiveness */
@media (max-width: 576px) {

  footer span {
    font-size: 1rem !important;
  }

  .footer-fonts div {
    font-size: 1.2rem;
  }

  footer input.footer-input {
    padding: 10px !important;
  }

  
}

.footer-img-t img{
  display: block;
  height: auto;
  width: 20% !important;
}




/* Top image visible by default */
#heartTop {
  opacity: 1;
  z-index: 0;
  transition: opacity 0.4s ease-in-out;
   transform: translateX(-50%);
}

/* Bottom image stays hidden until fade-in */
#heartBottom {
  opacity: 0;
  z-index: 0;
  transition: opacity 0.4s ease-in-out;
   transform: translateX(-50%);
}
.testimonial-bg {
  background: linear-gradient(
    to bottom,
    #C22E38 0%,        /* red starts */
    #C22E38 35%,       /* red height */
    #FBF9E5 35%,       /* cream starts immediately */
    #FBF9E5 100%       /* continue cream */
  );
}

.testimonial-card {
  width: 100%;
  max-width: 360px;
  height: 420px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
  overflow: hidden; /* ensures image respects rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills box without distortion */
}

.testimonial-text {
  max-width: 360px;
  font-size: 1rem;
  line-height: 1.5;
  font-family: "Gotham", sans-serif;
  /* color: #fdfceb; */
}

/* MOBILE OPTIMIZATION */
@media (max-width: 576px) {
  .testimonial-card {
    height: 300px;
    max-width: 260px;
  }
  .testimonial-text {
    max-width: 260px;
    font-size: 0.9rem;
  }
  .testimonial-bg {
  background: linear-gradient(
    to bottom,
        /* red height */
    #FBF9E5 100%       /* continue cream */
  );
  border: 0px;
  padding-top: 10px !important;
}
/*#testimonial-title{*/
/*    margin: 0px !important;*/
/*}*/
.mobile-view-contact{
    font-size: 0.8rem !important;
}
}

h2, h4{
 letter-spacing: 2px;
}


/* ========== FOOTER BASE ========== */
.footer-section {
  background-color: #C22E38;
  color: #FDFCEB;
  padding: 40px 0 0 0;
}

/* LEFT HEADING */
.footer-heading {
  font-family: 'Halo';
  font-size: 2rem;
  padding-left: 20px; /* << Your requested LEFT padding */
}

/* SOCIAL ICONS */
.footer-social img {
  width: 40px;
  height: 32px;
  filter: brightness(0) invert(1);
}

/* FOOTER LOGO (desktop only) */
.footer-logo {
  width: 120px;
  display: block;
  margin-top: 20px;
}

/* FOOTER LOGO (mobile bottom) */
.footer-mobile-logo {
  width: 100px;
  display: none;
  margin: 20px auto 0;
}

/* MENU TEXT */
.footer-menu span {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 10px;
  cursor: pointer;
}

.footer-contact{
  font-size: 1.2rem;
}

/* EMAIL BOX */
.footer-email-box {
  background-color: #FDFCEB;
  border-radius: 12px;
  padding: 20px;
}

.footer-input-field {
  width: 100%;
  border: 1px solid #CC1731;
  border-radius: 25px;
  padding: 10px 12px;
}

.footer-touch-text {
  color: #CC1731;
  font-weight: bold;
}

/* COPYRIGHT */
.footer-bottom {
  font-size: 1rem;
  padding: 10px 0;
  border-top: 2px solid #FDFCEB;
  
}

/* ========== MOBILE RESPONSIVENESS ========== */
@media (max-width: 991px) {
  .footer-section .row > div {
    text-align: center;
  }

  /* Move logo to bottom */
  .footer-logo {
    display: none !important;
  }
  .footer-mobile-logo {
    display: block !important;
  }

  /* Center email box */
  .footer-email-box {
    width: 100%;
    margin: auto; 
    max-width: 40%;
  }

  /* Reduce menu spacing */
  .footer-menu span {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .footer-heading {
    font-size: 1.6rem;
    padding-left: 10px;
  }
  .social-icon {
    width: 26px;
  }

  .footer-email-box {
    width: 100%;
    margin: auto; 
    max-width: 80%;
  }
  
  .footer-contact{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: start;
}

.footer-contact span{
  margin-bottom: 10px !important; 
}


}

.footer-contact{
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: start;
}

.footer-contact span{
  margin-bottom: 10px !important;
  
}