.nav-bar {
     margin: 0px;
     padding: 0px;
     background-color: rgb(12, 12, 12);
     height: 60px;
     display: flex;
     align-items: center;
     position: fixed;
     /* Set the navbar to fixed position */
     top: 0;
     /* Position the navbar at the top of the page */
     width: 100%;
     /* Full width */
     z-index: 1000;

     transition: 'all 0.5s ease-in';
 }

 .slider {
     margin: 0px;
     padding: 0px;
     position: fixed;
     background-color: rgb(0, 0, 0, 0.5);
     width: 100%;
     z-index: 3000;
     margin-left: -1px;
     margin-top: -60px !important;
     display: none;
     left: 0;
     top: 0;
     bottom: 0;
 }

 #slider-image {
     margin: 0px;
     padding: 0px;
     background-color: black;
     width: 100%;
     padding: 8px;
     height: 60px;
     display: flex;
     align-items: center;

 }

 .slider-items {
     width: 30%;
     height: 100%;
     background-color: white;
     position: relative;
 }

 .slider-list {
     margin-top: 16px;
     list-style: none;
     list-style-type: none;
     list-style-position: inside;
     padding-left: 0;
     display: flex;
     justify-content: center;
     flex-direction: column;


 }

 .slider-list>li {
     list-style: none;
     text-decoration: none;
     margin-left: 0px;
     margin: 0px;
     padding: 0px;
     padding-top: 4px;
     padding-bottom: 4px;
     padding-left: 16px;
     font-weight: bold;
     cursor: pointer;

 }

 #line {
     margin: 8px auto;
     height: 1px;
     background-color: rgb(211, 211, 211);
     width: 93%;
 }

 .close-slider-box {
     display: flex;
     justify-content: center;
     align-items: center;

     position: absolute;
     top: 68px;
     right: 10px;
 }

 .close-slider {
     font-size: 28px;
     cursor: pointer;
 }

 .nav-bar:target {
     height: 150px;
 }

 .nav-bar-inner {
     width: 93%;
     margin: 0 auto;
     display: flex;
     align-items: center;
     flex-direction: row;
 }

 .fa-bars {
     color: white;
     visibility: hidden;
 }

 #logo-centered {
     display: none;
     cursor: pointer;
 }

 .nav-center {
     width: 50%;
     margin-left: auto;
     margin-right: auto;
     display: flex;
     justify-content: center;
     visibility: hidden;
 }

 .nav-center>ul {
     margin: 0px;
     padding: 0px;
     list-style: none;
     text-decoration: none;
 }

 .nav-center>ul>li {
     display: inline;
     text-decoration: none;
     font-size: 16px;
     padding-left: 16px;
     padding-right: 16px;
     color: #fff;
     cursor: pointer;
 }



 .nav-right {
     width: 25%;
     display: flex;
     margin-left: auto;
     justify-content: flex-end;
     align-items: center;
     visibility: visible;
 }

 .nav-right>a {
     display: inline;
     text-decoration: none;
     font-size: 16px;
     padding-left: 16px;
     padding-right: 16px;
     color: white !important;
     cursor: pointer;
 }

 .nav-right>a:hover {
     display: inline;
     text-decoration: none;
     font-size: 16px;
     padding-left: 16px;
     padding-right: 16px;
     color: green !important;
     cursor: pointer;
 }

 .nav-right>p {
     margin: 0px;
     padding: 0px;
     display: inline;
     text-decoration: none;
     font-size: 16px;
     padding-left: 16px;
     padding-right: 16px;
     color: white !important;
     cursor: pointer;
     height: 80%;
 }



 .nav-left {
     width: 25%;
     display: flex;
     margin-left: auto;
 }

 .hover-underline-animation {
     display: inline-block;
     position: relative;
     color: green;
 }

 .hover-underline-animation:after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 3px;
     bottom: -10px;
     left: 0;
     background-color: green;
     transform-origin: bottom center;
     transition: transform 0.25s ease-out;
 }

 .hover-underline-animation:hover:after {
     transform: scaleX(1);
     transform-origin: bottom center;
 }

 #search-image {
     cursor: pointer;
 }

 #expandable-search-box {
     height: 40px;
     width: 200px;
     background-color: white;
     border-radius: 100px;
     display: flex;
     align-items: center;
     display: none;

     transition: width 2s, height 2s;
 }

 #expandable-search-box:hover {
     width: 300px;
 }

 #search-query {
     height: 35px;
     width: 70%;
     border: none;
     margin-left: 16px;
 }

 #form1 {
     border: 2px solid red;
 }

 #search-query:focus {
     border: 0px solid transparent;
     outline: none;
 }

 .close-search {
     margin-left: auto;
     font-size: 25px;
     cursor: pointer;
     margin-right: 16px;
 }

 .search-suggestion {
     margin: 0px;
     background-color: white;
     height: 200px;
     overflow: auto;
     position: absolute;
     left: 50%;
     transform: translate(-50%, -50%);
     /* Move it halfway back(x,y) */
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     z-index: 10;
     border: 1px solid rgb(207, 207, 207);
     display: none;
     margin-top: 166px;
     padding: 1%;
 }

 .search-suggestion-items {
     height: fit-content;
     width: 100%;
     display: flex;
     flex-wrap: wrap;
 }

 .search-suggestion-items>a {
     margin: 0px;
     padding: 0px;
     display: flex;
     width: fit-content;
     align-items: center;
     margin: 0px;
     padding: 0px;
     height: 50px !important;
     color: black;
     padding: 8px 8px;
     border-radius: 4px;
     font-size: 16px;
     outline: 1px solid black;
     margin-left: 8px;
     margin-bottom: 8px;
     margin-top: 8px;
     color: black !important;
     cursor: pointer;
 }

 .search-suggestion-items>a:hover {
     background-color: green;
     color: white !important;
     outline: 1px solid black;
 }

 /*   Navbar Ends  */
 /***********************************************/

 .top-link {
     margin: 0 auto;
     width: 93%;
     display: flex;
     flex-direction: row;
     height: 40px;
     justify-content: flex-start;
     align-items: center;
     font-size: 16px;
     margin-top: 68px;

 }

 .top-link>a {
     display: flex;
     flex-direction: row;
 }

 .top-link>i {

     margin-left: 8px;
 }

 .top-link>p {
     font-size: 16px;
     margin: 0px;
     padding: 0px;
     display: flex;
     flex-direction: row;
     margin-left: 8px;
 }

 .r-container {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .alert {

     width: 80%;
     display: none;
 }

 .login-root {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 30%;
     margin: 0 auto;
     flex-direction: column;
     margin-top: 16px;
 }

 .login-text {
     margin: 0px;
     padding: 0px;
     font-size: 32px;
     font-weight: bolder;
     text-align: center;
     color: green;
     margin-bottom: 32px;
 }

 .login-root>input {
     height: 60px;
     border: 2px solid green;
     width: 80%;
     padding-left: 16px;
     padding-right: 16px;
     margin-bottom: 16px;
     border-radius: 4px;
     font-size: 20px;

 }

 .login-root>button {
     width: 80%;
     height: 60px;
     text-align: center;
     background-color: green;
     color: white;
     border: 1px solid green;
     font-size: 20px;
 }

 .login-root>button:hover {
     background-color: rgb(8, 102, 8);
 }

 .login-root>p {
     margin: 0px;
     padding: 0px;
     margin-top: 8px;

 }




 /***********************************************/
 /*   Footer Begins  */

 .footer-container {

     display: flex;
     align-items: center;
     flex-direction: column;
     background-color: rgb(0, 0, 0);
     margin-top: 32px;

 }

 .footer-inner-container {
     height: auto;
     width: 93%;
     margin: 0px;
     margin: 0 auto;
 }

 .heading {
     margin: 0px;
     padding: 0px;
     font-size: 16px;
     margin-top: 32px;
     font-size: 20px;
     font-weight: bolder;
     color: white;
 }

 .footer-inner-container>div {
     margin: 0px;
     padding: 0px;
 }

 .s {
     margin: 0px;
     padding: 0px;
     color: white;
 }


 .s>ul {
     text-decoration: none;
     list-style-type: none;
     list-style-position: inside;
     padding-left: 0;
     margin-top: 32px;
 }

 .s>ul>li>a {
     color: white;
     text-decoration: none;
 }

 .s>ul>li>a:hover {
     color: white;
     text-decoration: underline;
 }

 .s>ul>li {
     margin: 0px;
     padding: 0px;
     color: white;
     cursor: pointer;
     margin-bottom: 2px;
     text-decoration: none;
     margin-top: 4px;
     font-size: 16px;
 }

 .s>ul>li:hover {
     text-decoration: underline;
     color: green;
 }

 .bottom {
     display: flex;
     width: 100%;
     align-items: center;
     background-color: rgb(66, 66, 66);
     height: 60px;
     margin-top: auto;
     margin-top: 48px;
 }

 .bottom>p {
     width: 93%;
     margin: 0 auto;
     padding: 0px;
     text-align: left;
     font-size: 16px;
     color: white;

 }

 /*   Footer Ends  */
 /***********************************************/

 @media (min-width: 1500px) {

     .b-root {
         display: flex !important;
         text-align: center !important;
         justify-content: center !important;
         width: 90% !important;
         flex-direction: column;
         margin: 0 auto !important;
         transition: 0.3s all !important;

     }

     .nav-bar-inner,
     .footer-inner-container {

         width: 90%;
         /* Full width */
         transition: 0.3s all !important;
     }

     .footer-container {

         width: 100% !important;
         /* Full width */
         transition: 0.3s all !important;
     }


 }

 @media (min-width: 1650px) {

     .b-root {
         display: flex !important;
         text-align: center !important;
         justify-content: center !important;
         width: 80% !important;
         flex-direction: column;
         margin: 0 auto !important;
         transition: 0.3s all !important;

     }

     .nav-bar-inner,
     .footer-inner-container {

         width: 80%;
         /* Full width */
         transition: 0.3s all !important;
     }

     .footer-container {

         width: 100% !important;
         /* Full width */
         transition: 0.3s all !important;
     }


 }

 @media (min-width: 1800px) {

     .b-root {
         display: flex !important;
         text-align: center !important;
         justify-content: center !important;
         width: 75% !important;
         flex-direction: column;
         margin: 0 auto !important;
         transition: 0.3s all !important;

     }

     .nav-bar-inner,
     .footer-inner-container {

         width: 75%;
         /* Full width */
         transition: 0.3s all !important;
     }

     .footer-container {

         width: 100% !important;
         /* Full width */
         transition: 0.3s all !important;
     }


 }

 @media (min-width: 2000px) {

     .b-root {
         display: flex !important;
         text-align: center !important;
         justify-content: center !important;
         width: 67% !important;
         flex-direction: column;
         margin: 0 auto !important;
         transition: 0.3s all !important;

     }

     .nav-bar-inner,
     .footer-inner-container {

         width: 67%;
         /* Full width */
         transition: 0.3s all !important;
     }

     .footer-container {

         width: 100% !important;
         /* Full width */
         transition: 0.3s all !important;
     }
 }

 @media (min-width: 2300px) {

     .b-root {
         display: flex !important;
         text-align: center !important;
         justify-content: center !important;
         width: 50% !important;
         flex-direction: column;
         margin: 0 auto !important;
         transition: 0.3s all !important;

     }

     .nav-bar-inner,
     .footer-inner-container {

         transition: 0.3s all !important;
         width: 50%;
         /* Full width */
     }

     .footer-container {

         width: 100% !important;
         /* Full width */
         transition: 0.3s all !important;
     }

 }

 @media (min-width: 3000px) {

     .b-root {
         display: flex !important;
         text-align: center !important;
         justify-content: center !important;
         width: 33% !important;
         flex-direction: column;
         margin: 0 auto !important;
         transition: 0.3s all !important;

     }

     .nav-bar-inner,
     .footer-inner-container {

         transition: 0.3s all !important;
         width: 33%;
         /* Full width */
     }

     .footer-container {

         width: 100% !important;
         /* Full width */
         transition: 0.3s all !important;
     }
 }

 @media (min-width: 4000px) {

     .b-root {
         display: flex !important;
         text-align: center !important;
         justify-content: center !important;
         width: 25% !important;
         flex-direction: column;
         margin: 0 auto !important;
         transition: 0.3s all !important;

     }

     .nav-bar-inner,
     .footer-inner-container {

         transition: 0.3s all !important;
         width: 25%;
         /* Full width */
     }

     .footer-container {

         width: 100% !important;
         /* Full width */
         transition: 0.3s all !important;
     }
 }




 .forgot-password {
     margin-bottom: 8px;
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     cursor: pointer;
     width: 80%;
     visibility: hidden;
 }


 @media (max-width: 1024px) {
     .nav-right {
         visibility: hidden;

     }

     .login-root {

         width: 70%;
     }
 }


 @media (max-width: 546px) {
     .nav-right {
         visibility: hidden;

     }

     .login-root {

         width: 93%;
     }
 }