/**************************************************************
*
* RUTI - NextGen AI SuperApp Custom Stylesheet
* FINAL CONSOLIDATED VERSION (v9.4 - Corrected Feature Box Spacing)
*
***************************************************************/


/* =============================================================
   1. GLOBAL FONT & TYPOGRAPHY
   ============================================================= */

body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
input,
textarea,
button,
.s5_nav_mega_menu_inner_span,
.module-title h2,
.s5_module_box_1 .s5_mod_h3 {
    font-family: 'Cairo', sans-serif !important;
}


/* =============================================================
   2. CORE LAYOUT & BACKGROUNDS
   ============================================================= */

body,
html {
    background: #282828 !important;
}

#s5_main_wrapper,
#s5_footer_area1,
#s5_breadcrumb_font_login_wrap {
    background: #0C0D12 !important;
}


/* =============================================================
   3. CONTENT & MODULE STYLING
   ============================================================= */

.s5_wrap,
.module_round_box {
    background: #1D1E24 !important;
    border: 1px solid #33343A !important;
    border-radius: 12px !important;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3) !important;
}


/* =============================================================
   4. HEADINGS & LINKS
   ============================================================= */

h1 {
    color: #0084FF !important; /* RUTI Brand Blue */
    text-shadow: none !important;
}

h2,
h3 {
    color: #E1E1E1 !important;
    text-shadow: none !important;
}

a {
    color: #9ECBFF !important;
    text-shadow: none !important;
    transition: all 0.3s ease;
}

a:hover,
a:focus {
    color: #0084FF !important; /* RUTI Brand Blue */
    text-decoration: none !important;
    text-shadow: none !important;
}


/* =============================================================
   5. NAVIGATION
   ============================================================= */

#s5_menu_wrap {
    background: transparent !important;
}

.s5_nav_mega_menu_inner_span {
    color: #C0C0C0 !important;
    font-weight: bold !important;
    text-shadow: none !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
}

#s5_menu_wrap li.active .s5_nav_mega_menu_inner_span,
#s5_menu_wrap li:hover .s5_nav_mega_menu_inner_span {
    background: #0084FF !important; /* RUTI Brand Blue */
    color: #ffffff !important;
    text-shadow: none !important;
}

#s5_footer_area1,
#s5_footer a,
#s5_bottom_menu_wrap .current a,
#s5_bottom_menu_wrap a,
#s5_breadcrumb_font_login_wrap,
#s5_breadcrumb_wrap .active .divider,
#s5_breadcrumb_wrap .breadcrumb .active {
    color: #E1E1E1 !important;
}


/* =============================================================
   6. LOGO SIZING
   ============================================================= */

#s5_logo img {
    height: 60px !important;
    width: auto !important;
}


/* =============================================================
   7. BRANDED BUTTONS
   ============================================================= */

.btn, .button, .readon, p.readmore a, a.k2ReadMore, .userItemReadMore, div.catItemCommentsLink, .userItemCommentsLink, a.readmore-link, a.comments-link, div.itemCommentsForm form input#submitCommentButton {
    background: #0084FF !important; /* RUTI Brand Blue */
    color: #ffffff !important;
    border-radius: 8px !important;
    border: none !important;
    text-decoration: none !important;
    padding: 10px 25px !important;
    transition: all 0.2s ease-in-out;
}

.btn:hover, .button:hover, .readon:hover, p.readmore a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    filter: brightness(115%); /* Make button slightly brighter on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 132, 255, 0.3);
}


/* =============================================================
   8. CUSTOM MODULE CONTENT STYLING
   ============================================================= */

.module_round_box .s5_mod_h3 {
    color: #0084FF !important;
}

.module_round_box p {
    color: #ffffff !important;
}
/* =============================================================
   9. VIDEO HEADER STYLES
   ============================================================= */

.ruti-video-container {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    background-color: #000;
    margin-bottom: 30px;
    border-radius: 12px;
}

.ruti-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.ruti-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.ruti-video-title {
    color: #FFFFFF !important;
    font-size: 4rem;
    font-weight: 900 !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    padding: 0 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInTitle 1.5s 0.5s ease-out forwards;
}

@keyframes fadeInTitle {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 768px) {
    .ruti-video-title {
        font-size: 2.5rem;
    }
    .ruti-video-container {
        height: 50vh;
    }
}

/* =============================================================
   10. SOCIAL MEDIA FOOTER MODULE
   ============================================================= */

.ruti-social-footer {
    text-align: center;
    padding: 20px 15px;
    width: 100%;
    max-width: 40%;
    margin: 0 auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ruti-social-footer h3 {
    color: #E1E1E1 !important;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 600 !important;
}

.ruti-social-icons {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.ruti-social-icons li {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
}

.social-icon {
    display: block;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.social-icon:hover {
    transform: translateY(-3px);
}

.icon-facebook {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3e%3cpath d='M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z'/%3e%3c/svg%3e");
}
.icon-facebook:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230084FF'%3e%3cpath d='M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z'/%3e%3c/svg%3e");
}

.icon-instagram {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3e%3cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.584-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.584-.012-4.85-.07c-3.252-.148-4.771-1.691-4.919-4.919-.058-1.265-.069-1.645-.069-4.85s.011-3.584.069-4.85c.149-3.225 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.85-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.358-.2 6.78-2.618 6.98-6.98.059-1.281.073-1.689.073-4.948s-.014-3.667-.072-4.947c-.2-4.358-2.618-6.78-6.98-6.98-1.281-.059-1.689-.073-4.948-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.79 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.441 1.441 1.441 1.441-.645 1.441-1.441-.645-1.44-1.441-1.44z'/%3e%3c/svg%3e");
}
.icon-instagram:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230084FF'%3e%3cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.584-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.584-.012-4.85-.07c-3.252-.148-4.771-1.691-4.919-4.919-.058-1.265-.069-1.645-.069-4.85s.011-3.584.069-4.85c.149-3.225 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.85-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.358-.2 6.78-2.618 6.98-6.98.059-1.281.073-1.689.073-4.948s-.014-3.667-.072-4.947c-.2-4.358-2.618-6.78-6.98-6.98-1.281-.059-1.689-.073-4.948-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.79 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.441 1.441 1.441 1.441-.645 1.441-1.441-.645-1.44-1.441-1.44z'/%3e%3c/svg%3e");
}

.icon-x {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3e%3cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3e%3c/svg%3e");
}
.icon-x:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230084FF'%3e%3cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3e%3c/svg%3e");
}

.icon-tiktok {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3e%3cpath d='M16.6 5.82s.01 0 .01 0c.23 0 .44.02.65.05v3.32c-.23-.03-.47-.05-.71-.05-2.11 0-3.83 1.72-3.83 3.83s1.72 3.83 3.83 3.83c2.11 0 3.83-1.72 3.83-3.83V.01s-2.81.76-5.42 2.28c-.89.52-1.63 1.18-2.22 1.94v8.31c-.39-.08-.78-.13-1.19-.13-2.61 0-4.73 2.12-4.73 4.73s2.12 4.73 4.73 4.73 4.73-2.12 4.73-4.73v-9.6c.71-.97 1.6-1.79 2.65-2.42z'/%3e%3c/svg%3e");
}
.icon-tiktok:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230084FF'%3e%3cpath d='M16.6 5.82s.01 0 .01 0c.23 0 .44.02.65.05v3.32c-.23-.03-.47-.05-.71-.05-2.11 0-3.83 1.72-3.83 3.83s1.72 3.83 3.83 3.83c2.11 0 3.83-1.72 3.83-3.83V.01s-2.81.76-5.42 2.28c-.89.52-1.63 1.18-2.22 1.94v8.31c-.39-.08-.78-.13-1.19-.13-2.61 0-4.73 2.12-4.73 4.73s2.12 4.73 4.73 4.73 4.73-2.12 4.73-4.73v-9.6c.71-.97 1.6-1.79 2.65-2.42z'/%3e%3c/svg%3e");
}

.ruti-copyright {
    margin-top: 25px;
    font-size: 0.8rem;
    color: #a0a0a0 !important;
    padding: 0 15px;
}

.ruti-copyright a {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.ruti-copyright a:hover {
    color: #0084FF !important; /* RUTI Brand Blue */
    text-decoration: underline !important;
}

/* =============================================================
   11. HOVER FEATURE BOXES
   ============================================================= */

#s5_top_row1_wrap {
    padding: 50px 0 !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
}

div[id^="s5_top_row1_"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
}

div[id^="s5_top_row1_"] .module_round_box {
    padding: 5 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

div[id^="s5_top_row1_"] .module_round_box_outer {
    margin: 0 !important;
}

.ruti-feature-box {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ruti-feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.5);
}

.ruti-feature-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.ruti-feature-box .feature-box-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 132, 255, 0.85) !important; /* RUTI Brand Blue */
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.ruti-feature-box:hover .feature-box-overlay {
    opacity: 1;
}

.ruti-feature-box:hover img {
    opacity: 0.2;
}

.ruti-feature-box .feature-box-text {
    font-family: 'Cairo', sans-serif !important;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 20px;
    transform: translateY(15px);
    transition: transform 0.5s ease;
}

.ruti-feature-box:hover .feature-box-text {
    transform: translateY(0);
}

@media screen and (max-width: 991px) {
    div[id^="s5_top_row1_"] {
        width: 50% !important; 
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width: 768px) {
    div[id^="s5_top_row1_"] {
        width: 100% !important; 
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 20px !important;
    }
    div[id^="s5_top_row1_"]:last-child {
        margin-bottom: 0 !important;
    }
}

/* =============================================================
   12. MODERN ARTICLE STYLING
   ============================================================= */
.article-content {
    color: #E1E1E1;
    font-family: 'Cairo', sans-serif;
    line-height: 1.8;
    text-align: right;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: #0084FF !important; /* RUTI Brand Blue */
    font-weight: 700 !important;
}

.article-content h1 {
    font-size: 2.8rem;
    text-align: center;
    margin-bottom: 2rem;
}

.article-content h3 {
    font-size: 2rem;
    border-bottom: 2px solid #0084FF;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.article-content h4 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-content p {
    font-size: 1rem;
    color: #C0C0C0 !important;
    margin-bottom: 1.5rem;
}

.article-content strong {
    color: #FFFFFF !important;
}

.article-content hr {
    border: 0;
    height: 1px;
    margin: 3rem 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.article-section {
    display: flex;
    flex-wrap: wrap; 
    align-items: flex-start;
    gap: 40px; 
    margin: 3rem 0;
}

.article-text {
    flex: 1 1 50%;
    min-width: 300px;
}

.article-section.image-right {
    flex-direction: row;
}

.article-section.image-left {
    flex-direction: row-reverse;
}

.interactive-image-container {
    display: flex;
    gap: 5px; 
    perspective: 1000px;
    flex: 1 1 45%; 
    min-width: 300px;
    aspect-ratio: 16 / 9; /* Replaces fixed height */
    max-height: 400px; /* Optional: constrains height on very wide layouts */
}

.image-slice {
    height: 100%;
    flex-grow: 1; 
    background-size: 800% 100%; 
    border-radius: 12px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.image-slice:nth-child(1) { background-position: 100% 0; transform: translateY(20px); }
.image-slice:nth-child(2) { background-position: 85.71% 0; transform: translateY(10px); }
.image-slice:nth-child(3) { background-position: 71.42% 0; transform: translateY(0px); }
.image-slice:nth-child(4) { background-position: 57.14% 0; transform: translateY(-10px); }
.image-slice:nth-child(5) { background-position: 42.85% 0; transform: translateY(-10px); }
.image-slice:nth-child(6) { background-position: 28.57% 0; transform: translateY(0px); }
.image-slice:nth-child(7) { background-position: 14.28% 0; transform: translateY(10px); }
.image-slice:nth-child(8) { background-position: 0% 0; transform: translateY(20px); }


.interactive-image-container:hover .image-slice {
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5); 
    transform: translateY(0); 
}

.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 0;
    list-style-type: none;
}

.feature-list.compact .feature-item {
    padding: 1rem;
}

.feature-item {
    background: #1D1E24;
    border: none;
    border-top: 3px solid #0084FF;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    flex: 1 1 250px;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.feature-item strong {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
    color: #0084FF !important;
    font-weight: 700;
}

.feature-item p {
    display: block; 
    margin: 0;
    font-size: 0.95rem;
    color: #C0C0C0 !important;
}

@media screen and (max-width: 768px) {
    .article-section {
        flex-direction: column-reverse !important;
    }
    .interactive-image-container {
        height: 250px; 
        width: 100%;
    }
}

/* =============================================================
   13. ARTICLE CALL TO ACTION (CTA) BOX
   ============================================================= */
.ruti-cta-box {
    background: #1D1E24;
    border: 1px solid #33343A;
    border-top: 3px solid #0084FF;
    border-radius: 12px;
    padding: 2.5rem;
    margin: 4rem auto;
    text-align: center;
    max-width: 80%;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.4);
}

.ruti-cta-box h2 {
    font-size: 2.2rem !important;
    color: #FFFFFF !important;
    margin: 0 0 1.5rem 0;
}

.ruti-cta-box .btn {
    padding: 12px 35px !important;
    font-size: 1.1rem !important;
}
/* =============================================================
   14. FRONTPAGE ARTICLE VIDEO STYLING
   ============================================================= */
.article-intro-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    margin: 2rem 0;
}
.article-video-wrapper {
    flex: 1 1 40%;
    min-width: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.article-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}
.article-intro-text {
    flex: 1 1 55%;
    min-width: 300px;
}
@media screen and (max-width: 991px) {
    .article-intro-section {
        flex-direction: column;
    }
    .article-video-wrapper {
        width: 100%;
        max-width: 500px; /* Limit video width on mobile */
        margin: 0 auto;
    }
}

/* =============================================================
   15. JOOMLA REGISTRATION FORM STYLING
   ============================================================= */

.registration .page-header h1 {
    text-align: center !important;
    font-size: 2.5rem !important;
    margin-bottom: 2rem !important;
}

.registration-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    background: #1D1E24 !important;
    border: 1px solid #33343A !important;
    border-radius: 12px !important;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3) !important;
}

.registration-form .form-label {
    color: #E1E1E1 !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.registration-form .form-control,
.registration-form .form-select {
    width: 100%;
    background-color: transparent !important;
    border: 2px solid #33343A !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 1rem !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.registration-form .form-control:focus,
.registration-form .form-select:focus {
    outline: none !important;
    border-color: #0084FF !important;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.2) !important;
}

.registration-form .form-control-feedback {
    display: none !important; /* Hides Joomla's default icons inside fields */
}