@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant&display=swap');

:root {
  --panelBgColor: #EFF2FB;
  --textcolor: #6a6a92;
  --textBlackColor: #333;
  --textPrimaryColor: #2323ce;
  --textSubPrimaryColor: #1285f5;
  --whiteColor: #fff;
  --main-bg-color: brown;
  --font-Assistant: 'Assistant', sans-serif;
  --font-roboto-black: 'Roboto', sans-serif;
  --font-roboto-regular: 'Roboto', sans-serif;
}

body{
  margin: 0;
}
* {
  box-sizing: border-box;
  font-family: var(--font-Assistant);
  line-height: 1.5;
  /* margin: 0; */
}

.bg-image {
  position: absolute;
  bottom: -88%;
}

.container {
  /* display: flex;
  flex-direction: column; */
  /* align-items: center;
  justify-content: center; */
  width: 100%;
  height: auto;
  background-color: #242628;
  color: whitesmoke;
  padding: 3vw 5vw;
  /* background-image: url(./assets/world.svg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 70px;
  background-origin: padding-box; */
}
.logo{
  width: 20%;
}
.mainlogo{
  max-width: 80%;
}
.menu{
  border: 0.2vw solid var(--whiteColor);
  padding: 1.25vw;
  border-radius: 0.54vw;
  display: flex;
  line-height: 1;
  justify-content: center;
  height: 4vw;
  align-items: center;
}
.menu a{
  text-decoration: none;
  font-size: 1.5vw;
  line-height: 1;
  color: var(--panelBgColor);
}
.header{
  display: flex;
  justify-content: space-between;
 
}
.aboutmain{
 margin-top: 20px;
 margin-bottom: 20px;
}
.aboutmain1{
  background-color: black;
  color: white; 
  padding: 3vw 5vw;

}
.aboutmain h3{
  text-align: left;
  font-size: 3vw;
  margin-bottom: 0;
 
  

}
.aboutmain h2{
  text-align: center;
  font-size: 3.5vw;
  padding: 1vw;
  

}
.aboutmain p{
  text-align: left;
  font-size: 1.5vw;
  padding-top: 1vw;
  margin-top: 0;
  margin-bottom: 2.5vw;
}
.aboutmain li{
  text-align: left;
  font-size: 1.5vw;
  padding-top: 1vw;

}
.aboutmain a{
  text-align: left;
  font-size: 1.5vw;
  padding-top: 1vw;
  color: white;

}
.aboutmain h4{
  text-align: left;
  font-size: 1.5vw;
  margin-bottom: 0;

}
.about h3{
  text-align: center;
  font-size: 2.5vw;
  font-weight: bold;
  padding: 1.5vw;
  padding-bottom: 0;
}
.about a{
  text-align: left;
  font-size: 1.5vw;
  padding-top: 1vw;
  color: white;

}
.about p{
  text-align: justify;
  font-size: 1.5vw;
  line-height: 1.5;
}


@media screen and (max-width: 1024px) {
    .container {
        background-size: contain;
        background-position-y: center;
    }
}

@media screen and (max-width: 600px) {

.container{
    background-size: contain;
    background-position-y: center;
    }
  pre {
    font-size: 0.8rem;
    padding: 8px 12px;
    width: 100%;
  }

  body {
    width: 100vw;
  }

  .header img {
    margin-left: 0;
  }

  .installation-steps {
    width: 100%;
    box-sizing: border-box;
  }

  h1 {
    font-size: 1.6rem;
  }

  ol {
    padding-left: 20px;
  }

  li {
    margin-bottom: 5px;
  }
}