/* 9) testimonial section ////////////////////////////////*/
    .testimonialBox{
        padding:60px 4% ;
        }
    
    .testimonialBox .box{
        display:flex;
        width:100%;
        height:auto;
        align-items:center;
        margin:2.5em 0 0;
        overflow:hidden;
        padding:0 10px;
        position:relative;
    }
    
    .testimonialBox .box .arrow{
        opacity:0.2;
        position:absolute;
        max-width:1.2em;
        max-height:1.2em;
    }

    .testimonialBox .box .arrow:hover{
        opacity:0.8 !important;
        cursor:pointer;
    }
    
    .testimonialBox .box #left-arrow{opacity:0;left:0;z-index:20;}
    .testimonialBox .box #right-arrow{right:0;z-index:20;}

    .testimonialBox .testimonialScroller{
        width:100%;
        position:relative;
        overflow-x:hidden;
    }

    .testimonialBox .testimonialContainer {
        display:flex;
        transition: transform 0.3s ease-in-out;
        scrollbar-width: none; /* hide scroll bar For Firefox */;
        width:100%;
    }

    .testimonialBox .testimonialContainer::-webkit-scrollbar {
        display: none; /* hide scroll bar For Chrome, Safari, and Opera */
      }

    .testimonialBox .testimonialScroller::after{
        content:"";
        position:absolute;
        right:0;
        top:0;
        height:100%;
        background:rgb(255, 255, 255);
        width:0.625em;
    }
     
    .testimonialBox .testimonialContainer .messageBox{
        padding:0 6%;
        display:flex;
        flex-direction:column;
        gap:0.25rem;
        flex-shrink: 0;
        position:relative;
        max-width:50%;
        height:auto;
    }
    
    /* we add the border between the two message except the last .message
    we have also use javascript code for it */
    .testimonialBox .testimonialContainer .messageBox.addAfter::after {
        content: "";
        width: 0.04375em;
        height:80%;
        background: rgb(198, 198, 198);
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%);
        right: 0;
      }
    

   
               
    .testimonialBox .testimonialContainer .messageBox .messageHeading,
    .testimonialBox .testimonialContainer .messageBox .message,
    .testimonialBox .testimonialContainer .messageBox .messageBy .name,
    .testimonialBox .testimonialContainer .messageBox .messageBy .aboutPerson{
         font-family: 'Inter', sans-serif;
         font-size: clamp(0.75rem, 0.679rem + 0.357vw, 1rem);
         font-weight: 400;
         line-height: 1.7em;
         letter-spacing: 0.04em;
         text-align: left;
         color:rgba(43, 43, 43, 1);
         cursor:pointer;    
         }


    .testimonialBox .testimonialContainer .messageBox .messageHeading span,
    .testimonialBox .testimonialContainer .messageBox .message span,
    .testimonialBox .testimonialContainer .messageBox .messageBy .name span,
    .testimonialBox .testimonialContainer .messageBox .messageBy .aboutPerson span{
        font-family: 'Inter', sans-serif;
        font-size: clamp(0.75rem, 0.679rem + 0.357vw, 1rem);
        font-weight: 500;
        line-height: 1.7em;
        letter-spacing: 0.04em;
        text-align: left;
        color:rgba(43, 43, 43, 1);
    }
    

    .testimonialBox .testimonialContainer .messageBox .messageHeading,
    .testimonialBox .testimonialContainer .messageBox .messageBy .name{
        font-weight:500;
    }

    .testimonialBox .testimonialContainer .messageBox .messageBy .name{
        font-weight:500;
        color:black;
        
        
    }
    .testimonialBox .testimonialContainer .messageBox .messageHeading{
        margin-bottom: 2px;
    }
 
    .testimonialBox .testimonialContainer .messageBox .message span{color:rgba(83, 140, 209, 1);}
    .testimonialBox .testimonialContainer .messageBox .message span:hover{color:rgb(30, 0, 255);}
    .testimonialBox .testimonialContainer .messageBox .message{
        margin-bottom:8px;
    }

    .testimonialBox .testimonialContainer .messageBox .messageBy{
        display:flex;
        align-items:center;
       margin-top:auto;
        cursor:pointer;
        height:auto;
    }
    .testimonialBox .testimonialContainer .messageBox .messageBy img{
        max-width:57px;
        height:auto;
    }
    .testimonialBox .testimonialContainer .messageBox .messageBy .personDetails{
        padding:0;
       margin-top:1em;
        margin-left:22px; 
    
    }
  
    .testimonialBox .testimonialContainer .messageBox .messageBy .name{
        font-family: 'Work Sans', sans-serif;
        color:rgba(43, 43, 43, 1);
        margin-bottom: 2px;
    }
    
    .testimonialBox .testimonialContainer .messageBox .messageBy .aboutPerson{
        font-family: 'Work Sans', sans-serif;  
        color:rgba(43, 43, 43, 1);
       

    }
    



    /* testimonial popup */
    .testimonialPopup{
        position:fixed;
        top:0;
        
        height:100vh;;
        width:100%;
        /* max-width:1440px; */
        padding:40px 40px ;
        background:rgba(0, 0, 0, 0.176);
      
        z-index:10;
        display:none;
        overflow-y:auto;
        justify-content: center;align-items: center;
        -ms-overflow-style: none;  /* For Internet Explorer and Edge */
        scrollbar-width: none;  
    }

    .testimonialPopup::-webkit-scrollbar {display: none; /* For Chrome, Safari, and Opera */}

    .testimonialPopupBackground{
        width:100%;
        height:100%;
        border-radius:0.625em;
        padding:60px 65px;;height:auto;
        box-shadow:1px 3px 5px 2px rgba(166, 166, 166, 0.477);
        background:rgb(255, 255, 255);
        display:flex;
        align-items:start;
        justify-content:center;
        position:relative;
       
    }


    
    .testimonialPopup .testimonialPopupContent{
        width:100%;
        min-height:100%;
    }
    
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox{
        display:grid;grid-template-columns: 1fr 4fr;
        gap:25px;
        margin-top:20px;
    }
    
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .imageofPerson{
       width:100%;
       max-height:500px;;
       
    }
    .testimonialPopup button{
        position:absolute;
        cursor:pointer;
        top:1.25em;
        right:1.25em;
        border:none;
        background:white;
        outline:none;
        opacity:0.3;
    }
    .testimonialPopup button:hover{opacity:1;}
    .testimonialPopup button .closePopup{
        width:1.875em ;
        height:1.875em;
        border:none;
        background:white;
        outline:none;
    }
    
    
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .messageHeading,
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .message,
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .name,
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .aboutPerson{
         font-family: 'Inter', sans-serif;
         font-size: clamp(0.75rem, 0.679rem + 0.357vw, 1rem);
         font-weight: 400;
         line-height: 1.7em;
         letter-spacing: 0.04em;
         text-align: left;
         color:rgba(43, 43, 43, 1);
    }

    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .messageHeading,
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .name{
            font-weight: 500;
             }
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .message{
            margin-top:5px;
             }
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy{
            margin-top:40px;
            
             }
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .imageofPerson{
            display:none;
            }
            
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .name{
            color:rgb(0, 0, 0);
            line-height:0;
            }
    
    .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .aboutPerson{
            margin-top:0.0625em;
            }
       
       


        @media only screen and (max-width:1161px) {
            /* .testimonialPopupBackground{
                padding: 0px;
            }
            .testimonialPopup .testimonialPopupContent{
                transform: scale(0.4);
            } */
            /* .testimonialPopup{
                width: 100vw;
                max-height: 100vh;
            } */

            .testimonialBox .testimonialContainer .messageBox{
                padding:0 20%;
                position:relative;
                max-width:100%;
            }

            .testimonialBox .testimonialContainer .messageBox.addAfter::after {display:none;}
}

@media only screen and (max-width:768px) {
            .testimonialBox .box{margin:1.5em 0 0; }

            .testimonialBox .testimonialContainer .messageBox .message{margin-bottom:8px;}

            .testimonialBox .testimonialContainer .messageBox{padding:0 15%;}

            .testimonialBox{padding:3.4375em 6% 4.375em;}
}

@media only screen and (max-width:660px){

             .testimonialPopup{padding:0px 0px;}

             .testimonialPopupBackground{border-radius:0;}

             .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .imageofPerson{display:none;}

             .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox{
                display:grid;grid-template-columns: 1fr;
                gap:20px;
                margin-top:20px;
              }
              .testimonialBox .testimonialContainer .messageBox .messageBy{ 
               margin-top:0; 
            }
              .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy{
                margin-top:20px;
                 }
           
            .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .personDetails{
                display:flex;
                align-items:center;
                gap:15px;
                

                }
                .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .personDetails .messageBy{
                    padding-top:1.7em;
                }

                
              
          
            
        
        
                .testimonialBox .testimonialContainer .messageBox .message{cursor:pointer;margin-bottom:10px;}
            .testimonialBox .testimonialContainer .messageBox .message span{color:rgba(83, 140, 209, 1);}
            .testimonialBox .testimonialContainer .messageBox .message span:hover{color:rgb(30, 0, 255);}
            .testimonialBox .testimonialContainer .messageBox .messageBy{display:flex;align-items:center;margin-top:auto;cursor:pointer;}
            .testimonialBox .testimonialContainer .messageBox .messageBy img{max-width:50px;}
            .testimonialBox .testimonialContainer .messageBox .messageBy .personDetails{
                
                margin-left:10px; 
            }
          
            .testimonialBox .testimonialContainer .messageBox .messageBy .name{
                font-size: 12px;
            }
            
            .testimonialBox .testimonialContainer .messageBox .messageBy .aboutPerson{
                font-size: 12px;
            }

            .testimonialPopup .testimonialPopupContent .testimonialPopupMessageBox .testimonialPopupMessageBy .imageofPerson{
                display:block;
                max-width:70px;
                height:auto;
                }

}

@media only screen and (max-width:490px) {
            .testimonialBox .testimonialContainer .messageBox{padding:0 8%;}
            .testimonialBox{padding:3.4375em 6% 4.375em;}
}

/* popup */
@media only screen and (max-width:425px){
         .testimonialPopupBackground{padding:60px 6%;}
         
}
@media only screen and (max-width: 768px){
    .testimonialBox .testimonialContainer .messageBox p{
                
                font-size: 15px !important;
              
            }
}