*{
    margin: 0%;
    padding: 0;
    font-family: system-ui;
}

#sect1, 
#sect2,
#sect4{
    margin: 0 18%;
}
#sect5{
    margin-left: 11%;
}
header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 3;
    top: 0%;
    padding: 20px 18%;
    background-color: white;
}
a{
    text-decoration: none;
    color: #ABABAB;
    margin: 0 10px;
}
#logo{
    display: flex;  
    gap: 5px ;
}
.logo-img{
    width: 40px;
}
#logo p {
    font-size: 30px;
    font-weight: 600;
    color: #00CCB1;
}
#logo p span{
    color: #ABABAB;
}
main{
    margin-top: 100px; 
}
figure{
    text-align: center;
    color: #00CCB1;
    font-size: 35px;
    font-weight: 300;
}
figure p{
    margin: 20px;
}
#articles{
    display: flex;
    gap: 20PX;
    line-height: 25px;
    font-weight: 500;
}
#articles span{
    color: #3D83DF ;
    font-weight: 600;
}
#specialists{
    display: flex;
    gap: 20px;
    margin:20px 0;
    color: white;
}
#for-patients,#for-doctors,#for-clinics{
    padding: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
}
#for-patients{
   background-color: #00CCB1;
   flex: 1;
}
#for-doctors{
   background-color: #4F8FE2;
   flex: 1;
}
#for-clinics{
   background-color: #313C47;
   flex: 1;
}
#specialists h3{
    font-size: 25px;
    font-weight: 600;
}
#specialists p{
    font-size: 20px;
    font-weight: 300;
}
#specialists select{
   border: none;
   color: white;
   font-weight: 600;
   font-size: 15px;
}
#for-patients select{
    background-color: #00CCB1;
}
#for-doctors select{
    background-color:#4F8FE2;
}
#for-clinics select{
    background-color: #313C47;
    margin: 5px 0;
}
#global-company{
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
}
#global-company h3{
    color: #00CCB1;
    font-size: 25px;
    font-weight: 400;
}
#companies{
    display: grid;
    grid-template-areas: " 1fr 1fr 1fr 1fr"
    "1fr 1fr 1fr 1fr ";
    gap: 20px 50px;
}
#companies a svg, #companies img{
    width: 120px;
    height: 30px;
    opacity: 0.1;
}
#companies a svg:hover, #companies img:hover{
   opacity: 1;
   transition: 0.6s;
}

#sect3{
    background-color: #D6F5F5;
    text-align: center;
    justify-content: space-between;
    padding: 20px 18%;
    display: flex;
    position: relative;
    gap: 70px;
    height: 600px;

}

#sect3 #part1{
    display: flex;
    flex-direction: column;
    gap: 300px;
    align-items: center;
    justify-content: space-between;
}
#sect3 #part1 p{
    text-align: left;
    font-size: 15px;
    color: gray;
}
#sec3-img{
    text-align: left;
    overflow: hidden;
    position: absolute;
    bottom: 0%;
    left: 0;
    top: 50%;
}
#p1-head {
    margin: 50px 0;
}
#p1-head p{
    margin: 20px 0;
}
#sect3 #part1 div{
    align-items: start;
    text-align: left;
}
#infos {
    display: flex;
    align-items: start;
    gap: 20px;
    z-index: 2;
    margin-right: 0%;
}

#countries, #appointments, #patients, #doctors{
    background-color: white;
    width: 250px;
    height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.d1, .d2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px
}

.d1{
    margin-top: 20px
}
#infos div p{
    color: #747474;
    font-size: 14px;
}
#sect3 h3,h4{
    color: #00CCB1;
    font-size: 25px;
    font-weight: 200;
}
#infos i{
    color: #00CCB1;
    font-size: 40px;
}


#sect4{
    text-align: center;
    padding: 80px;
    
}
#sect4 h3{
    color: #00CCB1;
    margin: 20px;
    font-size: 30px;
    font-weight: 400;
    line-height: 35px;

}
#sect4{
    line-height: 25px;

}
/* #section5 #cities{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
} */
.city{
    text-align: center;
    border-radius: 5px;
    background-color: white;
}

.city img{
    width: 312px;
    height: 280px;
    border-radius: 5px 5px 0 0;
}
.city div{
    justify-content: space-between;
    padding: 15px 20px;
    align-items: center;
}
#k{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.city:hover{
    background-color: white;
    box-shadow: 2px 2px 15px rgb(163, 158, 158);
    cursor: pointer;
    transition: 1s;
}
button{
    background-color: #3D83DF;
    color: white;
    font-weight: 700;
    padding:8px 15px;
    border: none;
    border-radius: 5px;
}
button:hover{
    background-color: #1662C6;
}
#sounds{
    text-align: center;
    margin-right: 10%;
    margin-top: 60px;
    margin-bottom: 80px;
}
#sounds button{
    padding: 10px 20px;
}
#sounds p{
    font-size: 30px;
    font-weight: 300;
    padding: 20px 0;
}
footer{
    text-align: center;
    font-size: 13px;
    color: #747474;
    padding: 30px;

}
hr{
    border: 1px #EEF2F2 solid;
}
footer span{
    color: #3D83DF;
}



@media screen and (max-width: 1002px){
    header{
        padding: 20px;
        
    }
    #sect1, 
#sect2,

#sect4{
    margin: 20px;
}
#sect3{
    padding: 0 100px;
}
    #sect3{
        flex-direction: column;
    }
    #companies{
    gap: 20PX 1àPX;
}
}