@import "fonts.css";
/*
Config
*/

.igronik-wrapper body, .igronik-wrapper ul, .igronik-wrapper ol,
.igronik-wrapper p, .igronik-wrapper a, .igronik-wrapper span,
.igronik-wrapper div, .igronik-wrapper img, .igronik-wrapper header,
.igronik-wrapper section, .igronik-wrapper footer, .igronik-wrapper h1,
.igronik-wrapper h2, .igronik-wrapper h3, .igronik-wrapper h4,
.igronik-wrapper h5, .igronik-wrapper h6 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.igronik-wrapper {
    font-family: 'Inter', sans-serif;
    font-size: 14px; 
    background: linear-gradient(180deg, #062134 50%, #1A2029 90.99%);
}
.igronik-wrapper ul, .igronik-wrapper ol {
    list-style: none;
}
.igronik-wrapper h2 {    
    color: #ffffff;
    font-weight: 700;
    font-size: 40px;
}
.igronik-wrapper .container {
    max-width: 1300px;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
}
.igronik-wrapper .wrapper {
    background:  url(../img/bg.png) no-repeat 50% 0%;
    overflow: hidden;
}
.igronik-wrapper .pos-r {
    position: relative;
}
.igronik-wrapper .pos-a {
    position: absolute;
}
.igronik-wrapper .scrollBar::-webkit-scrollbar {
    height: 5px;               /* ширина scrollbar */
}
.igronik-wrapper .scrollBar::-webkit-scrollbar-track {
    background: #1B80B4;        /* цвет дорожки */
}
.igronik-wrapper .scrollBar::-webkit-scrollbar-thumb {
    background-color: rgba(2, 59, 88, 0.7);    /* цвет плашки */
    border-radius: 5px;       /* закругления плашки */
    border: 1px solid #1B80B4;  /* padding вокруг плашки */
}
/*Elements*/
.igronik-wrapper h1 {
    font-weight: 900;
    font-size: 80px;
    line-height: 92px;
    background: linear-gradient(7.31deg, #023B58 -74.07%, #1B80B4 79.9%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.igronik-wrapper .logo {
    margin-bottom: 20px;
}
.igronik-wrapper .logoDesc {
    font-weight: 500;
    font-size: 40px;
    line-height: 49px;
    color: #000000;
    opacity: 0.5;
    margin-top: 15px;
    letter-spacing: 0.06em;
}
.igronik-wrapper .titleSection {
    margin-bottom: 38px;
}
.igronik-wrapper .scrollBar {
    overflow: auto;
}
/*SLIDER */
.igronik-wrapper .wrapArrow {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
}
.igronik-wrapper .arrow-right,
.igronik-wrapper .arrow-left {
    background: #fff;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    cursor: pointer;
}
.igronik-wrapper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.igronik-wrapper .swiper-wrapper {
    display: flex;
    align-items: center;
}
/*Blocks*/
/* Header */
.igronik-wrapper .header {
    padding: 75px 0;
}
.igronik-wrapper .topPanel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.igronik-wrapper .offer {
    background: rgba(255, 250, 244, 0.7);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    font-weight: 400;
    font-size: 20px;
    padding: 37px;
    color: rgba(55, 55, 55, 1);
    margin-top: 140px;
}
.igronik-wrapper ul.offerList {
    display: flex;
    align-items: flex-start;
}
.igronik-wrapper .offerItem {
    font-size: 18px;
    display: flex;
    flex-direction: column;
    margin-right: 63px;
}
.igronik-wrapper p.offerDesc {
    line-height: 35px;
    margin-bottom: 38px;
}
.igronik-wrapper .offer  span.bold {
    font-weight: 600;
    font-size: 32px;
    line-height: 39px;
    color: #000000;
}
.igronik-wrapper .offer .image {
    left: 66%;
    top: 50%;
}
/* Product blocks */
.igronik-wrapper .productSection {
    padding: 163px 0 0;
}

.igronik-wrapper .productList {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.igronik-wrapper .productItem {
    position: relative;
    border-radius: 12px;
    padding: 30px;
    min-height: 309px;
    overflow: hidden;
    text-decoration: none;
}
.igronik-wrapper .productTitle {
    transition: all .3s ease;
    transform: translate(0, 0);
}
.igronik-wrapper .productItem:nth-child(1) { 
    grid-area: 1 / 1 / 3 / 3; 
    background: rgba(2, 59, 88, 0.7);
}
.igronik-wrapper .productItem:nth-child(2) { 
    grid-area: 1 / 3 / 3 / 5; 
    background: #025858;
}
.igronik-wrapper .productItem:nth-child(3) { 
    grid-area: 1 / 5 / 5 / 7; 
    background: rgba(20, 88, 103, 0.7);
}
.igronik-wrapper .productItem:nth-child(4) { 
    grid-area: 3 / 1 / 5 / 5; 
    background: rgba(2, 73, 88, 0.7);
}
.igronik-wrapper .productItem:nth-child(5) { 
    grid-area: 5 / 1 / 7 / 7; 
    background: rgba(28, 69, 101, 0.7);
    min-height: 244px;
    height: 244px;

}
.igronik-wrapper .productDesc {
    position: absolute;
    top: 0;
    left: 0;
    padding:  32px 32px 70px 32px;
    height: 100%;
    width: 100%;
    transition: all .3s ease;
    transform: translate(0, 100%);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    
}
.igronik-wrapper .productItem:hover .productDesc {    
    transition: all .3s ease;
    transform: translate(0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
}
.igronik-wrapper .productItem:hover .productTitle {    
    transition: all .3s ease;
    transform: translate(0, -200%);
}
.igronik-wrapper .productDesc p {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 20px;
    letter-spacing: -1px;
}
.igronik-wrapper .productDesc .more {
    font-weight: 600;
    color: #FFFFFF;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 32px;
}
.igronik-wrapper .productDesc .more img {
    margin-left: 5px;
}
.igronik-wrapper .productItem:nth-child(4) .productDesc {
    flex-direction: revert;
    flex-wrap: wrap;
}
.igronik-wrapper .productItem:nth-child(4) .productDesc p  {
    width: 49%;
}
.igronik-wrapper .productItem:nth-child(5) .productDesc {
    flex-direction: row;
    flex-wrap: wrap;
}
.igronik-wrapper .productItem:nth-child(5) .productDesc p {
    width: 32%;
}
/* Clients blocks */
.igronik-wrapper .clientsSection {
    padding: 85px 0 0;
}
.igronik-wrapper .team,
.igronik-wrapper .clientsBlock {
    position: relative;
    overflow: hidden;
}
.igronik-wrapper .clientsTabs {
    display: flex;
    margin-bottom: 30px;
    width: 1270px;
}
.igronik-wrapper .clientsTabs .tab {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    color: #B4B4B4;
    font-weight: 800;
    font-size: 18px;
    padding: 18px 25px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.igronik-wrapper .clientsTabs .tab:hover,
.igronik-wrapper .clientsTabs .tab.active {
    background: #FFFFFF;
    color: #000000;
}
.igronik-wrapper .clientsItem {
    display: none;
}
.igronik-wrapper .teamSlider,
.igronik-wrapper .clientsItem.active {
    display: block;
    overflow: unset;
    position: unset;
}
/* Team blocks */
.igronik-wrapper .teamSection {
    padding: 95px 0 0;
}
.igronik-wrapper .teamSlider .image img {
    width: 100%;
    display: block;
}
.igronik-wrapper .teamSliderItem {
    overflow: hidden;
    position: relative;
}
.igronik-wrapper .teamAbout {
    position: absolute;
    transition: all .3s ease;
    transform: translate(0, 100%);
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    opacity: 0.76;
    color: #fff;
    font-weight: 600;
    font-size: 28px;
    padding: 0 0 40px 35px;
}
.igronik-wrapper .teamSliderItem .position {
    font-size: 18px;
    font-weight: 400;
    margin-top: 15px;
    margin-right: 10px;
}

.igronik-wrapper .teamSliderItem .name{
    margin-right: 10px;
}

.igronik-wrapper .teamSliderItem:hover .teamAbout,
.igronik-wrapper .teamSliderItem.active .teamAbout {
    transition: all .3s ease;
    transform: translate(0, 0);
}
/* Footer */
.igronik-wrapper .footerNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 55px;
}
.igronik-wrapper .footer {
    padding: 98px 0 15px;
}
.igronik-wrapper .menu {
    display: flex;
    align-items: center;
}
.igronik-wrapper .menu a {
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
}
.igronik-wrapper .menu li:not(:last-child) {
    margin-right: 83px;
}
.igronik-wrapper .bottomPage {
    background: #000000;
    color: #fff;
}
.igronik-wrapper .bottomPageWrap {
    display: flex;
    padding: 19px 55px;
}
.igronik-wrapper .bottomPageWrap a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;

}
.igronik-wrapper .bottomPageWrap .copyright,
.igronik-wrapper .bottomPageWrap .policy,
.igronik-wrapper .bottomPageWrap .phone {
    font-weight: 400;
    font-size: 12px;
}
.igronik-wrapper .bottomPageWrap .policy {
    margin-left: 42px;
    letter-spacing: 0.012em;
}
.igronik-wrapper .bottomPageWrap .phone {
    margin-left: auto;
}
.igronik-wrapper .bottomPageWrap .telegram {
    margin: -7px 0 0 20px;
    width: 24px;
    height: 24px;
    background-color: grey;
    border-radius: 4px;
    text-align: center;

}
.igronik-wrapper .bottomPageWrap .telegram img {
    width: 70%;
    vertical-align: middle;
}

/*Выпадающее сообщение*/
.question {
  position: relative;
  bottom: 3px;
}
.question .popover {
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 5px;
  bottom: 33px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  color: #fff;
  display: none;
  font-size: 12px;
  font-family: 'Helvetica', sans-serif;
  left: -90px;
  padding: 7px 10px;
  position: absolute;
  width: 200px;
  z-index: 4;
}
.question .popover:before {
  border-top: 7px solid rgba(0, 0, 0, 0.85);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  bottom: -7px;
  content: '';
  display: block;
  left: 50%;
  margin-left: -7px;
  position: absolute;
}
.question:hover .popover {
  display: block;
  -webkit-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
  -moz-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
  -ms-animation: fade-in 0.3s linear 1, move-up 0.3s linear 1;
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-ms-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes move-up {
  from {
    bottom: 25px;
  }
  to {
    bottom: 33px;
  }
}
@-moz-keyframes move-up {
  from {
    bottom: 25px;
  }
  to {
    bottom: 33px;
  }
}
@-ms-keyframes move-up {
  from {
    bottom: 25px;
  }
  to {
    bottom: 33px;
  }
}


@media screen and (max-width: 1200px) {
    .igronik-wrapper .footerNav,
    .igronik-wrapper .bottomPageWrap {
        padding-left: 0;
        padding-right: 0;
    }
}
@media screen and (max-width: 993px) {
    .igronik-wrapper .offer {
        margin-top: 90px;
    }
    .igronik-wrapper .clientsSection,
    .igronik-wrapper .productSection {
        padding: 0;
    }
    .igronik-wrapper .teamSection {
        padding: 20px 0 0;
    }
    .igronik-wrapper .menu li:not(:last-child) {
        margin-right: 25px;
    }
    .igronik-wrapper .productDesc p {
        font-size: 14px;
        line-height: 25px;
        margin-bottom: 5px;
    }
}
@media screen and (max-width: 768px) {
    .igronik-wrapper h1 {
        font-size: 56px;
    }  
    .igronik-wrapper .logoDesc {
        font-size: 30px;
        margin-top: 0;
    }
    .igronik-wrapper .productList {
        display: flex;
        flex-direction: column;
    }
    .igronik-wrapper .clientsSection {
        padding: 50px 0 0;
    }
    .igronik-wrapper .footerNav {
        flex-direction: column;
        align-items: flex-start;
    }
    .igronik-wrapper .footer {
        padding: 50px 0 15px;
    }
    .igronik-wrapper .menu {
        flex-direction: column;
        align-items: flex-start;
    }
    .igronik-wrapper .menu li:not(:last-child) {
        margin-right: 0;
    }
    .igronik-wrapper .menu li {
        margin: 8px 0;
    }
    .igronik-wrapper .logo-footer {
        order: -1;
        margin-bottom: 15px;
    }
}
@media screen and (max-width: 567px) {
    .igronik-wrapper .header {
        padding: 58px 0;
    }
    .igronik-wrapper  h1 {
        font-size: 34px;
        line-height: normal;
        margin-bottom: 18px;
    }
    .igronik-wrapper .logoDesc {
        font-size: 18px;
        line-height: 23px;
    }
    .igronik-wrapper .offer {
        margin-top: 90px;
        font-size: 14px;
        padding: 35px;
        letter-spacing: -1px;
    }
    .igronik-wrapper p.offerDesc {
        line-height: 21px;
        margin-bottom: 25px;
    }
    .igronik-wrapper .offerList {
        flex-wrap: wrap;
    }
    .igronik-wrapper .offerItem {
        margin: 0;
    }
    .igronik-wrapper .offerItem {
        font-size: 17px;
    }
    .igronik-wrapper .offer span.bold {
        font-size: 25px;
        line-height: 32px;
    }
    .igronik-wrapper .offerItem:first-child {
        margin-right: 80px;
    }
    .igronik-wrapper .offerItem:not(:last-child) {
        margin-bottom: 20px;
    }
    .igronik-wrapper .offer .image {
        left: 0%;
        top: 95%;
    }
    .igronik-wrapper .offer .image img {
        width: 500px;
    }
    .igronik-wrapper .productSection {
        padding: 305px 0 0;
    }
    .igronik-wrapper h2 {
        font-size: 24px;
    }
    .igronik-wrapper .titleSection {
        margin-bottom: 32px;
        font-size: 28px;
    }
    .igronik-wrapper .clientsTabs .tab {
        font-size: 15px;
        padding: 16px 26px;
    }
    .igronik-wrapper .teamAbout {
        padding-bottom: 27px;
    }
    .igronik-wrapper .bottomPageWrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .igronik-wrapper .bottomPageWrap .policy,
    .igronik-wrapper .bottomPageWrap .phone,
    .igronik-wrapper .bottomPageWrap .copyright {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .igronik-wrapper .bottomPageWrap .telegram {
        margin: 0;
    }
    .igronik-wrapper .productItem:nth-child(3),
    .igronik-wrapper .productItem:nth-child(4),
    .igronik-wrapper .productItem:nth-child(5) {
        height: 360px;
    }
    .igronik-wrapper .productItem:nth-child(4) .productDesc p,
    .igronik-wrapper .productItem:nth-child(5) .productDesc p {
        width: 100%;
        margin-bottom: 15px;
    }

}