html{
scroll-behavior:smooth
}
body {
margin: 0;
padding: 0;
line-height: normal;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
.logo-icon {
position: relative;
width: 150px;
height: 50px;
flex-shrink: 0;
}
.patient-b {
position: relative;
line-height: 150%;
display: inline-block;
width: 100%;
}
.link-nav-hover{
text-decoration: none;
color: rgb(74, 74, 74);
font-weight: 600;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.link-nav-hover:hover{
color: BLACK;
}
.patient-b input{
width: 90%;
border: none;
background-color:transparent;
font-family: 'Open Sans';
}
.patient-b input:focus {
outline-width: 0;
}
input:focus {
outline-width: 0;
}
.button-div,
.links-div {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.button-div {
border-radius: var(--br-md);
background-color: var(--greys-white);
padding: var(--padding-md) var(--padding-xl);
box-sizing: border-box;
}
.links-div {
gap: var(--gap-md);
}
.label1 {
position: relative;
font-size: var(--body-regular-regular-size);
line-height: 150%;
display: inline-block;
font-family: var(--body-large-regular);
color: var(--color-white);
text-align: left;
}
.button {
cursor: pointer;
border: 0;
padding: var(--padding-md) var(--padding-xl);
background-color: var(--primary);
border-radius: var(--br-md);
box-sizing: border-box;
align-items: flex-start;
justify-content: flex-start;
}
.button,
.cta-div,
.header-div {
display: flex;
flex-direction: row;
}
.cta-div {
align-items: flex-start;
justify-content: flex-start;
gap: var(--gap-md);
color: var(--greys-black);
}
.header-div {
width: 100%;
padding: var(--padding-lg) 100px;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
}
.bg2{
position: absolute;
width: 120%;
height: 44%;
bottom: 0;
rotate: 180deg;
}
.vector-1-stroke {
position: absolute;
margin: 0 !important;
top: 548px;
left: 0;
width: 158%;
height: 1475.72px;
flex-shrink: 0;
z-index: 0;
}
.la-mdecine {
margin-block-start: 0;
margin-block-end: 0;
}
.porte-de-tous {
margin: 0;
}
.la-mdecine-porte-de-tous {
position: relative;
font-weight: 900;
font-family: var(--headline-h1);
display: inline-block;
width: 514px;
}
.accdez-une-grande-communaut {
position: relative;
font-size: var(--body-large-regular-size);
line-height: 150%;
display: inline-block;
width: 514px;
}
.form-div {
border-radius: var(--br-md);
background-color: var(--greys-white);
box-shadow: 0 39px 11px transparent, 0 25px 10px rgba(23, 23, 28, 0.01),
0 14px 8px rgba(23, 23, 28, 0.05), 0 6px 6px rgba(23, 23, 28, 0.09),
0 2px 3px rgba(23, 23, 28, 0.1), 0 0 0 rgba(23, 23, 28, 0.1);
border: 1px solid var(--greys-lighter);
box-sizing: border-box;
width: 413px;
display: flex;
flex-direction: row;
padding: var(--padding-2xs) var(--padding-2xs) var(--padding-2xs)
var(--padding-lg);
align-items: center;
justify-content: space-between;
font-size: var(--body-small-regular-size);
color: #bfbfc8;
}
.content-div {
position: relative;
width: 50%;
display: flex;
padding-left: 11%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--gap-md);
}
.imagedoc-icon,
.rectangle-icon {
position: absolute;
top: 0.63px;
left: 52.63px;
width: 500.36px;
height: 500.36px;
}
.imagedoc-icon {
width: 572px;
height: 572px;
left: 42px;
top: -59px;
object-fit: cover;
}
.matin-b {
position: relative;
display: inline-block;
}
.chip-div,
.column-04-div {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.column-04-div {
width: 72.49px;
flex-shrink: 0;
flex-direction: column;
gap: 16.83px;
}
.chip-div {
border-radius: var(--br-sm);
background-color: var(--greys-lighter);
flex-direction: row;
padding: var(--padding-3xs) var(--padding-xs);
box-sizing: border-box;
}
.column-03-div {
flex-direction: column;
align-items: center;
gap: var(--gap-xs);
color: var(--greys-medium);
}
.chip-div2,
.column-02-div,
.column-03-div,
.sort-div {
display: flex;
justify-content: flex-start;
}
.chip-div2 {
border-radius: var(--br-sm);
background-color: var(--tint-tertiary);
flex-direction: row;
padding: var(--padding-3xs) var(--padding-xs);
box-sizing: border-box;
align-items: flex-start;
}
.column-02-div,
.sort-div {
align-items: center;
}
.column-02-div {
flex-direction: column;
gap: var(--gap-xs);
}
.sort-div {
position: absolute;
top: 320.1px;
left: 254px;
border-radius: 5.18px;
background-color: var(--greys-white);
box-shadow: 0 76.36982727050781px 21.36px transparent,
0 48.54014587402344px 19.42px rgba(23, 23, 28, 0.01),
0 27.18248176574707px 16.18px rgba(23, 23, 28, 0.05),
0 12.296836853027344px 12.3px rgba(23, 23, 28, 0.09),
0 3.2360098361968994px 6.47px rgba(23, 23, 28, 0.1),
0 0 0 rgba(23, 23, 28, 0.1);
border: 0.6px solid var(--greys-lighter);
box-sizing: border-box;
flex-direction: row;
padding: 20.71046257019043px;
gap: 5.18px;
}
.clinic-1-icon {
position: absolute;
top: 0;
left: 0;
width: 101px;
height: 150px;
object-fit: cover;
}
.image-div {
position: relative;
border-radius: var(--br-lg);
background-color: var(--greys-white);
width: 100px;
height: 100px;
flex-shrink: 0;
overflow: hidden;
z-index: 0;
}
.clinique-sant-div {
position: relative;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 800;
display: inline-block;
z-index: 1;
}
.frame-select {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
z-index: 2;
}
.circle-check-1-icon {
position: absolute;
margin: 0 !important;
top: 34px;
left: 124px;
border-radius: var(--br-lg);
width: 23px;
height: 23px;
flex-shrink: 0;
overflow: hidden;
z-index: 3;
}
.card-div {
position: absolute;
top: 75px;
left: 0;
border-radius: var(--br-md);
background-color: var(--greys-white);
box-shadow: 0 196px 55px transparent, 0 126px 50px rgba(23, 23, 28, 0.01),
0 71px 42px rgba(23, 23, 28, 0.05), 0 31px 31px rgba(23, 23, 28, 0.09),
0 8px 17px rgba(23, 23, 28, 0.1), 0 0 0 rgba(23, 23, 28, 0.1);
border: 1px solid var(--greys-lighter);
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 32px;
align-items: center;
justify-content: flex-start;
gap: var(--gap-sm);
font-size: var(--font-size-xs);
color: var(--primary);
}
.vector-icon {
position: absolute;
height: 65.87%;
width: 54.13%;
top: 20.97%;
right: 34.49%;
bottom: 12.16%;
left: 20.37%;
max-width: 100%;
overflow: hidden;
max-height: 100%;
}
.div {
position: relative;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 800;
display: inline-block;
font-size:16px;
}
.bell-div,
.icon-div {
position: absolute;
box-sizing: border-box;
}
.icon-div {
height: 33.74%;
width: 33.74%;
top: -6.46%;
right: 0.62%;
bottom: 72.72%;
left: 65.64%;
border-radius: 56.89px;
background-color: #e0635b;
display: flex;
flex-direction: column;
padding: 5.6892924308776855px;
align-items: center;
justify-content: center;
}
.bell-div {
top: 46px;
left: 420.06px;
border-radius: 83.13px;
background-color: var(--greys-white);
box-shadow: 0 100.71070098876953px 28.26px transparent,
0 64.74258422851562px 25.69px rgba(23, 23, 28, 0.01),
0 36.48193359375px 21.58px rgba(23, 23, 28, 0.05),
0 15.928732872009277px 15.93px rgba(23, 23, 28, 0.09),
0 4.110640525817871px 8.74px rgba(23, 23, 28, 0.1),
0 0 0 rgba(23, 23, 28, 0.1);
border: 0.1px solid var(--greys-lighter);
width: 50.09px;
height: 50.09px;
transform: rotate(8.11deg);
transform-origin: 0 0;
font-size: 13.65px;
color: var(--greys-white);
}
.hero-image-div {
position: relative;
width: 41%;
height: 501px;
flex-shrink: 0;
font-size: var(--font-size-2xs);
color: var(--greys-black);
margin-left: 3%;
}
.section-hero-div {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 155px;
z-index: 1;
}
.pour-les-tudiants-en-mdecine {
position: relative;
font-weight: 900;
display: inline-block;
width: 514px;
}
.en-contact-avec-votre-universi,
.label3 {
position: relative;
font-size: var(--body-regular-regular-size);
line-height: 150%;
display: inline-block;
font-family: var(--body-large-regular);
}
.en-contact-avec-votre-universi {
width: 514px;
}
.label3 {
color: var(--primary);
text-align: left;
}
.button2,
.content-div1 {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.button2 {
cursor: pointer;
border: 2px solid var(--primary);
padding: var(--padding-md) var(--padding-xl);
background-color: var(--greys-white);
border-radius: var(--br-md);
box-sizing: border-box;
flex-direction: row;
}
.button2:hover{
background-color: var(--primary);
transition: .25s ease-in-out;
}
.button2:hover .label3{
color:white;
transition: .25s ease-in-out;
}
.content-div1 {
flex-direction: column;
gap: var(--gap-lg);
}
.phone-icon {
width: 100%;
height: 100%;
object-fit: cover;
}
.imagephone-div {
align-self: stretch;
position: relative;
border-radius: var(--br-md);
background-color: var(--greys-white);
height: 190px;
flex-shrink: 0;
overflow: hidden;
}
.card-content-div,
.card-div1,
.text-select {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.text-select {
width: 246px;
}
.card-content-div,
.card-div1 {
box-sizing: border-box;
gap: var(--gap-sm);
}
.card-content-div {
align-self: stretch;
padding: var(--padding-md) var(--padding-2xl);
}
.card-div1 {
border-radius: var(--br-md);
background-color: var(--greys-white);
box-shadow: 0 196px 55px transparent, 0 126px 50px rgba(23, 23, 28, 0.01),
0 71px 42px rgba(23, 23, 28, 0.05), 0 31px 31px rgba(23, 23, 28, 0.09),
0 8px 17px rgba(23, 23, 28, 0.1), 0 0 0 rgba(23, 23, 28, 0.1);
border: 1px solid var(--greys-lighter);
width: 340px;
height: 340px;
flex-shrink: 0;
padding: var(--padding-sm)+8px;
}
.magdiel-lagos-7hjh-x3xsda-unsp-icon {
position: absolute;
top: 0;
left: 0;
width: 287px;
height: 430px;
object-fit: cover;
}
.cards-div,
.section-div {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.cards-div {
align-items: flex-start;
gap: 21px;
text-align: center;
font-size: var(--font-size-xs);
color: var(--primary);
font-family: var(--body-large-regular);
}
.section-div {
align-items: center;
gap: var(--gap-xl);
z-index: 2;
font-size: var(--headline-h2-size);
font-family: var(--headline-h1);
}
.span {
font-size: 36px;
}
.div1,
.rapidit-div {
position: relative;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
}
.rapidit-div {
font-size: var(--font-size-xs);
letter-spacing: 0.1em;
font-weight: 800;
color: var(--primary);
font-size: 16px;
}
.card-content-div2 {
align-self: stretch;
flex-direction: column;
padding: var(--padding-md) var(--padding-2xl) var(--padding-2xl);
box-sizing: border-box;
align-items: center;
gap: var(--gap-sm);
}
.card-content-div2,
.card-div3,
.cards-div1,
.content-div2 {
display: flex;
justify-content: flex-start;
}
.card-div3 {
border-radius: var(--br-md);
background-color: var(--greys-white);
box-shadow: 0 196px 55px transparent, 0 126px 50px rgba(23, 23, 28, 0.01),
0 71px 42px rgba(23, 23, 28, 0.05), 0 31px 31px rgba(23, 23, 28, 0.09),
0 8px 17px rgba(23, 23, 28, 0.1), 0 0 0 rgba(23, 23, 28, 0.1);
border: 1px solid var(--greys-lighter);
box-sizing: border-box;
/* width: 262px; */
width: 368px;
height: 368px;
flex-shrink: 0;
flex-direction: column;
padding: var(--padding-sm);
align-items: center;
}
.cards-div1,
.content-div2 {
flex-direction: row;
align-items: flex-start;
}
.content-div2 {
flex-direction: column;
gap: var(--gap-lg);
text-align: left;
font-size: var(--headline-h2-size);
color: var(--color-black);
font-family: var(--headline-h1);
}
.body-div,
.desktop-div,
.section-div1 {
display: flex;
align-items: center;
justify-content: flex-start;
}
.bg-white {
width: 100%;
background: white;
display: flex;
flex-direction: row;
justify-content: center;
}
.section-div1 {
flex-direction: row;
gap: var(--gap-xl);
z-index: 3;
text-align: center;
/* font-size: 64px; */
font-size: 128px;
color: var(--greys-black);
}
.section-div1 .description_cards p {
font-size:16px;
}
.body-div,
.desktop-div {
flex-direction: column;
position: relative;
gap: 168px;
font-size: var(--headline-h1-size);
}
.desktop-div {
background-color: var(--greys-white);
width: 100%;
overflow: hidden;
padding: 0 0 256px;
box-sizing: border-box;
gap: 48px;
text-align: left;
font-size: var(--body-regular-regular-size);
color: var(--color-black);
font-family: var(--body-large-regular);
}
.span_large{
/* Rectangle 7 */
width: 134px;
height: 8px;
/* Greys/Light */
background: #C8C8D0;
border-radius: 50px;
}
.span_small{
width: 82px;
height: 8px;
background: #C8C8D0;
border-radius: 50px;
}
.span_medium{
width: 114px;
height: 8px;
background: #C8C8D0;
border-radius: 50px;
}
.description_cards{
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 5px;
width: 246px;
height: 48px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
text-align: center;
color: #000000;
}
.description_cards p{
margin: 0;
font-size: 16px;
}
.carou-review{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
}
.Review{
width: 100%;
text-align: center;
margin-bottom: 50px;
}
.card-div-review{
top: 65px;
left: 0;
border-radius: var(--br-md);
background-color: var(--greys-white);
box-shadow: 0 196px 55px transparent, 0 126px 50px rgb(23 23 28 / 1%), 0 71px 42px rgb(23 23 28 / 5%), 0 31px 31px rgb(23 23 28 / 9%), 0 8px 17px rgb(23 23 28 / 10%), 0 0 0 rgb(23 23 28 / 10%);
border: 1px solid var(--greys-lighter);
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 32px;
align-items: center;
justify-content: flex-start;
gap: var(--gap-sm);
font-size: var(--font-size-xs);
color: var(--primary);
margin: 0 12px;
height: 333px;
}
.word-wrap-card-desc{
width: 225px;
height: 173px;
word-wrap: break-word;
overflow: hidden;
display: flex;
justify-content: flex-start;
}
.text-review{
width: 220px;
word-wrap:break-word;
}
.rating {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
flex-direction: row-reverse;
}
.rating__star {
font-size: 1.5rem;
color: #eab308;
/* Reset styles for button */
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;
/* Used to position the hover state */
position: relative;
}
.download-section {
border-radius: 30px;
text-align: center;
padding: 11% 17%;
background-color: #f4f4f4;
margin: 20px 0;
}
.download-section h2 {
font-size: var(--headline-h2-size);
color: var(--color-black);
font-family: var(--headline-h1);
}
.download-section p {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
text-align: center;
color: #000000;
}
.download-button {
cursor: pointer;
border: 0;
padding: var(--padding-md) var(--padding-xl);
background-color: var(--primary);
border-radius: var(--br-md);
box-sizing: border-box;
align-items: flex-start;
justify-content: flex-start;
position: relative;
font-size: var(--body-regular-regular-size);
line-height: 150%;
display: inline-block;
font-family: var(--body-large-regular);
color: var(--color-white);
text-align: left;
text-decoration:none
}
.faq-container {
padding: 0 10%;
margin: 20px;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.faq-container h2{
font-size: var(--headline-h2-size);
color: var(--color-black);
font-family: var(--headline-h1);
text-align: center;
}
.faq{
min-width: 39%;
max-width: 46%;
border: none;
margin-bottom: 30px;
border-radius: 10px;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: 0.50rem;
margin-left: 5%;
margin-right: 5%;
}
.faq-question {
width: 100%;
padding: 10px;
font-size: 16px;
text-align: left;
border: none;
outline: none;
transition: background-color 0.2s;
cursor: pointer;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
text-align: start;
color: #000000;
display: flex;
flex-direction: row;
align-items: center;
}
.faq-question img{
width: 20px;
margin-right: 35px;
filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(225deg) brightness(119%) contrast(119%);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f8f8f8;
padding: 0 10px;
}
.faq-answer p {
margin: 10px 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 150%;
text-align: start;
color: #000000;
}
/* Ajoutez d'autres styles ici selon vos besoins */
@media only screen and (max-width: 1350px) {
.header-div{
padding: 10px;
}
.links-div{
flex-wrap: wrap;
}
.cta-div{
flex-wrap: wrap;
}
.body-div, .desktop-div{
gap:0;
}
.content-div {
width:105%
}
.section-hero-div {
flex-direction: column;
scale: 0.7;
}
.hero-image-div {
width: 100%;
}
.cards-div, .section-div{
flex-direction: column;
scale: 0.9;
}
.section-div1 {
flex-direction: column;
scale: 0.7;
}
.carou-review {
flex-direction:column;
}
.card-div-review{
margin:12px 0;
}
.faq {
max-width: 100% !important ;
}
}
/* flex-direction: column-reverse; */