@import"https://fonts.googleapis.com/css2?family=Pacifico&family=Righteous&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700&display=swap";section{width:100%;height:100vh;position:relative}section .nav_header{width:100%;height:70px;background:transparent;position:relative}section .nav_header .nav_container{width:100%;height:100%;max-width:1920px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}section .nav_header .nav_container h2{font-size:50px;cursor:pointer;font-family:Righteous,cursive}@media screen and (max-width: 640px){section .nav_header .nav_container h2{font-size:40px;letter-spacing:1px}}@media screen and (max-width: 475px){section .nav_header .nav_container h2{font-size:35px}}section .nav_header .nav_container .login_h2{color:#fff}section .nav_header .nav_container .register_h2{color:#171717}section .nav_header .nav_container .menu_btn{display:none}@media screen and (max-width: 640px){section .nav_header .nav_container .menu_btn{display:block;background:transparent;outline:none;border:0px;cursor:pointer}}section .nav_header .nav_container .nav_btns{display:flex;gap:20px}section .nav_header .nav_container .nav_btns a{text-decoration:none;padding:10px 50px;border-radius:10px;font-size:20px;font-weight:600}@media screen and (max-width: 768px){section .nav_header .nav_container .nav_btns a{padding:10px 35px}}section .nav_header .nav_container .nav_btns .login_btn_otl{border:2px solid #ffffff;color:#fff}section .nav_header .nav_container .nav_btns .login_btn_otl:hover{background:#ffffff;color:#855be2;transition:all .35s ease-in-out}section .nav_header .nav_container .nav_btns .register_btn_otl{border:2px solid #171717;color:#171717}section .nav_header .nav_container .nav_btns .register_btn_otl:hover{background:#171717;color:#e3d354;transition:all .35s ease-in-out}section .nav_header .nav_container .nav_btns .register_btn_fill{border:2px solid #e3d354;color:#e3d354;background:#171717}section .nav_header .nav_container .nav_btns .login_btn_fill{border:2px solid #855be2;color:#855be2;background:#171717}@media screen and (max-width: 640px){section .nav_header .nav_container .nav_btns{display:none}}section .nav_header .mobile_menu_open{visibility:hidden}@media screen and (max-width: 640px){section .nav_header .mobile_menu_open{position:absolute;display:flex;visibility:visible;transition:all ease-in-out .4s;top:0px;right:0px;width:100%;height:100vh;z-index:999;background:rgba(0,0,0,.3);box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(3.2px);-webkit-backdrop-filter:blur(3.2px)}}section .nav_header .mobile_menu_open .close_btn{display:none}@media screen and (max-width: 640px){section .nav_header .mobile_menu_open .close_btn{display:block;background:transparent;outline:none;border:0px;cursor:pointer;position:absolute;top:20px;right:20px}}section .nav_header .mobile_menu_open .mobile_nav_btns{display:flex;flex-direction:column;height:200px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);gap:20px}section .nav_header .mobile_menu_open .mobile_nav_btns button{padding:10px 50px;border-radius:10px;font-size:20px;font-weight:600;cursor:pointer}@media screen and (max-width: 768px){section .nav_header .mobile_menu_open .mobile_nav_btns button{padding:10px 35px}}section .nav_header .mobile_menu_open .mobile_nav_btns .login_btn_otl{border:2px solid #ffffff;color:#fff;background:transparent}section .nav_header .mobile_menu_open .mobile_nav_btns .login_btn_otl:hover{background:#ffffff;color:#855be2;transition:all .35s ease-in-out}section .nav_header .mobile_menu_open .mobile_nav_btns .register_btn_otl{border:2px solid #171717;color:#171717;background:transparent}section .nav_header .mobile_menu_open .mobile_nav_btns .register_btn_otl:hover{background:#171717;color:#e3d354;transition:all .35s ease-in-out}section .nav_header .mobile_menu_open .mobile_nav_btns .login_btn_fill{border:2px solid #855be2;color:#855be2;background:#171717}section .nav_header .mobile_menu_open .mobile_nav_btns .register_btn_fill{border:2px solid #e3d354;color:#e3d354;background:#171717}section .nav_header .mobile_menu_close{display:none;transition:all ease-in-out .4s}.register_body{background:#e3d354}.login_body{background:#855be2}.home_container{display:flex;align-items:flex-start;gap:20px}.home_container .post_section{flex:4;display:flex;flex-direction:column;gap:20px;align-items:center;padding:0 15px 50px}.home_container .info_section{flex:2;overflow-y:scroll;height:300px;max-height:300px;padding:10px;position:relative}@media screen and (max-width: 768px){.home_container .info_section{display:none}}.home_container .info_section::-webkit-scrollbar{display:none}.home_container .info_section .info_loader{background-color:#855be2;position:absolute;top:50%;left:50%;transform:translate(-50% -50%);padding:20px;border-radius:10px}.loader_comp{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#855be2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card_body{width:450px;border-radius:10px;border:1px solid #855be2}@media screen and (max-width: 640px){.card_body{width:350px}}@media screen and (max-width: 540px){.card_body{width:100%;max-width:350px}}.card_body .card_header{display:flex;align-items:center;gap:10px;padding:10px}.card_body .card_header .user_avatar{width:35px;height:35px;border-radius:50%;overflow:hidden;cursor:pointer}.card_body .card_header .user_avatar img{width:100%;height:100%;object-fit:cover}.card_body .card_header a{text-decoration:none}.card_body .card_header a h5{color:#fff}.card_body .card_top{padding:10px}.card_body .card_top p{color:#fff;font-size:14px;font-family:400}.card_body .card_top .card_img{width:100%;border-radius:8px;max-height:250px;height:250px;overflow:hidden;margin-top:10px}.card_body .card_top .card_img img{width:100%;height:100%;object-fit:fill}.card_body .card_actions{height:40px;width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:5px;padding:5px 10px}.card_body .card_actions .trash_icon{cursor:pointer}.card_body .card_actions .actions{display:flex;align-items:center;gap:10px}.card_body .card_actions .actions span{display:flex;align-items:center;gap:5px;cursor:pointer}.card_body .card_actions .actions span p{font-size:10px}.list_body{width:100%;height:60px;margin:10px 0;align-items:center;display:flex;padding:0 5px;border-radius:10px;border:1px solid #855be2}.list_body .list_right{height:45px;width:45px;border-radius:100%;overflow:hidden;margin-right:10px}.list_body .list_right img{object-fit:cover;overflow:hidden;height:100%;width:100%}.list_body h2{font-size:14px;font-weight:500}.list_body a{margin-left:auto;text-decoration:none}.list_body a button{padding:5px 10px;outline:none;border-radius:8px;color:#fff;background-color:#855be2;border:none;cursor:pointer}.children_wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-height:450px;background:#171717;min-width:300px;width:100%;max-width:450px;border-radius:20px;padding:20px}.children_wrapper .login_form_wrapper{margin-top:20px}.children_wrapper .login_form_wrapper .input_group{display:flex;flex-direction:column;gap:5px;margin:20px 0}.children_wrapper .login_form_wrapper .input_group .input_label{font-size:22px;color:#855be2;font-weight:600}.children_wrapper .login_form_wrapper .input_group .input{height:45px;border:2px solid #855be2;border-radius:10px;background:rgba(133,91,226,.4);outline:none;width:100%;padding:0 10px;font-size:20px;color:#855be2;font-weight:600}.children_wrapper .login_form_wrapper .form_btn{height:45px;width:100%;background:#855be2;border-radius:10px;font-size:20px;font-weight:600;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;color:#fff}.children_wrapper .login_form_wrapper .error_msg{color:red;margin-top:10px;text-align:center}.children_wrapper .login_form_wrapper a{text-decoration:none;text-align:center;color:#855be2}.children_wrapper .login_form_wrapper a p{margin:5px auto}.children_wrapper{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);min-height:450px;background:#171717;min-width:300px;width:100%;max-width:450px;border-radius:20px;padding:20px}@media screen and (max-width: 640px){.children_wrapper{width:350px}}.children_wrapper h2{color:#fff;text-align:center}.children_wrapper .register_form_wrapper{margin-top:20px}.children_wrapper .register_form_wrapper .input_group{display:flex;flex-direction:column;gap:5px;margin:20px 0}.children_wrapper .register_form_wrapper .input_group .input_label{font-size:22px;color:#e3d354;font-weight:600}.children_wrapper .register_form_wrapper .input_group .input{height:45px;border:2px solid #e3d354;border-radius:10px;background:rgba(227,211,84,.4);outline:none;width:100%;padding:0 10px;font-size:20px;color:#e3d354;font-weight:600}.children_wrapper .register_form_wrapper .form_btn{height:45px;width:100%;background:#e3d354;border-radius:10px;font-size:20px;font-weight:600;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;color:#fff}.children_wrapper .register_form_wrapper .error_msg{color:red;margin-top:10px;text-align:center}.children_wrapper .register_form_wrapper a{text-decoration:none;text-align:center;color:#e3d354}.children_wrapper .register_form_wrapper a p{margin:5px auto}.web_wrapper{background:#171717;width:100%;height:100%;min-height:100vh;color:#fff;display:flex;position:relative}.web_wrapper .side_bar{display:flex;flex-direction:column;width:250px;border-right:1px solid #ffffff;position:sticky;height:100vh;flex:1;top:0;left:0;padding:50px 25px}@media screen and (max-width: 768px){.web_wrapper .side_bar{display:none}}.web_wrapper .side_bar .logo_name{text-decoration:none;color:#fff;font-size:35px;cursor:pointer;font-family:Pacifico,cursive}.web_wrapper .side_bar .side_bar_items{margin-top:50px;width:100%;display:flex;flex-direction:column;gap:20px}.web_wrapper .side_bar .side_bar_items .side_bar_item{display:flex;align-items:center;gap:8px;background:#855be2;width:80%;padding:10px 15px;text-decoration:none;border-radius:10px;color:#fff}.web_wrapper .side_bar .side_bar_items .side_bar_item h2{font-size:18px}.web_wrapper .side_bar .side_bar_items .side_bar_item_close{display:flex;align-items:center;gap:8px;background:transparent;width:80%;padding:10px 15px;text-decoration:none;border-radius:10px;color:#fff}.web_wrapper .side_bar .side_bar_items .side_bar_item_close h2{font-size:18px}.web_wrapper .side_bar .profile_link{margin-top:40px;width:80%;display:flex;align-items:center;gap:10px;cursor:pointer}.web_wrapper .side_bar .profile_link h2{font-size:16px}.web_wrapper .side_bar .profile_link .profile_img{height:40px;width:40px;border-radius:100%;overflow:hidden;border:1px solid #855be2}.web_wrapper .side_bar .profile_link .profile_img img{width:100%;height:100%;object-fit:cover}.web_wrapper .side_bar .logout_btn{width:80%;gap:10px;cursor:pointer;background:rgb(204,1,1);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;border-radius:10px;padding:12px 0;margin-top:auto;margin-bottom:10px}.web_wrapper .side_bar .logout_btn h2{font-size:16px}.web_wrapper .app_wrapper{width:calc(100% - 250px);position:relative;flex:5}@media screen and (max-width: 768px){.web_wrapper .app_wrapper{width:100%}}.web_wrapper .app_wrapper .mobile_header{display:none;background:#171717;z-index:20}@media screen and (max-width: 768px){.web_wrapper .app_wrapper .mobile_header{width:100%;position:sticky;top:0;left:0;height:50px;display:flex;align-items:center;padding:0 40px;border-bottom:1px solid #ffffff}}@media screen and (max-width: 768px) and (max-width: 640px){.web_wrapper .app_wrapper .mobile_header{padding:0 30px}}@media screen and (max-width: 768px) and (max-width: 475px){.web_wrapper .app_wrapper .mobile_header{padding:0 20px}}.web_wrapper .app_wrapper .bottom_menu{display:none;background:#171717}@media screen and (max-width: 768px){.web_wrapper .app_wrapper .bottom_menu{display:flex;position:fixed;bottom:0;width:100%;height:50px;align-items:center;justify-content:center;gap:20px;border-top:1px solid #ffffff}}.web_wrapper .app_wrapper .bottom_menu .active_icon{text-decoration:none;width:30px;height:30px;background:#855be2;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center;color:#fff;transition:all ease-in-out .35s}.web_wrapper .app_wrapper .bottom_menu .default_icon{text-decoration:none;width:30px;height:30px;background:transparent;border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center;color:#fff;transition:all ease-in-out .35s}.web_wrapper .app_wrapper .bottom_menu .mobile_img{width:25px;height:25px;border-radius:50%;overflow:hidden}.web_wrapper .app_wrapper .bottom_menu .mobile_img img{width:100%;height:100%;object-fit:cover}.web_wrapper .app_wrapper .bottom_menu .logout_icon{width:30px;height:30px;cursor:pointer;background:rgb(204,1,1);border-radius:50%;font-size:20px;display:flex;align-items:center;justify-content:center}.container{background:#171717;width:100%;height:100%}.container .container_wrapper{width:100%;height:100%;max-width:1440px;margin:0 auto}.form_body{width:100%;margin-top:20px}@media screen and (max-width: 768px){.form_body{padding:10px 0 100px}}.form_body .form{width:100%;max-width:500px}@media screen and (max-width: 640px){.form_body .form{max-width:none}}.form_body .form .image_div{width:100%;height:300px;background:#855be2;border-radius:10px;padding:10px;position:relative;cursor:pointer}.form_body .form .image_div .image_loader{position:absolute;z-index:5;background:#855be2;width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;top:50%;left:50%;transform:translate(-50%,-50%)}@media screen and (max-width: 640px){.form_body .form .image_div{height:250px}}.form_body .form .image_div .img_input{display:none}.form_body .form .image_div img{width:100%;height:100%;object-fit:cover;border-radius:10px}.form_body .form .image_div .icon_div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;cursor:pointer}.form_body .form .input_div{width:100%;margin:20px 0;display:flex;flex-direction:column;gap:10px}.form_body .form .input_div label{font-size:16px;font-weight:600}.form_body .form .input_div textarea{width:100%;height:150px;padding:10px;border-radius:10px;resize:none;background:transparent;color:#fff;font-weight:600;letter-spacing:.5px;font-size:14px}.form_body .form button{background:#855be2;color:#fff;width:100%;max-width:200px;margin-right:auto;padding:14px 40px;font-size:16px;font-weight:600;border-radius:10px;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:center}@media screen and (max-width: 575px){.form_body .form button{max-width:none;margin:0}}.search_body{margin:20px 0}.search_body .search_input{display:flex;align-items:center;border:1px solid #855be2;max-width:300px;padding:0 5px;height:40px;gap:2px;margin-bottom:20px;border-radius:8px}.search_body .search_input input{height:100%;width:100%;outline:none;background:transparent;border:none;color:#fff;letter-spacing:.5px}.search_body .search_input .icons{cursor:pointer}.search_body .search_list p{display:flex;align-items:center;justify-content:center;margin-top:40px}.chat_box{width:100%;height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.profile_body .cover_section .user_profile .user_avatar{width:100px;height:100px;border-radius:50%;border:1px solid #855be2;position:relative;transform:translateY(-30%);z-index:10}.profile_body .post_section{width:100%;margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-column-gap:10px;grid-row-gap:20px;padding-bottom:50px}form{margin-top:20px}form .avatar_input{position:relative;display:flex;align-items:center;gap:10px;margin:0 auto;justify-content:center}form .avatar_input img{width:80px;height:80px;object-fit:cover;overflow:hidden;border-radius:50%;cursor:pointer;border:1px solid #fff}form .avatar_input .edit_avatar_btn{position:absolute;top:70%;left:55%;height:30px;width:30px;border-radius:100%;cursor:pointer;background:#ffffff;display:flex;align-items:center;justify-content:center;transform:translate(-45%,-30%)}form .cover_photo_input{display:flex;align-items:flex-end;justify-content:space-between}form .cover_photo_input h2{font-size:14px;font-weight:400;margin-bottom:5px}form .cover_photo_input img{width:100px;min-width:80px;height:80px;object-fit:cover;border-radius:10px;overflow:hidden;border:1px solid #fff}form .cover_photo_input .edit_cover_btn{height:30px;width:30px;border-radius:100%;cursor:pointer;background:#ffffff;display:flex;align-items:center;justify-content:center;margin-bottom:5px}form .form_input{width:100%;margin:10px 0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}form .form_input label{font-size:18px;color:#fff;font-weight:600}form .form_input input{height:45px;border:2px solid #ffffff;border-radius:10px;background:rgba(255,255,255,.903);outline:none;width:100%;padding:0 10px;font-size:18px;color:#855be2;font-weight:500}form .form_btn{background:#ffffff;outline:none;border:none;padding:12px 40px;margin:20px 0 0;font-size:14px;font-weight:600;color:#855be2;border-radius:8px;display:flex;align-items:center;justify-content:center;min-width:180px;cursor:pointer}.modal_wrapper_open{position:fixed;top:0;left:0;background:red;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:999;background:rgba(0,0,0,.5)}@media screen and (max-width: 640px){.modal_wrapper_open{padding:0 20px}}.modal_wrapper_open .modal_content{max-width:500px;background:#855be2;width:100%;padding:10px;border-radius:10px}@media screen and (max-width: 640px){.modal_wrapper_open .modal_content{padding:15px}}.modal_wrapper_open .modal_content .modal_header{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ffffff}.modal_wrapper_open .modal_content .modal_header .close_icon{cursor:pointer}.modal_wrapper_close{display:none}.profile_body .cover_section{width:100%;position:relative;top:0;left:0;z-index:10;background:#171717}.profile_body .cover_section .cover_photo{width:100%;height:300px;overflow:hidden;border-radius:10px;position:relative}@media screen and (max-width: 640px){.profile_body .cover_section .cover_photo{height:250px}}.profile_body .cover_section .cover_photo img{width:100%;height:100%;object-fit:cover;object-position:center}.profile_body .cover_section .user_profile{padding:0 20px 10px;display:flex;align-items:center}@media screen and (max-width: 768px){.profile_body .cover_section .user_profile{flex-direction:column;padding:0}}.profile_body .cover_section .user_profile .user_avatar{width:100px;height:100px;overflow:hidden;border-radius:50%;border:1px solid #855be2;position:relative;transform:translateY(-30%);z-index:10}.profile_body .cover_section .user_profile .user_avatar img{width:100%;height:100%;object-fit:cover}.profile_body .cover_section .user_profile .user_details{margin-left:40px;margin-bottom:20px;position:relative}@media screen and (max-width: 768px){.profile_body .cover_section .user_profile .user_details{margin:0;transform:translateY(-35%);text-align:center}}.profile_body .cover_section .user_profile .user_details h2{font-size:18px;font-weight:600}@media screen and (max-width: 768px){.profile_body .cover_section .user_profile .user_details h2{font-size:20px}}.profile_body .cover_section .user_profile .user_details p{font-size:14px;font-weight:500;margin-top:5px}.profile_body .cover_section .user_profile .follow_btn{margin-left:auto;outline:none;padding:10px 40px;font-size:16px;font-weight:600;border:none;background:#855be2;border-radius:10px;margin-bottom:10px;color:#fff;cursor:pointer}@media screen and (max-width: 768px){.profile_body .cover_section .user_profile .follow_btn{margin:0}}.profile_body .cover_section .user_profile .follow_btn_loader{margin-left:auto;outline:none;padding:10px 40px;font-size:16px;font-weight:600;border:none;background:#855be2;border-radius:10px;margin-bottom:10px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}@media screen and (max-width: 768px){.profile_body .cover_section .user_profile .follow_btn_loader{margin:0}}.profile_body .post_section{width:100%;margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-column-gap:10px;grid-row-gap:20px}@media screen and (max-width: 768px){.profile_body .post_section{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);grid-column-gap:10px;grid-row-gap:20px;place-items:center}}*{margin:0;padding:0;box-sizing:border-box}body{width:100%;height:100%;font-family:Roboto,sans-serif}.page_container{width:100%;padding:50px 100px}@media screen and (max-width: 1024px){.page_container{padding:40px 60px}}@media screen and (max-width: 768px){.page_container{padding:20px 40px}}@media screen and (max-width: 640px){.page_container{padding:20px 30px}}@media screen and (max-width: 475px){.page_container{padding:20px}}