.logo-image {
    height: 57px;
    width: 515px;
}

/* Make slider full width and centered */
#sp-slider {
    width: 100%;
    max-width: 1271px;   /* optional */
    margin: 0 auto;      /* this centers it */
}

/* Fixed height */
.uk-slideshow-items {
    width: 100% !important;
    height: 460px;
}

/* Equal size slides */
.uk-slideshow-items li {
    height: 436px;
}

/* Image fit properly */
.uk-slideshow-items img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.uk-accordion-title {
  margin-top: 0;
  margin-bottom: 10px;
  padding: 5px 10px;
  background: #f3f3f3;
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
  position: relative;
}


/* Base icon button style */
.uk-icon-button {
    width: 34px;
    height: 34px;
    background: #7AA11A;   /* green background */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

/* Common icon styling */
.uk-icon-male:before,
.uk-icon-info-circle:before,
.uk-icon-check-circle:before,
.uk-icon-desktop:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffffff;   /* white icon */
    font-size: 20px;
    font-style: normal; 
    line-height: 1;
}

/* Individual Icons */
.uk-icon-male:before {
    content: "\f183";
}

.uk-icon-info-circle:before {
    content: "\f05a";
}

.uk-icon-check-circle:before {
    content: "\f058";
}

.uk-icon-desktop:before {
    content: "\f108";
}


/* =========================================
  

/* Breadcrumb Wrapper */
.mod-breadcrumbs,
.breadcrumb,
nav[aria-label="Breadcrumb"] {
    background: #f3f5f7;
    padding: 12px 20px;
    border-radius: 6px;
    margin-bottom: 25px;
    font-size: 14px;
}

/* Remove default bold label */
.mod-breadcrumbs span,
.breadcrumb span {
    font-weight: 500;
}

/* Breadcrumb links */
.breadcrumb a {
    color: #6b9600;
    text-decoration: none;
    transition: 0.3s ease;
}

.breadcrumb a:hover {
    color: #4a6d00;
    text-decoration: underline;
}

/* Separator styling */
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb li + li:before {
    content: "/";
    color: #999;
    padding: 0 8px;
}

/* Active item */
.breadcrumb .active,
.breadcrumb li:last-child span {
    color: #333;
    font-weight: 600;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 13px;
        padding: 10px 15px;
    }
}


.logo-image {
    height: 60px;
}

.logo-image {
    height: 57px;
    width: 470px;
}




.uk-scope .uk-h3, .uk-scope h3 {
    font-size: 15px !important;
    line-height: 1.4;
    font-weight: 400;
    color: black;
    line-height: 25px;
}

.uk-scope .uk-icon-button {
    border-radius: 1px !important;
    background: #71B028 !important;
}

/* ------------------------------------------------------------------------------------------------ */

#sp-footer > .container .row #sp-footer1
{
  text-align:center !important;
}



.jf_sidebuttons li a 
{
/* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Pushes text left, image right */
    flex-direction: row-reverse !important;
    /* Sizing */
    width: 250px !important; /* Adjust this to your specific fixed width */
    padding: 10px 10px !important; /* Gives the icon a little breathing room from the edge */
    
    /* Clean up default styling */
    text-decoration: none !important;
    box-sizing: border-box !important; /* Ensures padding doesn't break the width */}
.jf_sidebuttons li a img
{
  position: static !important;      /* Prevents image from floating over text */
    display: block !important;
    margin: 0 !important;             /* Removes default spacing */
    /* max-height: 1.5em;                /* Keeps icon proportional to text size */ */
    width: auto;
}

.sp-has-child > span 
{
font-family: Arial;
}

li.sp-has-child > span.sp-menu-separator::after
{
    content: " >";
font-weight: 50;  
}

/* hide breadcrumb section from home page and not from any other page */
.itemid-101 #sp-main-body {
    display: none !important;
}

/* Applying Background image to whole website and applying white color to divs  */
body {
    background-image: url('/images/kayu.jpg'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

#sp-section-4 .row,
div[itemprop="articleBody"], 
.article-details {
    background-color: #ffffff !important;
    padding: 15px !important;
}

/* --------------------------------------------adding css to make header responsive  */
/* Target the row inside the Helix header */
#sp-header .row.align-items-center {
    display: flex !important;
    flex-wrap: nowrap !important; /* Forces them to stay on one line */
    justify-content: space-between !important;
    width: 100%;
}

/* Ensure the logo container doesn't shrink or wrap */
#sp-logo {
    flex: 0 0 auto !important; /* Logo stays its natural size */
    max-width: 60% !important; /* Prevents logo from taking too much room */
}

/* Ensure the menu container stays on the same line and pushes to the right */
#sp-menu {
    flex: 1 1 auto !important; /* Takes remaining space */
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 0; /* Important for flex-shrink behavior */
}

/* Keep the actual menu list from overlapping the logo if it's too long */
.sp-megamenu-parent {
    white-space: nowrap !important;
}



.article-category {
    background:#6b9600;
    color:#fff;
    font-size:11px;
    padding:3px 6px;
    border-radius:4px;
    margin-right:6px;
    font-weight:600;
    display:inline-block;
}


#mod-custom99{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:18px;
padding:10px 0;
}

#mod-custom99 a{
display:inline-flex;
align-items:center;
justify-content:center;
}

#mod-custom99 img{
height:42px;
width:auto;
max-width:100%;
transition:transform .2s ease;
}

#mod-custom99 img:hover{
transform:scale(1.1);
}

section#sp-section-5 {
    background-color: #F3F3F3;
}