@import url('https://fonts.googleapis.com/css2?family=Istok+Web&family=Roboto+Slab:wght@100;300;500;900&display=swap');
*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
} 
  /* Presentational Styles */
  body {
    display: grid;
    font-size: 20px;
    height: 100vh;
    place-items: center;
  }
.section{
    width: 100%;
   
}
.container{
    width: 100%;
    position: fixed;
    background: -webkit-linear-gradient(45deg, rgb(0, 255, 197), rgb(241, 74, 212));
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    padding: 40px;
}
a {
    color:rgb(11, 9, 9);
    text-decoration: none;
    font-family: 'Istok Web', sans-serif;

  }
  
  a {
    background:
      linear-gradient(
        to right,
        rgb(255, 163, 4),
        rgb(245, 102, 0)
      ),
      linear-gradient(
        to right,
        rgb(20, 19, 19),
        rgba(255, 0, 180, 1),
        rgba(0, 100, 200, 1)
    );
    background-size: 100% 3px, 0 3px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
  }
  
  a:hover {
    background-size: 0 3px, 100% 3px;
  }
  
.section1{
    width: 100%;
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url("https://kartinkin.net/uploads/posts/2021-01/1610809670_14-p-fon-s-dengami-dlya-prezentatsii-30.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.container1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 50px 60px;
}
.wrap{
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.text{
    font-size: 20px;
    margin: 20px 25px;
    font-family: 'Istok Web', sans-serif;
    text-shadow:  5px -3px 5px rgba(16,  56,  221, 0.58);

}
.title{
    font-size: 60px;
    margin: 20px 25px;
    font-family: 'Istok Web', sans-serif;
    text-shadow: -10px -25px 3px rgba(16,  56,  221, 0.29);

}
.section2{
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 80px;
}
.container2{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.title1{
    font-size: 30px;
    text-align: center;
    margin: 60px 37px;
    padding-top: 200px;
    font-family: 'Istok Web', sans-serif;
    text-shadow: -3px 9px 3px rgba(210,  16,  221, 0.32);
}
.text1{
    font-size: 25px;
    text-align: center;
    padding: 18px 35px;
    font-family: 'Istok Web', sans-serif;
    font-family: 'Istok Web', sans-serif;
    text-shadow: -3px 9px 3px rgba(210,  16,  221, 0.32);

}
.section3{
    width: 100%;
    background: -webkit-linear-gradient(90deg, #d2dafb,#6ae8ff,#73eaa5);     
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 100px;
    padding-top: 144px;
}
.container4{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
   
}
.box{
    width:32% ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px 35px;
    background: #000000cc;
    
}
.title2{
    font-size: 30px;
    margin: 80px 25px;
    font-family: 'Istok Web', sans-serif;
    background: #000000cc;
    padding: 15px;
    color: azure;
    text-shadow: -3px 9px 3px rgba(210,  16,  221, 0.32);
}
.title3{
    font-size: 20px;
    margin: 20px ;
    font-family: 'Istok Web', sans-serif;
    color: azure;
    text-shadow: -3px 9px 3px rgba(210,  16,  221, 0.32);
}
.text2{
    font-size: 18px;
    margin: 15px ;
    font-family: 'Istok Web', sans-serif;
    color: azure;
    text-shadow: -3px 9px 3px rgba(210,  16,  221, 0.32);
}
.img1{
    width: 250px;
    height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 25px;
    /*-webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;*/
}
  /*.img1:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); 
  }*/
  .img1 {
    display: inline-block; 
    overflow: hidden; 
   }
   .img1{
    transition: 1s; 
    display: block; 
   }
   .img1:hover {
    transform: scale(1.2);
   }
.section4{
    width: 100%;
    padding-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background: -webkit-linear-gradient(45deg, rgb(27, 253, 66), rgb(14, 234, 216));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.container5{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.wrap1{
    width: 50%;
    padding: 50px;
}
.wrap2{
    width: 50%; 
    padding: 50px;
    padding-top: 154px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title4{
    font-size: 30px;
    margin: 80px 76px;
    margin-top: 176px;
    font-family: 'Istok Web', sans-serif;
    text-shadow: -3px 9px 3px rgba(221,  99,  16, 0.32);

}
.text3{
    font-size: 20px;
    margin: 20px ;
    margin-left: 70px;
    font-family: 'Istok Web', sans-serif;
    text-shadow: -3px 9px 3px rgba(221,  99,  16, 0.32);
}
.button{
    color: #d71717;
    border: 2px solid rgb(216, 2, 134);
    border-radius: 0px;
    padding: 18px 36px;
    display: inline-block;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #ff08a0;
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    margin-left: 71px;
      }

button:hover {
    box-shadow: inset 400px 50px 0 0 #ff12a4;
    
}

.text4{
    font-size: 20px;
    margin: 20px ;
    color: #1c1e24;
    font-family: 'Istok Web', sans-serif;
    text-shadow: -3px 9px 3px rgba(221,  99,  16, 0.32);

}
.link1{
    text-decoration: none;
    font-family: 'Istok Web', sans-serif;

}
.img2{
    width: 500px;
    height: 400px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 120px;
    margin-top: -140px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}
 .img2:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg); 
}
.section5{
    width: 100%;
    background: url("https://catherineasquithgallery.com/uploads/posts/2023-02/1676578241_catherineasquithgallery-com-p-fon-bledno-zelenii-1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.container6{
    width: 1200px;
    padding: 100px 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.img3{
    width: 100px;
    height: 130px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.title5{
    font-size: 24px;
    margin: 20px 15px;
    font-family: 'Istok Web', sans-serif;
    text-shadow: -3px -7px 3px rgba(16,  90,  221, 0.32);;

}
.text5{
    font-size: 18px;
    margin: 20px 30px ;
    font-family: 'Istok Web', sans-serif;
    text-shadow: -3px -7px 3px rgba(16,  90,  221, 0.32);;

}
.title6{
    text-align: center;
    font-size: 30px;
    padding-top:70px ;
    font-family: 'Istok Web', sans-serif;
    text-shadow:-3px -7px 3px rgba(16,  90,  221, 0.32);;

}

.section6{
    width: 100%;
    height: 350px;
    background:-webkit-linear-gradient(135deg, rgb(232, 211, 31), rgb(76, 243, 0));
    padding-top: 120px;
}
.container7{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.img4{
    margin: 30px;
    width: 80px;
    height: 80px;
    border-radius: 20%;
}
.title7{
    background: azure;
    font-size: 25px;
    padding: 20px;
    font-weight: 900;
}
.link4{
    text-decoration: none;
    color: #1c1e24;
    font-family: 'Istok Web', sans-serif;

}
.img4{
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.container_slider_css{margin:50px auto;width:650px;height:450px;overflow:hidden;position:relative}
.photo_slider_css{position:absolute;animation:round 16s infinite;opacity:0;width:100%}
@keyframes round {
25%{opacity:1}
40%{opacity:0}
}
img:nth-child(1){animation-delay:12s}
img:nth-child(2){animation-delay:8s}
img:nth-child(3){animation-delay:4s}
img:nth-child(4){animation-delay:0}
@media(min-width:0px) and (max-width:320px) {
.container_slider_css{width:80%;height:190px}
}
@media(min-width:321px) and (max-width:480px) {
.container_slider_css{width:80%;height:190px}
}
@media (max-width:1200px) {
    .text1{
        font-size: 19px;
    }
    .container4{
        flex-direction: column;
    }
    .box{
        width: 90%;
    }
    .container5{
        flex-direction: column;
    }
    .wrap1{
        width: 90%;
    }
    .container6{
        width: 90%;
    }
}