.sidebar-submenu{display:none;padding-left:20px;margin-top:5px}.sidebar-submenu.active{display:block}.sidebar-menu>li>a{display:flex;align-items:center;justify-content:space-between}.dropdown-arrow{transition:transform 0.3s ease;font-size:12px}.dropdown-arrow.rotated{transform:rotate(180deg)}.sidebar-submenu li{list-style:none;margin:8px 0}.sidebar-submenu a{color:#555;text-decoration:none;font-size:14px;display:block;padding:5px 10px;border-radius:4px;transition:all 0.3s ease}.sidebar-submenu a:hover{background-color:#f0f0f0;color:#01AAD5}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}body{overflow-x:hidden;font-size:1.2rem;line-height:1.8}header{background-color:#fff;box-shadow:0 2px 10px rgb(0 0 0 / .1);position:sticky;top:0;z-index:100;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.menu-toggle{font-size:24px;cursor:pointer;color:#01AAD5;z-index:101;order:1;position:relative}.logo{position:absolute;left:50%;transform:translateX(-50%);order:2;z-index:100}.logo img{height:40px;max-width:180px;object-fit:contain}.search-container{display:flex;align-items:center;order:3;position:relative;z-index:101}.search-container input{padding:8px 15px;border:1px solid #ddd;border-radius:20px;outline:none;width:200px;transition:width 0.3s}.search-container input:focus{width:250px;border-color:#4a90e2}.search-container button{background:none;border:none;cursor:pointer;color:#333;margin-left:-35px;z-index:1}.mobile-search-icon{display:none;font-size:20px;cursor:pointer;color:#333;order:3;z-index:101;position:relative}.mobile-search-container{display:none;width:100%;order:4;padding:10px 0;animation:slideDown 0.3s ease;position:relative;z-index:100}.mobile-search-container.active{display:block}.mobile-search-container form{display:flex;position:relative}.mobile-search-container input{width:100%;padding:10px 15px;border:1px solid #ddd;border-radius:20px;outline:none}.mobile-search-container button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#333}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.sidebar{position:fixed;top:0;left:-300px;width:280px;height:100vh;background-color:#fff;box-shadow:2px 0 10px rgb(0 0 0 / .1);transition:left 0.3s ease;z-index:1000;padding-top:20px;overflow-y:auto}.sidebar.active{left:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #eee;margin-bottom:15px;color:#01AAD5}.sidebar-close{font-size:24px;cursor:pointer;color:#666;background:none;border:none}.sidebar-close:hover{color:#01AAD5}.sidebar-menu{list-style:none;padding:0 20px}.sidebar-menu li{margin-bottom:15px}.sidebar-menu a{display:flex;align-items:center;color:#01AAD5;text-decoration:none;font-size:16px;padding:10px;border-radius:5px;transition:background-color 0.3s}.sidebar-menu a:hover{background-color:#f5f5f5}.sidebar-menu i{margin-right:15px;font-size:20px;width:24px;text-align:center}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(0 0 0 / .5);z-index:999;opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s}.overlay.active{opacity:1;visibility:visible}@media (max-width:992px){.search-container{display:none}.mobile-search-icon{display:block}header{padding-bottom:0}}@media (max-width:768px){.logo img{height:35px;max-width:175px}}@media (max-width:480px){header{padding:12px 15px}.menu-toggle{font-size:20px}.logo img{height:30px;max-width:160px}.mobile-search-icon{font-size:18px}}*{font-family:'Dosis',sans-serif}@media (max-width:768px){.social-icons{gap:15px}.social-icons a{font-size:18px}}@media (max-width:480px){.social-icons{gap:12px}.social-icons a{font-size:16px}}@media (max-width:480px){header{padding:12px 15px;position:relative}.menu-toggle{font-size:20px}.logo{position:static;transform:none;margin:0 auto;order:2}.logo img{height:28px;max-width:130px}.mobile-search-icon{font-size:18px}.social-icons{position:absolute;right:15px;top:5px;gap:10px;order:3;display:flex;align-items:center}.social-icons a{font-size:14px}}
.header-search-btn{background:none;border:none;color:#01AAD5;font-size:22px;cursor:pointer;padding:8px;transition:all 0.3s ease;order:3;position:relative;z-index:101;display:flex;align-items:center}
.header-search-btn:hover{color:#0088aa;transform:scale(1.1)}
/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.search-overlay-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    animation: slideDown 0.4s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.search-close-btn {
    position: absolute;
    top: -50px;
    right: 0;
    background: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.search-close-btn:hover {
    background: #01AAD5;
    color: #fff;
    transform: rotate(90deg);
}

.search-box-container {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.search-box-container h2 {
    margin: 0 0 30px 0;
    color: #333;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}

.search-overlay-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.search-overlay-form input {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    font-size: 18px;
    outline: none;
    transition: all 0.3s ease;
}

.search-overlay-form input:focus {
    border-color: #01AAD5;
    box-shadow: 0 0 0 3px rgba(1, 170, 213, 0.1);
}

.search-overlay-form button {
    padding: 15px 30px;
    background: #01AAD5;
    border: none;
    border-radius: 50px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-overlay-form button:hover {
    background: #0088aa;
    transform: scale(1.05);
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 20px;
}

.search-result-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.3s ease;
}

.search-result-item:hover {
    background: #f8f8f8;
}

.search-result-item a {
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-result-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
}

.search-result-info h4 {
    margin: 0 0 5px 0;
    color: #01AAD5;
    font-size: 16px;
}

.search-result-info p {
    margin: 0;
    font-size: 14px;
    color: #666;
}
/* Header Right Section - Groups search and social icons */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Header Search Button */
.header-search-btn {
    background: none;
    border: none;
    color: #01AAD5;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
}

.header-search-btn:hover {
    color: #0088aa;
    transform: scale(1.1);
}

.header-search-btn i {
    font-size: inherit;
}
/* Responsive adjustment */
@media (max-width: 768px) {
    .header-right {
        gap: 5px;
    }
    
    .header-search-btn {
        font-size: 20px;
        padding: 6px;
    }
}
/* Responsive */
@media (max-width: 768px) {
    .search-box-container {
        padding: 30px 20px;
    }
    
    .search-box-container h2 {
        font-size: 24px;
    }
    
    .search-overlay-form input,
    .search-overlay-form button {
        font-size: 16px;
        padding: 12px 20px;
    }
}
/* Loading State */
.search-loading {
    text-align: center;
    padding: 30px;
    color: #666;
    font-size: 16px;
}

.search-loading i {
    margin-right: 10px;
    color: #01AAD5;
}

/* No Results State */
.search-no-results {
    text-align: center;
    padding: 40px;
    color: #999;
}

.search-no-results i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 15px;
}

.search-no-results p {
    margin: 0;
    font-size: 16px;
}

/* Error State */
.search-error {
    text-align: center;
    padding: 30px;
    color: #dc3545;
    font-size: 16px;
}

.search-error i {
    margin-right: 10px;
}

/* Search Results Scrollbar */
.search-results::-webkit-scrollbar {
    width: 8px;
}

.search-results::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.search-results::-webkit-scrollbar-thumb {
    background: #01AAD5;
    border-radius: 10px;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: #0088aa;
}

/* Result Item Hover Effect */
.search-result-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #f8f9fa;
    transform: translateX(5px);
}

.search-result-item a {
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-result-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #f0f0f0;
}

.search-result-info {
    flex: 1;
}

.search-result-info h4 {
    margin: 0 0 5px 0;
    color: #01AAD5;
    font-size: 16px;
    font-weight: 600;
}

.search-result-info p {
    margin: 0;
    font-size: 13px;
    color: #666;
}
.sidebar-social-row{display:flex;gap:18px;padding:10px 10px 5px 10px;border-top:1px solid #eee;margin-top:5px}
.sidebar-social-row a{color:#01AAD5;font-size:20px;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:50%;background:#f5f5f5}
.sidebar-social-row a:hover{background:#01AAD5;color:#fff;transform:translateY(-2px)}

.search-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:9999;display:none;align-items:center;justify-content:center}
.search-overlay.active{display:flex}
.search-overlay-content{width:90%;max-width:700px;position:relative}
.search-close-btn{position:absolute;top:-48px;right:0;background:#fff;border:none;width:38px;height:38px;border-radius:50%;font-size:18px;color:#333;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.15);transition:all 0.3s ease}
.search-close-btn:hover{background:#01AAD5;color:#fff;transform:rotate(90deg)}
.search-box-container{background:#fff;padding:35px 30px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.2)}
.search-box-container h2{margin:0 0 25px;color:#333;font-size:28px;font-weight:600;text-align:center}
.search-overlay-form{display:flex;gap:10px}
.search-overlay-form input{flex:1;padding:13px 20px;border:2px solid #e0e0e0;border-radius:50px;font-size:16px;outline:none;transition:border-color 0.3s}
.search-overlay-form input:focus{border-color:#01AAD5}
.search-overlay-form button{padding:13px 28px;background:#01AAD5;border:none;border-radius:50px;color:#fff;font-size:16px;cursor:pointer;transition:background 0.3s}
.search-overlay-form button:hover{background:#0088aa}
.search-results{max-height:380px;overflow-y:auto;margin-top:16px}
.search-result-item{padding:12px;border-bottom:1px solid #f0f0f0;transition:all 0.2s ease}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:#f8f9fa;transform:translateX(4px)}
.search-result-item a{text-decoration:none;color:#333;display:flex;align-items:center;gap:12px}
.search-result-item img{width:46px;height:46px;object-fit:cover;border-radius:8px;border:1px solid #eee}
.search-result-info h4{margin:0 0 4px;color:#01AAD5;font-size:15px;font-weight:600}
.search-result-info p{margin:0;font-size:13px;color:#666}
.search-loading,.search-error{text-align:center;padding:25px;font-size:15px;color:#666}
.search-loading i{color:#01AAD5;margin-right:8px}
.search-no-results{text-align:center;padding:35px;color:#999}
.search-no-results i{font-size:40px;color:#ddd;display:block;margin-bottom:12px}
@media(max-width:768px){.search-box-container{padding:25px 18px}.search-box-container h2{font-size:22px}.search-overlay-form input,.search-overlay-form button{font-size:15px;padding:11px 18px}}
@media(max-width:480px){.search-overlay-content{width:95%}.search-box-container{padding:20px 14px}.search-box-container h2{font-size:18px}.search-overlay-form{flex-direction:column}.search-overlay-form input,.search-overlay-form button{width:100%;border-radius:10px}}