/* Theme Name: Far East Steel Trading */
/* Theme URI: https://fareaststeeltrading.com/ */
/* Template: kallyas */
/* Author: DevMUBS */
/* Author URI: none */
/* Description: Custom Build */

/* Burger Menu Icon */
.sh--dark .zn-menuBurger span {
    background: rgba(255, 255, 255, 1);
}

/* Image Gallery Black Overlay */
.gridPhotoGallery__link.gridPhotoGallery__link-anim--fadein .gridPhotoGallery__img {
    opacity: 0.4;
}

/* Navigation Color Customization */
.elm-cmlist.elm-cmlist--v1 a:before {
    background: #e01e1e;
}

.elm-cmlist.elm-cmlist--v1 li.active > a:before,
.elm-cmlist.elm-cmlist--v1 li.is-active > a:before,
.elm-cmlist.elm-cmlist--v1 a:hover:before {
    opacity: 1;
}

/* Site Header Styling */
.site-header {
    background: rgb(255, 255, 255) !important;
}

/* Grid Photo Gallery Customization */
.eluid28f8d2dd {
    padding-top: 70px !important;
    padding-bottom: 0 !important;
}

.eluid28f8d2dd .gridPhotoGallery__img {
    object-fit: contain !important;
    border: 1px solid #fff !important;
    padding: 20px !important;
    height: 120px !important;
}

/* Icon and Social Elements */
.circled-icon.ci-large:before,
.gridPhotoGallery__item .kl-icon,
.gridPhotoGallery__link:hover .kl-icon,
.elm-social-icons {
    display: none !important;
}

img.kl-iconbox__icon {
    width: 70px !important;
    filter: invert(1);
}

/* Responsive Layout for Small Screens */
@media (max-width: 576px) {
    .eluida25a0ae2 .kl-iconbox__inner {
        display: flex !important;
        justify-content: space-between !important;
        border: 1px solid #fff !important;
        padding-top: 10px !important;
    }

    .eluid28f8d2dd .gridPhotoGallery__img {
        object-fit: scale-down !important;
        height: unset !important;
    }

    #eluidce1ca02a {
        margin-bottom: -225px;
    }

    #eluidd11f1eb3 .znColumnElement-innerWrapper-eluidd11f1eb3 {
        margin-top: 45px;
    }

    #eluidce1ca02a .gridPhotoGallery--cols-5 > .gridPhotoGallery__item:nth-child(3) {
        top: 265px !important;
    }

    #eluidce1ca02a .gridPhotoGallery--cols-5 > .gridPhotoGallery__item:nth-child(4) {
        top: 527px !important;
    }

    #eluidce1ca02a .gridPhotoGallery--cols-5 > .gridPhotoGallery__item:nth-child(5) {
        top: 790px !important;
    }

    #eluidce1ca02a .gridPhotoGallery--cols-5 > .gridPhotoGallery__item:nth-child(6) {
        top: 1050px !important;
        bottom: 0;
    }
    
    #site-header-FixedRelativeFix {
        height: 0 !important;
        display: none !important;
    }
    
    .site-header.style1 {
        background-color: #fff !important;
    }

    /* Hide Phone and Email Line */
    .sh-component.kl-header-toptext,
    .site-header-xs-color-scheme--light .site-header-separator {
        display: none !important;
    }

    /* Flexbox Layout for Logo, Contact Button, and Hamburger Menu */
    .site-header-main-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
    }

    .logo-container {
        flex: 1;
        max-width: 150px;
    }

    .logosize--contain .site-logo-img {
        padding: 0;
        object-fit: contain;
    }

    .header--oldstyles > div:nth-child(1) {
        flex-direction: row !important;
    }

    .site-header .site-logo {
        padding: 0 !important;
    }

    .header--oldstyles > div:nth-child(1) > div:nth-child(1) {
        width: auto !important;
    }

    .header--oldstyles > div:nth-child(1) > div:nth-child(2) {
        width: 50% !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ctabutton {
        flex: 1;
        text-align: center;
        max-width: 120px;
    }

    .zn-res-menuwrapper {
        flex: 1;
        text-align: right;
        margin-top: 18px !important;
    }

    .site-header-main > div:nth-child(1),
    .site-header-main > div:nth-child(2) {
        display: none;
        width: 0 !important;
    }

    .site-header-main > div:nth-child(3) {
        width: 50% !important;
    }

    .site-header-main > div:nth-child(3) .site-header-main-right-top {
        flex-direction: row-reverse;
    }

    .kl-cta-custom span {
        font-size: 12px !important;
    }

    .eluid7f486d48 {
        padding-bottom: 100% !important;
    }
}