body {
    background-color: #404040;
    background-size: 12;
    background-position: center;
    background-attachment: fixed;
    color: #404040;
    margin: 0;
    padding: 0; /* Add this line to reset padding as well */
    height: 100%
} 

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }


.Select-menu-outer {
    background-color: #FFFFFF; /* Change this to your desired color */
}

/* Style the dropdown components specifically */
.Select-control, .Select-menu {
    background-color: #FFFFFF;
    color: #000000; /* Set this to a color that contrasts with the background */
}

/* Change the text color of the dropdown options */
.Select-option {
    color: black; /* Change this to your desired color */
}

/* Change the text color of the selected itm */
.Select-value-label {
    color: black; /* Change this to your desired color */
}

/* Additional styles for the app header if needed */
.app-header {
    background-color: #404040;
}

/* Add this to your existing style.css */

.top-margin {
    width: 100%;
    height: 10vh;  /* Adjust the height as needed */
    background-color: grey;
}

.bottom-section {
    display: flex;
    width: 100%;
    height: 90vh;  /* Adjust the height as needed */
}

.bottom-left {
    width: 50%;
    height: 100%;
    background-color: grey;
}

.bottom-right {
    width: 50%;
    height: 100%;
    background-color: white;
    overflow: auto;  /* Ensure scrollable content if needed */
}

.flex-container {
    display: flex;
    align-items: center;  /* Center align items vertically */
}

.flex-item {
    margin: 10px;  /* Optional: Add margin between items */
}

.image-container img {
    width: 50%; /* Adjust image width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image behaves like a block element */
    margin: 0 auto; /* Center the image horizontally */
}

.responsive-image {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }
  
  @media screen and (min-width: 600px) {
    .responsive-image {
      width: 80%;
    }
  }
  
  @media screen and (min-width: 900px) {
    .responsive-image {
      width: 50%;
    }
  }
  
  @media screen and (min-width: 1200px) {
    .responsive-image {
      width: 20%;
    }
  }

  .responsive-text {
    font-size: 12px; /* Base font size for small screens */
  }

  .responsive-click-text {
    font-size: 15px
  }

  @media screen and (min-width: 600px) {
    .responsive-text {
      font-size: 14px;
    }
  }
  
  @media screen and (min-width: 900px) {
    .responsive-text {
      font-size: 16px;
    }
    .responsive-click-text {
      font-size: 20px
    }
  }
  
  @media screen and (min-width: 1200px) {
    .responsive-text {
      font-size: 20px;
    }
    .responsive-click-text {
      font-size: 40px
    }
  }

  @media screen and (min-width: 2000px) {
    .responsive-text {
      font-size: 32px;
    }
  }

  
  .fun-facts {
    font-size: 10px
  }

  @media (min-width: 475px) {
    .fun-facts {
      font-size: 12px
    }
  }

  @media (min-width: 768px) {
    .fun-facts {
      font-size: 16px
    }
  
  }
  
  @media (min-width: 1024px) {
    .fun-facts {
      font-size: 20px
    }
  }

  @media (min-width: 2000px) {
    .fun-facts {
      font-size: 32px
    }
  }
  
  .dash-graph {
    width: 450px;
    height: 375px;
  }
    
  @media screen and (min-width: 375px) {
    .dash-graph {
      width: 480px;
      height: 400px;
    }
  }

  @media screen and (min-width: 768px) {
    .dash-graph {
      width: 850px;
      height: 500px;
    }
  }
    
  @media screen and (min-width: 1024px) {
    .dash-graph {
      width: 1300px;
      height: 600px;
    }
  }

  @media screen and (min-width: 1400px) {
    .dash-graph {
      width: 1250px;
      height: 600px;
    }
  }

  @media screen and (min-width: 2000px) {
    .dash-graph {
      width: 2000px;
      height: 700px;
    }
  }

  .update-text {
    font-size: 15px
  }

  @media (min-width: 1500px) {
    .update-text {
      font-size: 24px
    }
  }

  .dash-zoom {
    zoom: 0.45;
  }
  
  @media screen and (min-width: 475px) {
    .dash-zoom {
      zoom: 0.6;
    }
  }
  
  @media screen and (min-width: 768px) {
    .dash-zoom {
      zoom: 0.85;
    }
  }
  
  @media screen and (min-width: 1024px) {
    .dash-zoom {
      zoom: 1;
    }
  }

  @media screen and (min-width: 2560px) {
    .dash-zoom {
      zoom: 1.5;
    }
  }
 
 .responsive-graph {
  height: 100%;
  width: 70%;
  position: relative;
  left: 50px;
 }

 .dynamic-width {
  width: 115%; /* Set to more than 100% to extend beyond viewport */
  min-width: 700px; /* Ensures a minimum width */
  transform: scale(0.5);  /* Adjust this value to zoom out more or less */
  transform-origin: top left;
}

@media screen and (min-width: 768px) {
  .dynamic-width {
    width: 100%; /* Even wider on larger screens */
    min-width: 1200px; /* Larger minimum width for bigger screens */
    transform: scale(1);  /* Adjust this value to zoom out more or less */
  }
}

.image-zoom {
  zoom: 0.3;
}

@media screen and (min-width: 2560px) {
  .image-zoom{
    zoom: 0.5;
  }
}

/* Add to your existing CSS */
.ai-analysis-section {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
}

.ai-analysis-section h3 {
    color: #1E90FF;
    margin-bottom: 20px;
}