/* sidebar styles */

        /* .logo-section{
            width: 30px;
        } */

        .close-bar{
            width: 25px;
            cursor: pointer;
        }

        .sidebar-container{
            width: 100%;
            min-height: 100vh;
            background-color:	#404040;
            position: fixed;
            top: 0;
            left: -100%;
            z-index: 10;
            transition: all 0.2s linear;
            
            

        }

        .show-sidebar{
            top: 0;
            left: 0;
        }

        .show-sidebar{
            position: fixed;
            top: 0;
            left:0;

        }

        .sidebar-social-main-links img{
            width: 30px;
        }

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


        .sidebar-main-links{

            margin-top: 50px;
        }

        .sidebar-center .sidebar-links{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 25px;
        }

        .sidebar-links .sidebar-link{
            color: white;
            font-size: 25px;
            font-weight: bold;
            text-transform: capitalize;
            letter-spacing: 1px;
            text-align: centers;
            padding: 10px;
            border-radius: 5px;
            transition: all 0.2s linear;
        }


        .sidebar-main-links .active,.sidebar-links .sidebar-link:hover{
            color: black;
            background-color: white;
            font-size:30px ;
        }

        .sidebar-social-main-links  {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 25px;
        }


        .sidebar-social-links {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;  
        }

        .sidebar-social-link img{
            width: 30px;
            height: 30px;
            border: 2px solid white;
            border-radius: 5px;
            padding: 5px;
            transition: all 0.3s linear;
        }

        .sidebar-social-link img:hover{
            transform: translateY(-4px);
        }

        



        .sidebar-container .sidebar-center .sidebar-header .logo-section .sidebar-title{
            color: white;
            font-size: 25px;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
            animation-name: textcolor;
            animation-duration: 2s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          
        }

        @keyframes textcolor {

            0%{
                color: white;
            }

            10%{
                color: rgb(222, 157, 157);
            }

            25%{
                color: rgb(224, 196, 160);
            }

            50%{
                color: rgb(237, 180, 159);
            }

            75%{
                color: rgb(241, 185, 241);
            }

            100%{
                color: rgb(165, 199, 226);
            }
            
            
        }