/*
* need to update check mycolor.space
* rosa -- #f88dc1 -- rgba(248,141,193,255)
* azul -- #7dd2ff  -- rgba(154,237,221,255)
* amarillo --- #faf478 -- rgba(250,244,120,255)
* Palete - #f88dc1 - #ff95aa - #ffa691 - #ffbe79 - #ffdb6b - #f9f871
*
*/
@font-face {
    font-family: 'rockwell';
    src: url('../fonts/rockwell-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'strawberry';
    src: url('../fonts/StrawberryBlossom.ttf');
}
.font-rockwell{
    font-family: rockwell;
}
html{
    scroll-behavior: smooth;
}
body{
    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto !important;
    font-size: 16px;
}
p{
  font-size: 1.25rem;
    font-weight: 300;
}
.font-strawberry{
    font-family:strawberry;
}
:root {
    --gradient-color: linear-gradient(to right bottom, #f88dc1,
            #d9a4ef, #aabdff, #7dd2ff, #71e1fb, #71e9ee, #82f0dd,
            #9df4ca, #abf7b6, #c0f8a1, #dbf78b, #faf478);
    --rosa-color: #f88dc1;
    --azul-color: #9aeddd;
    --amarillo-color: #faf478;
}

.text-blue
{

  background-color: #9AEDDD !important;
}
.text-yellow
{
  background-color: #faf478 !important;
}

.custom-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px; /* Control the thickness of the underline */
  text-decoration-skip-ink: none; /* Ensures the line is continuous */
  padding-bottom: 12px; /* Adds space between the text and the line */
}
.bg-gradient {
    background-image: linear-gradient(to right bottom, #f88dc1,
            #d9a4ef, #aabdff, #7dd2ff, #71e1fb, #71e9ee, #82f0dd,
            #9df4ca, #abf7b6, #c0f8a1, #dbf78b, #faf478) !important;
}
.bg-gradient-principal
{
    /* background-image: linear-gradient(to right bottom, #f88dc1, #f3a5d7, #efbbe7,
     #edd0f3, #efe3f9, #eeeafc, #f0f1fc, #f5f7fc, #eef4fc, #e6f2fc, #ddf1fb,
      #d3eff8)!important; */
}

.social-icons {
    color: var(--rosa-color);
}

#menu-button {
    color: var(--rosa-color) !important;
    border-color: var(--rosa-color);
}

#menu-button:hover {
    background-color: white;
    border: 2px solid var(--rosa-color);

}

@media (max-width: 576px) {
    .social-icons {
        display: none !important;
    }
}


.menuItemRight {
    color: var(--rosa-color) !important;
}

.navbar-custom {
    background-color: rgba(0, 0, 0, 0.8);
    /* Semi-transparent navbar background */
}

.border-menu {
    border: 1px solid var(--rosa-color);
}


.centered-div {
    width: clamp(100px, 20vw, 300px);
    /* Responsive width */
    height: clamp(50px, 10vw, 150px);
    /* Responsive height */
}

.fa-facebook:hover ,.fa-phone:hover,.fa-instagram:hover , .fa-circle:hover {
    -webkit-animation: fa-beat 1s infinite linear;
    -moz-animation: fa-beat 1s infinite linear;
    -o-animation: fa-beat 1s infinite linear;
    animation: fa-beat 1s infinite linear;
}

.main-image
{
    /* background-image: url("../images/postres-main/cake.jpg");
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat; */
}
.main-image img {
    position: relative !important;
    z-index: 0;
    background-position: center;
    background-size:cover;
    
}
.main-image::before {
    position: absolute;
    top: 0;
    left: 0;
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1));
    z-index: 1;
  }
  .m-image{
    object-fit: cover;
    height: 100% !important;
    width: 100%!important;
  }


.contact-img{
    max-width: 80px;
    max-height: 80px;
}

.border-dotted{
    border: 2px solid black !important;
    border-style: dotted !important;
}
.card-title{
    color: black;
    text-shadow: none !important;
}
.fs-title{
    font-size: 4rem;
    color: black;
}

.fa-3xs {
    font-size: .525em;
    line-height: .085em;
    vertical-align: .175em;
}
swiper-container {
    width: 500px;
    height: 70%;
  }

  swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px !important;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
  }


  swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
  }

  swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
  }

  swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
  }

  swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
  }

  swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
  }

  swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
  }

  swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
  }

  swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
  }

  swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
  }

  swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
  }
  
  .btn-primary{
    background-color: #f88dc1;
    border: #7dd2ff;
    color: white;
  }
  .btn-secondary{
    background-color:#faf478;
    color: black;
    border:#faf478;
  }
  /* Text styles */
  .text-justify {
    text-align: justify;
  }
  

  /* Para pantallas grandes (lg: >=992px) */
@media (min-width: 992px) {
  #gallery-main{display: none !important;}
  #gallery-main-swiper{display: block !important;}
}


  /* Para pantallas peque���as (>=576px) */
@media (min-width: 576px) {
  #gallery-main{display: none !important;}
  #gallery-main-swiper{display: block !important;}
}

/* Para pantallas medianas (>=768px) */
@media (min-width: 768px) {
  #carousel-swiper swiper-slide{
    height: 80vh;
  }
}
/* Pasteles */
.card-img-overlay {
  bottom: 0;
  top: auto;
  background: rgba(248, 141, 193, 0.9); /* Optional: Adds a dark overlay */
  color: white;
  border-radius:0px;
}
.card-img-overlay p {
  font-size: 1rem;
  font-weight: 450;
}

.card-img-overlay .card-title
{
  color: white;
}
 
.category-section {
  padding: 50px 0;
}

.card img {
  height: 600px;
  object-fit: cover;
}

.masonry {
  column-count: 3;
  /* Three columns for larger screens */
  column-gap: 15px;
  /* Space between columns */
}

.masonry-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
}

.masonry-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

@media (max-width: 992px) {
  .masonry {
      column-count: 2;
      /* Two columns for tablets */
  }
}

@media (max-width: 576px) {
  .masonry {
      column-count: 1;
      /* One column for mobile */
  }
}

.bg-footer {
  background-color: #9AEDDD !important;
  
}

/* timeline  nuestro proceso  */
  .timeline {
    position: relative;
    padding: 2rem 0;
  }

  .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 51%;
    width: 4px;
    background: #f88dc1;
    transform: translateX(-50%);
  }

  .timeline-content p {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
  }

  .timeline-content {
    min-width: 90%;
    padding: 1rem;
    background: #fff;
    border: 2px solid #f88dc1;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .timeline-icon {
    margin:10px !important;
    width: 60px;
    padding: .75rem;
    background: #f88dc1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  @media screen and (max-width: 768px) {
    .timeline-icon{
        display: none;
    }
    .timeline::before {
        background: transparent;
    }
  }