/*====================================================* HOME TESTIMONIAL SECTION ====================================================*/ .home-testimonial { width: 100%; background: #e4eee3; padding: 50px 0 75px; box-sizing: border-box; overflow: hidden; } /*====================================================* CONTAINER ====================================================*/ .home-testimonial-container { width: 90%; max-width: 1400px; margin: 0 auto; padding-left: 30px; box-sizing: border-box; } /*====================================================* INTRO ====================================================*/ .home-testimonial-intro { width: 100%; max-width: 760px; margin: 0 auto 60px; } /*====================================================* TITLE ====================================================*/ .home-testimonial-title { margin: 0 0 12px; color: #080808; font-family: "Poppins", sans-serif; font-size: 48px; font-weight: 600; line-height: 1.15; letter-spacing: -1.5px; } /*====================================================* DESCRIPTION ====================================================*/ .home-testimonial-description { max-width: 650px; margin: 0; color: #747878; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; } /*====================================================* SLIDER ====================================================*/ .home-testimonial-slider { width: 100%; overflow: hidden; } /*====================================================* TRACK ====================================================*/ .home-testimonial-track { display: flex; gap: 35px; width: max-content; will-change: transform; transition: transform 0.9s ease; } /*====================================================* SLIDE ====================================================*/ .home-testimonial-slide { position: relative; width: calc((min(1400px, 90vw) - 35px) / 2); height: 390px; flex: 0 0 calc((min(1400px, 90vw) - 35px) / 2); box-sizing: border-box; } /*====================================================* BACKGROUND IMAGE ====================================================*/ .home-testimonial-image { position: absolute; top: 0; left: 0; width: 78%; height: 385px; overflow: hidden; border-radius: 20px; } /*====================================================* BACKGROUND IMAGE IMG ====================================================*/ .home-testimonial-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /*====================================================* REVIEW CARD ====================================================*/ .home-testimonial-card { position: absolute; top: 67px; right: 0; width: 68%; min-height: 255px; padding: 25px 28px; box-sizing: border-box; background: #ffffff; border-radius: 20px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.04); z-index: 2; } /*====================================================* STARS ====================================================*/ .home-testimonial-stars { margin-bottom: 12px; color: #e8b32c; font-family: Arial, sans-serif; font-size: 18px; letter-spacing: 2px; } /*====================================================* REVIEW TEXT ====================================================*/ .home-testimonial-text { margin: 0; color: #747878; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; } /*====================================================* CARD DIVIDER ====================================================*/ .home-testimonial-card-divider { width: 100%; height: 1px; margin: 25px 0 20px; background: #eeeeee; } /*====================================================* CUSTOMER ====================================================*/ .home-testimonial-customer { display: flex; align-items: center; gap: 14px; } /*====================================================* CUSTOMER IMAGE ====================================================*/ .home-testimonial-customer-image { width: 52px; height: 52px; flex-shrink: 0; overflow: hidden; border-radius: 50%; } /*====================================================* CUSTOMER IMAGE IMG ====================================================*/ .home-testimonial-customer-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /*====================================================* CUSTOMER INFO ====================================================*/ .home-testimonial-customer-info { min-width: 0; } /*====================================================* CUSTOMER NAME ====================================================*/ .home-testimonial-customer-info h3 { margin: 0 0 2px; color: #080808; font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 600; line-height: 1.3; } /*====================================================* CUSTOMER DESIGNATION ====================================================*/ .home-testimonial-customer-info span { color: #747878; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.4; } /*====================================================* LARGE TABLET ====================================================*/ @media (max-width: 1200px) { .home-testimonial { padding: 75px 0 85px; } .home-testimonial-container { width: 90%; padding-left: 25px; } .home-testimonial-title { font-size: 44px; } .home-testimonial-track { gap: 30px; } .home-testimonial-slide { width: calc((90vw - 30px) / 2); flex: 0 0 calc((90vw - 30px) / 2); height: 370px; } .home-testimonial-image { width: 78%; height: 365px; } .home-testimonial-card { width: 68%; top: 60px; } } /*====================================================* TABLET / SMALL DESKTOP ====================================================*/ @media (max-width: 992px) { .home-testimonial { padding: 70px 0 80px; } .home-testimonial-container { width: 90%; padding-left: 20px; } .home-testimonial-intro { margin-bottom: 50px; } .home-testimonial-title { font-size: 40px; } .home-testimonial-description { font-size: 14px; } .home-testimonial-track { gap: 25px; } .home-testimonial-slide { width: calc((90vw - 25px) / 2); flex: 0 0 calc((90vw - 25px) / 2); height: 350px; } .home-testimonial-image { width: 76%; height: 345px; border-radius: 18px; } .home-testimonial-card { top: 55px; width: 70%; min-height: 235px; padding: 22px 24px; border-radius: 18px; } .home-testimonial-text { font-size: 13px; } .home-testimonial-customer-image { width: 48px; height: 48px; } .home-testimonial-customer-info h3 { font-size: 16px; } .home-testimonial-customer-info span { font-size: 12px; } } /*====================================================* MOBILE ====================================================*/ @media (max-width: 768px) { .home-testimonial { padding: 60px 0 70px; } .home-testimonial-container { width: 92%; max-width: none; margin: 0 auto; padding-left: 15px; padding-right: 5px; box-sizing: border-box; } /*================================================ INTRO =================================================*/ .home-testimonial-intro { width: 100%; max-width: 100%; margin: 0 0 40px; } /*================================================ TITLE =================================================*/ .home-testimonial-title { font-size: 36px; line-height: 1.2; letter-spacing: -1px; } /*================================================ DESCRIPTION =================================================*/ .home-testimonial-description { width: 100%; max-width: 100%; font-size: 13px; line-height: 1.8; } /*================================================ SLIDER =================================================*/ .home-testimonial-slider { width: 100%; overflow: hidden; } /*================================================ TRACK =================================================*/ .home-testimonial-track { gap: 20px; } /*================================================ SLIDE =================================================*/ .home-testimonial-slide { width: calc(100vw * 0.92 - 20px); flex: 0 0 calc(100vw * 0.92 - 20px); height: 370px; } /*================================================ BACKGROUND IMAGE =================================================*/ .home-testimonial-image { top: 0; left: 0; width: 78%; height: 330px; border-radius: 18px; } /*================================================ REVIEW CARD =================================================*/ .home-testimonial-card { top: 70px; right: 0; width: 72%; min-height: 235px; padding: 20px; border-radius: 18px; } /*================================================ STARS =================================================*/ .home-testimonial-stars { margin-bottom: 10px; font-size: 16px; letter-spacing: 1.5px; } /*================================================ REVIEW TEXT =================================================*/ .home-testimonial-text { font-size: 12px; line-height: 1.75; } /*================================================ DIVIDER =================================================*/ .home-testimonial-card-divider { margin: 20px 0 16px; } /*================================================ CUSTOMER =================================================*/ .home-testimonial-customer { gap: 11px; } /*================================================ CUSTOMER IMAGE =================================================*/ .home-testimonial-customer-image { width: 46px; height: 46px; } /*================================================ CUSTOMER NAME =================================================*/ .home-testimonial-customer-info h3 { font-size: 15px; } /*================================================ CUSTOMER DESIGNATION =================================================*/ .home-testimonial-customer-info span { font-size: 11px; } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { .home-testimonial { padding: 50px 0 60px; } .home-testimonial-container { width: 94%; padding-left: 10px; padding-right: 3px; } /*================================================ INTRO =================================================*/ .home-testimonial-intro { margin-bottom: 32px; } /*================================================ TITLE =================================================*/ .home-testimonial-title { font-size: 31px; line-height: 1.2; letter-spacing: -0.8px; } /*================================================ DESCRIPTION =================================================*/ .home-testimonial-description { font-size: 12px; line-height: 1.75; } /*================================================ TRACK =================================================*/ .home-testimonial-track { gap: 16px; } /*================================================ SLIDE =================================================*/ .home-testimonial-slide { width: calc(100vw * 0.94 - 16px); flex: 0 0 calc(100vw * 0.94 - 16px); height: 335px; } /*================================================ BACKGROUND IMAGE =================================================*/ .home-testimonial-image { width: 78%; height: 295px; border-radius: 16px; } /*================================================ REVIEW CARD =================================================*/ .home-testimonial-card { top: 60px; right: 0; width: 74%; min-height: 220px; padding: 18px; border-radius: 16px; } /*================================================ STARS =================================================*/ .home-testimonial-stars { font-size: 14px; letter-spacing: 1px; margin-bottom: 9px; } /*================================================ REVIEW TEXT =================================================*/ .home-testimonial-text { font-size: 11px; line-height: 1.7; } /*================================================ DIVIDER =================================================*/ .home-testimonial-card-divider { margin: 18px 0 14px; } /*================================================ CUSTOMER =================================================*/ .home-testimonial-customer { gap: 10px; } /*================================================ CUSTOMER IMAGE =================================================*/ .home-testimonial-customer-image { width: 45px; height: 45px; } /*================================================ CUSTOMER NAME =================================================*/ .home-testimonial-customer-info h3 { font-size: 14px; } /*================================================ CUSTOMER DESIGNATION =================================================*/ .home-testimonial-customer-info span { font-size: 10px; } } /*====================================================* VERY SMALL MOBILE ====================================================*/ @media (max-width: 360px) { .home-testimonial { padding: 45px 0 55px; } .home-testimonial-container { width: 95%; padding-left: 7px; padding-right: 2px; } /*================================================ TITLE =================================================*/ .home-testimonial-title { font-size: 28px; letter-spacing: -0.6px; } /*================================================ DESCRIPTION =================================================*/ .home-testimonial-description { font-size: 11px; line-height: 1.7; } /*================================================ SLIDE =================================================*/ .home-testimonial-slide { height: 315px; } /*================================================ IMAGE =================================================*/ .home-testimonial-image { width: 78%; height: 275px; border-radius: 15px; } /*================================================ CARD =================================================*/ .home-testimonial-card { top: 55px; width: 76%; min-height: 205px; padding: 16px; border-radius: 15px; } /*================================================ STARS =================================================*/ .home-testimonial-stars { font-size: 13px; letter-spacing: 0.8px; } /*================================================ TEXT =================================================*/ .home-testimonial-text { font-size: 10px; line-height: 1.65; } /*================================================ DIVIDER =================================================*/ .home-testimonial-card-divider { margin: 16px 0 12px; } /*================================================ CUSTOMER =================================================*/ .home-testimonial-customer { gap: 8px; } /*================================================ CUSTOMER IMAGE =================================================*/ .home-testimonial-customer-image { width: 40px; height: 40px; } /*================================================ CUSTOMER NAME =================================================*/ .home-testimonial-customer-info h3 { font-size: 13px; } /*================================================ CUSTOMER DESIGNATION =================================================*/ .home-testimonial-customer-info span { font-size: 9px; } }