@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  box-sizing: border-box;
  font-family: 'Quicksand', sans-serif;
}
a:hover {
    text-decoration: none;
}
:root{
    overflow-x: hidden;
    }
.horizontal-line img{
    height:30px;
    width:30px;
}   

        /* Desktop Compatibility */
          @media(min-width:450px) and (max-width:3000px){  
            .header-new {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              height: 45px;
              background-color: white;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0,0,0,0.2);
              transition: background-color 0.3s ease;
            }
            .header-right-title{
              font-size: 17px;
              float: right;
              padding-right: 8px;
              padding-top: 4px;
            }
            #restOfScreen {
              position: fixed;
              top: 63px;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 998;
              background-color: rgba(0, 0, 0, 0.5);
              pointer-events: none;
            }
  
  
            /* Header CSS */
            .header-new {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              height: 45px;
              background-color: white;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* add shadow to bottom */
            }
  
  
            .header-logo{
              display:block;
              font-size:25px;
              font-weight:700;
              text-align: left;
              padding-left: 70px;
              padding-top: 4px;
              color:#FD4955;
            }
  
            .header-logo a{
              color:#FD4955;
              transition: color 0.2s ease;
              text-decoration: none;
            }
  
            .header-logo a:hover{
              color: #FE2972;
            }
  
            .header-user-logo{
              float:right; 
              margin-top: -40px; 
              margin-right: 20px;
            }
  
            .imgbox_icon_new{
              height: 40px; 
              width:45px; 
              pointer-events: none;
            }
  
            /* Hamburger Menu CSS */
  
            .hamburger {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: relative;
              top: -23px;
              left: 5px;
              width: 40px;
              height: 30px;
              background-color: transparent;
              border: none;
              cursor: pointer;
            }
  
            .hamburger::before,
            .hamburger::after {
              content: '';
              display: block;
              width: 100%;
              height: 2px;
              background-color: black;
            }
  
            .hamburger::before {
              transform: translateY(-5px);
            }
  
            .hamburger::after {
              transform: translateY(3px);
            }
            .hamburger span:nth-child(3) {
              bottom: 0;
            }
            .hamburger i{
                color: #000;
                font-size: 30px;
                
            }
  
            .close-btn{
                border: none;
                border-radius: 50%;
                width: 25px;
                height: 25px;
                position: relative;
                left: 235px;
                top: 25px;
                cursor: pointer;
            }
  
            .close-btn i{
                display: flex;
                font-size: 22px;
                margin-left: -4.5px;
            }
  
            .menu-heading{
              padding-top: 55px;
                padding-right: 30px;
                padding-bottom: 25px;
                text-align: center;
            }
  
            .menu-heading h2{
            color: #E0313C;
            font-weight: 600;
            }
  
            .rounded-circle-img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
  
  
            .menu-inside{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding-right: 30px;
                gap: 10px;
                margin: 15px;
                margin-top: -15px;
            }
  
  
            .menu-inside p{
              font-weight: 600;
            }
  
            #profile-new{
                display:block;
                background: #000;
            }
  
            #profile-new p{
              display:block;
              font-size:18px;
              font-weight: 600;
              color: #fff !important;
            }
  
            #new_menu{
                display:block;
                position: absolute;
                width: 327px;
                margin: -140px 0 0 -50px;
                padding-right: 0px;
                margin-top: -84px;
                padding-left: 40px;
                padding-bottom: 0px !important;
                background: #000 !important;
                list-style-type: none;
                -webkit-font-smoothing: antialiased;
                transform-origin: 0% 0%;
                transform: translate(-100%, 0);
                transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
                border-radius: 15px;
            }
  
            .newmenulinks{
              display: flex;
              justify-content: space-between;
            }
  
            .link-images{
              padding-right: 20px;
            }
  
            #newMenuToggle{
              display: fixed;
              position: relative;
              top: -15px;
              left: 15px;
              z-index: 1;
              color:rgb(255, 255, 255);
              -webkit-user-select: none;
              user-select: none;
            }  
  
            #new_menu li{
              padding-left:30px;
              font-size: 1rem;
              padding-bottom: 30px;
              font-weight:600;
              color: #fff !important;
            }
  
            #new_menu li:first-child{
              padding-left: 20px;
              padding-right: 20px;
            }
  
            #newMenuToggle a
            {
              text-decoration: none;
              font-size:1.5rem;
              color: #000000;
              background-color:black;
              transition: color 0.03s ease;
            }
  
            #newMenuToggle a:hover{
              color: rgba(172, 169, 169, 0.884);
            }
  
            .newsearchform{
                margin-top: -82px;
                margin-left: -80px; 
            }
  
            .new-search-input{
              text-align:center;
              display:center;
            }
  
            .new-search-input input{
              height: 35px;
                width: 40%;
                font-family: 'Quicksand', sans-serif;
                font-weight: 500;
                font-size: smaller;
                outline: none;
                border-style: solid;
                border-radius: 3px;
                border: 1px solid #FD4955;
                border-radius: 20px;
                padding: 0 20px 0 5px;
                padding-left: 20px;
                transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
            }
  
            .new-search-input input:focus,
            .new-search-input input:hover {
                border-color: #CDCDCD;
                background-color: #CDCDCD;
                border: 1px solid #FD4955;
            }
  
            #newSearchicon{
              margin-left: -50px;
              height:29px;
              width:42px;
              padding-top: 2px;
              border:none;
              background-color: transparent;
              border-radius: 20px;
              transition: all 0.2s ease-in-out;
              cursor: pointer;
            }
              
            #newSearchicon img {
              height: 26px;
              width: 26px;
            }
  
            .searching{
              padding-left: 20px;
              padding-right: 20px;
            }
          } 
  
          /* Mobile Compatibility */
          @media (max-width: 450px) {
            .header-new {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              height: 63px;
              background-color: white;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0,0,0,0.2);
              transition: background-color 0.3s ease;
            }
            .header-right-title{
              font-size: 17px;
              float: right;
              padding-right: 8px;
              padding-top: 15px;
            }
            #restOfScreen {
              position: fixed;
              top: 63px;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 998;
              background-color: rgba(0, 0, 0, 0.5);
              pointer-events: none;
            }
    
    
            /* Header CSS */
            .header-new {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              height: 45px;
              background-color: white;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* add shadow to bottom */
            }
    
    
            .header-logo{
              display:block;
              font-size:32px;
              font-weight:700;
              text-align: left;
              padding-left: 65px;
              color:#FD4955;
            }
    
            .header-logo a{
              color:#FD4955;
              transition: color 0.2s ease;
              text-decoration: none;
              font-size: 25px;
            }
    
            .header-logo a:hover{
              color: #E0313C;
            }
    
            .header-user-logo{
              float:right; 
              margin-top: -40px; 
              margin-right: 20px;
            }
    
            .imgbox_icon_new{
              height: 40px; 
              width:45px; 
              pointer-events: none;
            }
    
            /* Hamburger Menu CSS */
    
            .hamburger {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: relative;
              top: -23px;
              left: 5px;
              width: 40px;
              height: 30px;
              background-color: transparent;
              border: none;
              cursor: pointer;
            }
    
            .hamburger::before,
            .hamburger::after {
              content: '';
              display: block;
              width: 100%;
              height: 2px;
              background-color: black;
            }
    
            .hamburger::before {
              transform: translateY(-5px);
            }
    
            .hamburger::after {
              transform: translateY(3px);
            }
            .hamburger span:nth-child(3) {
              bottom: 0;
            }
            .hamburger i{
                color: #000;
                font-size: 30px;
                
            }
    
            .close-btn{
                border: none;
                border-radius: 50%;
                width: 25px;
                height: 25px;
                position: relative;
                left: 235px;
                top: 25px;
                cursor: pointer;
            }
    
            .close-btn i{
                display: flex;
                font-size: 22px;
                margin-left: -4.5px;
            }
    
            .menu-heading{
              padding-top: 55px;
                padding-right: 30px;
                padding-bottom: 25px;
                text-align: center;
            }
    
            .menu-heading h2{
            color: #E0313C;
            font-weight: 600;
            }
    
            .rounded-circle-img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
    
    
            .menu-inside{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding-right: 30px;
                gap: 10px;
                margin: 15px;
                margin-top: -15px;
            }
    
    
            .menu-inside p{
              font-weight: 600;
            }
    
            #profile-new{
                display:block;
                background: #000;
            }
    
            #profile-new p{
              display:block;
              font-size:18px;
              font-weight: 600;
              color: #fff !important;
            }
    
            #new_menu{
                display:block;
                position: absolute;
                width: 327px;
                margin: -140px 0 0 -50px;
                padding-right: 0px;
                margin-top: -84px;
                padding-left: 40px;
                padding-bottom: 0px !important;
                background: #000 !important;
                list-style-type: none;
                -webkit-font-smoothing: antialiased;
                transform-origin: 0% 0%;
                transform: translate(-100%, 0);
                transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
                border-radius: 15px;
            }
    
            .newmenulinks{
              display: flex;
              justify-content: space-between;
            }
    
            .link-images{
              padding-right: 20px;
            }
    
            #newMenuToggle{
              display: fixed;
              position: relative;
              top: -15px;
              left: 15px;
              z-index: 1;
              color:rgb(255, 255, 255);
              -webkit-user-select: none;
              user-select: none;
            }  
    
            #new_menu li{
              padding-left:30px;
              font-size: 1rem;
              padding-bottom: 30px;
              font-weight:600;
              color: #fff !important;
            }
    
            #new_menu li:first-child{
              padding-left: 20px;
              padding-right: 20px;
            }
    
            #newMenuToggle a
            {
              text-decoration: none;
              font-size:1.5rem;
              color: #000000;
              background-color:black;
              transition: color 0.03s ease;
            }
    
            #newMenuToggle a:hover{
              color: rgba(172, 169, 169, 0.884);
            }
    
            .newsearchform{
                margin-top: -82px;
                margin-left: -80px; 
            }
    
            .new-search-input{
              text-align:center;
              display:center;
            }
    
            .new-search-input input{
              height: 35px;
                width: 40%;
                font-family: 'Quicksand', sans-serif;
                font-weight: 500;
                font-size: smaller;
                outline: none;
                border-style: solid;
                border-radius: 3px;
                border: 1px solid #FD4955;
                border-radius: 20px;
                padding: 0 20px 0 5px;
                padding-left: 20px;
                transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
            }
    
            .new-search-input input:focus,
            .new-search-input input:hover {
                border-color: #CDCDCD;
                background-color: #CDCDCD;
                border: 1px solid #FD4955;
            }
    
            #newSearchicon{
              margin-left: -50px;
              height:29px;
              width:42px;
              padding-top: 2px;
              border:none;
              background-color: transparent;
              border-radius: 20px;
              transition: all 0.2s ease-in-out;
              cursor: pointer;
            }
              
            #newSearchicon img {
              height: 26px;
              width: 26px;
            }
    
            .searching{
              padding-left: 20px;
              padding-right: 20px;
            }
          }   
          /* Desktop Compatibility */
          @media(min-width:450px) and (max-width:3000px){  
            .Entire-Header{
              background-color: rgb(248, 104, 116);;
              padding-bottom: 3px;
              height:100px;
            
            }
            .logo{
              display:block;
              font-size:40px;
              font-weight:600;
              text-align: center;
              color:white;
              } 
            .header-new {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              height: 45px;
              background-color: white;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0,0,0,0.2);
              transition: background-color 0.3s ease;
            }
  
            #restOfScreen {
              position: fixed;
              top: 63px;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 998;
              background-color: rgba(0, 0, 0, 0.5);
              pointer-events: none;
            }
  
  
            /* Header CSS */
            .header-new {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              height: 45px;
              background-color: white;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* add shadow to bottom */
            }
  
  
            .header-user-logo{
              float:right; 
              margin-top: -40px; 
              margin-right: 20px;
            }
  
            .imgbox_icon_new{
              height: 40px; 
              width:45px; 
              pointer-events: none;
            }
  
            /* Hamburger Menu CSS */
  
            .hamburger {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: relative;
              top: -23px;
              left: 5px;
              width: 40px;
              height: 30px;
              background-color: transparent;
              border: none;
              cursor: pointer;
            }
  
            .hamburger::before,
            .hamburger::after {
              content: '';
              display: block;
              width: 100%;
              height: 2px;
              background-color: black;
            }
  
            .hamburger::before {
              transform: translateY(-5px);
            }
  
            .hamburger::after {
              transform: translateY(3px);
            }
            .hamburger span:nth-child(3) {
              bottom: 0;
            }
            .hamburger i{
                color: #000;
                font-size: 30px;
                
            }
  
            .close-btn{
                border: none;
                border-radius: 50%;
                width: 25px;
                height: 25px;
                position: relative;
                left: 235px;
                top: 25px;
                cursor: pointer;
            }
  
            .close-btn i{
                display: flex;
                font-size: 22px;
                margin-left: -4.5px;
            }
  
            .menu-heading{
              padding-top: 55px;
                padding-right: 30px;
                padding-bottom: 25px;
                text-align: center;
            }
  
            .menu-heading h2{
            color: #E0313C;
            font-weight: 600;
            }
  
            .rounded-circle-img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
  
  
            .menu-inside{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding-right: 30px;
                gap: 10px;
                margin: 15px;
                margin-top: -15px;
            }
  
  
            .menu-inside p{
              font-weight: 600;
            }
  
            #profile-new{
                display:block;
                background: #000;
            }
  
            #profile-new p{
              display:block;
              font-size:18px;
              font-weight: 600;
              color: #fff !important;
            }
  
            #new_menu{
                display:block;
                position: absolute;
                width: 327px;
                margin: -140px 0 0 -50px;
                padding-right: 0px;
                margin-top: -84px;
                padding-left: 40px;
                padding-bottom: 0px !important;
                background: #000 !important;
                list-style-type: none;
                -webkit-font-smoothing: antialiased;
                transform-origin: 0% 0%;
                transform: translate(-100%, 0);
                transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
                border-radius: 15px;
            }
  
            .newmenulinks{
              display: flex;
              justify-content: space-between;
            }
  
            .link-images{
              padding-right: 20px;
            }
  
            #newMenuToggle{
              display: fixed;
              position: relative;
              top: -15px;
              left: 15px;
              z-index: 1;
              color:rgb(255, 255, 255);
              -webkit-user-select: none;
              user-select: none;
            }  
  
            #new_menu li{
              padding-left:30px;
              font-size: 1rem;
              padding-bottom: 30px;
              font-weight:600;
              color: #fff !important;
            }
  
            #new_menu li:first-child{
              padding-left: 20px;
              padding-right: 20px;
            }
  
            #newMenuToggle a
            {
              text-decoration: none;
              font-size:1.5rem;
              color: #000000;
              background-color:black;
              transition: color 0.03s ease;
            }
  
            #newMenuToggle a:hover{
              color: rgba(172, 169, 169, 0.884);
            }
  
            .newsearchform{
                margin-top: -82px;
                margin-left: -80px; 
            }
  
            .new-search-input{
              text-align:center;
              display:center;
            }
  
            .new-search-input input{
              height: 35px;
                width: 40%;
                font-family: 'Quicksand', sans-serif;
                font-weight: 500;
                font-size: smaller;
                outline: none;
                border-style: solid;
                border-radius: 3px;
                border: 1px solid #FD4955;
                border-radius: 20px;
                padding: 0 20px 0 5px;
                padding-left: 20px;
                transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
            }
  
            .new-search-input input:focus,
            .new-search-input input:hover {
                border-color: #CDCDCD;
                background-color: #CDCDCD;
                border: 1px solid #FD4955;
            }
  
            #newSearchicon{
              margin-left: -50px;
              height:29px;
              width:42px;
              padding-top: 2px;
              border:none;
              background-color: transparent;
              border-radius: 20px;
              transition: all 0.2s ease-in-out;
              cursor: pointer;
            }
              
            #newSearchicon img {
              height: 26px;
              width: 26px;
            }
  
            .searching{
              padding-left: 20px;
              padding-right: 20px;
            }
          } 
  
          /* Mobile Compatibility */
          @media (max-width: 450px) {
            .Entire-Header{
              background-color: rgb(248, 104, 116);;
              padding-bottom: 3px;
              height:90px;
            }
            .logo{
              text-align: center;
              font-size: 1.9rem;
              font-weight:700;
              padding-top: 0px;
              font-weight:1000px;
              color:white;
            }
  
            .horizontal-line {
              display: flex; /* Use flexbox to create a horizontal line */
              align-items: center; /* Center the elements vertically */
              margin-top: 5px;
              margin-left: -30px;
            }
            .header-new {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              height: 45px;
              background-color: white;
              z-index: 1000;
              box-shadow: 0 2px 4px rgba(0,0,0,0.2);
              transition: background-color 0.3s ease;
            }
    
            #restOfScreen {
              position: fixed;
              top: 63px;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 998;
              background-color: rgba(0, 0, 0, 0.5);
              pointer-events: none;
            }

    
            .header-user-logo{
              float:right; 
              margin-top: -40px; 
              margin-right: 20px;
            }
    
            .imgbox_icon_new{
              height: 40px; 
              width:45px; 
              pointer-events: none;
            }
    
            /* Hamburger Menu CSS */
    
            .hamburger {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              position: relative;
              top: -23px;
              left: 5px;
              width: 40px;
              height: 30px;
              background-color: transparent;
              border: none;
              cursor: pointer;
            }
    
            .hamburger::before,
            .hamburger::after {
              content: '';
              display: block;
              width: 100%;
              height: 2px;
              background-color: black;
            }
    
            .hamburger::before {
              transform: translateY(-5px);
            }
    
            .hamburger::after {
              transform: translateY(3px);
            }
            .hamburger span:nth-child(3) {
              bottom: 0;
            }
            .hamburger i{
                color: #000;
                font-size: 30px;
                
            }
    
            .close-btn{
                border: none;
                border-radius: 50%;
                width: 25px;
                height: 25px;
                position: relative;
                left: 235px;
                top: 25px;
                cursor: pointer;
            }
    
            .close-btn i{
                display: flex;
                font-size: 22px;
                margin-left: -4.5px;
            }
    
            .menu-heading{
              padding-top: 55px;
                padding-right: 30px;
                padding-bottom: 25px;
                text-align: center;
            }
    
            .menu-heading h2{
            color: #E0313C;
            font-weight: 600;
            }
    
            .rounded-circle-img{
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }
    
    
            .menu-inside{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding-right: 30px;
                gap: 10px;
                margin: 15px;
                margin-top: -15px;
            }
    
    
            .menu-inside p{
              font-weight: 600;
            }
    
            #profile-new{
                display:block;
                background: #000;
            }
    
            #profile-new p{
              display:block;
              font-size:18px;
              font-weight: 600;
              color: #fff !important;
            }
    
            #new_menu{
                display:block;
                position: absolute;
                width: 327px;
                margin: -140px 0 0 -50px;
                padding-right: 0px;
                margin-top: -84px;
                padding-left: 40px;
                padding-bottom: 0px !important;
                background: #000 !important;
                list-style-type: none;
                -webkit-font-smoothing: antialiased;
                transform-origin: 0% 0%;
                transform: translate(-100%, 0);
                transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
                border-radius: 15px;
            }
    
            .newmenulinks{
              display: flex;
              justify-content: space-between;
            }
    
            .link-images{
              padding-right: 20px;
            }
    
            #newMenuToggle{
              display: fixed;
              position: relative;
              top: -15px;
              left: 15px;
              z-index: 1;
              color:rgb(255, 255, 255);
              -webkit-user-select: none;
              user-select: none;
            }  
    
            #new_menu li{
              padding-left:30px;
              font-size: 1rem;
              padding-bottom: 30px;
              font-weight:600;
              color: #fff !important;
            }
    
            #new_menu li:first-child{
              padding-left: 20px;
              padding-right: 20px;
            }
    
            #newMenuToggle a
            {
              text-decoration: none;
              font-size:1.5rem;
              color: #000000;
              background-color:black;
              transition: color 0.03s ease;
            }
    
            #newMenuToggle a:hover{
              color: rgba(172, 169, 169, 0.884);
            }
    
            .newsearchform{
                margin-top: -82px;
                margin-left: -80px; 
            }
    
            .new-search-input{
              text-align:center;
              display:center;
            }
    
            .new-search-input input{
              height: 35px;
                width: 40%;
                font-family: 'Quicksand', sans-serif;
                font-weight: 500;
                font-size: smaller;
                outline: none;
                border-style: solid;
                border-radius: 3px;
                border: 1px solid #FD4955;
                border-radius: 20px;
                padding: 0 20px 0 5px;
                padding-left: 20px;
                transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
            }
    
            .new-search-input input:focus,
            .new-search-input input:hover {
                border-color: #CDCDCD;
                background-color: #CDCDCD;
                border: 1px solid #FD4955;
            }
    
            #newSearchicon{
              margin-left: -50px;
              height:29px;
              width:42px;
              padding-top: 2px;
              border:none;
              background-color: transparent;
              border-radius: 20px;
              transition: all 0.2s ease-in-out;
              cursor: pointer;
            }
              
            #newSearchicon img {
              height: 26px;
              width: 26px;
            }
    
            .searching{
              padding-left: 20px;
              padding-right: 20px;
            }
          }  
  
          /* Hamburger Desktop */
            @media(min-width:450px) and (max-width:3000px){
              #profile{
                display:block;
                background: #ffffff;
                margin-bottom: 10px;
                height:50px;
                /* border-bottom: #a5a5a5;
                border-style: solid; */
                border-width: 1px;
              }
              #profile p{
                display:block;
                font-size:18px;
                /* font-weight: 600; */
                font-weight: 700;
                padding-left: 18px;
                padding-top:15px;
              }
              #menuToggle{
                display: fixed;
                position: relative;
                top: -7px;
                left: -5px;
                z-index: 1;
                color:rgb(255, 255, 255);
                -webkit-user-select: none;
                user-select: none;
              }
                


              .horizontal-line {
                display: flex; /* Use flexbox to create a horizontal line */
                align-items: center; /* Center the elements vertically */
                margin-top: 20px;
              }


              #cross1.open, #cross3.open{
                /* top: -31px; */
                left: 180px;
              }
              #cross2.open{
                left: 180px;
              }
              #chkbx.open{
                /* top: -42px; */
                left: 168px;
              }


              #menu li {
                margin: 22px 4px;
                padding-left: 10px;
                font-size: 1rem;
                height: 24px;
                font-weight: 700;
                display: flex;
                justify-items: center;
                gap: 14px;
                align-items: center;
                color: grey;
                cursor: pointer;
                transition: all 0.3s ease;
              }
          
              #menu li:hover {
                color: #333;
                background-color: #f0f0f0;
                transform: translateX(5px);
                padding: 22px 4px;
              }
          
              .main-container {
                max-width: 99%;
                margin: 0 auto;
                padding: 4.5rem 1.5rem;
              }
              #menu li img{
                width: 24px;
                margin-right: 25px;
                margin-left: 9px;
              }
              .horizontal-line p{
                padding-left: 9px;
              }


              /* blur body while opening humburger menu */
              /* #head.blur, #main-container.blur, #search-div.blur{
                filter: brightness(0.5);
                pointer-events: none;
                user-select: none;
                transition: 0.3s ease-out;
              } */




              /* buttons inside of hamburger menu */
              #menuToggle a
              {
                text-decoration: none;
                font-size:1.5rem;
                color: #000000;
                background-color:black;
                transition: color 0.03s ease;
              }
              #menuToggle a:hover{
                color: rgba(172, 169, 169, 0.884);
              }
              /* button of hamburger menu which on click menu is open*/
              #menuToggle input{
                display: block;
                width: 40px;
                height: 32px;
                position: absolute;
                top: -25px;
                left: -5px;
                color:black;
                cursor: pointer;
                opacity: 0; /* hide this */
                z-index: 2; /* and place it over the hamburger */
                -webkit-touch-callout: none;
              }

              /*Just a quick hamburger look of hamburger button*/
              #menuToggle span
              {
                display: block;
                width: 20px;
                height: 2px;
                margin-bottom: 5px;
                position: relative;
                top:-20px;
                background: #000000;
                border-radius: 2px;
                z-index: 1;
                transform-origin: 4px 0;
                transition: 0.3s ease;
              }
              #menuToggle span:first-child
              {
                transform-origin: 0% 0%;
              }
              #menuToggle span:nth-last-child(2)
              {
                transform-origin: 0% 100%;
              }

              /*Transform all the slices of hamburger into a crossmark. */

              #menuToggle input:checked ~ span
              {
                opacity: 1;
                transform: rotate(45deg) translate(-1px, -0.5px);
                background: #232726;
              }

              /*But let's hide the middle one. */
              #menuToggle input:checked ~ span:nth-last-child(3)
              {
                opacity: 0;
                transform: rotate(0deg) scale(0.2, 0.2);
              }

              /* Ohyeah and the last one should go the other direction */

              #menuToggle input:checked ~ span:nth-last-child(2)
              {
                transform: rotate(-45deg) translate(2.5px, -2.5px);
              }

              /* And let's slide it in from the left */
              #menuToggle input:checked ~ ul
              {
                transform: none;
                box-shadow: 2px 4px 6px #dbd2d2;
              }
              #menu{
                display:block;
                position: absolute;
                transition: 0.3s ease;
                width: 270px;
                border-radius: 8px;
                left: -270;
                margin: -140px 0 0 -50px;
                padding-right: 0px;
                padding-top: 110px;
                padding-left: 40px;
                padding-bottom: 210px;
                background: white;
                list-style-type: none;
                -webkit-font-smoothing: antialiased;
                /* to stop flickering of text in safari */
                transform-origin: 0% 0%;
                transform: translate(-100%, 0);
                transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
              }
              #menu.open{
                left: 0;
              }

            }
          /* Hamburger for mobile  */
            @media(max-width:450px){
                              
              #profile{
                display:block;
                background: #ffffff;
                margin-bottom: 10px;
                margin-left:-20px;
                height:30px;
                /* border-bottom: #a5a5a5;
                border-style: solid; */
                border-width: 1px;
              }

              #profile p{
                display:block;
                font-size:1.2rem;
                font-weight: 600;
                padding-top: 10px;
              }
              /* For Desktop */

              #menu{
                display:block;
                position: absolute;
                width: 270px;
                display:block;
                transition: 0.3s ease;
                border-radius: 8px;
                height:900px;
                margin: -140px 0 0 -50px;
                padding-right: 0px;
                padding-top: 110px;
                padding-left: 40px;
                background: white;
                list-style-type: none;
                -webkit-font-smoothing: antialiased;
                /* to stop flickering of text in safari */
                transform-origin: 0% 0%;
                transform: translate(-100%, 0);
                transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
              }
              #menu.open{
                left: 0;
              }
              #menuToggle{
                display: fixed;
                position: relative;
                top: -7px;
                left: -5px;
                z-index: 1;
                color:rgb(255, 255, 255);
                -webkit-user-select: none;
                user-select: none;
              }
              #cross1.open, #cross3.open{
                /* top: -31px; */
                left: 180px;
              }
              #cross2.open{
                left: 180px;
              }
              #chkbx.open{
                /* top: -42px; */
                left: 168px;
              }
              #menu li {
                margin: 22px 4px;
                padding-left: 10px;
                font-size: 1rem;
                height: 24px;
                font-weight: 700;
                display: flex;
                justify-items: center;
                gap: 14px;
                align-items: center;
                color: grey;
                cursor: pointer;
                transition: all 0.3s ease;
              }
          
              #menu li:hover {
                color: #333;
                background-color: #f0f0f0;
                transform: translateX(5px);
                padding: 22px 4px;
              }
          
            .main-container {
              max-width: 99%;
              margin: 0 auto;
              padding: 4.5rem 1.5rem;
            }
              #menu li img{
                width: 24px;
                margin-right: 25px;
                margin-left: 9px;
              }
              .horizontal-line p{
                padding-left: 9px;
              }
              
              /* buttons inside of hamburger menu */
              #menuToggle a
              {
                text-decoration: none;
                font-size:1.5rem;
                color: #000000;
                background-color:black;
                transition: color 0.03s ease;
              }
              #menuToggle a:hover{
                color: rgba(172, 169, 169, 0.884);
              }
              /* button of hamburger menu which on click menu is open*/
              #menuToggle input{
                display: block;
                width: 40px;
                height: 32px;
                position: absolute;
                top: -25px;
                left: -5px;
                color:black;
                cursor: pointer;
                opacity: 0; /* hide this */
                z-index: 2; /* and place it over the hamburger */
                -webkit-touch-callout: none;
              }
              
              /*Just a quick hamburger look of hamburger button*/
              #menuToggle span
              {
                display: block;
                width: 20px;
                height: 2px;
                margin-bottom: 5px;
                position: relative;
                top:-20px;
                background: #000000;
                border-radius: 2px;
                z-index: 1;
                transform-origin: 4px 0;
                transition: 0.3s ease;
              }
              #menuToggle span:first-child
              {
                transform-origin: 0% 0%;
              }
              #menuToggle span:nth-last-child(2)
              {
                transform-origin: 0% 100%;
              }
              
              /*Transform all the slices of hamburger into a crossmark. */
              
              #menuToggle input:checked ~ span
              {
                opacity: 1;
                transform: rotate(45deg) translate(-1px, -0.5px);
                background: #232726;
              }
              
              /*But let's hide the middle one. */
              #menuToggle input:checked ~ span:nth-last-child(3)
              {
                opacity: 0;
                transform: rotate(0deg) scale(0.2, 0.2);
              }
              
              /* Ohyeah and the last one should go the other direction */
              
              #menuToggle input:checked ~ span:nth-last-child(2)
              {
                transform: rotate(-45deg) translate(2.5px, -2.5px);
              }
              
              /* And let's slide it in from the left */
              #menuToggle input:checked ~ ul
              {
                transform: none;
                box-shadow: 2px 4px 6px #dbd2d2;
              }
            }



          /*Search Bar For Mobile*/
              @media(max-width:450px){
                .searchform{
                  margin-top: -20px;
                }
                .wrapper .search-input{
                    display: block;
                    text-align:center;
                    display:center;
                }
                .search-input input{
                  height: 30px;
                  width: 80%;
                  font-size: 1rem;
                  outline: none;
                  border-style: solid;
                  border-radius: .1px;
                  border-width:1px;
                  border-color:#8a8a8a;
                  padding: 0 20px 0 5px;
                  font-size: 3vw auto;
                  font-weight:10;
                  font-family: sans-serif;
                  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
                }
                .search-input.active input{
                  border-radius: 5px 5px 0 0;
                }
                .search-input .autocom-box{
                  padding: 0;
                  opacity: 0;
                  pointer-events: none;
                  max-height: 280px;
                  overflow-y: auto;
                }
                .search-input.active .autocom-box{
                  padding: 10px 8px;
                  opacity: 1;
                  pointer-events: auto;
                }
                .autocom-box li{
                  list-style: none;
                  padding: 8px 12px;
                  display: none;
                  width: 100%;
                  cursor: default;
                  border-radius: 3px;
                }
                .search-input.active .autocom-box li{
                  display: block;
                }
                .autocom-box li:hover{
                  background: #1a1818;
                }
                #searchicon{
                margin-top: -29px;
                margin-left:70%;
                height:27px;
                width:30px;
                border:none;
                background-color: rgb(255, 255, 255);
                }
              }
          /* Search Bar For Desktop  */
              @media(min-width:450px) and (max-width:3000px){
                .searchform{
                  margin-top: -20px;
                }
                .wrapper .search-input{
                  text-align:center;
                  display:center;
                }
                .search-input input{
                  height: 30px;
                  width: 80%;
                  font-size: 1rem;
                  outline: none;
                  border-style: solid;
                  border-radius: 3px;
                  border-width:1px;
                  border-color: grey;
                  padding: 0 20px 0 5px;
                  font-size: 3vw auto;
                  font-weight:10;
                  font-family: sans-serif;
                  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
                }
                .search-input.active input{
                  border-radius: 5px 5px 0 0;
                }
                .search-input .autocom-box{
                  padding: 0;
                  opacity: 0;
                  pointer-events: none;
                  max-height: 280px;
                  overflow-y: auto;
                }
                .search-input.active .autocom-box{
                  padding: 10px 8px;
                  opacity: 1;
                  pointer-events: auto;
                }
                .autocom-box li{
                  list-style: none;
                  padding: 8px 12px;
                  display: none;
                  width: 100%;
                  cursor: default;
                  border-radius: 3px;
                }
                .search-input.active .autocom-box li{
                  display: block;
                }
                .autocom-box li:hover{
                  background: #1a1818;
                }
                #searchicon{
                margin-top: -27px;
                margin-left:75%;
                height:25px;
                width:30px;
                border:none;
                background-color: rgb(255, 255, 255);
                }
              }