/*====================================================* HOME FAQ & TESTIMONIALS ====================================================*/ .home-faq-testimonial { width: 100%; padding: 80px 0 85px; background: #ffffff; box-sizing: border-box; overflow: hidden; } /*====================================================* MAIN CONTAINER ====================================================*/ .home-faq-testimonial-container { width: 100%; max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 75px; box-sizing: border-box; } /*====================================================* FAQ SECTION ====================================================*/ .home-faq-section { width: 100%; min-width: 0; box-sizing: border-box; } /*====================================================* TESTIMONIAL SECTION ====================================================*/ .home-testimonial-section { width: 100%; min-width: 0; box-sizing: border-box; } /*====================================================* COMMON HEADING ====================================================*/ .home-faq-heading h2, .home-testimonial-heading h2 { margin: 0; color: #1f2d3a; font-family: "Poppins", sans-serif; font-size: 25px; font-weight: 400; line-height: 1.2; } /*====================================================* HEADING SPACING ====================================================*/ .home-faq-heading, .home-testimonial-heading { margin-bottom: 48px; } /*====================================================* FAQ LIST ====================================================*/ .home-faq-list { width: 100%; } /*====================================================* FAQ ITEM ====================================================*/ .home-faq-item { width: 100%; margin-bottom: 17px; box-sizing: border-box; } /*====================================================* FAQ QUESTION ====================================================*/ .home-faq-question { width: 100%; min-height: 55px; padding: 0 20px; display: flex; align-items: center; gap: 20px; border: none; background: #eeeeee; color: #1f2d3a; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; box-sizing: border-box; } /*====================================================* FAQ ICON ====================================================*/ .home-faq-icon { width: 21px; height: 21px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; color: #df2929; } /*====================================================* FAQ ICON FONT ====================================================*/ .home-faq-icon i { font-size: 14px; } /*====================================================* FAQ TEXT ====================================================*/ .home-faq-question-text { flex: 1; min-width: 0; } /*====================================================* FAQ ANSWER ====================================================*/ .home-faq-answer { width: 100%; max-height: 0; overflow: hidden; padding: 0 62px; box-sizing: border-box; transition: max-height 0.4s ease, padding 0.4s ease; } /*====================================================* ACTIVE ANSWER ====================================================*/ .home-faq-question.active+.home-faq-answer { max-height: 250px; padding: 20px 62px 24px; } /*====================================================* FAQ ANSWER TEXT ====================================================*/ .home-faq-answer p { margin: 0; color: #687581; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.7; } /*====================================================* TESTIMONIAL SLIDER ====================================================*/ .home-testimonial-slider { width: 100%; height: 472px; overflow: hidden; box-sizing: border-box; } /*====================================================* TESTIMONIAL TRACK 4 CARDS CARD 1 CARD 2 CARD 3 CARD 4 VERTICAL DIRECTION ====================================================*/ .home-testimonial-track { width: 100%; height: 976px; display: flex; flex-direction: column; flex-wrap: nowrap; transition: transform 0.6s ease; box-sizing: border-box; } /*====================================================* TESTIMONIAL CARD ====================================================*/ .home-testimonial-card { flex: 0 0 220px; width: 100%; height: 220px; min-height: 220px; padding: 27px 28px 25px; margin: 0 0 32px; background: #eeeeee; border: 1px solid #dddddd; box-sizing: border-box; overflow: hidden; } /*====================================================* CARD TOP ====================================================*/ .home-testimonial-top { width: 100%; display: flex; align-items: center; gap: 18px; margin-bottom: 20px; box-sizing: border-box; } /*====================================================* TESTIMONIAL IMAGE ====================================================*/ .home-testimonial-image { width: 66px; height: 66px; flex-shrink: 0; overflow: hidden; border-radius: 50%; } /*====================================================* TESTIMONIAL IMAGE ====================================================*/ .home-testimonial-image img { width: 100%; height: 100%; display: block; object-fit: cover; } /*====================================================* PERSON ====================================================*/ .home-testimonial-person { min-width: 0; display: flex; align-items: center; gap: 20px; overflow: hidden; } /*====================================================* PERSON NAME ====================================================*/ .home-testimonial-person h3 { margin: 0; color: #182b3a; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 500; white-space: nowrap; } /*====================================================* PERSON ROLE ====================================================*/ .home-testimonial-person span { color: #687581; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 400; white-space: nowrap; } /*====================================================* TESTIMONIAL CONTENT ====================================================*/ .home-testimonial-content { width: 100%; min-width: 0; } /*====================================================* TESTIMONIAL TEXT ====================================================*/ .home-testimonial-content p { width: 100%; margin: 0; color: #687581; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.7; white-space: normal; overflow-wrap: break-word; } /*====================================================* TESTIMONIAL DOTS ====================================================*/ .home-testimonial-dots { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; } /*====================================================* DOT ====================================================*/ .home-testimonial-dot { width: 16px; height: 16px; padding: 0; border: none; border-radius: 50%; background: #f5caca; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } /*====================================================* ACTIVE DOT ====================================================*/ .home-testimonial-dot.active { background: #d92828; transform: scale(1.05); } /*====================================================* DOT HOVER ====================================================*/ .home-testimonial-dot:hover { background: #d92828; } /*====================================================* TABLET ====================================================*/ @media (max-width: 1100px) { .home-faq-testimonial { padding: 70px 30px 75px; } .home-faq-testimonial-container { max-width: 100%; column-gap: 40px; } .home-faq-heading h2, .home-testimonial-heading h2 { font-size: 23px; } .home-faq-question { font-size: 13px; } .home-testimonial-card { padding: 25px 22px; } .home-testimonial-person { gap: 12px; } .home-testimonial-person h3 { font-size: 13px; } .home-testimonial-person span { font-size: 12px; } .home-testimonial-content p { font-size: 13px; } } /*====================================================* MOBILE ====================================================*/ @media (max-width: 768px) { .home-faq-testimonial { padding: 55px 20px 65px; } .home-faq-testimonial-container { display: flex; flex-direction: column; gap: 65px; width: 100%; } /*---------------------------------------------- HEADINGS ----------------------------------------------*/ .home-faq-heading, .home-testimonial-heading { margin-bottom: 30px; } .home-faq-heading h2, .home-testimonial-heading h2 { font-size: 22px; } /*---------------------------------------------- FAQ ----------------------------------------------*/ .home-faq-question { min-height: 55px; padding: 0 15px; gap: 12px; font-size: 12px; } .home-faq-answer { padding: 0 48px; } .home-faq-question.active+.home-faq-answer { padding: 18px 48px 22px; } .home-faq-answer p { font-size: 12px; line-height: 1.7; } /*---------------------------------------------- TESTIMONIAL SLIDER ----------------------------------------------*/ .home-testimonial-slider { width: 100%; height: 245px; overflow: hidden; } /*---------------------------------------------- TESTIMONIAL TRACK ----------------------------------------------*/ .home-testimonial-track { width: 100%; height: auto; display: flex; flex-direction: column; transition: transform 0.6s ease; } /*---------------------------------------------- ONE CARD ON MOBILE ----------------------------------------------*/ .home-testimonial-card { flex: 0 0 245px; width: 100%; height: 245px; min-height: 245px; padding: 25px 20px; margin: 0 0 20px; } /*---------------------------------------------- CARD TOP ----------------------------------------------*/ .home-testimonial-top { gap: 15px; margin-bottom: 18px; } /*---------------------------------------------- IMAGE ----------------------------------------------*/ .home-testimonial-image { width: 58px; height: 58px; } /*---------------------------------------------- PERSON ----------------------------------------------*/ .home-testimonial-person { display: block; min-width: 0; } .home-testimonial-person h3 { font-size: 13px; margin-bottom: 4px; } .home-testimonial-person span { font-size: 11px; } /*---------------------------------------------- CONTENT ----------------------------------------------*/ .home-testimonial-content p { font-size: 12px; line-height: 1.7; } /*---------------------------------------------- DOTS ----------------------------------------------*/ .home-testimonial-dots { margin-top: 25px; } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { .home-faq-testimonial { padding: 45px 16px 55px; } .home-faq-testimonial-container { gap: 55px; } .home-faq-heading h2, .home-testimonial-heading h2 { font-size: 20px; } .home-faq-question { min-height: 52px; padding: 0 12px; font-size: 11px; } .home-faq-icon { width: 18px; } .home-faq-answer { padding: 0 42px; } .home-faq-question.active+.home-faq-answer { padding: 16px 42px 20px; } .home-faq-answer p { font-size: 11px; } .home-testimonial-slider { height: 245px; } .home-testimonial-card { flex: 0 0 245px; width: 100%; height: 245px; min-height: 245px; padding: 22px 16px; } .home-testimonial-image { width: 52px; height: 52px; } .home-testimonial-person h3 { font-size: 12px; } .home-testimonial-person span { font-size: 10px; } .home-testimonial-content p { font-size: 11px; } .home-testimonial-dot { width: 15px; height: 15px; } } /*====================================================* VERY SMALL MOBILE ====================================================*/ @media (max-width: 360px) { .home-faq-testimonial { padding: 40px 14px 50px; } .home-faq-heading h2, .home-testimonial-heading h2 { font-size: 19px; } .home-faq-question { font-size: 10px; } .home-testimonial-slider { height: 250px; } .home-testimonial-card { flex: 0 0 250px; height: 250px; min-height: 250px; padding: 20px 14px; } .home-testimonial-content p { font-size: 10px; } } /*====================================================* HOME EDUCATION NEWS ====================================================*/ .home-education-news { width: 100%; min-height: 275px; background: #222222; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } /*====================================================* CONTAINER ====================================================*/ .home-education-news-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 58px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box; } /*====================================================* MAIN HEADING ====================================================*/ .home-education-news-container h2 { margin: 0; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 27px; font-weight: 500; line-height: 1.35; } /*====================================================* RED HEADING TEXT ====================================================*/ .home-education-news-container h2 span { color: #d92828; } /*====================================================* SUB HEADING ====================================================*/ .home-education-news-container p { margin: 12px 0 0; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 500; line-height: 1.5; } /*====================================================* CONTACT BUTTON ====================================================*/ .home-education-news-button { width: 287px; height: 56px; margin-top: 46px; display: flex; justify-content: center; align-items: center; background: #d92323; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 500; text-decoration: none; box-sizing: border-box; transition: background 0.3s ease; } /*====================================================* BUTTON HOVER ====================================================*/ .home-education-news-button:hover { background: #b91c1c; } /*====================================================* TABLET ====================================================*/ @media (max-width: 1100px) { .home-education-news-container { padding: 55px 30px; } .home-education-news-container h2 { font-size: 24px; } .home-education-news-container p { font-size: 15px; } } /*====================================================* MOBILE ====================================================*/ @media (max-width: 768px) { .home-education-news { min-height: 260px; } .home-education-news-container { padding: 50px 20px; } .home-education-news-container h2 { font-size: 20px; line-height: 1.45; } .home-education-news-container p { margin-top: 12px; font-size: 13px; line-height: 1.6; } .home-education-news-button { width: 250px; height: 52px; margin-top: 35px; font-size: 14px; } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { .home-education-news { min-height: 270px; } .home-education-news-container { padding: 45px 16px; } .home-education-news-container h2 { font-size: 17px; } .home-education-news-container p { font-size: 12px; } .home-education-news-button { width: 220px; height: 50px; margin-top: 30px; font-size: 13px; } }