@charset "UTF-8";
/* CSS Document */

        *{
            padding: 0;
            margin: 0;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: white;
        }

/*title right start here*/

.sec5main1 {
    width: 100%;
    height: 20vh;
    /*border: 2px solid yellow;*/
}

.sec5main1-title {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: row;
    
}

.sec5main1-title1 {
    width: 45%;
    height: 100%;
/*    border: 2px solid blue;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.sec5main1-title11 {
    width: 85%;
    height: 75%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.sec5main1-title1 p{
    font-weight: 400;
    font-size: 1.2vw;
    color: #0b4251;
    /*color: red;*/
    z-index: 1;
}


.sec5main1-title2 {
    width: 55%;
    height: 100%;
/*    border: 2px solid pink;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.sec5main1-title22 {
    width: 75%;
    height: 75%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.sec5main1-title22-img {
    width: 31px;
    height: 12px;
    margin-right: 15px;
    z-index: 1;
    /*border: 2px solid red;*/
/*    border: 2px solid yellow;*/
}

.sec5main1-title22-img img {
    width: 100%;
}

.sec5main1-title2 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 4.2vw;
    color: #0b4251;
    z-index: 1;
    
    /*border: 2px solid red;*/

}

.sec5main1-title2 p{
    font-weight: 400;
    font-size: 1.2vw;
    color: #bdccd0;
    letter-spacing: 1px;
    z-index: 1;
}



/*client comment start here*/
        
        .testimonials-section {
            width: 100%;
            height: 68vh;
/*            border: 2px solid orange;*/
            margin-top: 40px;
            
        }
        
        .testimonials-container {
            width: 86%;
            height: 100%;
/*            border: 2px solid cyan;*/
            margin: auto;
        }
    
        .top-testimonials {
            width: 100%;
/*            border: 2px solid red;*/
        }
    
        
        /* Modern chat bubble with smooth tail */
        .chat-shape {
            background-color: white;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 40px;
            position: relative;
/*            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);*/
/*            max-width: 800px;*/
            border: 2px solid #bdccd0;
            margin-left: auto;
            margin-right: auto;
        }

        /* Create the smooth, rounded tail */
        .chat-shape::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 40px;
            width: 24px;
            height: 24px;
            background-color: white;
            
/*            this is the technique to create chat tails*/
            
            transform: rotate(45deg);
            clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
            border-bottom-right-radius: 6px;
        }

        /* Add subtle shadow to the tail */
        .chat-shape::before {
            content: '';
            position: absolute;
            bottom: -14px;
            left: 36.5px;
            width: 34px;
            height: 34px;
/*            background-color: rgba(0,0,0,0.07);*/
            background-color: #bdccd0;
            transform: rotate(45deg);
            clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
            border-bottom-right-radius: 8px;
            z-index: -1;
        }

        .top-section {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .top-section img {
            width: 41px;
            height: 41px;
            
/*            here to make the shape into circle*/
            
            border-radius: 50%;
            margin-right: 16px;
            object-fit: cover;
            border: 1px solid #bdccd0;
/*            border: 3px solid white;*/
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .top-section .title {
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: 2.1vw;
/*            line-height: 2.2vw;*/
            color: #0b4251;
/*            margin: 20px 0;*/
        }

        .top-section .location {
            font-size: 0.95rem;
            color: #bdccd0;
            font-weight: 600;
        }

        .comment {
            /*font-size: 1rem;*/
            font-size: 1.2vw;
            font-weight: 400;
            color: #0b4251;
            line-height: 1.4;
            margin-bottom: 16px;
            text-align: left;
            /*color: red;*/
        }

        .stars {
            color: #f2c864;
            font-size: 1.3rem;
            letter-spacing: 2px;
        }

        .stars i {
            margin-right: 2px;
        }

        .bottom-testimonials {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 30px;
            gap: 24px;
        }
    
    
    
    
/*    media over here*/



/*media tablets 1194px start here*/


@media (max-width: 1194px){
    
    
    
 .testimonials-section {
    width: 100%;
    /*height: 68vh;*/
    height: 580px;
    /*border: 2px solid orange;*/
    margin-top: 40px;
            
}
    
    
.sec5main1-title2 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 4.6vw;
    color: #0b4251;
    z-index: 1;
    
    /*border: 2px solid red;*/

}

.sec5main1-title2 p{
    font-weight: 400;
    font-size: 1.6vw;
    color: #bdccd0;
    letter-spacing: 1px;
    z-index: 1;
}
    

.sec5main1-title1 p{
    font-weight: 400;
    font-size: 1.6vw;
    color: #0b4251;
    /*color: red;*/
    z-index: 1;
}
    
    
    
        .comment {
            /*font-size: 1rem;*/
            font-size: 1.6vw;
            /*color: red;*/
        }
    
    
        .top-section .title {
            font-size: 2.6vw;
/*            line-height: 2.2vw;*/
            color: #0b4251;
            /*color: red;*/
/*            margin: 20px 0;*/
        }
    
    
    
    
    
}


/*media tablets 1194px end here*/



/*media tablets 920px start here*/


@media (max-width: 920px){
    
    
.testimonials-section {
    width: 100%;
    /*height: 68vh;*/
    height: 520px;
    /*border: 2px solid orange;*/
    margin-top: 40px;
            
}


/*sub tag start here*/

.sec5main1-title22-img {
    width: 25px;
    height: 10px;
    margin-right: 15px;
    z-index: 1;
    /*border: 2px solid red;*/
/*    border: 2px solid yellow;*/
}
    
    
    
    
    
}




/*media tablets 920px end here*/











    

        /* Responsive adjustments */
        @media (max-width: 1024px) {
            .chat-shape {
                max-width: 90%;
            }
        }

        @media (max-width: 768px) {
            .testimonials-container {
                padding: 0 16px;
            }
            .chat-shape {
                padding: 18px;
                margin-bottom: 36px;
                border-radius: 20px;
            }
            .chat-shape::after {
                left: 32px;
                bottom: -10px;
                width: 20px;
                height: 20px;
            }
            .chat-shape::before {
                left: 30px;
                bottom: -12px;
                width: 24px;
                height: 24px;
            }
            .top-section img {
                width: 48px;
                height: 48px;
            }
            .top-section .title {
                font-size: 1.1rem;
            }
            .comment {
                font-size: 1rem;
            }
            .stars {
                font-size: 1.1rem;
            }
            .bottom-testimonials {
                flex-direction: column;
                gap: 0px;
            }
        }













@media (max-width: 600px) {
           
/*            title right start here*/
            
.sec5main1 {
    width: 100%;
    /*height: 30vh;*/
    /*height: 225px;*/
    height: auto;
    margin-top: 15px;
    /*border: 2px solid red;*/
}

.sec5main1-title {
    width: 86%;
    height: 100%;
    margin: auto;
/*    border: 2px solid cyan;*/
    display: flex;
    flex-direction: column-reverse;
    
}

.sec5main1-title1 {
    width: 100%;
    height: 60%;
/*    border: 2px solid blue;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

.sec5main1-title11 {
    width: 80%;
    height: 90%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.sec5main1-title1 p{
    font-weight: 400;
    font-size: 3vw;
    color: #0b4251;
    text-align: right;
}


.sec5main1-title2 {
    width: 100%;
    height: 40%;
    margin-bottom: 10px;
/*    border: 2px solid pink;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.sec5main1-title22 {
    width: 80%;
    height: 90%;
/*    border: 2px solid red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.sec5main1-title22-img {
    width: 18px;
    height: 7px;
    margin-right: 15px;
/*    border: 2px solid yellow;*/
}

.sec5main1-title22-img img {
    width: 100%;
}

.sec5main1-title2 h1 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-size: 6.5vw;
    color: #0b4251;
/*
    margin-top: 5px;
    border: 2px solid red;
*/
}

.sec5main1-title2 p{
    font-weight: 400;
    font-size: 2.6vw;
    color: #bdccd0;
    letter-spacing: 1px;
}
            
            
/*  chat shape start here*/
    
    .testimonials-section {
            width: 100%;
            /*height: 114vh;*/
            height: 900px;
            /*border: 2px solid orange;*/
            margin-top: 40px;
            
    }
            
            .chat-shape {
                padding: 14px;
                margin-bottom: 35px;
                border-radius: 18px;
/*                border: 2px solid red;*/
            }
            .chat-shape::after {
                left: 24px;
                bottom: -9px;
                width: 18px;
                height: 18px;
            }
            .chat-shape::before {
                left: 22px;
                bottom: -11px;
                width: 24px;
                height: 24px;
            }
            .top-section img {
                width: 44px;
                height: 44px;
            }
            .top-section .title {
                font-size: 5vw;
            }
    
            .top-section .location {
                font-size: 2.8vw;
            }        
    
            .comment {
                font-size: 3vw;
                /*color: red;*/
            }
            .stars {
                font-size: 1rem;
            }
    }




/*media 600px ends here*/




@media (max-width: 465px){
    
    
.testimonials-section {
            width: 100%;
            /*height: 114vh;*/
            height: 790px;
            /*border: 2px solid red;*/
            margin-top: 40px;
            
    }
    
    
}

/*media 465px end here*/


@media (max-width: 428px) {
    
    
    .testimonials-section {
            width: 100%;
            /*height: 124vh;*/
            height: 740px;
            /*border: 2px solid orange;*/
            margin-top: 20px;
            
    }
    
    .top-section .title {
                font-size: 5.5vw;
                /*color: red;*/
            }
            
    .top-section .location {
                font-size: 3vw;
                /*color: red;*/
            } 
    
    .comment {
                font-size: 3.2vw;
                /*color: red;*/
            }
            
            
.sec5main1 {
    width: 100%;
    height: auto;
    margin-top: 20px;
    /*border: 2px solid pink;*/
}
    
    
.sec5main1-title2 h1 {
    font-size: 7vw;
    color: #0b4251;

    
    /*border: 2px solid red;*/

}

.sec5main1-title2 p{
    font-size: 3vw;
    color: #bdccd0;
    /*color: red;*/
    letter-spacing: 1px;
}
    
    
    
.sec5main1-title1 p{
    font-weight: 400;
    font-size: 3.2vw;
    color: #0b4251;
    text-align: right;
}
    
    
    
    
    
    
    
    
}

/*media 428px end here*/