/*
Theme Name: 	MFM Digital
Theme URI: 		http://themes.muffingroup.com/betheme
Author: 		MFM Digital
Author URI: 	http://mfmdigital.com.com
Description:	MFM Digital Child Theme
Template:		betheme
Version: 		1.0.0
*/

/* Theme customization starts here
-------------------------------------------------------------- */

    /**** Menu ****/

/* .menu-btn > a {
    background: #702c39;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 25px;
    transition: 0.5s ease;
}

.menu-btn > a:hover {
    background: #641423;
} */


/* Bloc Praticien HomePage */

#praticiens-grid{
    display:grid;
    gap:25px;

    .praticien-card{
        border-radius: 25px;
        background-color: #F0F2F4;
        overflow: hidden;
        position: relative;

        .cover-link{
            position: absolute;
            inset: -0;
        }

        .container-img-praticien{
            width: 100%;
            height: 375px;
        }

        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        p{
            margin-left: 25px;
            margin-bottom: 0px;
            font-size: 20px;
            font-weight: 500;
            margin-top: 25px;
            color: black;
            text-decoration: none;
        }
        .p-prof{
            margin-top: 0px;
            color: #702C39;
            font-size: 15px;
            font-weight: 600;
        }
        .container-arrow{
            width: 100%;
            height: 75px;
            display: flex;
            justify-content:flex-end;
            align-items: center;
            padding: 35px;
        }
        .arrow{
            width: 25px;
            height: 15px;

            img{
                object-fit: contain;
            }
        }
    }

}
.praticien-search{
    background-color: #697c93;
    border-radius: 15px;
    padding: 150px 25px;
    h4{
        color: white;
        font-weight: 500;
        font-size: 30px;
        text-align: center;
        line-height: 30px;
    }
    .container-contact{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
        gap: 5px;
        .contact{
            color: white;
            font-weight: 600;
            font-size: 20px;
            text-decoration: underline;
            margin: 0;
        }
        a{
            color: white !important;
            font-weight: 400;
            font-size: 21px;
            margin: 0;
        }
    }
}

/* *** Single praticien *** */

.container-single-praticien{
    width: 100%;
    min-height: 100vh;
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-between;
    margin-top: 100px;

    .praticien-left{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .img-single-praticien{
            border-radius: 20px;
            width: 100%;
            height: 500px;
            overflow: hidden;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        #btn-rdv{
            margin-top: 25px;
            border-radius: 50px;
            padding: 15px 25px;
        }
    }

    }

    .praticien-right{
        width: 100%;
        

        .profession{
            width: 190px;
            height: 40px;
            background-color: #F5F0F1;
            border-radius: 20px;
            margin-top: 50px;
            
            p{
                margin: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #702C39;
                font-size: 15px;
                font-weight: 500;
            }
        }

        h1{
            margin-top: 20px;
        }
        
        hr{
            border: solid 1px black;
            width: 90%;
            margin: 15px 0;
        }

        p{
            color: black;
            a{
                color: black;
            }
        }

        .horaire-grid{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 25px;

            .jour{
                text-align: center;
                border: solid 1px #EAE9E5;
                padding: 10px;
                border-radius: 20px;
            }
        }
    }
}

/* *** Responsive *** */
@media screen and (width>=640px)
{
    #praticiens-grid{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (min-width: 960px)
{
    #praticiens-grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .container-single-praticien{
        .praticien-right{  
            .horaire-grid{
                grid-template-columns: 1fr 1fr 1fr;
            }
        }
    }
}

@media screen and (min-width: 1240px)
{
    #praticiens-grid{
        &[data-cols="4"]{
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }

    .container-single-praticien{
        padding: 100px;
        flex-direction: row;

        .praticien-left{
            width: 25%;
        }

        .praticien-right{
            width: 70%;

            p{
                font-size: 18px;
            }

            .profession{
                p{
                    font-size: 18px;
                }
            }

            h2{
                margin-top: 75px;
            }
        }
    }
}



