/* add fonts */
@font-face {
    font-family: "Poppins";
    src: url("./Fonts/Poppins/Poppins-Thin.ttf") format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: "Poppins";
    src: url("./Fonts/Poppins/Poppins-Light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Poppins";
    src: url("./Fonts/Poppins/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Poppins";
    src: url("./Fonts/Poppins/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Poppins";
    src: url("./Fonts/Poppins/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Poppins";
    src: url("./Fonts/Poppins/Poppins-ExtraBold.ttf") format("truetype");
    font-weight: 800;
}

/* general style */
body {
    font-family: "Poppins";
    color: white;
    background: radial-gradient(circle,
            #2b375fff 0%,
            #0b1023ff 100%);
}

a {
    color: white;
    text-decoration: none;
}

.container {
    max-width: 1600px;
    margin: auto;
    padding: 10px 50px;
    display: flex;
}

/* start header style */
header {
    font-weight: 500;
    width: 100%;
}

header>div.container {
    justify-content: space-between;
}

/* end header style */

/* start main style */
main>div.container {
    height: 88vh;
}

/* -- 1 */
main .about-expert {
    font-weight: 400;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

main section.about-expert .expert-name {
    font-size: 3rem;
    font-weight: 500;
    margin: 0;
}

main section.about-expert .expert-skill {
    font-size: 2rem;
}

main section.about-expert .expert-location {
    font-size: 1rem;
}

/* -- 2 */
main div.gallery-expert {
    width: 378px;
    height: 520px;
    margin: auto;
    display: flex;
    overflow: hidden;
}

main div.gallery-expert .model-left,
main div.gallery-expert .model-right {
    width: 50%;
    height: inherit;
    transition: 0.5s ease;
}

main div.gallery-expert .model-left {
    transform: translateY(-50px);
}

main div.gallery-expert .model-right {
    transform: translateY(50px);
}

/* hover (div.gallery-expert) */
main div.gallery-expert:hover .model-left,
main div.gallery-expert:hover .model-right {
    transform: translateY(0px);
}

/* -- 3 */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

main .switcher-item {
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

main .switcher-item ul.switcher-list {
    font-weight: 600;
    font-size: 1.3rem;
    list-style: none;
    padding: 0;
    width: auto;
    direction: rtl;
}

main .switcher-item ul.switcher-list li {
    display: flex;
    align-items: center;
}

main .switcher-item ul.switcher-list li::before {
    content: "•";
    font-size: 4rem;
    color: rgb(155, 155, 175);
    margin-left: 20px;
    transition: transform 0.2s ease;
}

main .switcher-item ul.switcher-list li:hover::before {
    animation: pulse 1s infinite;
}

main .switcher-item ul.switcher-list li.active::before {
    animation: pulse 1s infinite;
    color: white;
}

/* end main style */