/* Timeline Widget Start */

.rtimeline {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.page-content a {
    text-decoration: none;
}

/* -------------------------------------------
   STORYLINE TEMPLATE STYLE 
------------------------------------------- */
.rtimeline-style-storyline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: var(--line-height, 0);
  background: #789164;
  transform: translateX(-50%);
  transition: height 0.85s cubic-bezier(0.25, 0.1, 0.25, 1.4); /* delayed smooth */
}


/* Base item layout */
.rtimeline-style-storyline .rtimeline-item {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 50px 0;
  position: relative;
  justify-content: space-around;
  width: 100%;
}

/* Marker dot */
.rtimeline-style-storyline .rtimeline-item::before {
  content: "";
  width: 25px;
  height: 25px;
  background: #789164;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) scale(0); /* start hidden */
  opacity: 0;                          /* start invisible */
  transition: transform 0.75s ease-out, opacity 0.75s ease-out;
}

/* activated / visible */
.rtimeline-style-storyline .rtimeline-item.active::before {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.rtimeline-style-storyline .rtimeline-image img {
  transform: scale(0.8); /* start smaller */
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s,
              opacity 0.6s ease-out 0.3s; /* 0.3s delay */
}

.rtimeline-style-storyline .rtimeline-image.animated img {
  transform: scale(1); /* zoom in */
  opacity: 1;
}

/* Content & Image */
.rtimeline-style-storyline .rtime {
    width: 40%;
    padding: 10px 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rtimeline-style-storyline .rtimeline-image img {
    width: 50vw;
    height: 100vh;
    object-fit: cover;
    border-radius: 100%;
    border: 3px solid #789164;
    padding: 7px;
    max-height: 320px;
    max-width: 320px;
}


.rtimeline-style-storyline .rtimeline-content {
  max-width: 500px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(20px); /* nakababa ng konti */
  transition: all 0.6s ease-out;
}

.rtimeline-style-storyline .rtimeline-content.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Title, Date, Desc */
.rtimeline-style-storyline .rtimeline-date {
  font-weight: bold;
  color: #a2ad97;
  margin-bottom: 8px;
}

.rtimeline-style-storyline .rtimeline-title {
  margin: 0 0 10px;
  font-size: 26px;
}

.rtimeline-style-storyline .rtimeline-description {
  margin: 0;
  opacity: 0.8;
}

.rtimeline-style-storyline .rtimeline .rtimeline-item:last-of-type::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: #a2ad97;
  transform-origin: center;
  transition: transform 0.35s ease-out 600ms, opacity 0.35s ease-out 600ms;

}

.rtimeline-style-storyline .rtimeline-item:last-of-type.active::after {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}




/* -------------------------------------------
   ALTERNATING LEFT/RIGHT LAYOUT
------------------------------------------- */

/* LEFT SIDE (image left, text right) */
.rtimeline-style-storyline .rtimeline-left {
  flex-direction: row;
}

/* RIGHT SIDE (image right, text left) */
.rtimeline-style-storyline .rtimeline-right {
  flex-direction: row-reverse;
}





/* -------------------------------------------
   WEDDING PROGRAM TEMPLATE STYLE 
------------------------------------------- */

.rtimeline-style-weddingprogram {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    flex-direction: column;
}

.rtimeline-style-weddingprogram .rtimeline-item:nth-child(odd) {
    left: 43%;
}

.rtimeline-style-weddingprogram .rtimeline-item:nth-child(even){
    flex-direction: row-reverse;
}

/* CENTER VERTICAL LINE */
.rtimeline-style-weddingprogram .rtimeline-item .rtimeline-image::before {
    content: '';
    position: absolute;
    top: 100%;
    bottom: -80%;
    left: 50%;
    width: 3px;
    background: #d9b27c;
    transform: translateX(-50%);
}

.rtimeline-style-weddingprogram .rtimeline-item .rtimeline-image {
  position:relative
}

.rtimeline-style-weddingprogram .rtimeline-item:last-child {
    margin-bottom: 0px;
}


.rtimeline-style-weddingprogram .rtimeline-item:last-child .rtimeline-image::before {
    display: none;
}



/* ITEM */
.rtimeline-style-weddingprogram .rtimeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
    max-width: 400px;
    width: 100%;
    justify-content: flex-start;
    gap: 50px;
}


/* TIME (LEFT) */
.rtimeline-style-weddingprogram .rtimeline-date {
    text-align: right;
    font-weight: 600;
    font-size: 14px;
    color: #8b6b3d;
    padding-right: 20px;
}

/* ICON (CENTER) */
.rtimeline-style-weddingprogram .rtimeline-image {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.rtimeline-style-weddingprogram .rtimeline-image img {
    width: 100px;
    height: auto;
    padding: 6px;
}

/* CONTENT (RIGHT) */
.rtimeline-style-weddingprogram .rtimeline-content {
    padding-left: 20px;
}

.rtimeline-style-weddingprogram .rtimeline-title {
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    color: #6f4f2f;
}



/* -------------------------------------------
   RESPONSIVE MOBILE (STACKED)
------------------------------------------- */

@media (max-width: 768px) {
  .rtimeline {
    padding-left: 0;
  }

  .rtimeline::before {
    left: 20px; /* Move to left for mobile */
    transform: none;
  }

  .rtimeline-item {
    flex-direction: column !important;
    text-align: center;
    gap: 20px;
  }

  .rtimeline-item::before {
    left: 22px;
    transform: none;
  }

  .rtime {
    width: 100%;
  }

  .rtimeline-image img {
    width: 260px;
    height: 260px;
    margin: 0 auto;
  }


.rtimeline-content {
    padding-left: 70px;
    padding-right: 50px;
    text-align: left;
}

.rtimeline-item:last-of-type.active::after {
   left: 22px;
}



.rtimeline-style-weddingprogram .rtimeline-item:nth-child(odd) {
    left: 0%;
}

.rtimeline-style-weddingprogram .rtimeline-content {
    padding: 0px;
    text-align: center;
}

.rtimeline-style-weddingprogram .rtimeline-date {
    text-align: center;
    padding:0px!important;
}


.rtimeline-style-weddingprogram .rtimeline-item .rtimeline-image::before {
    top: 200%;
    bottom: -150%;
}


.rtimeline-style-weddingprogram .rtimeline-item {
    gap: 0;
}



/* Wedding story Timeline */

.rtimeline-style-storyline .rtime {
    width: 100%;
}

.rtimeline-style-storyline .rtimeline-content {
  padding-left: 15%;
}

.rtimeline-style-storyline .rtimeline-item::before {
        left: 22px;
}



}
/* Timeline Widget Ends */

@media (max-width: 600px) { 


  .rtimeline-style-storyline .rtimeline-item::before {
    left:5%;
  }

  .rtimeline-style-storyline .rtimeline-image img {
      height: 50vh;
      width: 50vh;
      max-height: 300px;
      max-width: 300px;
  }

 .rtimeline-style-storyline .rtimeline-item::before {
        left: 22px;
}


}