html {
   scroll-behavior: smooth;
}
:root {
    --yellow :rgb(255, 175, 3);
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    
}
header {
    width: 100%;
    min-height: 2rem;
    position: relative;
    z-index: 200;

}

#logo {
    font-size: 2.75rem;
}

.main-logo-wrapper {
    display: flex;
    flex-direction:row-reverse;
}
.main-logo {
    position: fixed;
    font-size: 2rem;
    color: var(--yellow);
    z-index: 150;
    display: flex;
    margin: 1rem;

    
}

section {
    width: 100%;
    margin: 0;
    display: flex;
}

i {
    font-size: 2rem;
}

nav {
    display: flex;
    padding: auto 2rem;
    min-height: 3.5rem;
    background: black;
    position : sticky;
 top : 0;
 z-index: 100;

}

ul  {
    display: flex;
    list-style-type: none;
 
    padding: 0;
    overflow: hidden;
}

li {
   flex-direction: colunm;
   padding: .5rem 1rem;
}

li > a {
    color: white;
    text-decoration: none;
    font-size: 1.125rem;
    transition: .5s;
}

li > a:hover { 
    text-shadow: -1px -1px 8px rgba(255, 255, 255, 1);
}
li > a:active { 
    text-shadow: -1px -1px 18px rgba(255, 255, 255, 1);
}

li > a:hover {
    opacity: 1;
}

p {
    margin: 1rem 1rem 0 1rem;
}

menu {
    display: flex;
    flex-direction: row;
    margin: 0;
    min-height: 2rem;
}

menu > #logo {
    display: flex;
    margin: auto auto auto 0;
}

.info {
    display: flex;
}

#promo > .info {
    flex: 1;
}

menu > .info {
    margin: .5rem 1rem;
}

.info > i, .info > div {
    display: flex;
    flex-direction: column;
    margin: auto .5rem;
}
.info > div > * {
    flex-direction: row;
}

#promo {
    display: flex;
}

img {
    margin: 2rem;
    max-width: 50%;
    
}

section > article > img {
    margin-top: 0;
}

.offer {
   
}

.offer {
    display: flex;
    flex-direction: row-reverse;
    margin: 1rem 0;
    background:rgb(214, 214, 214)
}
.offer:nth-child(2n+1) {
    flex-direction: row;
}

.offer > .image > .title {
    background: black;
    color: white;
    padding-bottom: 0.75rem;
}


.offer > .image > .description {
    background: rgb(255, 175, 3);
    color: black;
    padding-bottom: 1rem;
}

.offer > .image > img {
    min-width: 400px;
    height: 300px;
    margin: 0;
} 

.offer > .image > * {
    display: flex;
    flex-direction: row;
}

.offer > .offer-desc {
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offer > .offer-desc > ul {
    flex-direction: column;
    margin: 2rem 1rem 1rem 5rem;
    font-size: 1rem;
}

.offer > .offer-desc > ul > li {
    margin-bottom: 1rem;
    background: url(../icons/screw.svg) no-repeat left top;
    padding: 0px 0 3px 24px;
}

.offer > .offer-desc > ul > span {
    margin-bottom: 1rem;
    margin-bottom: 1rem;
    padding: 0px 0 3px 24px;
    margin-top: -15px;
    padding: 0px 0 3px 24px;
    font-size: 1rem;
}


#contact > article > div > div, 
#contact > article > div > div > i,
#contact > div > div > span {
    display: flex;
    flex-direction: row;
    margin: .5rem .5rem 0 0;
    padding: .25rem .5rem;
    align-items: center;
}

#contact > article > div{
    display: flex;
    flex-direction: column;
    margin: 1rem .5rem;
   
}

#contact > article > .add-info {
    align-items: center;
}

.el {
  width: 20vh;
  height: .5rem;
  margin-top: 1rem; 
  max-height: 0.5rem;
  align-self: center;
} 

.accent {
    background: var(--yellow)
}

.gray {
    background: #444444;
}


@media only screen and (max-width: 600px) {
    .main-logo {
        display: none;
    }
    #promo {
      flex-direction: column;
    }
    #promo > .info {
        padding: 3rem;
    }
    menu > .info {
        display: none;
    }

    nav {
        display: none;
    }

   

    .offer {
        flex-direction: column !important;
    }

    .offer > .image > img {
        max-width: 100%;
        width: 100%;
    }

    #offer.section > article {
       margin: 0;
    }
    #contact {
        display: flex;
        flex-direction: column;
    }

  }

  @media only screen and (max-width: 900px) {
  #about {
        display: flex;
        flex-direction: column;
    }
    #about > img {
        max-width: 80%;
    }

  }