/*
 Theme Name:   Elementra Child
 Theme URI:    https://purecss.co.in
 Description:  A child theme for Elementra
 Author:        Abhishek Potdar (RealFast.Ai)
 Author URI:   https://realfast.ai
 Template:     elementra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  elementra-child
*/

.color-primary {
    color: var(--e-global-color-accent);
}
.color-yellow{
    color: #F7BC6D;
}

   
       :root {
      --bg: #F7F6F1;
    }
    .marquee-viewport {
      height: 78vh;
      overflow: hidden;
      position: relative;
    }
	
.marquee-viewport-for-agents{
	height: 80vh;
}
.marquee-track-for-agents {
      animation: marquee-up 15s linear infinite;
    }
 
    /* 2. Fade masks at top and bottom using pseudo-elements */
    .marquee-viewport::before,
    .marquee-viewport::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 100px;
      z-index: 2;
      pointer-events: none;
    }
    .marquee-viewport::before {
      top: 0;
      background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
    }
    .marquee-viewport::after {
      bottom: 0;
      background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
    }
 
    /* 3. Track — holds all cards stacked vertically, duplicated for seamless loop */
    .marquee-track {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 6px 0;
      animation: marquee-up 15s linear infinite alternate;
    }
.marquee-track-down {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 6px 0;
      animation: marquee-down 15s linear infinite alternate;
    }
 
    /* 4. Pause on hover */
    .marquee-track:hover {
      animation-play-state: paused;
    }
.marquee-track-for-agents:hover {
      animation-play-state: paused;
    }
 
/* 5. The keyframe — only CSS, no JS required for movement */
@keyframes marquee-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); } /* -50% = height of one duplicated set */
}
@keyframes marquee-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); } /* -50% = height of one duplicated set */
}

/*=========================================================
*  Testimonials Section CSS Start
*==========================================================*/

.testimonials {
    justify-content: flex-start;
    min-height: 80vh;
    padding-left: 20px;
    padding-right: 20px;
  }
  
   .testimonial--heading {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    justify-content: center;
    width: 100%;
    height: 80vh;
    position: absolute;
    inset: 0% auto auto 0%;
  }
.testimonial--rel-wrapper {
  display: flex;
    flex-direction: column;
    gap: 16px;
    will-change: transform;
}

.testimonial--item {
  filter: 0px;
	box-shadow: 0px 16px 40px 0px rgba(70, 42, 16, 0.06);
  /*-webkit-backdrop-filter: blur(5px);*/
  /*backdrop-filter: blur(5px);*/
  background-color: #FFFAF4DB;
  border-radius: 1vw;
  flex-flow: column;
  width: 22vw;
  padding: 2.3vw 2.6vw;
  display: inline-flex;
  position: absolute;
  top: 5vw;
  left: 28vw;
}
.testimonial--item h3{
    font-size: 20px;
}
.testimonial--item p{
    font-size: 16px;
}

.testimonial--item.item--2 {
  width: 33vw;
  top: 20vw;
  left: 64vw;
}

.testimonial--item.item--3 {
  top: 25vw;
  left: 3vw;
}

.testimonial--item.item--4 {
  width: 23vw;
  top: 45vw;
  left: 10vw;
}

.testimonial--item.item--5 {
  width: 27vw;
  top: 60vw;
  left: 3vw;
}

.testimonial--item.item--6 {
  width: 27vw;
  top: 46vw;
  left: 68vw;
}

.testimonial--item.item--7 {
  width: 30vw;
  top: 65vw;
  left: 53vw;
}

.testimonial--item.item--8 {
  width: 26vw;
  top: 35vw;
  left: 36vw;
}
.div-block-55 { display: none; }
  .marquee--viewport {
    height: 80vh;         /* visible window height — adjust as needed */
    overflow: hidden;
    position: relative;
    width: 100%;
  }



/*===================================================
 * Responsive CSS Start
 * ==================================================*/

@media (min-width: 767px) and (max-width: 1024px) {
.form-row.form-row-two-cols{
		column-gap: 20px !important;
		row-gap: 10px !important;
		margin-bottom: 10px !important;
	}
}

/* 1024px to 1440px */
@media (min-width: 1024px) and (max-width: 1440px) {
.form-row.form-row-two-cols{
		column-gap: 20px !important;
		row-gap: 10px !important;
		margin-bottom: 10px !important;
	}
}

/* ── Sub-breakpoints ── */



/* 1024px to 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
.form-row.form-row-two-cols{
		column-gap: 20px !important;
		row-gap: 10px !important;
		margin-bottom: 10px !important;
	}
}

/* 1200px to 1440px */
@media (min-width: 1201px) and (max-width: 1440px) {
  .hero-content-wrap h1{
    font-size: 65px !important;
  }
  .hero-content-wrap p{
    font-size: 20px;
  }
    .hero-section-highlight-para p{
    	font-size: 14px !important;
    }
    .testimonials-heading{
        font-size: 90px;
    }
	.form-row.form-row-two-cols{
		column-gap: 10px !important;
	}
}
/* 1200px to 1440px */
@media (min-width: 1441px) and (max-width: 1600px) {
  .hero-content-wrap h1{
    font-size: 80px !important;
  }
  .hero-content-wrap p{
    font-size: 22px;
  }
	.hero-section-highlight-para p{
		font-size: 14px !important;
	}
	.form-row.form-row-two-cols{
		column-gap: 20px !important;
		row-gap: 10px !important;
		margin-bottom: 10px !important;
	}
}

/*===========================================================
 * Custom Contact Form CSS
 * ==========================================================*/

.form-row.form-row-two-cols {
    display: flex;
    column-gap: 25px;
    row-gap: 25px;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 25px;
}
.form-row .form-control{
    flex: 0 0 100%;
    width: 100%;
}

.form-row-two-cols .form-control {
    flex: 0 0 48%;
}

.form-control label {
    color: #3E4840;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-bottom: 10px !important;
}

.form-control input,  .form-control select, .form-control textarea{
    background-color: #F5F2EC;
    border: 1px solid rgb(26 31 28 / 9%);
    width: 100%;
    max-width: 100%;
}
.form-control input:focus, .form-control select:focus, .form-control textarea:focus{
    outline: 0 !important;
    border: 1px solid rgb(26 31 28 / 40%) !important; 
}

.form-control input::placeholder,  .form-control select::placeholder, .form-control textarea::placeholder{
    color: #B8C0BA;
}
.wpcf7-not-valid-tip{
    font-size: 14px;
}
.form-control textarea {
    height: 100px;
}

.mt-5{
	margin-top: 25px;
}

@media(max-width: 768px){
    .form-row.form-row-two-cols {
        row-gap: 15px
    }
    .form-row-two-cols .form-control {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}