#content {
    /* border: 1px solid #ccc; */
    /* height: 1840px; */
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    cursor: default;
    font-family: bt;
}

    /* #region content items */
    #content > .items {
        width: 17%;
        aspect-ratio: 1.55/1;
        position: fixed;
        top: 35%;
        left: -13.6%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        z-index: 1000;
    }

        #content > .items > a {
            text-decoration: none;
        }

            #content > .items > a > .item {
                transition: 0.4s;
                height: 100%;
                width: 100%;
                display: flex;
                flex-flow: row wrap;
                border-radius: 25px;
            }

                #content > .items > a > .item:hover {
                    transition: 0.4s;
                    margin-left: 80%;
                }

                #content > .items > a > .item > .itemPic {
                    height: 100%;
                    width: 20%;
                    aspect-ratio: 1/1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #5c6a8a;
                    border-top-right-radius: 0.6vw;
                    border-bottom-right-radius: 0.6vw;
                }

                    #content > .items > a > .item > .itemPic > img {
                        width: 45%;
                    }

                #content > .items > a > .item > .itemText {
                    background-color: rgba(221, 245, 245, 0.7);
                    height: 100%;
                    width: 80%;
                    backdrop-filter: blur(10px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                #content > .items > a > .item > .itemText > span {
                    font-family: bt;
                    color: #5c6a8a;
                    text-align: right;
                    font-size: clamp(12px, 1.2vw, 20px);
                }

            #content > .items > a > .item3 > .itemText > span {
                font-family: vb;
            }

/* #endregion content items */
/* #region content doctorInformationAndPic */
#doctorInformationAndPic {
    width: 100%;
    max-width: 1920px;
    aspect-ratio: 2/1;
    background: url(../images/background/InformationBackgroundPic.png) no-repeat 70% 0%;
    background-size: 170% 100%;
    display: flex;
    justify-content: right;
    align-items: center;
}

#doctorPic {
    width: 40%;
    height: auto;
    margin-right: 5%;
    margin-bottom: 7%;
}

#doctorInformation {
    width: 50%;
    height: auto;
    margin-bottom: 12%;
    flex-flow: row wrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    #doctorInformation > a {
        color: #354a7b;
        font-size: clamp(18px, 2.6vw, 40px);
        font-family: bt;
        text-decoration: none;
    }

#doctorName {
    color: #3c4458;
    margin-bottom: 20px;
}

#doctorPic > img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* #endregion content doctorInformationAndPic */
/* #region content homeSlider */
#homeSlider {
    width: 100%;
    height: auto;
    position: relative;
    top: -170px;
    padding-top: 200px;
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
}

#homeSliderBox {
    background-color: #dfe6e6;
    width: 100%;
    height: 160%;
    aspect-ratio: 8/1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#homeSliderDiv {
    width: 80%;
    height: 160%;
    max-height: 700px;
    max-width: 1400px;
    gap: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#homeSlider_leftMoveButton {
    transition: 0.3s;
    width: 4%;
    max-width: 90px;
    aspect-ratio: 1/1;
    background: url(../images/icon/nextLeft.png) no-repeat 100%;
    background-size: 100% 100%;
    position: relative;
    right: 0.5%;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    border-radius: 50%;
    cursor: pointer;
}

    #homeSlider_leftMoveButton > img {
        height: 100%;
    }

    #homeSlider_leftMoveButton:hover {
        filter: brightness(140%);
        backdrop-filter: brightness(140%);
    }

#homeSlider_rightMoveButton {
    transition: 0.3s;
    width: 4%;
    max-width: 90px;
    aspect-ratio: 1/1;
    background: url(../images/icon/nextRight.png) no-repeat 100%;
    background-size: 100% 100%;
    position: relative;
    left: 0.5%;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    border-radius: 50%;
    cursor: pointer;
}

    #homeSlider_rightMoveButton > img {
        height: 100%;
    }

    #homeSlider_rightMoveButton:hover {
        filter: brightness(140%);
        backdrop-filter: brightness(140%);
    }

#homeSliderBox:hover > #homeSlider_leftMoveButton {
    transition: 0.3s;
    visibility: visible;
    opacity: 1;
}

#homeSliderBox:hover > #homeSlider_rightMoveButton {
    transition: 0.3s;
    visibility: visible;
    opacity: 1;
}

#homeSliderDiv > .homeSliderItem {
    transition: 0.5s;
    height: 80%;
    flex-grow: 1;
    border-radius: clamp(1px, 1vw, 15px);
    box-shadow: 0px 45px 40px 0px lightslategray;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#homeSliderDiv > .homeSliderItemInMinSize:hover {
    filter: brightness(150%);
}

#homeSliderDiv > .homeSliderItem > img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#homeSliderDiv > .homeSliderItem > a {
    display: none;
    opacity: 0;
}

#homeSliderDiv > .homeSliderItem > span {
    display: none;
    opacity: 0;
}

#homeSliderDiv > .homeSliderItemMove > a {
    background-color: rgba(255, 255, 255, 0.2);
    display: initial;
    position: absolute;
    text-align: center;
    padding-right: 35px;
    padding-left: 20px;
    padding-bottom: 11px;
    width: auto;
    min-width: 300px;
    top: 7%;
    right: -70%;
    text-decoration: none;
    color: white;
    font-family: bt;
    font-size: clamp(16px, 2.3vw, 35px);
    border-radius: clamp(1px, 1.1vw, 17px);
    backdrop-filter: blur(10px);
}

#homeSliderDiv > .tagsMove > a {
    transition: 1s;
    right: -15px;
    opacity: 1;
}

#homeSliderDiv > .homeSliderItemMove > span {
    background-color: rgba(255, 255, 255, 0.2);
    display: initial;
    height: auto;
    width: 400px;
    text-align: center;
    position: absolute;
    left: -450px;
    bottom: 3%;
    text-decoration: none;
    color: white;
    font-family: bt;
    font-size: clamp(13px, 1.1vw, 17px);
    padding-right: 3%;
    padding-left: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    text-align: justify;
    direction: rtl;
    border-radius: clamp(1px, 2vw, 30px);
    border-bottom-left-radius: clamp(1px, 1.3vw, 20px);
    backdrop-filter: blur(10px);
}

#homeSliderDiv > .tagsMove > span {
    transition: 1s;
    left: 2%;
    opacity: 1;
}

#homeSliderDiv > .homeSliderItemMove > span:hover {
    transition: 0.2s;
}

#homeSliderDiv > .homeSliderItemMove {
    transition: 0.7s;
    flex-grow: 8;
    height: 100%;
    border-radius: clamp(1px, 2vw, 30px);
}

/* #endregion content homeSlider */
/* #region content doctorIntroduction */
#doctorIntroductionDiv {
    width: 100%;
    height: auto;
    padding-top: 105px;
    padding-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#doctorIntroductionBox {
    background-color: #dfe6e6;
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#doctorIntroduction {
    width: 80%;
    max-width: 1182px;
    aspect-ratio: 2.42/1;
    position: relative;
    display: flex;
    border-radius: clamp(1px, 1vw, 15px);
    overflow: hidden;
    display: flex;
    justify-content: center;
}

#doctorIntroductionTextDiv {
    width: 43%;
    height: 100%;
    position: absolute;
    left: 0;
    direction: rtl;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

    #doctorIntroductionTextDiv > span {
        color: #ddf5f5;
        font-family: bt;
        font-size: clamp(18px, 2.5vw, 30px);
        text-align: center;
        margin-top: -10%;
        margin-left: 7%;
    }

    #doctorIntroductionTextDiv > p {
        color: #f0fbfb;
        font-family: bt;
        font-size: clamp(14px, 1.5vw, 22px);
        backdrop-filter: blur(15px) brightness(120%);
        padding: clamp(1px, 1.8vw, 25px);
        padding-top: clamp(1px, 1vw, 15px);
        padding-bottom: clamp(1px, 1.2vw, 20px);
        margin-left: 7%;
        margin-top: 3%;
        border-radius: clamp(1px, 2vw, 30px);
        text-align: justify;
        direction: rtl;
    }

#doctorIntroductionPicDiv {
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
}

    #doctorIntroductionPicDiv > img {
        height: 100%;
        object-fit: cover;
    }

#doctorMiniIntroductionDiv {
    width: 100%;
    max-width: 1696px;
    aspect-ratio: 2.5/1;
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#doctorMiniIntroductionBox {
    height: auto;
    width: 80%;
    max-width: 1182px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#doctorMiniIntroduction {
    height: auto;
    width: 100%;
    position: relative;
    padding-top: 0.5vw;
    gap: 0.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

    #doctorMiniIntroduction > .miniIntroduction {
        background-color: #dfe6e6;
        direction: rtl;
        border-radius: clamp(1px, 1vw, 15px);
        position: relative;
        gap: 10px;
        padding-bottom: 2.3%;
        padding-top: 1%;
        padding-left: 2%;
        display: flex;
        flex-direction: column;
    }

        #doctorMiniIntroduction > .miniIntroduction > span {
            text-align: justify;
            color: #4f5b78;
            font-family: bt;
            font-size: clamp(14px, 1.1vw, 18px);
            padding-right: 10%;
            padding-left: 5%;
        }

        #doctorMiniIntroduction > .miniIntroduction > .miniIntroductionTitle {
            color: #4f5b78;
            font-size: clamp(18px, 1.7vw, 27px);
            font-family: bt;
            padding-top: 1%;
            padding-right: 5%;
        }

#miniIntroduction1 {
    height: auto;
    width: 45%;
    position: relative;
    left: 18%;
}

#miniIntroduction2 {
    height: auto;
    width: 55%;
    position: relative;
    right: 15%;
}

#miniIntroduction3 {
    height: auto;
    width: 62%;
    position: relative;
    left: 10%;
}

#doctorMiniIntroduction > .introductionIcon {
    width: 9.5%;
    aspect-ratio: 1/1;
    position: absolute;
    z-index: 5;
}

#introductionIcon1 {
    background: url(../images/introductionIcon/introductionIcon1.png) no-repeat 100%;
    background-size: 100%;
    left: 21%;
    top: 9%;
}

#introductionIcon2 {
    background: url(../images/introductionIcon/introductionIcon2.png) no-repeat 100%;
    background-size: 100%;
    right: 17%;
}

#introductionIcon3 {
    background: url(../images/introductionIcon/introductionIcon3.png) no-repeat 100%;
    background-size: 100%;
    left: 12%;
    bottom: 7%;
}

/* #endregion content doctorIntroduction */
/* #region content dayAndTime - Complete Redesign */

/* Desktop & Large Screens */
#dayAndTimeDiv {
    width: 100%;
    padding: 120px 0 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

#dayAndTimeBox {
    width: 85%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#dayAndTimeBox > .headerPart {
    width: 100%;
    text-align: center;
}

#dayAndTimeBox > .headerPart > #dayAndTimeMainTitle {
    color: #354a7b;
    font-family: bt;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 700;
    display: inline-block;
}

/* Desktop: Horizontal Layout */
#dayAndTimeBox > .dayAndTimePart {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    direction: rtl;
}

#dayAndTimeBox > .dayAndTimePart > .dayAndTime {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 16px;
    padding: 25px 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    min-height: 150px;
}

#dayAndTimeBox > .dayAndTimePart > .dayAndTime:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: #d5026e;
}

#dayAndTimeBox > .dayAndTimePart > .dayAndTime > .weekDayName {
    width: 100%;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #f5f5f5;
    margin-bottom: 15px;
}

#dayAndTimeBox > .dayAndTimePart > .dayAndTime > .weekDayName > span {
    font-family: bt;
    color: #d5026e;
    font-size: clamp(16px, 1.4vw, 24px);
    font-weight: 700;
}

#dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourTitleName {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

#dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourTitleName > span {
    font-family: bt;
    color: #888;
    font-size: clamp(14px, 1.2vw, 20px);
}

#dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourNum {
    width: 100%;
    text-align: center;
}

#dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourNum > span {
    font-family: bt;
    color: #354a7b;
    font-size: clamp(16px, 1.4vw, 24px);
    font-weight: 700;
}

/* Address & Phone Sections */
#addressBox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
    direction: rtl;
}

#addressIconPic {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#addressIconPic > img {
    width: 100%;
    height: auto;
}

#addressText {
    flex: 1;
    max-width: 800px;
    text-align: center;
}

#addressText > span {
    font-family: bt;
    font-size: clamp(15px, 1.5vw, 22px);
    color: #354a7b;
    line-height: 1.8;
}

#telBox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    direction: rtl;
}

#telephonePic {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

#telephonePic > img {
    width: 100%;
    height: auto;
}

#telephoneText {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#telephoneText > span {
    font-family: bt;
    font-size: clamp(16px, 1.5vw, 23px);
    color: #354a7b;
    font-weight: 600;
}

/* #endregion content dayAndTime */

#blogDiv {
    /* background-color: aqua; */
    aspect-ratio: 2.1/1;
    width: 100%;
    /* height: 450px; */
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#blogTitle {
    /* background-color: aqua; */
    height: 15%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #blogTitle > span {
        /* padding-right: 3%; */
        /* padding-left: 3%; */
        color: #3c4458;
        direction: rtl;
        text-align: justify;
        font-family: bt;
        font-size: clamp(20px, 2.6vw, 40px);
    }

#blogBox {
    /* background-color: green; */
    width: 70%;
    height: 63%;
    max-width: 1800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.articleBox {
    border-radius: 0.5vw;
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 2vw;
    box-shadow: inset 0px -10px 10px -10px lightslategray, 0px 25px 40px -20px lightslategray;
    cursor: pointer;
}

    .articleBox:hover {
        /* background-color: #e4eaea; */
        /* width: 32.5%; */
        height: 104%;
        box-shadow: inset 0px -10px 10px -10px lightslategray, 0px 25px 40px 0px lightslategray;
        perspective: 100px;
    }

.articlePic {
    /* background-color: gold; */
    border-top-right-radius: 2vw;
    border-top-left-radius: 2vw;
    width: 100%;
    height: 40%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .articlePic > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.articleTitle {
    /* background-color: blue; */
    border-radius: 0.5vw;
    width: 100%;
    height: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .articleTitle a {
        width: 100%;
        display: block;
    }

        .articleTitle a h2 {
            color: #3c4458;
            padding-right: 4%;
            padding-left: 4%;
            padding-top: 5%;
            padding-bottom: 5%;
            direction: rtl;
            text-align: center;
            font-family: vb;
            font-size: clamp(14px, 1.2vw, 20px);
            line-height: 1.4;
            margin: 0;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

.articleSubHeading {
    /* background-color: darkorchid; */
    border-radius: 0.5vw;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .articleSubHeading > h2 {
        color: #3c4458;
        padding-right: 4%;
        padding-left: 4%;
        padding-bottom: 3%;
        direction: rtl;
        text-align: justify;
        font-family: vm;
        font-size: clamp(13px, 1vw, 17px);
        line-height: 1.5;
        margin: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

#moreArticleButtonDiv {
    /* background-color: aqua; */
    height: 22%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#moreArticleButton {
    color: #3c4458;
    border-radius: 2vw;
    padding: 15px 30px;
    font-family: vm;
    font-size: 1.3vw;
    border: 2px solid gray;
    cursor: pointer;
}

    #moreArticleButton:hover {
        background-color: aliceblue;
    }

/* #region content homeQuestions */
#homeQuestionsDiv {
    height: auto;
    width: 100%;
    max-width: 1457px;
    margin-left: 7%;
    margin-right: 7%;
    padding-top: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#homeQuestionsBox {
    height: auto;
    width: 100%;
    border-radius: 15px;
    gap: clamp(1px, 0.7vw, 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#questionsHeaderTitle {
    width: 100%;
    direction: rtl;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #questionsHeaderTitle > span {
        font-family: bt;
        font-size: clamp(20px, 2.6vw, 45px);
        color: #354a7b;
        position: relative;
    }

#homeQuestionsBox > .questionsDiv {
    transition: 0.5s;
    background-color: #dfe6e6;
    height: clamp(1px, 4.3vw, 77px);
    width: 95%;
    border: 0.1vw solid #ccc;
    overflow: hidden;
    direction: rtl;
    border-radius: clamp(1px, 0.7vw, 10px);
    user-select: none;
    cursor: pointer;
    border-bottom: 3px solid #ccc;
}

    #homeQuestionsBox > .questionsDiv:hover > .questions {
        transition: 0.2s;
        backdrop-filter: brightness(105%);
    }

#homeQuestionsBox > .questionsWithAnswersDiv {
    height: clamp(1px, 9.5vw, 170px);
}

#homeQuestionsBox > .questionsDiv > .questions {
    transition: 0.2s;
    height: auto;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    color: #354a7b;
    display: flex;
    align-items: center;
}

    #homeQuestionsBox > .questionsDiv > .questions > span {
        font-size: clamp(16px, 1.6vw, 28px);
        margin-right: 20px;
        margin-top: 0.7vw;
        margin-bottom: 0.9vw;
    }

#homeQuestionsBox > .questionsDiv > .answers {
    height: 55%;
    background-color: #f0fbfb;
    display: flex;
    align-items: center;
}

    #homeQuestionsBox > .questionsDiv > .answers > span {
        color: #3c4458;
        font-size: clamp(14px, 1.1vw, 19px);
        margin-right: 20px;
        margin-top: 0.9vw;
        margin-bottom: 0.9vw;
        font-family: vb;
        opacity: 0;
    }

#homeQuestionsBox > .questionsWithAnswersDiv > .questions {
    color: brown;
}

#homeQuestionsBox > .questionsWithAnswersDiv > .answers > span {
    opacity: 1;
}

/* #endregion content homeQuestions */
/* Tablet & Small Laptop Responsive */
@media screen and (max-width:1200px) {
    #homeSliderDiv {
        gap: 10px;
    }

        #homeSliderDiv > .homeSliderItemMove {
            flex-grow: 10;
            height: 110%;
        }

            #homeSliderDiv > .homeSliderItemMove > a {
                padding: 0;
                padding: 3%;
                padding-bottom: 2%;
                padding-top: 1.07%;
            }

        #homeSliderDiv > .tagsMove > a {
            right: auto;
        }

        #homeSliderDiv > .homeSliderItemMove > span {
            width: 87%;
            left: auto;
            bottom: -200px;
            font-size: 1.5vw;
            border-radius: 17px;
        }

        #homeSliderDiv > .tagsMove > span {
            bottom: 3%;
        }
}

/* Tablet Portrait */
@media screen and (max-width:1024px) {
    #doctorInformationAndPic {
        background-size: 180% 100%;
    }

    #doctorInformation > a {
        font-size: clamp(20px, 3vw, 40px);
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime {
        width: 18%;
    }

    #blogBox {
        width: 85%;
    }

    .articleBox {
        width: 31%;
    }
}

/* Large Mobile / Small Tablet */
@media screen and (max-width:900px) {
    #doctorInformationAndPic {
        aspect-ratio: 1.5/1;
        background-size: 200% 100%;
    }

    #dayAndTimeBox > .dayAndTimePart {
        flex-wrap: wrap;
        gap: 15px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime {
        width: 48%;
    }

    #blogBox {
        width: 90%;
    }

    .articleBox {
        width: 48%;
    }
}

/* Medium Mobile */
@media screen and (max-width:768px) {
    #doctorMiniIntroduction > .miniIntroduction > span {
        font-size: clamp(15px, 1.5vw, 18px);
    }

    #homeQuestionsBox > .questionsDiv {
        width: 98%;
    }
}

@media screen and (max-width:750px) {
    #content > .items {
        display: none;
    }

    /* #region content doctorInformationAndPic */
    #doctorInformationAndPic {
        background: url(../images/background/InformationBackgroundPic.png) no-repeat 70% 62%;
        background-size: 270% 70%;
        aspect-ratio: 1/1.5;
        flex-direction: column-reverse;
        justify-content: center;
    }

    #doctorPic {
        background-color: #5c6a8a;
        width: 270px;
        border-radius: 50%;
        aspect-ratio: 1/1;
        overflow: hidden;
        position: relative;
        top: 12%;
        margin-right: 0%;
        margin-bottom: 0%;
        box-shadow: inset 0px -20px 50px 1px #ccc, 0px 20px 50px 1px #ccc;
    }

        #doctorPic > img {
            position: relative;
            top: 30px;
        }

    #doctorInformation {
        width: 100%;
        margin-bottom: 0%;
        position: relative;
        top: 17%;
    }

        #doctorInformation > a {
            font-size: 5.5vw;
            font-family: bt;
            line-height: 10vw;
        }

        #doctorInformation > #doctorName {
            font-size: 7vw;
        }

    /* #endregion content doctorInformationAndPic */
    /* #region content 750px homeSlider */
    #homeSlider {
        top: 0px;
        padding-top: 220px;
        padding-bottom: 200px;
    }

    #homeSliderBox {
        aspect-ratio: 2/1;
    }

    #homeSliderDiv {
        width: 85%;
        flex-direction: column;
    }

    #homeSlider_leftMoveButton {
        display: none;
    }

    #homeSlider_rightMoveButton {
        display: none;
    }

    #homeSliderDiv > .homeSliderItem {
        height: 10%;
        width: 80%;
        border-radius: 4.5vw;
        box-shadow: 0px 45px 40px 0px lightslategray;
    }

        #homeSliderDiv > .homeSliderItem > img {
            width: 150%;
            height: auto;
        }

    #homeSliderDiv > .homeSliderItemMove > a {
        font-size: 5vw;
        border-radius: 4vw;
        font-family: vb;
    }

    #homeSliderDiv > .homeSliderItemMove > span {
        font-size: 2.5vw;
        text-align: justify;
        border-radius: 4vw;
        font-family: vb;
    }

    #homeSliderDiv > .homeSliderItemMove {
        width: 100%;
        height: 60%;
    }

    /* #endregion content 750px homeSlider */
    /* #region content 750px doctorIntroduction */
    #doctorIntroductionDiv {
        padding-top: 110px;
        padding-bottom: 0px;
    }

    #doctorIntroductionBox {
        background-color: #dfe6e6;
    }

    #doctorIntroduction {
        aspect-ratio: 1/1.7;
        border-radius: clamp(1px, 7vw, 45px);
        background-color: #5c6a8a;
        width: 90%;
        box-shadow: inset 0px -10px 10px -10px lightslategray, 0px 45px 40px 0px lightslategray;
    }

    #doctorIntroductionTextDiv {
        width: 100%;
        height: 50%;
        position: absolute;
        bottom: 0;
        align-items: center;
    }

        #doctorIntroductionTextDiv > span {
            margin-top: 0%;
            margin-left: 0%;
            position: absolute;
            top: 9%;
            font-size: clamp(1px, 6.5vw, 100px);
            font-family: vb;
        }

        #doctorIntroductionTextDiv > p {
            width: 90%;
            font-size: 4vw;
            backdrop-filter: blur(0px) brightness(100%);
            margin-left: 0%;
            margin-top: 0%;
            position: absolute;
            top: 30%;
            font-family: vb;
        }

    #doctorIntroductionPicDiv > img {
        height: 50%;
        position: absolute;
        right: -2.5%;
    }

    #doctorMiniIntroductionDiv {
        padding-bottom: 0px;
    }

    #doctorMiniIntroductionBox {
        width: 90%;
    }

    #doctorMiniIntroduction > .miniIntroduction {
        border-radius: 7vw;
        gap: 5vw;
        padding-top: 3%;
        padding-bottom: 9%;
        padding-right: 1%;
        padding-left: 1%;
        align-items: center;
        box-shadow: inset 0px -10px 10px -10px lightslategray, 0px 30px 40px -10px lightslategray;
    }

        #doctorMiniIntroduction > .miniIntroduction > span {
            font-size: 4vw;
            width: 90%;
            padding: initial;
            font-family: vb;
        }

        #doctorMiniIntroduction > .miniIntroduction > .miniIntroductionTitle {
            font-size: 7vw;
            width: auto;
            padding-top: 5%;
            padding-right: initial;
            font-family: vb;
        }

    #miniIntroduction1 {
        width: 90%;
        right: initial;
        left: initial;
    }

    #miniIntroduction2 {
        width: 90%;
        right: initial;
        left: initial;
    }

    #miniIntroduction3 {
        width: 90%;
        right: initial;
        left: initial;
    }

    #doctorMiniIntroduction > .introductionIcon {
        width: 30%;
        position: relative;
        padding-top: 70px;
    }

    #introductionIcon1 {
        background: url(../images/introductionIcon/introductionIcon1.png) no-repeat 100% 110%;
        background-size: 100%;
        left: initial;
    }

    #introductionIcon2 {
        background: url(../images/introductionIcon/introductionIcon2.png) no-repeat 100% 100%;
        background-size: 100%;
        right: initial;
    }

    #introductionIcon3 {
        background: url(../images/introductionIcon/introductionIcon3.png) no-repeat 100% 90%;
        background-size: 100%;
        left: initial;
    }

    /* #endregion content 750px doctorIntroduction */
    /* #region content 750px dayAndTime - Mobile Grid Layout */
    
    #dayAndTimeDiv {
        padding: 80px 0 60px 0;
    }

    #dayAndTimeBox {
        width: 90%;
        gap: 30px;
    }

    #dayAndTimeBox > .headerPart > #dayAndTimeMainTitle {
        font-size: 8vw;
        font-family: vb;
    }

    /* Switch to 2-column grid for mobile */
    #dayAndTimeBox > .dayAndTimePart {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime {
        min-height: 120px;
        padding: 18px 12px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .weekDayName {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .weekDayName > span {
        font-size: 5.5vw;
        font-family: vb;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourTitleName > span {
        font-size: 4vw;
        font-family: vb;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourNum > span {
        font-size: 4.5vw;
        font-family: vb;
    }

    #addressBox {
        gap: 12px;
        padding: 18px 10px;
    }

    #addressIconPic {
        width: 32px;
        height: 32px;
    }

    #addressText > span {
        font-size: 4.2vw;
        font-family: vb;
    }

    #telBox {
        gap: 12px;
        padding: 15px 10px;
    }

    #telephonePic {
        width: 32px;
        height: 32px;
    }

    #telephoneText > span {
        font-size: 4.5vw;
        font-family: vb;
    }

    /* #endregion content 750px dayAndTime */
}

/* Tablet & Large Mobile */
@media screen and (max-width:650px) {
    #dayAndTimeBox {
        width: 92%;
        gap: 28px;
    }

    #dayAndTimeBox > .headerPart > #dayAndTimeMainTitle {
        font-size: 7.5vw;
    }

    #dayAndTimeBox > .dayAndTimePart {
        gap: 11px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime {
        min-height: 125px;
        padding: 20px 14px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .weekDayName > span {
        font-size: 5.8vw;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourTitleName > span {
        font-size: 4.2vw;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourNum > span {
        font-size: 4.8vw;
    }

    #addressIconPic {
        width: 34px;
        height: 34px;
    }

    #addressText > span {
        font-size: 4.3vw;
    }

    #telephonePic {
        width: 34px;
        height: 34px;
    }

    #telephoneText > span {
        font-size: 4.7vw;
    }
}

/* Small Mobile */
@media screen and (max-width:480px) {
    #dayAndTimeDiv {
        padding: 70px 0 50px 0;
    }

    #dayAndTimeBox {
        width: 94%;
        gap: 25px;
    }

    #dayAndTimeBox > .headerPart > #dayAndTimeMainTitle {
        font-size: 8vw;
        letter-spacing: -0.3px;
    }

    #dayAndTimeBox > .dayAndTimePart {
        gap: 11px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime {
        min-height: 120px;
        padding: 18px 12px;
        border-radius: 14px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .weekDayName > span {
        font-size: 6vw;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourTitleName > span {
        font-size: 4.3vw;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourNum > span {
        font-size: 4.9vw;
    }

    #addressIconPic {
        width: 36px;
        height: 36px;
    }

    #addressText > span {
        font-size: 4.4vw;
    }

    #telephonePic {
        width: 36px;
        height: 36px;
    }

    #telephoneText > span {
        font-size: 4.9vw;
    }
}

/* Extra Small Mobile - iPhone 8 & Smaller Devices */
@media screen and (max-width:375px) {
    #dayAndTimeDiv {
        padding: 60px 0 50px 0;
    }

    #dayAndTimeBox {
        width: 95%;
        gap: 22px;
    }

    #dayAndTimeBox > .headerPart > #dayAndTimeMainTitle {
        font-size: 8.5vw;
        letter-spacing: -0.5px;
    }

    #dayAndTimeBox > .dayAndTimePart {
        gap: 10px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime {
        min-height: 115px;
        padding: 16px 10px;
        border-radius: 13px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .weekDayName {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .weekDayName > span {
        font-size: 6.3vw;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourTitleName {
        margin-bottom: 6px;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourTitleName > span {
        font-size: 4.5vw;
    }

    #dayAndTimeBox > .dayAndTimePart > .dayAndTime > .hourNum > span {
        font-size: 5.2vw;
    }

    #addressBox {
        gap: 10px;
        padding: 16px 8px;
    }

    #addressIconPic {
        width: 38px;
        height: 38px;
    }

    #addressText > span {
        font-size: 4.7vw;
        line-height: 1.75;
    }

    #telBox {
        gap: 10px;
        padding: 14px 8px;
    }

    #telephonePic {
        width: 38px;
        height: 38px;
    }

    #telephoneText {
        gap: 6px;
    }

    #telephoneText > span {
        font-size: 5.3vw;
        line-height: 1.5;
    }
}

@media screen and (max-width:750px) {
    #blogDiv {
        /* background-color: aqua; */
        /* aspect-ratio: 1/3; */
        width: 100%;
        /* height: 450px; */
        /* padding-top: 5%; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #blogBox {
        /* background-color: green; */
        width: 75%;
        height: auto;
        max-width: 1800px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    #blogTitle {
        /* background-color: aqua; */
        height: 70%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #blogTitle > span {
            /* padding-right: 3%; */
            /* padding-left: 3%; */
            color: #3c4458;
            direction: rtl;
            text-align: justify;
            font-family: vb;
            position: relative;
            top: 10%;
            font-size: clamp(20px, 7vw, 40px);
        }

    .articleBox {
        border-radius: 0.5vw;
        width: 100%;
        height: auto;
        padding-bottom: 7%;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
        border: 0;
        box-shadow: inset 0px 0px 0px 0px lightslategray, 0px 0px 0px 0px lightslategray;
    }

        .articleBox:hover {
            box-shadow: inset 0px 0px 0px 0px lightslategray, 0px 0px 0px 0px lightslategray;
        }

    .articlePic {
        /* background-color: gold; */
        border-radius: 3vw;
        width: 100%;
        min-height: 200px;
        max-height: 250px;
        overflow: hidden;
        box-shadow: inset 0px -10px 10px -10px lightslategray, 0px 25px 40px -10px lightslategray;
    }

        .articlePic > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .articleTitle {
        /* background-color: aqua; */
        /* background-color: blue; */
        border-radius: 0.5vw;
        width: 100%;
        height: auto;
        margin-top: -2%;
    }

        .articleTitle a {
            display: block;
            width: 100%;
        }

            .articleTitle a h2 {
                /* padding-right: 3%; */
                /* padding-left: 3%; */
                direction: rtl;
                padding: 15px 5px 10px 5px;
                text-align: center;
                font-family: vb;
                font-size: clamp(16px, 5vw, 24px);
                line-height: 1.4;
                margin: 0;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

    .articleSubHeading {
        /* background-color: darkorchid; */
        border-radius: 0.5vw;
        width: 100%;
        height: auto;
    }

        .articleSubHeading > h2 {
            padding: 5px 4% 12px 4%;
            direction: rtl;
            text-align: justify;
            font-family: vm;
            font-size: clamp(14px, 4vw, 20px);
            line-height: 1.5;
            margin: 0;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

    #moreArticleButtonDiv {
        /* background-color: aqua; */
        height: 24%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #moreArticleButton {
        color: #3c4458;
        border-radius: 7vw;
        padding: 15px 30px;
        font-family: vm;
        font-size: 5vw;
        border: 1px solid gray;
        cursor: pointer;
    }

        #moreArticleButton:hover {
            background-color: aliceblue;
        }


    /* #region content 750px homeQuestions */
    #homeQuestionsDiv {
        width: 90%;
        margin-left: 0%;
        margin-right: 0%;
        padding-top: 0px;
        padding-bottom: 150px;
    }

    #questionsHeaderTitle {
        padding-top: 130px;
        padding-bottom: 20px;
    }

        #questionsHeaderTitle > span {
            font-family: vb;
            font-size: 7vw;
        }

    #homeQuestionsBox > .questionsDiv {
        height: auto;
        border-radius: 3vw;
    }

        #homeQuestionsBox > .questionsDiv > .questions > span {
            font-size: 5vw;
            padding-left: 5%;
            padding-right: 5%;
            padding-bottom: 4%;
            padding-top: 4%;
            margin-right: 0%;
            margin-top: 0vw;
            margin-bottom: 0vw;
            font-family: vb;
        }

        #homeQuestionsBox > .questionsDiv > .answers {
            padding-left: 5%;
            display: none;
        }

            #homeQuestionsBox > .questionsDiv > .answers > span {
                font-size: 3vw;
            }

    #homeQuestionsBox > .questionsWithAnswersDiv > .answers {
        display: flex;
    }

    /* #endregion content 750px homeQuestions */
}

/* Small Mobile - General */
@media screen and (max-width:480px) {
    #doctorInformationAndPic {
        aspect-ratio: 1/1.7;
    }

    #doctorPic {
        width: 240px;
    }

    #homeSliderDiv > .homeSliderItemMove > span {
        font-size: 3.2vw;
    }

    #doctorIntroduction {
        width: 95%;
    }

    #doctorMiniIntroduction > .miniIntroduction {
        width: 95%;
    }

    #doctorMiniIntroduction > .miniIntroduction > span {
        font-size: 4.2vw;
    }

    #doctorMiniIntroduction > .miniIntroduction > .miniIntroductionTitle {
        font-size: 7.5vw;
    }

    #blogBox {
        width: 90%;
    }

    .articleListBox {
        width: 100%;
        margin-bottom: 30px;
    }

    .articleTitle a h2 {
        font-size: clamp(15px, 4.2vw, 22px);
        line-height: 1.35;
        padding: 12px 4% 10px 4%;
    }

    .articleSubHeading > h2 {
        font-size: clamp(13px, 3.7vw, 18px);
        line-height: 1.55;
        padding: 5px 4% 10px 4%;
    }

    #homeQuestionsDiv {
        width: 95%;
    }

    #homeQuestionsBox > .questionsDiv > .questions > span {
        font-size: 5.2vw;
    }

    #homeQuestionsBox > .questionsDiv > .answers > span {
        font-size: 3.5vw;
    }
}

/* Extra Small Mobile - iPhone 8 & Similar */
@media screen and (max-width:375px) {
    #doctorPic {
        width: 200px;
    }

    #doctorInformation > a {
        font-size: 6vw;
        line-height: 11vw;
    }

    #doctorInformation > #doctorName {
        font-size: 7.5vw;
    }

    #homeSliderDiv > .homeSliderItemMove > a {
        font-size: 6vw;
        padding: 4%;
    }

    #homeSliderDiv > .homeSliderItemMove > span {
        font-size: 3.8vw;
        width: 90%;
    }

    #doctorIntroductionTextDiv > span {
        font-size: 7vw;
    }

    #doctorIntroductionTextDiv > p {
        font-size: 4.8vw;
        line-height: 1.5;
    }

    #doctorMiniIntroduction > .miniIntroduction > span {
        font-size: 4.5vw;
    }

    #doctorMiniIntroduction > .miniIntroduction > .miniIntroductionTitle {
        font-size: 8vw;
    }

    #blogTitle > span {
        font-size: 7.5vw;
    }

    .articleTitle a h2 {
        font-size: clamp(14px, 4.5vw, 21px);
        line-height: 1.4;
        padding: 10px 3% 8px 3%;
    }

    .articleSubHeading > h2 {
        font-size: clamp(12px, 3.9vw, 17px);
        line-height: 1.6;
        padding: 5px 4% 10px 4%;
    }

    #moreArticleButton {
        font-size: 5.5vw;
        padding: 12px 25px;
    }

    #homeQuestionsBox > .questionsDiv > .questions > span {
        font-size: 5.5vw;
    }

    #homeQuestionsBox > .questionsDiv > .answers > span {
        font-size: 3.8vw;
    }

    #questionsHeaderTitle > span {
        font-size: 7.5vw;
    }
}