* {

    box-sizing: border-box;

}



html {

    width: 100%;

}



body {


    margin: 0;


    min-height: 100vh;


    font-family:

        Tahoma,
        Arial,
        sans-serif;



    background:

        linear-gradient(
            135deg,
            #f5f8fb,
            #ffffff
        );



    color: #1d2939;



    display: flex;


    justify-content: center;


    align-items: center;



    padding: 20px;



}




.container {


    width: 100%;


    max-width: 500px;


    text-align: center;



}




.doctor-image {


    width: min(70vw, 220px);


    aspect-ratio: 3 / 4;


    object-fit: cover;



    border-radius: 10px;


    box-shadow:5px 5px 15px #000;



}




h1 {


    margin-top: 25px;


    margin-bottom: 5px;



    font-size:

        clamp(24px, 6vw, 32px);



}



h2 {


    margin: 0;



    color: #2563eb;



    font-size:

        clamp(17px, 4vw, 21px);



}




.description {


    margin: 20px auto;



    line-height: 2;



    max-width: 400px;



    color: #667085;



    font-size:

        clamp(14px, 3.5vw, 16px);



}




.links {


    display: flex;



    flex-direction: column;



    gap: 15px;



    margin-top: 30px;



}




.card {


    width: 100%;



    display: flex;



    align-items: center;



    gap: 15px;



    padding: 18px;



    background: white;



    border-radius: 18px;



    text-decoration: none;



    color: #1d2939;



    text-align: right;



    box-shadow:


        0 5px 20px rgba(0,0,0,0.08);



    transition: .25s;



}




.card:hover {


    transform: translateY(-5px);



    box-shadow:

        0 10px 30px rgba(0,0,0,0.15);



}




.icon {

    flex-shrink: 0;

    width: 55px;

    height: 55px;

}



.icon img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.content {


    flex: 1;



}




.card strong {


    display: block;



    font-size:

        clamp(16px,4vw,19px);



}




.card span {


    display: block;



    margin: 6px 0;



    color: #2563eb;



    direction: ltr;



    text-align: right;



}





.card small {


    display: block;



    line-height: 1.8;



    color: #667085;



    font-size: 13px;



}





.phone {
    margin-top: 8px;
    font-weight: bold;
    color: #1d2939 !important;
}


.phone {
    direction: ltr;
    text-align: center;
    display: block;
}
.english{
    direction: ltr;
    text-align: center;
    display: block;
}



footer {


    margin-top: 40px;



    color: #98a2b3;



    font-size: 13px;



}






/* Tablets */

@media (min-width:768px){


    .container {


        max-width: 550px;


    }


}






/* Very small phones */


@media(max-width:360px){


    body {


        padding: 10px;


    }



    .doctor-image {


        width: 170px;


    }



    .card {


        padding: 14px;


    }


}