:root {
    --grey : #EBEBEB; --white : #FFFFFF; --yellow : #F6C326;
    --black : #211E1E; --red : #F25D92;
    --blue : #2e8b2e; --red : #ff0000;
    --gray : gray; --orange : orange;
    --gold : gold; --skyblue : skyblue;
    --slategray : slategray; --Tomato : Tomato;
    --orange : #f77f00;  --rad-two : #fa1939;
}
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background: #fa1939;
}
::-webkit-scrollbar-thumb{
    background: rgba(248, 248, 248, 0.577) ;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{
    background-color: rgb(255, 125, 125);
}
/* The Last of footer is under container */
footer .container-footer{
    background-color: black;
    Width:100%;
}
footer .container-footer .footer-body {
    width: 75%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 0.8fr; /* Default: Three columns */
    font-size: 12pt;
    font-family: 'AKbalthom KhmerGothic', sans-serif;
    padding: 40px;
    color: #626e64;
    gap: 20px; /* Adds spacing between columns */
}

/* Tablet: Reduce to two columns */
@media (max-width: 1024px) {
    footer .container-footer .footer-body {
        grid-template-columns: 1fr 1fr; /* Adjust to two columns */
    }
}

/* Mobile: Single-column layout */
@media (max-width: 768px) {
    footer .container-footer .footer-body {
        grid-template-columns: 1fr; /* Stack all items */
        width: 90%; /* Increase width for better spacing */
        padding: 30px; /* Reduce padding for smaller screens */
    }
}

/* Note .title_sabay_first Text this =================================== */
footer  .footer-body .title_sabay_first{
    width:100%;

}
.title_sabay_first .image_footer_header a img{ 
    width:160px;height: 70px;
}
.image_footer_header a{
    text-decoration: none;
    color: rgb(155, 155, 155);
    text-decoration: overline;
}
.image_footer_header a:hover{
    text-decoration: underline;
    color: var(--white);
    text-decoration-color: #F6C326;
}
/* Note .title_sabay_first Text this =================================== */
footer  .footer-body .title-icon-sabay{
    width:100%;
}
.title-icon-sabay .footer_image_last img{
    width:40px;height:40px;
}
.title-icon-sabay{
    padding-top: 30px;
}
/* Note .title_sabay_first Text this =================================== */
footer  .footer-body .title_sabay_contact{
    width:100%;
}
.title_sabay_contact .icon-contact i{
    font-size: 2pc;
    color: #EBEBEB;
    padding:3px;
}
.title_sabay_contact .icon-contact{
    padding-top: 10px;
}
.title_sabay_contact .icon-contact a i:hover{
    color: #fa1939;
}