body {
  background-color: #121F36;
  margin: 0;
  font-family: 'Gemunu Libre'; /* Applying the specified font-family */
  overflow-y: auto; /* Add this line to ensure the body can scroll vertically */
  display: flex; 
  flex-direction: column; 
  min-height: 100vh;

 
}

.hel{
  display: none !important;
}

#hello{
  color: white;
  cursor: pointer;
  transition: text-decoration 0.3s ease;
}
#hello:hover{
  text-decoration: underline;
}

/* Ethereum box styles (from previous response, kept here) */
.ethereum-box {
  width: 233px;
  height: 106px;
  background: rgba(30, 106, 149, 1);
  border-radius: 10px; /* Rounded corners */
  cursor: pointer;
  padding: 20px; /* Internal spacing */
  color: white; /* White text */
  font-family: 'Gemunu Libre', Arial, sans-serif; /* Matches your website's font */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  display: flex; /* Use flexbox to align image and text */
  align-items: center; /* Vertically center content */
  gap: 15px; /* Space between image and text */
  position: relative; /* Ensure z-index works if needed */
  z-index: 2; /* Matches your existing z-index for content */
  transition: border 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid transparent;
}

.ethereum-box:hover {
  border: 3px solid;
  border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
  border-image-slice: 1;
}





.ethereum-box img {
  width: 81px;
  height: 81px;
  flex-shrink: 0; /* Prevents the image from shrinking */
  transition: border 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid transparent;
}

.ethereum-box img:hover {
  border: 3px solid;
  border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
  border-image-slice: 1;
}


.ethereum-box span {
  flex-grow: 1; /* Allows text to take up remaining space */
  text-align: left; /* Aligns text to the left after the image */
}

.ethereum-box small {
  font-size: 14px; /* Smaller font for "5000.0" */
  color: #b3b3b3; /* Lighter gray for smaller text, matching your image */
}
#kernal{
  background-color:#121F36; 

}
.container {
  position: relative;
 
}
.stylishcircle {
  position: absolute;
  top: -52px;
  left: -39px;
  width: 200px;
  opacity: 2;
  filter: brightness(2);
  height: 184px;
  color: green;
  z-index: 1;
  object-fit: cover;
}


#L1, #L2, #L3 {
  margin-top: 5px;
  font-family: 'Gemunu Libre'; 
}



#hel {
  color: white;
}

.radius {
  border-radius: 10px;
  background-color: #383c68;
  color: white;
  font-family: 'Gemunu Libre'; 
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-top: 10px;
  background-color: #121F36;
  color: white;
}

.logo {
  font-size: 24px;
  font-weight: bolder;
  margin-left: 17px;
  position: relative;
  z-index: 3;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  position:relative;
  z-index: 2;
  margin: 0;
  padding: 0;
}

nav a {
  color: white;
  text-decoration: none;
}
nav a:hover {
  text-decoration: underline;
}


.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position:relative;
  z-index: 2;
  padding: 20px;
  gap: 15px; /* Add gap between the left and right controls */
}

.controls .left, .controls .right {
  display: flex;
  gap: 13px; /* Add gap between elements within each section */
}

.controls .left {
  margin-left: 25px;
}

.controls .right {
  margin-right: 25px;
}

.btn {
  background: linear-gradient(135deg, #0987DE, #04DBBD); /* Background linear gradient */
  color: white;
  border: none;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  clip-path: polygon(26% 0, 80% 0%, 100% 0, 100% 58%, 75% 100%, 0 99%, 0 32%); /* Stylish shape */
  font-family: 'Gemunu Libre'; /* Applying the specified font-family */
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #005f73;
  border: 5px solid;
  text-decoration: underline;
  border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
}

.losi1{
  display: inline;
  margin-top: 10px;
}

.Upcompingbutton{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 12px;
}
#iam{
  margin: 0 15px;
}
select, input {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #383c68;
  color: white;
  border-radius: 10px;
}

.pattern { 
  background-image: url('samll\ boxes\ pic.png');
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;
  
}
.side1{
position: absolute;
right: 0;
top: -17%;
z-index: 1;
max-width: 100%;
}

.side2{
  position: absolute;
  left: 0;
  top: -15%;
  z-index: 1;
  max-width: 100%;
  }

/*form css \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

.centeralgail {
  display: flex;
  flex-wrap: wrap;
  gap: 59px;
  justify-content: center;
  align-items: center;
  width: 100%; /* Set width to 100% */
  margin: 0;
  font-family: Arial, sans-serif;
  
}

.form-container {
  width: 290px;
  height: 464px;
  position:relative;
  z-index: 2;
  background: #1E6A95;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: white;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid transparent;
}

.form-container:hover {
  border: 3px solid;
  border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
  border-image-slice: 1;
}

.headerf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.logo {
  width: 88.96px;
  height: 80.96px;
}

.title {
  font-weight: 700;
  font-size: 18px;
}

.buttonsm {
  display: flex;
  gap: 32px;
  margin-bottom: 20px;
}

.bton {
  width: 85px;
  color: white;
  height: 26px;
  background: linear-gradient(135deg, #0987DE, #04DBBD);
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  clip-path: polygon(26% 0, 80% 0%, 100% 0, 100% 58%, 75% 100%, 0 99%, 0 32%);
  transition: background-color 0.3s;
}

.bton:hover {
  background-color: #005f73;
  border: 5px solid;
  border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
}

.details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.left-column {
  text-align: left;
}

.right-column {
  text-align: left;
}

.social-logo {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

#footer2 {
  width: 312px;
  margin-left: -23px;
}

.progress-container {
  margin-bottom: 12px;
  text-align: center;
}

.message {
  background: linear-gradient(135deg, #0987DE, #04DBBD);
  color: #fbf8f8;
  padding: 7px 3px;
  border-radius: 10px;
  display: inline-block;
  clip-path: polygon(0% 0%, 100% 0%, 100% 76%, 77% 77%, 43% 100%, 48% 80%, 0 79%);
  width: 60px;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 700;
}

.progress-bar {
  width: 296px;
  height: 12px;
  background: #cccccc;
  border-radius: 19px;
  overflow: hidden;
  margin: 0 auto;
  transition: border 0.3s ease;
  border: 3px solid transparent;
}

.progress-bar:hover {
  border: 3px solid;
  border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
  border-image-slice: 1;
}

.progress {
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
  border-radius: 19px;
}

.footerf {
  background: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
  height: 57px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-radius: 0 0 12px 12px;
  transition: border 0.3s ease;
  border: 3px solid transparent;
}

.footerf:hover {
  border: 4px solid;
  border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
}
/* lower part css\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\\\\\\\\\\\*/


/* load button CSS\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

.xyz { 
  font-family: Gemunu Libre; 
  background: linear-gradient(135deg, #0987DE, #04DBBD); /* Linear gradient background */
  color: white; /* Text color */ 
  padding: 15px 30px; 
  font-size: 14px; 
  position: relative; 
  /* top: 64px; 
  left: 48%;  */
  top: 94px;
  left: 46%;

  font-weight: 700; 
  border: none; 
  cursor: pointer; 
  clip-path: polygon(26% 0, 80% 0%, 100% 0, 100% 58%, 75% 100%, 0 99%, 0 32%); 
  transition: background-color 0.3s;
  z-index: 1;
   } 
  .xyz:hover { 
  background-color: #005f73 !important; 
  border: 5px solid !important; 
  border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%) !important; 
  }
   /* footer diaognal shape bar for social\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/ 
  .ltft { 
  margin: 0 39%; 
  font-family: Arial, sans-serif; 
  position: relative;
  z-index: 3;
  }
  
  .shapess {
   clip-path: polygon(12% 21%, 86% 22%, 100% 100%, 0 100%); 
   background: linear-gradient(90.22deg, #098ADD 0.21%, #04D7BF 99.84%); 
   width: 300px; /* Adjust the width as needed */ 
   height: 100px; /* Adjust the height as needed */ 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   border-radius: 10px;
   transition: border 0.3s ease, box-shadow 0.3s ease;
   border: 3px solid transparent;
 }
 
 .shapess:hover {
   border: 3px solid white !important;
   border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
   border-image-slice: 1;
 }
 
 
  
  .iconss {
   display: flex; 
   gap: 20px; 
  } 
  .icon { width: 24px; /* Adjust the icon size as needed */ 
  height: 24px; /* Adjust the icon size as needed */ 
  background-size: cover;
   }
  
   .icon.linkedin { 
  background-image: url('Linkdin.png'); /* Replace with the correct path */ 
  } 
  
  .icon.telegram {
   background-image: url('telegram.png'); /* Replace with the correct path */
   }
  
   .icon.facebook { 
  background-image: url('facebook.png'); /* Replace with the correct path */ 
  }
  
   .icon.twitter { 
  background-image: url('twitter.png'); /* Replace with the correct path */ 
  }
  
   .follows{ 
  display: block; 
  margin-left: 48%; 
  margin-top: 10%; 
  font-size: larger; 
  font-weight: 700; 
  color: white; 
  position: relative;
  z-index: 1;
  } 
  /* fotoor content\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */ 
  

  
  
  .lastlast { 
    background-color: #121F36; 
  margin: 0; 
  font-family: 'Gemunu Libre'; 
  min-height: 20%;
   } 
  
  .footer { 
     background: #00375B; 
     color: white; 
     padding: 20px 0; 
     text-align: center; 
     width: 100%;
     height: 100%;
     margin-top: -40px;
     position: relative;
     z-index: 2;
     
   } 
  
  .footer-content { 
  display: flex; 
  justify-content: space-around; 
  flex-wrap: wrap;
  max-width: 1200px; 
  margin: 70px auto; 
  position: relative;
  z-index: 2;
  } 
  
  .footer-section { 
  flex: 1; 
  margin: 10px; 
  min-width: 200px;
   }
  
   .footer-section h1 { 
  margin-bottom: 10px; 
  background: linear-gradient(90.22deg, #098ADD 0.21%, #04D7BF 99.84%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; /* Add this line */ 
  }
  
   .footer-section h3 { 
  margin-bottom: 10px; 
  background: linear-gradient(90.22deg, #098ADD 0.21%, #04D7BF 99.84%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; /* Add this line */ 
  }
  
   .footer-section ul {
   list-style: none; 
  padding: 0; 
  } 
  
  .footer-section ul li { 
  margin: 5px 0;
   }
  
   .footer-section ul li a { 
  color: white; 
  text-decoration: none; 
  }
   .footer-section ul li a:hover { 
  text-decoration: underline; 
  } 


  /* media quires to make website responsive for all kind of devices\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  
 
@media (max-width: 725px) {
  .side2 {
    top: -1%; 
    
  }
}
  @media (max-width: 750px){
    .centeralgail{

      display: flex;
      flex-wrap: wrap;
      justify-content: center;

    }
     }

@media(max-width:750px){ 
     .controls{
      
      display: flex;
      flex-wrap: wrap;
     }
    
  }

  @media (max-width: 430px){
    .centeralgail{

      display: flex;
      flex-wrap: wrap;
     margin-left: 5%;

    }
  }

  .side1 {
    right: 0; 
    top: -12%; 
    
  }
  @media (min-width: 200px) and (max-width: 340px) {
    .footer {
      width: 126%;
    }
  }
  

  @media (max-width: 340px){

    .side1 {
      right: -89px;
      top: 9%;
  }
    .losi1{
margin: 5px;

    }

  }
  @media (max-width: 587px){
    .side1 {
      right: -7px;
      top: 7%;
  }
  }
  @media (max-width: 581px){
    .side1 {

  right: -44px;
    }}


  @media (max-width: 571px){
    .side1 {

  right: -44px;
    }
    .footer {

      width: 106%;
     }
  }

  @media (max-width: 470px){

.footer{

  height: 670px;
}
  }

  @media (max-width: 495px){

    .form-container{

width: 254px;

    }
.progress-bar{

  width: 252px;
}
#footer2{
width: 274px;

}
  }


  @media (max-width: 495px){

.controls .right{
display: flex;
flex-wrap: wrap;
}

.controls .left{
  display: flex;
  flex-wrap: wrap;
  }
  
  }

  @media (max-width: 495px){

header{

display: flex;
flex-wrap: wrap;

}
nav ul{
display: flex;
flex-wrap: wrap;
}
  }

  @media (max-width: 528px){
.ltft{
margin: 0 18%;
}
.side1 {
  right: -65px;
  top: 4%;
}
  }
  
  
  @media (min-width: 341px) and (max-width: 528px) {
    .footer {
      width: 116%;
  }
  }
  
  @media (max-width: 341px){
    .footer {
      width: 120%;
      height: 806px;
  }
 
  }


  @media (max-width: 310px){
  .side1 {
    right: -115px;
    top: 4%;
}
.footer {
  width: 140%;}
  }