* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    z-index: 9999;
  }
  html,
  body {
    height: 100%;
    width: 100%;
  }
  #main{
      position: relative;
      overflow: hidden;
      background-color: rgb(8, 8, 16);
  }

  /*--------------------page 1 ------------*/
  #page1
  {
      height: 100vh;
      width: 100vw;
      position: relative;
  }
  #page1>video{
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  #head-one{
    font-size: small;
    font-weight: 900;
    color: white;
  }

  #head{
    justify-content: center;
    align-items: center;
  }
  #page1>nav{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 30px;
      position: absolute;
      height: 10vh;
      width: 100vw;
      background-color: #0e3ed8;
      box-shadow: none  ;
  }
  /*--------------------my logo ------------*/
  #page1>nav>img{ 
      width: 11%;
      mix-blend-mode: lighten;
  }
  #right-nav>button{
      padding: 10px 20px;
      border-radius: 50px;
      background-color: #0b48ed;
      border: 1px solid #fff;
      color: #fff;

      font-size: 14px;
  }
  .bottom-page1{
    text-align: left;
      position: absolute;
      bottom: 25%;
      height: 35vh;
      width: 50vw;
      left: 10%;
  }
  .bottom-page1>h1{
    font-family: "Montserrat", sans-serif;
      font-size: 5vw;
      font-weight: 500;
      line-height: 1;
      color: #fff;
      margin-bottom: 150%;
      margin-top: -15%;
      text-shadow: -5px -5px 5px rgb(40, 40, 31);
  }

  .bottom-page1-inner{
      position: absolute;
      bottom: 0%;
      height: 35%;
      width: 100%;
  }
  .bottom-page1-inner{
      display: flex;
      align-items: center;
      justify-content: space-between;
   
  }
  .bottom-page1-inner>button{
      padding: 8px 20px;
      border: none;
      border-radius: 50px;
      background-color: #fff;
      color: #0b48ed;
      font-size: 16px;
      font-family: b;
      margin-right: 25%;
      margin-left: 1%;
      margin-top: -10%;
  }
  .bottom-page1-inner>h4{
    font-family: "Montserrat", sans-serif;
      font-size: 1.3vw;
      font-weight: 600;
      color: #fff;
      margin-bottom: 25%;
      margin-top: -5;
      
  }


nav .fas{
    display: none;
}
@media only screen and (max-width : 600px){
    #page1>nav>img{ 
        width: 19%;
        mix-blend-mode: lighten;
    }
    .bottom-page1>h1{
        font-family: a;
        font-size: 6vw;
        font-weight: 100;
        line-height: 1;
        color: #fff;
        margin-bottom: 200%;
        margin-top: -40%;
        margin-left: -15%;
    }
    .bottom-page1-inner>h4{
        font-size: 12px;
        font-weight: 100;
        color: #fff;
        margin-bottom: 120%;
        margin-top: -5;
        margin-left: -15%;
    }
    .bottom-page1-inner>button{
        padding:.2rem 1.5rem ;
        margin-bottom: -15%;
    }
    .right9-center{
        height: 30%;
    }
    .right10-inner>h1{
        font-size: 3vw;
        margin-top: -20%;
    }
    .right10-inner>p{
        margin-top: 0%;
        font-size: 2vw;
    }




}
.button-82-pushable {
    margin-left: -30px;
    margin-right: -30px;
	position: relative;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	outline-offset: 4px;
	transition: filter 250ms;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
  }
  
  .button-82-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: hsl(0deg 0% 0% / 0.25);
	will-change: transform;
	transform: translateY(2px);
	transition:
	  transform
	  600ms
	  cubic-bezier(.3, .7, .4, 1);
  }
  
  .button-82-edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background: linear-gradient(
	  to left,
	  hsl(215, 100%, 16%) 0%,
	  hsl(215, 100%, 32%) 8%,
	  hsl(215, 100%, 32%) 92%,
	  hsl(215, 100%, 16%) 100%
	);
  }
  
  .button-82-front {
	display: block;
	position: relative;
	padding: 12px 27px;
	border-radius: 20px;
	font-size: 1.1rem;  
	color: white;
	background: hsl(0, 0%, 0%);
	will-change: transform;
	transform: translateY(-4px);
	transition:
	  transform
	  600ms
	  cubic-bezier(.3, .7, .4, 1);
  }
  
  @media (min-width: 768px) {
	.button-82-front {
	  font-size: 1.25rem;
	  padding: 12px 42px;
	}
  }
  
  .button-82-pushable:hover {
	filter: brightness(110%);
	-webkit-filter: brightness(110%);
  }
  
  .button-82-pushable:hover .button-82-front {
	transform: translateY(-6px);
	transition:
	  transform
	  250ms
	  cubic-bezier(.3, .7, .4, 1.5);
  }
  
  .button-82-pushable:active .button-82-front {
	transform: translateY(-2px);
	transition: transform 34ms;
  }
  
  .button-82-pushable:hover .button-82-shadow {
	transform: translateY(4px);
	transition:
	  transform
	  250ms
	  cubic-bezier(.3, .7, .4, 1.5);
  }
  
  .button-82-pushable:active .button-82-shadow {
	transform: translateY(1px);
	transition: transform 34ms;
  }
  
  .button-82-pushable:focus:not(:focus-visible) {
	outline: none;
  }


  #page2{
   
  }
  #graph-container {
    padding: 20px;            /* Add padding inside the container */
    border: 5px solid rgb(253, 209, 108);  /* Add a white border around the container */
    background-color: #f0f0f0; /* Optional: Light background for better contrast */
    border-radius: 10px;      /* Optional: Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
  }

  /* Ensure the SVG inside the container takes up available space */
  #canvas {
    width: 100%;
    height: 400px; /* Set a fixed height or adjust as needed */
  }