/*------------COLORS---------------*/
:root {
  --grey: #ECECEC;
  --primary-black: #121212;
  --secondary-black: #3E3E3E;
  --blue: #3755FA;
  --white: #FEFEFE;
  --info-light: #E3F1FF;
  --light-grey: #F8F9FA;
  --blue-bg: #F6FBFF;
  --red: #DC3545;
  --light-red: #FBDADA;
  --grey-primary: #8A8A8A;
}


/*----------COLORS-END-------------*/
a {
  color: #3755FA; 
}

a:hover {
    text-decoration: none;
}

/*------------FONTS---------------*/
.roboto-12 {
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
}

.roboto-16 {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 18.75px;
  text-align: left;
}

.fs-14 {
  font-size: 14px;
}

.fw-400 {
  font-weight: 400!important;
  line-height: 24px;
}

.fw-600 {
  font-weight: 600!important;
}

.roboto-18 {
font-family: "Roboto", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 28px;
text-align: left;
}

.roboto-20 {
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left;

}

.roboto-14 {
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 16.41px;
}

.roboto-32 {
font-family: "Roboto", sans-serif;
font-size: 32px;
font-weight: 600;
line-height: 37.5px;
text-align: left;
}

.roboto-44 {
  font-family: "Roboto", sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 51.56px;
  text-align: left;
}

.roboto-9 {
font-family: "Roboto", sans-serif;
font-size: 9px;
font-weight: 400;
line-height: 13.5px;
text-align: left;
}

.roboto-24 {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 20px;
  text-align: left;
}

.syncopate-36 {
  font-family: "Syncopate", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 37.48px;
  text-align: left;
}

.fs-24 {
  font-size: 24px!important;
}

.text-black {
  color: var(--primary-black)!important;
}

.text-blue {
  color: var(--blue);
}

.text-white {
  color: var(--white);
}

.text-dark-grey {
  color: var(--secondary-black)!important;
}

.text-red {
  color: var(--red);
}


/*----------FONTS-END-------------*/


/*----------TOP----------*/
.back-grey {
  background: var(--grey);
  height: 49px;
}
/*----------TOP-end----------*/

/*---------NAVBAR-----------*/
.h-96 {
  height: 96px;
}

.outlineBtn-blue {
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3755FA!important;
}

.outlineBtn-blue:hover {
  background: var(--info-light);
  color: var(--blue);
}

.logo-size {
  height: 53px;
  margin-left: 24px;
}
/*-------NAVBAR-END---------*/



#land-form .form-control:focus {
    box-shadow: none;
}

.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

/*---------section-1-----------*/
.img-background {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -100;
}

.p-relative {
  position: relative;
  width: 100%;
  height: 508px;
}

.banner-text {
  position: absolute;
  z-index: 0;
  top: 32px;
  left: 24px;
}

.banner-bgs {
  position: absolute;
  z-index: 0;
  bottom: 32px;
  left: 24px;
}

.banner-bg {
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--grey);
  padding: 6px 16px;
  font-size: 18px;
  margin-right: 10px;
  color: var(--black);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.banner-blue {
  background: #3755FA; //linear-gradient(180deg, #75B7FE 0%, #3755FA 100%);
  border-radius: 16px;
  padding: 24px 32px;
}

.whiteBtn {
  background: var(--white);
  border-radius: 8px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  min-height: 46px;
}

.whiteBtn:hover {
  background: var(--info-light);
  color: var(--blue);
}
/*---------section-1-end-----------*/
/*---------section-2-----------*/
.card-blue {
  background: var(--info-light);
  border: 1px solid var(--light-grey);
  border-radius: 16px;
  padding: 24px;
}

.card-blue img {
  width: 48px;
  height: 48px;
}

.blueBtn {
  background: #3755FA;//linear-gradient(180deg, #75B7FE 0%, #3755FA 100%);
  border-radius: 8px;
  padding: 16px 32px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
}

.blueBtn:hover {
  background: linear-gradient(180deg, #3F9BFF 0%, #1D40FC 100%);
  color: var(--white);
  text-decoration: none;
}

.card-light-blue {
  background: var(--blue-bg);
  border: 1px solid var(--light-grey);
  border-radius: 16px;
  padding: 24px;
}

.card-light-blue img {
  width: 48px;
  height: 48px;
}
/*---------section-2-end-----------*/
/*---------section-3-----------*/
.card-white {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: 15px;
  padding: 24px;
}

.card-white img {
  width: 64px;
  height: 64px;
}
/*-------section-3-end---------*/
/*---------section-4-----------*/
.bg-light-blue {
  background: var(--blue-bg);
}

.bg-white {
  background: var(--white)!important;
  border-color: var(--grey)!important;
}
/*-------section-4-end---------*/
/*---------section-5-----------*/
.card-work-white {
  background: var(--white);
  border: 1px solid var(--light-grey);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0px 2px 10px 0px #3755FA0D;
}

.red-badge {
  background: var(--light-red);
  border-radius: 8px;
  padding: 4px 6px;
  height: fit-content;
}

.white-badge {
  background: var(--white);
  border-radius: 8px;
  padding: 4px 6px;
  height: fit-content;
  width: fit-content;
  border: 1px solid var(--grey);
}

.info-light-badge {
  background: var(--info-light);
  border-radius: 8px;
  padding: 4px 6px;
  height: fit-content;
  width: fit-content;
}
/*-------section-5-end---------*/
/*---------section-6-----------*/
.photo-card {
  width: 100%;
  height: 292px;
  position: relative;

  border-radius: 15px;
}

.card-img {
  object-fit: cover;
}

.photo-title {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  z-index: 0;
  background: rgba(236, 236, 236, 0.8);
  border-radius: 8px;
  padding: 8px;
  border: 1px solid var(--grey);
}

.photo-icons {
  position: absolute;
  top: 12px;
  right: 8px;
  z-index: 0;
}

.photo-icon {
  background: rgba(236, 236, 236, 0.8);
  border-radius: 4.5px;
  padding: 4px 2px;
  border: 1px solid var(--grey);
}

/*-------section-6-end---------*/
/*---------section-7-----------*/
.card-light-blue-32 {
  background: var(--blue-bg);
  border: 1px solid var(--light-grey);
  border-radius: 32px;
  padding: 16px;
  position: relative;
  box-shadow: 0px 2px 15px 0px #3755FA26;
  
}

.text-bottom {
  position: absolute;
  bottom: 40px;
}
/*-------section-7-end---------*/
/*---------section-8-----------*/
.img-banners {
  position: relative;
  width: 100%;
  height: 496px;
}

.img-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -100;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.img-banner-title {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 0;
}

.mar-bot-40 {
  margin-bottom: 40px;
}
/*-------section-8-end---------*/
/*-----------footer-------------*/
.bg-gradient-blue {
  background: linear-gradient(180deg, #75B7FE 0%, #3755FA 100%);
}

.footer-link a:hover {
    text-decoration: underline;
}

.white-circle {
  background: var(--white);
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.circle-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mr-30 {
  margin-right: 30px;
}

.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mb-30 {
  margin-bottom: 30px;
}

.bg-dark-grey {
  background: var(--grey-primary);
  padding-top: 20px;
  padding-bottom: 20px;
}


/*---------footer-end-----------*/
/*------------form--------------*/
.form-bg-light {
  background: var(--light-grey);
  padding: 32px;
  border-radius: 16px;
}

#land-form .form-control {
    display: block;
    width: 100%;
    height: 100%;
    padding: 16px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dark-grey);
    background-color: var(--white);
    background-clip: padding-box;
    border: 1px solid var(--grey);
    border-radius: 8px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#land-form .as-form-item-custom {
    width: 98%;
    height: 100%;
}

#land-form .as-form-item {
    margin: 0 0;
    position: relative;
}

.footer-logo {
  height: 53px;
}
/*----------form-end------------*/
/*---------адаптив-----------*/
@media (max-width: 1919px) {
  .roboto-16 {
    font-size: 12px;
    line-height: 14.75px;
  }
  
  .syncopate-36 {
    font-size: 30px;
  }
  
  .outlineBtn-blue {
    padding: 12px 24px;
  }
  
  .h-96 {
    height: 84px;
  }
  
  .py-40 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  
  .logo-size {
    height: 32px;
    margin-left: 24px;
  }
  
  .mt-40 {
    margin-top: 30px;
  }
  
  .mb-40 {
    margin-bottom: 30px;
  }
  
  .roboto-44 {
    font-size: 32px;
    line-height: 41.56px;
  }
  
  .fs-24 {
    font-size: 18px!important;
  }
  
  .banner-bg {
    padding: 4px 12px;
    font-size: 14px;
  }
  
  .roboto-24 {
    font-size: 16px;
    line-height: 18px;
  }
  
  .roboto-18 {
    font-size: 12px;
    line-height: 20px;
  }
  
  .whiteBtn {
    padding: 10px 20px;
  }
  
  .banner-blue {
    padding: 20px 28px;
  }
  
  .roboto-12 {
    font-size: 9px;
    line-height: 12px;
  }
  
  .roboto-32 {
    font-size: 26px;
    line-height: 30.5px;
  }
  
  .card-blue img {
    width: 30px;
    height: 30px;
  }
  
  .roboto-20 {
    font-size: 14px;
    line-height: 24px;
  }
  
  .card-blue {
    padding: 20px;
  }
  
  .blueBtn {
    padding: 14px 28px;
  }
  
  .card-light-blue img {
    width: 30px;
    height: 30px;
  }
  
  .card-light-blue {
    padding: 20px;
  }
  
  .card-white img {
    width: 52px;
    height: 52px;
  }
  
  .card-white {
    padding: 10px;
  }
  
  .photo-card {
    height: unset;
    aspect-ratio: 1.5/1;
  }
  
  .photo-title {
    left: 8px;
    right: 8px;
    bottom: 2%;
    padding: 4px;
  }
  
  .photo-icons {
    top: 2px;
  }
  
  .card-light-blue-32 {
    padding: 16px;
  }
  
  .text-bottom {
    bottom: 22px;
  }
  
  .img-banners {
    height: 365px;
  }
  
  .img-banner-title {
    top: 30px;
    left: 30px;
  }
  
  .mb-30 {
    margin-bottom: 20px;
  }
  
  .mb-3 {
    margin-bottom: 0.5rem!important;
  }
  
  .footer-img {
    max-width: 100%;
    height: 50px;
  }
  
  svg {
    width: 18px;
    height: 18px;
  }
  
  .img-pay-s {
    height: 30px;
  }
  
  .img-pay-l {
    height: 66px;
  }
  
  .footer-logo {
  height: 32px;
  }
  
}

@media (max-width: 1569px) {
  .p-relative {
    height: 400px;
  }
}

@media (max-width: 1199px) {
  .p-relative {
    height: 340px;
  }
  
  .roboto-44 {
    font-size: 26px;
    line-height: 31.56px;
  }
  
  .fs-24 {
    font-size: 16px!important;
  }
  
  .banner-bg {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .roboto-18 {
    font-size: 12px;
    line-height: 16px;
  }
  
  .banner-blue {
    padding: 14px 14px;
  }
  
  .roboto-20 {
    font-size: 14px;
    line-height: 20px;
  }
  
  .card-work-white {
    padding: 10px;
  }
  
  .roboto-24 {
    font-size: 14px;
    line-height: 18px;
}
  .roboto-20 {
    font-size: 12px;
    line-height: 20px;
}
  .photo-card {
    height: 162px;
}
  .roboto-16 {
    font-size: 11px;
    line-height: 12.75px;
  }
  
  .roboto-32 {
    font-size: 22px;
    line-height: 30.5px;
  }
  
  .img-banners {
    height: 305px;
  }
  
  .logo-size {
    margin-left: 24px;
  }
  
}

@media (max-width: 991px) {
  .syncopate-36 {
    font-size: 26px;
}
  .mr-5 {
    margin-right: 2rem!important;
}
  
  .rating img {
    height: 14px;
}
  
  .img-background {
    object-fit: cover;
}
  
  .banner-text {
    top: 26px;
    left: 20px;
}
  .banner-bgs {
    position: absolute;
    z-index: 0;
    bottom: 26px;
    left: 20px;
}
  .blueBtn {
    padding: 14px 20px;
}
  .photo-card {
    height: 260px;
}
  
  .photo-title {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 4px;
}
  
  .photo-icons {
    top: 8px;
}
  
  .roboto-32 {
    font-size: 20px;
    line-height: 24.5px;
}
  
  .img-banners {
    height: 215px;
}
  .img-banner-title {
    top: 15px;
    left: 15px;
    right: 15px;
}
  
  .img-pay-s {
    height: 20px;
  }
  
  .img-pay-l {
    height: 45px;
  }
  
  .logo-size {
    margin-left: 20px;
  }
}

@media (max-width: 767px) {
  .element-hidden-sm {
    display: none!important;
  }
  
  .sm-mt-15 {
    margin-top: 15px!important;
  }
  
  .lh-14 {
    line-height: 14px!important;
  }
  
  .sm-mr-05 {
    margin-right: 0.5rem;
  }
  
  .banner-blue {
    margin-top: 10px;
  }
  
  .footer-logo {
    width: 126px;
  }
  
  .bg-dark-grey {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .nav-link {
    text-align: end!important;
  }
  
  .navbar-light .navbar-toggler {
    color: rgba(0,0,0, 1)!important;
    border-color: transparent!important;
  }
  
  .navbar-toggler {
    padding: 0!important;
    font-size: 1.25rem!important;
    line-height: 1!important;
    background-color: transparent!important;
    border: 0px solid transparent!important;
    border-radius: 0.25rem!important;
  }
  
  .swiper-pagination {
    position: unset!important;
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  
  .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,100%))!important;
    height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,10px))!important;
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius,32px)!important;
    background: var(--swiper-pagination-bullet-inactive-color,var(--light-grey))!important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1)!important;

}
  
  .swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: linear-gradient(180deg, #75B7FE 0%, #3755FA 100%)!important;
}

  .card-light-blue {
    height: 290px!important;
}
  
  .card-blue {
    height: 290px!important;
}
  .card-white {
    padding: 16px;
    height: 279px!important;
}
  
  .photo-card {
    height: 200px;
}
  
  
  .section-column {
    display: flex; 
    flex-direction: column;
  }
  
  .ord-1 {
    order: 1;
  }
  
  .ord-2 {
    order: 2;
  }
  
  .ord-3 {
    order: 3;
  }
  
  .ord-4 {
    order: 4;
  }
  
  .img-pay-s {
    height: 15px;
  }
  
  .img-pay-l {
    height: 30px;
  }
  
}

@media (min-width: 768px) {
  .element-hidden {
    display: none!important;
  }
  
}

@media (min-width: 575px) {
  .img-hidden {
    display: none!important;
  }
  
}

@media (max-width: 575px) {
  .img-hidden-sm {
    display: none!important;
  }
  
  .py-40 {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  
  .mb-40 {
    margin-bottom: 12px;
  }
  
  .mt-40 {
    margin-top: 12px;
  }
  
  .card-blue img {
    width: 48px;
    height: 48px;
}
  .roboto-24 {
    font-size: 20px;
    line-height: 23.44px;
}
  .roboto-20 {
    font-size: 16px;
    line-height: 24px;
}
  
  .card-light-blue {
    height: 333px!important;
}
  
  .card-blue {
    height: 333px!important;
}
  
  .fs-20-sm {
    font-size: 20px;
    line-height: 23.44px;
  }
  
  .photo-card {
    height: 100%;
  }
  
  .roboto-20 {
    font-size: 14px;
    line-height: 24px;
  }
  
  .banner-text {
    top: 15px;
    left: 15px;
  }
  
  .banner-bgs {
    bottom: 15px;
    left: 15px;
  }
  
  .form-bg-light {
    padding: 26px;
  }
  
  .card-white {
    padding: 16px;
    height: 215px!important;
  }
  
  .mb-sm {
    margin-bottom: 1rem!important;
    margin-left: 15px;
  }
  
  .btn-fs-20 {
    font-size: 20px!important;
    line-height: 23.44px!important;
  }
  
  .btn-fs-16 {
    font-size: 16px!important;
    line-height: 18.75px!important;
  }
  
  .img-pay-s {
    height: 10px;
  }
  
  .img-pay-l {
    height: 25px;
  }
  
}

/*---------адаптив-end-----------*/
.swiper-slide:nth-child(1n) {
      width: 90%;
    }

    .swiper-slide:nth-child(2n) {
      width: 90%;
    }

    .swiper-slide:nth-child(3n) {
      width: 90%;
    }

.swiper-slide:nth-child(4n) {
      width: 90%;
    }

.swiper-slide:nth-child(5n) {
      width: 90%;
    }

.swiper-slide:nth-child(6n) {
      width: 90%;
    }

.swiper-slide:nth-child(7n) {
      width: 90%;
    }

.black-link a {
  color: var(--primary-black)!important;
}

.black-link a:hover {
  color: var(--blue)!important;
}

.blackBtn {
  background: var(--primary-black);
}

.blackBtn:hover {
  background: var(--secondary-black);
}

.navbar {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap; 
}

.fa-star:before {
    content: url(/uploads/makeup/img/rating-star.svg)!important;
}