/*
Theme Name:   Twenty Twenty Child
Description:  Custom Child Theme with for Animations and custom functionality.
Author:       Saif Khawaja
Template:     twentytwenty
Version:      1.0.0
*/

.text-sp{ color:#FFFFFF80; }
.ttm span{ color:white!important; }

/* =========================================
   TEXT STYLING & DICE ROTATING ANIMATION
   ========================================= */
.massive-text {
  font-family: 'Montserrat';
  font-weight: 700;
  text-align: left;
  font-size: 105px;
  line-height: 0.85; 
  text-transform: uppercase;
  color: #ffffff;
  margin-top: -5px; 
}
.highlight-orange { color: #d93d1a; }

/* Main Roller Container */
.text-roller {
  display: inline-flex;
  height: 0.9em; 
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  perspective: 1000px; 
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.roller-wrapper {
  display: flex;
  flex-direction: column;
  animation: strictSnapRoll 6s cubic-bezier(0.85, 0, 0.15, 1) infinite;
}

.roll-word {
  height: 0.9em; 
  line-height: 0.9;
  display: block;
  backface-visibility: hidden; 
  -webkit-font-smoothing: antialiased;
}

@keyframes strictSnapRoll {
  0%, 20%   { transform: translateY(0); }
  25%, 53%  { transform: translateY(-0.9em); }
  58%, 86%  { transform: translateY(-1.8em); }
  91%, 100% { transform: translateY(-2.7em); }
}

/* Respnsive*/


@media screen and (max-width: 1024px) {
  .massive-text {
    font-size: 70px;
    line-height: 65px;
  }
  .text-roller,
  .roll-word {
    height: 65px;
    line-height: 65px;
  }
}

/* Small Tablets / Large Phones (Max Width: 768px) */
@media screen and (max-width: 768px) {
  .massive-text {
    font-size: 65px;
    line-height: 58px;
  }
  .text-roller,
  .roll-word {
    height: 58px;
    line-height: 58px;
  }
}

/* Mobile Screens (Max Width: 480px) */
@media screen and (max-width: 480px) {
  .massive-text {
    font-size: 65px;
    line-height: 55px;
  }
  .text-roller,
  .roll-word {
    height: 55px;
    line-height: 55px;
  }
}


/* =========================================
   MISC STYLES (Zoom, Sticky, Masks, Icons)
   ========================================= */
   
.one-main{
    position:relative!important;
    min-height:5500px!important;
}  
   
#zoom-bg-img img { transition: none !important; overflow:hidden; }
.first-section { position:sticky!important;
top:0px!important;
    left:0!important;
}

.second-section {
    background-color: rgba(12, 13, 16, 0.1); 
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 150px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 150px);
}

.new-ic path{ stroke:#ff3d00!important; stroke-width:1; }
.new-ic svg{ width:25px; }

.special:hover p{ color:white!important; }

.second-sub:hover .first{
    color:white!important;
    text-shadow:0px 0px 2px white;
}

.second-sub::after{
    position:absolute; content:" "; width:0; height:1px!important;
    top:0; left:0; background-color:white!important; z-index:5;
    transition:all 0.3s ease-in-out;
}
.second-sub:hover::after{ width:100%!important; }
.work sup{ font-size:25px; vertical-align:top!important; top:15px; color:#ff3300; }

/* =========================================
   DUAL MARQUEE CSS
   ========================================= */
.premium-marquee-wrapper {
  position: relative; display: flex; align-items: center;
  justify-content: center; height: 50vh; overflow: hidden; background-color: transparent;
}
.marquee-track {
  position: absolute; display: flex; width: 200vw; left: -50vw;
  transition: filter 0.4s ease, opacity 0.4s ease; cursor: default;
}
.track-1 { background-color: #ff3300; color: #fff; transform: rotate(6deg); z-index: 2; }
.track-2 {
  background-color: #000; color: #fff; transform: rotate(-4deg);
  z-index: 1; border-top: 1px solid #222; border-bottom: 1px solid #222;
}
.marquee-content { display: flex; flex-wrap: nowrap; width: max-content; }
.marquee-content span {
  display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; 
  font-family: 'Arial', sans-serif; font-size: 25px; font-weight: 800;
  text-transform: uppercase; padding: 15px 0; 
}
.rotating-star { width: 40px; margin: 0 40px; animation: spinStar 4s linear infinite; display: inline-block; }
@keyframes spinStar { 100% { transform: rotate(360deg); } }
.marquee-track.is-blurred { filter: blur(6px); opacity: 1; }
.mrq{ position:relative!important; }

/* Responsive */

/* Laptop / Small Desktop (Max Width: 1200px) */
@media screen and (max-width: 1200px) {
  .premium-marquee-wrapper {
    height: 300px;
  }
}

/* Tablet Screens (Max Width: 1024px) */
@media screen and (max-width: 1024px) {
  .premium-marquee-wrapper {
    height: 250px;
  }
  
  .marquee-track {
    width: 350vw; /* Increased width to prevent rotation gap */
    left: -125vw;
  }
  
  .marquee-content span {
    font-size: 20px;
    padding: 12px 0;
  }
  
  .rotating-star {
    width: 30px;
    margin: 0 30px;
  }
}

/* Small Tablets / Large Phones (Max Width: 768px) */
@media screen and (max-width: 768px) {
  .premium-marquee-wrapper {
    height: 200px;
  }
  
  .track-1 { transform: rotate(6deg); }   /* Angles slightly reduced for cleaner mobile look */
  .track-2 { transform: rotate(-6deg); }
  
  .marquee-content span {
    font-size: 16px;
    padding: 10px 0;
  }
  
  .rotating-star {
    width: 24px;
    margin: 0 20px;
  }
}

/* Mobile Screens (Max Width: 480px) */
@media screen and (max-width: 480px) {
  .premium-marquee-wrapper {
    height: 160px;
  }

  .track-1 { transform: rotate(6deg); }   /* Minimal angle to avoid cut-off */
  .track-2 { transform: rotate(-6deg); }

  .marquee-content span {
    font-size: 13px;
    padding: 8px 0;
  }

  .rotating-star {
    width: 18px;
    margin: 0 12px;
  }
}




/* ============================================================
   ULTIMATE SMOOTH TESTIMONIAL CARDS
   ============================================================ */
.home__testi-item-feedback-wrap .e-con.shorten { display: none !important; }
.home__testi-item-feedback-wrap .e-con.fully {
    opacity: 1 !important; visibility: visible !important;
    max-height: 46px; overflow: hidden; padding: 0 !important;
    margin: 0 !important; border: 0 !important; position: relative; 
    transition: max-height 0.5s ease-in-out !important; 
}
.home__testi-item-feedback-wrap .e-con.fully .home__testi-item-feedback-txt { display: block; }
.home__testi-item-feedback-wrap:not(.active) .e-con.fully::after {
    content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 35px; 
    pointer-events: none; opacity: 1; transition: opacity 0.3s ease;
}
.home__testi-item-feedback-wrap.active .e-con.fully { max-height: 500px !important; }
.home__testi-item-feedback-wrap.active .e-con.fully::after { opacity: 0; }

.home__testi-item-feedback-wrap .push-image {
    opacity: 0; visibility: hidden; transform-origin: top left; transform: scale(0.6); 
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
}
.home__testi-item-feedback-wrap:hover .push-image,
.home__testi-item-feedback-wrap.active .push-image {
    opacity: 1; visibility: visible; transform: scale(1); 
}
.home__testi-item-feedback-wrap h3, .home__testi-item-feedback-wrap p { transition: color 0.3s ease !important; }
.home__testi-item-feedback-wrap:hover h3, .home__testi-item-feedback-wrap:hover p,
.home__testi-item-feedback-wrap.active h3, .home__testi-item-feedback-wrap.active p { color: #ffffff !important; }

/*.day-bg {*/
/*    background: radial-gradient(250% 100% at 50% 0%, #0c0d10 20%, #d93d1a 45%, #fdfcfb 90%);*/
/*}*/


#day-night-section {
    position: sticky !important;
    top: 0;
    
    background-size: cover; 
    background-position: 50% 0%; /* 50% X-axis (center), 0% Y-axis (top) */
    background-repeat: no-repeat;
}