/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: Inter; font-display: swap; src: url("../fonts/Inter-VariableFont_slnt,wght.woff2") format("woff2"), url("../fonts/Inter-VariableFont_slnt,wght.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: Manrope; font-display: swap; src: url("../fonts/Manrope-VariableFont_wght.woff2") format("woff2"), url("../fonts/Manrope-VariableFont_wght.woff") format("woff"); font-weight: 400; font-style: normal; } html { font-family: "Manrope", sans-serif; color: #101B15; } html[lang=kz] { font-family: "Inter", sans-serif; } body { padding: 20px 0; } .container { margin: 0 auto; max-width: 1400px; } .button { display: inline-block; border: 1px solid #381CB9; border-radius: 16px 0px 16px 0px; padding: 15px 30px; width: -moz-fit-content; width: fit-content; text-align: center; border: 1px solid #381CB9; font-size: 18px; font-weight: 600; line-height: 120%; color: #381CB9; transition: color linear 0.2s, background-color linear 0.2s; } .button:hover { background-color: #381CB9; color: #fff; } h1 span { color: #E9E61F; } h2 { font-size: 44px; font-weight: 600; line-height: 120%; } h2 span { color: #381cb9; } section { padding-bottom: 120px; } p { font-size: 16px; font-weight: 400; line-height: 140%; margin-bottom: 12px; } p:last-child { margin-bottom: 0; } b { font-weight: bold; } .swiper-button-next::after { content: url("../img/slider-arrow-right.svg"); } .swiper-button-prev::after { content: url("../img/slider-arrow-right.svg"); } input, textarea { background: rgba(255, 255, 255, 0.0784313725); padding: 14px 20px; border-radius: 16px; font-size: 16px; } input::-moz-placeholder, textarea::-moz-placeholder { font-weight: 500; line-height: 120%; } input::placeholder, textarea::placeholder { font-weight: 500; line-height: 120%; } .header { padding-bottom: 60px; } .header__container { color: #fff; } .header__wrapper { background-image: url("../img/header-bg.svg"), linear-gradient(97.72deg, #231857 25.84%, #3712E7 129.43%); border-radius: 30px; padding: 0px 40px 30px 40px; } .header__upper-wrapper { display: flex; align-items: center; padding: 20px 0; margin-bottom: 36px; } .header__lang { display: flex; gap: 12px; } .header__button { background-color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); color: #241958; padding: 15px 30px; } .header__button:hover { background-color: rgba(0, 0, 0, 0); color: #fff; } .header__upper-button { border: 1px solid rgba(255, 255, 255, 0.5); padding: 12px 22px; font-size: 14px; font-weight: 500; color: #fff; } .header__upper-button:hover { background-color: #fff; color: #241958; } .header__text-wrapper { display: flex; flex-direction: column; align-items: center; margin: 0 auto; text-align: center; max-width: 871px; margin-bottom: 85px; } .header__subtitle { font-size: 16px; font-weight: 600; line-height: 120%; } .header__title { margin-bottom: 24px; font-size: 56px; font-weight: 600; line-height: 120%; } .header__text { font-size: 18px; font-weight: 500; line-height: 120%; max-width: 563px; margin-bottom: 30px; opacity: 0.7; } .header__advantages { display: flex; justify-content: space-between; gap: 16px; } .header__page-title-wrapper .header__title { font-size: 44px; font-weight: 600; } .header__advantages-item { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.05); text-align: center; padding: 20px 0; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 10px; font-size: 16px; font-weight: 500; line-height: 120%; flex-grow: 1; } .header__advantages-item p { max-width: 281px; } .breadcrumbs__container { padding: 20px 0; } .breadcrumbs__list { display: flex; align-items: center; overflow: auto; } .breadcrumbs__list::-webkit-scrollbar { width: 0; height: 0; } .breadcrumbs__list-item { position: relative; } .breadcrumbs__list-item:not(:last-child) { margin-right: 28px; } .breadcrumbs__list-item:not(:last-child)::before { position: absolute; content: url("../img/breadcrumbs-separator.svg"); width: 9px; height: 5px; transform: translateY(-50%); right: -22px; } .breadcrumbs__list-link { transition: 0.2s ease-in-out; white-space: nowrap; } .breadcrumbs__list-link:hover { color: #E9E61F; } .breadcrumbs__list-link.active { color: #E9E61F; pointer-events: none; } .pagination__container { display: flex; justify-content: center; padding-top: 60px; } .pagination__wrapper { display: flex; align-items: center; gap: 20px; } .pagination__arrow { display: flex; } .pagination__pages { font-size: 24px; font-weight: 600; line-height: 140%; } .logo { margin-right: auto; } .header-menu { display: flex; align-items: center; margin-right: 83px; gap: 30px; } .header-menu.overlay { visibility: visible; opacity: 1; padding-top: 100px; background-color: #3712E7; } .header-menu__nav ul:first-child { display: flex; gap: 30px; } .header-menu a:hover { text-decoration: underline; } .header-contact-us { display: flex; align-items: center; gap: 14px; } .footer__container { background-color: #F9F9F9; padding: 40px; padding-bottom: 30px; border-radius: 30px; } .footer__top { display: flex; padding-bottom: 80px; border-bottom: 1px solid rgba(16, 27, 21, 0.0901960784); } .footer__logos { display: flex; gap: 12px; margin-right: auto; } .footer__nav { display: flex; margin-right: 100px; gap: 90px; } .footer__nav-list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 400; line-height: 120%; color: #101B15; } .footer__media { display: flex; gap: 14px; margin-top: 17px; } .footer__button { font-size: 14px; font-weight: 600; line-height: 120%; } .footer__bottom { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; line-height: 120%; color: rgba(16, 27, 21, 0.6); padding-top: 22px; } .footer__copyright { margin-right: auto; } .footer__policy { margin-right: 509px; } .clients__container { padding: 0 40px; } .clients__title-wrapper { margin-bottom: 40px; } .clients__wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .clients__card-image-wrapper img { max-width: 164px; } .clients__card-wrapper { display: flex; justify-content: center; align-items: center; padding: 46px 0; background-color: #F9F9F9; border-radius: 16px; } .contacts__container { padding: 0 40px; } .contacts__title-wrapper { max-width: 917px; margin-bottom: 40px; } .contacts__wrapper { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 30px; gap: 16px; } .safety__container { padding: 0 40px; } .safety__title-wrapper { margin-bottom: 40px; } .safety__text { max-width: 985px; } .safety__text-wrapper { display: flex; justify-content: space-between; margin-bottom: 50px; gap: 20px; } .safety__button { width: 255px; } .safety__button-wrapper { display: flex; justify-content: center; align-items: center; } .safety__slider-wrapper { position: relative; } .safety__slider-wrapper .swiper-button-next, .safety__slider-wrapper .swiper-button-prev { margin-top: -95px; } .safety__slider-wrapper .swiper-button-next { right: -15px; } .safety__slider-wrapper .swiper-button-prev { left: -15px; } .safety__slider-wrapper .swiper-button-disabled { display: none; } .safety-card__image-wrapper { margin-bottom: 16px; } .safety-card__image-wrapper img { border-radius: 16px; -o-object-fit: cover; object-fit: cover; width: 100%; height: 200px; } .safety-card__title { margin-bottom: 8px; font-size: 16px; font-weight: 600; line-height: 120%; } .safety-card__text { color: rgba(16, 27, 21, 0.8); } .reputation__container { padding: 0 40px; } .reputation__title-wrapper { margin-bottom: 56px; } .reputation__title { margin-bottom: 40px; max-width: 915px; } .reputation__text-wrapper { display: flex; justify-content: space-between; gap: 20px; } .reputation__text { overflow: hidden; max-width: 985px; } .reputation__text.hidden { height: 150px; } .reputation__text .active { height: auto; } .reputation__button-wrapper { display: flex; flex-direction: column; justify-content: end; align-items: center; flex-grow: 1; } .reputation__button { position: relative; width: 292px; background: linear-gradient(57.49deg, #1F0C7A 6.41%, #411AFB 106.43%); color: #fff; font-size: 18px; font-weight: 600; line-height: 120%; } .reputation__button:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .reputation__more-button { color: #381CB9; font-size: 16px; font-weight: 600; line-height: 120%; } .reputation__cards-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 26px; margin-bottom: 50px; } .reputation__image-wrapper { height: 359px; width: 100%; } .reputation__image-wrapper img { height: 100%; } .reputation img { width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 16px; } .reputation .reputation__logo-wrapper { width: 184px; height: 161px; margin-bottom: 20px; } .reputation__title-logo-wrapper { display: flex; justify-content: space-between; gap: 20px; } .reputation-card__title { margin-bottom: 12px; font-size: 40px; font-weight: 600; line-height: 120%; } .reputation-card__title span { color: #381cb9; } .reputation-card__text { font-size: 16px; font-weight: 400; line-height: 120%; color: rgba(16, 27, 21, 0.8); } .contacts-card__wrapper { padding: 20px; background-color: #F9F9F9; border-radius: 16px; height: 94px; } .contacts-card__title { margin-bottom: 6px; font-size: 14px; font-weight: 500; line-height: 120%; color: rgba(16, 27, 21, 0.8); } .contacts-card__text { font-size: 18px; font-weight: 600; line-height: 120%; color: #101B15; } .contacts-card__media { display: flex; gap: 14px; } .dropdown-menu { display: none; } .dropdown:hover .dropdown-menu__list { display: block; /* Show when hovering */ } .dropdown-menu__list { position:absolute; color: black; background-color: #fff; padding: 16px; box-shadow: 10px 10px 22px -7px rgba(0,0,0,0.75); } .feedback__container { padding: 60px 40px; background: linear-gradient(97.72deg, #231857 25.84%, #3712E7 129.43%); border-radius: 30px; color: #fff; } .feedback__title-wrapper { display: flex; margin-bottom: 40px; gap: 20px; } .feedback__title { max-width: 380px; margin-right: auto; } .feedback__title span { color: #E9E61F; } .feedback__text { color: rgba(255, 255, 255, 0.8); max-width: 762px; } .feedback__inputs { display: grid; grid-gap: 10px; margin-bottom: 30px; } .feedback__inputs textarea { height: 114px; } .feedback__inputs-row { display: flex; gap: 10px; } .feedback__inputs-row input { flex-grow: 1; } .feedback__submit { display: flex; gap: 30px; align-items: center; max-width: 607px; } .feedback__submit span { max-width: 319px; font-size: 14px; font-weight: 400; line-height: 120%; color: rgba(255, 255, 255, 0.6); } .feedback__submit span a { color: #fff; } .feedback__button { background-color: #fff; color: #381CB9; border: 1px solid rgba(255, 255, 255, 0.5019607843); cursor: pointer; width: 240px; } .feedback__button:hover { color: #fff; background-color: rgba(0, 0, 0, 0); } .services__container { padding: 0 40px; } .services__title-wrapper { display: flex; justify-content: space-between; margin-bottom: 40px; gap: 20px; } .services__button-wrapper { display: flex; flex-direction: column; justify-content: end; } .services__button { width: 190px; } .services__wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; } .services__image-wrapper { margin-top: 50px; } .services__image-wrapper img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 400px; } .services-card { height: 100%; } .services-card__wrapper { display: flex; flex-direction: column; background-color: #F9F9F9; padding: 20px; border-radius: 16px; height: 100%; } .services-card__number { display: flex; justify-content: center; align-items: center; border-radius: 50px; font-size: 18px; color: #fff; background-color: #381CB9; font-weight: 600; line-height: 130%; margin-bottom: 62px; width: 46px; height: 46px; } .services-card__title { font-size: 18px; font-weight: 600; line-height: 130%; margin-bottom: 12px; } .services-card__text { font-size: 14px; font-weight: 400; line-height: 120%; color: rgba(16, 27, 21, 0.8); } .services-card__image-wrapper { height: 100%; } .services-card__image-wrapper img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; border-radius: 16px; } .projects__container { padding: 0 40px; } .projects__cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 60px 20px; } .project-card__image-wrapper { margin-bottom: 16px; } .project-card__image-wrapper img { height: 200px; -o-object-fit: cover; object-fit: cover; width: 100%; border-radius: 16px; } .project-card__title { margin-bottom: 8px; font-size: 16px; font-weight: 600; line-height: 120%; } .project-card__text { color: rgba(16, 27, 21, 0.8); font-size: 14px; font-weight: 400; } .project-card__text p { line-height: 140%; } .page-inner__container { padding: 0 40px; } .page-inner__text-wrapper { max-width: 985px; margin-bottom: 40px; } .page-inner__slider-wrapper { position: relative; } .page-inner__slider-wrapper .swiper-button-next { right: -15px; } .page-inner__slider-wrapper .swiper-button-prev { left: -15px; } .page-inner__slider-wrapper .swiper-button-disabled { display: none; } .page-inner__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; } .page-inner__article-block { display: grid; grid-template-columns: 55% auto; grid-gap: 56px; margin-bottom: 60px; } .page-inner__article-title { margin-bottom: 20px; font-size: 32px; font-weight: 600; line-height: 140%; } .page-inner__image-wrapper img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 435px; border-radius: 16px; } .page-inner__button-wrapper { margin-top: 40px; } .page-inner__button-more { font-size: 16px; font-weight: 600; line-height: 140%; color: #381CB9; } .page-inner-card__image-wrapper img { height: 428px; border-radius: 16px; -o-object-fit: cover; object-fit: cover; } .services-inner__container { padding: 0 40px; } .services-inner__title-wrapper { margin-bottom: 56px; } .services-inner__title { margin-bottom: 40px; max-width: 915px; } .services-inner__text-wrapper { display: flex; justify-content: space-between; gap: 20px; } .services-inner__text { overflow: hidden; max-width: 985px; } .services-inner__text.hidden { height: 153px; } .services-inner__text .active { height: auto; } .services-inner__button-wrapper { display: flex; flex-direction: column; justify-content: end; align-items: center; flex-grow: 1; } .services-inner__button { position: relative; width: 292px; background: linear-gradient(57.49deg, #1F0C7A 6.41%, #411AFB 106.43%); color: #fff; font-size: 18px; font-weight: 600; line-height: 120%; } .services-inner__button:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .services-inner__more-button { color: #381CB9; font-size: 16px; font-weight: 600; line-height: 120%; } .images-complicated-grid { display: grid; grid-template-areas: "first first second second" "first first second second" "third fourth second second"; grid-gap: 20px; } .images-complicated-grid img { border-radius: 16px; } .images-complicated-grid__first { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: first; height: 359px; width: 100%; -o-object-fit: cover; object-fit: cover; } .images-complicated-grid__second { -ms-grid-row: 1; -ms-grid-row-span: 5; -ms-grid-column: 5; -ms-grid-column-span: 3; grid-area: second; height: 607px; width: 100%; -o-object-fit: cover; object-fit: cover; } .images-complicated-grid__third { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: third; height: 228px; width: 100%; -o-object-fit: cover; object-fit: cover; } .images-complicated-grid__fourth { -ms-grid-row: 5; -ms-grid-column: 3; grid-area: fourth; height: 228px; width: 100%; -o-object-fit: cover; object-fit: cover; } .same-services__container { padding: 0 40px; } .same-services__slider .swiper-slide { height: auto; } .same-services__title { font-size: 32px; font-weight: 600; line-height: 140%; } .same-services__nav-container { display: flex; justify-content: space-between; margin-bottom: 40px; } .same-services__nav-wrapper { display: flex; position: relative; } .same-services__nav-wrapper .swiper-button-prev, .same-services__nav-wrapper .swiper-button-next { position: relative; left: unset; right: unset; } .same-services__nav-wrapper .swiper-button-prev::after, .same-services__nav-wrapper .swiper-button-next::after { content: ""; } .science-products__container { padding: 0 40px; } .science-products__cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px 16px; } .science-product-card__wrapper { height: 100%; padding: 20px; background-color: #F9F9F9; border-radius: 16px; } .science-product-card__image-wrapper { margin-bottom: 36px; } .science-product-card__image-wrapper img { -o-object-fit: cover; object-fit: cover; width: 122px; height: 122px; border-radius: 600px; } .science-product-card__title { margin-bottom: 12px; font-size: 18px; font-weight: 600; line-height: 140%; } .science-product-card__text { margin-bottom: 12px; } .science-product-card__more { font-size: 16px; font-weight: 600; line-height: 140%; color: #381CB9; } .license-card__wrapper { display: flex; justify-content: center; align-content: center; background-color: #F5F4FA; padding: 20px; border-radius: 20px; height: 200px; } .license-card__image-wrapper { display: flex; justify-content: center; align-items: center; } .license-card__image-wrapper img { cursor: pointer; -o-object-fit: cover; object-fit: cover; max-width: 194px; max-height: 161px; } .resource-card__wrapper { position: relative; display: flex; justify-content: center; align-items: center; color: #fff; height: 356px; border-radius: 16px; overflow: hidden; } .resource-card__wrapper:hover img { transform: scale(1.2); } .resource-card__title { max-width: 289px; font-size: 22px; font-weight: 700; line-height: 140%; text-align: center; position: relative; z-index: 10; } .resource-card__image-wrapper { position: absolute; height: 100%; } .resource-card__image-wrapper img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; transition: transform linear 0.2s; } .resources__container { padding: 0 40px; } .resources__lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; margin-bottom: 100px; } .resources__title { font-size: 32px; font-weight: 600; line-height: 140%; margin-bottom: 40px; } .resources-group-item:last-child .resources-group-item__wrapper { padding-bottom: 0; border: unset; } .resources-group-item:first-child .resources-group-item__wrapper { padding-top: 0; } .resources-group-item__wrapper { display: flex; padding: 18px 0; border-bottom: 1px solid #DFDDE7; } .resources-group-item__name-wrapper { display: flex; gap: 16px; margin-right: auto; } .resources-group-item__number { font-size: 16px; font-weight: 400; line-height: 140%; color: #381CB9; } .resources-group-item__name { font-size: 18px; font-weight: 600; line-height: 140%; } .resources-group-item__desc { max-width: 762px; margin-right: 85px; } #burger-menu { display: none; cursor: pointer; height: 27px; width: 27px; overflow: visible; position: relative; z-index: 3; margin-left: 25px; } #burger-menu span { display: block; height: 4px; opacity: 1; position: absolute; background-color: #fff; transition: 0.3s ease-in-out; right: 0px; top: 13px; width: 27px; } #burger-menu span:before, #burger-menu span:after { display: block; height: 4px; opacity: 1; position: absolute; background-color: #fff; transition: 0.3s ease-in-out; } #burger-menu span:before, #burger-menu span:after { content: ""; } #burger-menu span:before { left: 0px; top: -10px; width: 16px; } #burger-menu span:after { left: 0px; top: 10px; width: 20px; } #burger-menu.close span { transform: rotate(-45deg); top: 13px; width: 27px; background-color: #fff; } #burger-menu.close span:before { top: 0px; transform: rotate(90deg); width: 27px; background-color: #fff; } #burger-menu.close span:after { top: 0px; left: 0; transform: rotate(90deg); opacity: 0; width: 0; background-color: #fff; } .error-404__container { display: flex; flex-direction: column; align-items: center; height: 30vh; } .error-404__title { font-size: 56px; font-weight: 600; line-height: 120%; } .error-404 p { max-width: 700px; margin-bottom: 30px; text-align: center; } .error-404__subtitle { font-size: 44px; font-weight: 600; line-height: 120%; margin-bottom: 30px; } @media (max-width: 1400px) { .contacts__wrapper { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1200px) { h2 { font-size: 40px; } .header__page-title-wrapper .header__title { font-size: 40px; } .header-menu { display: flex; flex-direction: column; align-items: center; z-index: 2; visibility: hidden; min-width: 100%; min-height: 100%; position: fixed; top: 0; left: 0; height: 0; opacity: 0; text-align: center; padding-top: 20px; transition: all 0.3s ease-in-out; } .header-menu__nav ul { flex-direction: column; } .footer__nav { gap: 30px; margin-right: 50px; } .footer__policy { margin-right: 340px; } .contacts-card__text { font-size: 17px; } .page-inner__grid { grid-template-columns: repeat(2, 1fr); } .page-inner__article-block { grid-gap: 30px; grid-template-columns: 49% auto; } .services-inner__text-wrapper { flex-direction: column; } .services-inner__button-wrapper { align-items: start; } .resource-card { display: flex; flex-direction: column; justify-content: center; align-items: center; } .resource-card__wrapper { width: 430px; } .resources__lab-grid { grid-template-columns: auto; } .resources-group-item__wrapper { gap: 20px; } #burger-menu { display: block; } .error-404__subtitle { font-size: 40px; } } @media (max-width: 992px) { .button { font-size: 17px; } h2 { font-size: 30px; } section { padding-bottom: 80px; } p { font-size: 14px; margin-bottom: 10px; } input, textarea { font-size: 14px; } .header__subtitle { font-size: 14px; } .header__title { font-size: 40px; } .header__text { font-size: 17px; } .header__advantages { flex-direction: column; } .header__page-title-wrapper .header__title { font-size: 30px; } .header__advantages-item { font-size: 14px; } .footer__top { flex-direction: column; gap: 20px; } .footer__nav { flex-direction: column; } .footer__bottom { flex-direction: column; gap: 20px; } .safety__text-wrapper { flex-direction: column; } .safety__button-wrapper { justify-content: start; } .safety-card__title { font-size: 14px; } .reputation__text-wrapper { flex-direction: column; } .reputation__text { order: 2; } .reputation__button-wrapper { align-items: start; order: 1; } .reputation__button { font-size: 17px; } .reputation__more-button { font-size: 14px; } .reputation__title-logo-wrapper { flex-direction: column; } .reputation-card__title { font-size: 30px; } .reputation-card__text { font-size: 14px; } .contacts-card__text { font-size: 16px; } .services__title-wrapper { flex-direction: column; } .services__wrapper { grid-template-columns: repeat(2, 1fr); } .services-card__number { font-size: 17px; } .services-card__title { font-size: 17px; } .projects__cards { grid-template-columns: repeat(2, 1fr); } .project-card__title { font-size: 14px; } .page-inner__article-block { grid-gap: 30px; grid-template-columns: auto; } .page-inner__button-more { font-size: 14px; } .services-inner__button { font-size: 17px; } .services-inner__more-button { font-size: 14px; } .science-products__cards { grid-template-columns: repeat(2, 1fr); } .science-product-card__title { font-size: 17px; } .science-product-card__more { font-size: 14px; } .resources-group-item__number { font-size: 14px; } .resources-group-item__name { font-size: 17px; } .error-404__title { font-size: 40px; } .error-404__subtitle { font-size: 30px; } } @media (max-width: 768px) { .button { font-size: 16px; } h2 { font-size: 20px; } section { padding-bottom: 60px; } p { font-size: 13px; margin-bottom: 8px; } input, textarea { font-size: 13px; } .header__subtitle { font-size: 13px; } .header__title { font-size: 30px; } .header__text { font-size: 16px; } .header__page-title-wrapper .header__title { font-size: 20px; } .header__advantages-item { font-size: 13px; } .clients__container { padding: 0 30px; } .clients__wrapper { grid-template-columns: repeat(2, 1fr); } .contacts__container { padding: 0 30px; } .contacts__wrapper { grid-template-columns: auto; } .safety__container { padding: 0 30px; } .safety-card__title { font-size: 13px; } .reputation__container { padding: 0 30px; } .reputation__button { font-size: 16px; } .reputation__more-button { font-size: 13px; } .reputation-card__title { font-size: 18px; } .reputation-card__text { font-size: 13px; } .contacts-card__text { font-size: 15px; } .feedback__inputs-row { flex-wrap: wrap; } .services__container { padding: 0 30px; } .services-card__number { font-size: 16px; } .services-card__title { font-size: 16px; } .projects__container { padding: 0 30px; } .project-card__title { font-size: 13px; } .page-inner__container { padding: 0 30px; } .page-inner__button-more { font-size: 13px; } .services-inner__container { padding: 0 30px; } .services-inner__button { font-size: 16px; } .services-inner__more-button { font-size: 13px; } .images-complicated-grid { grid-template-areas: "first first second second" "third third fourth fourth"; } .images-complicated-grid__second { height: 359px; } .images-complicated-grid__third { height: 359px; } .images-complicated-grid__fourth { height: 359px; } .same-services__container { padding: 0 30px; } .science-products__container { padding: 0 30px; } .science-product-card__title { font-size: 16px; } .science-product-card__more { font-size: 13px; } .resources__container { padding: 0 30px; } .resources-group-item__number { font-size: 13px; } .resources-group-item__name { font-size: 16px; } .resources-group-item__desc { margin-right: 0; } .error-404__title { font-size: 30px; } .error-404__subtitle { font-size: 20px; } .images-complicated-grid__first { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; } .images-complicated-grid__second { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 5; -ms-grid-column-span: 3; } .images-complicated-grid__third { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .images-complicated-grid__fourth { -ms-grid-row: 3; -ms-grid-column: 5; -ms-grid-column-span: 3; } } @media (max-width: 576px) { .header__upper-button { display: none; } .swiper-button-next, .swiper-button-prev { display: none; } .clients__container { padding: 0 20px; } .clients__wrapper { grid-template-columns: auto; } .contacts__container { padding: 0 20px; } .safety__container { padding: 0 20px; } .reputation__container { padding: 0 20px; } .reputation__button { width: 100%; } .reputation__cards-wrapper { grid-template-columns: repeat(2, 1fr); } .feedback__title-wrapper { flex-wrap: wrap; } .feedback__submit { flex-wrap: wrap; } .services__container { padding: 0 20px; } .services__wrapper { grid-template-columns: auto; } .projects__container { padding: 0 20px; } .projects__cards { grid-template-columns: auto; grid-gap: 30px 20px; } .page-inner__container { padding: 0 20px; } .page-inner__grid { grid-template-columns: auto; } .page-inner-card__image-wrapper img { height: 330px; } .services-inner__container { padding: 0 20px; } .images-complicated-grid { grid-template-areas: "first" "second" "third" "fourth"; } .images-complicated-grid__first { height: 228px; } .images-complicated-grid__second { height: 228px; } .images-complicated-grid__third { height: 228px; } .images-complicated-grid__fourth { height: 228px; } .same-services__container { padding: 0 20px; } .science-products__container { padding: 0 20px; } .science-products__cards { grid-template-columns: auto; } .resource-card__wrapper { width: 100%; } .resources__container { padding: 0 20px; } .resources-group-item__wrapper { flex-direction: column; } .images-complicated-grid__first { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .images-complicated-grid__second { -ms-grid-row: 3; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .images-complicated-grid__third { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 1; } .images-complicated-grid__fourth { -ms-grid-row: 7; -ms-grid-column: 1; -ms-grid-column-span: 1; } }