.lp-main-cover-slide { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 25px 10px; gap: 15px; } .lp-main-cover-slide-text-container { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 15px; width: 200px; } .lp-main-cover-slide-text-title { color: #02114A; font-family: Space Grotesk; font-size: 20px; text-align: start; } .lp-main-cover-slide-text-subtitle { color: #000000CF; font-family: Space Grotesk; font-size: 14px; } .lp-main-cover-slide-action-button { background-color: #02114A; color: white; border-radius: 3px; padding: 5px 20px; font-size: 13px; font-family: Space Grotesk; cursor: pointer; } .lp-main-cover-slide-art-container { display: inline; } .lp-main-cover-slide-art-image { height: 150px; width: 216px; object-fit: cover; } .lp-main-cover-slide-art-detail { width: 20px; height: 20px; background-color: #02114A; border-radius: 100%; margin-top: -20px; margin-left: 5px; } /* Desktop view */ @media only screen and (min-width: 750px) { .lp-main-cover-slide-text-container { gap: 20px; width: 300px; } .lp-main-cover-slide-art-detail { width: 40px; height: 40px; margin-top: -40px; margin-left: 10px; } .lp-main-cover-slide-art-image { height: 300px; width: 433px; } .lp-main-cover-slide-text-title { font-size: 34px; } .lp-main-cover-slide-text-subtitle { font-size: medium; } .lp-main-cover-slide-action-button { border-radius: 5px; padding: 10px 25px; font-size: 16px; margin-top: 20px; } } @media only screen and (min-width: 1200px) { .lp-main-cover-slide-text-container { gap: 35px; width: 400px; } .lp-main-cover-slide-art-detail { width: 55px; height: 55px; margin-top: -55px; margin-left: 20px; } .lp-main-cover-slide-art-image { height: 420px; width: 605px; } .lp-main-cover-slide-text-title { font-size: 45px; } .lp-main-cover-slide-text-subtitle { font-size: 20px; } .lp-main-cover-slide-action-button { border-radius: 10px; padding: 12px 35px; font-size: 24px; margin-top: 30px; } } /* SECOND COVER SLIDE */ .lp-second-cover-slide-container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .lp-second-cover-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 350px; gap: 7px; margin-top: 40px; } .lp-second-cover-slide-title { font-family: Space Grotesk; font-size: 18px; color: #02114A; text-align: center; font-weight: bold; } .lp-second-cover-slide-subtitle { font-family: Space Grotesk; font-size: 13px; color: #000000CF; text-align: center; } .lp-second-cover-slide-card-container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; } .lp-second-cover-slide-card { width: 180px; height: 275px; background-color: white; box-shadow: 7.488px 7.488px 14.976px rgba(0, 0, 0, 0.05); border: 0.312px solid #D3D3D3; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0px 10px; } .lp-second-cover-slide-card-image { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 40px; width: 50px; height: 50px; object-fit: cover; } .lp-second-cover-slide-card-text-title { margin-top: 13px; font-family: Space Grotesk; font-size: 16px; color: #000000; font-weight: 500; text-align: center; } .lp-second-cover-slide-card-text-subtitle { font-family: Space Grotesk; font-size: 12px; color: #3b3b3b; font-weight: 200; text-align: center; } /* Desktop view */ @media only screen and (min-width: 750px) { .lp-second-cover-slide { width: 500px; gap: 7px; } .lp-second-cover-slide-title { font-size: 28px; } .lp-second-cover-slide-subtitle { font-size: medium; } .lp-second-cover-slide-card-container { gap: 20px; margin-top: 20px; } .lp-second-cover-slide-card { width: 210px; height: 320px; gap: 10px; padding: 0px 20px; } .lp-second-cover-slide-card-image { font-size: 50px; width: 60px; height: 60px; } .lp-second-cover-slide-card-text-title { margin-top: 13px; font-size: 19px; } .lp-second-cover-slide-card-text-subtitle { font-size: 13px; } } @media only screen and (min-width: 1200px) { .lp-second-cover-slide { width: 600px; gap: 10px; } .lp-second-cover-slide-title { font-size: 39px; } .lp-second-cover-slide-subtitle { font-size: 20px; } .lp-second-cover-slide-card-container { gap: 35px; margin-top: 20px; } .lp-second-cover-slide-card { width: 270px; height: 380px; gap: 10px; padding: 0px 25px; } .lp-second-cover-slide-card-image { font-size: 64px; width: 70px; height: 70px; } .lp-second-cover-slide-card-text-title { margin-top: 30px; font-size: 21px; } .lp-second-cover-slide-card-text-subtitle { font-size: 14px; } } /* Testimonials Section */ .lp-testimonials-section { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-top: 50px; } .lp-testimonials-section-cards-container { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 20px; margin-top: 20px; padding: 0px 10px; } .lp-testimonials-section-card { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 10px; padding: 5px 15px; background-color: white; height: 125px; width: 250px; border-radius: 5px; } .lp-testimonials-section-card-title { font-size: 17px; font-family: Space Grotesk; color: #000000; font-weight: bold; } .lp-testimonials-section-card-subtitle { font-size: 9px; font-family: Space Grotesk; color: #000000; font-weight: 500; } .lp-testimonials-section-card-description { font-size: 12px; font-family: Space Grotesk; color: #3b3b3b; font-weight: normal; text-align: start; } /* Desktop view */ @media only screen and (min-width: 750px) { .lp-testimonials-section-card { gap: 12px; padding: 10px 30px; height: 160px; width: 300px; } .lp-testimonials-section-card-title { font-size: 19px; } .lp-testimonials-section-card-subtitle { font-size: 10px; } .lp-testimonials-section-card-description { font-size: 13px; } } @media only screen and (min-width: 1200px) { .lp-testimonials-section-card { gap: 15px; padding: 14px 40px; height: 200px; width: 350px; } .lp-testimonials-section-card-title { font-size: 20px; } .lp-testimonials-section-card-subtitle { font-size: 11px; } .lp-testimonials-section-card-description { font-size: 14px; } }