.border666 {border: 1px solid #666;} .breadcrumbs { display: flex; align-items: center; max-width: 100%; list-style: none; overflow-x: auto; white-space: nowrap; font-size: 14px; height: 1.45em; margin-bottom: 40px } .breadcrumbs-item:first-child::before { content: ''; position: absolute; left: 0; bottom: 0; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33301 15.8337V8.33366C3.33301 8.06977 3.39217 7.81977 3.51051 7.58366C3.62884 7.34755 3.7919 7.1531 3.99967 7.00033L8.99967 3.25033C9.29134 3.0281 9.62467 2.91699 9.99967 2.91699C10.3747 2.91699 10.708 3.0281 10.9997 3.25033L15.9997 7.00033C16.208 7.1531 16.3713 7.34755 16.4897 7.58366C16.608 7.81977 16.6669 8.06977 16.6663 8.33366V15.8337C16.6663 16.292 16.503 16.6845 16.1763 17.0112C15.8497 17.3378 15.4575 17.5009 14.9997 17.5003H12.4997C12.2636 17.5003 12.0658 17.4203 11.9063 17.2603C11.7469 17.1003 11.6669 16.9025 11.6663 16.667V12.5003C11.6663 12.2642 11.5863 12.0664 11.4263 11.907C11.2663 11.7475 11.0686 11.6675 10.833 11.667H9.16634C8.93023 11.667 8.73245 11.747 8.57301 11.907C8.41356 12.067 8.33356 12.2648 8.33301 12.5003V16.667C8.33301 16.9031 8.25301 17.1012 8.09301 17.2612C7.93301 17.4212 7.73523 17.5009 7.49967 17.5003H4.99967C4.54134 17.5003 4.14912 17.3373 3.82301 17.0112C3.4969 16.685 3.33356 16.2925 3.33301 15.8337Z' fill='%23A5F211' /%3E%3C/svg%3E") } .breadcrumbs-item { position: relative; padding: 0 12px; font-size: 14px; line-height: 1 } .breadcrumbs-item:not(:first-child):before { content: ""; position: absolute; top: 0; bottom: 0; width: 1.5px; height: 16px; margin: auto 0; left: -1px; background-color: currentColor; transform: rotate(14deg); pointer-events: none } .breadcrumbs-item:first-child { padding-left: 24px } .about-slide { padding: 0 10px; display: flex; flex-direction: column; gap: 30px } .about-card1 { position: relative; padding: 40px; height: 280px; display: flex; flex-direction: column; justify-content: space-between; color: var(--light); overflow: hidden } .about-card1 svg { transition: .3s } .about-card1:hover svg { scale: 1.1 } .about-card1::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(36, 36, 36, .8) } .about-card2 { display: flex; flex-direction: column; justify-content: space-between; padding: 40px; border: 1px solid var(--stroke); color: var(--dark); gap: 30px; min-height: 360px; overflow: hidden } .about-card2 img, .about-card3 img { transition: .3s } .about-card2:hover img, .about-card3:hover img { scale: 1.041 } .about-card3 { padding: 40px; height: 280px; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--primary); color: var(--dark); overflow: hidden } @media screen and (max-width:992px) { .slider-button { width: 165px; height: 70px; display: flex; align-items: center; padding-left: 80px; background-color: #b9ff25; clip-path: polygon(0% 0%, 100% 0, 156px 100%, 0 100%) } .slider-button-next { transform: rotate(180deg); background-color: #a5f211 } } @media screen and (min-width:992px) { .breadcrumbs { margin-bottom: 60px } .project-button { position: absolute; bottom: 47%; z-index: 1; left: 4%; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background-color: #fff; clip-path: polygon(0% 0%, 100% 0, 156px 100%, 0 100%); cursor: pointer; transition: .5s ease-out } .project-button:hover { transition: .3s ease-out; background-color: var(--primary) } .project-button.slider-button-next { transform: rotate(180deg); left: initial; right: 4% } .about-card1, .about-card2, .about-card3 { padding: 30px } .about-card2 { height: 394px } .about-slide { justify-content: space-between; gap: 50px } } @media screen and (min-width:1600px) { .about-slide { padding: 0 20px } .about-card1, .about-card2, .about-card3 { padding: 40px } } .service-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 360px; padding: 40px; color: var(--light); background-color: var(--dark); overflow: hidden } .service-card .service-range-card-image { opacity: .2 } .service-card:hover .service-range-card-image { transform: scale(1.06) } @media screen and (min-width:992px) { .service-card { height: 500px } } @media screen and (min-width:1600px) { .service-card { height: 650px } } .project-slide.swiper-slide { opacity: .4; transition: .8s; cursor: pointer } .project-slide.swiper-slide-active { opacity: 1 } .project-slide .project-card { pointer-events: none } .project-slide.swiper-slide-active .project-card { pointer-events: all } .project-card { display: flex; flex-direction: column; gap: 20px } .project-card-image { position: relative; padding: 20px; width: 100%; height: 340px } .project-card-inner { padding: 10px 24px; border-radius: 4px; font-weight: 600; font-size: 12px; backdrop-filter: blur(30px); background: rgba(36, 36, 36, .4); color: var(--white) } .project-card-icon { position: absolute; right: 20px; bottom: 20px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background-color: var(--primary) } .project-card-text { display: block; display: -webkit-box; height: 2.9em; line-height: 1.45em; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 600 } @media screen and (min-width:992px) { .project-card-image { padding: 30px; height: 420px } .project-card-icon { right: 0; bottom: -80px } .project-card-text { font-size: 21px; max-width: 540px } } .purchase-card { width: 100%; display: flex; flex-direction: column; gap: 18px; padding: 20px; background-color: var(--white); color: var(--dark); overflow: hidden } .product-image { width: 30% } .purchase-card-status { position: relative; padding-left: 20px; color: #61b124; line-height: 1.45em } .purchase-card-status::before { content: ''; position: absolute; left: 0; top: 0; bottom: 4px; margin: auto 0; width: 10px; height: 10px; border-radius: 50%; background-color: #61b124 } .purchase-card-status.archive { color: #f27d34 } .purchase-card-status.archive::before { background-color: #f27d34 } @media screen and (min-width:992px) { .purchase-card { justify-content: space-between; padding: 30px } } @media screen and (min-width:1600px) { .project-card-image { height: 520px } .project-card-inner { font-size: 14px } .purchase-card { gap: 24px; padding: 50px } } .news-card { display: flex; flex-direction: column; gap: 20px } .news-card-image { position: relative; width: 100%; padding-bottom: 100%; flex-shrink: 0 } .news-card-category { position: absolute; left: 20px; top: 20px; font-size: 12px; font-weight: 600; padding: 10px 23px; border-radius: 4px; backdrop-filter: blur(20px); background: rgba(36, 36, 36, .4); color: var(--light) } .news-card-icon { position: absolute; right: 0; bottom: 0; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; background-color: var(--primary) } .news-card-text { display: block; display: -webkit-box; height: 2.9em; line-height: 1.45em; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 600 } @media screen and (min-width:1600px) { .news-card-text { font-size: 21px } .news-card-category { font-size: 14px } } .contact-decor { padding: 22px 0; border-right: 1px solid rgba(246, 246, 246, .1) } .footer-link { color: var(--grey); font-size: 14px; font-weight: 600; line-height: 1.45em; transition: .3s; text-align: left } .footer-link:hover { color: var(--primary) } .footer-card { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 15px; background: #2b2b2b } .footer-card-inner { position: relative; display: flex; align-items: flex-end; height: 80px; padding: 10px; flex: 1 } .footer-card-inner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 90%) } .technique-inner { display: flex; flex-wrap: wrap; row-gap: 10px } .technique-inner-card { position: relative; height: 340px } .kanglim-logo, .terrex-logo { position: absolute; left: 30px; bottom: 30px; width: 145px; height: 70px } @media screen and (min-width:992px) { .technique-inner { margin-top: -110px; height: 420px } .technique-inner-card { height: 100% } .technique-section-button { position: absolute; display: flex; justify-content: center; bottom: 40px; left: 0; right: 0; margin: auto } .terrex-logo { right: 30px; left: initial } } @media screen and (min-width:1600px) { .footer-card { padding: 30px } .technique-inner { height: 520px } .kanglim-logo, .terrex-logo { width: 208px; height: 100px } } .team-section-inner { position: relative; background-color: var(--light); --block-angle: 0; clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - var(--block-angle)), calc(100% - var(--block-angle)) 100%, 0 100%); color: var(--dark); overflow: hidden; padding: 40px 20px 330px } .team-inner-decor, .team-section-decor { display: none } .employee-image { position: absolute; bottom: 0; left: -50px; height: 330px } @media screen and (min-width:992px) { .team-section-inner { --block-angle: 100px; display: flex; justify-content: flex-end; overflow: hidden; padding: 60px 15vw 60px 20px; height: 480px } .team-inner-decor { position: absolute; display: block; left: 0; top: 0; bottom: 0; height: 100% } .team-section-decor { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; display: block } .employee-image { left: 0; width: 48%; height: auto } } @media screen and (min-width:1600px) { .team-section-inner { --block-angle: 150px; padding: 80px 15vw 80px 20px; height: 540px } } @media screen and (min-width:1900px) { .team-section-inner { height: 640px } } .house-image-icon { position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background-color: var(--primary) } @media screen and (min-width:992px) { .house-image-icon { width: 80px; height: 80px } } @media screen and (min-width:1600px) { .house-image-icon { width: 100px; height: 100px } } .vacancy-card { display: flex; flex-direction: column; background-color: var(--white) } .vacancy-card-image { width: 100%; padding-bottom: 90% } .callback-decor { display: none } .callback-contacts { padding: 40px 20px 60px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(../assets/callback-decor.png) } @media screen and (min-width:992px) { .callback-decor { position: absolute; display: block; left: 0; top: 0; bottom: 0; height: 100% } } .job-modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0 } .job-modal-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 153; cursor: crosshair; backdrop-filter: blur(10px); background: rgba(0, 0, 0, .3) } .job-modal-container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 154; overflow-y: auto; padding: 10px; width: 100%; max-width: 1106px; margin: auto; display: flex } .job-modal-content { position: relative; width: 100%; background: var(--white); color: var(--dark); margin: auto } .job-modal.open { display: block; position: relative; z-index: 152 } .close-job-modal-btn { position: absolute; z-index: 9; top: 20px; right: 20px; width: 24px; height: 24px; border: none; cursor: pointer; background: 0 0; transition: opacity .2s ease-in; display: flex; align-items: center; justify-content: center; color: var(--dark) } .close-job-modal-btn:hover { opacity: .8 } .vacancy-job-modal-image { width: 100%; padding-bottom: 85% } .vacancy-job-modal-image-inner { display: none } .vacancy-info { padding: 20px 20px 40px } @media screen and (min-width:1000px) { .job-modal-container { padding: 20px } .job-modal-content { display: flex; gap: 40px; min-height: 632px } .vacancy-job-modal-image { position: relative; width: 100%; flex: 1; padding-bottom: initial } .vacancy-job-modal-image-inner { position: absolute; display: block; right: 60px; bottom: 60px; background-color: var(--primary); padding: 14px 18px; font-size: 18px; font-weight: 600; text-transform: uppercase } .vacancy-info { padding: 60px; width: auto; flex: 1 } } .categories { display: flex; overflow-x: auto; white-space: nowrap } .category-item { padding: 34px 16px; position: relative; text-transform: uppercase; font-size: 12px; font-weight: 500; overflow: hidden; color: var(--grey); font-family: inherit; flex-shrink: 0; white-space: nowrap } .category-item::after { content: ''; position: absolute; left: -100%; bottom: 0; height: 2px; width: 100%; background-color: var(--primary); transition: .5s } .category-item.selected { color: var(--dark); font-weight: 600 } .category-item:hover { color: var(--dark) } .category-item.selected::after { left: 0 } .pagination { display: flex; text-align: center; flex-wrap: wrap; padding: 16px 10px; justify-content: space-between; background-color: var(--white) } .pg-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; transition: .4s ease-in-out; color: var(--dark); cursor: pointer; font-weight: 500; font-size: 18px; background: var(--light) } .pg-btn:hover { background: rgba(165, 242, 17, .3) } .pg-btn.active { background: #a5f211; color: var(--dark) } .news-cover { height: 440px; background-color: var(--dark) } .article p { font-size: 14px; line-height: 1.45em; font-weight: 500 } .article h2, .article h3, .article h4 { margin-bottom: 20px; text-transform: uppercase; font-weight: 900 } .article h2, .article h3 { font-size: 21px; line-height: 1.45em } .article h4 { font-size: 18px; line-height: 1.25em } .article figure { display: block; margin: 0; padding: 30px 0 } .article figure img { width: 100% } .article figure figcaption { text-align: center; font-size: 12px } .article p+h2, .article p+h3, .article p+h4 { margin-top: 60px } @media screen and (min-width:992px) { .pagination { padding: 16px 20px } .news-cover { height: auto; padding-bottom: 40% } .article h2, .article h3 { font-size: 2.08vw } .article h4 { font-size: 1.67vw } } .room-swipers-block { display: flex; flex-direction: column; gap: 10px; height: 430px } .room-slide-image { display: block; width: 100%; height: 100%; object-fit: cover } .roomSwiper2 { width: 100%; --swiper-theme-color: #a5f211; } .roomSwiper { width: 100%; height: 80px; flex-shrink: 0 } .roomSwiper2-slide { width: 100%; height: 340px } .roomSwiper-slide { width: 100%; height: 80px; cursor: pointer } .roomSwiper .swiper-slide-thumb-active { opacity: .4 } .project-info-list { display: block; width: 100%; margin-left: 20px; font-family: inherit } .project-info-list li { list-style: decimal } @media screen and (min-width:992px) { .room-swipers-block { flex-direction: row-reverse; gap: 20px; height: 570px } .roomSwiper2-slide { height: 570px } .roomSwiper { height: 570px; width: 100px } .roomSwiper2 { height: 570px; width: 100% } } @media screen and (min-width:1600px) { .article p { font-size: 16px } .room-swipers-block { height: 640px } .roomSwiper { height: 640px; width: 120px } .roomSwiper2, .roomSwiper2-slide { height: 640px } } .service-main-section { position: relative; padding-top: 60px; padding-bottom: 60px; min-height: 500px; color: #fff; background-color: var(--dark) } .service-main-section-bg::after { content: ''; position: absolute; inset: 0; background: rgba(36, 36, 36, .8) } .service-main-section-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover } .service-range-card { position: relative; display: block; color: var(--light); background-color: var(--dark); overflow: hidden } .service-range-card-image { position: absolute; inset: 0; object-fit: cover; transition: transform .9s; display: block; width: 100%; height: 100% } .service-range-card:hover .service-range-card-image { transform: scale(1.06) } .service-range-card::before { content: ''; display: block; width: 100%; padding-bottom: 100% } .service-range-card-inner { position: absolute; padding: 30px; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; background: linear-gradient(180deg, rgba(36, 36, 36, 0) 0, rgba(36, 36, 36, .8) 100%) } @media screen and (min-width:992px) { .service-main-section { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 100px; height: calc(100vh - 173px); min-height: 540px } .service-range-card-inner { padding: 50px; gap: 20px } .service-main-section-inner { display: flex; flex-direction: column; backdrop-filter: blur(30px); background: rgba(255, 255, 255, .1); padding: 20px; flex: 1; height: 240px } } .bb-green, .bb-red { position: relative } .bb-green::before, .bb-red::before { content: ''; position: absolute; bottom: -3px; left: 30px; right: 30px; height: 6px } .bb-red::before { background-color: #dd2b13 } .bb-green::before { background-color: var(--primary) } @media screen and (min-width:1600px) { .service-main-section-inner { padding: 40px; height: 280px } .bb-green::before, .bb-red::before { left: 40px; right: 40px } } .area-card { background-color: var(--white); width: 100% } .area-card-image { background-color: var(--dark); padding-bottom: 67% } .area-card-inner { display: flex; flex-direction: column; gap: 20px; padding: 30px } @media screen and (min-width:1600px) { .area-card-inner { padding: 40px } } .general-contracting-image { width: 100%; padding-bottom: 74%; background-image: url(../assets/general-contracting-image.jpg); --block-angle: 50px; clip-path: polygon(0% var(--block-angle), var(--block-angle) 0%, 100% 0, 100% calc(100% - var(--block-angle)), calc(100% - var(--block-angle)) 100%, 0 100%) } .business-success-image { width: 100%; height: 340px; background-image: url(../assets/business-success-image.jpg); --block-angle: 50px; clip-path: polygon(0% 0%, calc(100% - var(--block-angle)) 0%, 100% var(--block-angle), 100% 100%, var(--block-angle) 100%, 0% calc(100% - var(--block-angle))) } .gallery-item { position: relative; display: block; width: 100%; background-color: var(--dark) } .gallery-item__inner { position: absolute; display: flex; flex-direction: column; align-items: center; top: 50%; left: 10%; right: 10%; opacity: 0; transition: .5s; font-size: 16px; font-weight: 500; text-align: center; color: #fff; pointer-events: none; padding-top: 50px } .gallery-item__inner::before { content: ''; display: block; position: absolute; top: -30px; width: 60px; height: 60px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNTYiIHZpZXdCb3g9IjAgMCA1NiA1NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTQyLjA3MTcgMzguNzcyNEw1Mi4wNjUzIDQ4Ljc2MzdMNDguNzYzNyA1Mi4wNjUzTDM4Ljc3MjQgNDIuMDcxN0MzNS4wNTQ3IDQ1LjA1MTkgMzAuNDMwNyA0Ni42NzI4IDI1LjY2NiA0Ni42NjZDMTQuMDc0IDQ2LjY2NiA0LjY2NjAyIDM3LjI1OCA0LjY2NjAyIDI1LjY2NkM0LjY2NjAyIDE0LjA3NCAxNC4wNzQgNC42NjYwMiAyNS42NjYgNC42NjYwMkMzNy4yNTggNC42NjYwMiA0Ni42NjYgMTQuMDc0IDQ2LjY2NiAyNS42NjZDNDYuNjcyOCAzMC40MzA3IDQ1LjA1MTkgMzUuMDU0NyA0Mi4wNzE3IDM4Ljc3MjRaTTM3LjM5MSAzNy4wNDFDNDAuMzUxNiAzMy45OTUzIDQyLjAwNTMgMjkuOTEzNSA0MS45OTkzIDI1LjY2NkM0MS45OTkzIDE2LjY0MyAzNC42ODkgOS4zMzI2OCAyNS42NjYgOS4zMzI2OEMxNi42NDMgOS4zMzI2OCA5LjMzMjY4IDE2LjY0MyA5LjMzMjY4IDI1LjY2NkM5LjMzMjY4IDM0LjY4OSAxNi42NDMgNDEuOTk5MyAyNS42NjYgNDEuOTk5M0MyOS45MTM1IDQyLjAwNTMgMzMuOTk1MyA0MC4zNTE2IDM3LjA0MSAzNy4zOTFMMzcuMzkxIDM3LjA0MVoiIGZpbGw9IiNBNUYyMTEiIC8+IDwvc3ZnPg=="); background-size: contain; background-repeat: no-repeat; background-position: center; left: 0; right: 0; margin: 0 auto } .gallery-item::before { content: ''; display: block; width: 100%; padding-bottom: 100%; background: rgba(0, 0, 0, 0); transition: .3s } .gallery-item:hover .gallery-item__inner { opacity: 1 } .gallery-item:hover::before { background: rgba(0, 0, 0, .5) } @media screen and (min-width:992px) { .general-contracting-section { padding-right: 6vw } .general-contracting-image { --block-angle: 80px } .business-success-section { padding-right: 10vw } .business-success-image { --block-angle: 80px; height: auto; padding-bottom: 74% } } .current-object-image { width: 100%; padding: 20px 20px 64%; background-color: var(--dark) } @media screen and (min-width:1600px) { .business-success-image, .general-contracting-image { --block-angle: 100px } .current-object-image { height: auto; padding: 30px 30px 64% } } .services-review-card-image { width: 100%; padding-bottom: 64% } @media screen and (min-width:992px) { .swiper-container { padding-left: 7.5vw; padding-right: 7.5vw } .slider-button-desktop { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; clip-path: polygon(0% 0%, 100% 0, calc(100% - 10px) 100%, 0 100%); background-color: var(--primary); flex-shrink: 0; cursor: pointer } .slider-button-next { transform: rotate(180deg) } .specequipmentAdvantages-pagination { display: flex; justify-content: center; --swiper-pagination-bottom: 0; --swiper-pagination-bullet-horizontal-gap: 5px; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-width: 30px; --swiper-pagination-bullet-height: 6px; --swiper-pagination-bullet-border-radius: 0; --swiper-pagination-bullet-inactive-color: #e6e6e6 } .swiper-pagination-bullet { transition: .5s } .specequipmentAdvantages-pagination .swiper-pagination-bullet-active { width: 70px } } .question-decor { position: absolute; left: 20px; bottom: -24px; width: 28px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0C28 0 18.4548 3.00039 12.0201 8.50029C5.58543 14.0002 0 24 0 24L1.33514e-06 0H28Z' fill='%23242424' /%3E%3C/svg%3E") } .cost-section-image { position: absolute; top: 320px; left: -62%; right: -62%; margin: auto; width: 700px } .cost-section-about-wrapper { padding-top: 10px; height: 110px; clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); margin-bottom: 10px } .cost-section-about { position: relative; width: 100%; height: 100px; padding: 20px; background-color: var(--primary) } .cost-section-about::after { content: ''; position: absolute; left: 20px; top: -10px; width: 20px; height: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H20V20H0V0Z' fill='%23242424' /%3E%3Cpath d='M5 9.27293H9.21286V5H10.765V9.27293H15V10.7718H10.765V15H9.21286V10.7718H5V9.27293Z' fill='%23F6F6F6' /%3E%3C/svg%3E") } .cost-section-case-card { position: relative; width: 100%; background-color: var(--dark); color: var(--light) } .cost-section-case-card::before { content: ''; display: block; width: 100%; padding-bottom: 100%; background: linear-gradient(180deg, rgba(36, 36, 36, 0) 65%, #242424 100%) } .cost-section-case-card-inner { position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: 20px; display: flex; flex-direction: column; justify-content: space-between } @media screen and (min-width:992px) { .cost-section-image { width: 62vw; right: 0; top: -50px; left: initial } .cost-section-about-wrapper { position: absolute; display: flex; width: auto; max-width: 300px; padding-top: 15px; margin: 0; height: auto } .cost-section-about-wrapper1 { top: 0; right: 12% } .cost-section-about-wrapper2 { top: 33%; right: 31% } .cost-section-about-wrapper3 { top: 42%; right: 2% } .cost-section-about-wrapper4 { top: 66%; right: 20% } .cost-section-about { padding: 30px; height: auto } .cost-section-about::after { content: ''; position: absolute; left: 30px; top: -15px; width: 30px; height: 30px } .cost-section-case-card-inner { padding: 40px } } @media screen and (min-width:1366px) { .cost-section-image { width: 70vw } } .developer-apartments-pain-card { position: relative; width: 100%; display: flex; flex-direction: column; gap: 30px; padding: 30px; background-color: var(--white) } .developer-apartments-pain-card::before { content: ''; display: block; position: absolute; height: 6px; left: 30px; right: 30px; bottom: -3px; background-color: #dd2b13 } .callback-decor-arrow { display: none } @media screen and (min-width:992px) { .developer-apartments-pain-card { flex-direction: row; align-items: center } .developer-apartments-pain-card::before { height: auto; width: 6px; left: -3px; right: initial; bottom: 30px; top: 30px } .callback-decor-arrow { position: absolute; top: 0; bottom: 0; left: 27vw; margin: auto; display: block; width: 27vw; user-select: none; pointer-events: none } } @media screen and (min-width:1600px) { .developer-apartments-pain-card { padding: 40px } .developer-apartments-pain-card::before { bottom: 40px; top: 40px } } .additional-advantages-card, .additional-advantages-card-small { position: relative; width: 100%; background-color: var(--dark); color: var(--light) } .additional-advantages-card::before { content: ''; display: block; width: 100%; padding-bottom: 100%; background: linear-gradient(180deg, rgba(36, 36, 36, 0) 65%, #242424 100%) } .additional-advantages-card-small::before { content: ''; display: block; width: 100%; padding-bottom: 70%; background: linear-gradient(180deg, rgba(36, 36, 36, 0) 65%, #242424 100%) } .additional-advantages-card-decor { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center; background-color: var(--primary) } .additional-advantages-card-text { position: absolute; bottom: 20px; left: 20px; right: 20px } @media screen and (min-width:992px) { .additional-advantages-card-small { height: auto } .additional-advantages-card-small::before { padding-bottom: 100% } } .custom-sorting-select-wrapper { width: 100%; max-width: 177px; height: 40px; display: flex; align-items: center; border: 1px solid #eaeaea; border-radius: 8px; padding: 0 10px; font-size: 12px; font-family: inherit } .sorting-select select { appearance: none; outline: 0; border: 0; box-shadow: none; color: var(--siniy); background-color: var(--belyy); cursor: pointer; padding: 0 22px 0 4px; font-size: 12px } .sorting-select select::-ms-expand { display: none } .sorting-select { height: 40px; width: 100%; position: relative; display: flex; overflow: hidden } .sorting-select::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; pointer-events: none; width: 10px; height: 10px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.9125 3.57949L5 5.48783L3.0875 3.57949L2.5 4.16699L5 6.66699L7.5 4.16699L6.9125 3.57949Z' fill='%23004B85' /%3E%3C/svg%3E") } .cf-search { width: 100%; max-width: 155px } .cf-search__input { width: 100%; padding: 10px 12px 10px 40px; font-size: 12px; border: 1px solid #ccc; border-radius: 8px; outline: 0; transition: .2s; height: 40px } .cf-search__input:focus { border-color: #004b85; box-shadow: 0 0 0 2px rgba(74, 222, 128, .2) } .cf-search__icon { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 16px; height: 16px; fill: #9ca3af; pointer-events: none } @media screen and (max-width:992px) { .custom-sorting-select-wrapper { position: absolute; bottom: -60px; right: 10px } .cf-search { position: absolute; left: 10px; bottom: -60px } } @media screen and (min-width:992px) { .cf-search, .custom-sorting-select-wrapper { position: relative; max-width: 200px; font-size: 14px } } .custom-select { position: relative; width: 100% } .select-button { width: 100%; height: 66px; background-color: var(--primary); color: var(--dark); cursor: pointer; text-align: left; padding: 0 26px; text-transform: uppercase; font-size: 16px; display: flex; align-items: center; position: relative; font-family: var(--ff2); font-weight: 600; outline: 10px solid var(--white) } .options { width: 100%; overflow-y: auto; background-color: var(--white); flex-direction: column; gap: 17px; outline: 10px solid var(--white) } .option { height: 66px; width: 100%; background-color: var(--white); border: 0; color: var(--dark); border: none; padding: 0 20px; text-transform: uppercase; font-size: 16px; cursor: pointer; flex-shrink: 0; font-family: var(--ff2); font-weight: 600; transition: .3s; text-align: center } .option:hover { background-color: #8dd00e } .active.option { background-color: var(--primary) } @media screen and (max-width:992px) { .select-button:after { content: ''; position: absolute; right: 30px; top: 0; bottom: 0; margin: auto; width: 24px; height: 24px; background-position: center; background-size: 24px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.91 8.59L12.5 13.17L17.09 8.59L18.5 10L12.5 16L6.5 10L7.91 8.59Z' fill='%23242424' /%3E%3C/svg%3E") } .options { position: absolute; top: 76px; left: 0; display: none } .options.open { display: flex } } .tab-content { display: none } .tab-content.active { display: block } .flex1 { flex: 1 } .a { border-bottom: 1px solid #4176c4; color: #4176c4 } @media screen and (min-width:992px) { .select-button { display: none } .order1--lg { order: 1 } } .bg-darkening1, .bg-darkening2 { position: relative; background-color: var(--dark); color: var(--light) } .bg-darkening1::before, .bg-darkening2::before { content: ''; position: absolute; inset: 0 } .bg-darkening1::before { background: rgba(0, 0, 0, .7) } .bg-darkening2::before { background: rgba(36, 36, 36, .8) } .op-5 { opacity: .5 } .bb { border-bottom: 1px solid var(--stroke) } .border { border: 1px solid var(--stroke) } .bg-blur { backdrop-filter: blur(30px); background: rgba(255, 255, 255, .1) } .top-text { position: absolute; right: -25px; top: -20px; font-size: 15px; font-weight: 900; text-transform: uppercase; color: inherit } .grey { color: var(--grey) } .bg-primary { background-color: var(--primary) } .primary { color: var(--primary) } .bg-white { background-color: var(--white) } .white { color: var(--white) } .light { color: var(--light) } .bg-light { background-color: var(--light) } .bg-dark { background-color: var(--dark) } .bg-dark-grey { background-color: #2e2e2e } .dark { color: var(--dark) } .green { color: #61b124 } .bg-green { background-color: #61b124 } .bg-beige { background-color: #fafff0 }