@font-face {
    font-family: ELLE;
    src: url('/Content/QRCode/assets/font/elle-futura-book.otf');
}

body {
    color: black;
    font-family: ELLE !important;
}

a {
    text-decoration: none;
}

.title-text-tlco {
    color: #d12424;
}

.header-bottom.header-sticky.sticky-bar, .header-transparent {
    background: linear-gradient(to right, #d3be93 0%, #f2e8d3 100%) !important;
    background-image: none;
}

.header-area .main-header .main-menu ul li a {
    color: #762121;
    font-size: 18px;
    padding: 11px;
}

.header-area .main-header .main-menu ul ul.submenu {
    left: 0 !important;
    width: 230px;
}

ul {
    margin-bottom: 0;
}


.bg-info-card {
    background: linear-gradient(to bottom, #dad0ac 0%, #cfddcf94 100%);
}

.box {
    flex-basis: 17%;
    background: linear-gradient(to bottom, #e3d3b3 0%, #99996642 100%);
}

.box-border {
    border: 5px groove #d9b58e;
}

.box-f {
    flex-basis: 17%;
    background: linear-gradient(to bottom, #e3d3b3 0%, #99996642 100%);
}

.box-border-f {
    border: 5px groove #FFFF;
}

.fb-share-button {
    left: 0;
    position: absolute !important;
    top: 0;
    z-index: 100;
}

.footer-area {
    background: linear-gradient(to bottom right, #cc171e 0%, #ff6666 100%);
    color: #fff;
    background-color: none;
}

.back {
    position: fixed;
    bottom: 119px;
    font-size: 50px;
    color: #856f57;
    right: 31px;
    padding-right: 9px;
    padding-left: 9px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 48%), 0 6px 20px 0 rgb(0 0 0 / 35%);
    z-index: 10;
}

    @media only screen and (min-width: 1200px) and (max-width: 1600px) {
        .header-area .header-bottom {
            padding: 0 95px !important;
        }
    }

    @media only screen and (max-width: 900px) {
        .back {
            position: fixed;
            bottom: 85px;
            font-size: 23px;
            color: #856f57;
            right: 0;
            padding-right: 9px;
            padding-left: 9px;
            box-shadow: 0 4px 8px 0 rgb(0 0 0 / 48%), 0 6px 20px 0 rgb(0 0 0 / 35%);
            z-index: 10;
        }

        .ctl-size-text, .ctl-size-text p {
            font-size: 14px;
        }
    }
    /********** Template CSS **********/
    : root {
        --primary: #348E38;
        --secondary: #525368;
        --light: #E8F5E9;
        --dark: #0F4229;
    }

    .back-to-top {
        position: fixed;
        display: none;
        right: 30px;
        bottom: 30px;
        z-index: 99;
    }

    /*** Button ***/
    .btn {
        transition: .5s;
        font-weight: 500;
    }

    .btn-primary,
    .btn-outline-primary:hover {
        color: var(--light);
    }

    .btn-square {
        width: 38px;
        height: 38px;
    }

    .btn-sm-square {
        width: 32px;
        height: 32px;
    }

    .btn-lg-square {
        width: 48px;
        height: 48px;
    }

    .btn-square,
    .btn-sm-square,
    .btn-lg-square {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: normal;
    }



    @media (min-width: 991.98px) {
        .top-feature {
            position: relative;
            margin-top: -80px;
            z-index: 1;
        }

    }

    /*** Team ***/
    .team-item {
        position: relative;
        overflow: hidden;
    }

        .team-item .team-text {
            position: absolute;
            width: calc(100% - 45px);
            left: -100%;
            bottom: 45px;
            padding: 1.5rem;
            background: #f6efe0;
            border-radius: 0 4px 4px 0;
            opacity: 0;
            transition: .5s;
        }

        .team-item:hover .team-text {
            left: 0;
            opacity: 1;
        }

        .team-item .team-social .btn {
            background: var(--light);
            color: var(--primary);
        }

            .team-item .team-social .btn:hover {
                background: var(--primary);
                color: var(--light);
            }

        .team-item .team-img .team-social {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .5s;
            z-index: 3;
            opacity: 0;
        }

    .ctl-wrap {
        white-space: nowrap;
    }

    /* Text section styling */
    .team-text h4 {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .team-text p {
        font-size: 1rem;
        margin-bottom: 15px;
        color: #555; /* Màu chữ nhẹ nhàng hơn */
    }

    /* Hover effect for images */
    .team-item:hover img {
        transform: scale(1.05); /* Phóng to nhẹ khi hover */
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Đổ bóng đậm hơn khi hover */
    }

    /* Button styling */
    .team-social .btn {
        background-color: #3498db;
        color: #fff;
        border-radius: 25px; /* Bo góc cho nút mềm mại */
        transition: background-color 0.3s ease-in-out;
        text-decoration: none;
    }

        .team-social .btn:hover {
            background-color: #2ecc71; /* Thay đổi màu nút khi hover */
            color: #fff;
        }

    .team-item img {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Đổ bóng cho ảnh */
        transition: all 0.3s ease-in-out; /* Hiệu ứng khi hover vào ảnh */
    }

    /* Hover effect for images */
    .team-item:hover img {
        transform: scale(1.05); /* Phóng to nhẹ khi hover */
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Đổ bóng đậm hơn khi hover */
    }

    /* Text section styling */
    .team-text h4 {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .team-text p {
        font-size: 1rem;
        margin-bottom: 15px;
        color: #555; /* Màu chữ nhẹ nhàng hơn */
    }


    /*** Footer ***/
    .footer .btn.btn-link {
        display: block;
        margin-bottom: 5px;
        padding: 0;
        text-align: left;
        color: var(--light);
        font-weight: normal;
        text-transform: capitalize;
        transition: .3s;
    }

    h1 {
        font-size: 18px;
        text-transform: uppercase;
        font-family: 'Roboto';
    }