body{margin:0;font-family:Arial, Helvetica, sans-serif;background:#f2f4f8 !important;overflow-y:auto;}
#loginpge {background-color:red;}

*, *::before, *::after {
    box-sizing: border-box;
}

/* HEADER */
.header{height:60px;background:#ffffff;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;padding:0 15px;position:sticky;top:0;z-index:1000;}
.header-left { display:flex; column-gap:10px; align-items:center; width:310px;}

@media all and (max-width: 480px){	
.header{padding: 0px 8px; height:45px;}	
.header-left { width: calc(100% - 45px);}	
}

@media (min-width: 481px) and (max-width: 600px) {
.header{column-gap: 3px; padding: 0 7px;}
.header-left { width:300px;}}


/* Search Bar*/
.fb-search{display:flex;align-items:center;position:relative;}
.fb-logo{margin-right:10px;transition:0.25s; display:flex;}
.fb-logo img {width:125px;}
.fb-search-box{display:flex;align-items:center;background:#f0f2f5;border-radius:25px;padding:6px 12px;position:relative;width:180px;transition:0.25s;}
.fb-search-box input{border:none;background:transparent;outline:none;font-size:14px;width:100%;}
.fb-back{display:none;margin-right:8px;cursor:pointer;font-size:16px;color:#444;}

/* ===== ACTIVE STATE (focus) ===== */
.fb-search.active .fb-logo{ display:none;}
.fb-search.active .fb-search-box{ margin-left:0;width:300px;}
.fb-search.active .fb-back{display:block;}

/* ===== RESULTS PANEL ===== */
.search-results{ position:absolute; top:0; left:0; width:323px; padding-top:40px;   background:#fff;  border-radius:10px;  box-shadow:0 10px 30px rgba(0,0,0,0.18);  max-height:380px;  overflow-y:auto;  display:none;  z-index:-1;}
.search-item{  display:flex;  align-items:center;  padding:10px 12px;  text-decoration:none;  color:#222; border-bottom:1px solid #99999973;}
.search-item:hover{ background:#f0f2f5;}
.search-item img{ width:38px;  height:38px; border-radius:50%; object-fit:cover;  margin-right:10px;}
.search-title{ font-size:14px; font-weight:600; }
.search-user{ font-size:12px; color:#666; }
.search-results::-webkit-scrollbar{ width:6px; }
.search-results::-webkit-scrollbar-thumb{ background:#bcc0c4; border-radius:10px;}
.user-menu{display:flex;align-items:center;gap:10px; width:200px;}
.user-menu img{width:35px;height:35px;border-radius:50%;cursor:pointer;}
@media all and (max-width: 260px){.fb-search-box input { font-size: 10px;}}
@media all and (max-width: 375px){
.fb-search.active .fb-search-box{width: auto;}
.fb-search.active .fb-search-box {width: 60vw;}}
@media all and (max-width: 480px){
.fb-search {align-items: unset;}
.fb-logo img { width: 85px;}
.fb-search-box {padding: 2px 8px;width: calc(100% - 45px);}
.user-menu { width: auto;}}


/* Search Icon Before 480 Screen*/
.mobile-search-icon { display: none; font-size: 20px; cursor: pointer; align-items:center;}
/* Mobile view */
@media all and (max-width: 480px){
.mobile-search-icon { display: inline-block; }
#fbSearchBox {display: none; position: absolute; top: -7px; left: -1px; background: #fff; padding: 10px; z-index: 9999;}
#fbSearchBox.active {display: flex;}}
@media all and (max-width: 600px){.container { display: flex; flex-direction: column; padding:5px;overflow: visible !important;}}
@media (min-width: 481px) and (max-width: 600px) {
.fb-logo { margin-right: 3px;}
.fb-logo img { width: 106px;}
.fb-search-box{width:165px;}
.user-menu{width:150px;direction: rtl;}
.fb-search.active .fb-search-box { width: 270px;}
.profile-dropdown a {text-align: left;}}





/* MAIN LAYOUT */
.container{max-width:1400px;margin:auto;display:grid;grid-template-columns:21% 56% 21%; padding:10px; column-gap:10px;}
@media all and (max-width: 600px){.container { display: flex; flex-direction: column; padding:5px;}}

/* SIDEBARS */
.sidebar{position:sticky;top:50px;height:90vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;}
.sidebar::-webkit-scrollbar{width:0px;background:transparent;}
.card{background:#fff;border-radius:10px;padding:15px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.05); border:none !important;}
.card h3{margin-bottom:12px;}


@media all and (max-width: 600px){
.sidebar {position: static !important;  top: 0px;  height: auto !important; overflow-y: visible !important; }
.card h3{margin:0;}
.leftcolmn {background-color:#fff; display:flex;justify-content: space-between;column-gap:10px; padding: 5px;border-radius: 5px;}
.card{background: none;border-radius:0px;padding:0px;margin-bottom:0px;box-shadow: none;}}
@media (min-width: 601px) and (max-width: 950px) {.card { padding:10px;}}





/* ARTICLES */
.article-list a{display:block;padding:6px 0;text-decoration:none;color:#333;font-size:14px;}

/* USERS */
.user{display:flex;align-items:center;margin-bottom:10px;}
.user img{width:35px;height:35px;border-radius:50%;margin-right:8px;}

/* All Users */
.users-page-wrap{width:100%;}
.users-top-card{ background:#fff; border:1px solid #e8e8e8;border-radius:10px; padding:22px;  margin-bottom:18px; box-shadow:0 4px 18px rgba(0,0,0,0.05);}
.users-top-text h2{ margin:0; font-size:25px; font-weight:700; color:#00B0F0;}
.users-top-text p{ margin:8px 0 0; font-size:15px; color:#777;}
.users-search-box{ display:flex; margin-top:18px; position:relative;}
.users-search-box i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#888; font-size:15px;}
.users-search-box input{ width:100%; height:52px; border:1px solid #ddd; border-radius:10px; padding:0 18px 0 46px; font-size:15px; outline:none; background:#fafafa; transition:0.25s ease;}
.users-search-box input:focus{ border-color:#cfcfcf; background:#fff;}
.users-grid{ display:grid;grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.user-card{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e8e8e8; border-radius:5px; padding:12px; text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,0.04); transition:0.25s ease;}
.user-card:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.08);}
.user-card-left img{width:64px;  height:64px;border-radius:50%; object-fit:cover; border:2px solid #f1f1f1; display:block;}
.user-card-right{ flex:1; min-width:0;}
.user-card-right h3{margin:0 0 6px; font-size:13px; font-weight:700; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-card-right h3 span{ display:block; font-size:12px;color:#555; margin-top:2px; font-weight:normal;}
.user-card-right p{ margin:0; font-size:12px; color:#777;}
.user-card-arrow{color:#999; font-size:20px; flex-shrink:0;}
@media(max-width:900px){.users-grid{display: flex; flex-direction: column;}
.users-top-card{padding:18px;margin-top: 10px;margin-bottom: 10px;}
.users-top-text h2{font-size:24px;}
.user-card-left img{width:58px; height:58px;}
.user-card-right h3{font-size:16px;}}
.users-count-line{margin-top:12px;font-size:14px; color:#777; font-weight:400;}
.no-users-found{ grid-column:1/-1; background:#fff;border:1px solid #e8e8e8; border-radius:18px; padding:22px; text-align:center; color:#777; font-size:15px;}
#usersLoader{ display:none; text-align:center; padding:18px; color:#777; font-size:14px;}
#usersLoader.active{ display:block;}
.users-loadmore-wrap{text-align:center; margin-top:20px;}
.load-more-users-btn{ background:#EB268F; color:#fff; border:none; border-radius:30px;  padding:12px 22px; font-size:15px; font-weight:600; cursor:pointer; transition:0.2s ease;}
.load-more-users-btn:hover{transform:translateY(-1px);  box-shadow:0 6px 18px rgba(0,0,0,0.08); background:#00B0F0;}


/* WALL POSTS */
.post{background:white;border-radius:10px;padding:15px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.post img{width:100%;border-radius:8px;margin-top:10px;}
.post-actions{margin-top:10px;font-size:14px;color:#666;}

/* Post Date */
.date-separator {display: table; margin: 50px auto 0px auto;  padding: 5px 8px; border-radius: 4px;  font-size: 16px;  color: #fff;  font-weight: 500; position: relative;   background-color: #00B0F0;}
.date-separator:first-child {margin: 15px auto -15px auto;}

/* RANDOM IMAGES */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid img{width:100%;border-radius:6px;cursor:pointer;}

/* SOCIAL 
.social a{display:block;padding:5px 0;text-decoration:none;color:#444;} */

/* FOOTER */
.footer{ text-align:center; padding:20px 15px 25px; margin-top:30px;background:#fff; box-shadow:0px 0px 8px rgba(0, 0, 0, 0.3);}
.footer-links{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; font-size:14px; margin-bottom:20px;}
.footer-links a{ color:#555;  text-decoration:none; transition:0.3s ease;}
.footer-links a:hover{ color:#0058B0;}
.footer-links span{ color:#bbb;}
.footer-credit p {font-size: 14px; font-weight: normal; letter-spacing: 1px; display: block; margin: 0px; color:#555;}
.footer-credit a {color: #00B0F0;text-transform: uppercase; text-decoration: none; font-weight: bold;font-size:20px;display: block; margin-top: 5px;}
.footer-credit a span:nth-child(2) { color:#EB268F;}
@media all and (max-width: 180px){
.footer-credit a {font-size: 10.5vw;}
.footer-credit a span:nth-child(1) {font-size: 15vw !important; line-height: 11vw !important;}}
@media all and (max-width: 290px){.footer-credit a span:nth-child(1) { display:block;font-size: 28px;    line-height: 22px;}}
@media all and (max-width: 350px){.footer {padding: 15px 10px 38px;}}

/* Wall Feed */
.haifeed-colum { position: relative; max-width: 600px;  width: 100%;  margin: 0px auto;}
.wallpost a { cursor:pointer; user-select:none;}
.wallpost img { width:100%;}
.wall-btn-overlay{position: absolute; top: -26px; left: 10px; font-size: 22px; color: #555; text-decoration: none; z-index: 10; transform: scaleY(1.2);}
.wall-btn-overlay:active{transform:scale(0.95); color:#00B0F0;}

.feed-blok { display:flex;  flex-direction:column;margin-top: 30px;background-color: #ffffffc9;border-radius: 6px; position:relative;}
.feed-blok:nth-of-type(1) {margin: 0px;}
.feed-blok:last-child {border:none;}
.like-box{display: flex; justify-content: space-between; padding:10px; align-items: anchor-center;font-size:18px; color:#555;}
.likdvd {display:flex;}
.view-count{font-size:18px;color:#555; margin-right:12px; user-select:none;}
.view-count .fa-eye {padding-right:5px;}
.like-btn{display: flex; font-size:18px; color:#555;  margin-right: 5px;background:none; border:none; cursor:pointer;user-select:none;}
.like-btn:hover{ color:red;opacity:0.7;}
.like-count{display: flex;font-size:18px; margin-right:12px;align-items: anchor-center; color:#555;user-select:none;}
.share-btn { background:none; border:none;font-size:17px;margin-right:5px; cursor:pointer;color:#555; transition:1s;user-select:none;}
.share-btn:hover {color:#EB268F;}
.share-count {display: flex;align-items: anchor-center;color:#555;user-select:none;}
.feeddscrpn {padding: 0px 8px 8px 8px; }
.feeddscrpn h2 {font-family: arial; text-transform: none; letter-spacing: normal;  font-size: 15px; text-align: justify; color: #0058B0; margin: 0px;}
.feeddscrpn p {font-family: arial; font-size: 13px; color:#555;  line-height: 16px; font-weight: normal; margin: 0px; text-align:justify;}
.feeddscrpn a { color:#5f8a9e; font-size:13px; cursor:pointer;}
.feeddscrpn a:hover {color:#0058B0;}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {background-color:#EB268F;}
div:where(.swal2-container) h2:where(.swal2-title) { font-size:24px; color:#555; line-height:normal;}
#copy-link.copied{background:#4CAF50;color:#fff;}
.menu-dropdown .copy-link {cursor:pointer;}
.share-menu{position:absolute;background:#fff;border:1px solid #ccc;padding:8px;box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.share-menu a{display:block;padding:5px 10px;text-decoration:none;color:#333;}
.share-menu a:hover{background:#f2f2f2;}
.share-panel{position:fixed;bottom:-100%;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5) !important;display:flex;align-items:flex-end;transition:0.4s;}
.share-panel.active{bottom:0;}
.share-box{background:#fff;width:100%;padding:20px;border-radius:20px 20px 0 0;}
.share-box a{display:block;padding:12px;font-size:16px;text-decoration:none;color:#333;cursor:pointer;}
.share-box a:hover{background:#f2f2f2;}
.close-share{ cursor:pointer;margin-top:10px;padding:8px 15px;}
.loadmorepost {text-align:center; padding:15px; font-family: arial; color: #777; font-size: 16px;}

/* Blog Slider */
.blgttl{font-family:arial;color:#555;font-size:20px;margin:0px auto 6px auto;text-align: center;}
.blgttl span { display:block; font-size:18px;}
.blgttl .fa {color:#EB268F; font-size:20px;}
.blog-slider{width:100%;overflow:hidden;}
.blog-slide{display:none;text-align:center;}
.blog-slide img{width:100%;height:auto;border-radius:6px;}
.blog-slide.active{display:block;}
.blogurl {margin-top:5px;}
.blogurl a { text-decoration: none; color: #0058B0; font-family: arial; font-size: 16px; cursor: pointer; font-weight: normal; }
.blogurl .fa {color:#EB268F; font-size:15px; margin-left:2px;}

@media all and (max-width: 600px){
.blgttl {margin: 5px auto 10px auto; font-size:5vw;}
.haisldrs {background-color:#fff;  margin-top: 25px;  padding: 6px;   border-radius: 8px;}
.blog-slide img{border-radius:4px;}
.blogurl { margin: 10px auto 8px auto;}
.blgttl span {display: unset;font-size: unset;}
.blgttl .fa { font-size:4vw;}}
@media (min-width: 601px) and (max-width: 815px) {.blgttl {font-size:2vw;}
.blgttl span {font-size: unset;}
.blgttl .fa {font-size:2vw}
.blogurl a{font-size:2.2vw}}
@media (min-width: 815px) and (max-width: 930px) {
.blgttl {font-size:2.15vw}
.blgttl span {font-size: unset;}}

/* User Icon and Menu */
.post-header{display:flex;align-items:center; padding:10px;}
.post-header img{width:45px;height:45px;border-radius:50%;margin-right:10px;}
.post-user{display:flex;align-items:center;gap:6px;}
.post-user a {text-decoration:none; display:contents;}
.user-pic{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.user-text{display:flex; flex-direction:column;}
.user-name{font-size:14px;font-weight:bold;color:#333;}
.user-category{ font-size:13px;  color:#777;  margin-top:2px;}
.post-menu{margin-left:auto;position:relative;}
.menu-btn{cursor:pointer;font-size:20px;margin-right:10px;user-select:none;}
.menu-dropdown{display:none;position:absolute;right:0;top:25px;background:#fff;border:1px solid #ddd;border-radius:6px;width:140px;box-shadow:0 2px 6px rgba(0,0,0,.1);}
.menu-dropdown a{display:block;padding:6px 10px;font-size:13px;text-decoration:none;color:#333;}
.menu-dropdown a:hover{background:#f5f5f5;}

/* New User in Left Column */
.new-user-item{display:flex;align-items:center;padding-bottom: 6px; margin-bottom:6px; border-bottom:1px solid #99999973; user-select:none;}
.new-user-item:last-child {border:none; margin:0px; padding:0px;}
.new-user-pic{width:32px;height:32px;border-radius:4px;object-fit:cover;margin-right:8px;}
.new-user-name{font-size:14px;color:#555; text-transform:capitalize;}
.newusrs {color:#555; font-size:18px;margin-top:0px;}
.newusrs .fa { color:#00b0f09e; margin-right:3px;}
@media all and (max-width: 480px){
.newusrwdth {position: sticky; overflow: scroll;gap: 5px;scrollbar-width:none;-ms-overflow-style:none;}
.new-user-item { width:70px;}
.new-user-pic { width: 45px;  height: 45px;}
.new-user-name {font-size: 9px; margin-top:5px;}}
@media all and (max-width: 600px){
.newusrblok {width:calc(100% - 85px);align-self: center;border-radius: 5px; border:none;}
.newusrwdth {display:grid;grid-template-columns:repeat(6,1fr);gap:5px;width: 100%;}
.new-user-item {flex-direction:column;text-align: center; border:none; padding:0px; margin:0px; }
.newusrs {font-size:12px; margin-bottom:12px !important;}
.new-user-pic{width:50px;height:50px;border-radius:50%;margin:0px;}
.new-user-name{font-size:10px;margin-top: 9px;}}
@media (min-width: 601px) and (max-width: 895px){
.newusrs { font-size:2vw;}
.new-user-name { font-size:1.8vw;}}


/* More Post in Right Column */
.latest-work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;}
.latest-work-item img{width:100%;height:100px;object-fit:cover;border-radius:6px;transition:0.3s;}
.latest-work-item img:hover{transform:scale(1.05);}
.ltst-pst { font-size:18px; margin-top:0px;margin-bottom:8px; text-align:center; color:#555;}
.ltst-pst .fa {color:#00b0f09e; margin-right:3px;}
@media all and (max-width: 600px){
.ltst-pst { margin-top: 4px !important;}
.ltstwrks {background-color:#fff; padding: 8px;border-radius: 5px;margin-top: 15px;}
.latest-work-grid{grid-template-columns:repeat(3,1fr); margin-top:10px;}
.latest-work-item img {height: 30vw;}}
@media (min-width: 601px) and (max-width: 895px) {.ltst-pst { font-size:2vw;}}
@media (min-width: 601px) and (max-width: 1150px){.latest-work-item img {height: 9vw;}}


/* Youtube Widget in Right Column */
.youtube-widget img{width:100%;border-radius:6px;}
.youtube-video{position:relative;display:block;}
.youtube-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.6);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;
align-items:center;justify-content:center;font-size:16px;}
.youtube-title{font-size:14px;margin-top:8px;color:#333;line-height:1.4;}
.youtube-widget img{width:100%;height:155px;object-fit:cover;border-radius:6px;}

/* Header Menu */
.header-center{display:flex;justify-content:center;align-items:center;gap:20px;}
.nav-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#666;padding:6px 10px;border-radius:8px;transition:0.2s;}
.nav-icon i{font-size:20px;margin-bottom:3px;}
.nav-icon span{font-size:11px;}
.nav-icon:hover{background:#f0f2f5;color:#1877f2;}
@media all and (max-width: 340px){.icncrs {display:none;}
.icnalm {display:none;}
.icncnt {display:none;}}
@media (min-width: 481px) and (max-width:550px){.icncnt {display:none;}}
@media (min-width: 481px) and (max-width:590px){.icncrs {display:none;}}
@media (min-width: 481px) and (max-width:770px){.icnalm {display:none;}}
@media (min-width: 601px) and (max-width: 650px){.icncrs {display:none;}}
@media (min-width: 601px) and (max-width: 680px){.icncnt {display:none;}}
@media all and (max-width: 715px){.icnglr {display:none;}}
@media all and (max-width: 750px){.header-center {gap: 0px !important;}}
@media all and (max-width: 810px){.icnevt {display:none;}}
@media all and (max-width: 865px){.nav-icon {padding:6px;}
.nav-icon span {display:none;}
.nav-icon i {margin-bottom: 0px;}}
@media (min-width: 865px) and (max-width: 935px) {.icnevt {display:none;}}
@media all and (max-width: 1112px){.icnwsp {display:none;}}
@media all and (max-width: 1145px) {.header-center {gap:5px;}
.nav-icon {padding: 6px;}}
@media (min-width: 1045px) and (max-width: 1125px) {.header-center {gap:10px;}}


/* User Post Menu */
.usrebtns {margin-top: 7px;text-align: center;}
.usrebtns a {padding: 8px; display: inline-block; font-size: 14px; color: #fff; font-family: arial; background-color: #00B0F0; border-radius: 2px;}
.user-wall-headline{	font-family: Arial;	text-align:center; font-weight:normal;	color: #FFFFFF;	font-size: 12px; line-height: 14px; padding:8px 5px;margin:0px; box-shadow:0px 2px 3px rgba(0, 0, 0, 0.6); border-bottom:3px solid #fff;}
.postmnu { display:block; padding:10px;font-size:12px; color:#555; text-align:right;}

.post-card{position:relative;}
.post-header{display:flex;justify-content:flex-end;}
.menu-icon{font-size:20px;cursor:pointer;padding:8px;border-radius:50%;}
.menu-icon:hover{background:#f2f2f2;}
.menu-dropdown{display:none;position:absolute;right:10px;top:35px;background:white;border-radius:10px;box-shadow:0 5px 20px rgba(0,0,0,0.2);min-width:140px;overflow:hidden;z-index:100;}
.menu-dropdown a{display:block;padding:12px 15px;text-decoration:none;color:#333;font-size:14px;transition:0.2s;}
.menu-dropdown a:hover{background:#f5f5f5;}
.post-image{width:100%;border-radius:8px;}

/* User New Post Button */
.floating-post-btn{position:fixed;bottom:30px;right:30px;width:60px;height:60px;background:#007bff;color:#fff;font-size:35px;text-align:center;line-height:60px;border-radius:50%;text-decoration:none;box-shadow:0 5px 15px rgba(0,0,0,0.3);z-index:999;transition:0.3s;}
.floating-post-btn:hover{background:#0056b3;transform:scale(1.1);}

/* User Profile Icon*/
.user-profile{position:relative;display:inline-block;user-select:none;}
.profile-icon{display:flex; align-items:center; gap:8px; cursor:pointer;  text-decoration:none;}
.profile-icon img{width:40px;height:40px;border-radius:50%;cursor:pointer; object-fit:cover; display:block;}
.profile-dropdown{display:none;position:absolute;right:0;top:50px;background:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.2);border-radius:8px;min-width:180px;z-index:999;}
.profile-dropdown a{display:block;padding:12px 15px;text-decoration:none;color:#555;font-size:14px;direction: ltr;}
.profile-dropdown a:hover{background:#f2f2f2;}
.profile-dropdown .fa {color:#999;}
.profile-name{ color:#0b63c9 !important; font-size:14px !important;  font-weight:600 !important;  line-height:1.2;  margin:0;  padding:0; text-decoration:none !important;    cursor:pointer;  user-select:none;display:inline;}
.profile-nametrim {display:none;}
.mnydvdr { border-bottom:1px solid #99999980;}
@media all and (max-width: 480px){
.profile-nametrim { display:none !important;}
.profile-icon img {width: 32px; height: 32px;}}
@media all and (max-width: 600px){
.profile-name {display:none;}
.profile-nametrim{ display:inline;color:#0b63c9 !important; font-size:14px !important;  font-weight:600 !important;  line-height:1.2;  margin:0;  padding:0; text-decoration:none !important; cursor:pointer;  user-select:none;display:inline;}}

/* Back Button*/	
.back-btn {margin-bottom: 15px;}
.back-btn a {display: inline-flex;align-items: center;gap: 6px;background: #1877f2;color: #fff;padding: 8px 14px;border-radius: 20px;font-size: 14px;text-decoration: none;transition: 0.3s;}
.back-btn a:hover {background: #145dbf;}
.back-floating {position: fixed;bottom: 20px;left: 20px;background: #1877f2;color: #fff;width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 18px;text-decoration: none;box-shadow: 0 4px 10px rgba(0,0,0,0.2);transition: 0.3s;z-index: 999;}
.back-floating:hover {background: #145dbf;transform: scale(1.1);}
@media all and (max-width: 415px){.back-floating{ bottom: 8px; left: 8px; width: 30px;  height: 30px;}}
.profile-card{ position:relative; background:#fff; padding:20px; border-radius:10px;text-align:center; box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.profile-card h2 {font-size: 26px;  line-height: normal; font-weight: normal; margin: 5px auto 1px auto; color: #00B0F0;;}
.profile-img img{width:150px; height:150px; border-radius:50%;  object-fit:cover;}
.profile-card p{font-family: arial; font-size: 14px; color: #555; line-height: 20px; font-weight: normal;  text-align: justify;}
.profile-section {padding:15px 0; border-bottom:1px solid #eee;text-align: left;}
.profile-section:first-child {padding:0px 0px 30px 0px;}
.profile-section:last-child {  border-bottom:none;}
.profile-category{ font-size:14px;color:#777;}
.profile-users-btn{ position:absolute; top:10px; right:10px; background:#fff; color:#333; border-radius:50%; width:36px; height:36px; display:flex; align-items:center;justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.2); text-decoration:none; z-index:10;}
@media all and (max-width: 600px){.profile-card { margin-top:15px;}}


.welcombcgrd {background:#fff;padding:15px;border-radius:5px;margin-bottom:20px;text-align:center;}
.activation-box h2 {color: #00B0F0; font-size: 22px; margin:10px auto; line-height: normal;}
.activation-box p {color: #333;  margin-block-start: 0px;  margin-block-end: 10px;  margin-inline-start: 0px;  margin-inline-end: 0px;  unicode-bidi: isolate;  font-size: 17px; line-height: normal;}
.userwelcme { display:flex; gap:7px;justify-self: center;}
.userwelcme input {font-size: 14px;  padding: 10px;  border: 1px solid #777; border-radius: 3px;}
.userwelcme input:first-child {width:100px;}
.userwelcme button {font-size: 14px; background-color: #EB268F;  border: none; border-radius: 3px;padding: 10px; color:#fff; width:80px; cursor:pointer; transition:1s;}
.userwelcme button:hover {background:#00B0F0;}
.btn-primary {font-size: 20px; background-color: #EB268F;  border: none; border-radius: 3px;padding: 10px; color:#fff; width:80px; cursor:pointer; transition:1s; text-decoration:none; display:ruby-text; margin-top:10px;}
.btn-primary:hover {background:#00B0F0;}
@media all and (max-width: 600px){.welcombcgrd {margin-bottom: 0px; margin-top: 15px;}}


@media all and (max-width: 800px){
.userwelcme { flex-direction: column; gap: 10px; align-items: center;}
.userwelcme input:first-child { width: 100%;}
.userwelcme input { width: 100%;}

}








/* Login - Dashboard */
.profile-photo-wrapper{ position: relative; width: 120px; height: 120px; margin: auto;}
.profile-photo-wrapper img{ width: 100%;  height: 100%;  border-radius: 50%;  object-fit: cover;}
.photo-edit-icon{ position: absolute; bottom: 5px; right: 5px; background: #f2f4f8; color: #333; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor:pointer;  font-size: 16px; transition:1s;}
.photo-edit-icon:hover { color:#EB268F; }
.section-header { display:flex;  justify-content:space-between;  align-items:center;  margin-bottom:8px; color:#0b63c99c;}
.section-header span { font-weight:600;}
.edit-btn { background: #0b63c9; border:none;color: #fff; cursor:pointer;padding: 5px 10px;border-radius: 4px;font-size: 12px;transition: 1s;}
.edit-btn:hover {background:#EB268F;}
.edit-btn .fa { padding-right:5px;}
.edit-textarea { width: 100%; min-height: 120px; border-radius: 8px; border: 1px solid #ccc; padding: 10px;}
.edit-input-modern { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #ccc;}
.edit-actions-modern { margin-top: 8px; display: flex; gap: 10px;}
.photo-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); display:none;  justify-content:center;  align-items:center; z-index: 9999;}
.photo-box {background:#fff; padding:20px; border-radius:12px; width:90%; max-width:400px; text-align:center;}
.photo-box img { max-width:100%;  display:block;}
.photo-box h3 {font-size: 18px; font-weight: 700; color: #EB268F; margin: 0px auto 10px auto;}
.photo-actions {margin-top:10px;display:flex; justify-content:center; gap:10px;}
.photo-actions button {padding:6px 14px; border:none; border-radius:6px; cursor:pointer;}
.photo-actions button:first-child { background:#1877f2;  color:#fff;}
.photo-actions button:last-child { background:#ccc;}
#cropImage { width: 100%; object-fit: contain; display: block;}
.crop-container{ width:100%;  max-height:60vh;  overflow:hidden;}
.crop-container img{  max-width:100%;  display:block;}
.edit-actions-modern button {border:none; border-radius:6px; padding:6px 12px; cursor:pointer;}
.edit-actions-modern button:first-child { background:#1877f2; color:#fff;}
.edit-actions-modern button:last-child { background:#e4e6eb;}
.dsh-usr-name{text-align:center; font-weight:bold; margin-top:8px; font-size:18px; color:#555;}
.dsh-usr-ctgry{text-align:center;font-size:13px; color:#777; margin-top:2px;}


/* Login - Setting */
.profile-section input{ width: 100%; padding: 10px 14px; margin: 6px auto; border-radius: 8px; border: 1px solid #ddd; background: #f9f9f9; font-size: 14px; transition: 0.2s ease;}
.profile-section input:focus{ border-color: #00B0F0; background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(0,176,240,0.1);}
.profile-section h2 {margin: 0; font-size: 14px; font-weight: 700; color: #0b63c99c;}	
#changePasswordBtn{background: #0b63c9; color: #fff; border: none;  padding: 6px 12px;  border-radius: 5px; font-weight: 600; cursor: pointer; transition: 0.25s ease;}
#changePasswordBtn:hover{ background:#EB268F;}
.delacont {background: #ff4d4f; color:#fff; border: none;  padding: 10px;  margin-top:12px;border-radius: 5px; font-weight: 600; cursor: pointer; transition: 0.25s ease;}
.delacont:hover {background: #0b63c9;}
#deletePopup{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff;  padding:20px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.2);  z-index:9999;text-align: center;  width: 300px;}
#deletePopup h3{ margin: 0px auto 17px auto; font-size: 20px; color:#EB268F; }
#deletePopup input{ width: 90%; padding: 10px; border-radius: 4px; border: 1px solid #ddd; margin-bottom: 12px;}
#confirmDelete{ background: #ff4d4f; color: #fff; border: none;  padding: 8px 16px; border-radius:4px; cursor: pointer; margin-right: 8px;transition: 0.25s ease;}
#confirmDelete:hover{  background: #0b63c9;}
#cancelDelete{ background: #eee;  border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;}
#cancelDelete:hover{ background: #ddd;}
.popup-overlay{ position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(3px); z-index:9998;}
@media all and (max-width: 220px){#confirmDelete {display: block; width: 100%;}
#cancelDelete {display: block;width: 100%; margin-top:10px;}}
@media all and (max-width: 360px){#deletePopup {width: 70%;}}
@media all and (min-width: 400px){.profile-section input {max-width: 320px;}}


/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:3px; padding:10px;}
.gallery-item{ aspect-ratio:1/1; overflow:hidden;}
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block;}
@media all and (max-width: 600px){.grynone {display:none;}}
















/* Report Post */
.report-modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.report-box{
  width: 320px;
  max-width: 90%;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
}

.report-box select{
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-top: 10px;
  font-size: 14px;
}

.report-box textarea{
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
  resize: none;
  box-sizing: border-box;
}

.report-box button{
  margin-top: 15px;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}


#submitReport{
  background: #e0245e;
  color: #fff;
  margin-right: 10px;
}


#closeReport{
  background:#ccc;
}


#reportMessage{
  transition: all 0.3s ease;
  display:block;
}

.swal2-container{
  z-index: 99999 !important;
}


.report-modal select{
  position: relative;
}





/* Top Liked Card */	
.top-liked-card h3{ font-size:18px; margin-bottom:5px; margin-top:0px; text-align:center; color:#555;}
.top-liked-card .fa {color:red;}
.top-liked-link{ display:block; text-decoration:none; color:#555;}
.top-liked-img{ width:100%; border-radius:6px; display:block; margin-bottom:10px;}
.top-liked-content h4{ font-size:12px; line-height:12px; margin:0 0 6px; text-align:center;}
.top-liked-user{  font-size:13px;  color:#666;  margin:0 0 6px; text-align:center;}
.top-liked-count{  font-size:16px; font-weight:600; color:#e0245e;  margin:0; text-align:center;}




@media all and (max-width: 600px){
.top-liked-card {width:80px; padding-right: 8px;border-right: 1px solid #999; }
.top-liked-card h3{font-size: 8px !important; line-height:8px;margin-top:0px;}
.top-liked-img {border-radius: 3px; margin-bottom: 3px;}
.top-liked-count {font-size: 12px;}
.top-liked-content h4 { display:none;}
.top-liked-user {display:none;}
.top-liked-img {border-radius: 3px;margin-bottom: 3px;}


}

@media all and (max-width: 600px){
.top-liked-card .mlked { display: inline-block;}
.top-liked-content h4 {display:none;}

}
@media (min-width: 601px) and (max-width: 930px){
.top-liked-card h3 {font-size: 1.7vw;  margin-bottom: 3px;}

}








/* Social Media Icons Card */	
.social-follow-card h3{  margin-bottom:5px; text-align:center; margin-top:0px;}

.whatsapp-channel-btn{display:block; text-align:center; background:#25D366; color:#fff; text-decoration:none; padding:12px 14px; border-radius:5px; font-weight:600; margin-bottom:14px; transition:0.3s; font-size:18px;}
.whatsapp-channel-btn:hover{ opacity:0.92;}
.social-icon-links{ display:flex;  justify-content:center;  gap:12px;  flex-wrap:wrap;}
.social-icon{  width:42px;  height:42px;  border-radius:50%;  display:flex;  align-items:center;  justify-content:center;  text-decoration:none;  background:#f1f3f5;  color:#777;
  font-size:18px;  transition:all 0.3s ease;  border:1px solid #e2e2e2;}
.social-icon:hover{  transform:translateY(-2px);}
.social-icon.instagram:hover{ background:#E1306C; color:#fff; border-color:#E1306C;}
.social-icon.facebook:hover{ background:#1877F2; color:#fff; border-color:#1877F2;}
.social-icon.youtube:hover{ background:#FF0000; color:#fff;  border-color:#FF0000;}
.social-icon.pinterest:hover{ background:#BD081C; color:#fff; border-color:#BD081C;}
.folous { color:#555; font-size:18px;}



@media all and (max-width: 235px){.social-icon-links {display:grid;grid-template-columns:repeat(2,1fr);place-self: anchor-center;}}

@media all and (max-width: 320px){.social-icon-links {gap: 12px !important;}}


@media all and (max-width: 600px){
.social-follow-card h3{  margin-top:10px;}

.social-follow-card { background-color:#fff;  margin-top: 20px; border-radius: 8px;   padding: 6px; }
.whatsapp-channel-btn { display: table; margin: 12px auto;}
.social-icon-links { gap: 35px; margin:22px auto 8px auto;}

}

@media (min-width: 601px) and (max-width: 710px){
.social-icon-links {display:grid;grid-template-columns:repeat(2,1fr); place-self: anchor-center;}
.whatsapp-channel-btn {font-size:2.4vw; padding:8px;}
.whatsapp-channel-btn .fa {font-size: 4vw; display: block; margin-bottom:5px;}}




@media (min-width: 710px) and (max-width: 975px){
.social-icon-links {display:grid;grid-template-columns:repeat(2,1fr); place-self: anchor-center;}
.whatsapp-channel-btn {font-size:2vw;}}


@media (min-width: 975px) and (max-width: 1180px){
.whatsapp-channel-btn {font-size:1.4vw !important;}
.social-icon {width: 3vw; height: 3vw;}}

@media (min-width: 601px) and (max-width: 700px){.folous { font-size:1.9vw;} }

@media (min-width: 700px) and (max-width: 895px){.folous { font-size:2vw;}}
@media (min-width: 1095px) and (max-width: 1170px){.social-icon {width:3.5vw; height:3.5vw;}}

 






/* ABOUT */
.info-page-wrap {background: #fff; padding: 20px;}
.info-content {font-family: arial; font-size: 15px; color: #555; line-height: 20px; font-weight: normal;  text-align: justify;}
.info-content p{ margin:10px auto;}
.info-content ul{ padding-left:18px; margin-bottom:16px;}
.info-content li{ margin-bottom:8px;}
.abtlogo {width:200px; margin:0px auto;}
.abtlogo img { width:100%;}
.info-page-card{ background:#fff; padding:25px 28px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.info-title{ font-size:26px; margin-bottom:18px; color:#111827; font-weight:600;}








/* FAQ */
.faq-item{
  border-bottom:1px solid #eee;
  padding:12px 0;
  cursor:pointer;
}

.faq-question{
  font-weight:600;
  font-size:15px;
  position:relative;
}

/* plus/minus icon */
.faq-question::after{
  content:"+";
  position:absolute;
  right:0;
  font-size:18px;
  transition:0.3s;
}

.faq-item.active .faq-question::after{
  content:"−";
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height 0.35s ease, opacity 0.25s ease;
  font-size:14px;
  color:#555;
  line-height:1.7;
}

.faq-item.active .faq-answer{
  max-height:200px; /* content ke hisaab se adjust kar sakte ho */
  opacity:1;
  margin-top:8px;
}



/* CONTACT */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:15px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:8px;
  font-size:14px;
}

.contact-form button{
  background:#111;
  color:#fff;
  padding:10px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:0.3s;
}

.contact-form button:hover{
  background:#333;
}

.contact-extra{
  margin-top:20px;
  text-align:center;
}

.whatsapp-btn{
  display:inline-block;
  background:#25D366;
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:500;
}
















/* Comment Count */
.comment-count .fa { margin-right:8px;}
.comment-form{ padding:15px; border-top:1px solid #eee;}
.comment-form textarea{width:100%; min-height:45px; border:1px solid #ddd; border-radius:10px;  padding:10px; resize:none; outline:none; font-size:14px; box-sizing:border-box;}
.comment-form button{ margin-top:10px; background:#1877f2; color:#fff; border:none;padding:10px 18px; border-radius:8px; cursor:pointer; font-size:14px;}
.comment-login-note{ padding:15px; color:#666; font-size:14px;}
.inst-comment-form{ display:flex;align-items:center; border-top:1px solid #eee; padding:10px 15px; gap:10px;}
.inst-comment-form input{flex:1; border:none; outline:none; font-size:14px;background:none;}
.inst-comment-form button{ background:none; border:none; color:#1877f2;font-weight:600;cursor:pointer; font-size:14px;}
.comment-list{ padding:0 15px 10px;}
.single-comment{ padding:10px 0; border-bottom:1px solid #f1ebeb;}
.comment-user{font-weight:600; font-size:14px; color:#222; margin-bottom:3px;}
.comment-text{font-size:13px; color:#444; line-height:1.5;}
/*.comment-time{ font-size:12px; color:#888; margin-top:4px;}*/
.comment-top{display:flex; align-items:top; gap:10px; margin-bottom:5px;}
.comment-user-img{width:38px;height:38px; border-radius:50%; object-fit:cover;}
.comment-content{flex:1;}

/* Comment Actions */
.comment-actions{ margin-top:6px; display:flex; align-items:center; gap:8px;}
.comment-actions button{ border:none; background:none; padding:0; font-size:12px; color:#777; cursor:pointer;}
.comment-actions button:hover{ color:#111;}
.comment-actions span{color:#bbb; font-size:12px;}

/* Comment Edit */
.edit-comment-box{ width:100%;}
.edit-comment-textarea{width:100%; border:none;border-bottom:1px solid #ddd; resize:none; outline:none; font-size:14px; background:transparent;  padding:6px 0; min-height:40px;
    font-family:inherit;}
.edit-actions{display:flex; justify-content:flex-end; gap:18px;margin-top:8px;}
.edit-actions span{font-size:13px;cursor:pointer;color:#666;}
.save-comment-btn{color:#1877f2 !important; font-weight:600;}
.edited-label{ color:#888;font-size:12px;}