body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.main {
    margin-top: 30px;
}

.trans_bg {
    background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
    border-radius: 30px;
    margin: 0px 10px;
}

.menu-area {
    display: flex;
    justify-content: space-between;
    height: 120px;
    align-items: center;
    padding: 10px 20px;
    background: url('/assets/images/menu-bg.jpg');
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.left-section {
    display: flex;
    align-items: center;
}

.left-section .logo {
    display: block;
    height: 100%;
    padding-left: 140px;
}

.left-section .logo img {
    height: 100%;
    width: auto;
    max-height: 80px;
    object-fit: contain;
    padding-left: 30%;
}

.right-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 80px;
}

.upper-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
}

.fb-icon {
    display: block;
}

.fb-icon img {
    width: 87px;

    /* Adjust size as needed */
    height: 30px;

    /* Adjust size as needed */
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.fb-icon:hover img {
    opacity: 0.8;
}

.search-container form {
    display: flex;
    gap: 0.5rem;
}

.search-container input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.search-container button {
    padding: 0.5rem 1rem;
    background: #4d90fe;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-container button:hover {
    background: #357ae8;
}

.main-menu ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-menu a {
    display: block;
    text-decoration: none;
}

.main-menu img {
    height: 30px;
    width: auto;
    transition: opacity 0.3s ease;
}

.main-menu a:hover img {
    opacity: 0.8;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1000;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        color: #fff;
    }

    .main-menu.active {
        display: block;
    }

    .main-menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .main-menu img {
        height: 25px;
    }

    .main-menu li.m_point {
        display: none;

        /* Hide m_point in mobile menu */
    }

    /* Or if m_point is a span inside li */
    .main-menu li .m_point {
        display: none;
    }
}

.main-menu a:hover {
    color: #f0f0f0;
    text-decoration: underline;
}

.m_news {
    background: url(/assets/images/menu/m_news.png);
    width: 86px;
    height: 35px;
    display: block;
}

.m_news:hover,
.m_news.active {
    background-position: 0px 35px;
}

.m_products {
    background: url(/assets/images/menu/m_products.png) 0px 0px;
    width: 87px;
    height: 35px;
    display: block;
}

.m_products:hover,
.m_products_active {
    background-position: 0px 35px;
}

.m_health {
    background: url(/assets/images/menu/m_health.png) 0px 0px;
    width: 103px;
    height: 35px;
    position: relative;
    display: block;
    margin-top: -10px;
}

.m_health:hover,
.m_health.active {
    background-position: 0px 35px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 1000;
    padding: 0.5rem 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.health-menu-item {
    position: relative;
}

.health-menu-item:hover .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
}

.m_health:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: #0d5396;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background: #c52d2f;
    color: #fff;
}

/* For mobile responsiveness */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        box-shadow: none;
        padding-left: 1rem;
    }
}

.m_recipe {
    background: url(/assets/images/menu/m_recipe.png) 0px 0px;
    width: 86px;
    height: 35px;
    display: block;
}

.m_recipe:hover,
.m_recipe_active {
    background-position: 0px 35px;
}

.m_aboutus {
    background: url(/assets/images/menu/m_quaker.png) 0px 0px;
    width: 86px;
    height: 35px;
    display: block;
}

.m_aboutus:hover,
.m_aboutus_active {
    background-position: 0px 35px;
}

.m_point {
    background: url(/assets/images/menu/m_point.png) 0px -5px;
    width: 11px;
    height: 35px;
    display: block;
}

/* Update the hover trigger to work from the li element */
.main-menu li {
    position: relative;

    /* Add this */
}

/* Change the hover trigger from m_health to li */
.main-menu li:hover .dropdown-menu {
    display: block;
    visibility: visible;
    opacity: 1;
}

.slider-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
    z-index: 1;
}

.slider {
    /*position: relative;*/
    overflow: hidden;
    width: 100%;

    /* Calculate aspect ratio: (402/1120 * 100) */
    padding-bottom: 35.89%;

    /* Exact aspect ratio for 1120x402 */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.slider-arrow {
    position: absolute;
    top: 0;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
}

.slider-arrow.prev {
    left: -8px;
}

.slider-arrow.next {
    right: -8px;
}

.slider-arrow img {
    width: auto;
    height: auto;
}

.slider-arrow:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 1140px) {
    /* Just below the max image width */
    .slider-container {
        margin: 0 10px;

        /* Add some margin on smaller screens */
    }
}

@media (max-width: 768px) {
    .slider-container {
        border-width: 5px;
        margin: 0 5px;
    }

    .slider-arrow img {
        max-width: 25px;
    }

    .slider-arrow.prev {
        left: 10px;
    }

    .slider-arrow.next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    .slider-container {
        border-width: 3px;
        margin: 0 3px;
    }

    .slider-arrow img {
        max-width: 20px;
    }

    .slider-arrow.prev {
        left: 5px;
    }

    .slider-arrow.next {
        right: 5px;
    }
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box;
    background: #000;
}

.video-player {
    width: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-player.loaded {
    opacity: 1;
}

.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    display: none;
}

.video-container.loading .loading-indicator {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-container {
        border-width: 5px;
    }
}

@media (max-width: 480px) {
    .video-container {
        border-width: 3px;
    }
}

.index_line {
    background: url(/assets/images/line1.png);
    margin: 30px 25px 25px 0px;
    height: 9px;
}

/* Adjust the lower row to allow for right alignment */
.lower-row {
    display: flex;
    justify-content: flex-end;

    /* Align items to the right */
    position: relative;

    /* For menu positioning */
    padding: 0 20px;

    /* Padding for the navbar */
    display: flex;

    /* Use flexbox to align items */
    align-items: center;

    /* Center items vertically */
}

.hamburger {
    display: none;

    /* Hidden by default on desktop */
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1000;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
}

/* Mobile styles */
@media (max-width: 768px) {
    .lower-row {
        position: relative;
        z-index: 1001;
    }

    .hamburger {
        display: flex;
        z-index: 1002;
    }

    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1001;
    }

    .main-menu.active {
        display: block;
    }

    .main-menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    /* Hide points in mobile */
    .main-menu li .m_point,
    .main-menu li:has(.m_point) {
        display: none;
    }

    /* Fix dropdown positioning */
    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1001;
    }

    .dropdown-menu {
        display: none;
        position: static;

        /* Change from absolute to static in mobile */
        box-shadow: none;
        padding-left: 1rem;
        margin-top: 0.5rem;
    }

    .m_health:hover .dropdown-menu,
    .m_health.active .dropdown-menu {
        position: static;
        display: none;

        /* Hide by default in mobile */
    }

    /* Only show dropdown when parent is clicked */
    .m_health.active .dropdown-menu {
        display: block;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .main-menu li .m_point,
    .main-menu li:has(.m_point) {
        display: none;
    }

    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1001;
    }

    .main-menu.active {
        display: block;
    }

    .health-menu-item:hover .dropdown-menu {
        display: none;

        /* Disable hover effect on mobile */
    }

    .dropdown-menu {
        display: none !important;

        /* Force hide by default on mobile */
        position: static;
        box-shadow: none;
        min-width: auto;
        padding: 0;
        margin: 0;
        opacity: 1;
        visibility: visible;
    }

    .health-menu-item.active .dropdown-menu {
        display: block !important;

        /* Show only when active */
    }
}

/* Desktop styles */
.has-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 1000;
    padding: 0.5rem 0;
}

/* Desktop hover */
@media (min-width: 769px) {
    .has-dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .main-menu li .m_point,
    .main-menu li:has(.m_point) {
        display: none;
    }

    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1001;
    }

    .main-menu.active {
        display: block;
    }

    .dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        padding-left: 1rem;
    }

    .has-dropdown.active .dropdown-menu {
        display: block;
    }
}

/* Desktop dropdown styles */
.m_health {
    background: url(/assets/images/menu/m_health.png) 0px 0px;
    width: 103px;
    height: 35px;
    position: relative;
    display: block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
    z-index: 1000;
    padding: 0.5rem 0;
}

/* Parent li styles for hover */
.main-menu li {
    position: relative;
}

/* Show dropdown on hover with delay for disappearing */
.main-menu li:hover .dropdown-menu {
    display: block;
}

.main-menu li .dropdown-menu {
    transition: visibility 0.3s;
}

.main-menu li:hover .dropdown-menu,
.dropdown-menu:hover {
    display: block !important;
}

/* Mobile styles */
@media (max-width: 768px) {
    .main-menu li .m_point,
    .main-menu li:has(.m_point) {
        display: none;
    }

    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1001;
    }

    .main-menu.active {
        display: block;
    }

    .health-menu-item:hover .dropdown-menu {
        display: none;

        /* Disable hover effect on mobile */
    }

    .dropdown-menu {
        display: none !important;

        /* Force hide by default on mobile */
        position: static;
        box-shadow: none;
        min-width: auto;
        padding: 0;
        margin: 0;
        opacity: 1;
        visibility: visible;
    }

    .health-menu-item.active .dropdown-menu {
        display: block !important;

        /* Show only when active */
    }
}

.footer_menu {
    margin: 50px 0px;
}

/* Remove underline from all links */
a {
    text-decoration: none;

    /* Remove underline from all links */
    color: #007BFF;

    /* Set the default text color (adjust as needed) */
}

/* Optional: Add underline on hover for all links */
a:hover {
    text-decoration: none;

    /* Add underline on hover */
    color: #000;

    /* Optional: change color on hover */
}

.footer {
    width: 100%;

    /* Make the footer full width */
    background-color: #871515;

    /* Optional: Set a background color */
    padding: 30px 20px 20px 20px;

    /* Add some padding for spacing */
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

    /* Optional: Add a shadow for depth */
    color: #fff;
    font-size: 12px;
}

.footer .row {
    margin: 0;

    /* Remove default margin */
}

.footer .col-6 {
    padding: 0 15px;

    /* Optional: Add horizontal padding */
}

.credits {
    text-align: left;

    /* Align text to the left */
}

/* Dropdown styles */
.has-dropdown {
    position: relative;

    /* Ensure the dropdown is positioned relative to the parent */
}

.dropdown-menu {
    display: none;

    /* Hide the dropdown by default */
    position: absolute;

    /* Position it absolutely */
    top: 100%;

    /* Position it below the parent */
    left: 0;

    /* Align to the left */
    background-color: #fff;

    /* Background color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    /* Optional shadow */
    z-index: 1000;

    /* Ensure it appears above other elements */
    opacity: 0;

    /* Start with opacity 0 for transition */
    visibility: hidden;

    /* Start with visibility hidden */
    transition: opacity 0.3s ease;

    /* Smooth transition */
}

/* Show dropdown when the 'show' class is added */
.dropdown-menu.show {
    display: block;

    /* Show the dropdown */
    opacity: 1;

    /* Set opacity to 1 */
    visibility: visible;

    /* Make it visible */
}

.main-menu.active {
    display: block;

    /* or flex, depending on your layout */
}

.dropdown-menu.show {
    display: block;

    /* Ensure the dropdown is visible */
}

.footer_menu a {
    text-decoration: none;
    color: #428bca !important; /* Set the color */
    font-weight: bold; /* Make the text bold */
}

.footer_menu a:hover h5 {
    color: #666; /* Change color on hover */
}

.about {
    margin: 20px 0px;
    background-color: #871515;
    color: #fff;
    padding: 20px;
}

.about_tit{
    color: #003366;
    font-weight: bold;
}

.about_tit a{
    color:#cd5c5c
}

.products_frame{
    padding: 0px 10px 0px 45px;
}

.product_info{
    margin: 0px 15px 0px 0px;
}

.product_tit{
    font-size: 20px;
    color: #b9171f;
    padding-bottom: 20px;
    background: url(/assets/images/products/img_title_line.png) repeat-x bottom;
}

.product_detail_frame{
   margin-top: 40px;
}

.product_detail{
    font-size: 13px;
    background: url(../../assets/images/products/tit_text_deco.png) no-repeat left top;
    min-height: 120px;
}

.product_detail p{
    padding: 0px 0px 0px 15px;
}

.title_color{
    color: #003366!important;
}

.subtitle_color{
    color: #800707!important;
}

.row_space{
    margin-top: 20px;
}

.health_frame {
    padding: 0px 0px 0px 0px;
}

.accordion-button{
    background: url(/assets/images/health/img_frameclose.jpg) right;
    /* background-color: #e6e6e6; */
    border: 0 none;
    box-shadow: none;
    color: #fff!important;
}

table#abt_oat th {
    background: #cc0000;
    color: white;
    font-weight: bold;
}

table#abt_oat td, table#abt_oat th {
    padding: 6px;
    border: 1px solid #fff;
    text-align: center;
    vertical-align: top;
}

table#abt_oat tr:nth-of-type(odd) {
    background: #f0f0d2;
}

table#abt_oat tr:nth-of-type(even) {
    background: #fffddd;
}

.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faqs_frame{
    padding: 0px 10px;
}

.faqs_line {
    margin-bottom: 35px;
}

.faqs_q{
    color: #002e87;
}

.faqs_ans{
    color: #c52d2f;
}
.recipecnt_frame {
    padding: 15px 35px 15px 40px;
}
.recipecnt_title {
    font-size: 30px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 10px;
}
.recipecnt_subtitle {
    font-size: 15px;
    color: #333333;
    margin-bottom: 25px;
}

.recipecnt_list {
    padding: 40px 25px;
    background-color: #FFFFFF;
    border: solid 1px #dcdcdc;
    border-radius: 20px;
}
.recipecnt_list_name {
    font-size: 22px;
    color: #64af1e;
    padding-bottom: 20px;
    border-bottom: #cccccc 1px solid;
}
.recipecnt_list_margin {
    margin-top: 20px;
}
.recipecnt_list_title {
    margin-bottom: 20px;
    font-size: 18px;
    color: #64af1e;
    font-weight: bold;
}
.recipecnt_list_text {
    font-size: 15px;
    color: #414141;
}
.recipecnt_list_num {
    font-size: 18px;
    color: #64af1e;
    margin-bottom: 10px;
}
.recipecnt_list_text ul.mylist {
    list-style-type: decimal;
    margin: 0;
    padding-left: 30px;
}
.recipecnt_cooktime {
    padding-left: 30px;
    background: url(/assets/images/recipe_detail/recipe_timer.png) no-repeat;
    background-position: 0px -3px;
}
.recipecnt_ppl {
    padding-left: 30px;
    background: url(/assets/images/recipe_detail/recipe_ppl.png) no-repeat;
    background-position: 0px -3px;
}
.recipecnt_difficult_0-5 {
    background: url(/assets/images/recipe_detail/recipe_star0-5.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_1 {
    background: url(/assets/images/recipe_detail/recipe_star1.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_1-5 {
    background: url(/assets/images/recipe_detail/recipe_star1-5.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_2 {
    background: url(/assets/images/recipe_detail/recipe_star2.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_2-5 {
    background: url(/assets/images/recipe_detail/recipe_star2-5.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_3 {
    background: url(/assets/images/recipe_detail/recipe_star3.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_3-5 {
    background: url(/assets/images/recipe_detail/recipe_star3-5.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_4 {
    background: url(/assets/images/recipe_detail/recipe_star4.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_4-5 {
    background: url(/assets/images/recipe_detail/recipe_star4-5.png) no-repeat;
    background-position: 40px -4px;
}
.recipecnt_difficult_5 {
    background: url(/assets/images/recipe_detail/recipe_star5.png) no-repeat;
    background-position: 40px -4px;
}