/* ========================================================== */
/* FELORIYA FOOTER
/* ========================================================== */

/* ========================================================== */
/* 1. FOOTER BASE
/* ========================================================== */
#Footer {margin-top: 50px; background-color: #1a1a1a; color: #d7d7d7; line-height: 1.6; padding-top: 5px; position: relative;}

/* ========================================================== */
/* 2. BACK TO TOP BUTTON
/* ========================================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--g-7);
    border: 1px solid var(--g-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-4);
    text-decoration: none;
    font-size: 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 9998;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--tg-3);
}

.back-to-top.visible {opacity: 1; transform: translateY(0);}

.back-to-top:hover {
    background-color: var(--c-4);
    color: var(--g-7);
    border-color: var(--c-4);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--tg-7);
}

@media (max-width: 768px) {.back-to-top {width: 40px; height: 40px; bottom: 20px; right: 20px; font-size: 20px;}}

/* Hide button when menu overlay is active */
#menuOverlay.active ~ #Footer .back-to-top,
#menuOverlay.active ~ .back-to-top {opacity: 0 !important; pointer-events: none;}

/* ========================================================== */
/* 3. LIST RESET
/* ========================================================== */
ul, li {list-style: none; padding: 0;}

/* ========================================================== */
/* 4. MAIN CONTAINER
/* ========================================================== */
.footer-container {
    display: flex;
    gap: 10px;
    padding: 0 10px;
    margin: 0 auto;
    border-top: 1px solid var(--c-3);
    border-bottom: 1px solid var(--c-3);
}

/* ========================================================== */
/* 5. COPYRIGHT BAR
/* ========================================================== */
.Copyright {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--b);
    padding: 0 20px;
}

.Copyright p {font-size: 14px; letter-spacing: 0.5px; color: var(--c-5);}

/* ========================================================== */
/* 6. LOGO SECTION
/* ========================================================== */
.footer-logo {
    width: 20%;
    min-width: 200px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
}

.footer-logo svg {height: 160px;}

/* ========================================================== */
/* 7. MAIN LINKS PANEL
/* ========================================================== */
#linksper {width: 80%; height: 210px; display: flex; align-items: center; overflow: hidden;}

@media (max-width: 768px) {#linksper {border-top: 1px solid var(--c-4);}}

/* ========================================================== */
/* 8. RIGHT SIDE (TABS)
/* ========================================================== */
#right-side {width: 30%; height: 200px; display: flex; align-items: center; justify-content: center; padding: 0 5px;}
#right-side ul {width: 100%;}

#right-side ul li {
    height: 50px;
    display: flex;
    align-items: center;
    text-align: right;
    padding: 5px 15px;
    margin: 5px 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--c-3);
    transition: all 0.2s ease-out;
}

#right-side ul li:hover {color: var(--b); background-color: var(--c-3);}
#right-side ul li.active {color: var(--c-3); background-color: #edc8a130;}

/* ========================================================== */
/* 9. TAB ICONS
/* ========================================================== */
.icon {color: var(--w); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-out;}
.icon.active {color: var(--w);}
#right-side ul li:hover > .icon {color: var(--w);}
#right-side ul li.active:hover > .icon {color: var(--w);}

/* ========================================================== */
/* 10. TAB TITLES
/* ========================================================== */
#right-side h4 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 16px;
    font-weight: 400;
}

/* ========================================================== */
/* 11. VERTICAL INDICATOR
/* ========================================================== */
#border {width: 1px; height: 190px; background-color: var(--g-4); position: relative;}

#border #line {
    width: 5px;
    height: 50px;
    background-color: var(--c-3);
    position: absolute;
    right: -2px;
    border-radius: 2px;
    transition: all 0.4s ease-in-out;
}

#border #line.one {top: 15px;}
#border #line.two {top: 70px;}
#border #line.three {top: 125px;}

/* ========================================================== */
/* 12. LEFT SIDE (CONTENT)
/* ========================================================== */
#left-side {width: 70%; height: 200px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 0;}

/* ========================================================== */
/* 13. TAB CONTENT
/* ========================================================== */
.tab-content {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%) translateY(-210px);
    opacity: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
}

.tab-content.active {transform: translateY(-50%); opacity: 1;}

/* ========================================================== */
/* 14. HEADINGS & TEXT
/* ========================================================== */
#first h1, #second h1, #third h1 {font-size: 24px; font-weight: 400; color: var(--c-3); margin: 5px 0 15px; text-align: center;}
#first p, #second p, #third p, #first td, #second td, #third td {font-size: 14px; color: #d7d7d7; text-align: center; text-align-last: center;}

/* ========================================================== */
/* 15. SOCIAL ICONS
/* ========================================================== */
.FSocials {display: flex; justify-content: center; gap: 15px; margin: 15px 0;}
.Sicon-link {color: #d7d7d7; transition: all 0.3s ease;}

.Sicon {width: 40px; height: 40px; background-color: var(--tg-6); border-radius: 50%; display: flex; align-items: center; justify-content: center;}

.Sicon-link:hover {transform: translateY(-3px);}
.Sicon-link:hover .Sicon {background-color: #edc8a130;}

/* ========================================================== */
/* 16. TABLE STYLES
/* ========================================================== */
table {width: 100%; border-collapse: collapse; background-color: transparent;}
table th {padding: 5px; font-weight: 400; color: var(--c-3); border-bottom: 1px solid var(--c-3);}
table td {padding: 8px 5px; border: none;}

/* ========================================================== */
/* 17. LINKS
/* ========================================================== */
.tab-content a {color: #d7d7d7; text-decoration: none; transition: color 0.2s;}
.tab-content a:hover {color: var(--c-3);}

/* ========================================================== */
/* 18. RESPONSIVE BREAKPOINTS
/* ========================================================== */
@media (max-width: 768px) {
    .footer-container {flex-direction: column-reverse; gap: 0; padding: 0;}
    .Copyright {height: auto; padding: 10px;}
    #logolinks {width: 100%;}
    #linksper {width: 100%;}
    #right-side {width: auto;}
    #right-side ul li {padding: 5px 10px;}
    #left-side {width: 100%;}
    .FSocials {gap: 5px;}
    .icon, .nimpo {display: none !important;}
}

@media (min-width: 1601px) {#second p {font-size: 16px;}}