.testimonial-section {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #212529;
  padding: 1rem 6rem;
  /* position: relative; */
  height: 100vh;
  margin: 4rem 0;
}
.inside-testi-section{
 display: flex;
 justify-content: center;
 align-items: center;
 /* background-color: tomato; */
 height: 100%;
}
.testi-left {
 width: 50%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: flex-start;
 padding: 4rem;
}
.testi-left h2 {
  font-size: 55px;
  margin-bottom: 20px;
  font-family: "Baskervville";
  transform: translateY(100px);
  /* opacity: 0; */
  animation: text-ani linear both;
  animation-delay: 2s;
  animation-timeline: view();
 animation-range: entry 50% cover 53%;
 color: #dee2e6;

}
.testi-left p {
  font-size: 18px;
  line-height: 25px;
  font-family: 'Mulish';
  opacity: 0;
  transform: translateY(100px);
  animation: text-ani linear both;
  /* animation-delay: 2s; */
  animation-timeline: view();  
 animation-range: entry 40% cover 41%;
 color: #f8f9fab5;

}
.testi-right{
 width: 50%;
 /* background-color: turquoise; */
 display: flex;
 justify-content: space-between;
 padding: 1rem;
 height: 100%;
 overflow: hidden;
 animation: opacity-animation linear both;
 /* animation-delay: 100s; */
 animation-timeline: view();
 animation-range: entry 40% cover 50%;
}
.testi-slider{
 display: flex;
 flex-direction: column;
 align-items: center;
 /* background-color: steelblue; */
 width: 50%;
 margin-right: 2rem;
 height: 100%;
 position: relative;
 animation: testi-animation 20s linear infinite;
 z-index: 10;
}
.testi-slider:hover{
  animation-play-state: paused;
}
.slider2{
  animation-direction:reverse;
}
.testi-slide {
  display: flex;
  flex-direction: column;
  background-color: #000;
  padding: 1rem;
  margin-bottom: 20px;
  border-radius: 5px;
}
.name {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 font-size: 20px;
 margin-bottom: 10px;
 color: #dee2e6;
 
}
.name p {
  font-family: "Baskervville", serif;
  text-transform: capitalize;
  font-size: 17px;
}

.name img {
  width: 47px;
  margin-right: 21px;
}
.comment {
  /* font-size: 16px; */
  /* text-align: justify; */
  line-height: 19px;
  color: #dee2e6;
  font-family: "mulish";
  font-size: 14px;
}

.modal{
 position: fixed;
 background-color: #fff;
 margin: auto;
 top: 50%;
 display: none;
 z-index: 1000;
 
}
.modal-backdrop{
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;
  height: 100vh;
  display: none;
 z-index: 1000;

}
.modal.show, .modal-backdrop.show{
  display: block;
}
@media (max-width: 1200px){
 .testi-slider {
  margin-right: 1rem;
}
.testi-left {
 padding: 3rem;
}
.testimonial-section {
 padding: 2rem;
}
.comment {
 line-height: 20px;
}
}
@media (max-width: 1100px) {
 .testi-right{
  padding: 0;
 }
 .testi-left h2 {
  font-size: 50px;
  margin-bottom: 5px;
  line-height: 55px;
}
 
}

@media (max-width: 1024px){
 /* .testimonial-section {
  padding: 4rem 3rem;
} */
.testi-left {
  width: 45%;
  padding: 3rem 0;
}
.testi-left h2 {
 font-size: 40px;
 margin-bottom: 20px;
}
.inside-testi-section {
 justify-content: space-between;
}
.testi-right {
 width: 55%;
}
}
@media(max-width: 900px){
  .testimonial-section {
    height: 130vh;
}
 .inside-testi-section {
  flex-direction: column;
}
.testi-left {
 width: 100%;
 padding: 1rem;
 align-items: center;
 text-align: center;
}
.testi-right {
 /* flex-direction: column; */
 width: 100%;
}
.testi-slider {
  animation: testi-animation 20s linear infinite;
}
.testi-slide {
 margin-right: 1rem;
}
}
@media(max-width: 765px){
 .testi-left h2 {
  font-size: 35px;
  margin-bottom: 10px;
}
}
@media (max-width: 500px){
  .testi-slider {
    animation-duration: 15s;
  }
  .testi-left p {
    font-size: 15px;
    line-height: 23px;
  }
  .testi-left h2 {
    font-size: 35px;
    margin-bottom: 1rem;
    line-height: 42px;
}
.slider2{
  display: none;
}
.testi-slider {
  width: 100%;
}
}

@media (max-width: 425px){
  .testi-right {
    flex-direction: column;
    width: 100%;
}
.testi-slider {
  width: 100%;
}

.testimonial-section {
  margin: 2rem 0;
}
.testi-left h2 {
  /* animation-range: entry 40% cover 42%; */
}

}