:root{
    --header-family-font:"Belanosima", sans-serif;
    --body-family-font:"Belleza", sans-serif;
    --background-color-contain:#000000;
    --accent-color:#3481b7;
    --sub-text-color:#797979;
    --text-color:#ffffff;
    --border-color:#292929;
}

*{
    margin: 0;
    padding: 0;
    font-family: var(--body-family-font);
    box-sizing: border-box;
    
}

body{
    background-color: var(--background-color-contain);
}

/*container*/
.container{
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
}

.container .mobile-nav{
    grid-row: 2/3;
    height: 80px;
    /*border-top: 1px solid var(--line-hidden);*/
    z-index: 1;
    /*border-radius: 25px 25px 0px 0px;*/
    overflow: hidden;
}

.mobile-nav .nav-bar {
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    justify-content: space-evenly; /* evenly space icons */
    align-items: center;
    border-top: 1px solid var(--border-color);
    border-radius: 10px 10px 0px 0px;
    background-color: var(--background-color-contain);

}

.mobile-nav .nav-bar .icon {
    flex: 1; /* each icon takes equal space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-transform: capitalize;
    position: relative;
    height: 100%;
    font-size: 10px;
    letter-spacing: .7px;
    color: var(--sub-text-color);
    background: transparent;
    gap: 0px;
    margin:0 5px;

}
.mobile-nav .nav-bar .icon p{
    background-color: transparent;
}

.mobile-nav .nav-bar .icon a{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
} 

.mobile-nav .nav-bar .icon .active::before{
    content: "";
    position: absolute;
    bottom: 0;left: 50%;
    transform: translateX(-50%) translateY(-7px);
    width: 7%;
    height: 5%;
    border-radius: 50%;
    background: var(--accent-color);
    filter: opacity(.7);
    z-index: 50;
}

.mobile-nav .nav-bar .icon .active::after{
    content: "";
    position: absolute;
    bottom: 0;left: 50%;
    transform: translateX(-50%) translateY(-1px);
    width: 20%;
    height: 16%;
    border-radius: 50%;
    background: transparent;
    filter: blur(2px) opacity(.8);
    border: 1px solid var(--accent-color);
    z-index: 50;
}

.mobile-nav .nav-bar .icon .active{
    color: var(--text-color);
    fill: var(--text-color);
    font-weight: 600;
}

.mobile-nav .nav-bar .icon svg{
    fill:var(--sub-text-color);
    background-color: transparent;
    height: 21px;
    width: 21px;
}


/**********************************************************************/
/*feed page*/
/***********************************************************************/

.container .feed{
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color:var(--background-color-contain);
}


.feed .feed-contain{
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
    position: relative;
}

.feed .feed-contain::-webkit-scrollbar{
    width: 0;
}

.feed .feed-contain .feed-Header{
    padding: 15px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    background-color: var(--background-color-contain);
    position: sticky;
    top: 0px;
    z-index: 10;
}

.feed .feed-contain .feed-Header .logoSection{
    padding: 0px 5px;
    height: auto;
}

.feed .feed-contain .feed-Header .logoSection img{
    height: 25px;
    width: auto;
}

.feed .feed-contain .feed-Header .action-combine{
    display: flex;
    gap: 15px;
    margin-right: 10px;
}

.feed .feed-contain .feed-Header .action-combine .search,
.feed .feed-contain .feed-Header .action-combine .notification{
    position: relative;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.feed .feed-contain .feed-Header .action-combine .search a,
.feed .feed-contain .feed-Header .action-combine .notification a{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
}


.feed .feed-contain .feed-Header .action-combine .search svg,
.feed .feed-contain .feed-Header .action-combine .notification svg{
    fill: var(--text-color);
    height: 22px;
    width: 22px;
}

/********************************/
/************************************/

.feed .feed-contain .feed-show-container{
    height: auto;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.feed .feed-contain .feed-show-container .container{
    height: auto;
    background-color: var(--background-color-contain);
}

.feed .feed-contain .feed-show-container .container .feed-top-container{
    padding: 5px;
    display: flex;
    justify-content: space-between;
}

.feed .feed-contain .feed-show-container .container .feed-top-container .profile-identity{
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
}

.feed .feed-contain .feed-show-container .container .feed-top-container .profile-identity a{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
}

.feed .feed-contain .feed-show-container .container .feed-top-container .profile-identity .profile{
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: var(--text-color);
}

.feed .feed-contain .feed-show-container .container .feed-top-container .profile-identity .identity{
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: space-evenly;
    height: 100%;
    padding: 3px 0px;
}

.feed .feed-contain .feed-show-container .container .feed-top-container .profile-identity .identity p{
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
}

.feed .feed-contain .feed-show-container .container .feed-top-container .profile-identity .identity .date-posted{
    font-weight: 500;
    color: var(--sub-text-color);
    font-size: 10px;
}


.feed .feed-contain .feed-show-container .container .feed-top-container .more-info{
    height: auto;
    padding: 7px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feed .feed-contain .feed-show-container .container .feed-top-container .more-info .info-icon{
    height: auto;
    position: relative;
}

.feed .feed-contain .feed-show-container .container .feed-top-container .more-info .info-icon a{
    position: absolute;
    top:0;left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
}

.feed .feed-contain .feed-show-container .container .feed-top-container .more-info .info-icon svg{
    fill: var(--text-color);
    height: 21px;
    width: 21px;
    transform: rotate(90deg);
}

/********************************************************************/
/*post text*/
/***************************************/
.feed .feed-contain .feed-show-container .container .post-text{
    height: auto;
    padding: 5px 5px;
}

.feed .feed-contain .feed-show-container .container .post-text .text{
    font-size: 13px;
    color: var(--text-color);
    letter-spacing: .2px;
}


/********************************************************************/
/*post*/
/****************************************/

.feed .feed-contain .feed-show-container .container .poster-container{
    height: auto;
    padding: 5px;
}

.feed .feed-contain .feed-show-container .container .poster-container .post{
    height: 270px;
    width: 100%;
    background: violet;
}

/************************************************************************/
/*action post buttons*/
/************************************************/
.feed .feed-contain .feed-show-container .container .action-post-buttons{
    height: auto;
    padding: 7px;
}

.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons{
    height: auto;
    display: flex;
    gap: 13px;
}

.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .like-btn,
.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .comment-btn,
.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .share-btn{
    position: relative;
    height: auto;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .like-btn a,
.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .comment-btn a,
.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .share-btn a{ 
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: transparent;
}


.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .like-btn svg,
.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .comment-btn svg,
.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .share-btn svg{
    height: 17px;
    width: 17px;
    fill: var(--text-color);
}

.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .comment-btn svg{
    stroke: var(--background-color-contain);
    height: 18px;
    width: 18px;
}

.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .share-btn{
    margin-left: auto;
    margin-right: 20px;
}

.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .like-btn p,
.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .comment-btn p,
.feed .feed-contain .feed-show-container .container .action-post-buttons .actionIcons .share-btn p{
    color: var(--text-color);
    font-size: 13px;
}

/************************************************************************/
/*profile panel*/
/*************************************************/
.feed-contain .profile-panel{
    position: fixed;
    top: 0;right: -30%;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: right .2s ease-in-out;
    opacity: 0;
    background-color: var(--background-color-contain);
}

.feed-contain .profile-panel.active{
    right: 0;
    opacity: 1;
    z-index: 10;
}





.feed-contain .profile-panel .profile-container{
    height: 100%;
    display: flex;
    flex-direction: column;
}

/*top nav bar*/
/*************************************************/
.feed-contain .profile-panel .profile-container .top-nav{
    height: auto;
    padding: 10px 7px;
}

.feed-contain .profile-panel .profile-container .top-nav .top-head{
    height: auto;
    display: flex;
    justify-content: space-between;
}

.feed-contain .profile-panel .profile-container .top-nav .top-head .back-arrow,
.feed-contain .profile-panel .profile-container .top-nav .top-head .more-info{
    height: auto;
}

.feed-contain .profile-panel .profile-container .top-nav .top-head .back-arrow .back,
.feed-contain .profile-panel .profile-container .top-nav .top-head .more-info .info{
    position: relative;
    height: auto;
    padding: 2px;
}

.feed-contain .profile-panel .profile-container .top-nav .top-head .back-arrow .back a,
.feed-contain .profile-panel .profile-container .top-nav .top-head .more-info .info a{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;

}


.feed-contain .profile-panel .profile-container .top-nav .top-head .back-arrow .back svg,
.feed-contain .profile-panel .profile-container .top-nav .top-head .more-info .info svg{
    fill: var(--text-color);
    height: 30px;
    width: 30px;
}




.feed-contain .profile-panel .profile-container .top-nav .top-head .profile-name{
    height: auto;
}

.feed-contain .profile-panel .profile-container .top-nav .top-head .profile-name .name{
    height: auto;
    padding: 9px;
}

.feed-contain .profile-panel .profile-container .top-nav .top-head .profile-name .name p{
    color: var(--text-color);
    font-size: 14px;
    letter-spacing: .4px;
}

/****************************************/
/********************************/

.feed-contain .profile-panel .profile-container .profile-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 7px;
}

.feed-contain .profile-panel .profile-container .profile-header .identity-profile{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.feed-contain .profile-panel .profile-container .profile-header .identity-profile .profile{
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: var(--text-color);
}

.feed-contain .profile-panel .profile-container .profile-header .identity-profile .identity{
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: space-evenly;
    height: 100%;
    padding: 3px 0px;
}

.feed-contain .profile-panel .profile-container .profile-header .identity-profile .identity p{
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
}

.feed-contain .profile-panel .profile-container .profile-header .identity-profile .identity .email-of-business{
    font-weight: 500;
    color: var(--sub-text-color);
    font-size: 11px;
}


.feed-contain .profile-panel .profile-container .profile-header .follow-btn{
    height: auto;
    padding: 5px;
}

.feed-contain .profile-panel .profile-container .profile-header .follow-btn .button{
    height: auto;
}

.feed-contain .profile-panel .profile-container .profile-header .follow-btn .button a{
    text-decoration: none;
    color: var(--background-color-contain);
    background:linear-gradient(160deg, var(--accent-color), var(--text-color));
    padding: 7px 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: capitalize;
    border-radius: 12px;
    font-size: 13px;
}

/*bio*/
.feed-contain .profile-panel .profile-container .profile-bio{
    padding: 2px 7px;
    height: auto;
    display: flex;
    width: 100%;
}

.feed-contain .profile-panel .profile-container .profile-bio .bio{
    height: auto;
    width: 100%;
    display: flex;

}

.feed-contain .profile-panel .profile-container .profile-bio .bio pre {
    color: var(--text-color);
    display: block;        /* instead of flex */
    text-align: left;      /* ensures text is left-aligned */
    width: 100%;
    height: auto;          /* auto is safer than 100% */
    padding: 0px 4px;         /* optional, for spacing */
    white-space: pre-wrap; /* keeps line breaks but wraps long lines */
    font-size: 15px;
    letter-spacing: .3px;
}


/********************************************************************************/
/*profile stats*/

.feed-contain .profile-panel .profile-container .profile-stats{
    padding: 7px 7px;
    height: auto;
}

.feed-contain .profile-panel .profile-container .profile-stats .stats{
    height: auto;
    display: flex;
    justify-content: space-evenly;
    
}

.feed-contain .profile-panel .profile-container .profile-stats .stats .posts,
.feed-contain .profile-panel .profile-container .profile-stats .stats .followers,
.feed-contain .profile-panel .profile-container .profile-stats .stats .likes,
.feed-contain .profile-panel .profile-container .profile-stats .stats .rates{
    height: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.feed-contain .profile-panel .profile-container .profile-stats .stats .posts p,
.feed-contain .profile-panel .profile-container .profile-stats .stats .followers p,
.feed-contain .profile-panel .profile-container .profile-stats .stats .likes p,
.feed-contain .profile-panel .profile-container .profile-stats .stats .rates p{
    color: var(--text-color);
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 600;
}

.feed-contain .profile-panel .profile-container .profile-stats .stats .posts .title,
.feed-contain .profile-panel .profile-container .profile-stats .stats .followers .title,
.feed-contain .profile-panel .profile-container .profile-stats .stats .likes .title,
.feed-contain .profile-panel .profile-container .profile-stats .stats .rates .title{
    color: var(--sub-text-color);
    font-weight: 500;
    font-size: 13px;
    text-transform: capitalize;
}


/*action links*/
/*******************************************************/
.feed-contain .action-links{
    padding: 5px 7px;
    height: auto;
}

.feed-contain .action-links .action-container{
    height: auto;
    display: grid;
    grid-template-columns: 1fr 20% auto;
    padding: 7px 20px 7px 3px;
    gap: 2px;
}

.feed-contain .action-links .action-container .book{
    grid-column: 1/2;
    height: auto;
}

.feed-contain .action-links .action-container .book .book-container{
    padding: 5px;
    display: flex;
}

.feed-contain .action-links .action-container .book .book-container a{
    height: 100%;
    width: 100%;
    background-color: transparent;
    display: flex;
    justify-content:center;
    padding: 9px;
    color: var(--text-color);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: capitalize;
    text-decoration: none;
    border-radius: 9px;
    border: 1px solid var(--text-color);
    font-size: 14px;
}


.feed-contain .action-links .action-container .message{
    grid-column: 2/3;
    height: auto;
}

.feed-contain .action-links .action-container .direction{
    grid-column: 3/4;
    height: auto;
}

.feed-contain .action-links .action-container .message .message-container,
.feed-contain .action-links .action-container .direction .direction-container{
    padding: 9px 5px; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    position: relative;
}

.feed-contain .action-links .action-container .message .message-container a,
.feed-contain .action-links .action-container .direction .direction-container a{
    position: absolute;
    top: 0;left: 0;
    height: 100%;
    width: 100%;
    background-color: transparent;
    z-index: 2;
}


.feed-contain .action-links .action-container .message .message-container svg,
.feed-contain .action-links .action-container .direction .direction-container svg{
    height: 25px;
    width: 25px;
    fill: var(--text-color);
}


/**********************************************************************/
/*option (post - calender)*/
/**************************************************************/
.feed-contain .profile-option{
    height: auto;
    padding: 10px 7px;
}

.feed-contain .profile-option .option-container{
    height: auto;
    display: flex;
    justify-content: space-evenly;
}

.feed-contain .profile-option .option-container .post-container,
.feed-contain .profile-option .option-container .calender-container{
    height: auto;
}

.feed-contain .profile-option .option-container .post-container .post,
.feed-contain .profile-option .option-container .calender-container .calender{
    height: auto;
    display: flex;
    position: relative;
    padding: 5px 35px;

}

.feed-contain .profile-option .option-container .post-container .post a,
.feed-contain .profile-option .option-container .calender-container .calender a{
    position: absolute;
    top: 0;left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: transparent;
}
/*
.feed-contain .profile-option .option-container .container .site .active::before{
    content: "";
    position: absolute;
    bottom: 0;left: 0;
    height: 1px;
    width: 100%;
    z-index: 2;
    background-color: var(--accent-color);
    border-radius: 5px;
}*/
.feed-contain .profile-option .option-container .post-container .post a.active,
.feed-contain .profile-option .option-container .calender-container .calender a.active {
    border-bottom:1px solid var(--accent-color);
    transition: background-color 0.3s ease;
}


.feed-contain .profile-option .option-container .post-container .post svg,
.feed-contain .profile-option .option-container .calender-container .calender svg{
    fill: var(--text-color);
    height: auto;
    width: 25px;
}

/*********************************************************************************/
/*container option*/
/*************************************************************************/

.feed-contain .optionContainer{
    height: 100%;
    background-color: transparent;
    padding: 10px 5px;
    overflow: hidden;
}

.feed-contain .optionContainer .container {
    height: 100%;
    display: flex;
    overflow-x: auto;             /* horizontal scroll */
    overflow-y: hidden;
    scroll-behavior: smooth;      /* smooth sliding */
    scroll-snap-type: x mandatory; /* snap horizontally */
    -webkit-overflow-scrolling: touch;
}

.feed-contain .optionContainer .container > div {
    flex: 0 0 100%;               /* each section takes full width */
    scroll-snap-align: start;     /* snap to start of each section */
}


.feed-contain .optionContainer .container::-webkit-scrollbar {
    height: 0; /* hide scrollbar */
}

/* post section */
.feed-contain .optionContainer .container .postOption {
    flex: 0 0 100%;   /* take full width of viewport */
    height: 100%;
    overflow: auto;
}

.feed-contain .optionContainer .container .postOption::-webkit-scrollbar{
    width: 0;
}

.feed-contain .optionContainer .container .postOption .Container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1px;
}

.feed-contain .optionContainer .container .postOption .Container .post {
    height: 140px;
    background: violet;
}

/*calender*/
/* calendar section */
.feed-contain .optionContainer .container .calenderOption {
    flex: 0 0 100%;   /* also full width */
    height: 100%;
    overflow: auto;
}

.feed-contain .optionContainer .container .calenderOption .Container{
    height: 100%;
}

.feed-contain .optionContainer .container .calenderOption .Container .calender{
    height: 100%;
    width: 100%;
    padding: 0px 7px;
}

.feed-contain .optionContainer .container .calenderOption .Container .calender .head{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-color);
    text-transform: capitalize;
    font-size: 14px;
    letter-spacing: .5px;
    font-weight: 500;
    padding: 15px 0;
    border-top: 1px solid;
    border-image: linear-gradient(to right, var(--background-color-contain), var(--accent-color), var(--background-color-contain) );
    border-image-slice: 1;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, var(--background-color-contain), var(--accent-color), var(--background-color-contain) );
    border-image-slice: 1;


}


.feed-contain .optionContainer .container .calenderOption .Container .calender .business-time{
    height: auto;
    padding: 20px 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.feed-contain .optionContainer .container .calenderOption .Container .calender .business-time .weekly{
    display: flex;
    justify-content: space-evenly;
}

.feed-contain .optionContainer .container .calenderOption .Container .calender .business-time .weekly p{
    color: var(--text-color);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
}