html,body {
  background-color: #121F36;
  margin: 0;
  font-family: 'Gemunu Libre'; /* Applying the specified font-family */
  overflow-y: auto; 
  overflow-x: hidden;  /* Add this one */
  width: 100%;
  display: flex; 
  flex-direction: column; 
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
}

#kernal{
  background-color:#121F36; 

}
.container {
  position: relative;
 
    max-width: 100vw;  /* Add this one */
    overflow: hidden;  /* Add this one */
 
}
.stylishcircle { 
  position: absolute; 
  top: -52px; 
  left: -39px; 
  width: 200px;
  opacity: 1;
  filter: brightness(1.5); 
  height: 154px;
  color: green;
  z-index: 1; 
  object-fit: cover; /* Ensures the image covers the area without distortion */ 
  
}
.secondsection h1{
  font-family: 'Gemunu Libre'; 
  font-weight: 550; 
  font-size: 52px; 
  line-height: 97.56px; 
  z-index: 2;
  color: white; 
  position: relative;
  left: 78px;
  top: 65px;
}


#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: 1px 12px 0px;
  margin-top: 10px;
  background-color: #121F36 ;
  color: white;
 padding: 15px;

    background: none !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;

}

  
 
 

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

nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  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 0px 37px;
  gap: 15px; /* Add gap between the left and right controls */

  background-color: #121F36 ;
  background: none !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 10;

}

.controls .left, .controls .right {
  display: flex;
  gap: 20px; /* 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;

  background-color: #121F36 ;
  background: none !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 10;

}
.losi{
  display: flex;
  gap:10px;

  background-color: #121F36 ;
  background: none !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}
.Upcompingbutton{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
#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;

  position: relative; /* Add this one */
  padding-bottom: 50px; /* Add this one */
  
}
.side1{
position: absolute;
right: 0;
top: -17%;
z-index: 1;
max-width: 100%;
}

.side2{
  position: absolute;
  left: 0;
  top: -62%;
  z-index: 1;
  max-width: 100%;
  }
  .sidemiddle{
    position: relative;
    bottom: 623px;
    width: 100%;
    z-index: 1;
  }
  .backgroundrectangle{
    position: relative;
    left: 48px;
    bottom: 109pc;
  }
  .circletype{
    position: relative;
    bottom: 134pc;
    left: 5.5pc;
    background: linear-gradient(180deg, #098CDD 0%, #06DDBE 100%);
      width: 275px;
      height: 275px;
      z-index: 3;
      background: linear-gradient(to bottom, #1e90ff, #00ced1);
      border-radius: 50%;
    
  transition: border 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid transparent;
 }
 
 .circletype:hover {
  border: 3px solid white;
  border-image-slice: 1;
 }

 .roll-in-left {
  animation: none; /* Animation won't run until triggered */
}

.roll-in-left.animate {
  animation: roll-in-left 0.6s ease-out both;
  animation-delay: 0.5s; /* 0.5-second delay */
}

@keyframes roll-in-left {
  0% {
      transform: translateX(-800px) rotate(-540deg);
      opacity: 0;
  }
  100% {
      transform: translateX(0) rotate(0deg);
      opacity: 1;
  }
}

.responsive1{
  position: relative;
}




  .rectangularttext{
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(21px);
    width: 530px;
    padding: 22px 150px 26px;
    height: 170px;
    color: white;
    left: 16pc;
    bottom: 149.5pc;

    font-family: Gemunu Libre;
    font-weight: 550;
    font-size: 20px;
    text-align: center;

    transition: border 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid transparent;
   }
   
   .rectangularttext:hover {
    border: 3px solid white;
    border-image-slice: 1;
   }
 











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

.centeralgail {
  display: flex;
  flex-wrap: wrap;
  row-gap: 43px;
  column-gap: 31px;
  justify-content: center;
  align-items: center;
  width: 100%; 
  padding: 10px; /*this is one*/
  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: 92.96px;
  height: 68.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;
}

.lastsection{
  /* height: 790px;  */
  width: 100%;
  padding: 50px 0;
  width: 100%;
}
.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\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/


   /* 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;
   }
  
.shapess:hover{
  border: 3px solid white !important;

  border-image-slice: 1 !important;
}



  .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; 
  } 
  /* 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;
     
   } 
   .secondsection{
      height: auto; 
     max-height: 737px; 
      overflow: hidden; 
    
   }

   .thirdsection{
     height: auto; 
     max-height: 1350px;
     overflow: hidden; 
   }
   .thirdsection h1{
    font-family: Gemunu Libre;
    position: relative;
    z-index: 2;
    left: 40pc;
    top: 10pc;
    font-weight: 600;
    font-size: 50px;
    color: white;
    }

   .fourthsectionn{
     height: auto; /* Automatically adjusts based on content */
     max-height: 1750px; /* Limit max height */
     overflow: hidden; 
     margin-bottom: -200px;
   }
   .sectionbefore{
     height: auto; /* Automatically adjusts based on content */
     max-height: 1100px; /* Limit max height */
     overflow: hidden;
   }

   .fourthrectanglepolygon{
    background: #FFFFFF;
    opacity: 0.5;
    width: 76pc;
    clip-path: polygon(29% 0, 62.5% 0, 72% 100%, 21% 100%);
    position: relative;
    bottom: 354px;
    left: 5pc;
    height: 131px;
    z-index: 2;
   }

   .laststyleimage{
   position: relative; 
   left: 42pc;
   bottom: 13pc;
   }

   
   .backbackgrow{
    position: relative;
    z-index: 1;
    bottom: 107pc;
   }
 
   .fourthtext{
    display: flex;
    justify-content:center;
    align-items: center;
    text-align: center; 
    gap: 64px;
    padding: 19px;
   }
   .fourthtext img{
    width: 105px;
    height: 70px;
   }
  
   .rightarrow{
    position: relative;
    color: white !important;
    left: 32.5pc;
    bottom: 8pc;
    width: 26pc;
    z-index: 2;
   }
   .leftarrow{
    position: relative;
    color: white !important;
    bottom: 4pc;
    width: 23pc;
    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;
  } 
  .side33{
    position: relative;
    z-index: 1;
    bottom: 60pc;
    left: 6.2pc;
  }
  .side34{
    position: relative;
    z-index: 1;
    bottom: 210pc;
    right: 6.2pc;
  }

  
  /*polygon 1 css  */

  .polygon1 {
    border-radius: 143px;
    background: linear-gradient(to bottom, #1E88E5, #26C6DA);
    box-shadow: 0px 2px 36px 22px rgba(150, 150, 150, 0.24);
    width: 200px;
    height: 340px;
    color: white !important;
   display: flex;
   flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    padding: 10px; 
    overflow: hidden; 

    position: relative;
    bottom: 269pc;
    left: 8.9pc;
    z-index: 2;


    transition: border 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid transparent;
}
.polygon1:hover {
  border: 3px solid ;
  border-image-slice: 1;
}

.polygon1 p {
    margin: 0;
    font-size: 14px; /* Adjust text size */
    font-weight: 500;
    line-height: 1.2; /* Adjust line height */
}
#special{
  font-size: 20px; /* Adjust text size */
  font-weight:800;
  color:white !important;;
}


/* polygon 2 css */

.polygon2 {
  border-radius: 143px;
  background: linear-gradient(to bottom, #1E88E5, #26C6DA); 
  box-shadow: 0px 2px 36px 22px rgba(150, 150, 150, 0.24);
  width: 200px;
  height: 340px;
  color: white !important;
 display: flex;
 flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; 
  padding: 10px; 
  overflow: hidden; 

  position: relative;
  bottom: 284pc;
  left: 25pc;
  z-index: 2;

  transition: border 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid transparent;
}
.polygon2:hover {
  border: 3px solid ;
  border-image-slice: 1;
}

.polygon2 p {
  margin: 0;
  font-size: 14px; /* Adjust text size */
  font-weight: 500;
  line-height: 1.2; /* Adjust line height */
}
#special1{
font-size: 20px; /* Adjust text size */
font-weight:800;
color:white !important;;
}

/* polygon 3 css */

.polygon3 {

  border-radius: 143px;
  background: linear-gradient(to bottom, #1E88E5, #26C6DA);
  box-shadow: 0px 2px 36px 22px rgba(150, 150, 150, 0.24);
  width: 200px;
  height: 340px;
  color: white !important;
 display: flex;
 flex-direction: column; 
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px; 
  overflow: hidden; 

  position: relative;
  bottom: 300pc;
  left: 657px;
  z-index: 2;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid transparent;
}
.polygon3:hover {
  border: 3px solid ;
  border-image-slice: 1;
}

.polygon3 p {
  margin: 0;
  font-size: 14px; /* Adjust text size */
  font-weight: 500;
  line-height: 1.2; /* Adjust line height */
}
#special2{
font-size: 20px; /* Adjust text size */
font-weight:800;
color:white !important;;
}

/* polygon 4 css */


.polygon4 {

  border-radius: 143px;
  background: linear-gradient(to bottom, #1E88E5, #26C6DA); 
  box-shadow: 0px 2px 36px 22px rgba(150, 150, 150, 0.24);
  width: 200px;
  height: 340px;
  color: white !important;
 display: flex;
 flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  padding: 10px;
  overflow: hidden; 

  position: relative;
  bottom: 314pc;
  left: 56.5pc;
  z-index: 2;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid transparent;
}
.polygon4:hover {
  border: 3px solid ;
  border-image-slice: 1;
}

.polygon4 p {
  margin: 0;
  font-size: 14px; /* Adjust text size */
  font-weight: 500;
  line-height: 1.2; /* Adjust line height */
}
#special3{
font-size: 20px; /* Adjust text size */
font-weight:800;
color:white !important;;
}

.technology1{
  position: relative; 
  bottom: 271pc; 
  left: 19px;
  height: auto;
  width: 240px;
}

.technology2{
  position: relative; 
  bottom: 259pc; 
  left: 17px;
  width: 240px;
}

.technology3{
  position: relative; 
  left: 11px; 
  bottom: 251.5pc;
  width: 240px;
}

.technology4{
  position: relative; 
  bottom: 244.1pc; 
  left: 6px; 
  width: 240px;
}
.technology5{
  position: relative; 
  left: 59pc; 
  bottom: 257.2pc;
}













.backimage{
  position: relative;
  height: 156px;
  width: 1308px;
  left: 3pc;
  bottom: 13pc;
  clip-path: polygon(29% 0, 63% 0, 74% 100%, 20% 100%);
}
.threesection{
  position: relative;
  /* bottom: 199.5pc; */
  left: 3.5pc;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 65px;
  z-index: 3;
  
}
.Allinone{
  position: relative;
  height: auto;
  bottom:200pc;
}
.Allinone p{
font-family: Gemunu Libre;
font-weight: 700;
font-size: 45px;
color: white;
position: relative;
z-index: 2;
margin-bottom: 65px;
/* bottom: 198.0pc; */
left: 34px;
}


#jam{
  position: relative;
  color: white !important;
  font-size: 30px; /* Adjust text size */
  font-weight: 800;
  left: 4pc;
  margin-bottom: 155px;
  margin-top: 1px;
  z-index: 3;
}

.Muazbox{
  position: relative;
  left: 6pc;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 50px;
z-index: 3;
}
.Muazbox1{
  position: relative;
  background: linear-gradient(to bottom, #1E88E5, #26C6DA); /* Gradient */
  box-shadow: 0px 2px 36px 22px rgba(150, 150, 150, 0.24);
  width: 321px;
  height: 350px;
  color: white !important;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid transparent;
 }
 
 .Muazbox1:hover {
  border: 3px solid white;
  border-image-slice: 1;
 }


.Muazbox1 h2{
  font-size: 30px;
  font-weight: 600;
  position: absolute;
  left: 85px;
  bottom: 160px;
}

.boxno1{
  position: relative;
  background: linear-gradient(to bottom, #1E88E5, #26C6DA); /* Gradient */
  box-shadow: 0px 2px 36px 22px rgba(150, 150, 150, 0.24);
  width: 250px;
  height: 400px;
  color: white !important;
 display: flex;
 display: flex;
 flex-direction: column;
 border-radius: 20px;
 padding: 30px;

 transition: border 0.3s ease, box-shadow 0.3s ease;
 border: 3px solid transparent;
}

.boxno1:hover {
 border: 3px solid ;
 border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
 border-image-slice: 1;
}
.boxno1 h2{
  margin: 0;
  font-size: 34px; /* Adjust text size */
  font-weight: 500;
  line-height: 1.2; /* Adjust line height */
  position: absolute;
  top: 178px;
  left: 87px;

}




.boxno2{
  position: relative;
  background: linear-gradient(to bottom, #1E88E5, #26C6DA); /* Gradient */
  box-shadow: 0px 2px 36px 22px rgba(150, 150, 150, 0.24);
  width: 250px;
  height: 400px;
  color: white !important;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 border-radius: 20px;
 padding: 30px;

 transition: border 0.3s ease, box-shadow 0.3s ease;
 border: 3px solid transparent;
}

.boxno2:hover {
 border: 3px solid ;
 border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
 border-image-slice: 1;
}
.boxno2 h2{
  margin: 0;
  font-size: 34px; /* Adjust text size */
  font-weight: 500;
  line-height: 1.2; /* Adjust line height */
  position: absolute;
  top: 178px;
  left: 87px;

}


.boxno3{
  position: relative;
  background: linear-gradient(to bottom, #1E88E5, #26C6DA); /* Gradient */
  box-shadow: 0px 2px 36px 22px rgba(150, 150, 150, 0.24);
  width: 250px;
  height: 400px;
  color: white !important;
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 border-radius: 20px;
 padding: 30px;

 transition: border 0.3s ease, box-shadow 0.3s ease;
 border: 3px solid transparent;
}

.boxno3:hover {
 border: 3px solid ;
 border-image: linear-gradient(90deg, #098BDC 3.8%, #04D2C1 100%);
 border-image-slice: 1;
}
.boxno3 h2{
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2; /* Adjust line height */
  position: absolute;
  top: 178px;
  left: 87px;

}

.boxno1 button{
  position: absolute;
  top: 23pc;
  left: 5pc;
  font-size: 14px;
  }
  .boxno2 button{
  position: absolute;
  top: 23pc;
  left: 5pc;
  font-size: 13px;
  }
  .boxno3 button{
    position: absolute;
    top: 23pc;
    left: 5pc;
    font-size: 13px;
  }
  
  
  .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; 
  } 
.circletype h1{
  position: relative; 
  left: 93px; 
  z-index: 3;
  top: 52px; 
  font-family: 'Gemunu Libre';
  font-size: 42px;
  font-weight: 700; 
  color: white;
}






  /* media quires to make website responsive for all kind of devices\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  @media(max-width: 1205px){
.Allinone{
  position: relative;
  height: auto;
  bottom: 193pc;
}
  }
  @media(max-width: 1205px){
    .Allinone{
      position: relative;
      height: auto;
      bottom: 177pc;
    }
    
      }  
      @media(max-width: 1060px){
        .Allinone{
          position: relative;
          height: auto;
          bottom: 160pc;
        }
        
          }  
          @media(max-width: 939px){
          .Allinone {
            position: relative;
            height: auto;
            bottom: 142pc;
        }
      }

      @media(max-width: 822px){
        .Allinone {
          position: relative;
          height: auto;
          bottom: 122pc;
      }
    }

    @media(max-width: 693px){
      .Allinone {
        position: relative;
        height: auto;
        bottom: 99pc;
    }
  }

  @media(max-width: 549px){
    .Allinone {
      position: relative;
      height: auto;
      bottom: 76pc;
  }
  .Allinone p{
    font-size:40px ;
  }
}
@media(max-width: 413px){
  .Allinone {
    position: relative;
    height: auto;
    bottom: 59pc;
}
}




@media (max-width:751px){
 .radius{
  margin-left: 1pc;
 }
  
  }

  
@media (max-width:600px){
#newcss{
margin-left: 10px;
}
   
   }

   @media (max-width:547px){
   nav ul{
    gap: 20px;
   }
       
  }
  @media (max-width:495px){
   #newcss2{
    margin-left: 1pc;
   }
        
        }


          @media(max-width: 1240px){
            .responsive1{
              position: relative;
              top: 8pc;
            }
            .backgroundrectangle{
              width: 1083px;
            }
            .fourthrectanglepolygon {
              left: 4pc;
          }
          .rightarrow{
            left: 31pc;
          }
          .circletype h1{
            left: 97px;
          }
          }


          @media(max-width: 1168px){
            .secondsection{
            position: relative;
            max-height: 880px;
          }
          .backgroundrectangle {
            width: 1000px;
        }
            .responsive1 {
                position: relative;
                top: 20pc;
            }
             .circletype{
            position: relative;
            bottom: 129pc;
            width: 235px;
            height: 235px;
            }
           .rectangularttext{
              position: relative;
              z-index: 2;
              width: 614px;
              padding: 22px 22px 26px 80px;
              height: 157px;
              left: 16pc;
              bottom: 142.5pc;
              font-weight: 550;
              font-size: 17px;
              }
            #more{
              display: flex;
              flex-wrap: wrap;
              flex-direction: row;
              }
            
            .backgroundrectangle {
              width: 969px;
              height: 338px;
          }
          }
        
          @media(max-width: 1003px){

            .backgroundrectangle{
              width: 828px;
            }
            .rectangularttext{
              width: 434px;
              font-weight: 500;
              font-size: 15px;
            }
          .circletype h1{
              top: 66px;
               }
          


          }
          @media(max-width: 870px){
            .backgroundrectangle{
              width: 747px;
            }
          }




          @media(max-width: 1012px){
            .responsive1 {
              position: relative;
              top: 38pc;
          }
          }
         
          @media(max-width: 836px){
            .responsive1 {
              position: relative;
              top: 58pc;
          }
        .circletype{
          position: relative;
          width: 175px;
          height: 175px;
          bottom: 123.5pc;

        }

        .sidemiddle{
              bottom: 1179px;
             }
      .secondsection h1{
              font-size: 47px;
             }


        .circletype h1 {
          position: relative;
          left: 53px;
          z-index: 3;
          top: 16px;
          font-size: 36px;
      }
        .rectangularttext{
            position: relative;
            bottom: 134.5pc;
            width: 411px;
            height: 116px;
            font-family: Gemunu Libre;
            font-weight: 600;
            font-size: 13px;
            padding: 22px 15px 26px 62px;
            left: 209px;
        }
  
        }

        @media(max-width: 795px){
          .backgroundrectangle {
            width: 660px;
            height: 291px;
        }
        .circletype{
          position: relative;
          width: 175px;
          height: 175px;
          bottom: 123.5pc;

        }
        }
        @media(max-width: 705px){
          .circletype {
            position: relative;
            width: 149px;
            height: 149px;
            bottom: 122.5pc;
        }
        .circletype h1 {
          position: relative;
          left: 52px;
          z-index: 3;
          top: 12px;
          font-size: 26px;
      }
      
    .rectangularttext {
      position: relative;
      bottom: 131.9pc;
      width: 411px;
      height: 94px;
      font-family: Gemunu Libre;
      font-weight: 400;
      font-size: 13px;
      padding: 22px 15px 26px 62px;
      left: 174px;
  }
            .backgroundrectangle{
                  width: 594px;
            }

        }



        @media(max-width: 655px){
            
              .circletype {
                          width: 150px;
                          height: 150px;
                          bottom: 124.7pc;
                          left: 53px;
                        }
                        .backgroundrectangle{
                          width: 553px;
                    }

                    .circletype h1 {
                      position: relative;
                      left: 51px;
                      z-index: 3;
                      top: 5px;
                      font-family: 'Gemunu Libre';
                      font-size: 31px;
                      font-weight: 600;
                      color: white;
                  }
                  .rectangularttext {
                    position: relative;
                    bottom: 134.2pc;
                    width: 363px;
                    height: 97px;
                    font-family: Gemunu Libre;
                    font-weight: 400;
                    font-size: 13px;
                    padding: 22px 7px 26px 50px;
                    left: 156px;
                }
        }
        @media(max-width: 528px){
       .losi{
           margin-left: 1pc;
        
        }
      }
      
          @media(max-width: 592px){
            .responsive1 {
              position: relative;
              top: 80pc;
          }
          .sidemiddle {
            bottom: 1272px;
        }
          .circletype {
            width: 130px;
            height: 130px;
            bottom: 120.5pc;
        }
        .circletype h1 {
          position: relative;
          left: 42px;
          z-index: 3;
          top: -9px;
          font-family: 'Gemunu Libre';
          font-size: 28px;
          font-weight: 550;
          color: white;
      }

      .secondsection h1 {
        font-size: 33px;
    }




      .rectangularttext{
        position: relative;
        bottom: 128.5pc;
        padding: 14px 5px 26px 48px;
        height: 78px;
        left: 142px;
        font-weight: 350;
        font-size: 10px;
        width: 261px;
      }
      .backgroundrectangle{
        height: 15pc;
        width: 420px;
      }

          }

 
@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: -45%; 
    
  }
  @media (min-width: 200px) and (max-width: 340px) {
    .footer {
      width: 126%;
    }
  }
  

  @media (max-width: 340px){

    .side1 {
      right: 0; 
      top: 2%;
    }
    .losi1{
margin: 5px;

    }
    #iamnot{
margin-left: 30px;
    }
    #iamyes{
      margin-left: 30px;
          }
  
  }

  @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: -30px; 
  top: 2%;
}

  }
  
  
  @media (min-width: 341px) and (max-width: 528px) {
    .footer {
      width: 100%;
    }
  
  }
  
  @media (max-width: 1153px){
    .setting {
      position: relative;
      top: 16pc;
  }
  .technology1{
    left: 7px;
    width: 177px;
  }
  .polygon1{
    width: 164px;
    height: 289px;
    left: 4.9pc;
  }
  
.technology2 {
  left: 4px;
  bottom: 262pc;
  width: 177px;
}
.polygon2 {
  width: 164px;
  height: 289px;
  bottom: 281pc;
  left: 17.3pc;

}
 .technology3 {
  left: -2px;
  bottom: 254.5pc;
  width: 177px;
}
.polygon3 {
  width: 164px;
  height: 289px;
  bottom: 292pc;
  left: 29.5pc;

}
.technology4 {
  width: 200px;
  bottom: 246.1pc;
  left: -8px;
}
.polygon4 {
  width: 164px;
  height: 289px;
  bottom: 307pc;
  left: 42.2pc;
}
.technology5{
  left: -1pc;
  bottom: 256pc;
  width: 261px;
}

  }
  @media (max-width: 1006px){
    .technology1{
      bottom: 270.8pc;
      width: 176px;
      height: 2px;
    }
.technology5{
  left: 46pc;
  bottom: 257.2pc;
}
.polygon3{
  bottom: 293pc;
}
  }

  @media (max-width: 1071px){
    .setting {
      top: 29pc;
  }
  }
  @media (max-width: 1009px){
    .setting {
      top: 46pc;
  }
  .side34{
    bottom: 147pc;
  }
  }
  
  @media (max-width: 942px){
    .setting {
      top: 64pc;
  }
  }

  @media (max-width: 860px){
    .setting {
      top: 81pc;
  }
  .side33{
    bottom: 32pc;

  }
  .side34 {
    bottom: 108pc;
}
  }
  @media (max-width: 872px){
    .technology1 {
      width: 139px;
  }
  .technology2 {
    width: 150px;
    height: 8.9pc;
}
.polygon1 {
  width: 140px;
  height: 284px;
  left: 3.9pc;
}
.polygon2 {
  width: 148px;
  height: 284px;
  left: 14.7pc;
}
.polygon3 {
  width: 140px;
  height: 284px;
  left: 25.9pc;
}

.polygon4 {
  width: 140px;
  height: 284px;
  left: 36.9pc;
  bottom: 307pc;

}
.technology3{
  width: 178px;
}
.technology4{
  width: 179px;
}
.technology5 {
  left: 37pc;
  bottom: 256.2pc;
}


  }

  @media (max-width: 785px){
    .setting {
      top: 104pc;
  }
  }


  @media (max-width: 766px){
    .technology1 {
      width: 92px;
  }
  .technology2 {
    width: 112px;
    height: 8.9pc;
}
.polygon1 {
  width: 111px;
  height: 284px;
  left: 1.1pc;
}
.polygon2 {
  width: 111px;
  height: 284px;
  left: 9.7pc;
}
.polygon3 {
  width: 111px;
  height: 284px;
  left: 18.5pc;
}

.polygon4 {
  width: 111px;
  height: 284px;
  left: 27.4pc;
  bottom: 308pc;
}
.technology3{
  width: 141px;
  bottom: 255.5pc;
}
.technology4{
  width: 145px;
  bottom: 249pc;
}
.technology5 {
  width: 230px;
  left: -1.4pc;
  bottom: 256.3pc;
}


  }
@media (max-width:757px){
  .side34 {
    bottom: 99pc;
}
.side33{
  bottom: 10pc;
}
}





  @media (max-width: 683px){
    .setting {
      top: 129pc;
  }
  }
  @media (max-width: 683px){
    .setting {
      top: 145pc;
  }
.polygon1{
  width: 88px;
}
.polygon2{
  width: 88px;
  left: 8.2pc;
}
.polygon3{
  width: 88px;
  left: 15.5pc;
  bottom: 294pc;
}
.polygon4{
  width: 88px;
  left: 22.8pc;
  bottom: 310pc;
}

.technology1 {
  width: 48px;
}
.technology3{
  width: 119px;
  bottom: 256.5pc;
}
.technology4 {
  width: 127px;
  bottom: 250pc;
}

  }



  @media (max-width: 1060px){
.lastoverallclass{
  position: relative;
  top: 41pc;
}
}

@media (max-width: 685px){
  .lastoverallclass{
    position: relative;
    top: 64pc;
  }
  }
  /* @media (max-width: 1063px){
    .lastsection{
      height: 790px; 
      width: 100%;
    }

  } */
  @media (max-width: 1063px) {
    .Muazbox {
      flex-direction: column;
      align-items: center;
    }
    .lastsection {
      height: auto;
    }
    .Muazbox{
      gap: 122px;
    }
  }

  @media (max-width: 989px){
    .lastsection {
      height: 137pc;
  }
  }

  @media (max-width: 523px){
    .lastsection {
      height: 144pc;
  }
  }
  @media (max-width: 555px){
    .lastsection {
      height: 150pc;
  }
  .backbackgrow {
    position: relative;
    z-index: 1;
    bottom: 13pc;
}
  }

  
  @media (max-width: 685px){
    .lastsection {
      height: 144pc;
  }
  }
  @media (max-width:570px){
    #jam{
    font-size: 26px;
    font-weight: 800;
    left: 3pc;
    }
    .Muazbox{
      left: 0pc;
    }
    .lastsection {
      height: 150pc;
  }

  }
  @media (max-width: 811px){
    .Muazbox{
      left: 0pc;
    }
  }

  @media (max-width: 1113px){
    .laststyleimage{
      left: 33pc;
    }
  }

  @media (max-width: 930px){
  .laststyleimage {
    left: 21pc;
}
  }
  
  @media (max-width: 803px){
    .laststyleimage {
      left: 13pc;
  }
    }

@media (max-width: 690px){
.laststyleimage {
  left: 10pc;
  bottom: 8pc;
}
}
@media (max-width: 685px){
  .laststyleimage {
    left: 10pc;
    bottom: 22pc;
  }
  }



  @media (max-width: 485px){
  .laststyleimage {
    left: 6pc;
    bottom: 13pc;
} 
#jam {
  font-size: 21px;
  font-weight: 800;
  left: 2pc;
}

}

.harami{
  position: relative; 
  z-index: 1; 
  bottom: 31pc;
}

@media (max-width:906px){
  .harami{
    position: relative;
    z-index: 1;
    bottom: 5pc;
}
.backbackgrow{
  bottom: 64pc;
}
}

@media (max-width:650px){
  .harami{
    position: relative;
    z-index: 1;
    bottom: -15pc;
}
.backbackgrow{
  bottom: 26pc;
}
}

@media (max-width:1147px){
  .leftarrow{
    width: 18.5pc;
  }
  .rightarrow{
    left: 29pc;
    width: 23pc;
  }
  .fourthrectanglepolygon{
    width: 63pc;
    height: 122px;
  }
  .fourthtext{
    gap: 31px;
  }
  .backimage{
    height: 155px;
    width: 1121px;
    left: 1pc;
  }
}

@media (max-width:1069px){
.backimage{
  left: 2pc;
}

}
@media (max-width:1051px){
  .backimage{
    left: 2.9pc;
  }
  
  }



  @media (max-width:1226px){
    .fourthrectanglepolygon{
      left: 3.5pc;

    }
  .rightarrow{
    left: 31pc;
  }
  }










  @media (max-width:1032px){
    .backimage{
      left: 2.9pc;
      height: 155px;
    }
    .fourthrectanglepolygon{
      height: 115px;
      clip-path: polygon(29% 0, 62.5% 0, 70% 100%, 22% 100%);
    }
    .rightarrow{
      left: 27pc;
    }
    }


@media (max-width:991px){
.backimage{
  height: 155px;
  width: 1012px;
        left: 4pc;
      }
      .fourthrectanglepolygon {
        width: 65pc;
        height: 139px;
    }
}

@media (max-width:955px){
.fourthrectanglepolygon {
  width: 60pc;
  height: 127px;
}
.rightarrow {
  left: 25pc;
}
}

@media (max-width:1009px){
 .backimage{
  bottom: 13.5pc;
 }

 
  }
  
  @media (max-width:996px){
   
   .backimage{
    height: 163px;
   }
}

 
@media (max-width:957px){
   
  .fourthrectanglepolygon{
    width: 63pc;
    height: 132px;
    bottom: 366px;
    clip-path:polygon(30% 0, 61.5% 0, 70% 100%, 23% 100%);
    }
.fourthtext {
    gap: 21px;
}
}

@media (max-width:987px){
   
  .fourthrectanglepolygon{
    clip-path: polygon(29% 0, 61.5% 0, 69% 100%, 23% 100%);
   height: 129px;
   bottom: 363px;
   left: 3.2pc;
}

.fourthtext {
   gap: 28px;
}
}

@media (max-width:936px){
  .fourthtext {
    gap: 26px;
}


.fourthrectanglepolygon {
    left: 2pc;
}

}

@media (max-width:901px){
  .fourthtext {   
    padding: 29px 2px;
       gap: 11px;
  
  }
  .backimage{
    left: 1pc;
  }
  
      .fourthrectanglepolygon {
          left: 1pc;
          width: 56pc;
      }
  
      .leftarrow {
          width: 14.5pc;
      }
      .rightarrow {
        left: 24pc;
        width: 17pc;
    }

}

@media (max-width:850px){
 
  .backimage{
    left: 2.5pc;
  }
  .rightarrow{
    left: 23pc;
  }
  .leftarrow {
    width: 15.5pc;
}

}

@media (max-width:814px){
.fourthtext img {
  width: 90px;
  height: 60px;
}
.fourthrectanglepolygon{
  height: 115px;
  width: 53pc;
}
.leftarrow {
  width: 13.5pc;
}
}

@media (max-width:758px){
  .fourthrectanglepolygon {
    height: 124px;
    width: 49pc;
}
.rightarrow {
  left: 21pc;
}
  }

  @media (max-width:709px){

    .rightarrow {
      left: 19pc;
      width: 14pc;
  }
  .fourthtext img {
      width: 84px;
      height: 49px;
  }
  .fourthtext {
      padding: 27px 2px;
      gap: 1px;
  }
  .fourthrectanglepolygon {
      height: 114px;
      width: 45pc;
      left: 2pc;
  }
  }

  @media (max-width:637px){
    .backimage {
      left: 3.5pc;
  }
  .fourthrectanglepolygon {
      height: 110px;
      width: 38pc;
      left: 5pc;
  }
  .fourthtext img {
      width: 64px;
      height: 49px;
  }

  }