File: /var/www/vhosts/greenclinic.kz/test.greenclinic.kz/src/assets/css/style.css
@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Regular.eot');
src: local('Montserrat Regular'), local('Montserrat-Regular'),
url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Regular.woff') format('woff'),
url('../fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Bold.eot');
src: local('Montserrat Bold'), local('Montserrat-Bold'),
url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Bold.woff') format('woff'),
url('../fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Light.eot');
src: local('Montserrat Light'), local('Montserrat-Light'),
url('../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Light.woff') format('woff'),
url('../fonts/Montserrat-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat-Italic.eot');
src: local('Montserrat Italic'), local('Montserrat-Italic'),
url('../fonts/Montserrat-Italic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-Italic.woff') format('woff'),
url('../fonts/Montserrat-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat-SemiBold.eot');
src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
url('../fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-SemiBold.woff') format('woff'),
url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat-ExtraBold.eot');
src: url('../fonts/Montserrat-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Montserrat-ExtraBold.woff') format('woff'),
url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
html,
body {
overflow-x: hidden;
letter-spacing: -0.03em;
font-family: Montserrat;
}
a {
text-decoration: none !important;
}
body * {
outline: none;
}
.container {
max-width: 1440px;
}
body{
padding-top: 140px;
background-image: url(../img/body__bg.png);
background-size: contain;
font-size: 16px;
}
/*----------------------------------------------*/
.pagination__block {
margin-top: 30px;
text-align: center;
}
.pagination__block span {
border: 1px solid #CFE4F1;
box-sizing: border-box;
border-radius: 10px;
opacity: 1;
background: transparent;
width: 18px;
height: 11px;
margin: 0 10px !important;
transition: all 0.5s ease;
}
/*------------------header----------------------*/
header {
background: rgba(255, 255, 255, 0.9);
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
padding: 40px 0;
position: fixed;
width: 100%;
z-index: 10;
top: 0;
}
.header__row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -15px;
}
.header__logo {
margin-right: 50px;
}
.header__right {
display: flex;
align-items: center;
}
.header__menu .menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.header__menu .menu > li > a {
font-weight: normal;
font-size: 18px;
color: #0F1721;
transition: all 0.5s ease;
}
.header__menu .menu > li > a:hover {
color: #85C418;
}
.header__menu .menu > li {
margin: 0 20px;
padding: 10px 0;
}
.header__contact {
display: flex;
align-items: center;
margin-left: 20px;
}
.header__contact--info {
display: flex;
flex-direction: column;
align-items: center;
}
.header__contact--icon {
margin-right: 10px;
}
.header__contact--phone {
font-weight: bold;
font-size: 18px;
color: #0F1721 !important;
}
a.header__contact--popap {
font-weight: 600;
font-size: 16px;
color: #85C418 !important;
text-decoration: underline !important;
cursor: pointer;
}
.header__lang--click {
display: none;
}
.header__lang--menu ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: flex-end;
}
.header__lang--menu ul li {
margin-left: 15px;
}
.header__lang--menu ul li a {
color: #0F1721;
font-weight: normal;
font-size: 18px;
transition: all 0.5s ease;
}
.header__lang--menu ul li:hover a,
.header__lang--menu ul li.header__lang--active a {
color: #85C418;
}
a.version_visually {
font-weight: 500;
font-size: 14px;
color: #85C418 !important;
line-height: 1.2;
display: block;
text-decoration-line: underline !important;
white-space: nowrap;
transition: all 0.5s ease;
cursor: pointer;
}
.header__right--version {
text-align: right;
margin-bottom: 12px;
}
.header__right--row {
margin-left: 30px;
}
a.version_visually:hover {
text-decoration-line: none !important;
}
.header__right--click{
display: none;
}
/*------*/
ul.sub-menu {
position: absolute;
list-style: none;
text-align: center;
background: #FFFFFF;
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
padding: 30px 20px;
max-width: 200px;
left: 50%;
transform: translateX(-50%);
width: 200px;
opacity: 0;
visibility: hidden;
top: 100%;
}
ul.sub-menu li a {
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
transition: all 0.5s ease;
}
ul.sub-menu li {
margin-bottom: 20px;
}
ul.sub-menu li:last-child {
margin-bottom: 0;
}
li.menu-item-has-children {
position: relative;
}
.menu-item-has-children:hover ul.sub-menu {
opacity: 1;
visibility: visible;
}
ul.sub-menu li a:hover {
color: #85C418;
}
.menu-item-has-children > a {
position: relative;
padding-right: 28px;
}
.menu-item-has-children > a:after {content: "";width: 18px;height: 18px;position: absolute;background: url(../img/menu__arrow.svg);right: 0;top: 50%;transform: translateY(-50%);}
.header__mobile {
position: fixed;
top: 0;
z-index: 20;
background: #FFFFFF;
max-width: 400px;
right: 0;
width: 100%;
height: 100vh;
display: none;
transform: translateX(100%);
transition: all 0.5s ease;
background-image: url(../img/mobile_bg.png);
background-size: cover;
background-repeat: no-repeat;
}
.header__mobile--top {
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.header__mobile--body .menu {
margin: 0;
padding: 0;
list-style: none;
}
.header__mobile--body {
display: flex;
justify-content: space-around;
overflow-y: auto;
height: calc(100vh - 125px);
}
.header__mobile--body .menu > li > a {
font-weight: 500;
font-size: 30px;
color: #0F1721;
}
.header__mobile--body .menu > li {
text-align: center;
margin: 15px 0;
}
.menu-item-has-children > a:after {
width: 24px;
height: 24px;
background-size: contain;
}
a.click__mobile {
display: block;
}
.mobile__menu--active {
transform: translateX(0);
}
html.body--hidden {
overflow: hidden;
}
.header__mobile--body ul.sub-menu {
position: relative;
visibility: visible;
opacity: 1;
box-shadow: none;
margin: 0;
width: auto;
margin: 0 auto;
max-width: 220px;
padding: 0;
background: transparent;
/* display: none; */
}
.header__mobile--body ul.sub-menu a {
font-weight: 500;
font-size: 18px;
color: #5B5B5B;
}
.header__mobile--body ul.sub-menu li {
margin: 15px 0;
}
/*--------------------------banner-----------------------------*/
.section__banner {
position: relative;
height: 730px;
display: flex;
overflow: hidden;
padding-top: 180px;
}
.section__banner--img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.section__banner--img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section__banner--title {
font-weight: 800;
font-size: 72px;
color: #85C418;
text-transform: uppercase;
}
.section__banner--text {
font-weight: normal;
font-size: 18px;
color: #0F1721;
max-width: 600px;
font-weight: 600;
}
.section__banner--linck {
margin-top: 30px;
}
.section__banner--linck a {
font-weight: normal;
font-size: 18px;
color: #0F1721;
background: #FFCF55;
border-radius: 2px;
padding: 15px 100px;
display: inline-block;
}
.button__shadow{
position: relative;
}
.button__shadow:before{
content: "";
position: absolute;
background: #FFCF55;
filter: blur(16px);
border-radius: 2px;
height: 50%;
width: 90%;
z-index: -1;
left: 50%;
transform: translateX(-50%);
bottom: -3px;
transition: all 1s ease;
opacity: 1;
}
.button__shadow:hover:before {
bottom: 0;
opacity: 0;
}
/*-----------------------------------------------------*/
.section__margin{
margin-bottom: 65px;
}
/*----------------advantages---------------------------*/
.section__advantages {
margin-top: -70px;
}
.advantage__item--img {
text-align: center;
margin-bottom: 5px;
}
.advantage__item--info {
text-align: center;
}
.advantage__item--title {
font-weight: bold;
font-size: 24px;
color: #0F1721;
margin-bottom: 15px;
}
.advantage__item--text {
font-weight: normal;
font-size: 16px;
color: #525252;
}
/*-----------------------------------------------------*/
.section__title--main {
font-weight: 800;
font-size: 48px;
text-transform: uppercase;
background: linear-gradient(90deg, #85C418 0%, #9CDE2A 77%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.section__title {
padding-left: 245px;
position: relative;
}
.section__title--main:before {
content: "";
left: 0;
width: 215px;
height: 3px;
background: rgba(133, 196, 24, 0.13);
position: absolute;
top: 35px;
transform: translateY(-50%);
}
.section__title--desc {
font-size: 18px;
color: #0F1721;
max-width: 415px;
font-weight: 600;
}
.services__number--item {
background: #FFFFFF;
box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.05);
border-radius: 10px;
height: 215px;
text-align: center;
padding-top: 55px;
}
.services__number--row {
margin: 0 -15px;
margin-bottom: 50px;
}
.services__number--number {
font-weight: 800;
font-size: 72px;
color: #85C418;
line-height: 1;
position: relative;
z-index: 1;
}
.services__number--number:before {content: attr(data-number);position: absolute;font-weight: 800;font-size: 144px;color: #F5F5F5;z-index: -3;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.services__number--text {
line-height: 1.2;
color: #0F1721;
font-weight: bold;
font-size: 20px;
z-index: 2;
position: relative;
}
/*--------------------------------------------------------*/
.services__filter--button {
display: flex;
justify-content: center;
margin-bottom: 25px;
}
.services__filter {
margin: 0 -15px;
}
.services__filter__button--item {
font-weight: 600;
font-size: 22px;
color: #7B7B7B;
margin: 0 40px;
cursor: pointer;
transition: all 0.5s ease;
}
.services__filter__button--active {
color: #85C418;
}
.services__filter--content {
display: flex;
margin: 0 -15px;
flex-wrap: wrap;
}
.services__filter--item {
width: 215px;
height: 210px;
background: #FFFFFF;
box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.05);
border-radius: 10px;
margin: 15px;
padding: 40px 5px 20px 5px;
text-align: center;
position: relative;
overflow: hidden;
transition: all 1s;
}
.services__filter--item{
width: 0;
height: 0;
margin: 0;
opacity: 0;
padding: 0;
}
.services__filter__item--active {
width: 215px;
height: 210px;
opacity: 1;
margin: 15px;
padding: 40px 5px 20px 5px;
}
.services__filter__item--img {
height: 66px;
margin-bottom: 30px;
}
.services__filter__item--title {
font-weight: bold;
font-size: 16px;
}
.services__filter__item--linck {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 0;
opacity: 0;
}
.section__margin .section__title {
margin: 0 -15px;
margin-bottom: 40px;
}
/*-----------------------------------------*/
.consultant__form--title {
text-align: center;
font-weight: bold;
font-size: 48px;
color: #0F1721;
margin-bottom: 40px;
}
.consultant__form form {
max-width: 1080px;
margin: 0 auto;
}
.form__input {
background: #FFFFFF;
border: 1px solid #F2F2F2;
box-sizing: border-box;
border-radius: 2px;
width: 100%;
padding: 15px 25px;
color: #0F1721;
height: 58px;
}
.form__input[type="submit"] {
background: #FFCF55;
border-radius: 2px;
font-weight: normal;
font-size: 18px;
border: 0;
}
.consultant__block {
height: 330px;
display: flex;
align-items: center;
background: url(../img/form__bg.jpg);
background-size: cover;
position: relative;
}
.consultant__block:before {content: "";position: absolute;background: rgba(255, 255, 255, 0.76);top: 0;left: 0;right: 0;bottom: 0;z-index: 0;}
.consultant__block .container {
position: relative;
z-index: 1;
}
.form__input-bott_desc {
text-align: center;
margin-top: 25px;
font-weight: normal;
font-size: 18px;
color: #9C9C9C;
}
/*--------------------------------------------*/
.slider__block{
overflow: hidden;
}
.pagination__block span.swiper-pagination-bullet-active {
background: #85C418;
border-color: #85C418;
width: 30px;
}
.partners__item {
background: #FFFFFF;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
height: 110px;
}
/*---------------------------------------------*/
.contact__info--item {
display: flex;
margin-bottom: 20px;
}
.contact__item--left {
margin-right: 20px;
padding-left: 10px;
position: relative;
}
.contact__item--left:before {content: "";width: 37px;height: 37px;background: #FFCF55;position: absolute;border-radius: 100%;z-index: -1;left: 0;}
.contact__item--text p {
margin: 0;
}
.contact__item--title {
color: #85C418;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
margin-bottom: 1px;
}
.contact__item--text {
font-weight: normal;
font-size: 16px;
color: #0F1721;
}
.contact__info--item:last-child {
margin-bottom: 0;
}
.contact__item--text a {
color: initial;
}
.contact__map img {
max-width: 100%;
}
.contact__item--calendar {
display: flex;
align-items: center;
height: 100%;
}
.contact__item--calendar div {
margin-right: 20px;
}
.contact__item--calendar div:last-child {
margin-right: 0;
}
.calendar__red {
color: #DA3F3F;
}
.contact__info {
margin-left: -15px;
}
/*-------------------footer---------------------*/
footer {
background: #FCFCFC;
padding: 65px 0 50px 0;
}
.footer__center {max-width: 100%;width: 830px;}
.footer__row {
margin: 0 -15px;
display: flex;
justify-content: space-between;
}
.footer__left--social {
display: flex;
margin-bottom: 35px;
}
.footer__left--logo {
margin-bottom: 35px;
}
.social__item {
margin-right: 25px;
}
.social__item:last-child {
margin-right: 0;
}
.footer__left--popap {
background: #85C418;
border-radius: 2px;
font-weight: normal;
font-size: 14px;
color: #FFFFFF !important;
padding: 15px 25px;
cursor: pointer;
}
.footer__right ul.menu {
margin: 0;
padding: 0;
list-style: none;
}
.footer__right ul.menu li a {
font-weight: bold;
font-size: 16px;
color: #939393;
}
.footer__right ul.menu li {
margin-bottom: 19px;
}
.footer__right ul.menu li:last-child {
margin-bottom: 0;
}
.footer__center--title {
font-weight: bold;
font-size: 16px;
color: #939393;
margin-bottom: 15px;
}
.footer__center ul.menu {
margin: 0;
padding: 0;
list-style: none;
}
.footer__center ul.menu li a {
font-weight: normal;
font-size: 14px;
color: #CACACA;
}
.footer__center ul.menu li {
margin-bottom: 10px;
}
.footer__center ul.menu li:last-child {
margin-bottom: 0;
}
.phone__fixed {
position: fixed;
right: 50px;
z-index: 5;
bottom: 50px;
animation:circle-fill-anim 2.3s infinite ease-in-out;
}
@keyframes circle-fill-anim {
0% {transform: rotate(10deg)}
50% {transform: rotate(-10deg)}
100% {transform: rotate(10deg)}
}
.services__filter--content.swiper-wrapper {
width: auto;
}
/*-------------------about-------------------------*/
.page__banner--bread {
margin: 35px 0;
}
ul.bread-crambs {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 10px 25px;
background: #FAFAFA;
}
ul.bread-crambs li {
margin-right: 40px;
font-weight: normal;
font-size: 14px;
}
ul.bread-crambs li a {
color: #BEBEBE;
text-decoration: none;
}
ul.bread-crambs li span {
color: #85C418;
}
.page__blocktext {
font-size: 18px;
}
.page__blocktext p {
margin-bottom: 30px;
}
.page__blocktext ul {
padding-left: 25px;
}
.page__about--img {
position: relative;
height: 100%;
}
.page__about--img img {
position: absolute;
height: 100%;
width: calc(100vw / 2);
object-fit: cover;
}
.page__about--mission {
background: #85C418;
border-radius: 2px;
padding: 40px 120px;
color: #fff;
}
.about__mission--title {
font-weight: bold;
font-size: 24px;
margin-bottom: 15px;
}
.about__mission--text {
font-size: 18px;
}
.certificate__item a {
display: block;
position: relative;
}
.certificate__item {
position: relative;
}
.certificate__item a:before {content: "";position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: linear-gradient(0deg, rgba(133, 196, 24, 0.7), rgba(133, 196, 24, 0.7));opacity: 0;transition: all 0.5s ease;}
.certificate__item img {
width: 100%;
}
.certificate__item:hover a:before,
.certificate__item:hover a:after {
opacity: 1;
}
.certificate__item a:after {
content: "";
width: 44px;
height: 44px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url(../img/eye__icon.svg);
opacity: 0;
transition: all 0.5s ease;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/*-----------------------------*/
.departments__item {
background: #FFFFFF;
box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.05);
border-radius: 2px;
overflow: hidden;
margin-bottom: 25px;
}
.departments__item:last-child {
margin-bottom: 0;
}
.departments__item--img img {
width: 100%;
height: 390px;
}
.departments__item--info {
height: 100%;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.departments__item--title {
font-weight: bold;
font-size: 36px;
color: #85C418;
margin-bottom: 5px;
line-height: 1.2;
}
.departments__item--text {
font-weight: normal;
font-size: 16px;
color: #0F1721;
}
.departments__item--linck a {
display: inline-block;
color: #0F1721;
font-weight: normal;
font-size: 18px;
background: #FFCF55;
border-radius: 2px;
padding: 15px 100px;
text-decoration: none;
}
.departments__item--linck {
margin-top: 20px;
}