*{
margin: 0;
padding: 0;
}

body{
   background: rgb(5,7,41) url(img/Background.png);
      background-repeat: no-repeat;
      background-size: cover;    
}

.item,.support{
    list-style-type: none;
   }

   

   .wrapper {
     
      display: flex; 
      margin: 0 auto;
      
      width: 90%;    
   } 

.aside-block
{
   background: #0B0B0D;
   border-radius: 27px; 
   box-sizing: border-box;
   color: #fff;
   font-family: roboto, Arial, Helvetica, sans-serif;
   src: url('fonts/Roboto-Regular.ttf') format("truetype");   
   letter-spacing: 7px;
   /* padding: 70 50 100 50; */
   text-align: center;
   text-transform: uppercase;    
   width: 20%;
   
}


.logo{   
   background: url(img/logo.svg);
   background-repeat: no-repeat;
   display: block;
   justify-content: space-around;
   margin: 70px auto; 
   height: 44px; 
   width: 137px;
}


.logo:hover {
  background: url(img/ylogo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 44px; 
  width: 137px;
}

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

   .logo{   
      background: url(img/logo.svg);
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
      /* justify-content: space-around; */
      /* margin: 70px auto;  */
      height: 44px; 
      width: 60px;
   }
   
   
   .logo:hover {
     background: url(img/ylogo.svg);
     background-repeat: no-repeat;
     background-size: contain;
     height: 44px; 
     width: 60px;
   }

}


.aside-block li{
   margin-top: 40px;
}
@media screen and (max-width: 899px)  {
   .aside-block li{
      margin-top: 40px;
font-size: 14px;

   }
}

.active a{
   color: blueviolet;
   border-left: 3px solid blueviolet;
   padding: 0 150px 0 30%;
   text-decoration: none;   
}

.item  li:hover{
   color: #F2C94C;
}

.item  .active a:hover{
   color: #F2C94C;
   border-left: 3px solid #F2C94C;     
}

.support{
   margin-top: 200px; 
}
@media screen and (max-width: 899px)  {
   .support li{      
      font-size: 12px;
      letter-spacing: normal;
   }
   .item  li{
      font-size: 12px;
      letter-spacing: normal;
   }
   }

.support  li:hover{
   color: #F2C94C;   
}


.copy{  
   font-size: 8px;
   letter-spacing: normal;
   margin-bottom: 50px;
   margin-top: 100px;
}

.main
{  
   color: #fff;
   font-family: Arial, Helvetica, sans-serif; 
   position: relative;   
   width: 80%;
  }

.main-2
{ color: #fff;   
   display: flex;
   background-color: #fff;
   border-radius: 21px;   
   font-family: roboto, Arial, Helvetica, sans-serif;
   src: url('fonts/Roboto-Regular.ttf') format("truetype");
   margin-bottom: 40px;
   margin-left: 15%;
   margin-top: 120px;
   /* width: 900px; */
   width: 90%;
}
@media screen and (max-width: 899px)  {
   .main-2
   { color: #fff;   
      display: block;
      background-color: #fff;
      border-radius: 21px;   
      font-family: roboto, Arial, Helvetica, sans-serif;
      src: url('fonts/Roboto-Regular.ttf') format("truetype");
      margin-bottom: 40px;
      margin-left: 15%;
      margin-top: 120px;
      /* width: 900px; */
      width: 90%;
   }
}
.main-container {
   margin-bottom: 70px;
   margin-top: 100px;
   margin-left: 10%;
   width: 100%; 
}
@media screen and (max-width: 899px)  {

   .main-container {
      margin-bottom: 70px;
      margin-top: 2px;
      margin-left: 10%;
      width: 100%; 
   }

}


.main-container-2{   
   color: #000;  
   margin-bottom: 10px;
   margin-right: 2%;   
   padding-left: 10%;
   padding-top: 70px;   
   width: 90%;  
}

.hr-line{     
   background-color:#a276ff; 
   height: 5px;
   margin-bottom: 20px;
   margin-top: 10px;
   width:50px; 
}
.gread-container h1 {   
   margin-bottom: 40px;
   margin-top: 40px;
   text-align: center;   
}
.photo-item{
   color: #000;

}
.cards {   
   display: grid;
   gap: 100px 100px;
   grid-template-columns: repeat(4,150px); 
   justify-content: left;
   font-size: 10px;
   margin-top: 100px;        
}

@media screen and (max-width: 1499px)  {
   .cards {   
      display: grid;
      gap: 50px 100px;
      grid-template-columns: repeat(3,150px); 
     
      justify-content: left;
      font-size: 10px;
      margin-top: 100px;        
   }

}
@media screen and (max-width: 1249px)  {
   .cards {   
      display: grid;
      gap: 50px 100px;
      grid-template-columns: repeat(2,150px);      
      justify-content: left;
      margin-bottom: 50px;
      margin-top: 100px;        
   }
}

@media screen and (max-width: 899px)  {
   .cards {   
      display: grid;
      gap: 30px 50px;
      grid-template-columns: repeat(1,70%);      
      justify-content: center;     
      margin-top: 10%;        
   }
}


.item1 {
   background: url(img/70435438-11AA-4870-9F06-65BFC991AA4A-1.png);
   background-repeat: no-repeat;
   background-size: contain;
   height: 126px; 
   width: 229px;
}

.item1:hover {
   background: url(img/Y70435438-11AA-4870-9F06-65BFC991AA4A-1.png);
   background-repeat: no-repeat;
   background-size: contain;
   height: 126px; 
   width: 229px;
 }
   
.item2 {
   background: url(img/70435438-11AA-4870-9F06-65BFC991AA4A-2.png);
   background-repeat: no-repeat;
   background-size: contain;
   height: 126px; 
   width: 229px;
}

.item2:hover {
    background: url(img/Y70435438-11AA-4870-9F06-65BFC991AA4A-2.png);
    background-repeat: no-repeat;
   background-size: contain;
   height: 126px; 
   width: 229px;
}

.item3 {
   background: url(img/70435438-11AA-4870-9F06-65BFC991AA4A-3.png);
   background-repeat: no-repeat;
   background-size: contain;
   height: 126px; 
   width: 229px;
}

.item3:hover {
    background: url(img/Y70435438-11AA-4870-9F06-65BFC991AA4A-3.png);
    background-repeat: no-repeat;
   background-size: contain;
   height: 126px; 
   width: 229px;
}

.item4 {
   background: url(img/70435438-11AA-4870-9F06-65BFC991AA4A-4.png);
   background-repeat: no-repeat;
   background-size: contain;
   height: 126px; 
   width: 229px;
}

.item4:hover {
    background: url(img/Y70435438-11AA-4870-9F06-65BFC991AA4A-4.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 126px; 
    width: 229px;
}

.news{
   display: flex;
   font-size: 42;
   margin-top: 80px;
}

.item6 {
   background: url(img/Downward.svg);
   background-repeat: no-repeat;
   height: 34px;   
   margin-left: 10px;
   margin-top: 10px;
   width: 37px;  
}

.item6:hover {
    background: url(img/YDownward.svg);
    background-repeat: no-repeat;
    height: 34px; 
    width: 37px;
}

.social-block {  
   position: absolute;
   background-color: #a276ff;  
   display: flex;
   justify-content: space-around;
   padding-top: 15px;
   padding-bottom: 15px;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;   
   background: url(img/Social.svg);
   background-repeat: no-repeat;
   background-repeat: no-repeat;
   background-size: contain;
   right: 0;
   height: 33px; 
   width: 20%;  
   }

.social-block:hover {
   background: url(img/YSocial.svg);
   background-repeat: no-repeat;
   background-size: contain;
   height: 33px; 
   width: 20%;   
}

.info a {
   border: 2px solid #fff;
   border-radius: 15px;
   color: #fff;
   padding: 2% 10% 2% 10%;   
   text-decoration: none;   
}

.info a:hover {
   border:2px solid #F2C94C;
}
@media screen and (max-width: 899px)  {
   .info a {
      border: 2px solid #fff;
      border-radius: 15px;
      color: #fff;
      padding: 10px 30px 10px 30px;   
      text-decoration: none;   
      margin-left: 23%;
      
   }
   
   .info a:hover {
      border:2px solid #F2C94C;
   }
}
.zg-center{   
   font-size: 2.5vw;
   padding-top: 100px;   
}

.zg-center-1 {
   color: blueviolet;
   font-size: 5vw;
   padding-bottom: 10px;
}

.zg-center-1:hover{
   color: #F2C94C;
}

.text-center{ 
   font-size: 20px;
   font-weight: normal;
   text-align: justify;
   line-height: 1.5;
   /* padding-right: 170px; */
   padding-right: 5%;
   margin-bottom: 50px;
}
@media screen and (max-width: 899px)  {
   .text-center{ 
      font-size: 12px;
      font-weight: normal;
      text-align: justify;
      line-height: 1.5;
      /* padding-right: 170px; */
      padding-right: 5%;
      margin-bottom: 50px;
   }

}
.img-container{
   margin-top: 60px;   
}

.and{
   font-size: 24px;   
}

.item5 {  
   height: auto;
   margin-left: 22%;
    width: 75%;
 }
 @media screen and (max-width: 899px)  {
   .item5 {  
      height: auto;
      margin-left: 16%;
       width: 75%;
    }
 }
.photo-item{   
   font-size: 10px;
   font-style: normal; 
   margin-left:35%;
}

p{  
   font-size: 20px;
   margin-bottom: 20px; 
}

@media screen and (max-width: 899px)  {
   p5{  
      font-size: 12px;
      /* margin-bottom: 20px;  */
   }
}

.lorem{
   font-weight: bold;
}