body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol";
  }

  .image1 img {
    margin: 0px auto;
    display: block;
    margin-bottom: 50px;
    margin-top:50px;
    width: 100%;
  }

  .line1 {
    height: 2px;
    background-color: rgb(201, 199, 199);
    margin: 0px auto;
  }

  .line2 {
    height: 2px;
    background-color: rgb(201, 199, 199);
    margin: 50px auto;
    width: 100%;
  }

  .line3{
    height: 2px;
    background-color: rgb(201, 199, 199);
    margin: 50px auto;
    width: 100%;
  }

  .line5{
    background-color: rgb(201, 199, 199);
    height: 98.5%;
    width: 2px;
    margin-top: 50px;
    
  }

  .minicontainer1{
    margin: 0px auto;
  }


  .container1 {
    margin: 0px auto;
    width: 80%;
  }





  .container2 {
    width: 80%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
  }

 /* Left Side Style */

  .container3 {
    margin-top: 50px;
    width: 70%;
    display: flex;
    flex-direction: column;
  }

  .tekst1,
  .tekst2 {
    text-align: justify;
    height: auto;
    align-self: flex-start;
    font-size: 18px;
  }

/* Ride Side style */


.keypoints1 {
  color: #5390ff;
  border-radius: 0 20px 20px 20px;
  height: auto;
  border: 2px solid #5390ff;
  padding: 20px;
}

.keypoints1 ul {
  margin-top: 50px;
  padding: 0;
}

.keypoints1 ul li {
  position: relative;
  text-align: left;
  margin-left: 1.5em;
  font-size: 18px;
  list-style: none; /* Remove default bullet */
  
}

.keypoints1 ul li::before {
  content: "";
  position: absolute;
  left: -1em; /* Adjust position of line */
  top: 0.3em; /* Adjust vertical position */
  width: 0.1em; /* Length of the line */
  background-color: #5390ff; /* Color of the line */
}


#firstk::before{
  height:94%;
}

#secondk::before{
  height:94%;
}

#thirdk::before{
  height:95%;
}


#fourthk::before{
height:93%;
}


.container4{
  width: 25%;
  /* margin-left: 5%; */
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.main1{
display: flex;
flex-direction: row;
gap: 1rem;
margin: 25px 0px;
}

.main2{
display: flex;
flex-direction: row;
gap: 1rem;
text-align: justify;
}

.eighty, .thirty, .three, .fourth {
color: #5390FF;
border-radius: 20px;
border: 2px solid #5390FF;
padding: 5px 10px;
text-align: center;
font-weight: 500;
height: auto;
}

.eighty, .thirty, .three, .fourth{
width: 50%;
}



.txt{
font-size: 40px;
}

.socials{
width: 100%;
gap: 1rem;
display: flex;
flex-direction: row;
}


.icon1, .icon2, .icon3, .icon4{
    border: 2px solid #5390FF;
    border-radius: 15px;
    padding: 10px 20px;
    background-color: #5390FF;
    color: white;
    width:15%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.icon1 img {
    width: 100%; /* Make the image fill the container */
    height: auto; /* Ensure the image height adjusts proportionally */
}

.icon2 img{
  width: 100%; /* Make the image fill the container */
  height: auto; /* Ensure the image height adjusts proportionally */
}

.icon3 img{
  width: 100%; /* Make the image fill the container */
  height: auto; /* Ensure the image height adjusts proportionally */
}

.icon4 img{
  width: 100%; /* Make the image fill the container */
  height: auto; /* Ensure the image height adjusts proportionally */
}

.demo{
  margin-top: 25px;
  background-color: #bcd3fd;
  padding: 20px;
  border-radius: 15px;
}

#email1{
  width: 100%;
  padding: 10px 0px;
  border-radius: 10px;
  background-color: white;
  border-color: white;
}


.button1{
  text-align: center;
  background-color: #5390FF;
  border-radius: 10px;
  padding: 10px 0px;
}



.button1 a{
  text-decoration: none;
  color: white;
  font-size: 16px;
}


/* bottom side */

.container5{
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0px auto;
}

.container6{
  display: flex;
  flex-direction: row;
  gap: 3rem;
}


.blog1, .blog2, .blog3{
  width: 33.3%;   
/*   text-align: justify; */
  
}

.blog1 img, .blog2 img, .blog3 img{
  width: 100%;
  margin-bottom: 20px;
}


.minicontainer104{
  display: flex;
  flex-direction: row;
  width: 80%;
  margin-bottom: 100px;
  align-items: baseline;
}


 .button2, .button3, .button4{
  width: 7.5%;
  background-color: #5390FF;
  margin-bottom: 50px;
  border-radius: 10px;
  padding: 6px;
  text-align:center;
  margin: 0px auto;
}

 .button2 a, .button3 a, .button4 a{
  text-decoration: none;
  color: white;
  font-size:15px;
}

.minicontainer104 .button4{
  position:relative;
  left:30px;
}

.minicontainer104 .button3{
  position:relative;
  left:11px;
}

.minicontainer104 .button2{
  position:relative;
  right:6px;
}

@media (max-width: 1600px) {
  .button2,
  .button3,
  .button4 {
    width: 25% ;
  }
  
  .icon2 img, .icon3 img, .icon4 img{
    width:15px;
    height: auto;
    max-height:100%;
  }
  
  .icon1 img{
    width:9px;
  }
  
/*   .line5{
    height:1671px;
  } */
  
}


/* ------------------------- Responsivness -------------------------------------------- */

 @media screen and (max-width: 1200px){
 
  
   .minicontainer2{
    margin-top:35px;
    padding-bottom:0px;
   }
   
   
  .container5{
    display:flex;
    flex-direction:column;
  }
  
   .container6{
    display:flex;
    flex-direction:column;
     gap:0rem;
  }
   
   .blog1, .blog2, .blog3{
    width:100%;
    text-align:left;
   }
   
  .button2, .button3, .button4{
    margin:0;
   }
   
   .button2, .button3 {
    margin:0;
    margin-bottom:50px;
   }
   
   .container2{
    display:flex;
    flex-direction:column;
   }
   
   .minicontainer1{
    display:none;
   }
   
   .container3, .container4{
    width:100%;
   }
   
   .container3 .tekst1, .tekst2{
    text-align:left;
   }
   
   .keypoints1{
    margin-top:50px;
   }   
}


/* @media screen and (max-width: 900px) and (min-width: 769px){
  
   .minicontainer2{
    margin-top:35px;
    padding-bottom:0px;
   }
   
   
  .container5{
    display:flex;
    flex-direction:column;
  }
  
   .container6{
    display:flex;
    flex-direction:column;
     gap:0rem;
  }
   
   .blog1, .blog2, .blog3{
    width:100%;
    text-align:left;
   }
   
/*    .button2, .button3, .button4{
    width:14%;
   } */
   
/*    .container2{
    display:flex;
    flex-direction:column;
   }
   
   .minicontainer1{
    display:none;
   }
   
   .container3, .container4{
    width:100%;
   }
   
   .container3 .tekst1, .tekst2{
    text-align:left;
   }
   
   .keypoints1{
    margin-top:50px;
   }   
} */ */

/* @media screen and (max-width: 1200px) and (min-width:901px){
  .eighty, .thirty, .three, .fourth{
    width:47%;
  } */
  
/*   .line5{
    height:2200px;
  } */
  
/*      .button2, .button3, .button4{
    width:33%;
   } */

}


@media screen and (max-width: 1480px) and (min-width: 1400px){
  .eighty, .fourth, .thirty, .three{
    width:47%;
    
  }
  
  .demo{
    padding:15px;
  }
  
  .main1, .main2{
    font-size:14px;
  }
  
  .txt{
    font-size:30px;
  }
  
  .share{
    font-size:20px;
  }
  

  #txt123{
    font-size:16px;
  }
  
  #txt456{
    font-size:14px;
  }
  
  #email1{
    padding:2px 0px;
  
  }
  
  #txt111{
    font-size:22px;
  }
}


@media screen and (max-width: 1600px) and (min-width: 1499px){
   .eighty, .fourth, .thirty, .three{
    width:47%;
    
  }
  
  .demo{
    padding:15px;
  }
  
  .main1, .main2{
    font-size:14px;
  }
  
  .txt{
    font-size:30px;
  }
  
  .share{
    font-size:20px;
  }
  

  #txt123{
    font-size:16px;
  }
  
  #txt456{
    font-size:14px;
  }
  
  #email1{
    padding:2px 0px;
  
  }
  
  #txt111{
    font-size:22px;
  }
}