:root {
  --main-color: #36187d;
  --hover-color: #35b8fc;
}
html,body {
  scroll-behavior: smooth;
}
body {
  background-color: #f2f3f7;
}
#headerWrapper {
  box-shadow: 0 0 20px #2222;
}
#burgerDesktop::before,
#burgerDesktop::after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  background: currentColor;
  border-radius: 3px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#burgerDesktop::before {
  top: 0;
  width: 20px;
}
#burgerDesktop::after {
  bottom: 0;
  width: 12px;
}
#burgerDesktop:hover {
  color: var(--hover-color);
}
#burgerDesktop.active {
  height: 12px;
}
#burgerDesktop.active::before,
#burgerDesktop.active::after {
  width: 15px;
  border-radius: 0;
}
#burgerDesktop.active::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
#burgerDesktop.active::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
.toptobtm {
  animation: slideUp 6s infinite ease-in-out;
}

@keyframes slideUp {
  0%,
  25% {
    transform: translateY(0%);
  }
  50%,
  75% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
#heroPrev svg,
#heroNext svg {
  fill: white;
}
.spreadBtn::before,
.spreadBtn::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 16px;
  background: #fff;
}
.spreadBtn::before {
  top: 0;
}
.spreadBtn::after {
  bottom: 0;
}
#heroPrev,
#heroNext {
  transition: all 0.4s ease;
}
#heroPrev::before,
#heroNext::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  width: 140%;
  height: 140%;
  background: #36187d;
  transition: all 0.5s ease;
  border-radius: 50%;
  opacity: 0;
}
#heroPrev:hover::before,
#heroNext:hover::before {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}
#heroPrev:hover span,
#heroNext:hover span {
  opacity: 0;
}
.heroSwiper .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0005;
  z-index: 1;
}
.moreDetailHero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #36187d;
  opacity: 0;
  transition: all 0.4s ease;
  z-index: -1;
}
.moreDetailHero:hover::before {
  opacity: 1;
  width: 100%;
  transform: translate3d(-50%, -50%, 0);
}
.advantagesSwiper .swiper-slide {
  box-shadow: 0px 0px 10px #2222;
}
.anmRound {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}
.anmRound::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  width: 140%;
  height: 0;
  padding-top: 140%;
  transition: all 0.5s ease;
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
}
.anmRound:hover {
  color: #000;
}
#advantagesWrapper .anmRound::before {
  background: #fff;
}
.apMoreAr::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
#apartments article:hover .apMoreAr {
  width: 166px;
  padding: 0 40px;
  font-size: 16px;
  line-height: 22px;
}
#apartments article:hover img {
  transform: scale(1.1);
}
#apartments article a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 0, 0, 0.5)),
    to(rgba(0, 0, 0, 0.15))
  );
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.15) 100%
  );
  z-index: 2;
}
.fullLink::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-top: 2px solid;
  border-right: 2px solid;
  z-index: 2;
  border-top-color: #36187d;
  border-right-color: #36187d;
  transition: all 0.5s ease;
}
.issuesTopCenter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: url("/photos/icon_lightning.svg") no-repeat center / contain;
}
.allPosts:hover::after,
.issueLink:hover::after,
#purchaseWrapper a::after,
#notOnlyApartments article:hover button::after,
.newsCard:hover button::after,
#galleryWrapper .fullLink::after,
.sendFormCall::after,
.creditBtn::after,
.productFGet::after{
  border-top-color: #fff;
  border-right-color: #fff;
}
#issuesWrapper .anmRound::before,
#purchaseWrapper .anmRound::before,
#notOnlyApartments .anmRound::before,
.allPosts::before,
#galleryWrapper .anmRound::before,
.newsCard .anmRound::before,
.sendFormCall::before,
.productFGet::before{
  background: #36187d;
}
#issuesWrapper .anmRound:hover,
#purchaseWrapper .anmRound:hover,
#notOnlyApartments article:hover button,
.newsCard:hover button,
.allPosts:hover,
.sendFormCall:hover,
.creditBtn:hover,
.productFGet:hover{
  color: #fff;
}
.anmRound:hover::before,
#notOnlyApartments article:hover .anmRound::before,
.newsCard:hover .anmRound::before{
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}
.newsCard img {
  transition: transform 0.3s ease;
}
.newsCard:hover img {
  transform: scale(1.1);
}
#purchaseWrapper a:hover {
  border-color: #36187d;
}
#galleryWrapper .swiper-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0005;
}
.companyContent {
  transform: translateY(72px);
  padding: 0px 32px 32px 32px;
}
#companyWrapper article::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #35b8fc url("/photos/index_bg.png") no-repeat -500px -400px;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
#companyWrapper article * {
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
#companyWrapper article:hover::after {
  opacity: 1;
}
#companyWrapper a:hover .companyContent {
  transform: translateY(0);
}
#companyWrapper article:hover * {
  color: #fff;
}
#newsWrapper .spreadBtn::before,
#newsWrapper .spreadBtn::after {
  background-color: #36187d;
}
.newsNav .anmRound:hover .spreadBtn::before,
.newsNav .anmRound:hover .spreadBtn::after {
  opacity: 0;
}
.newsNav .anmRound::before {
  background: #36187d;
}
.callWrapper {
  background: url("/photos/hero1.jpg") center/cover no-repeat;
}
.callWrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0005;
}
#footerCenter ul li {
  line-height: 22px;
  margin-bottom: 8px;
}
#footerCenter ul li a {
  transition: all .2s ease-in-out;
}
#footerCenter ul li a:hover {
  color: #2228;
}
.footerSocial i {
  transition: all .2s ease-in-out;
}
.footerSocial i:hover {
  transform: scale(1.4);
}
.rangeParent {
  max-width: calc(100% - 56px);
}
.rangeRail {
  transition-property: width, height, left, right, top, bottom;
}
#breadcrumb {
    background: url("/photos/brbg.jpg") center/cover no-repeat;
}
#breadcrumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0005;
}
#aboutPageContents>div:nth-of-type(1) {
    display: flex;
    flex-wrap:wrap;
    gap: 6px;
}
.dleplyrplayer{
    max-width: 330px !important;
    height: 185px;
}

.contactTop>div>div:nth-of-type(1)>p:nth-of-type(1)::before{
    content: "";
    position: absolute;
    top: 15px;
    left: -15px;
    width: 8px;
    height: 8px;
    background-color: #f7931e;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.contactTop>div>div:nth-of-type(2)>p:nth-of-type(1)::before{
    content: "";
    position: absolute;
    top: 15px;
    left: -15px;
    width: 8px;
    height: 8px;
    background-color: #87c540;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.aPlan {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.aPlan:hover,
.newsCard:hover{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.mainProject img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: object-cover;
  left: 0;
  top: 0;
  z-index: 0;
  transition: all .5s ease-in-out;
}
.tabs__link.active {
    color: #fff;
}
.tab {
  display: none;
}
.tab img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#tab2 img,#tab3 img{
    object-fit: cover;
}
.tab.active {
  display: block;
}
.productLeftSide::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: #eee;
}
.productLeftSide img {
    width: 50%;
    object-fit:contain;
}
.productSharedsWay a:hover path {
    fill: #fff;
}
.productRightSideTop::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #eee;
}
.productInfo>div::before {
    content: "";
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: block;
    min-width: 4px;
    height: 1px;
    margin: 0 4px 4px;
    border-bottom: 1px dashed #e0e1e6;
    order:2;
}
.fancybox__container.has-toolbar {
    z-index: 9999999;
}
.galleryWrapper p {
    width: 33%;
    height: 300px;
}
.galleryWrapper>p a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.galleryWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.otherBlog {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.filterPlanBtn.active {
    background-color: #222;
    color: #fff;
}
.sideMenu {
    left: -100%;
}
.sideMenu.active {
    left: 0%;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.bloKv li.active {
    background: green;
    color: #fff;
}
@media only screen and (max-width: 768px) {
  .productLeftSide img {
      width: 100%;
  }
  #apartments article:hover .apMoreAr {
      width: 83px;
  }
  .apMoreAr::before {
      display: none;
  }
  .galleryWrapper p {
        width: 100%;
    }
}
