/*--------------------------------------------------------------
# Sliding Text One
--------------------------------------------------------------*/
.sliding-text-one {
    position: relative;
    display: block;
    background-color: var(--tecture-black);
    border-top: 1px solid var(--tecture-bdr-color);
    border-bottom: 1px solid var(--tecture-bdr-color);
    padding: 85px 0 85px;
    z-index: 1;
}

.sliding-text-one__wrap {
    position: relative;
    display: block;
}

.sliding-text__list {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    width: fit-content;
}

.sliding-text__list li {
    osition: relative;
    display: block;
    float: left;
    margin-right: 35px;
}

.sliding-text__title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    color: var(--tecture-white);
    font-size: 56px;
    line-height: 56px;
    font-weight: 700;
    font-style: normal;
    text-transform: capitalize;
    transition: all 200ms linear;
    transition-delay: 0.1s;
    font-family: var(--tecture-font-two);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sliding-text__title img {
    position: relative;
    width: auto;
    animation: textRotate 05s linear 0s forwards infinite alternate;
}

.sliding-text__title:before {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    color: var(--tecture-base);
    white-space: nowrap;
    content: attr(data-hover);
    transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87);
}

.sliding-text__list li:hover .sliding-text__title:before {
    width: 100%;
    color: var(--tecture-base);
}

@keyframes textRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Sliding Text Two
--------------------------------------------------------------*/
.sliding-text-two {
    position: relative;
    display: block;
    background-color: var(--tecture-black);
    border-top: 1px solid var(--tecture-bdr-color);
    border-bottom: 1px solid var(--tecture-base);
    padding: 0px 0 20px;
    z-index: 10;
}

.sliding-text-two__wrap {
    position: relative;
    display: block;
}

.sliding-text-two__list {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    width: fit-content;
}

.sliding-text-two__list li {
    osition: relative;
    display: block;
    float: left;
    margin-right: 35px;
}

.sliding-text-two__title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    color: transparent;
    -webkit-text-stroke: 0.5px var(--tecture-white);
    font-size: 60px;
    line-height: 60px;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    transition: all 200ms linear;
    transition-delay: 0.1s;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.sliding-text-two__title:before {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    color: var(--tecture-base);
    white-space: nowrap;
    content: attr(data-hover);
    transition: all 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.87);
}

.sliding-text-two__list li:hover .sliding-text-two__title:before {
    width: 100%;
    color: var(--tecture-base);
}

.sliding-text-two__list li:hover .sliding-text-two__title {
    -webkit-text-stroke: 1px var(--tecture-base);
}


/* ===== ATOC | Sliding Text Two – responsive tidy ===== */

/* fix typo so rules apply */
.sliding-text-two__list li{ position: relative; display:block; float:left; margin-right:35px; }

/* scale the big words down with clamp, keep stroke */
.sliding-text-two__title{
  font-size: clamp(22px, 6vw, 60px);
  line-height: 1.05;
  -webkit-text-stroke: 0.5px var(--tecture-white);
  gap: clamp(8px, 2.5vw, 25px);
}

/* tighten the marquee spacing responsively */
@media (max-width: 991.98px){
  .sliding-text-two{ padding: 0 0 14px; }
  .sliding-text-two__list li{ margin-right: 22px; }
  .sliding-text-two__title{ -webkit-text-stroke: 0.45px var(--tecture-white); }
}

@media (max-width: 575.98px){
  .sliding-text-two{ padding: 0 0 10px; }
  .sliding-text-two__list li{ margin-right: 16px; }
  .sliding-text-two__title{
    font-size: clamp(18px, 5.2vw, 28px);   /* smaller on phones to fit more words */
    line-height: 1.05;
    -webkit-text-stroke: 0.4px var(--tecture-white);
  }
  /* avoid hover artefacts on touch – show gold text only when actually pressed */
  .sliding-text-two__list li:hover .sliding-text-two__title:before{ width: 0; }
  .sliding-text-two__list li:active .sliding-text-two__title:before{ width: 100%; color: var(--tecture-base); }
}

/* === ATOC | Sliding Text Two – mobile centring tweak === */

/* tablet and down: make padding symmetric */
@media (max-width: 991.98px){
    .sliding-text-two{
      padding-top: 6px !important;
      padding-bottom: 18px !important;   /* a little more bottom than top for optical centre */
    }
  }
  
  /* phones: a touch more bottom padding so it sits bang in the middle */
  @media (max-width: 575.98px){
    .sliding-text-two{
      padding-top: 6px !important;
      padding-bottom: 24px !important;   /* bump this up/down by 2px if you want it perfect on your handset */
    }
    .sliding-text-two__title{
      line-height: 1.02;                 /* tiny tighten to reduce top visual weight */
    }
  }
  







/*--------------------------------------------------------------
# End
--------------------------------------------------------------*/