@font-face {
    font-family: 'Times-Roman';
    src: url('../font/OPTITimes-Roman.otf') format('truetype');
}

@font-face {
    font-family: 'Graphik-Light';
    src: url('../font/Graphik-Light-Trial.otf') format('truetype');
}

@font-face {
    font-family: 'Graphik-Medium';
    src: url('../font/Graphik-Medium-Trial.otf') format('truetype');
}

p,
a,
ul,
li,
span,
button,
label,
select,
input,
td,
tr {
    font-family: 'Graphik-Light', sans-serif !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Times-Roman', sans-serif !important;
}


body {
    overflow-x: hidden;
}

.line_height_2 {
    line-height: 2.1rem !important;
}

.line_height_3 {
    line-height: 3rem !important;
}

.line_height_4 {
    line-height: 4rem !important;
}

.line_height_4_3 {
    line-height: 4.3rem !important;
}

.line_height_16 {
    line-height: 1.6 !important;
}

.line_height_12 {
    line-height: 1.2 !important;
}

header {
    z-index: 999;
    position: relative;
}

.logo {
    height: 45px;
}

.h_24 {
    height: 24rem;
}

.bg_brown {
    background-color: rgb(240, 235, 227);
}

.content-auto {
    content-visibility: auto;
}


.error {
    color: red;
}

.min_64 {
    min-height: 64px;
}

.border_lightblue {
    border-color: #80A2C9;
}

.transparent_white {
    background-color: rgba(255, 255, 255, 0.05);
}

.ellipsis_2_line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis_3_line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis_4_line {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bg_gradient {
    background: linear-gradient(102deg, #009681 0.97%, #00677F 97.19%);
}

.bg_footer {
    background-color: #212529;
}

.h_18 {
    height: 18rem;
}

.min_w_300 {
    min-width: 300px;
}

.text_icon {
    font-size: 1.3rem;
}

.text_italic {
    font-style: italic;
}

.social_icon {
    transition: 400ms;
}

.social_icon:hover {
    transform: translateY(-5px);
}

.text_medium {
    font-size: 2.5rem;
}

.text_uppercase {
    text-transform: uppercase;
}

.max_width {
    width: max-content;
}

/* Media Query */

.tab-item {
    padding: 8px 16px;
    margin-right: 10px;
    cursor: pointer;
    color: #333;
    background-color: #fff;
}

.tab-item.active {
    color: #0d43bb;
    font-weight: bold;
    border-bottom: 2px solid #e60012;
}

.max_height_400 {
    max-height: 400px;
}

.bg_common {
    background-color: #e4e2e3;
}

.items_stretch {
    align-items: stretch;
}

.news_pagination>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 50px !important;
}

.news_pagination .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.8;
}

.news_pagination .swiper-pagination-bullet-active {
    background-color: #002057;
}

.fz_26 {
    font-size: 26px;
}

.fz_22 {
    font-size: 22px;
}

.fz_20 {
    font-size: 20px;
}

.fz_18 {
    font-size: 18px;
}

.cursor_pointer {
    cursor: pointer;
}

.top_menu {
    background-image: url(../images/current.jpg);
    height: 120px;
    background-size: cover;
}

.transition-200 {
    transition: 200ms;
}

.margin_auto {
    margin: auto;
}

/* News */
.news-titles {
    width: 50%;
}

.titles-list {
    list-style: none;
}

.red {
    color: red !important;
}

.outline_none {
    outline: none;
}

.z_100 {
    z-index: 100;
}

.z_200 {
    z-index: 200;
}

.w_40 {
    width: 40%;
}

.w_45 {
    width: 45%;
}

.w_50 {
    width: 50%;
}

.w_55 {
    width: 55%;
}

.max_height_350 {
    max-height: 350px;
}

.header_menu_a {
    display: block;
    padding: 0.5rem 0rem;
    border-bottom: 2px solid #000;
}

.header_menu_a.active {
    border-bottom: 2px solid #fff;
}

.header_menu_a:hover {
    border-bottom: 2px solid #fff;
}

.hero-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.text_italic {
    font-style: italic;
}

footer {
    background-color: #222;
}

@media (max-width: 768px) {
    .logo {
        height: 35px;
    }

    .footer_logo {
        height: 40px;
        margin-bottom: 20px;
    }

    .phone_banner {
        height: 220px !important;
    }

    .order_1 {
        order: 1;
    }

    .order_2 {
        order: 2;
    }

    .phone_menu {
        position: absolute;
        top: 88px;
        z-index: 12;
        background-color: #fff;
    }

    .line_height_4_3 {
        line-height: 2.5rem !important;
    }

    .line_height_4 {
        line-height: 2.5rem !important;
    }
}

.expand_chat {
    left: 50%;
    transform: translateX(-50%) !important;
}

/* Content container styles for expanded mode */
.chat-content-container {
    width: 100%;
    margin: 0 auto;
}

.chat-content-container.expanded {
    width: 70%;
}

/* Input container styles, consistent with content area */
.chat-input-container {
    width: 100%;
    margin: 0 auto;
}

.chat-input-container.expanded {
    width: 70%;
}

/* New: Gradient background style for expanded state */
#chatWindow.expanded-bg {
    /* --af-modal-bg-gradient: linear-gradient(248.35deg, #86cdff -11.3%, #f4f4fe 16.44%, #fff 28.3%, #fff 72.47%, #86cdff); */
    background-position: 50% center;
    background-image: var(--af-modal-bg-gradient);
    background-repeat: no-repeat;
    background-size: cover;
}

/* Ensure child elements have transparent background to show parent container background */
#chatWindow.expanded-bg #chatContent {
    background-color: transparent !important;
}

#chatWindow.expanded-bg .px-5.py-4.bg-white {
    background-color: transparent !important;
}

.max-content {
    width: max-content;
}

/* Loading animation styles */
.loading-dots {
    display: flex;
    gap: 2px;
    padding: 8px 12px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0d43bb;
    animation: bounce 1.4s infinite ease-in-out both;
}

.dot1 {
    animation-delay: -0.32s;
}

.dot2 {
    animation-delay: -0.16s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

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

#chatWindow {
    box-shadow: rgba(24, 24, 24, 0.16) 0px 16px 32px -4px, rgba(24, 24, 24, 0.08) 0px 12px 24px -4px;
    max-height: 80vh;
    z-index: 999;
}

.chat-gradient {
    background: linear-gradient(90deg, #0F4CD0 0%, #0A2C84 100%);
}


.sidebar {
    position: fixed;
    right: 20px;
    bottom: 3%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.sidebar-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.sidebar-icon i {
    font-size: 1.5rem;
}