html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/*HomePage*/
.slogan .banner {
    margin-left: 10px;
}

.slogan .banner p {
    margin-bottom: 5px;
    max-height: 30px;
    color: #bb2243;
}

.slogan .banner p:first-child {
    font-size: 1.25rem;
    color: #27779F;
}

.slogan .banner p:last-child {
    font-size: 0.875rem;
    color: #1b7b57;
}

.slogan .banner img {
    max-height: 100px;
}

.header .topbar {
    background-color: white;
}

.icon img {
    width: 40px;
}

.navmenu ul {
    align-items: center; 
}

.nav-search {
    padding-left: 15px; 
}

/* Khung bọc input và button */
.search-form-inline .input-group-custom {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px; /* Bo tròn cho hiện đại */
    padding: 2px 10px;
    width: 100%; /* Độ rộng vừa phải để không lấn át menu */
    transition: 0.3s;
}

.search-form-inline .input-group-custom:focus-within {
    border-color: #4ab3e6; /* Màu xanh header khi nhấn vào */
    box-shadow: 0 0 5px rgba(74, 179, 230, 0.3);
}

/* Tùy chỉnh ô input */
.search-form-inline input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    width: 100%;
    color: #333;
    padding: 5px;
}

/* Tùy chỉnh nút search */
.search-form-inline button {
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 5px;
}

    .search-form-inline button:hover {
        color: #4ab3e6;
    }

/* Ẩn search trên Mobile nếu menu quá chật, hoặc hiển thị khác đi */
@media (max-width: 1199px) {
    .nav-search {
        padding: 10px 20px;
    }

    .search-form-inline .input-group-custom {
        width: 100%;
    }
}
/* Chỉ nhắm vào thẻ li có class nav-search */
.navmenu ul li.nav-search {
    border: none !important; /* Xóa border của thẻ li */
    background: none !important; /* Xóa nền nếu có */
}

.navmenu ul li.nav-search::before,
.navmenu ul li.nav-search::after {
    content: none !important;
    display: none !important;
}

/* Đảm bảo khi hover vào thẻ li này, nó không hiện lại border */
.navmenu ul li.nav-search:hover {
    border: none !important;
    box-shadow: none !important;
}

.nav-search {
    button {
        background-color: green;

        i {
            color: white;
        }
    }

    button:hover {
        background-color: green;
    }
}

.news-content .news-post .news-post-item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;

    :first-child {
/*        margin-top: 10px;*/
    }
}

.news-content {
    .news-post {
        width: 100%;
    }
}

.news-content .news-post .news-post-item .post-item-content {
    padding-left: 15px;
    width: 90%;
}

.news-content .news-post .news-post-item .post-item-content a {
    color: black;
    font-weight: bold;
}

.news-content .news-post .news-post-item .post-item-content .post-item-title a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.news-content .news-post .news-post-item .post-item-content .post-item-date {
    font-size: 13px;
}

.news-content .news-post {
    h3 {
        font-weight: bold;
    }
    h3:hover {
        color: var(--accent-color);
    }
}


.news-content {
    .news-post {
        .news-post-item {
            .post-item-img {
                position: relative;
                width: 20%;

                .badge-new {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    background-color: #e74c3c; /* Màu đỏ */
                    color: white;
                    padding: 2px 8px;
                    font-size: 11px;
                    font-weight: bold;
                    border-radius: 3px;
                    z-index: 10;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                    pointer-events: none; /* Tránh cản trở việc click vào ảnh */
                }
            }
        }
    }
}

.news-poster {
    padding: 20px;
    width: 380px;
    margin-left: 20px;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);

    h3 {
        font-weight: bold;
    }

    .news-poster-video {
        margin-top: 10px;
    }

    .news-poster-pics {
        .pics-item {
            margin-top: 20px;

            a {
                img {
                    width: 100%;
                }
            }
        }
    }
}

.featured-services {
/*    background-image: url('/images/backgrond_linen.jpg');*/
    background-repeat: repeat;
    padding: 40px 0px;

    .service-item {
        width: 100%;

        a {
            h4 {
                color: white;
            }
        }
    }
}

.featured-services-card {
    border-right: 3px dashed var(--accent-color);
    padding: 20px;
    width: 300px;

    .text {
        padding-bottom: 5px; 
        margin-left: 10px;
        a {
            color: var(--accent-color);
            font-weight: bold;
            font-size: 20px;
            text-transform: uppercase;
        }

            a:hover {
                color: #2e7ea5;
            }
    }

    .icon {
        font-size: 40px;
        color: var(--accent-color);
        
    }
}

.featured-services-card:last-child {
    border:none;
}

.activity-news {
    margin-bottom: 20px;
    .activity-title:hover {
        h3 {
            color: var(--accent-color);
        }
    }
    .activity-news-container {
        .activity-card {
            width: 24%;
            margin-right: 1%;

            .activity-img {
                height: 200px;
                overflow:hidden;
                border-radius: 4px;

                a {
                    img {
                        height: 100%;
                        width: auto;
                    }
                }

                    a:hover {
                        img {
                            transform: scale(1.1);
                            transition: transform 0.3s ease;
                        }
                    }
            }

            .activity-info {
                p {
                    font-size: 13px;

                    span {
                        background-color: red;
                        color: white;
                        padding: 2px 6px;
                        border-radius: 5px;
                        font-size: 10px;
                        margin-left: 10px;
                    }
                }

                a {
                    color: black;
                    font-weight: bold;
                }

                    a:hover {
                        text-decoration: underline;
                        color: var(--accent-color);
                    }
            }
        }

            .activity-card:last-child {
                margin-right: 0;
            }
    }
}

/* Container chính: Ẩn phần thừa và tạo không gian cho dải nội dung */
.highlight-section {
    padding: 40px 0;
/*    background-color: linen;*/
/*    border-top: 2px solid #ddd;*/
/*    background-image: url('/images/backgrond_linen.jpg');*/
    overflow: hidden; /* Quan trọng: Ẩn các box nằm ngoài màn hình */
    position: relative;
    margin-bottom: 20px;
}

/* Dải nội dung: Chứa 2 nhóm đối xứng */
.highlight-content {
    display: flex;
    width: max-content; /* Buộc container phải dài theo tổng các item */
    animation: marquee 25s linear infinite; /* Chỉnh thời gian (25s) để nhanh/chậm */
}

/* Nhóm các item: Chia làm 2 nhóm giống hệt nhau */
.highlight-content-inner {
    display: flex;
    flex-shrink: 0; /* Ngăn không cho nhóm bị co lại */
}

/* Các hộp nội dung chi tiết */
.training-box {
    flex-shrink: 0; /* Giữ nguyên kích thước, không bị bóp méo */
    width: 500px; /* Độ rộng cố định cho mỗi box */
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 2px 2px 12px 9px rgba(0, 0, 0, 0.08);
    margin: 0 15px; /* Khoảng cách giữa các box */
    white-space: normal; /* Cho phép chữ bên trong xuống dòng */
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    p {
        min-height: 50px;
    }

    h2 {
        text-transform: uppercase;
        font-size: 25px;
    }
}

    /* Hiệu ứng khi di chuột vào từng box */
    .training-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

/* Tạm dừng toàn bộ dải băng khi di chuột vào section */
.highlight-section:hover .highlight-content {
    animation-play-state: paused;
}

/* Logic Animation: Chạy đến -50% (hết Nhóm 1) rồi reset về 0 ngay lập tức */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Điều chỉnh cho thiết bị di động (Mobile) */
@media (max-width: 767px) {
    .training-box {
        width: 300px; /* Thu nhỏ box trên màn hình nhỏ */
        padding: 15px;
    }

    .highlight-content {
        animation-duration: 15s; /* Chạy nhanh hơn một chút trên mobile vì quãng đường ngắn hơn */
    }

    .slogan {
        text-align: center;
    }
}

/* Tối ưu cho nút bấm bên trong box */
.training-box .btn {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
}

/*Css Footer*/
.footer {
    color: white;

    h4 {
        min-height: 50px;
        color: white;
        font-size: calc(1rem + 0.3vw)
    }

    .footer-top {
        .footer-contact {
            .footer-links {
                a {
                    color: white;
                }
            }
        }
    }

    .footer-links {
        ul {
            li {
                a {
                    color: white;
                }

                    a:hover {
                        color: white;
                    }
            }
        }
    }

    .footer-line {
        width: 100px;
        height: 3px;
        background-color: white;
    }

    .footer-bottom {
        border-top: 1px solid white;
    }
}

.featured-news-container {
    width: 70%;

    .news-post {
        width: 100%;
    }
}

.contact {
    background-image: url('/images/backgrond_linen.jpg');
    background-repeat: repeat;
    margin-top: 20px;
}

.fa-facebook {
    color: blue;
    font-size: 20px !important;
}

.fa-youtube {
    color: red;
    font-size: 20px !important;
}

/*ContactPage*/
.contact-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.contact-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
}

.contact-form {
    padding: 30px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);

    
}
.contact-info {
    background-color: #1a76d1;
    border-radius: 10px;
    padding: 20px 60px;
    color: white;
    text-align:justify;
    font-size: 0.9rem;
    transition: all 0.3s ease-out 0s;

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

    a:hover {
        color: var(--accent-color);
    }
}

.contact-info:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease-out 0s
}

.news-special {
    background-image: url('/images/news_bg.jpg');
    background-repeat: repeat;
    padding: 30px 0px;

    .news-special-title {
        min-width: 220px;
        padding-inline: 10px;
        border-right: 1px solid #dee2e6;
    }

    .nav-item {

        img {
            width: 20px;
        }

        .nav-link {
            font-weight: bold;
        }
    }
}
    
.custom-tabs {
    background-color: #f8f9fa;
    border-bottom: 2px solid #0076c0; /* Màu xanh đặc trưng ngành y */
}

    .custom-tabs .nav-link {
        color: #3b61b9;
        font-weight: 500;
        border: none;
        border-radius: 5px 5px 0 0;
        margin-right: 5px;
        padding: 10px 20px;
    }

    .custom-tabs .nav-link.active {
        background-color: #3b61b9;
        color: white;
        border: 1px solid #dee2e6;
        border-bottom-color: #fff;
        position: relative;
        top: 1px;
    }

.tab-content {
    background: #fff;
    min-height: 200px;

    a {
        color: #3b61b9;
    }

    a:hover {
        text-decoration: underline;
    }
}

.pro-features {
    position: fixed;
    right: -300px;
    width: 300px;
    height: auto;
    line-height: 46px;
    font-size: 14px;
    background: #fff;
    text-align: left;
    color: #333;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: -4px 0px 5px #00000036;
    color: #fff;
    z-index: 9999;
    padding: 20px 30px 30px 30px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.pro-features.active {
    right: 0;
    }

.pro-features li.big-title {
    font-weight: 600;
    color: #1A76D1;
    font-size: 15px;
}

.pro-features li.title {
    font-weight: 600;
    color: #1A76D1;
    font-size: 15px;
}

/*    .pro-features .button {
}*/

.pro-features .button .btn {
    width: 100%;
    text-align: center;
    margin-top: 8px;
    display: inline-block;
/*    float: left;*/
    font-size: 13px;
    width: 100%;
    text-transform: capitalize;
}

.pro-features li {
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 22px;
    margin-bottom: 10px;
}

.utilities {
    position: absolute;
    left: -45px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    border-radius: 5px 0 0 5px;
    background: var(--accent-color);
    text-align: center;
    color: white;
/*        top: 0;*/
    cursor: pointer;
    box-shadow: -4px 0px 5px #00000036;
}

.utilities:hover{
    color:  black;
}

.btn-utility {
    background-color: var(--accent-color);
    transition: background-color 0.3s ease; 
}

.btn-utility:hover {
    background-color: #0076c0;
}

/*    CSS page newsDetail*/
.page-header {
    background-image: url('/images/background-medical.jpg');
    background-repeat: repeat;
    padding: 30px 0px;
    border-left: 5px solid #0076c0;
    border-radius: 10px 0px 0px 10px;
    margin-bottom: 20px;
}

.news {
    min-width: 70%;

    .news-detail {
        padding-bottom: 10px;
        border-bottom: 2px solid #00000036;

        .news-detail-date {
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: grey;
        }

        .news-detail-body {

            .author {
                text-align: right;
            }

            .image,p:has(img) {
                text-align: center;

                img {
                    width: 70%;
                    height: auto;
                }
            }
        }
    }

    .news-list {
        margin-top: 10px;

        h3 {
            font-weight: bold;
        }

        .news-list-container {
            padding: 15px;
            background-color: #f4f4f4;
            list-style-type: none;

            .news-list-item {
                padding: 0px 10px;

                a {
                    color: black;

                    span {
                        color: grey;
                        font-size: 0.9rem;
                    }
                }

                    a:hover {
                        text-decoration: underline;
                    }
            }
        }
    }
}

/*    Css pagination*/
.pagination {
    display: flex;
    list-style: none;
    border-radius: 0.375rem;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--accent-color);
    border-color: #0d6efd;
}

.page-link {
    position: relative;
    display: block;
    padding: 0.375rem 0.75rem;
    color: #0d6efd;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

/*    Css NewsCategory*/
.post-container {
    width: 70%;

    .post-item {
        padding: 10px;
        margin-bottom: 10px;

        .post-image {
            width: 20%;
            margin-right: 10px;
        }

        .post-title {
            width: 80%;
            margin-right: 20px;

            a {
                color: black;
            }

                a:hover {
                    text-decoration: underline;
                }
        }
    }
}

.btn-submit {
    background-color: dodgerblue;
    color: white;
    
}

.btn-submit:hover {
    font-weight: bold;
    background-color: deepskyblue;
    color: white;
}

.search-form {
    box-shadow: -4px 0px 5px #00000036;
    border-radius: 10px;
    padding: 20px;
}

/*Appointment Page*/

.appointment-form {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-top: -40px;
    margin-bottom: 30px;
}

/*TreeView Css*/
.tree-container {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.tree-title {
    color: #2c5e8c;
    font-weight: bold;
    margin-bottom: 20px;
}

.tree, .tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree ul {
    margin-left: 25px; 
}

.tree li {
    margin: 0;
    padding: 5px 0 5px 20px;
    position: relative;
    color: #444;
}
        
.tree li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-left: 1px solid #666;
    height: 100%;
}
                
.tree li::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    border-top: 1px solid #666;
    width: 15px;
}

.tree li:last-child::before {
    height: 15px;
}

.tree-toggle {
    cursor: pointer;
    font-weight: 500;
    color: black;

    .icon {
        display: inline-block;
        width: 15px;
    }

        .icon::before {
            content: "\2212";
        }
}

/* Class khi bị đóng */
.tree-collapsed ul {
    display: none;
}

/* Xoay mũi tên khi đóng */
.tree-collapsed > .tree-toggle .icon::before {
    content: "+";
}

.tree-toggle::before {
    transition: transform 0.2s ease; /* Hiệu ứng xoay mượt mà */
}

.tree a{
    color: black;
}

/*Special Department Page*/
.special-department-container {
/*    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);*/
/*    width: 70%;*/
    border-radius: 10px;

    .nav-pills .nav-link {
        color: #333;
        font-weight: bold;
        text-transform: uppercase;
        border-radius: 0;
        padding: 15px 20px;
        border-bottom: 1px solid #dee2e6;
        text-align: left;
        background-color: #f8f9fa;
    }

    .nav-pills .nav-link.active {
/*        background-color: #fff !important;*/
        color: #007bff !important;
        border-left: 4px solid #42b4ec; /* Vạch xanh bên trái khi active */
    }

    .tab-content {
        padding: 30px;
        border-left: 1px solid #dee2e6;
        min-height: 400px;
        border-radius: 10px;
    }

    .section-title {
        color: #555;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .tab-pane {
        img {
            width: 100%;
            height: auto;
        }
    }
}

/*Employee Page*/
.doctor-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 24px;
    margin-top: 2rem;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    border-left: 5px solid #42b4ec; /* Đường viền màu xanh lá cây làm điểm nhấn */

    img {
        width: 100%;
        height: auto;
    }
}

.doctor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}



.doctor-card-image {
    width: 20%;
    margin-right: 20px;

    img {
        border-color: #28a745 !important;
        width: 100%;
        border-radius: 8px;
    }
}


.doctor-card-info {
    flex: 1; 
}

.doctor-name {
/*    font-size: 1.5rem; */
    font-size: 1.3rem; 
    font-weight: 700;
    color: #343a40; 
    margin-bottom: 4px;
}

.doctor-specialty {
    font-size: 1rem; 
    font-weight: 500;
    color: #3b61b9; 
    margin-bottom: 16px;
}

.doctor-details-table {
    width: 100%;
    border-collapse: collapse;
}

.doctor-details-table td {
    padding: 8px 0;
    vertical-align: top;
    font-size: 0.95rem; /* 15px */
}

.doctor-details-table tr:not(:last-child) td {
    border-bottom: 3px solid #e9ecef; 
}

.doctor-details-table td:first-child {
    font-weight: 600;
    color: #495057;
    width: 130px;
    white-space: nowrap;
    padding-right: 1rem;
}

.doctor-details-table td i.fa {
    width: 20px; 
    text-align: center;
}

.blue {
    color: #3b61b9;
}

.employee-container{
    width: 70%;
}

/* Chỉ áp dụng position: relative khi CHƯA có class fixed-top */
.branding:not(.fixed-top) {
    position: relative;
}

/* Các thuộc tính giữ cho menu không bị mất khi hover ở trang chủ */
.branding {
    z-index: 9999;
    overflow: visible !important;
}

/*Responsive*/
@media screen and (max-width: 1023px){
    .slogan .banner p {
        font-size: 1rem !important;
    }

    .topbar .header-info {
        display: none;

        .navmenu {
            ul {
                display: flex;
            }
            
        }
    }

    .custom-tabs {
        display: flex !important;
        flex-wrap: nowrap !important; 
        overflow-x: auto !important;
        overflow-y: hidden;
        white-space: nowrap; 
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none; 
        padding-bottom: 5px;
    }

    .custom-tabs::-webkit-scrollbar {
        display: none;
    }

    .custom-tabs .nav-item {
        flex: 0 0 auto; 
    }

    .custom-tabs .news-special-title {
        min-width: max-content; 
        padding-right: 15px;
    }

    .wrap-content {
        flex-direction: column;

        .special-department-container {
            width: 100%;
        }
    }

    .news-poster {
        display: none;
    }

    .employee-container {
        width: 100%;
    }

    .doctor-container {
        width: 100%;

        .doctor-card-image {
            text-align: center;
            margin-bottom: 15px;
            width: 100%;

            img{
                width: 200px;
/*                height: auto;*/
            }
        }
    }

    .featured-news-container {
        width: 100%;
    }

    .activity-news {
        .activity-news-container {
            flex-wrap: wrap;

            .activity-card {
                padding-inline: 10px;
                width: 49%;
                margin-top: 15px;
            }
        }
    }

    .post-container {
        width: 100%;
    }
}

/*social icon*/
/* Container tổng */
.contact-fixed-left {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column; /* Xếp chồng lên nhau theo chiều dọc */
    gap: 15px; /* Khoảng cách giữa 2 nút */
    z-index: 9999;
}


/* Hiệu ứng rung nhẹ (tuỳ chọn) */
@keyframes smooth-shake {
    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.1) rotate(3deg);
    }

    20% {
        transform: scale(1.1) rotate(-3deg);
    }

    30% {
        transform: scale(1.1) rotate(3deg);
    }

    40% {
        transform: scale(1.1) rotate(-3deg);
    }

    50% {
        transform: scale(1.1) rotate(0);
    }

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

/* Style chung cho icon */
.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background-color: #fff; 
    padding: 5px;
    animation: smooth-shake 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
    backface-visibility: hidden;
}

    .contact-icon img {
        width: 100%;
        height: auto;
    }

    /* Hiệu ứng khi di chuột vào */
    .contact-icon:hover {
        transform: scale(1.1) translateY(-5px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    }


.contact-icon:hover {
    animation-play-state: paused;
    transform: scale(1.2);
}

@media screen and (max-width: 440px){
    .topbar .header-info {
        display: none !important;
    }

    

    .slogan .banner p{
        font-size: 0.75rem !important;
    }

    .slogan {
        text-align: center;
    }

    .news-content {
        display: flex;
        flex-direction: column;
    }

    .post-container {
        width: 100%;
    }

    .news-poster {
        display:block;
        margin-left: 0px;
        padding-bottom: 0px;
    }

    .featured-news-container {
        width: 100%;
    }

    .news-content {
        .news-post {
            width: 100%;
        }
    }

    .wrap-content {
        flex-direction: column;
        margin-bottom: 10px;

        .special-department-container {
            width: 100%;
        }
    }

    .employee-container {
        width: 100%;
    }

    .doctor-container {
        width: 100%;
    }

    .doctor-card {
        margin-bottom: 0px;
        width: 100%;

        .doctor-wrapper {
            flex-direction: column;

            .doctor-card-image {
                align-items: center;
                margin-bottom: 5px;
                width: 100%;

                img {
                    width: 150px;
                }
            }
        }
    }


    .contact {
        .info-item {
                padding-inline: 10px;
                text-align: center;
        }
    }

    .copyright p {
        padding-inline: 10px;
    }


    .activity-news {
        .activity-news-container {
            flex-direction: column;

            .activity-card {
                width: 100%;
                margin-top: 15px;
                margin-bottom: 10px;
                border-bottom: 1px solid #ddd;

                .activity-info {
                    margin-bottom: 5px;
                }
            }

            .activity-card:last-child {
                margin-bottom: 30px;
            }
        }
    }

    .featured-services-container {
        flex-direction: column;
        align-content: center;

        .featured-services-card {
            width: 100%;
            margin-bottom: 20px;
            border-right: none;
            border-bottom: solid 3px var(--accent-color);
            
        }
    }
}