@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: "Nunito", sans-serif;
    box-sizing: border-box;
    text-decoration: none;
}

:root 
{
    --body-color: #f2f4f7;
    --nav-color: #ffffff;
    --navLeft-a: black;
    --navLeft-i: black;
    --bg-color: #fff;
    --writting-color: #7e7e7e;
    --postText-color: black;
    --likehoverdiv-section: #fff;
    --setiingMenu-background: #fff;
    --setting-links-a: #ccc;
    --dark-btn-bg: #ccc;
    --dark-btn-span-bg: #fff;
    --settings-menu-border: none;
    --search-box: #f0f2f5;
    --search-icon: black;
    --search-font: black;
    --search-fontFamily: "Edu AU VIC WA NT Pre", cursive;
    --profile-background: #ffffff;
    --profile-click-bg: #ccc;
    --profile-color-i: black;
    --profile-color-a: black;
    --pd-color: black;
    --profile-right-i: black;
    --profile-intro-bg: #ffff;
    --bioTextarea-color: black;
    --bioBtn-color: black;
}

.dark-theme 
{
    --body-color: #0a0a0a;
    --nav-color: #000;
    --navLeft-a: white;
    --navLeft-i: white;
    --bg-color: #000;
    --writting-color: #626262;
    --postText-color: #626262;
    --likehoverdiv-section: #031716;
    --setiingMenu-background:  radial-gradient( circle farthest-corner at 50% 30%,  rgba(100,43,115,1) 0%, rgba(4,0,4,1) 90% );
    --dark-btn-bg: #fff;
    --dark-btn-bg: #fff; /* White background for the button */
    --dark-btn-span-bg: #000;  /* Black span background */ 
    --search-box: linear-gradient(to bottom, #243949 10%, #517fa4 50%);
    --search-icon: #ffffff;
    --search-font: white;
    --profile-background: #222222;
    --profile-click-bg: #525353;
    --profile-color-i: white;
    --profile-color-a: white;
    --pd-color: white;
    --profile-intro-bg: #000000;
    --bioTextarea-color: #fff;
    --bioBtn-color: white;
}

body 
{
    background-color: var(--body-color);
    transition: background 0.3s;
}

/* custom section start */
/* .left-sidebar, .right-sidebar {
    width: 20%;
    background-color: #f0f2f5;
    overflow-y: auto;
    height: 100vh;
}

.left-sidebar::-webkit-scrollbar,
.right-sidebar::-webkit-scrollbar {
  width: 8px;
}

.left-sidebar::-webkit-scrollbar-thumb,
.right-sidebar::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.left-sidebar::-webkit-scrollbar-thumb:hover,
.right-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #555;
} */
/* custom section End */


/* navigation section Start */
nav 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--nav-color);
    padding: 5px 5%;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.nav_left, 
.right_left
{
    display: flex;
    align-items: center;
}

.nav_left a 
{
    font-family: "Abril Fatface", serif;
    font-size: 2rem;
    text-decoration: none;
    margin-right: 45px;
    color: var(--navLeft-a);
}

.nav_left ul li 
{
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

.nav_left ul li i
{
    width: 28px;
    margin: 0 15px;
    color: var(--navLeft-i);
}

.search_box 
{
    background: var(--search-box);
    width: 350px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 15px;
}

.search_box i 
{
   font-size: 1.5rem;
   color: var(--search-icon);
}

.search_box input 
{
    width: 100%;
    background: transparent;
    padding: 10px;
    outline: none;
    border: 0;
    color: var(--search-font);
    font-family: var(--search-fontFamily);
    font-weight: 600;
}

.nav-user-icon 
{
    margin-left: 30px;
}

.nav-user-icon img
{
    width: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.online 
{
    position: relative;
}

.online::after 
{
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #41db51;
    position: absolute;
    top: 0;
    right: 0;
}
/* navigation section End */

.container
{
    display: flex;
    justify-content: space-between;
    padding: 13px 5%;
}

.left-sidebar 
{
    flex-basis: 25%;
    position: sticky;
    top: 70px;
    align-self: flex-start;
    padding: 10px 8px;
    border-radius: 5px;
}

.imp_links a,
.shortcut-links a
{
    text-decoration: none;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    color: #626262;
    width: fit-content;
}

.imp_links a:last-child 
{
    color: #1876f2;
}

.imp_links a img 
{
    width: 25px;
    margin-right: 15px;
}

.imp_links 
{
    border-bottom: 1px solid #ccc;
}

.shortcut-links a img 
{
    width: 40px;
    border-radius: 4px;
    margin-right: 15px;
}

.shortcut-links p 
{
    margin: 25px 0;
    color: #626262;
    font-weight: 500;
}

/* Right-Sidebar */
.right-sidebar 
{
    flex-basis: 25%;
    position: sticky;
    top: 70px;
    align-self: flex-start;
    background-color: var(--bg-color);
    padding: 20px;
    border-radius: 4px;
    color: #626262;
    overflow-y: auto;
}

.sidebar-title 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.sidebar-title h4 
{
    font-weight: 600;
    font-size: 16px;
}

.sidebar-title a 
{
    text-decoration: none;
    color: #1876f2;
    font-size: 12px;
}

.event 
{
    display: flex;
    font-size: 14px;
    margin-bottom: 20px;
}

.left-event 
{
    border-radius: 10px;
    height: 85px;
    width: 85px;
    margin-right: 15px;
    padding: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.left-event span 
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1876f2;
    color: #fff;
    font-size: 10px;
    padding: 4px 0;
}

#date 
{
    font-size: 0.6rem;
}

#clock 
{
    font-size: 0.9rem;
}

.event p 
{
    font-size: 12px;
}

.event a 
{
    font-size: 12px;
    text-decoration: none;
    color: #1876f2;
}

.birthday 
{
    margin-left: 10px;
}

.sidebar_ads 
{
    width: 100%;
    margin-bottom: 20px;
    border-radius: 4px;
}

.online_list 
{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.online_list .online img 
{
    width: 40px;
    border-radius: 50%;
}

.online_list .online 
{
    width: 40px;
    border-radius: 50%;
    margin-right: 15px;
}

.online_list .online::after 
{
    top: unset;
    bottom: 5px;
}

/* Main Content */
.main-content 
{
    flex-basis: 47%;
    position: static;
}

/* mayday section Start */
.story-gallery 
{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.story 
{
    flex-basis: 18%;
    padding-top: 32%;
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    margin: 0px 8px 8px 0px;
}

.story img 
{
    position: absolute;
    width: 45px;
    border-radius: 50%;
    top: 10px;
    left: 10px;
    border: 3px solid #1876f2;
}

.story p 
{
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 14px;
}

.story.story-1 img 
{
    top: unset;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    border: 0;
    width: 25px;
    margin-bottom: 10px;
}

.story-1 
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/own.jpg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.story-2
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/status-2.png);
    transition: all 0.3s ease;
}

.story-3
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/status-3.png);
    transition: all 0.3s ease;
}

.story-4
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/status-4.png);
    transition: all 0.3s ease;
}

.story-5
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/status-5.png);
    transition: all 0.3s ease;
}

.story-6
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/ahad.jpg);
    transition: all 0.3s ease;
}

.story-7
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/certificate.jpg);
    transition: all 0.3s ease;
}

.story-8
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/zidan.jpg);
    transition: all 0.3s ease;
}

.story-9
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/toki-frnd.jpg);
    transition: all 0.3s ease;
}

.story-10
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/saadiul.jpg);
    transition: all 0.3s ease;
}

.story-11
{
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5)),url(img/ddog.jpg);
    transition: all 0.3s ease;
}

.story-gallery .story-1:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-2:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-3:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-4:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-5:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-6:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-7:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-8:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-9:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-10:hover 
{
    transform: scale(0.9);
}
.story-gallery .story-11:hover 
{
    transform: scale(0.9);
}

.swiper {
    width: 50%;
    height: 50%;
}

.swiper-button-next,
.swiper-button-prev {
    width: 10px; /* Set button width */
    height: 10px; /* Set button height */
    color: black;
    border-radius: 50%; /* Make it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Ensure it appears above the slider */
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.2); /* Slight zoom effect on hover */
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 6px; /* Icon size to fit the 10px button */
    color: white; /* White arrow icon */
}

.swiper-button-next::after {
    content: '\f105'; /* Font Awesome right arrow */
}

.swiper-button-prev::after {
    content: '\f104'; /* Font Awesome left arrow */
}

.swiper-wrapper:hover .swiper-button-next,
.swiper-wrapper:hover .swiper-button-prev {
    opacity: 1;
    visibility: visible;
}

.swiper-button-next {
    right: 5px; /* Position near the right edge */
}

.swiper-button-prev {
    left: 5px; /* Position near the left edge */
}
/* mayday section End */

.write_post_container 
{
    width: 100%;
    background-color: var(--bg-color);
    border-radius: 6px;
    padding: 20px;
    color: #626262;
}

.user_profile 
{
    display: flex;
    align-items: center;
}

.user_profile img 
{
    width: 45px;
    border-radius: 50%;
    margin-right: 10px;
}

.user_profile p 
{
    margin-bottom: -5px;
    font-weight: 500;
    color: #626262;
}

.user_profile small 
{
    font-size: 12px;
    cursor: pointer;
}

.post_input_container 
{
    padding-left: 55px;
    padding-top: 20px;
}

.post_input_container textarea 
{
    width: 100%;
    border: 0;
    outline: 0;
    border-bottom: 1px solid #ccc;
    background: transparent;
    resize: none;
    color: var(--writting-color);
}

.add_post_links  
{
    display: flex;
    margin-top: 10px;
}

.add_post_links a 
{
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #626262;
    margin-right: 30px;
    font-size: 13px;
}

.add_post_links img 
{
    width: 20px;
    margin-right: 10px;
}

.post-container 
{
    width: 100%;
    background: var(--bg-color);
    border-radius: 6px;
    padding: 20px;
    color: #626262;
    margin: 20px 0;
}

.user_profile span 
{
    font-size: 13px;
    color: #9a9a9a;
}

.post_text 
{
    margin: 15px 0;
    font-size: 15px;
    color: var(--postText-color);
}

.post_text a 
{
    color: #1876f2;
    text-decoration: none;
}

.post-container .post_img 
{
    width: 100%;
    border: 4px;
    margin: 5px;
}

.post_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.activity-icon div {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
}

.activity-icon div img {
    width: 18px;
    cursor: pointer;
}

.activity-icon div span {
    margin-left: 10px;
}

.post-activity-link {
    position: relative;
}

.all-like-comment-share {
    border: 1px solid black;
    padding: 5px;
    border-radius: 10px;
    display: none;
    position: absolute;
    top: -30px;
    left: 0;
    background-color: var(--likehoverdiv-section);
    z-index: 1000;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    opacity: 0;
    visibility: hidden;
}

.all-like-comment-share i {
    padding: 5px 8px;
    font-size: 1.5rem;
    transition: 0.15 ease;
    cursor: pointer;
}

.all-like-comment-share i:hover 
{
    transform: scale(1.3);
}

.show-icons {
    display: flex;
    opacity: 1;
    visibility: visible;
}


.post-profile-icon 
{
    display: flex;
    align-items: center;
}

.post-profile-icon img 
{
    width: 30px;
    border-radius: 50%;
    margin-right: 5px;
}

.post_row a 
{
    color: #9a9a9a;
    padding-right: 15px;
}

.post_row .cross 
{
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s ease-in-out;
}

.post_row .cross:hover 
{
    padding: 10px 10px 10px;
    background-color: #e7e9eb;
    border-radius: 20px 10px 5px 2px;
}

.load-more-btn 
{
    display: block;
    margin: auto;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #9a9a9a;
    color: #626262;
    background: transparent;
    border-radius: 4px;
}

.footer 
{
    text-align: center;
    color: #9a9a9a;
    padding: 10px 0 20px;
    font-size: 14px;
}



/* Setting Menu profile dropdown */
.settings-menu 
{
    position: absolute;
    width: 90%;
    max-width: 350px;
    background: var(--setiingMenu-background);
    backdrop-filter: var(--blur-effect);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    top: 105%;
    right: 5%;
    max-height: 0;
    transition: max-height 0.5s;
}

.settings-menu-height{
    max-height: 450px;
}

.user_profile a 
{
    font-size: 12px;
    color: #1876f2;
    text-decoration: none;
}

.settings_menu_inner 
{
    padding: 20px;
}

.settings-menu hr 
{
    border: 0;
    height: 1px;
    background-color: #9a9a9a;
    margin: 15px 0;
}

.setting-links 
{
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.setting-links .settings-icon 
{
    width: 38px;
    margin-right: 10px;
    border-radius: 50%;
}

.setting-links a 
{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--setting-links-a);
}

#setting_menu 
{
    border: var( --settings-menu-border);
}

/* light and dark mode button */
#dark-btn 
{
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--dark-btn-bg);
    width: 45px;
    border-radius: 15px;
    padding: 2px 3px;
    cursor: pointer;
    display: flex;
    transition: padding-left 0.5s, background 0.5s;
}

#dark-btn span 
{
    width: 18px;
    height: 18px;
    background: var(--dark-btn-span-bg); 
    border-radius: 50%;
    display: inline-block;
}

#dark-btn.dark-btn-on 
{
    padding-left: 23px;
    background: var(--dark-btn-bg);
}


/* --------------- profile.HTML Section Start --------------- */
.profile_container 
{
    padding: 20px 15%;
    color: #626262;
}

.cover-img 
{
    width: 100%;
    border-radius: 6px;
    margin-bottom: 14px;
}

.profile_details 
{
    background: var(--profile-background);
    padding: 20px;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.pd_row
{
    display: flex;
    align-items: flex-start;
}

.pd_img 
{
    width: 180px;
    height: 180px;
    margin-right: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    padding: 2px;
    cursor: pointer;
    object-fit: cover;
}


.profile_pic_click 
{
    padding: 10px 10px 10px 10px;
    background: var(--profile-click-bg);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    margin-top: 10px;
    display: none; /* Ensure it's initially hidden */
}

.profile_click_section 
{
    display: flex;
    padding: 5px;
    align-items: center;
}

.profile_click_section:hover 
{
    background: #9a9a9a;
    border-radius: 10px;
}

.profile_click_section i 
{
    font-size: 1.5rem;
    color: var(--profile-color-i);
}

.profile_click_section a 
{
    text-decoration: none;
    color: black;
    margin-left: 10px;
    color: var(--profile-color-a);
}

.pd_row div h3 
{
    font-size: 30px;
    font-weight: 600;
    color: var(--pd-color);
}

.pd_row div p 
{
    font-size: 13px;
    color: var(--pd-color);
}

.pd_row div img 
{
    width: 40px;
    border-radius: 50%;
    margin-top: 10px;
}

.profile_member 
{
    margin-right: -10px;
}

.profile_details_right button 
{
    background: #1876f2;
    border: 0;
    outline: 0;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    border-radius: 3px;
    margin-left: 10px;
    cursor: pointer;
}

.profile_details_right button img 
{
    height: 15px;
    margin-right: 10px;
}

.profile_details_right button:first-child 
{
    background: #efe6eb;
    color: #000;
}

.profile_details_right 
{
    text-align: right;
}

.profile_details_right a 
{
    background: #efe6eb;
    border-radius: 3px;
    padding: 5px 10px;
    display: inline-flex;
    margin-top: 10px;
}

.profile_details_right i 
{
    font-size: 1.8rem;
    color: var(--profile-right-i);
}

.profile_info 
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20px;
}

.info_col 
{
    flex-basis: 33%;
    position: sticky;
    top: 70px;
}

.post_col 
{
    flex-basis: 65%;
}

.profile_intro {
    background: var(--profile-intro-bg, #f9f9f9); /* Fallback color */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.profile_intro h3 {
    margin-bottom: 20px;
}

.profile_intro a {
    color: black;
    text-align: center;
    padding: 5px 105px;
    background: #ccc;
    border-radius: 10px;
    text-decoration: none;
    display: inline-block;
}

.profile_intro a:hover {
    background: #b5b4b4;
}

#bioSection {
    margin-top: 10px;
}

#bioTextarea {
    width: 100%;
    height: 80px; /* Adjust height as needed */
    background: transparent;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    resize: none; /* Prevent resizing */
    outline: none;
    color: var(--bioTextarea-color);
}

.buttons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.buttons button {
    padding: 5px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#cancelBtn {
    background-color: #949090; /* Red */
    color: white;
    padding: 10px;
    color: var(--bioBtn-color);
}

#saveBtn {
    background-color: #828282; /* Green */
    color: white;
    padding: 10px;
    color: var(--bioBtn-color);
}

.profile_intro ul li 
{
    list-style: none;
    font-size: 15px;
    margin: 15px 0;
    display: flex;
    align-items: center;
}

.profile_intro ul li img 
{
    width: 26px;
    margin-right: 10px;
}

.profile_intro_2 
{
    background: var(--profile-intro-bg, #f9f9f9); /* Fallback color */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.title_box 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title_box a 
{
    text-decoration: none;
    color: #1876f2;
    font-size: 14px;
}

.title_box a:hover
{
    background: #efebeb50;
    padding: 10px 12px;
    border-radius: 10px;
}

.photo_box 
{
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 10px;
    margin-top: 15px;
}

.photo_box img 
{
    width: 100%;
    cursor: pointer;
}

.friends_box 
{
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 10px;
    margin-top: 15px;
}

.friends_box img 
{
    width: 100%;
    cursor: pointer;
    padding-bottom: 20px;
}

.friends{
    border-radius: 10px;
}

.friends_box div
{
    position: relative;
}

.friends_box p 
{
    position: absolute;
    bottom: 0;
    left: 0;
}
/* --------------- profile.HTML Section End --------------- */