styles.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

body {
    font-family: 'Montserrat', sans-serif;
    justify-content: center;
    align-items: center;
    margin: 0;
    overflow-x: clip;
  }
  .galvani-header-logo {
    width: 86px;
    padding: 11px;
    border-radius: 25%;
    margin: 4px;
    position: absolute;
    top: 0px;
    border: 2px solid grey;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 48%, rgba(51,51,51,1) 48%);
  }
  .container {
    position: relative;
    text-align: center;
    margin-top: 275px;  
  }

  /* Add this CSS to your styles.css for the fade effect */
  @keyframes fadeOutIn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  .doctor-emoji-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    flex-direction: column;
    margin-bottom: 500px;

    h1 {
      font-size: 75px;
      margin-top: 450px !important;
    }
    h4 {
      margin-top: -25px !important;
      font-size: 25px;
      text-align: center;
    }

    .doc-emoji-bg {
      background-color: grey;
      border-radius: 50%;
    }
    
    .doctorEmoji-bg {
      width: 225px;
      height: 225px;
      position: absolute;
    }
    #robotEmoji {
      position: absolute;
      font-size: 50px;
      height: 70px;
      width: 70px;
      margin-left: 130px;
      justify-content: center;
      display: flex;
      margin-top: 140px;
    }

    #doctorEmoji {
      font-size: 175px; 
      border-radius: 50%; 
      width: 225px; 
      height: 225px;
      display: flex; 
      justify-content: center; 
      align-items: center;
      /* animation: fadeOutIn 4s infinite; */
      position: absolute;
    }
  }

  @keyframes emoji-fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  .emoji-fade-in-class { animation: emoji-fadeIn 2s; }
  
  @keyframes emoji-fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  .emoji-fade-out-class { animation: emoji-fadeOut 2s; }

  /* Define the rotation keyframes */
  @keyframes rotate-around-circle {
    from {
      transform: rotate(0deg) translate(-50%, -50%);
    }
    to {
      transform: rotate(360deg) translate(-50%, -50%);
    }
  }
  /* Position the wrappers absolutely around the circle */
  .satisfaction-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the wrapper on the circle */
    width: 245px;
    height: 245px;
  }
  /* Initial positioning of satisfaction blocks */
  .patient-wrapper {
    transform-origin: bottom;
    animation: rotate-satisfaction 20s linear infinite; /* Adjust time as needed */
  }

  .physician-wrapper {
    width: 555px;
    transform-origin: bottom;
    animation: rotate-satisfaction 20s linear infinite; /* Reverse direction */
  }
  .correlated {
    height: 404px;
    width: 100%;
    display: block;
  }
  .circle {
    position: relative;
    width: 400px; /* Adjust size as needed */
    height: 400px; /* Adjust size as needed */
    background-color: transparent;
    border: 4px solid black;
    border-radius: 50%;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .infinity-with-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column; /* Align the emoji above the symbol */
    position: relative;
    animation: counter-rotate-physician 20s linear infinite;

    .emoji {
      animation: counter-rotate-physician 20s linear infinite reverse;
      font-size: 90px;
      z-index: 1;
    }
  }
  .infinity-symbol {
    color: #ffffffe6;
    margin-top: -33px;
    font-size: 222px;
    line-height: 1px;
    animation: counter-rotate-physician 20s linear infinite;
    position: absolute;
    z-index: -1;
  }
  .infinity-bg {
    /* background: #808080eb; */
    background: #cdcdcdeb;
    border-radius: 50%;
    padding: 25px;
    height: 111px;
    width: 111px;
    position: absolute;
    z-index: -2;
    top: 76px;
    border: 3px solid #ffffff3d;
  }
  .infinity-bg-2 {
    top: 145px;
  }
  .infinity-bg-3 {
    top: 200px;
  }
  .infinity-bg-4 {
    left: 80px;
    top: 137px;
  }
  .infinity-bg-5 {
    top: 96px;
    left: 94px;
  }
  .infinity-bg-6 {
    top: 96px;
    right: 94px;
  }
  .infinity-bg-7 {
    top: 190px;
    right: 100px;
  }
  .infinity-bg-8 {
    top: 137px;
    right: 80px;
    z-index: -3;
  }
  .infinity-bg-9 {
    top: 190px;
    left: 100px;
  }
  .satisfaction {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: #fbfbfb;
    border-radius: 50%;
    transform-origin: center;
    background-color: white;
    padding: 21px;
    transform-origin: center;
    width: 145px;
    height: 145px;
    animation: counter-rotate 20s linear infinite;
    flex-direction: column;
    /* border: 3px solid black; */
  }
  .satisfaction > div {
    margin: 0px 28px;
  }
  .patient-satisfaction {
    top: -20px;
    animation: counter-rotate 20s linear infinite;
  }
  
  .physician-satisfaction {
    bottom: -260px;
    left: 225px;
    animation: counter-rotate 20s linear infinite;
  }

  @keyframes rotate-satisfaction {
    0% {
      transform: translate(-50%, -100%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -100%) rotate(360deg);
    }
  }
  
  /* Counter rotate the blocks */
  @keyframes counter-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
  }
  
  @keyframes counter-rotate-physician {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .emoji {
    font-size: 50px;
    line-height: 1;
    display: block;
  }
  .caption {
    margin-top: 20px;
    font-size: 35px;
    color: black; /* Make this text color black to stand out on white background */
    margin-top: -133px;
    z-index: -2;
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .nav-header {
    background-color: #333; /* Dark background for the header */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px; /* Set the height of the nav header */
    box-sizing: border-box;
    z-index: 1000;

    a {
      color: white;
    }
  }
  .nav-title {
    font-size: 20px;
    margin-left: 111px;

    a {
      color: white;
    }
  }
  .nav-menu {
    list-style: none;
    display: flex;

    a {
      color: white;
    }
  }
  .nav-menu li {
    padding: 0 15px;
    font-size: 16px;
  }
  .nav-menu li:hover {
    text-decoration: underline;
    cursor: pointer;
  }
  .content {
    padding-top: 60px; /* Make space for fixed header */
  }
  .quote-container {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 20px;
    margin-top: 20px; /* Add space between sections */
  }
  .placeholder-image {
    flex: 0 0 50%; /* Adjust the width of the image placeholder */
    height: 300px; /* Placeholder height */
    background-color: #cccccc; /* Placeholder color */
    margin-right: 20px;
  }
  .quote1 {
    padding: 22px 0 0 75px;
    max-width: 785px;
    font-size: 42px;
    line-height: 1.3em;
  }
  .quote-mark {
    font-size: 50px;
    vertical-align: middle;
  }
  .citation {
    padding: 22px 0 0 80px;
    max-width: 600px;
    font-size: 14px;
    color: #555;
  }
  .reference {
    font-size: 14px;
    color: #555;
    text-align: right;
  }

  .grey {
    color: grey;
  }

  hr {
    height: 2px;
    width: 75%;
    color: grey;
    background-color: grey;
    border-radius: 2px;
    margin: auto;
  }

  /* Add this to your <style> section */

.quote-section {
    text-align: center;
    margin-top: 40px; /* Adjust as needed for spacing */
  }
  
  .quote-mark {
    font-size: 175px;
    color: #444444;
    margin-bottom: 20px;
  }

  .patient-image { 
    height: 333px;
    display: block;
  }
  .unsplash-patient { 
    position: absolute;
    top: 406px;
    z-index: 1;
    color: grey;
    left: 535px;
    font-size: 11px;

    a {
        color: grey;
     }
  }

  .patient-container { 
    position: relative;
    display: flex;
    justify-content: center;
  }
  
  .quote2 {
    font-size: 49px;
    line-height: 1.3em;
    color: #000;
    margin-bottom: 20px;
    max-width: 1011px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  
  .logo-placeholder {
    width: 60px;
    height: 60px;
    background-color: #000; /* Placeholder color */
    display: inline-block; /* To simulate the logo image */
    margin-right: 10px;
  }
  
  .logo-text {
    font-size: 18px;
    color: #555;
  }
  
/* Add this to your styles.css file or within the <style> section */

.section {
    text-align: center;
    padding: 20px;
    background-color: #ffffff; /* Assuming white background for the quote section */
  }
  
  .quote {
    font-size: 24px;
    margin-bottom: 20px; /* Spacing between quote and logo */
    max-width: 800px; /* Adjust as needed based on your design */
    margin-left: auto; /* Center quote horizontally */
    margin-right: auto;
    color: #000; /* Text color for the quote */
  }

/* Branding section styles */

.branding {
    text-align: center;
    margin: 0 0 35px 0;
  }
  
  .with-galvani-logo {
    max-width: 175px;
    height: auto;
    margin-bottom: 4px;
    border-radius: 42px;
    border: 2px solid grey;
    padding: 16px;
  }
  
  .brand-text {
    font-size: 18px;
    color: #555;
    display: block; /* This ensures the text appears below the image */
  }
  
  /* Add this to your styles.css file or within the <style> section */

.mlm-section {
    text-align: center;
    margin-top: 40px; /* Adjust as needed */
    padding: 20px;
    background-color: #ffffff; /* Assuming white background for the section */
  }
  
  .mlm-section h2 {
    font-size: 45px; /* Adjust size as needed */
    color: #000; /* Title text color */
    margin-bottom: 20px; /* Spacing after the title */
  }
  
  .subtitle {
    font-size: 20px; /* Adjust size as needed */
    color: #666; /* Subtitle text color */
    margin-bottom: 20px; /* Spacing after the subtitle */
  }
  
  .emoji-tree-container {
    position: relative;
    text-align: center; /* Center the tree emoji */
    font-size: 0; /* Remove extra space caused by inline-block */
    margin-top: -20px; /* Adjust this as needed */
  }
  
  .tree-emoji {
    font-size: 375px;
    display: inline-block;
    margin: 75px auto -75px auto;
  }

  @keyframes popIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    80% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  } 
  
  .emoji-people {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffa500; /* Orange background */
    border-radius: 50%; /* Circle shape */
    /* width: 60px; */
    /* height: 60px; */
    width: 10vmin; /* using vmin ensures the size is relative to the smallest side of the viewport */
    height: 10vmin;
    padding: 10px; /* Space around emojis */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Allow emojis to wrap within the background circle */
    overflow: hidden;
    border: 3px solid darkorange;
  }
  .emoji-people.animate {
    animation: popIn 2s ease-out forwards;
  }  

  .emoji-people-1 {
    top: 33%;
    left: 54%;
  }
  .emoji-people-2 {
    top: 38%;
    left: 40%;
  }
  .emoji-people-3 {
    top: 72%;
    left: 54%;
  }
  .emoji-people-4 {
    top: 50%;
    left: 48%;
  }
  .emoji-people-5 {
    top: 70%;
    left: 41%;
  }
  /* Individual emoji adjustments */
.emoji1, .emoji2, .emoji3, .emoji4 {
  /* ... existing styles ... */
  font-size: 8vmin; /* scale the emoji size with the viewport */
  position: absolute;
  /* Use percentages to position each emoji within the .emoji-people container */
  /* These percentages will need to be adjusted to place the emojis where you want them */
}
  
  .emoji-bg {
    background: none; /* Remove individual backgrounds */
    position: relative;
    width: auto;
    height: auto;
    font-size: 45px;
    line-height: 1;
    margin: 5px;
  }
  
  /* Adjust individual emoji positioning if needed */
  .emoji1 { 
    position: absolute; 
    top: -3px;
    left: 12px;
  }
  .emoji2 { position: absolute; top: 20px; right: 35px; }
  .emoji3 { 
    position: absolute; 
    bottom: 15px;
    left: 35px;
  }
  .emoji4 { 
    position: absolute; 
    bottom: -4px;
    right: 15px;
   }  
  
  
  .mlm-description {
    font-size: 18px; /* Adjust size as needed */
    color: #000; /* Text color */
    margin-top: 60px; /* Adjust as needed based on the emoji display */
  }
  
  .mlm-data-note {
    font-size: 16px; /* Adjust size as needed */
    color: #666; /* Text color */
    margin-top: 20px; /* Spacing after the main description */

    .info {
      border-radius: 5px;
      border: 1px solid grey;
      padding: 0px 4px;
      margin-right: 3px;
    }
  }
  
  /* Footer Styles */

.site-footer {
    background-color: #333; /* Dark background for footer */
    color: white; /* Light text color for contrast */
    text-align: center; /* Center-align the text */
    padding: 20px 0; /* Padding above and below the text */
    margin-top: 40px; /* Space between the content and the footer */
    position: relative; /* Position relative to the layout */
    bottom: 0; /* Align to the bottom of the page */
    width: 100%; /* Ensure it spans the full width of the page */
  }
  
  .footer-content p {
    margin: 0; /* Remove default paragraph margin */
    padding: 5px 0; /* Padding for each paragraph for spacing */
    font-size: 14px; /* Smaller font size for footer text */
  }
  
  .footer-content p:not(:last-child) {
    border-bottom: 1px solid #444; /* Separator line for items, adjust color as needed */
  }

  #mc_embed_shell { 
    margin: auto;
    display: flex;
    justify-content: center;
  }

  .mobile-only {
    display: none;
  }

  #mc_embed_signup {
    padding: 0 20px;
    justify-content: center;
    margin: auto;
    display: flex;
  }
  #mc-embedded-subscribe { 
    width: 100%;
  }

  .content:not(:last-child) {
    margin-bottom: 0;
  }

/* Mobile styles */
@media screen and (max-width: 900px) {
  .patient-container, .quote-container {
    flex-direction: column;
  }
  .max-900-hide {
    display: none;
  }
}

@media screen and (max-width: 900px) and (min-width: 768px) {
  .emoji-people-5, .emoji-people-2 {
    left: 31%;
  }
  .emoji-people-4 {
    left: 45%;
  }
  .emoji-people-3 {
    top: 70%;
    left: 57%;
  }
}

@media (max-width: 768px) {

  .doctor-emoji-container {
    h1 {
      font-size: 60px;
    }
    h4 {
      font-size: 22px;
      width: 82%;
    }
  }
  .nav-header {
    height: auto;
  }

  .nav-title {
    padding-top: 10px;
  }

  .nav-menu {
    padding-top: 10px;
  }

  .galvani-header-logo {
    top: -8px;
  }

  .quote1 {
    margin: 75px auto 0 auto;
    padding: 11px;
    font-size: 31px;
  }

  .satisfaction > div {
    margin: 0px -25px 0px 158px;
    background-color: white;
  }
  .satisfaction {
    font-size: 22px;
  }
  .satisfaction > div:not(:last-child):after {
    display: none;
    content: "";
    font-size: 42px;
  }

  .quote2 {
    font-size: 33px;
    margin-top: 80px;
  }

  .caption {
    font-size: 20px;
    background: white;
    padding: 0px;
  }
  .citation {
    padding: 35px;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .reference {
    width: 84%;
  }

  .circle {
    width: 300px;
    height: 300px;
  }

  .mobile-only {
    display: block;
  }

  .mobile-hide {
    display: none !important;
  }

  .patient-image {
    width: 100%;
    height: auto;
  }

  .text-content {
    margin-top: 20px;
  }

  .mlm-section h2 {
    font-size: 30px;
  }

  .mlm-section .subtitle {
    font-size: 16px;
  }

  .tree-emoji {
    font-size: 150px;
    margin: 5px auto -75px auto;
  }

  .emoji-people {
    width: 7vmin;
    height: 7vmin;
    padding: 5px;
  }

  .emoji1 {
    top: revert;
    left: revert;
  }
  .emoji2, .emoji3, .emoji4 {
    display: none;
  }

  .emoji {
    font-size: 45px;
  }

  .emoji-bg {
    font-size: 22px;
  }

  .mlm-description, .mlm-data-note {
    font-size: 14px;

    .info {
      border: 0;
    }
  }

  .footer-content p {
    font-size: 12px;
  }

  .infinity-symbol {
    color: #000000cc;
  }
}