/* default version (mobile) */

body{
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: sans-serif;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
body.index {  
    background-image: url('https://palmeradvisory.com/images/BG_TECH_0.webp');
}
body.about {  
    background-image: url('https://palmeradvisory.com/images/BG_TECH_2.webp');
}
body.services {  
    background-image: url('https://palmeradvisory.com/images/BG_TECH_3.webp');
}
body.faq {  
    background-image: url('https://palmeradvisory.com/images/BG_TECH_1.webp');
}
body.contact {  
    background-image: url('https://palmeradvisory.com/images/BG_TECH_4.webp');
}

.sectionSpacer {
  min-height: 20vh;
}

.section {
  background-color: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(0, 0, 0);
  padding: 2em;
  margin: 0;
  border-radius: 12px;
}

.sectionHeader {
  text-align:center;
  font-weight: bold;
}

.sectionContent {
  text-align:justify;
}

.banner {
  display: flex;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  width: 100%;
  padding: 1em;
  text-align: center;
  font-weight: bold;
  align-items: center;
  height: 5vh; 
  justify-content: center;
}

.top-banner {
  top: 0;
  position: fixed;
  z-index: 999;
}

button {
  background-color: #1f73b7;   /* modern deep blue */
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button:hover {
  background-color: #1663a6;
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
  background-color: #145a96;
}

.menu_icon {
  display: block;
  height:1.5em;
  margin: 0px;
  position: fixed;
  z-index: 999;
  left: 0;
  top:10;
}
.header_logo {
  height: 1.5em;
  margin: 0px 18px 0px 8px;
}
.header_text {
  font-size: 1.5em;
  font-weight: bold; 
}

.top-banner a {
  height: inherit;
  text-decoration: none;
  color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
}

.navbar {
  display: none;
  margin: calc(5vh + 2em) 0px 0px 0px;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  top: 0;
  left: 0;
  position: fixed;
}

.navbar a {
  display: block;
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-weight: bold;
  transition: background-color 0.2s ease;
  font-size:larger;
  padding: 20px 40px;
}


.sectionInfo {
  display: block;
  width: 100%;
  padding: 10px 10px 10px 10px;
}

.sectionInfo ul li {
  padding: 10px 0px 10px 0px;
}

.sectionOptions {
  display: block;
  text-align: center;
  width: 100%;
}

.sectionOptions button {
  display: block;
  margin: 10px auto 10px auto;
}

@media (min-width: 759px) {
/* desktop version */
  .section {
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.8);
    color: rgb(0, 0, 0);
    padding: 2em;
    margin: 0;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .sectionHeader {
    width: 50%;
  }

  .sectionContent {
    width: 50%;
  }

  .navbar {
    display: flex;
    justify-content: space-evenly;
    width: 100%; 
  }

  .navbar a {
    display: inline;
    padding: 10px 20px;
  }

  .menu_icon {
    display: none;
  }


  .sectionOptions {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 50%;
  }

  .sectionOptions button {
    display: inline;
    margin: 0px;
  }

}