header{
  background-image: url(../img/img-hero-christmas.webp);
  /* min-height: 100vh; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  position: relative;
  display: flex;

  flex-direction: column;
}


header img.hero-sg-decoration-1{
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
}

header img.hero-sg-christmas{
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
}

header img.hero-sg-decoration-2{
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
}
  header img.hero-sg-decoration-3{
    display: none;
  }
@media (max-width: 767px) {

  header img.hero-sg-christmas,
  header img.hero-sg-decoration-1,
  header img.hero-sg-decoration-2{
    display: none;
  }
  header img.hero-sg-decoration-3{
    display: block;
    width: 100%;
   
  }
}

.continuous-carousel .marquee{
  overflow-x: hidden;
}
.continuous-carousel .track{
  display: flex;
  align-items: center;
  padding: 100px 0;
  gap: 2vw;

  /* duration set dynamically from JS: --duration */
  animation: scroll linear infinite;
  animation-duration: var(--duration, 20s);
}
@media (min-width: 2300px) {
 .continuous-carousel .track{
   padding: 150px 0;
  }
}
/* Continuous carousel styles */
.continuous-carousel {
  --item-width: 17vw;
  margin-top: auto;
  margin-bottom: 00px;
}
@media (max-width: 1199px) {
 .continuous-carousel {
    --item-width: 18vw;
  } 
}
@media (max-width: 1100px) {
 .continuous-carousel {
    --item-width: 22vw;
  } 
}

@media (max-width: 991px) {
 .continuous-carousel {
    --item-width: 25vw;
  } 
}
@media (max-width: 899px) {
 .continuous-carousel {
    --item-width: 30vw;
  } 
}

@media (max-width: 800px) {
 .continuous-carousel {
    --item-width: 33vw;
  } 
@media (max-width: 676px) {
     .continuous-carousel {
    --item-width: 45vw;
      margin: auto 0;
  } 
}
}
@media (max-width: 500px) {
 .continuous-carousel {
    --item-width: 60vw;
    margin:0 0 0 0;
  } 
  .continuous-carousel .track{
    padding: 80px 0;
  }
}



.continuous-carousel .track .item{
  flex: 0 0 auto;
  background-color: #fff;
  width: var(--item-width);
  box-shadow: 0 4px 10px rgba(10,5,4,0.4);
  border: 10px solid #fff;   
  position: relative;
  gap: 0;
  display: flex;
  flex-direction: column;
}

.continuous-carousel .track .item button{ 
  font-size: 0;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  opacity: 0;

}

.continuous-carousel .track .item-1{
  z-index: 1;
  transform: rotate(1.4deg) scale(1.26);
  
}
.continuous-carousel .track .item-2{
  z-index: 2;
  transform: rotate(-4deg) scale(1.22);
  
}
.continuous-carousel .track .item-3{
  z-index: 3;
  transform: rotate(4deg) scale(1.27);
  
}
.continuous-carousel .track .item-4{
  z-index: 4;
  transform: rotate(-3deg) scale(1.35);
  
}
.continuous-carousel .track .item-5{
  z-index: 5;
  transform: rotate(5deg) scale(1.3);
  
}


.continuous-carousel .track .item img{
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;


}
.continuous-carousel .marquee:hover .track{
  animation-play-state: paused;
}

@keyframes scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--translate, 50%))); }
}


.felicitacion-container{
  padding: 80px 0;
}
@media (max-width: 767px) {
  header{
    height: fit-content!important;

  }
  .felicitacion-container{
    padding:40px 0 40px 0;
  }
}

.felicitacion-container h2{
  color: #000;
  font-family: "  Merriweather", serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.felicitacion-container h2 strong{
  font-weight: 700;
}
.felicitacion-container p{
  font-family: "Merriweather", serif;
  color: #666;  
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.felicitacion-container h2 strong{
  position: relative;
}

.felicitacion-container h2 strong img{
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  animation: float 3s ease-in-out infinite;
}

.felicitacion-container p.felicitacion{
  padding: 80px 0;
  color: #DD1A1A;
  text-align: center;
  font-family:  "Merriweather", serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  text-align: center;
}

@media (max-width: 767px) {
  .felicitacion-container h2{
    margin-bottom: 20px;
  }
  .felicitacion-container p.felicitacion{
    font-size: 32px;
    padding: 40px 0;
  }
  .felicitacion-container h2 strong span,
  .felicitacion-container h2 strong span img{
   position:relative
	   
  }
	.felicitacion-container h2 strong span img{
		left:4px;
		transform:inherit;
		top:0px;
		height:32px;
		width:auto
	}
}
.felicitacion-container .col-md-8 img{
  width: 300px;
  display: block;
  margin: 0 auto;
}
footer{
  padding:20px 0 64px 0;
}
footer ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
footer ul li{
  padding: 0;
  margin: 0;
}
footer p a,
footer p,
footer ul li a{
  color: #666;
  font-family: "Merriweather", serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  text-align: center;
  text-decoration: none;
}


/* MODAL CONTENT DESIGN */
.modal-dialog{
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal.show .modal-dialog{
  display: flex;
}
.modal-content{
  border-radius: 0;
  position: relative;
  background-color: #fff;
  padding: 32px 32px 44px 32px;
}
.modal-content button{
  position: absolute;
  background-color: black;
  border-radius: 500px;
  top: 100%;
  left: 50%;
  transform: translate(-50% , -50%);
  height: 64px;
  width: 64px;
  border: none;

}
  /* AUDIO STYLES (commented out)
  --------------------------------------------------
  The music toggle styles are kept here but commented
  so the audio UI is disabled without deleting code.
  To re-enable, remove the surrounding comment markers.
  */
  /*
  /* Music toggle button */
  /*
  #music-toggle{
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  }
  #music-toggle.paused{ opacity: 0.7; }
  #music-toggle:focus{ outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
    transform: translate(-50% , -50%);
    top: 100%;
    left: 50%;
    background-color: black;
    border: none;
    font-size: 24px;
    border-radius: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    width: 64px;
      box-shadow: 0 4px 10px rgba(10,5,4,0.4);

  }
  */

.modal-content img{
  max-width: 80%;
  height: auto;
  margin: -80px auto 16px auto;
  background-color: #fff;
  width: var(--item-width);
  box-shadow: 0 4px 10px rgba(10,5,4,0.4);
  border: 10px solid #fff;   
  stroke:  #fff;
  fill:  #fff;   
}


.modal-content p{
  color: #666;
  font-family: "Bad Script";
  font-size:28px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0;
    width: 80%;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .modal-content{
    padding: 16px 16px 40px 16px;
  }
  .modal-content img{
    max-width: 90%;
  }
  .modal-content p{
    width: 90%;
  }
  /* .modal-content button{
    position: fixed;
    top: 16px;
    right: 16px;
  } */
}


#music-toggle{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.cc-cp-foot-save,
.cc-nb-okagree{
  background-color: #DD1A1A!important;
  color: #fff!important;
}

#cc-nb-text{display:none}

.cc-nb-text-show{display:block!important;}
@media(max-width:767px){
	footer ul{flex-direction:column;}
	.no-mobile{display:none}}