.pricecard { @media (max-width: 600px) { width: 100%; .popular-badge { background-color: #e7f6f4; padding: 10px; display: flex; justify-content: center; align-items: center; border: 1px solid #0aa690; border-radius: 8px 8px 0 0; } .popular-badge span { color: #0aa690; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; } .price-card { display: flex; flex-direction: column; padding: 24px; background-color: #fff; border-radius: 8px; border: 1px solid #c7c9ce; gap: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .text-content { display: flex; flex-direction: column; gap: 4px; } .plan-title { text-transform: uppercase; font-family: 'DM Sans'; font-weight: 400; font-size: 18px; line-height: 24px; text-align: left; color: rgb(22, 39, 79); } .price-container { display: flex; flex-direction: row; align-items: flex-end; gap: 4px; margin-top: 18px; } .price { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 38px; line-height: 52px; letter-spacing: -0.48px; } .per-month { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 20px; line-height: 24px; margin-bottom: 8px; } .engagement { margin-top: 20px; text-transform: uppercase; font-family: DM Sans; font-weight: 400; font-size: 14px; line-height: 24px; text-align: left; color: rgb(22, 39, 79); } .start-button { width: 100%; padding: 12px 20px; border-radius: 200px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 122%; cursor: pointer; border: 1px solid; transition: background-color 0.3s ease; } .start-button:hover { background-color: #f0f0f0; } .divider { width: 100%; height: 1px; background-color: #c7c9ce; } .features-list { display: flex; flex-direction: column; gap: 4px; } .feature-item { display: flex; flex-direction: row; gap: 8px; align-items: center; border: none; } .check-icon { width: 24px; height: 24px; background: #fff; } .feature-text { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: #16274f; } .block_1 { width: 100%; float: left; margin-top: 3rem; } .block_2 { width: 90%; margin: auto; margin-bottom: auto; margin-bottom: 2rem; } .block_2_populaire { width: 90%; margin: auto; margin-bottom: auto; margin-bottom: 2rem; } .entete_pricingsection_1 { width: 100%; display: flex; flex-direction: column; padding-top: 64px; padding-right: 20px; padding-left: 20px; box-sizing: border-box; margin-bottom: 30px; } .entete_pricingsection_H1 { font-family: 'DM Sans'; font-weight: 700; font-size: 34px; letter-spacing: -0.48px; line-height: 40px; text-align: center; color: #16274f; margin-bottom: 2rem; margin-top: 1rem; } .entete_pricingsection_H1_sous_text { font-family: 'DM Sans'; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #4B5162; } .price-card-wrapper { min-width: 100%; margin: 0; } .pricinglayout_classname { width: 100%; }} @media only screen and (min-width: 601px) and (max-width: 991px) { width: 100%; margin-bottom: 2rem; .price-card-wrapper { flex: 1; min-width: 210px; display: flex; flex-direction: column; margin: 0 12px; } .popular-badge { background-color: #e7f6f4; padding: 10px; display: flex; justify-content: center; align-items: center; border: 1px solid #0aa690; border-radius: 8px 8px 0 0; } .popular-badge span { color: #0aa690; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; } .price-card { display: flex; flex-direction: column; padding: 24px; background-color: #fff; border-radius: 8px; border: 1px solid #c7c9ce; gap: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .text-content { display: flex; flex-direction: column; gap: 4px; } .plan-title { text-transform: uppercase; font-family: 'DM Sans'; font-weight: 400; font-size: 18px; line-height: 24px; text-align: left; color: rgb(22, 39, 79); } .price-container { display: flex; flex-direction: row; align-items: flex-end; gap: 4px; margin-top: 18px; } .price { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 30px; line-height: 52px; letter-spacing: -0.48px; } .per-month { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 20px; line-height: 24px; margin-bottom: 8px; } .engagement { margin-top: 20px; text-transform: uppercase; font-family: DM Sans; font-weight: 400; font-size: 14px; line-height: 24px; text-align: left; color: rgb(22, 39, 79); } .start-button { width: 100%; padding: 12px 2px; border-radius: 200px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 12px; line-height: 122%; cursor: pointer; border: 1px solid; transition: background-color 0.3s ease; } .start-button:hover { background-color: #f0f0f0; } .divider { width: 100%; height: 1px; background-color: #c7c9ce; } .features-list { display: flex; flex-direction: column; gap: 4px; } .feature-item { display: flex; flex-direction: row; gap: 8px; align-items: center; border: none; padding: 2px; } .check-icon { width: 24px; height: 24px; background: #fff; } .feature-text { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: #16274f; text-align: left; } .block_1 { width: 100%; float: left; margin-top: 3rem; flex-direction: row; display: flex; align-items: center; justify-content: center } .block_2 { float: left; width: 30%; } .block_2_populaire { float: left; width: 30%; margin-top: -50px; } .entete_pricingsection_1 { width: 100%; display: flex; flex-direction: column; padding-top: 64px; padding-right: 24px; padding-left: 24px; box-sizing: border-box; margin-bottom: 64px; } .entete_pricingsection_H1 { font-family: 'DM Sans'; font-weight: 700; font-size: 36px; letter-spacing: -0.48px; line-height: 52px; text-align: center; color: #16274f; margin-top: 2rem; margin-bottom: 2rem; } .entete_pricingsection_H1_sous_text { font-family: 'DM Sans'; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #4B5162; margin-bottom: 2rem; } .pricinglayout_classname { width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { width: 100%; margin-bottom: 2rem; .price-card-wrapper { flex: 1; min-width: 250px; display: flex; flex-direction: column; margin: 0 12px; } .popular-badge { background-color: #e7f6f4; padding: 10px; display: flex; justify-content: center; align-items: center; border: 1px solid #0aa690; border-radius: 8px 8px 0 0; } .popular-badge span { color: #0aa690; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; } .price-card { display: flex; flex-direction: column; padding: 24px; background-color: #fff; border-radius: 8px; border: 1px solid #c7c9ce; gap: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .text-content { display: flex; flex-direction: column; gap: 4px; } .plan-title { text-transform: uppercase; font-family: 'DM Sans'; font-weight: 400; font-size: 18px; line-height: 24px; text-align: left; color: rgb(22, 39, 79); } .price-container { display: flex; flex-direction: row; align-items: flex-end; gap: 4px; margin-top: 18px; } .price { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 40px; line-height: 52px; letter-spacing: -0.48px; } .per-month { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 20px; line-height: 24px; margin-bottom: 8px; } .engagement { margin-top: 20px; text-transform: uppercase; font-family: DM Sans; font-weight: 400; font-size: 14px; line-height: 24px; text-align: left; color: rgb(22, 39, 79); } .start-button { width: 100%; padding: 12px 10px; border-radius: 200px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 122%; cursor: pointer; border: 1px solid; transition: background-color 0.3s ease; } .start-button:hover { background-color: #f0f0f0; } .divider { width: 100%; height: 1px; background-color: #c7c9ce; } .features-list { display: flex; flex-direction: column; gap: 4px; } .feature-item { display: flex; flex-direction: row; gap: 8px; align-items: center; border: none; padding: 2px; } .check-icon { width: 24px; height: 24px; background: #fff; } .feature-text { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: #16274f; text-align: left; } .block_1 { width: 100%; float: left; margin-top: 3rem; flex-direction: row; display: flex; align-items: center; justify-content: center } .block_2 { float: left; width: 30%; } .block_2_populaire { float: left; width: 30%; margin-top: -50px; } .entete_pricingsection_1 { width: 100%; display: flex; flex-direction: column; padding-top: 64px; padding-right: 24px; padding-left: 24px; box-sizing: border-box; margin-bottom: 64px; } .entete_pricingsection_H1 { font-family: 'DM Sans'; font-weight: 700; font-size: 40px; letter-spacing: -0.48px; line-height: 52px; text-align: center; color: #16274f; margin-bottom: 2rem; } .entete_pricingsection_H1_sous_text { font-family: 'DM Sans'; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #4B5162; margin-bottom: 2rem; } .pricinglayout_classname { width: 100%; } } @media only screen and (min-width: 1200px) { width: 90%; margin-left: 5%; margin-bottom: 2rem; .price-card-wrapper { flex: 1; min-width: 250px; display: flex; flex-direction: column; margin: 0 12px; } .popular-badge { background-color: #e7f6f4; padding: 10px; display: flex; justify-content: center; align-items: center; border: 1px solid #0aa690; border-radius: 8px 8px 0 0; } .popular-badge span { color: #0aa690; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; } .price-card { display: flex; flex-direction: column; padding: 24px; background-color: #fff; border-radius: 8px; border: 1px solid #c7c9ce; gap: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .text-content { display: flex; flex-direction: column; gap: 4px; } .plan-title { text-transform: uppercase; font-family: 'DM Sans'; font-weight: 400; font-size: 18px; line-height: 24px; text-align: left; color: rgb(22, 39, 79); } .price-container { display: flex; flex-direction: row; align-items: flex-end; gap: 4px; margin-top: 18px; } .price { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 48px; line-height: 52px; letter-spacing: -0.48px; } .per-month { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 20px; line-height: 24px; margin-bottom: 8px; } .engagement { margin-top: 20px; text-transform: uppercase; font-family: DM Sans; font-weight: 400; font-size: 14px; line-height: 24px; text-align: left; color: rgb(22, 39, 79); } .start-button { width: 100%; padding: 12px 10px; border-radius: 200px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 122%; cursor: pointer; border: 1px solid; transition: background-color 0.3s ease; } .start-button:hover { background-color: #f0f0f0; } .divider { width: 100%; height: 1px; background-color: #c7c9ce; } .features-list { display: flex; flex-direction: column; gap: 4px; } .feature-item { display: flex; flex-direction: row; gap: 8px; align-items: center; border: none; } .check-icon { width: 24px; height: 24px; background: #fff; } .feature-text { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: #16274f; text-align: left; } .block_1 { width: 100%; float: left; margin-top: 3rem; } .block_2 { float: left; width: 30%; } .block_2_populaire { float: left; width: 30%; margin-top: -50px; } .entete_pricingsection_1 { width: 100%; display: flex; flex-direction: column; padding-top: 64px; padding-right: 64px; padding-left: 64px; box-sizing: border-box; margin-bottom: 24px; } .entete_pricingsection_H1 { font-family: 'DM Sans'; font-weight: 700; font-size: 40px; letter-spacing: -0.48px; line-height: 52px; text-align: center; color: #16274f; } .entete_pricingsection_H1_sous_text { font-family: 'DM Sans'; font-weight: 400; font-size: 20px; line-height: 24px; text-align: center; color: #4B5162; margin-bottom: 2rem; } .pricinglayout_classname { width: 90%; margin-left: 5%; } } /* end media*/ }