@import url("https://fonts.googleapis.com/css2?family=Chewy&family=Modak&family=Secular+One&display=swap");

/* font-family: 'Chewy', cursive;
font-family: 'Modak', cursive;
font-family: 'Secular One', sans-serif; */

*,
::after,
::before {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  width: 100%;
  display: block;
}

body {
  background: #fffaed;
}

/* start header */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 105px;
  width: 100%;
  background-color: #63f03d;
  padding: 0 100px;
  position: relative;
}
.nav{
    display: flex;
    gap: 1.875rem;
}
.logo{
    display: flex;
    align-items: center;

}
.garbage__logo{
    width: 40px;
    height: 40px;
}
.wawes {
  width: 100%;
  height: 400px;
  position: absolute;
  left: 0px;
  top: 85px;
  z-index: 10;
}
.wawes-in {
  height: 100%;
}

.links {
  display: flex;
  align-items: center;
  gap: 3.125rem;
}
.link {
  font-family: "Secular One";
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.188rem;
  color: #167642;
  transition: opacity 0.5s ease-in-out;
}
.link:hover{
  opacity: 0.5;
}

/* header end */

/* start main */

.garbage {
  display: flex;
  justify-content: center;
  /* flex-wrap: wrap; */
  height: 100%;
  width: 100%;
  gap: 3.75rem;
  padding-top: 160px;
}
.garbage__left {
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
  padding: 30px 50px 50px 50px;
}
.title {
  width: 532px;
  font-family: "Chewy";
  font-style: normal;
  font-weight: 400;
  font-size: 3.875rem;
  line-height: 5.063rem;
  text-align: left;
  letter-spacing: 0.1em;
  color: #000000;
}
.title__midlle {
  font-family: "Secular One";
  font-style: normal;
  font-weight: 400;
  font-size: 2.625rem;
  line-height: 3.813rem;
  text-align: center;
  color: #000000;
}
.paragraf {
  width: 532px;
  font-family: "Secular One";
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 3.125rem;
  letter-spacing: 0.05em;
  color: #000000;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
  width: 220px;
  height: 73px;
  background: #63f03d;
  border: 4px solid #167642;
  border-radius: 10px;
  font-family: 'Secular One';
font-style: normal;
font-weight: 400;
font-size: 1.125rem;
line-height: 2.5rem;
text-align: center;
color: #156904;
transition: background-color 0.5s ease-in-out;
}
.btn:hover {
   background-color: rgba(99, 240, 61, 0.7);
}
.garbage__right > img {
  max-width: 650px;
  max-height: 650px;
  border-radius: 100px;
}
.green{
    color: #156904;
}

/* end main  */

/* start animation */


.animation {
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    margin-top: 40px;
}
.variebles{
    --play: running;
    --direction: normal;
    --duration: 914.375s;
    --delay: 0s;
    --iteration-count: infinite;
}
.wraper{
    background-color: #167642;
    flex: 0 0 auto;
    min-width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
    animation-play-state: var(--play);
    animation-delay: var(--delay);
}
.animation span {
    display: inline-block;
    animation: scroll 40s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(100);
    }
    
    100% {
        transform: translateX(-100%);
    }
}

.animation__left {
    padding: 15px 0;
    font-family: "Chewy";
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.625rem;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin-right: 20px;
    height: 55px;
}
.cikle {
   position: absolute;
   top: 23px;
   left: -18px;
    width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
}

/* start garbage-university */

.garbage-university {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 9.375rem;
  align-items: center;
  margin-bottom: 100px;
}

.garbage-university__info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8.875rem;
  flex-wrap: wrap;
}
.garbage-university__foto {
  max-width: 510px;
}
.garbage-university__paragraf {
  display: flex;
  flex-direction: column;
  gap: 1.563rem;
}

/* end garbage-university */

/* start creativity */

.creativity {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  margin-bottom: 80px;
}

.creativity__section {
  display: flex;
  justify-content: center;
  gap: 3.75rem;
  flex-wrap: wrap;
}
.creativity__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 600px;
  gap: 1.25rem;
}
.info__title {
  font-family: "Secular One";
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.938rem;
  text-align: center;
  color: #6c0092;
}
.creativity__paragraf {
  text-align: center;
  width: 600px;
}
.order {
  order: 2 1;
}
.order__1 {
  order: 2;
}
.size__garbage {
  width: 680px;
}
.size__track {
  width: 680px;
}
.size__tractor {
  width: 680px;
}

/* end creativity */

/* start about */

.about {
  height: 900px;
  width: 100%;
  background-image: url(./img/bg-about.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding-top: 90px;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
.contant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.125rem;
}
.foto__about {
  width: 600px;
  height: 600px;
  background-image: url(./img/aboutus.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 100px;
}
.contant__info {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
/* end about */

/* start footer */
.footer {
  height: 500px;
  width: 100%;
  background-color: #63f03d;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-image: url(./img/wawes3.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover; */
}
.footer__logo {
    display: flex;
  width: 121px;
  height: 47px;
}
.footer__wawes {
  /* width: 100%;
  position: absolute; */
  
}
.container{
    padding: 180px 0 130px 150px;
    display: flex; 
    gap: 6.875rem;
    z-index: 10;
}
.df{
    flex-direction: column;
    align-items: start;
    gap: 1.25rem;
}
.wawes-footer{
    height: 100%;
    width: 100%;
    position: absolute;
}
.author{
    z-index: 10;
    display: flex; 
    flex-direction: column;
    align-items: center;
    gap: 0.438rem;
    padding: 0 130px 0 0;
}

.website{
font-family: 'Secular One';
font-style: normal;
font-weight: 400;
font-size: 1.5rem;
line-height: 2.188rem;
color: rgba(7, 122, 46, 0.6);
}
.footer__author{
    font-family: 'Secular One';
font-style: normal;
font-weight: 400;
font-size: 1.125rem;
line-height: 1.625rem;
color: rgba(7, 122, 46, 0.5);
transition: color 0.5s ease;
}
.footer__author:hover{
    color: rgba(3, 10, 5, 0.5);
}

.link_twiter{
    width: 55px;
    height: 55px;
}
.links__logo{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.button{
    background-color: #63f03d;
    border: none;
    cursor: pointer;
    font-family: 'Secular One';
font-style: normal;
font-weight: 400;
font-size: 1.5rem;
line-height: 2.188rem;
color: #167642;
}
.garboard{
    background-color: #63f03d;
    border: none;
    cursor: pointer;
    font-family: 'Secular One';
font-style: normal;
font-weight: 400;
font-size: 1.5rem;
line-height: 2.188rem;
color: #167642;
}
section {
    display: flex;
  }
  .for-section {
    display: flex;
    
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    
  }
  .wrupt{
    display: flex;
    flex-direction: column;
  }
  .wrup{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .board{
    padding: 70px 0;
  }
 .art{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 360px;
    height: 500px;
    position: relative;
    transition: transform 0.5s;
    font-family: 'Secular One';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 2.5rem; 
    color: #ffffff;
  }
  .art:hover {
    transform: translateY(-24px);
  }
  .art:hover::before {
    height: 6px;
    width: 360px;
    background: linear-gradient(
      26.57deg,
      #ffc593 0%,
      #bc7198 43.29%,
      #5a77ff 83.33%
    );
    content: "";
    transform: translateY(351px);
  }
  .article-div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 40px 20px;
    width: 360px;
    height: 350px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.0001) 0.27%,
      rgba(0, 0, 0, 0.661222) 100%
    );
  }
  .one-foto{
    background-image: url(./img/slider1.jpg);
    background-size: cover;
  }
  .two-foto{
    background-image: url(./img/slider2.jpg);
    background-size: cover;
  }
  .tree-foto{
    background-image: url(./img/slider3.jpg);
    background-size: cover;
  }
  .for-foto{
    background-image: url(./img/slider5.jpg);
    background-size: cover;
  }

  /* 2.1 */
  .on-foto{
    background-image: url(./img/slider2.1.jpg);
    background-size: cover;
  }
  .tw-foto{
    background-image: url(./img/slider2.2.jpg);
    background-size: cover;
  }
  .tr-foto{
    background-image: url(./img/slider2.3.jpg);
    background-size: cover;
  }
  .fo-foto{
    background-image: url(./img/slider2.4.jpg);
    background-size: cover;
  }

/* 3.1 */
  .ones-foto{
    background-image: url(./img/slider3.1.jpg);
    background-size: cover;
  }
  .twow-foto{
    background-image: url(./img/slider3.2.jpg);
    background-size: cover;
  }
  .treer-foto{
    background-image: url(./img/slider3.3.jpg);
    background-size: cover;
  }
  .foro-foto{
    background-image: url(./img/slider3.4.jpg);
    background-position: center center;
    background-size: cover;
  }
  /* 4.1 */
.odin-foto{
    background-image: url(./img/slider4.1.jpg);
    background-position: center center;
    background-size: cover;
}
.dva-foto{
    background-image: url(./img/slider4.2.jpg);
    background-size: cover;
}
.tri-foto{
    background-image: url(./img/slider4.3.jpg);
    background-position: center center;
    background-size: cover;
}
.chotiri-foto{
    background-image: url(./img/slider4.4.jpg);
    background-position: center center;
    background-size: cover;
}
  .author-sec{
    font-family: 'Secular One';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 23px;
border-bottom: #19e706 solid 1px;
padding-bottom: 5px;

  }
  .author-sec + .linkt {
   
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.linkt{
    color: white;
}
.linkt:visited {
    color: #ffffff;
  }
.img{
    width: 50px;
    height: 50px;
}
.pading{
    padding-bottom: 50px;
}

@media(max-width: 1325px){
    .garbage__right{
        display: flex;
        align-items: center;
    }
    /* .order{
        order: 1 2;
    }
    .order__1{
        order: 0;
    } */
    .size__garbage{
        max-width: 570px;
    }
    .size__track{
        max-width: 570px;
    }
    .size__tractor{
        max-width: 570px;
    }
}
@media(max-width: 1275px){
     .order{
        order: 1 2;
    }
    .order__1{
        order: 0;
    }
}
@media(max-width: 1024px){
    .foto__about {
        width: 400px;
        height: 500px;
      }
      .dfr{
        width: 100%;
      }
      .contant{display: flex;
        flex-direction: column;
      }
      .contant__info{
        justify-content: center;
      }
    .header{
        padding: 0 25px;
    }
    .garbage__right{
        display: flex;
        align-items: center;
    }
    .garbage-university__foto{
        max-width: 300px;
    }
    .garbage-university__info{
        gap: 5px;
    }
    .order{
        order: 1 2;
    }
    .order__1{
        order: 0;
    }
    .contant{
        flex-wrap: wrap;
        height: 100%;
    }
    .contant__foto{
        /* width: 400px;
        height: 400px; */
        display: none;
    }
    .contant__info{
        max-width: 400px;
        height: 100%;
    }
}
@media(max-width: 865px){
    .foto__about{
        display: none;
    }
}
@media(max-width: 768px){
    .dfr{
        display: flex;
        
       width: 100%;
    }
    .header{
        padding: 0 10px;
    }
    .garbage{
        gap: 0;
    }
    .garbage__left{
        padding: 0 20px;
    }
    .garbage-university{
        gap: 40px;
    }

    .container{
        padding-left: 60px;
        gap: 40px;
    }
    .size__garbage{
        max-width: 420px;
    }
    .size__track{
        max-width: 420px;
    }
    .size__tractor{
        max-width: 420px;
    }
    .author{
        padding: 0 60px 0 0;
    }
}

@media(max-width:580px){
    .mini{
        text-align: center;
    }
    .garbage__left{
        gap: 1.7rem;
    }
    .title{
        font-size: 2.8rem;
        width: 100%;
    }
    .paragraf{
        font-size: 1.4rem;
    }
.garbage__right{
    display: none;
}
.garbage-university__paragraf{
    padding: 0 10px;
    
}
.paragraf{
    width: 100%;
}
.creativity__paragraf{
    width: 100%;
    padding: 0 10px;
}
.container{
    padding-left: 30px;
}
.author{
    padding: 0 30px 0 0;
}

}
@media(max-width:425px){
    
    .size__garbage{
        max-width: 325px;
    }
    .size__track{
        max-width: 325px;
    }
    .size__tractor{
        max-width: 325px;
    }

    .contant__info{
        padding: 0 10px;
        justify-content: center;

    }
    .nav{
        display: none;
    }
    .footer{
        flex-direction: column;
        justify-content: start;
    }
    .nivigat{
        display: flex;
        flex-direction: column;
    }
    .container{
        padding: 20px 0 40px 10px;
        display: flex;
        flex-direction: column;
    }
    .links__logo{
        justify-content: center;
        align-items: center;
    }
    .author{
        padding: 0;
    }
    .garbage{
        padding-top: 20px;
    }
    .wawes{
        display: none;
    }
    .wawes-in{
        display: none;
    }
    .article-div {
        width: 355px;
        height: 375px;
      }
      .art:hover {
        transform: translateY(-24px);
        width: 355px;
      }
    .art:hover::before {
        transform: translateY(370px);
        width: 355px;
      }

    .one-foto {
        width: 355px;
        height: 375px;
      }
      .two-foto {
        width: 355px;
        height: 375px;
      }
      .tree-foto {
        width: 355px;
        height: 375px;
      }
      .for-foto {
        width: 355px;
        height: 375px;
      }
       /* 2.1 */
  .on-foto{
    width: 355px;
        height: 375px;
  }
  .tw-foto{
    width: 355px;
        height: 375px;
  }
  .tr-foto{
    width: 355px;
    height: 375px;
  }
  .fo-foto{
    width: 355px;
    height: 375px;
  }

/* 3.1 */
  .ones-foto{
    width: 355px;
        height: 375px;
  }
  .twow-foto{
    width: 355px;
        height: 375px;
  }
  .treer-foto{
    width: 355px;
        height: 375px;
  }
  .foro-foto{
    width: 355px;
        height: 375px;
  }
  /* 4.1 */
.odin-foto{
    width: 355px;
    height: 375px;
}
.dva-foto{
    width: 355px;
        height: 375px;
}
.tri-foto{
    width: 355px;
        height: 375px;
}
.chotiri-foto{
    width: 355px;
        height: 375px;
}
}