main {
    padding: 3% 8%;
    font-size: var(--fs-xl);

    .page-healthy-lifestyle {
        background-image: url(../images/healthylifestylehub.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .youtube-video {
        display: flex;
        justify-content: space-between;
        height: 36vh;
        padding-top: 4%;

        .embed-video {
            width: 32%;
            height: 100%;
            border-radius: 15px;
        }
    }

    @media (max-width: 480px) {
        .youtube-video {
            height: fit-content;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 32px;

            .embed-video {
                width: 100%;
            }
        }
    }
}

.specialist-corner {
    padding-bottom: 8%;

    .wpa-specialist-table {
    max-width: 100%;
    overflow-x: auto;
        .table-top {
            display: flex;
            align-items: end;
            gap: 32px;
            padding-top: 6%;

            .table-title {
                display: flex;
                flex-direction: column;
                color: black;

                .big-title {
                    font-size: var(--fs-2xl);
                    font-family: "Poppins-ExtraBold";
                }
            }
        }

        .table-container {
            width: 100%;
            margin-top: 4%;
            font-size: var(--fs-sm);

                @media (max-width: 480px) {
                    .table-container {
                    font-size: 8px;
                    }
                }

            .table-top-content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 152px;
            }

            .table-text-top {
                color: black;
                font-family: "Poppins-ExtraBold";
            }
        }
    }
}

.educational-ressources {
    padding-bottom: 8%;

    .educational-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .link-button {
            background-color: #BB1A21;
            border-radius: 10px;
            color: white;
            font-family: "Poppins-ExtraBold";
            padding: 1% 2%;
            text-decoration: none;
        }
    }

    .red-mini-title {
        color: #BB1A21;
        font-family: "Poppins-ExtraBold";
        padding: 4% 0;
        border-bottom: 1px solid #8B8B8B;
    }

    .education-tool {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #8B8B8B;
        padding: 2.5% 0;

        .tool-link {
            font-size: var(--fs-base);
            display: flex;
            flex-direction: column;
            gap: 2px;

            a {
                color: black;
                font-family: "Poppins-SemiBold";
            }
        }
    }

    .upcoming-courses {
        display: flex;
        align-items: center;
        color: black;
        gap: 48px;
        padding: 4% 0;

        .course-image {
            width: 42%;
            border-radius: 10px;
        }

        .course-info {
            display: flex;
            flex-direction: column;
            gap: 12px;

            .course-title {
                font-weight: bolder;
                font-size: var(--fs-3xl);
            }

            .course-question {
                font-size: var(--fs-base);
            }

            .info-list {
                display: flex;
                flex-direction: column;
                gap: 4px;

                .infos {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }
            }

            .register-button {
                background-color: black;
                font-size: var(--fs-base);
                color: white;
                font-family: "Poppins-SemiBold";
                width: fit-content;
                padding: 4% 10%;
                border-radius: 10px;
            }
        }
    }

    .program-container {
        display: flex;
        align-items: center;
        gap: 42px;
        padding: 4% 0;
        border-bottom: 1px solid #8B8B8B;

        .program-title {
            width: 32%;
            height: 20vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .long-title {
                font-family: "Poppins-Bold";
                font-size: var(--fs-2xl);
                color: black;
            }

            .read-more {
                color: #ED1F24;
                transition: all 0.2s ease-in-out;
                font-size: var(--fs-base);
                cursor: pointer;
            }

            .read-more:hover {
                font-family: "Poppins-Bold";
            }
        }

        .program-info {
            font-family: "Poppins-SemiBold";
            width: 100%;
        }
    }

    .red {
        color: #BB1A21;
        font-family: "Poppins-ExtraBold";
        padding: 4% 0;
    }
}

.perinatal-main {

    .perinatal-psychiatry {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .officer-list {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding-top: 6%;

        .officer-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 24%;
            transition: all 0.2s ease-in-out;

            .officer-name {
                color: black;
                font-family: "Poppins-Bold";
                margin: 4% 0;
            }

            .officer-title {
                border: 1px solid black;
                width: 60%;
                padding: 3% 0;
                border-radius: 5px;
                text-align: center;
                color: black;
                font-family: "Poppins-Bold";
                margin-bottom: 4%;
                transition: all 0.1s ease-in-out;
            }

            .officer-image {
                object-fit: cover;
                height: 192px;
                transition: all 0.2s ease-in-out;
            }

            .officer-info {
                display: flex;
                flex-direction: column;
                padding: 4% 0;
                gap: 28px;
                font-size: 14px;

                .officer-info-block {
                    display: flex;
                    align-items: center;
                    gap: 24px;
                }
            }

            .contact-button {
                white-space: nowrap;
                min-width: fit-content;
                padding: 3% 8%;
                width: 84%;
                margin-top: 4%;
            }
        }

        .officer-block:hover {
            .officer-title {
                background-color: black;
                color: white;
            }

            .officer-image {
                scale: 1.1;
            }
        }
    }

    @media (max-width: 480px) {
        .officer-list {
            display: flex;
            align-items: center;
            flex-direction: column;
            width: 100%;
            padding: 0;
            margin: 0;
            gap: 64px;

            .officer-block {
                width: 100%;
                margin-top: 24px;
                padding: 0;
                margin: 0;
            }
        }
    }
}