/* =====================================================
   PROJECT SOCIAL
   Premium Facebook Theme 2026
   style.css
===================================================== */


/*********************
RESET
*********************/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

background:#eef2f7;

color:#222;

overflow-x:hidden;

line-height:1.6;

transition:.35s;

}


/*********************
ROOT COLORS
*********************/

:root{

--primary:#1877f2;

--primary-dark:#1459b5;

--secondary:#42b72a;

--danger:#e53935;

--warning:#f7b731;

--white:#ffffff;

--black:#111111;

--gray:#666;

--light:#f7f9fb;

--card:#ffffff;

--border:#dfe6ee;

--shadow:

0 10px 35px rgba(0,0,0,.08);

--shadowHover:

0 18px 45px rgba(0,0,0,.18);

--radius:18px;

--transition:.35s;

}


/*********************
DARK MODE
*********************/

body.dark{

background:#16181d;

color:#f4f4f4;

}

body.dark .card{

background:#24272d;

}

body.dark .navbar{

background:#1e2127;

}

body.dark textarea,

body.dark input{

background:#2b2f36;

color:white;

border-color:#444;

}


/*********************
SCROLLBAR
*********************/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#0f5fc7;

}


/*********************
LINKS
*********************/

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

img{

max-width:100%;

display:block;

}


/*********************
BUTTONS
*********************/

button{

border:none;

outline:none;

cursor:pointer;

font-family:inherit;

transition:.3s;

}

button:hover{

transform:translateY(-2px);

}

button:active{

transform:scale(.96);

}


/*********************
INPUTS
*********************/

input,

textarea,

select{

width:100%;

border:1px solid var(--border);

outline:none;

border-radius:12px;

padding:12px 15px;

font-size:15px;

font-family:inherit;

transition:.3s;

background:white;

}

input:focus,

textarea:focus,

select:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(24,119,242,.15);

}

textarea{

resize:none;

min-height:90px;

}


/*********************
LOADER
*********************/

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.5s;

}

.loader.hide{

opacity:0;

visibility:hidden;

}

.spinner{

width:70px;

height:70px;

border-radius:50%;

border:6px solid #e7e7e7;

border-top:6px solid var(--primary);

animation:spin .8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


/*********************
NAVBAR
*********************/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

height:75px;

background:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

box-shadow:var(--shadow);

z-index:10000;

}

.logoArea{

display:flex;

align-items:center;

gap:12px;

font-size:27px;

font-weight:700;

color:var(--primary);

}

.logoArea i{

font-size:34px;

}

.searchArea{

width:360px;

position:relative;

}

.searchArea input{

padding-left:45px;

}

.searchArea i{

position:absolute;

left:16px;

top:50%;

transform:translateY(-50%);

color:#999;

}

.navRight{

display:flex;

align-items:center;

gap:15px;

}

.iconButton{

width:45px;

height:45px;

border-radius:50%;

background:#f3f5f9;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

position:relative;

}

.iconButton:hover{

background:var(--primary);

color:white;

}

.badge{

position:absolute;

top:-3px;

right:-3px;

width:20px;

height:20px;

background:red;

color:white;

font-size:11px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

.miniProfile{

width:48px;

height:48px;

border-radius:50%;

object-fit:cover;

cursor:pointer;

border:3px solid white;

box-shadow:var(--shadow);

transition:.3s;

}

.miniProfile:hover{

transform:scale(1.08);

}


/************************************************
COVER
************************************************/

.cover{

position:relative;

margin-top:75px;

width:100%;

height:420px;

overflow:hidden;

background:#dfe7f3;

}

.cover img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:.5s;

}

.cover:hover img{

transform:scale(1.03);

}

.coverShadow{

position:absolute;

left:0;

bottom:0;

width:100%;

height:180px;

background:linear-gradient(to top,
rgba(0,0,0,.65),
transparent);

}


/************************************************
PROFILE BOX
************************************************/

.profileBox{

position:absolute;

left:50%;

bottom:30px;

transform:translateX(-50%);

width:min(1200px,92%);

display:flex;

align-items:flex-end;

justify-content:space-between;

gap:30px;

z-index:20;

}


/************************************************
PROFILE IMAGE
************************************************/

.profileImage{

position:relative;

width:190px;

height:190px;

flex-shrink:0;

}

.profileImage img{

width:100%;

height:100%;

border-radius:50%;

object-fit:cover;

border:7px solid white;

background:white;

box-shadow:var(--shadow);

transition:.35s;

}

.profileImage img:hover{

transform:scale(1.03);

}

#changeProfilePhoto{

position:absolute;

right:10px;

bottom:12px;

width:48px;

height:48px;

border-radius:50%;

background:var(--primary);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

box-shadow:var(--shadow);

}

#changeProfilePhoto:hover{

background:var(--primary-dark);

transform:scale(1.08);

}


/************************************************
PROFILE INFO
************************************************/

.profileInfo{

flex:1;

display:flex;

flex-direction:column;

justify-content:flex-end;

color:white;

padding-bottom:10px;

}

.profileInfo h1{

font-size:38px;

font-weight:700;

text-shadow:0 4px 10px rgba(0,0,0,.4);

}

.profileInfo p{

font-size:16px;

opacity:.95;

margin-top:8px;

}


/************************************************
PROFILE BUTTONS
************************************************/

.profileButtons{

display:flex;

align-items:center;

gap:15px;

margin-top:25px;

flex-wrap:wrap;

}

.profileButtons button{

padding:14px 24px;

border-radius:14px;

font-size:15px;

font-weight:600;

display:flex;

align-items:center;

gap:10px;

box-shadow:var(--shadow);

}

#addFriend{

background:var(--primary);

color:white;

}

#sendMessage{

background:var(--secondary);

color:white;

}

#editProfile{

background:white;

color:#333;

}

.profileButtons button:hover{

transform:translateY(-4px);

box-shadow:var(--shadowHover);

}


/************************************************
WRAPPER
************************************************/

.wrapper{

width:min(1400px,96%);

margin:40px auto;

display:grid;

grid-template-columns:320px 1fr 320px;

gap:25px;

align-items:start;

}


/************************************************
LEFT MENU
************************************************/

.leftMenu{

position:sticky;

top:95px;

display:flex;

flex-direction:column;

gap:20px;

}


/************************************************
RIGHT MENU
************************************************/

.rightMenu{

position:sticky;

top:95px;

display:flex;

flex-direction:column;

gap:20px;

}


/************************************************
CARD
************************************************/

.card{

background:var(--card);

border-radius:var(--radius);

padding:22px;

box-shadow:var(--shadow);

transition:.35s;

overflow:hidden;

}

.card:hover{

transform:translateY(-4px);

box-shadow:var(--shadowHover);

}

.card h2{

font-size:20px;

margin-bottom:20px;

font-weight:700;

color:#222;

}

body.dark .card h2{

color:white;

}


/************************************************
PERSONAL INFO
************************************************/

#personalInfo{

display:flex;

flex-direction:column;

gap:18px;

}

.item{

display:flex;

align-items:center;

gap:14px;

font-size:15px;

color:#555;

}

.item i{

width:42px;

height:42px;

border-radius:12px;

background:#eef4ff;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

color:var(--primary);

}

body.dark .item{

color:#ddd;

}

body.dark .item i{

background:#2f3743;

}


/************************************************
FRIEND LIST
************************************************/

#friendList{

display:flex;

flex-direction:column;

gap:15px;

}

.friend{

display:flex;

align-items:center;

gap:14px;

padding:10px;

border-radius:14px;

cursor:pointer;

transition:.3s;

}

.friend:hover{

background:#f4f6fa;

}

body.dark .friend:hover{

background:#2a2f36;

}

.friend img{

width:58px;

height:58px;

border-radius:50%;

object-fit:cover;

}

.friend h4{

font-size:15px;

margin-bottom:3px;

}

.friend p{

font-size:13px;

color:#888;

}


/************************************************
CONTENT
************************************************/

.content{

display:flex;

flex-direction:column;

gap:25px;

}


/************************************************
STORIES
************************************************/

.stories{

display:flex;

align-items:center;

gap:18px;

overflow-x:auto;

padding-bottom:10px;

scrollbar-width:none;

}

.stories::-webkit-scrollbar{

display:none;

}

.story{

min-width:130px;

height:220px;

border-radius:22px;

overflow:hidden;

position:relative;

cursor:pointer;

background:white;

box-shadow:var(--shadow);

transition:.35s;

display:flex;

flex-direction:column;

justify-content:flex-end;

}

.story:hover{

transform:translateY(-6px);

box-shadow:var(--shadowHover);

}

.story img{

width:100%;

height:100%;

object-fit:cover;

position:absolute;

left:0;

top:0;

z-index:1;

transition:.5s;

}

.story:hover img{

transform:scale(1.08);

}

.story::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:90px;

background:linear-gradient(to top,
rgba(0,0,0,.75),
transparent);

z-index:2;

}

.story span{

position:relative;

z-index:3;

padding:15px;

font-size:14px;

font-weight:600;

color:white;

}

.createStory{

background:linear-gradient(135deg,
var(--primary),
#4ea3ff);

align-items:center;

justify-content:center;

}

.createStory::after{

display:none;

}

.createStory i{

font-size:34px;

color:white;

margin-bottom:15px;

}


/************************************************
CREATE POST
************************************************/

.createPost{

background:white;

border-radius:22px;

padding:22px;

box-shadow:var(--shadow);

display:flex;

flex-direction:column;

gap:20px;

transition:.35s;

}

.createPost:hover{

box-shadow:var(--shadowHover);

}

.createHeader{

display:flex;

gap:18px;

align-items:flex-start;

}

.createHeader img{

width:58px;

height:58px;

border-radius:50%;

object-fit:cover;

}

.createHeader textarea{

border:none;

background:#f4f6fa;

min-height:90px;

font-size:16px;

padding:18px;

}

.createHeader textarea:focus{

background:white;

}


/************************************************
PREVIEW
************************************************/

.previewArea{

width:100%;

overflow:hidden;

border-radius:18px;

background:#fafafa;

}

.previewArea img,

.previewArea video{

width:100%;

max-height:500px;

object-fit:cover;

display:block;

}


/************************************************
TOOLBAR
************************************************/

.createToolbar{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

border-top:1px solid #eee;

padding-top:18px;

}

.toolbarLeft{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.toolButton{

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

background:#f4f6fa;

border-radius:14px;

cursor:pointer;

transition:.3s;

font-weight:600;

}

.toolButton:hover{

background:var(--primary);

color:white;

}

.toolButton i{

font-size:18px;

}

.shareButton{

padding:13px 26px;

background:var(--primary);

color:white;

border-radius:14px;

font-weight:600;

font-size:15px;

}

.shareButton:hover{

background:var(--primary-dark);

}


/************************************************
EMOJI PANEL
************************************************/

.emojiPanel{

display:none;

grid-template-columns:repeat(6,1fr);

gap:10px;

padding-top:10px;

}

.emojiPanel span{

font-size:28px;

cursor:pointer;

transition:.25s;

text-align:center;

}

.emojiPanel span:hover{

transform:scale(1.25);

}


/************************************************
TIMELINE
************************************************/

.timeline{

display:flex;

flex-direction:column;

gap:25px;

}


/************************************************
POST
************************************************/

.post{

background:white;

border-radius:22px;

box-shadow:var(--shadow);

overflow:hidden;

transition:.35s;

}

.post:hover{

box-shadow:var(--shadowHover);

}


/************************************************
POST HEADER
************************************************/

.postHeader{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px;

}

.postUser{

display:flex;

align-items:center;

gap:15px;

}

.postProfile{

width:56px;

height:56px;

border-radius:50%;

object-fit:cover;

}

.postName{

font-size:17px;

font-weight:700;

}

.postDate{

font-size:13px;

color:#888;

margin-top:2px;

}

.postMenu button{

width:42px;

height:42px;

border-radius:50%;

background:#f4f6fa;

}

.postMenu button:hover{

background:var(--primary);

color:white;

}


/************************************************
POST CONTENT
************************************************/

.postContent{

padding:0 22px 20px;

font-size:16px;

line-height:1.8;

color:#444;

word-break:break-word;

}


/************************************************
POST IMAGE / VIDEO
************************************************/

.postImage,

.postVideo{

width:100%;

max-height:700px;

object-fit:cover;

display:block;

background:#f4f6fa;

}


/************************************************
GALLERY
************************************************/

.gallery{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:4px;

}

.gallery img{

height:220px;

width:100%;

object-fit:cover;

cursor:pointer;

transition:.35s;

}

.gallery img:hover{

transform:scale(1.03);

}


/************************************************
POST ACTIONS
************************************************/

.postActions{

display:flex;

justify-content:space-around;

align-items:center;

padding:14px 18px;

border-top:1px solid #edf1f5;

border-bottom:1px solid #edf1f5;

background:#fff;

}

.postActions button{

flex:1;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

padding:14px;

background:transparent;

font-size:15px;

font-weight:600;

color:#666;

border-radius:12px;

transition:.30s;

}

.postActions button:hover{

background:#f3f6fa;

color:var(--primary);

}

.postActions button i{

font-size:18px;

}

.likeButton.active{

color:#e53935;

}

.likeButton.active i{

font-weight:900;

}


/************************************************
COMMENTS
************************************************/

.commentArea{

display:flex;

gap:12px;

padding:18px;

background:#fafbfc;

}

.commentInput{

flex:1;

}

.sendComment{

padding:12px 20px;

background:var(--primary);

color:white;

border-radius:12px;

font-weight:600;

}

.sendComment:hover{

background:var(--primary-dark);

}

.commentList{

display:flex;

flex-direction:column;

gap:14px;

padding:18px;

}

.comment{

display:flex;

gap:12px;

align-items:flex-start;

}

.comment img{

width:45px;

height:45px;

border-radius:50%;

object-fit:cover;

}

.commentBody{

background:#f4f6f9;

padding:12px 15px;

border-radius:15px;

flex:1;

}

.commentBody h5{

font-size:14px;

margin-bottom:5px;

}

.commentBody p{

font-size:14px;

line-height:1.6;

}


/************************************************
ANNOUNCEMENT
************************************************/

.announcement{

padding:16px;

background:#f8f9fb;

border-radius:15px;

margin-bottom:15px;

transition:.3s;

cursor:pointer;

}

.announcement:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.announcement h4{

font-size:16px;

margin-bottom:8px;

}

.announcement p{

font-size:14px;

color:#666;

}


/************************************************
ONLINE USERS
************************************************/

#onlineUsers{

display:flex;

flex-direction:column;

gap:15px;

}

.onlineUser{

display:flex;

align-items:center;

gap:12px;

padding:10px;

border-radius:14px;

cursor:pointer;

transition:.3s;

}

.onlineUser:hover{

background:#f5f7fa;

}

.onlineUser img{

width:52px;

height:52px;

border-radius:50%;

object-fit:cover;

}

.onlineUser span{

font-weight:600;

}


/************************************************
MINI GALLERY
************************************************/

.miniGallery{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:8px;

}

.miniGallery img{

width:100%;

aspect-ratio:1;

border-radius:12px;

object-fit:cover;

cursor:pointer;

transition:.3s;

}

.miniGallery img:hover{

transform:scale(1.05);

}


/************************************************
STATISTICS
************************************************/

.statistics{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:12px;

}

.statItem{

background:#f7f9fc;

padding:18px;

border-radius:15px;

text-align:center;

}

.statItem h3{

font-size:28px;

color:var(--primary);

margin-bottom:6px;

}

.statItem p{

font-size:13px;

color:#666;

}


/************************************************
MODAL
************************************************/

.modal{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.65);

display:none;

align-items:center;

justify-content:center;

padding:25px;

z-index:99999;

backdrop-filter:blur(8px);

}

.modal.active{

display:flex;

animation:fadeIn .30s;

}

.modalContent{

background:white;

width:100%;

max-width:650px;

border-radius:22px;

padding:30px;

box-shadow:var(--shadowHover);

position:relative;

}

.modalContent.large{

max-width:900px;

}

.modalHeader{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.modalHeader h2{

font-size:24px;

}

.closeModal{

width:42px;

height:42px;

border-radius:50%;

background:#f2f4f8;

display:flex;

align-items:center;

justify-content:center;

}

.closeModal:hover{

background:#ef4444;

color:white;

}


/************************************************
IMAGE MODAL
************************************************/

.modalBody{

position:relative;

max-width:1100px;

width:100%;

}

#modalImage{

width:100%;

border-radius:18px;

display:block;

max-height:90vh;

object-fit:contain;

}


/************************************************
LOADING
************************************************/

#loading{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

display:none;

align-items:center;

justify-content:center;

background:rgba(255,255,255,.7);

backdrop-filter:blur(5px);

z-index:999999;

}

.loader2{

width:65px;

height:65px;

border:6px solid #ddd;

border-top:6px solid var(--primary);

border-radius:50%;

animation:spin .8s linear infinite;

}


/************************************************
TOAST
************************************************/

.toast{

position:fixed;

right:25px;

bottom:30px;

background:#222;

color:white;

padding:16px 22px;

border-radius:14px;

opacity:0;

visibility:hidden;

transform:translateY(40px);

transition:.35s;

z-index:999999;

}

.toast.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}


/************************************************
TOP BUTTON
************************************************/

#topButton{

position:fixed;

right:25px;

bottom:100px;

width:55px;

height:55px;

border-radius:50%;

background:var(--primary);

color:white;

display:none;

align-items:center;

justify-content:center;

font-size:20px;

box-shadow:var(--shadow);

z-index:9999;

}

#topButton:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}


/************************************************
FOOTER
************************************************/

footer{

margin-top:50px;

padding:30px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 -5px 25px rgba(0,0,0,.06);

}

.footerRight{

display:flex;

gap:18px;

}

.footerRight a{

width:45px;

height:45px;

border-radius:50%;

background:#f3f6fa;

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

transition:.3s;

}

.footerRight a:hover{

background:var(--primary);

color:white;

}


/************************************************
ANIMATION
************************************************/

@keyframes fadeIn{

from{

opacity:0;

transform:scale(.95);

}

to{

opacity:1;

transform:scale(1);

}

}


/************************************************
MESSAGE BOX
************************************************/

.messageBox{

max-width:850px;

height:700px;

display:flex;

flex-direction:column;

padding:0;

overflow:hidden;

}

#messageArea{

display:flex;

flex-direction:column;

height:100%;

}

#messageList{

flex:1;

overflow-y:auto;

padding:25px;

background:#f5f7fb;

display:flex;

flex-direction:column;

gap:18px;

}

.message{

display:flex;

gap:12px;

align-items:flex-end;

max-width:75%;

}

.message img{

width:42px;

height:42px;

border-radius:50%;

object-fit:cover;

}

.messageText{

padding:14px 18px;

border-radius:18px;

background:white;

box-shadow:var(--shadow);

}

.message.me{

margin-left:auto;

flex-direction:row-reverse;

}

.message.me .messageText{

background:var(--primary);

color:white;

}

.messageInputArea{

display:flex;

gap:15px;

padding:20px;

background:white;

border-top:1px solid #eee;

}

.messageInputArea input{

flex:1;

}

.messageInputArea button{

padding:14px 22px;

background:var(--primary);

color:white;

border-radius:14px;

}


/************************************************
SEARCH RESULTS
************************************************/

#searchResults{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

gap:20px;

max-height:600px;

overflow:auto;

padding:10px;

}

.searchCard{

background:#f7f9fc;

padding:20px;

border-radius:18px;

transition:.3s;

cursor:pointer;

}

.searchCard:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}


/************************************************
NOTIFICATIONS
************************************************/

#notificationList{

display:flex;

flex-direction:column;

gap:15px;

max-height:600px;

overflow:auto;

}

.notification{

display:flex;

align-items:center;

gap:15px;

padding:18px;

background:#f7f9fc;

border-radius:16px;

transition:.3s;

}

.notification:hover{

background:#eef4ff;

}

.notification img{

width:55px;

height:55px;

border-radius:50%;

object-fit:cover;

}

.notification h4{

font-size:15px;

margin-bottom:4px;

}

.notification p{

font-size:13px;

color:#777;

}


/************************************************
CONTEXT MENU
************************************************/

#contextMenu{

position:fixed;

display:none;

background:white;

border-radius:18px;

box-shadow:var(--shadowHover);

min-width:240px;

overflow:hidden;

z-index:999999;

}

#contextMenu ul{

display:flex;

flex-direction:column;

}

#contextMenu li{

padding:16px 20px;

display:flex;

align-items:center;

gap:15px;

cursor:pointer;

transition:.25s;

}

#contextMenu li:hover{

background:var(--primary);

color:white;

}


/************************************************
ONLINE STATUS
************************************************/

.onlineDot{

width:12px;

height:12px;

background:#36d13d;

border-radius:50%;

margin-left:auto;

box-shadow:0 0 10px rgba(54,209,61,.6);

}


/************************************************
BADGES
************************************************/

.userBadge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:5px 10px;

border-radius:30px;

font-size:11px;

font-weight:600;

background:var(--primary);

color:white;

margin-left:8px;

}


/************************************************
HOVER EFFECTS
************************************************/

.post,

.card,

.story,

.friend,

.onlineUser,

.announcement{

transition:all .35s ease;

}

.post:hover{

transform:translateY(-5px);

}

.card:hover{

transform:translateY(-4px);

}

.friend:hover img,

.onlineUser:hover img{

transform:scale(1.08);

}

.friend img,

.onlineUser img{

transition:.3s;

}


/************************************************
RESPONSIVE
************************************************/

@media(max-width:1400px){

.wrapper{

grid-template-columns:280px 1fr 280px;

}

}

@media(max-width:1200px){

.wrapper{

grid-template-columns:260px 1fr;

}

.rightMenu{

display:none;

}

.cover{

height:360px;

}

.profileImage{

width:165px;

height:165px;

}

.profileInfo h1{

font-size:32px;

}

}

@media(max-width:992px){

.navbar{

padding:0 18px;

}

.searchArea{

display:none;

}

.wrapper{

grid-template-columns:1fr;

}

.leftMenu{

display:none;

}

.profileBox{

flex-direction:column;

align-items:center;

text-align:center;

bottom:20px;

}

.profileButtons{

justify-content:center;

}

.cover{

height:340px;

}

}

@media(max-width:768px){

.navbar{

height:68px;

}

.logoArea span{

display:none;

}

.cover{

height:290px;

}

.profileImage{

width:140px;

height:140px;

}

.profileInfo h1{

font-size:26px;

}

.profileButtons{

flex-direction:column;

width:100%;

}

.profileButtons button{

width:100%;

justify-content:center;

}

.stories{

gap:12px;

}

.story{

min-width:110px;

height:185px;

}

.createPost{

padding:18px;

}

.postHeader{

padding:16px;

}

.postContent{

padding:0 16px 18px;

}

.commentArea{

flex-direction:column;

}

.statistics{

grid-template-columns:1fr;

}

footer{

flex-direction:column;

gap:18px;

text-align:center;

}

}

@media(max-width:576px){

.wrapper{

width:100%;

padding:0 10px;

}

.cover{

height:250px;

}

.profileImage{

width:120px;

height:120px;

}

.profileInfo h1{

font-size:22px;

}

.createHeader{

flex-direction:column;

}

.createHeader img{

width:52px;

height:52px;

}

.toolbarLeft{

width:100%;

justify-content:space-between;

}

.toolButton{

flex:1;

justify-content:center;

padding:12px;

}

.shareButton{

width:100%;

}

.postActions{

flex-wrap:wrap;

}

.postActions button{

width:100%;

margin-bottom:8px;

}

.modalContent{

padding:20px;

}

}


/************************************************
PRINT
************************************************/

@media print{

.navbar,
.leftMenu,
.rightMenu,
footer,
.loader,
#topButton{

display:none!important;

}

.wrapper{

display:block;

width:100%;

margin:0;

}

.post{

box-shadow:none;

border:1px solid #ccc;

margin-bottom:20px;

}

}


/************************************************
PREMIUM GLASS EFFECT
************************************************/

.glass{

background:rgba(255,255,255,.18);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.35);

box-shadow:0 10px 40px rgba(0,0,0,.08);

}

body.dark .glass{

background:rgba(40,40,40,.35);

border:1px solid rgba(255,255,255,.08);

}


/************************************************
PREMIUM GRADIENTS
************************************************/

.gradient-blue{

background:linear-gradient(135deg,#1877f2,#3fa7ff);

}

.gradient-purple{

background:linear-gradient(135deg,#7b2ff7,#9b5cff);

}

.gradient-green{

background:linear-gradient(135deg,#00c853,#43e97b);

}

.gradient-orange{

background:linear-gradient(135deg,#ff9800,#ffcc80);

}

.gradient-red{

background:linear-gradient(135deg,#ff416c,#ff4b2b);

}


/************************************************
PREMIUM BUTTONS
************************************************/

.btn-premium{

background:linear-gradient(135deg,#1877f2,#4fa4ff);

color:white;

border-radius:50px;

padding:14px 28px;

font-weight:600;

box-shadow:0 15px 35px rgba(24,119,242,.35);

transition:.35s;

}

.btn-premium:hover{

transform:translateY(-5px);

box-shadow:0 25px 45px rgba(24,119,242,.45);

}

.btn-success{

background:linear-gradient(135deg,#00c853,#69f0ae);

color:white;

}

.btn-danger{

background:linear-gradient(135deg,#ff1744,#ff6b81);

color:white;

}


/************************************************
NEON SHADOW
************************************************/

.neon-blue{

box-shadow:

0 0 8px #1877f2,

0 0 18px #1877f2,

0 0 35px rgba(24,119,242,.5);

}

.neon-green{

box-shadow:

0 0 10px #00e676,

0 0 25px rgba(0,230,118,.5);

}


/************************************************
PREMIUM CARD EFFECT
************************************************/

.card-premium{

overflow:hidden;

position:relative;

}

.card-premium::before{

content:"";

position:absolute;

top:-120%;

left:-60%;

width:220%;

height:220%;

background:linear-gradient(

120deg,

transparent,

rgba(255,255,255,.28),

transparent

);

transform:rotate(25deg);

transition:1.2s;

pointer-events:none;

}

.card-premium:hover::before{

top:100%;

}


/************************************************
SKELETON LOADING
************************************************/

.skeleton{

position:relative;

overflow:hidden;

background:#eceff3;

border-radius:12px;

}

.skeleton::after{

content:"";

position:absolute;

top:0;

left:-160px;

width:160px;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.7),

transparent

);

animation:skeletonMove 1.3s infinite;

}

@keyframes skeletonMove{

100%{

left:100%;

}

}

.skeleton-avatar{

width:58px;

height:58px;

border-radius:50%;

}

.skeleton-text{

height:15px;

margin-bottom:10px;

}

.skeleton-title{

height:24px;

width:60%;

margin-bottom:18px;

}


/************************************************
IMAGE HOVER
************************************************/

.zoomImage{

overflow:hidden;

border-radius:18px;

}

.zoomImage img{

transition:.45s;

}

.zoomImage:hover img{

transform:scale(1.12);

}


/************************************************
PREMIUM FLOATING
************************************************/

.float{

animation:floating 3s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0px);

}

}


/************************************************
FADE UP
************************************************/

.fade-up{

opacity:0;

transform:translateY(40px);

animation:fadeUp .8s forwards;

}

@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}


/************************************************
SCALE
************************************************/

.scale-in{

animation:scaleIn .45s;

}

@keyframes scaleIn{

from{

opacity:0;

transform:scale(.92);

}

to{

opacity:1;

transform:scale(1);

}

}


/************************************************
RIPPLE EFFECT
************************************************/

.ripple{

position:relative;

overflow:hidden;

}

.ripple::after{

content:"";

position:absolute;

width:10px;

height:10px;

background:white;

opacity:.45;

border-radius:50%;

transform:scale(0);

animation:rippleEffect .8s;

pointer-events:none;

}

@keyframes rippleEffect{

to{

transform:scale(30);

opacity:0;

}

}


/************************************************
CUSTOM SELECTION
************************************************/

::selection{

background:#1877f2;

color:white;

}


/************************************************
SMOOTH SCROLLBAR
************************************************/

html{

scroll-padding-top:90px;

}


/************************************************
THEME COLORS
************************************************/

.theme-blue{

--primary:#1877f2;

}

.theme-green{

--primary:#00c853;

}

.theme-red{

--primary:#ff1744;

}

.theme-purple{

--primary:#7b2ff7;

}

.theme-orange{

--primary:#ff9800;

}


/************************************************
PREMIUM SHADOWS
************************************************/

.shadow-sm{

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.shadow-md{

box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.shadow-lg{

box-shadow:0 25px 60px rgba(0,0,0,.18);

}


/************************************************
BACKDROP
************************************************/

.blur-bg{

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

}


/************************************************
END PREMIUM
************************************************/

/************************************************
END OF FILE
************************************************/