/*Стили для main*/
 h1 {

    padding-bottom: 20px; 
}
.main__grid-content ul {
    list-style-type:disc;
        padding-left: 15px;
}
.main__grid-content strong, .main__grid-content b {
font-weight: bold;
}
.podcat h2 {
    font-size: 22px;
    font-weight: 600;
      padding: 20px 0;
}
.main__grid-menu{
    display: flex;
    padding: 24px 0;
    transition: all 0.4s 0s ease-out;
    position: sticky;
    top: 125px;
    align-self: flex-start;
    flex-direction: column;
    gap: 60px;

}
section{
    padding: 20px 0;
}
.chto{
    width: 100%;
}
.chto h2,.srav h2,.raboti h2,.garantii h2,.tema h2,.kak h2, .yat h2 {
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 20px;
}
.main__grid{
    display: grid;
    grid-template-columns:  minmax(0px, 300px) 1fr;
    grid-gap: 20px;

}

.main__grid-content h1 {
    font-size: 40px;
    font-weight: 600;
}
.chto__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 20px;
}
.chto__grid-block {
    cursor: pointer;
    display: flex;
    border: 2px solid #263951;
    padding: 10px;
    gap: 10px;
    align-items: center;
    flex-direction: column;
}
    .chto__grid-block img {
        filter: grayscale(100%);
        max-width: 200px;
        max-height: 100px;
        width: 100%;
        height: 100%;
    }

    .chto__grid-block p {
        text-align: center;
        font-weight: 600;
    }
.ssilki{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    justify-items: stretch;
    align-items: center;
    justify-content: center;
}
.ssilki a{
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 20px 30px;
    transition: all .3s linear;
    box-sizing: border-box;
    outline: 3px solid #263951;
    color: #000;
}
.ssilki a:nth-child(1){
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 10px 30px;
    transition: all .3s linear;
    box-sizing: border-box;
    outline: 3px solid #263951;
    color: #000;
}
.raboti__grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 90px;
    justify-items: stretch;
    align-items: center;
    justify-content: center;
}
.raboti__grid-block{
    text-align: center;
    position: relative;
}
.raboti__grid-block-img{
    position: absolute;
    top: 50%;
    max-width: 700px;
    left: 50%;
    transform: translate(-51%, -50%);
}
.raboti__grid-block-img2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-49%, -61%);
}
.garantii__grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
}
.garantii__grid-block{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.garantii__grid-block img{
max-width: 120px;
width: 100%;
}

.tema__grid{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:  20px;

}
.tema__grid-link{
    color: #0D2A43;
    border: 1px solid #9BA4AF;
    padding: 10px 20px
}
.yat__flex{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.yat__flex li{
font-size: 20px;
}
.yat__flex li:before{
content:'\2714';
    padding-right: 10px;
}
.yat__flex li strong{
    font-size: 20px;
    font-weight: 600;
    }

    .swiper {
     max-width: 1000px;
         height: 150px;
    width: 100%;
}
.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: flex;
        gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

@media only screen and (min-width: 768px) and (max-width: 1110px){
    .swiper {
        max-width: 700px!important;
            height: 150px;
       width: 100%;
   }
   .swiper {
    max-width: 1000px;
    height: 250px!important;
    width: 100%;
}	
.tema__grid-link {
    font-size: 12px;
    color: #0D2A43;
    border: 1px solid #9BA4AF;
    padding: 10px 20px;
}
}  
    @media only screen and (min-width: 320px) and (max-width: 1110px){	
        .block__none{
            display: none;
        }

    }

    @media only screen and (min-width: 320px) and (max-width: 1210px){
 
        .main__grid {
            display: grid;
            grid-template-columns: 1fr;
         
        }
        .main__grid-menu {
            display: none;
            padding: 24px 0;
            transition: all 0.4s 0s ease-out;
            position: sticky;
            top: 124px;
            align-self: flex-start;
            flex-direction: column;
            gap: 60px;
        }
        
    }
    @media only screen and (min-width: 320px) and (max-width: 768px){
        .tema__grid-link {
            color: #0D2A43;
            border: 1px solid #9BA4AF;
            padding: 10px 10px;
        }
        .swiper {
            max-width: 330px!important;
                height: 570px!important;
           width: 100%;
       }
        .garantii__grid {
            display: grid;
            grid-gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
        .garantii__grid-block p{
text-align: center;
        }
        .garantii__grid-block img {
            max-width: 80px;
            width: 100%;
        }	
     
        .main__grid-content h1 {
            font-size: 24px;
            font-weight: 600;
        }
        .chto__grid-block p {
            font-size: 14px;
            text-align: center;
            font-weight: 600;
        }
        
    }
 @media only screen and (min-width: 451px) and (max-width: 768px){
   .raboti__grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 30px;
            grid-row-gap: 30px;
            justify-items: stretch;
            align-items: start;
            justify-content: center;
        }

}
 @media only screen and (min-width: 320px) and (max-width: 450px){
   .raboti__grid {
            display: grid;
            grid-template-columns: 1fr;
            grid-column-gap: 30px;
            grid-row-gap: 30px;
            justify-items: stretch;
            align-items: start;
            justify-content: center;
        }

}

 @media only screen and (min-width: 320px) and (max-width: 768px){
.chto__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 20px;
}

}

.wrap {
 max-width: 950px;
    width: 100%;
    margin: auto;
}
.items-wrap {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 20px;
}
.items-wrap:before,
.items-wrap:after {
  content: "";
  height: 100%;
  top: 0;
  width: 10%;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.items-wrap:before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.items-wrap:after {
  right: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}
.items {
  flex-shrink: 0;
  display: flex;
  gap: 20px;
  counter-reset: item;
  justify-content: space-around;
  min-width: 100%;
}
.item {
text-align: center;
    padding: 5px;
    flex: 0 0 auto;
    outline: 3px solid #263951;
    width: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin: 10px 0;
    transition: all 0.1sease-in-out;
}
.item:hover {
cursor: pointer;
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.item:before {
  content: item;
}

.marquee {
  animation: scroll 40s linear infinite;
}
.marquee1 {
  animation: scroll 40s linear infinite;
}
.marquee2 {
  animation: scroll 60s linear infinite;
}
.reverce {
  animation-direction: reverse;
}
.items-wrap:hover .marquee {
  animation-play-state: paused;
}



@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 20px));
  }
}



@media only screen and (min-width: 861px) and (max-width: 980px){	
.wrap {
 max-width: 850px;
    width: 100%;
    margin: auto;
}
}
@media only screen and (min-width: 761px) and (max-width: 860px){	
.wrap {
 max-width: 750px;
    width: 100%;
    margin: auto;
}
}
@media only screen and (min-width: 461px) and (max-width: 760px){	
.wrap {
 max-width: 450px;
    width: 100%;
    margin: auto;
}
}
@media only screen and (min-width: 361px) and (max-width: 460px){	
.wrap {
 max-width: 360px;
    width: 100%;
    margin: auto;
}
}
@media only screen and (min-width: 321px) and (max-width: 360px){	
.wrap {
 max-width: 330px;
    width: 100%;
    margin: auto;
}
}
@media only screen and (min-width: 320px) and (max-width: 800px){	
.item {
    text-align: center;
    padding: 4px;
    flex: 0 0 auto;
    outline: 3px solid #263951;
    width: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin: 10px 0;
    transition: all 0.1sease -in-out;
}
}










/*Стили для main*/