@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Archivo:ital,wght@0,100..900;1,100..900&family=Audiowide&family=Comfortaa:wght@300..700&family=Manufacturing+Consent&family=Michroma&family=Orbitron:wght@400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
  font-family: "Michroma", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 14px;
}
  html{
    scroll-behavior: smooth;
  }
.archinew {
    font-family: "Michroma", sans-serif;
    background-image: url("lasipustyniabl8.png");background-position:center left;background-attachment: fixed;
    background-size:cover;
    padding:0;
    margin:0;
    overflow-x:hidden;
  }
  .hamburger {
  transform-origin: center center;
  border-radius: 50%;
  position: fixed;
  border: 5px solid rgb(93, 0, 255);
  top: 10px;
  left: 10px;
  background-color: rgb(2, 187, 197);
  width: 50px;
  height: 50px;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-direction: column;
  z-index: 12;
  cursor: pointer;
  
}
  .cross-line {
  width: 25px;
  height: 3px;
  background-color: white;
  z-index: 12;
}
  /* Optional: Style the caret down icon */
  .fa-caret-down {
    float: right;
    padding-right:20px;
  }
  p{
    width:100%;
  }
  .contact-background{
    background-image:url("indfg.png");background-position: center;background-attachment:fixed;
    background-size:cover;
  }
/*responsible mobile part*/
@media screen and (max-width: 600px) {
  .sidebar {
    height: fit-content;
    width: 100%;
    position: absolute;
    left:0;
    top:0;
    z-index: 1;
    background: linear-gradient(45deg, green , #0066ff);
    transition: 1s;
    
  }
  .sidebar a{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding: 6px 16px 6px 16px;
    text-decoration: none;
    margin:0;
    font-size: 14px;
    color: yellow;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    transition: 0.2s;
  }
  .dropdown-btn {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding: 6px 16px 6px 16px;
    text-decoration: none;
    margin:0;
    font-size: 14px;
    color: yellow;
    border: none;
    background: none;
    width:100%;
    text-align: center;
    cursor: pointer;
    outline: none; 
    transition: 0.2s;
  }
  .dropdown-btn .fa-caret-down {
    float: none;
    padding-right: 0;
    transform:rotateZ(180deg);
    font-size:19px;
    
  }
  .dropdown-btn.active .fa-caret-down {
    animation: animate-caret 0.5s ease-in-out both;
  }
  @keyframes animate-caret {
    0% { transform: rotateZ(180deg);}
    100% { transform: rotateZ(0deg);}
  }
  
 
  /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
  .dropdown-container {
    display: none;
    background: linear-gradient(45deg, red , #0066ff);
    padding:0;
    width:100%;
  }
  button{
    font-family: "Michroma", sans-serif;
  }
  .dropdown-container a:hover{
    background-color:yellowgreen;
    color:black;
    transform: none;
  }
 
}