@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap');

body {
  margin: 0; /* Remove default margin */
  padding: 0;
  width: 100%; /* Use 100% instead of 100vw */
  height: 100%; /* Full viewport height */
  overflow-x: hidden; /* Prevent horizontal scroll */
  background: #0D0D0D;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: rgba(13, 13, 13, 0.8); /* Adds transparency */
  backdrop-filter: blur(30px);
  padding: 0;
  margin: 0;
}

.header_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vw; /* Responsive padding that scales with the viewport width */
}

.header_container a {
  text-decoration: none;
  padding-right: 2vw; /* Responsive spacing between links */
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 1.0vw, 30px); /* Scales from xxpx to xxpx */  
}

/* Adjust logo size to be responsive */
.header_container img {
  width: 15vw; /* Adjust the logo width based on viewport width */
  max-width: 150px; /* Optional: Limit the logo's max size for large screens */
  height: auto; /* Maintain aspect ratio */
}

nav {
  display: flex;
  gap: 1vw; /* Adds responsive spacing between links */
}





.heading1{
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(40px, 10.5vw, 80px); /* Scales from xxpx to xxpx */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
  color: #cccccc; /* Fallback color */
  background-image: linear-gradient(45deg, rgb(199, 221, 255) 34%, rgb(91, 95, 102) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

.heading2{
  font-family: 'DM Sans', sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
  color: #cccccc; /* Fallback color */
  background-image: linear-gradient(45deg, rgb(199, 221, 255) 34%, rgb(91, 95, 102) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading3{
  font-family: 'DM Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
  color: #cccccc; /* Fallback color */
  background-image: linear-gradient(45deg, rgb(199, 221, 255) 34%, rgb(91, 95, 102) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
  
a, p {
  font-family: 'DM Sans', sans-serif;
  color: rgb(131, 143, 160); /* Matches the original color in inline style */
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 140%;
  text-align: center;
}

.font_20px_400{
  font-family: 'DM Sans', sans-serif;
  color: #CCCCCC; /*font color*/
  font-size: 20px;
  font-size: clamp(12px, 1.5vw, 20px); /* Scales from 12px to 20px */
  font-weight: 400;
  line-height: 28.07px;
  text-align: center;
}
.font_48px_700 {
  font-family: 'DM Sans', sans-serif;
  color: #C7DDFF; /*font color*/
  font-size: clamp(24px, 4vw, 48px); /* Scales from 24px to 48px based on viewport */
  font-weight: 700;
  line-height: 1.35em;
  text-align: center;
  letter-spacing: -0.05em;
}

.font_15px_400 {
  font-family: 'DM Sans', sans-serif;
  color: #B4BCD0; /*font color*/
  font-size: clamp(12px, 1.5vw, 15px); /* Scales from 12px to 15px */
  font-weight: 400;
  line-height: 1.8em;
  text-align: center;
}
.font_15px_400_footer {
  font-family: 'DM Sans', sans-serif;
  color: #B4BCD0; /*font color*/
  font-size: clamp(12px, 1.5vw, 15px); /* Scales from 12px to 15px */
  font-weight: 400;
  line-height: 1.0em;
  text-align: center;
}


.section_heading1{
  display: block;
  justify-content: center; /*put everything in the block to center position*/
  text-align: center; /*put text in the center position of the text block*/
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 50px;
  padding-bottom: 10px;
  /*background: radial-gradient(circle at center bottom, rgba(93, 58, 173, 1) 0%, #221E8F 30%, rgba(34, 30, 143, 0.5) 60%, rgba(0, 0, 0, 0.2) 85%, rgba(0, 0, 0, 0) 100%);*/
  position: relative; /* Allows positioning of the gradient circle */
  background: #0D0D0D;
  backdrop-filter: blur(114px); /* Applies the blur effect */    
  overflow: hidden; /* Clips the gradient if it extends beyond the border radius */
  width:50%;
  margin: auto;
}

/* -------------- section 0-----------------*/
.section_0{
  display: block;
  justify-content: center; /*put everything in the block to center position*/
  text-align: center; /*put text in the center position of the text block*/
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 30px;
  padding-bottom: 100px;
  /*background: radial-gradient(circle at center bottom, rgba(93, 58, 173, 1) 0%, #221E8F 30%, rgba(34, 30, 143, 0.5) 60%, rgba(0, 0, 0, 0.2) 85%, rgba(0, 0, 0, 0) 100%);*/
  position: relative; /* Allows positioning of the gradient circle */
  background: #0D0D0D;
  backdrop-filter: blur(114px); /* Applies the blur effect */    
  overflow: hidden; /* Clips the gradient if it extends beyond the border radius */
} 


.section_0::before {
  content: ""; /* Creates an empty pseudo-element for the gradient */
  position: absolute;
  bottom: 0; /* Positions the gradient at the bottom */
  left: 50%;
  transform: translateX(-50%); /* Centers the gradient horizontally */
  width: 100%; /* Adjusts the width to keep the circle effect */
  height: 100%; /* Limits the gradient height to stay within the section */
  background: radial-gradient(circle at bottom, #013bfa66 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.2) 60%, #0D0D0D 100%);
  z-index: -1; /* Places the gradient behind the content of .section_2 */
}



.intro_text_header{
  text-align: center; /*set the text into center position of the div*/
  margin: auto;
}
.currency_strength_meter_div{
  text-align: center; /*set the text into center position of the div*/
}
.intro_container {
  display: flex;
  justify-content: center; /*put everything in the block to center position*/
  text-align: center; /*put text in the center position of the text block*/
  align-items: center;
  margin: auto; /* Horizontal centering */
  width: 70vw;
  border-radius: 10px;
  box-shadow: 0 0 1px rgba(93, 58, 173, 1.0), 0 0 5px rgba(244, 245, 245, 1.0); /* Reset glow */
}

.responsive-image {
  width: 40%;
  max-width: 648px;  /* Ensures the image won't get larger than 648px */
  height: auto;
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  /*border-color: #a3b3b6;*/
  /*box-shadow: 0 0 5px rgb(132, 131, 133); /* Single color shadow */
}

.grey_div{
  display: flex;
  justify-content: center;
  align-items: center;
  /*border-radius: 10px;
  /*border-width: 0px;
  /*border-style: solid;
  border-color: #a3b3b6;
  box-shadow: 0 0 5px rgb(132, 131, 133); /* Single color shadow */
  background: #141616;
  width: 50%;
  margin: 0 auto;
  max-width: 100vw; /* Ensures it doesn’t exceed the viewport width */
  height:auto
}
.grey_div img {
  width: auto; /* Keeps the image size static */
  max-width: none; /* Prevents resizing to fit the container */
  height: auto; /* Maintains the image's original aspect ratio */
}

.home_cta_div{
  
  display: flex; /* Enables flexbox layout for centering */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  gap: 15px; /* Adds 15px space between stacked items */
  margin: 10%;
}
@media (max-width: 768px) {
  .home_cta_div {
    flex-direction: column; /* Stacks the image and text display: flex; /* Enables flexbox layout for centering */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    gap: 15px; /* Adds 15px space between stacked items */
    margin: 10%;
  }
}

.cta_div {
  background: linear-gradient(180deg, #1E1E1E 0%, #141414 100%); /* Sets a vertical gradient background */
  border-radius: 30px; /* Rounds the corners of the div */
  border: 1px solid #1F1F1F; /* Adds a solid border with a dark color */
  width: 100%; /* Sets the width of the div to 100% of its container */
  padding: 40px; /* Adds padding inside the div */
  margin: 0 auto; /* Centers the div within its container horizontally */
  box-sizing: border-box; /* Includes padding and border in the div's total width and height */
  display: flex; /* Enables flexbox layout for centering */
  flex-direction: column; /* Stacks items vertically */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
}

.cta_image {
  width: 100%; /* Sets the width of the div to 100% of its container */
  max-width: 100%; /* Ensures the image won't get larger than 648px */
  height: auto;
  border-radius: 10px; /* Round the corners of the image */
  border-width: 1px;
  border-style: solid;
  z-index: 1; /* Ensure the image is above the shadow div */
}



.cta_image_shadow {  
  /*top: 50px; /* Position it above the image */
  /*left: 50%; /* Center it horizontally */
  /*transform: translateX(-50%); /* Ensure it's exactly centered */
  width: 100%; /* Makes the shadow div narrower than the .cta_image div */
  max-width: 98%; /* Ensures the image won't get larger than 648px */
  height: 15px; /* Height of the shadow */
  background-color: #141616; /* Shadow color */
  /*background-color: #a7115c; /* Shadow color */
  border-radius: 10px; /* Match the rounded corners of .cta_image */
  border-width: 0px;
  border-style: solid;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  /*border-color: #00B4D8;*/
  z-index:0; /* Place the shadow behind the image */
}


/* -------------- section 1-----------------*/

.section_1 {
  /*background: radial-gradient(circle, rgba(93, 58, 173, 0.4) 0%, rgba(34, 30, 143, 0.3) 70%, rgba(0, 0, 0, 0.2) 100%);*/
}
/* -------------- section 2-----------------*/
/* details for class .image inside class .section_2 */
.image{
  width: 410px;
  height: 208px;
  float:left ;/*put the image on the left side and text on the right next to image*/
  margin-right: 10px;
}
.section_2 {
  position: relative; /* Allows positioning of the gradient circle */
  background: #0D0D0D;
  backdrop-filter: blur(114px); /* Applies the blur effect */    
  overflow: hidden; /* Clips the gradient if it extends beyond the border radius */
  padding-bottom: 150px;
}
.section_2::before {
  content: ""; /* Creates an empty pseudo-element for the gradient */
  position: absolute;
  bottom: 0; /* Positions the gradient at the bottom */
  left: 50%;
  transform: translateX(-50%); /* Centers the gradient horizontally */
  width: 100%; /* Adjusts the width to keep the circle effect */
  height: 100%; /* Limits the gradient height to stay within the section */
  background: radial-gradient(circle at bottom, #013bfa66 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.2) 60%, #0D0D0D 100%);
  z-index: -1; /* Places the gradient behind the content of .section_2 */
}

.section_2_div{
  display:flow-root; /*use this to have only one text next to image. What is contained inside the DIV */
  padding-left: 20%;
  padding-right: 20%;
  text-align: center;
}
.p_center{
  text-align: center;
  padding: 30px;
  font-family: 'Russo One', sans-serif;
}
/* -------------- section 3-----------------*/
.section_3 {
  padding: 10px;
}


/* -------------- section 4-----------------*/
.section_4{
  padding: 80px
}

.join_telegram {
  position: relative; /* Allows positioning of the gradient circle */
  border-radius: 30px;
  background: #21212166;
  backdrop-filter: blur(114px); /* Applies the blur effect */
  display: flex; /* Enables flexbox layout for centering */
  justify-content: space-between; /* Ensures space between the image and text */
  align-items: stretch; /* Ensures the text and image both stretch to full height */
  gap: 20px; /* Adds space between the image and text */
  margin: 10%;
  height: auto; /* Makes it responsive to the container’s height */
  overflow: hidden; /* Clips the gradient if it extends beyond the border radius */
}

.join_telegram::before {
  content: ""; /* Creates an empty pseudo-element for the gradient */
  position: absolute;
  top: 50%;
  right: -30%; /* Moves the circle further to the right, ensuring it’s fully clipped */
  transform: translateY(-50%); /* Centers the gradient vertically */
  width: 120%; /* Reduces the size of the circle */
  height: 120%; /* Reduces the size of the circle */
  background: radial-gradient(circle, #013bfa66 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.2) 10%);
  z-index: -1; /* Places the gradient behind the content of .join_telegram */
}

.telegram_image {
  flex: 1; /* Ensures both image and text take equal space */
  display: flex;
  border-radius: 30px; /* Rounds the corners of the image container */
  overflow: hidden; /* Ensures rounded corners clip the image */
}

.telegram_image img {
  width: 100%; /* Scales the image to the width of the container */
  height: auto; /* Maintains the aspect ratio */
  border-radius: inherit; /* Matches the container’s border radius */
  object-fit: fill; /* Ensures the image scales nicely without stretching */
}
.telegram_text{
  flex: 1; /* Ensures both image and text take equal space */
  display: flex; /* Enables flexbox layout for centering */
  
  flex-direction: column; /* Stacks items vertically */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  width: 100%; /* Scales the image to the width of the container */
  padding: 10px;
}
@media (max-width: 768px) {
  .join_telegram {
    flex-direction: column; /* Stacks the image and text vertically on small screens */
    height: auto; /* Allows the container height to adjust */
    align-items: center; /* Centers the content horizontally */
  }

  .telegram_image,
  .telegram_text {
    flex: 1 1 100%; /* Ensures both image and text fill the container in column layout */
    width: 100%; /* Ensures both image and text take full width */
    height: auto; /* Adjusts height on smaller screens */
  }
}


.div_list{
  display: block;
  justify-content: center;
  background-color: #f5f4f2;
  margin: 10px;
}

ul{
  padding-left: 40px;
  list-style-image: url("../public/Images/checkbox_5px.png");
}
/* -------------- section 5-----------------*/
.image_5{
  display: flex;
  justify-content: center;
}
.section_5{
  padding-left: 20%;
  padding-right: 20%;
}



button {
  background: #2D68FE;
  border: none;
  border-radius: 74px;
  padding: 10px 24px 10px 24px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Russo One', sans-serif;
  /*text-transform: uppercase;
  /*letter-spacing: 1px;
  cursor: pointer;
  border-radius: 5px; /* Slightly rounded for a clean rectangle look */
  /*transition: box-shadow 0.3s ease, transform 0.3s ease;
  width: 95%; /* Full width for the button */
  /*box-shadow: 0 0 15px rgba(90, 232, 225, 0.3), 0 0 25px rgba(0, 180, 216, 0.4); /* Sci-fi neon glow */
}
.button_div{
  display: flex;
  justify-content: left;
  align-items : center;
  margin-top: 20px;
  overflow: hidden; /* Prevent child elements from spilling out */
  width: 100%; /* Full width for the button */
  /*box-shadow: 0 0 15px rgba(90, 232, 225, 0.3), 0 0 25px rgba(0, 180, 216, 0.4); /* Sci-fi neon glow */
  border-radius: 5px; /* Slightly rounded for a clean rectangle look */
}
.button_div_center{
  display: flex;
  justify-content: center;
  align-items : center;
  margin-top: 20px;
  overflow: hidden; /* Prevent child elements from spilling out */
  width: 100%; /* Full width for the button */
  /*box-shadow: 0 0 15px rgba(90, 232, 225, 0.3), 0 0 25px rgba(0, 180, 216, 0.4); /* Sci-fi neon glow */
  border-radius: 5px; /* Slightly rounded for a clean rectangle look */
}

.button:hover {
  transform: scale(1.10); /* Slight enlrage effect when clicked */
  box-shadow: 0 0 15px rgba(90, 232, 225, 0.7), 0 0 25px rgba(0, 180, 216, 0.8); /* Reset glow */
  border-radius: 5px; /* Slightly rounded for a clean rectangle look */
  transition: transform 1.3s ease, box-shadow 1.3s ease; /* Slow down the animation */
}
.button:active {
  transform: scale(0.90); /* Slight shrink effect when clicked */
  box-shadow: 0 0 15px rgba(90, 232, 225, 0.7), 0 0 25px rgba(0, 180, 216, 0.8); /* Reset glow */
}
.feedback_button_div{
  display: flex;
  justify-content: center;
  align-items : center;
  margin: 0 auto;
  overflow: hidden; /* Prevent child elements from spilling out */
  width: 50%; /* Full width for the button */
  border-radius: 10px; /* Slightly rounded for a clean rectangle look */
  padding: 10px;
}

.correlation_dropdown{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px; /* Space between the two dropdowns */
  text-align: center; /* Centering the dropdown div */
  align-items : center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto; /* Center horizontally */
  box-sizing: border-box; /* Include padding and border in width/height calculations */
  overflow: hidden; /* Prevent child elements from spilling out */
}

.dropdown {
  width: 100%; /* Each dropdown takes up equal space */  
}


/* Focus (clicked state) - neon text and black background */
.dropdown select:focus {
  background: #121212; /* Black background */
  color: #ffffff; /* Neon text color */
  outline: none; /* Remove the default focus outline */
  /*box-shadow: 0 0 15px rgba(90, 232, 225, 1), 0 0 25px rgba(0, 180, 216, 1); /* Maintain neon glow */
}

.dropdown select {
  background: #121212;
  color: white;
  font-size: 16px;
  font-family: 'Russo One', sans-serif;
  border: none;
  padding: 10px 20px;
  border-radius: 5px; /* Slightly rounded for a clean rectangle look */
  cursor: pointer;
  /*box-shadow: 0 0 15px rgba(90, 232, 225, 0.7), 0 0 25px rgba(0, 180, 216, 0.8); /* Neon glow */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  appearance: none; /* Hide default dropdown arrow */
  width: 100%; /* Full-width dropdown */
}

.dropdown_together {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px; /* Space between the two dropdowns */
  text-align: center; /* Centering the dropdown div */
  /*background-color: transparent ;*/
  background: linear-gradient(180deg, #1E1E1E 0%, #121212 100%); /* Sets a vertical gradient background */
  align-items : center;
  width: 50vw;
  max-width: 70vw;
  margin: 0 auto; /* Center horizontally */
  box-sizing: border-box; /* Include padding and border in width/height calculations */
  padding: 40px 80px 40px 80px;
  overflow: hidden; /* Prevent child elements from spilling out */
  border-radius: 30px; /* Slightly rounded for a clean rectangle look */
}
/* Responsive layout for smaller screens */
@media (max-width: 768px) {
  .dropdown_together {
      flex-direction: column; /* Stack dropdowns vertically on smaller screens */
      gap: 10px; /* Adjust gap between stacked dropdowns */
      align-items: stretch; /* Stretch dropdowns to take full width */
      width: 70%;
      max-width: 100%;
      padding: 5px 10px 50px 10px;
  }
  .correlation_dropdown{
    flex-direction: column; /* Stack dropdowns vertically on smaller screens */
      gap: 10px; /* Adjust gap between stacked dropdowns */
      align-items: stretch; /* Stretch dropdowns to take full width */
      width: 100%;
      max-width: 100%;
      padding: 5px 10px 50px 10px;
  }

  .dropdown {
      width: 100%; /* Full width for each dropdown */
      
  }
}




/*new bar chart*/
/*bar hcart DIV*/
.container {  
  flex: 1;
  width: 70%;
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem;
  height: 70%;
  max-height: 100%;
  /*background: linear-gradient(to right, #141616, #0e0e0e); /* Darker to original shade gradient */
  /*background: black;*/
  background: linear-gradient(122.1deg, rgba(255, 255, 255, 0.1) 2.2%, rgba(255, 255, 255, 0) 100%);
  border-radius: 20px;
  border: 0px solid #777777; 
  box-sizing: border-box; /* Include padding and border in width/height calculations */
  padding: 10px;
  /* Adding multiple shadows */
  box-shadow: 
    0px 0.5px 0px 0px #FFFFFFB2 inset,   /* White inset shadow */
    0px -2px 10px 0px #C6CDFF4D,          /* Light blue glow */
    0px -2px 40px 0px #7C8CFF26;          /* Larger, soft blue glow */
}


.currency-meter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.currency {
    text-align: center;
    margin: 1rem;
    position: relative;
}

.bar-container {
    width: 60px;
    height: 300px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    background: black;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.bar-segment {
    width: 100%;
    height: 10%;
    /*background: linear-gradient(180deg, #76c7c0 0%, #76c7c0 50%, #4da7a6 100%);*/
    /*background: linear-gradient(135deg, #0083FF 60%, #005FCC 95%);*/
    background: #0083FF;
    border-top: 1px solid #262626;
    border-bottom: 1px solid #262626;
    opacity: 0.1;
    transition: opacity 0.3s;
}

.bar-label {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    color: white;
    visibility: hidden; /*do not show the percentage value below the chart*/
}

.currency span {
    display: block;
    font-size: 1.2rem;
    color: white;
    margin-top: 0.5rem;
}

.chart-container {
  /*background: linear-gradient(to right, #29243E, #1F1B2D); /* Darker to original shade gradient */
  /*background: black;*/
  background: linear-gradient(122.1deg, rgba(255, 255, 255, 0.1) 2.2%, rgba(255, 255, 255, 0) 100%);
  border-radius: 20px;
  width: 100vw;
  max-width: 90%;
  height: 50vh;
  max-height: 100%;
  /*height: 70vh; /* Full viewport height */
  border: 0px solid #777777; 
  margin: 0 auto; /* Center horizontally */
  box-sizing: border-box; /* Include padding and border in width/height calculations */
  padding: 10px;  
  display: flex;
  justify-content: center; /* Align horizontally in the center */
  align-items: center; /* Align vertically in the center */
  overflow: hidden; /* Prevent content from overflowing the div */
  position: relative; /* Ensure correct positioning of the canvas */
  box-shadow: 
    0px 0.5px 0px 0px #FFFFFFB2 inset,   /* White inset shadow */
    0px -2px 10px 0px #C6CDFF4D,          /* Light blue glow */
    0px -2px 40px 0px #7C8CFF26;          /* Larger, soft blue glow */
}




#pipRangeChart, #currencyStrengthChart_line, #correlationChart, #percentageChart, #currencyStrengthChart_bar {  
  width: 100% !important; /* Ensure the canvas follows the div width */
  height: 100% !important; /* Ensure the canvas follows the div height */
  display: block; /* Make sure the canvas is a block-level element */
  /*border: 2px solid #5AE8E1; /* Neon green border for the canvas */
}
.csm_bar_div {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin: auto;
  height: auto;
}

.csm_bar_div::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /*background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none; /* Ensures it doesn't interfere with interactions */
  background: transparent;
}
.csm_line_div {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin: auto;
}

.csm_line_div::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /*background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none; /* Ensures it doesn't interfere with interactions */
  background: transparent;
}
.correlation_div {
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center; /* Center content horizontally */
  overflow: hidden;
  margin: auto;
  position: relative; /* Required for the ::after pseudo-element to position correctly */
}

.correlation_div::after {
  content: '';
  position: absolute; /* Position relative to the .correlation_div container */
  bottom: 0;
  left: 0;
  /*background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none; /* Prevents interference with user interactions */
  background: transparent;
}

.pip_range_div {
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center; /* Center content horizontally */
  overflow: hidden;
  margin: auto;
  position: relative; /* Required for the ::after pseudo-element to position correctly */

}
/*this gives a small shadow on the bottom side of the grapg which looks good*/
.pip_range_div::after {
  content: '';
  position: absolute; /* Position relative to the .correlation_div container */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Adjust height for the fade effect */
  /*background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none; /* Prevents interference with user interactions */
  background: transparent;
}

.hero_home_page{
  background: black; /* Sets a vertical gradient background */
  border-radius: 20px; /* Rounds the corners of the div */
  border: 1px solid #1F1F1F; /* Adds a solid border with a dark color */
  width: 70%; /* Sets the width of the div to 100% of its container */
  padding: 15px; /* Adds padding inside the div */
  margin: 0 auto; /* Centers the div within its container horizontally */
  box-sizing: border-box; /* Includes padding and border in the div's total width and height */
  display: flex; /* Enables flexbox layout for centering */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  gap: 15px; /* Adds 15px space between stacked items */
  box-shadow: 
    0px 0px 0px 0px #FFFFFFB2 inset,   /* White inset shadow */
    0px -2px 10px 0px #C6CDFF4D,          /* Light blue glow */
    0px -2px 40px 0px #7C8CFF26;          /* Larger, soft blue glow */
}

@media (max-width: 768px) {
  .hero_home_page {
    flex-direction: column; /* Stacks the image and text background: black; /* Sets a vertical gradient background */
    border-radius: 20px; /* Rounds the corners of the div */
    border: 1px solid #1F1F1F; /* Adds a solid border with a dark color */
    width: 70%; /* Sets the width of the div to 100% of its container */
    padding: 15px; /* Adds padding inside the div */
    margin: 0 auto; /* Centers the div within its container horizontally */
    box-sizing: border-box; /* Includes padding and border in the div's total width and height */
    display: flex; /* Enables flexbox layout for centering */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    gap: 15px; /* Adds 15px space between stacked items */
    box-shadow: 
      0px 0.5px 0px 0px #FFFFFFB2 inset,   /* White inset shadow */
      0px -2px 10px 0px #C6CDFF4D,          /* Light blue glow */
      0px -2px 40px 0px #7C8CFF26;          /* Larger, soft blue glow */
  }
}

.hero_home_two_charts{
  width: 100%; /* Sets the width of the div to 100% of its container */
  margin: 0 auto; /* Centers the div within its container horizontally */
  box-sizing: border-box; /* Includes padding and border in the div's total width and height */
  display: flex; /* Enables flexbox layout for centering */
  flex-direction: column; /* Stacks items vertically */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  gap: 15px; /* Adds 15px space between stacked items */
}

.hero_home_one_charts {
  background: linear-gradient(180deg, #1E1E1E 0%, #141414 100%); /* Sets a vertical gradient background */
  border-radius: 24px; /* Rounds the corners of the div */
  border: 1px solid #1F1F1F; /* Adds a solid border with a dark color */
  width: 100%; /* Sets the width of the div to 100% of its container */
  padding: 15px; /* Adds padding inside the div */
  margin: 0 auto; /* Centers the div within its container horizontally */
  box-sizing: border-box; /* Includes padding and border in the div's total width and height */
  display: flex; /* Enables flexbox layout for centering */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  box-shadow: 0px 0px 6px 0px #FFFFFF40 inset; /* Inner shadow */
}

/* Container for date input */
.select_date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: transparent; /* Transparent  background */
  padding: 15px;
  border-radius: 8px;
  width: 100%;
  max-width: 100%; /* Ensure it doesn't exceed parent width */
  margin: 0 auto;
  /*box-shadow: 0 0 15px rgba(90, 232, 225, 0.3), 0 0 25px rgba(0, 180, 216, 0.4); /* Sci-fi neon glow */
  border: 2px solid #0083FF; /* Neon border */
  box-sizing: border-box; /* Include padding and border in width calculations */
  overflow: hidden; /* Prevent content from spilling out */
}

/* Label styling */
.select_date label {
  font-family: 'Russo One', sans-serif;
  color: white; /* Neon text color */
  font-size: 16px;
  /*text-shadow: 0 0 5px rgba(90, 232, 225, 0.7); /* Sci-fi glow around text */
}

/* Date input field styling */
.select_date input[type="date"] {
  background-color: transparent; /*  background */
  color: white;/* Neon text color */
  border: 2px solid #0083FF; /* Neon border */
  border-radius: 5px;
  padding: 10px;
  font-family: 'Russo One', sans-serif;
  font-size: 16px;
  outline: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Sci-fi glow on focus */
.select_date input[type="date"]:focus {
  box-shadow: 0 0 10px #5AE8E1, 0 0 20px #00B4D8;
  transform: scale(1.05); /* Slight scaling effect */
}

/* Label styling */
.dropdown label {
  font-family: 'Russo One', sans-serif;
  color: white; /* Neon text color */
  font-size: 16px;
  /*text-shadow: 0 0 5px rgba(90, 232, 225, 0.7); /* Sci-fi glow around text */
}

.intro_text {
  max-width: 55%;  /* Limits the text width for a balanced layout */
  padding-left: 10px;  /* Adds space between the image and the text */
}

@media (max-width: 768px) {
  .intro_container {
    flex-direction: column;  /* Stacks the image on top of the text on smaller screens */
    align-items: flex-start;
  }

  .responsive-image,
  .intro_text {
    max-width: 100%;  /* Full width on smaller screens */
  }
}


.section_3 {
  max-width: 600px;
  margin: auto;
  font-family: 'DM Sans', sans-serif;
}
.heading2 {
  font-size: 24px;
  margin-bottom: 20px;
}
.faq_item {
  padding: 10px 0;
  border-radius: 21px;
}
.faq_question {
  font-weight: 400;
  font-size: 20px;
  cursor: pointer;
  margin: 0;
  color: #CCCCCC;
}
.faq_answer {
  display: none;
  padding-top: 10px;
  color: #555;
  background: #161616;
  border-radius: 21px;
  border-style: solid;
  border: 1px;
}
.faq_email {
  font-weight: 400;
  font-size: 20px;
  cursor: pointer;
  margin: 0;
  color: #CCCCCC;
}
.more_questions{
  padding-top: 10px;
  color: #555;
}
/********************************* CLOCK ********************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');



.container-clock {
  display: flex;
  /*width: 20%;*/
  min-height: 20vh;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
}

#time {
  display: flex;
  gap: 40px;
  color: #fff;
}

#time .circle {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#time .circle svg {
  position: relative;
  width: 150px;
  height: 150px;
  transform: rotate(270deg);
}

#time .circle svg circle {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: #191919;
  stroke-width: 4px;
  transform: translate(5px, 5px);
}

#time .circle svg circle:nth-child(2) {
  stroke: var(--color);
  stroke-dasharray: 440;
}

#time div {
  position: absolute;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
}

#time div span {
  position: absolute;
  transform: translate(-50%, 0px);
  font-size: 0.5rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

#time .ap {
  position: relative;
  font-size: 1rem;
  transform: translate(-20px);
}

.dots {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.dots::before {
  content: '';
  position: absolute;
  top: -3px;
  width: 15px;
  height: 15px;
  background: var(--color);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--color), 0 0 60px var(--color  );
}
/********************************* END CLOCK *******************************/
/***********************FOOTER SECTION*/
.footer{
  display: flex;
  flex-direction: column;
}
.footer_div {
  display: flex; /* Enables flexbox layout */
  padding: 20px; /* Adds padding  */
  border-top: 1px solid #0083FF; /* Sets a 1px solid white border */
  justify-content: space-between;
  align-items: center; 
  max-height: 10vh; /* Use 30% of the viewport height */
  flex-wrap: wrap; /* Allows child elements to wrap to the next row */
  }
.footer_middle_div {
  display: flex; /* Enable flexbox */
  flex-direction: column; /* Stack elements vertically */
  align-items: flex-start; /* Align items to the left */
  gap: 5px;
}
@media (max-width: 768px) {
  .footer_div {
    flex-direction: column;  /* Stacks the image on top of the text on smaller screens */
    align-items: flex-start;
  }
  .footer{
    display: flex;
    flex-direction: column;
  }
}
.footer_div img {
  width: 15vw; /* Adjust the logo width based on viewport width */
  max-width: 150px; /* Optional: Limit the logo's max size for large screens */
  height: auto; /* Maintain aspect ratio */
}

.footer_domain{
  justify-content: space-between;
  align-items: center; 
}
footer{
  
}
/**********************END FOOTER*/


/***************************************** DASHBOARD **********************/
.dashboard{
  padding: 10%;

}

.dashboard-section-1{
  display: flex; /* Enables flexbox layout */
  justify-content: center;
  align-items: center;
  /*width: 70vw;*/
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 30px;
  
}
/*********************************** END DASHBOARD ***********************/


/*********************** TRADING SESSIONS ***************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Russo+One&display=swap');
/*
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
    

body {
    background-color: #1a1a1a;
    color: #e0e0e0;
    padding: 5px;
}
    */

.container_trading_session {
    /*max-width: 1200px;*/
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background-color: #222222;
    /*padding: 5000px;*/
}

.header_trading_session {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;

}

.title_trading_session {
    font-size: 38px;
    font-weight: 500;
    text-align: center;
    background: linear-gradient(to right, #C7DDFF, #5B5F66);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'DM Sans';
}


.title span {
    color: #8c9eff;
}

.current-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}


.time-display {
    margin-top: 10px;
    text-align: center;
    font-family: 'Russo One', sans-serif;
}

.time {
    font-size: 24px;
    font-weight: bold;
    color:white;
}

.date {
    font-size: 20px;
    color:white;
}

.timezone-selector {
    position: relative;
}

.timezone-dropdown {
    background-color: #2D68FE;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    appearance: none;
    padding-right: 30px;
    text-align: left;
    min-width: 180px;
    font-family: 'Russo One', sans-serif;
}

.dropdown-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
}
.timezone-container{
    display: flex;
    gap: 10px;
}

.toggle-container {
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: 'DM Sans', sans-serif;
}

.toggle-label {
    font-size: 14px;
    color: #bbb;
}

.toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #555;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.time-indicator {
    background-color: #2D68FE;
    color: white;
    border-radius: 50px;
    padding: 10px 20px;
    text-align: center;
    position: relative;
}

.time-indicator::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #2D68FE;
}

.indicator-time {
    font-size: 18px;
    font-weight: bold;
}

.indicator-day {
    font-size: 14px;
}

.time-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
}


.analog-clock {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/* Time grid */
.time-grid {
    position: relative;
    margin-top: 100px;
    width: 100%;
}

.timeline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    width: 100%;
    font-family: 'Russo One', sans-serif;
}

.hour-marker {
    font-size: 14px;
    color: white;
    width: 100%;
    font-weight: bold;
}



/* New time ticker styles */
.time-ticker {
    position: absolute;
    top: -40px;
    /* Position above the time line */
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}


.analog-clock {
    border-radius: 50%;
}

.digital-time {
    background-color: #2D68FE;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Market rows */
.market-row {
    display: flex;
    margin-bottom: 10px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-color: #444;
    width: 100%;
}

.market-info {
    position: absolute;
    width: 220px;
    padding: 15px;
}

.market-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #ffffff;
    opacity: 0.6;
    font-family: 'DM Sans';
}

.flag {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.market-time {
    display: flex;
    flex-direction: column;
    color: #888;
    font-size: 14px;
    font-size: 'DM Sans';
}

.market-hours {

    display: flex;
    height: 100px;
    background-color: #444;
    width: 100%;
}

.hour {
    height: 100px;
    border-left: 1px solid #333;
    width: 100%;
}

.closed {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    text-align: center;
}

/* Trading volume section */
.volume-section {
    margin-top: 20px;
}

.volume-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.volume-title {
    font-size: 20px;
    opacity: 0.6;
    font-family: 'Russo One';
    color: white;
}

.volume-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #4caf50;
}

.status-text {
    font-weight: bold;
    color: white;
}

.volume-chart {
    height: 150px;
    position: relative;
    margin-top: 20px;
}

/* Sydney market hours */
.sydney-hours {
    background-color: #4caf50;
    opacity: 0.7;
}

/* Tokyo market hours */
.tokyo-hours {
    background-color: #9c27b0;
    opacity: 0.7;
}

/* London market hours */
.london-hours {
    background-color: #1976d2;
    opacity: 0.7;
}

/* New York market hours */
.newyork-hours {
    background-color: #d32f2f;
}

/* Hide the original time indicator container since we've moved it to the time line */
.time-indicator-container {
    display: none;
}

/* Update current time line styles */
.current-time-line {
    position: absolute;
    top: -30px;
    bottom: 0;
    width: 2px;
    background-color: #2D68FE;
    z-index: 50;

}

/* Time bubble styling */
.time-bubble {
    position: absolute;
    top: -60px;
    /* Position above the timeline */
    left: 50%;
    transform: translateX(-50%);
    background-color: #2D68FE;
    color: white;
    border-radius: 100px;
    padding: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    text-align: center;
    font-family:'Russo One' ;
    font-size: 16px;
}

.svgspan{
    display: flex;
    align-items: center;
    gap: 3px;
}

.clock-container {
    margin-bottom: 5px;
}

.bubble-time {
    font-size: 10px;
    font-weight: bold;
}

.bubble-day {
    font-size: 10px;
}
/* Add this to your CSS file */
.market-banner {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    color: #838FA0;
    padding: 5px 15px;
    border-radius: 4px;
    height: 100px;
    width: 200px;
    font-weight: bold;
    font-size: 14px;
    z-index: 5;
    /* transform: rotate(-15deg); */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: 'Russo One';
    display: none;
    opacity: 0;
}

.banner-weekend {
    background-color: rgba(156, 39, 176, 0.8); /* Purple */
}

.banner-closed {
    background-color: rgba(211, 47, 47, 0.8); /* Red */
}

.banner-holiday {
    background-color: rgba(255, 152, 0, 0.8); /* Orange */
}
/* Trading session indicators */
/* .trading-session {
    position: absolute;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
} */
.trading-session {
    position: absolute;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.trading-session:hover {
    background-color: rgba(76, 175, 80, 0.5);
}



.session-name {
    font-size: 12px;
    font-weight: bold;
    color: #838FA0;
    opacity: 0.5;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    font-family: 'DM Sans', sans-serif;
}


/* Status indicators within session name */
.status-open {
    color: #4caf50;
    border-left: 3px solid #4caf50;
    padding-left: 8px;
}

.status-closed {
    color: #f44336;
    border-left: 3px solid #f44336;
    padding-left: 8px;
}

.status-weekend {
    color: #9c27b0;
    border-left: 3px solid #9c27b0;
    padding-left: 8px;
}

/* Update session name styles for better visibility with status */
.session-name {
    font-size: 13px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.95);
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    margin-right: -10%;
}

/* Make sessions more visible */
    .sydney-session {
        background-color: rgba(114, 253, 0, 0.25);

    }

    .tokyo-session {
        background-color: rgba(229, 99, 255, 0.25);

    }

    .london-session {
        background-color: rgba(0, 131, 255, 0.25);

    }

    .newyork-session {
        background-color: #FF29724D;
    }

.toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #2D68FE; /* Blue background when checked (24-hour) */
  }
  
  input:not(:checked) + .slider {
    background-color: #333; /* Gray background when unchecked (12-hour) */
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  

@media screen and (min-width: 900px) {
  /*  
  body {
        background-color: #1a1a1a;
        color: #e0e0e0;
        padding: 20px;
    }*/
    .header_trading_session {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
    }
    .title_trading_session {
        font-size: 32px;
        font-weight: 500;
        color: #e0e0e0;
        text-align: left;
    }
    .current-time {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
    .container_trading_session {
        max-width: 1200px;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        background-color: #222222;
        padding: 20px;
    }
}

/************************ END TRADING SESSION ******************/