/* Menu Item Core Styles - Extracted from menu/item.blade.php */
/* ============================================= */

.about-detail {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 1px solid #e9ecef;
}

.about-image { 
    margin-bottom: 30px; 
    position: relative; 
    overflow: hidden; 
    border-radius: 15px; 
}

.about-content h3 { 
    color: #011166; 
    font-size: 28px; 
    font-weight: 700; 
    margin-bottom: 20px; 
    position: relative; 
    padding-bottom: 15px; 
}

.about-content h3::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 60px; 
    height: 3px; 
    background: linear-gradient(90deg, #fd540f, #20b1db); 
    border-radius: 2px; 
}

.about-content h4 { 
    color: #011166; 
    font-size: 20px; 
    font-weight: 600; 
    margin: 25px 0 15px 0; 
    padding-left: 15px; 
    border-left: 4px solid #20b1db; 
}

.widget { 
    background: linear-gradient(135deg, rgba(253,84,15,0.04) 0%, rgba(32,177,219,0.04) 100%); 
    padding: 25px; 
    border-radius: 15px; 
    margin-bottom: 30px; 
    border: 1px solid #dee2e6; 
    box-shadow: 0 3px 15px rgba(0,0,0,0.05); 
    position: relative; 
    overflow: hidden; 
}

.widget::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 4px; 
    background: linear-gradient(90deg, #fd540f, #20b1db); 
    border-radius: 15px 15px 0 0; 
}

.widget h3 { 
    margin-bottom: 20px; 
    color: #011166; 
    font-size: 20px; 
    font-weight: 600; 
    position: relative; 
    padding-bottom: 10px; 
}

.widget h3::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 40px; 
    height: 2px; 
    background: linear-gradient(90deg, #fd540f, #20b1db); 
    border-radius: 1px; 
}

.about-pages-list { 
    position: relative; 
    z-index: 2; 
}

.about-page-item { 
    display: flex; 
    gap: 15px; 
    padding: 15px 0; 
    border-bottom: 1px solid #f1f3f4; 
    transition: all 0.3s ease; 
}

.about-page-item:last-child { 
    border-bottom: none; 
}

.about-page-item:hover { 
    transform: translateX(5px); 
}

.about-page-image img { 
    width: 60px; 
    height: 60px; 
    object-fit: cover; 
    border-radius: 10px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
}

.about-page-placeholder { 
    width: 60px; 
    height: 60px; 
    background: linear-gradient(135deg, #fd540f 0%, #20b1db 100%); 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-size: 20px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
}

.about-page-content h6 { 
    margin: 0 0 5px 0; 
    font-size: 14px; 
    line-height: 1.4; 
}

.about-page-content h6 a { 
    color: #011166; 
    text-decoration: none; 
    transition: color 0.3s ease; 
}

.about-page-content h6 a:hover { 
    color: #fd540f; 
}

.sidebox-section { 
    align-items: flex-start; 
}

.sidebox-sublinks { 
    list-style: none; 
    margin: 6px 0 0 0; 
    padding-left: 14px; 
    border-left: 2px solid #eef2f4; 
}

.sidebox-sublinks li { 
    margin: 6px 0; 
}

.sidebox-sublinks li a { 
    color: #334155; 
    font-size: 13px; 
    text-decoration: none; 
}

.sidebox-sublinks li.current > a { 
    color: #fd540f; 
    font-weight: 600; 
}

.sidebox-subitem { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.sidebox-subimg img { 
    width: 42px; 
    height: 42px; 
    object-fit: cover; 
    border-radius: 8px; 
    box-shadow: 0 1px 4px rgba(0,0,0,0.12); 
}

.sidebox-subplaceholder { 
    display: inline-flex; 
    width: 42px; 
    height: 42px; 
    border-radius: 8px; 
    align-items: center; 
    justify-content: center; 
    background: linear-gradient(135deg, #fd540f, #20b1db); 
    color: #fff; 
}

.sidebox-subtitle a { 
    color: #334155; 
    text-decoration: none; 
    font-size: 13px; 
    font-weight: 600; 
}

.sidebox-sublinks-2 { 
    list-style: none; 
    margin: 6px 0 0 44px; 
    padding-left: 10px; 
    border-left: 1px dashed #e5e9ef; 
}

.sidebox-sublinks-2 li { 
    margin: 4px 0; 
}

.sidebox-sublinks-2 li a { 
    color: #475569; 
    font-size: 13px; 
    text-decoration: none; 
}

.sidebox-sublinks-2 li.current > a { 
    color: #fd540f; 
    font-weight: 600; 
}

/* Utilities for inline images inserted via editor or featured image */
.about-description .description-content::after { 
    content: ""; 
    display: table; 
    clear: both; 
}

.float-image-left { 
    float: left; 
    margin: 0 20px 12px 0; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
}

.float-image-right { 
    float: right; 
    margin: 0 0 12px 20px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
}

.img-pad-sm { padding: 4px; }
.img-pad-md { padding: 8px; }
.img-pad-lg { padding: 12px; }

.image-passport { 
    width: 180px; 
    height: 240px; 
    object-fit: cover; 
    border-radius: 8px; 
}

/* Responsive Design */
@media (max-width: 576px) {
    .float-image-left, 
    .float-image-right { 
        float: none; 
        display: block; 
        margin: 0 0 12px 0; 
        max-width: 100%; 
    }
    
    .image-passport { 
        width: 140px; 
        height: 186px; 
    }
}