@media (min-width: 993px) {


   .logo {

     width: 200px;
     height: 200px;
     object-fit: cover;
     margin-top: 5px;
     margin-bottom: 25px;
     z-index: 1;
     position: relative;
     backdrop-filter: blur(10px);
     border-radius: 50%;
     padding: 10px;


   }

   .nav-span {
     transition: 0.3s ease;
   }

   .nav-span:hover {

     color: rgb(255, 255, 255) !important;
     background-color: maroon;
     border-radius: 5px;
     border-style: none;
     padding: 8px;
     padding-left: 14px;
     padding-right: 14px;
     transform: scale(1.03);

   }


 }

 @media (max-width: 992px) {
   .navbar-brand {
     font-size: 1.4rem;
   }

   .nav-span {
     transition: 0.3s ease;
   }

   .nav-span:hover {

     color: beige !important;
     background-color: maroon;
     border-radius: 5px;
     border-style: none;
     padding: 10px;
     padding-left: 14px;
     padding-right: 14px;
     transform: scale(1.03);

   }

   .header-content h1 {
     font-size: 2.2rem;
   }

   .header-content p {
     font-size: 1rem;
   }

   .logo {

     width: 180px;
     height: 180px;
     object-fit: cover;
     margin-top: 5px;
     margin-bottom: 25px;
     z-index: 1;
     position: relative;
     backdrop-filter: blur(10px);
     border-radius: 50%;
     padding: 10px;



   }
 }

 @keyframes bg-animation {

   0% {

     background-position: left;

   }

   100% {

     background-position: right;
   }
 }



 @keyframes slideText {
   0% {
     transform: translateX(-100%);
     opacity: 0;
   }

   100% {
     transform: translateX(0);
     opacity: 1;
   }
 }

 @keyframes slideText2 {
   0% {
     transform: translateX(100%);
     opacity: 0;
   }

   100% {
     transform: translateX(0);
     opacity: 1;
   }
 }

 @keyframes slideText3 {
   0% {
     transform: translateX(100%);
     opacity: 0;
   }

   100% {
     transform: translateX(0);
     opacity: 1;
   }
 }