/* This stylesheet carries all of the CSS code that is necessary on all pages of the website.*/

/*this is the Universal nav bar*/
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; position: fixed; top: 0px; width: 100%; z-index: 1000; transition: top .5s ease; background-color: white; color: #000; box-shadow: 1px 0px 4px 0px #e7e7e7; height: 70px; }
.navbar.show { top: 0; }
.logo { font-size: 15px; width: 400px; max-width: fit-content;}
.logo img { border-right: 1px solid #c9c9c9; padding-right: 10px; max-width: 100px !important; }
.burger-menu { font-size: 1.5rem; cursor: pointer; }
.menu-items { list-style-type: none; display: none; flex-direction: column; position: absolute; top: 0rem; right: 0rem; background-color: #ffffff; padding: 1rem; border-radius: 0px; box-shadow: 0px 0px 10px 0px #e2e2e2; }
.menu-items.show { display: flex; }
.menu-items li a { color: #000; text-decoration: none; padding: 0.5rem 1rem; display: block; }
.menu-items li a:hover { text-decoration: underline; }
.notification-bar { position: fixed; top: -100px; width: 100%; background-color: #32cd32; color: #fff; text-align: center; padding: 1rem; transition: top .5s ease; z-index: 999; }
.notification-bar.show { top: 3.5rem; }
.logo img { border-right: 1px solid #c9c9c9; padding-right: 10px; }
.burger-menu { font-size: 1.5rem; cursor: pointer; }
.menu-items { list-style-type: none; display: none; flex-direction: column; position: absolute; top: 0; right: 0; background-color: #fff; padding: 1rem; box-shadow: 0 0 10px 0 #e2e2e2; }
.menu-items.show { display: flex; }
.menu-items li a { color: #000; text-decoration: none; padding: 0.5rem 1rem; display: block; }
.menu-items li a:hover { text-decoration: underline; }
.menu-items.show { width: 200px; transform: translateY(70px); display: block; }


#banksy{ background-color: rgb(0, 0, 0); color: #ffffff; margin-right: 3px;}
#banksy:hover{ background-color: green !important; color: #ffffff;  margin-right: 3px;}

.article-highlight {
    font-size: 15px;
    font-weight: bold;
    color: navy;
    padding: 10px;
    border-left: none;
    border-right: none;
    border-top: 2px solid #ffa500;
    border-bottom: 2px solid #008729; }


.em-logo-music img {
  border-radius: 200px;
  border: 0px solid #000000;
  animation: pulse 1.5s ease-in-out infinite; /* Add the pulse animation */
}

/* Pulse animation to make the logo grow and shrink */
@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.05); /* Slightly increase size for pulse effect */}
  100% {transform: scale(1);}
}

/* Hover effect */
.em-logo-music img:hover {
  border-radius: 200px;
  border: 2px solid #008729;
  animation: none; /* Remove pulse animation on hover */
  transform: scale(1.05); /* Optional: slightly enlarge on hover */
}


/* Version 2*/


.em-logo-music img {
  border-radius: 200px;
  border: 0px solid #000000;
  animation: speakerBounce 2s ease-in-out infinite; /* Smooth and slower bounce */
}

/* More natural speaker bounce animation */
@keyframes speakerBounce {
  0% { transform: scale(1); /* Start at normal size */ }
  15% { transform: scale(1.05); /* Slightly stretch as the sound starts */}
  30% { transform: scale(1.08); /* A bit more stretch to mimic speaker movement */}
  50% { transform: scale(1.1); /* Peak of expansion, where bass is most intense */}
  70% { transform: scale(1.08); /* Shrinking slightly back after peak */}
  85% { transform: scale(1.05); /* Almost back to normal */}
  100% { transform: scale(1); /* Return to original size */}
}

/* Hover effect */
.em-logo-music img:hover {
  border-radius: 200px;
  border: 2px solid #008729;
  animation: none; /* Remove bounce animation on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}


/*---------------------Nav Start-----------------------------*/


/* Styling for burger menu container */
.burger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;  /* Adjust the size of the burger */
  height: 20px; /* Adjust the height of the burger */
  cursor: pointer;
  transition: all 0.3s ease;
}

.burger-menu .line {
  width: 100%;
  height: 4px;   /* Line thickness */
  background-color: #000; /* Burger line color */
  transition: all 0.3s ease;
}

/* When the menu is open, apply transformations */
.burger-menu.open .line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 5px);
}

.burger-menu.open .line:nth-child(2) {
  opacity: 0; /* Hide the middle line */
}

.burger-menu.open .line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}

/* Hide menu items initially */
.menu-items {
  display: none;
  list-style-type: none;
  padding: 0;
}


/* Optionally add styles for when the menu is open */
.navbar.open .menu-items {
  display: block;
}

nav li button, nav li button a { width: 100%; text-align: left;}

/*---------------------Nav End-----------------------------*/

.scrollable-section { overflow-x: auto; white-space: nowrap; }

@media (max-width: 400px)  { #letter-note{ display: none;}}


/*--------------------- Fonts -----------------------------*/

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px;  /* Default font size */
  line-height: 1.5;  /* Line height for readability */
  color: #333;  /* Text color (dark grey) */
  background-color: #f4f4f4;  /* Background color */
  font-weight: 400;  /* Normal weight */
}

/* Example for a heading (h1) */
h1 {
  font-family: 'Inter', sans-serif !important;  /* Same custom font with fallback */
  font-weight: 700;  /* Bold weight */
}

h2 {
  font-weight: 500;
}

/* Example for a paragraph */
p {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;  /* Inter fallback chain */
  font-weight: 400;  /* Regular weight */
}

      .services-button, .services-button a  {background-color: #000048; padding: 8px; border-radius: 0px; color: #fff; border: 0px; text-decoration: none;}
      .services-button:hover, .services-button:hover a {background-color: #ff6200; padding: 8px; border-radius: 0px; color: #fff; border: 0px; text-decoration: none;}
      .services-button:active, .services-button:active a {background-color: #000048; padding: 8px; border-radius: 0px; color: #fff; border: 0px; text-decoration: none;}


.nav-float{
    display: block;
    text-align: center;
    position: fixed;
    width: 100%;
    background-image: url(./images/items/banner-button.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 70px;
    background-position: top;
    background-size: 450px;
    z-index: 100;
    transform: translateY(-93px);
  }

    .nav-float:hover{
      background-image: url(./images/items/banner-button-hover.png);
      cursor: pointer;
      color: #ffffff;
      height: 40px;
    }

    .nav-float .services-button a, 
    .nav-float button a { color: #000048; width: 100%; font-size: 20px; width: 100%; display: block; height: 40px; padding: 8px !important;}

    .nav-float .services-button a:hover,  
    .nav-float button a:hover { color: #ffffff; width: 100%; padding: 8px;}
    .nav-float {height: 60px;}

 @media (max-width: 500px) {
   .key-text {display: none;}
   .logo img { border-right: 0px;}

   .nav-float { background-image: url(./images/items/banner-button-mobile.png) !important; height: 60px; background-size: contain !important;}
   .nav-float:hover { background-image: url(./images/items/banner-button-mobile-hover.png) !important; height: 60px; }
}