img,form,div,body,h1,h2,h3,h4,h5,p,input,select,textarea,dl,dt,dd,footer,header,menu,nav,ul,li,ol,figure,button,form { margin: 0; padding: 0; border: none; list-style: none; vertical-align: baseline; }
header, menu, nav, article, footer { display: block; }
html { box-shadow: none!important; scroll-behavior: smooth; }
:root { --main-color: #0A0A0A; --hover-color: #C8A96E; --second-color: #f4f4f4; }
body { font-family: "Sora", sans-serif; font-optical-sizing: auto; font-size: 15px; font-weight: 400; color: var(--main-color); text-align: center; }
p.clean { clear: both; margin: 0; height: 1px; }
a { text-decoration: none; color: var(--main-color); transition:all 0.5s ease; }
a:hover, #footer a:hover { color: var(--hover-color); }

li { vertical-align: top; }
img { max-width: 100%; height: auto; }

header:after, #about:after, article:after, #footer:after { content: ''; display: block; clear: both; }

#location:before, .yes:before, #advantages li:before { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: normal; }

header { background-size: cover; }
#header { background-color: rgba(0,0,0, 0.5); transition:all 0.5s ease; }
#header:hover { background-color: rgba(0,0,0, 0.65); }
#header-2 { position: relative; }
#logo, nav, #fb, #in { position: absolute; }
#logo { z-index: 3; left: 0; }
nav { z-index: 2; }
#phone { color: #FFF; color: var(--second-color); background: var(--main-color); }
#phone:hover { background: var(--hover-color); }
#fb { font-size: 22px; }

.hero-title { opacity: 0; transform: translateY(25px); filter: blur(6px); animation: titleIn 1s ease-out forwards; text-align: left; box-sizing: border-box; color: #FFF; }
@keyframes titleIn {
  0% { opacity: 0; transform: translateY(25px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
#location:before, .hero-title h1, .hero-title p { text-shadow: 2px 2px 12px rgba(0,0,0, 0.8); }
#location { font-size: 15px; margin-bottom: 0; position: relative; padding-left: 22px; }
#location:before { position: absolute; top: -1px; left: 0; font-size: 15px; content: "\e0c8"; }
.hero-title p { font-size: 19px; line-height: 25px; }
.hero-title a { text-transform: uppercase; font-size: 13px; padding: 15px 45px; color: #FFF; }
.hero-title li:nth-child(1) a { background: #bb9b5f; }
.hero-title li:nth-child(2) a { background: var(--main-color); }
.hero-title li a:hover { background: var(--hover-color); }

#about, #advantages, article { text-align: left; }

h1 { font-family: "Sora", sans-serif; }
article h1 { font-size: 33px; line-height: 35px; margin-bottom: 40px; font-weight: 300; }
h2,h3,h4 { font-family: "Sora", sans-serif; font-weight: 700; font-size: 21px; line-height: 22px; margin-bottom: 20px; transition:all 0.5s ease; }
h2 { font-weight: 300; font-size: 38px; line-height: 44px; }
#about p, #contact-l p, article p { line-height: 21px; margin-bottom: 20px; }
.bold, strong { font-weight: 700; }

.yes, .yes-2 { position: relative; padding-left: 30px; margin-bottom: 20px!important; }
.yes-2 { margin-bottom: 6px!important; }
.yes:before, .yes-2:before { position: absolute; top: -1px; left: 0; content: '\e86c'; color: var(--hover-color); font-size: 20px; }

#numbers { background: var(--second-color); }
#numbers ul, footer ul { display: grid; grid-template-columns: repeat(3,1fr); text-align: left; }
.numbers_value { color: var(--hover-color); font-weight: 700; font-size: 60px; line-height: 40px; margin-bottom: 10px; }
.numbers_value span { font-size: 40px; }

#advantages ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 50px; }
#advantages li { position: relative; padding-left: 58px; }
#advantages li:before { position: absolute; top: -3px; left: 0; color: var(--hover-color); font-size: 44px; }
#advantages li:nth-child(1):before { content: "\fff30"; }
#advantages li:nth-child(2):before { content: "\ef9f"; }
#advantages li:nth-child(3):before { content: "\f29c"; }
#advantages li:nth-child(4):before { content: "\f27e"; }
#advantages li:nth-child(5):before { content: "\ea3b"; }
#advantages li:nth-child(6):before { content: "\e87d"; }

#area-r { background: #12544f; color: #FFF; transition:all 0.5s ease; text-align: left; }
#area-r:hover { background: #0b433f; }
#area-r div, #contact-l div { box-sizing: border-box; }
#area-r p { margin-bottom: 40px; }

#anim { font-size: 13px; }

#for-sale { position: relative; }
.table { overflow-x:auto; margin-bottom: 20px; display: block!important; }
.styled-table { border-collapse: separate; border-spacing: 0; width: 100%; text-align: center; white-space: nowrap; }
.styled-table thead th { background: #FFF; color: var(--hover-color); text-transform: uppercase; font-size: 14px; border-top: 1px solid var(--hover-color); }
.styled-table th, .styled-table td { padding: 18px 15px; }
.styled-table thead th:first-child { border-top-left-radius: 6px; }
.styled-table thead th:last-child { border-top-right-radius: 6px; }
.styled-table tbody td { border-top: 1px solid #dddddd; background-color: #FFF; }
.styled-table tbody tr:nth-of-type(odd) td { background-color: #f3f3f3; }
.styled-table tbody tr.active-row td, .styled-table tbody tr:hover td { transition:all 0.5s ease; background-color: #e8eef7; }
tbody tr:last-child td:first-child { border-bottom-left-radius: 6px; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 6px; }
.styled-table tbody tr:last-of-type { border-bottom: 2px solid #a8a8a8; }

.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 15px; font-size: 14px; }
.status_0 .status { background: #e6f3e6; }
.status_1 .status { background: #fcfbe3; }
.status_2 .status { background: #faebeb; }
.status_0 .status span, .status_1 .status span, .status_2 span.status span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.status_0 .status span { background: #50b354; box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2); animation: statusPulse 2s ease-in-out infinite; }
.status_1 .status span { background: #e7dd43; box-shadow: 0 0 0 3px rgba(228, 219, 82, 0.3); }
.status_2 .status span { background: #ec8080; box-shadow: 0 0 0 3px rgba(236, 128, 128, 0.2); }

#for-sale .material-symbols-outlined { vertical-align: -2px; font-size: 21px; }
#for-sale .material-symbols-outlined:hover { cursor: pointer; pointer-events: auto !important; }
.tooltip_templates { display: none; }
.tooltip_zl { font-size: 11px; }

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

#tab-1, #tab-2 { background: #FFF; box-shadow: 0 2px 40px rgba(0,0,0,0.15); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#tab-2 { display: none; }
#tab-1:hover, #tab-2:hover { box-shadow: 0 2px 40px rgba(0,0,0,0.2); transition:all 0.5s ease; }
#tabs_title { text-align: left; }
#tabs_title li { background: rgba(248,248,248, 1); display: inline-block; font-weight: 700; vertical-align: top; border-top-left-radius: 6px; border-top-right-radius: 6px; }
#tabs_title li.active { background: #FFF; }
#tabs_title li a { display: block; padding: 13px 35px; }
#tabs_title li.active a { color: #c49a6c; }

#contact-l { background: var(--second-color); }
#contact-l div { text-align: left; }
#contact-l a[href^="tel:"], a[href^="mailto:"] { display: block; font-weight: 700; }
#contact-l a[href^="tel:"] { font-size: 30px; margin-bottom: 10px; }
#contact-l a[href^="mailto:"] { font-size: 25px; }
.contact-link a { border: 1px solid var(--main-color); font-size: 13px; }
.contact-link a:hover { color: #FFF; background: var(--hover-color); border-color: var(--hover-color); cursor: pointer;}
#investor { font-size: 13px; line-height: 16px!important; }
#contact-r iframe { border: 0; margin: 0; padding: 0; width: 100%; height: 100%; }

footer { font-size: 12px; }
footer ul, footer ul a { color: #7f7f7f; }
#admr { display: inline-block; width: 28px; height: 11px; background-image: url('../img/admr.png'); margin-left: 2px; }
#admr:hover { background-position: 0 -13px; }
#admr span { display: none; }

.reveal { opacity: 0; transform: translateY(60px); transition: opacity 2.0s ease, transform 1.0s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; }


@media screen and (min-width: 1920px) {
	header, #numbers, #area, #contact { margin-left: auto!important; margin-right: auto!important; }
}

@media screen and (min-width: 1661px) {
	header { margin: 30px 30px 0 30px; }
	#header-2 { width: 1600px; }
	#numbers { margin: 0 30px 120px; }
	
	#area, #contact { margin: 0 30px; }
	#area-r div, #contact-l div { width: 800px; }
}

@media screen and (min-width: 1601px) and (max-width: 1720px) {
	#area-r div { padding: 120px 30px 80px 90px!important; }
	#contact-l div { padding: 120px 90px 80px 30px!important; }
}

@media screen and (min-width: 1601px) and (max-width: 1660px) {
	#header-2 { width: 1480px; }
	.hero-title { padding-left: 30px!important; }
	
	#numbers { margin: 0 auto 120px; }
}

/* -- 1 -- */
@media screen and (min-width: 1600px) {
	header, #numbers, #area, #contact { max-width: 1860px; }

	.hero-title { padding: 240px 400px 300px 0; }
	
	.hero-title, #about, #advantages, #anim_container, #for-sale, #for-sale-more, article, footer { width: 1600px; }
	
	#numbers { padding: 50px 0; }
	#numbers ul { width: 1200px; margin: 0 auto; }	
	
	#about h2 { width: 520px; margin-right: 180px; }
	#about-info { width: 900px; }
	#about ul { margin-top: 120px; }
	#about li:nth-child(1) { width: 1015px; margin-right: 100px; }
	#about li:nth-child(2) { width: 485px; }
	
	#advantages { margin: 120px auto; }
	#advantages h2 { width: 700px; }
	#advantages-about { width: 900px; }

	.left, .right { width: 680px; }
	.left { margin-right: 140px; }
	
	#area-r div { padding: 120px 0 80px 120px; }

	#contact-l div { padding: 120px 120px 80px 0; }
}

/* -- 2 -- */
@media screen and (min-width: 1200px) and (max-width: 1599px) {
	#header-2 { width: 1200px; }
	.hero-title { padding: 240px 240px 300px 0; }
	
	.hero-title, #about, #advantages, #anim_container, #for-sale, #for-sale-more, article, footer { width: 1200px; }

	#numbers { margin: 0 auto 100px; padding: 50px; }
	#numbers ul { gap: 30px; }
	
	#about h2 { width: 520px; margin-right: 80px; }
	#about-info { width: 600px; }
	#about ul { margin-top: 100px; }
	#about li { display: inline-block; width: calc(50% - 40px); }
	#about li:nth-child(1) { margin-right: 80px; }
	
	#advantages { margin: 100px auto; }
	
	#area-r div { padding: 90px 0 60px 60px; width: 600px; }
	
	#contact-l div { padding: 90px 60px 60px 0; width: 600px; }
}

@media screen and (min-width: 1200px) {
	header { background-image: url('../img/header-xl.jpg'); }
	#header-2 { height: 77px; margin: 0 auto; padding-top: 30px; }
	#logo { top: 30px; left: 0; }
	nav { top: 52px; right: 220px; }
	#phone { top: 52px; right: 0; position: absolute; padding: 6px 15px; font-size: 13px; }
	#phone .material-symbols-outlined { vertical-align: -7px; margin-right: 8px; }
	
	.hero-title, #about, footer { margin: 0 auto; }	
	.hero-title h1 { font-size: 48px; line-height: 52px; }
	.hero-title p { margin: 30px 0 50px; }
	.hero-title li { display: inline-block; }
	.hero-title li:nth-child(1) { margin-right: 40px; }
	
	.justify { text-align: justify!important; }
	
	#about li { display: inline-block; }
	#about h2, #about-info, #advantages h2, #advantages-about { display: inline-block; vertical-align: top; }

	#advantages h2, #advantages-about { margin-bottom: 70px; }

	#area, #contact { display: flex; }
	#area-l, #area-r, #contact-l, #contact-r { flex: 1; }
	#area-l img { width: 100%; height: 100%; object-fit: cover; display: block; }
	
	#anim { margin: 0 auto; padding: 100px 0 10px; }
	#anim_container { margin: 0 auto; }
	
	#for-sale { margin: 100px auto; }
	#for-sale-more { margin: 0 auto 100px; }
	#tab-1,#tab-2 { padding: 50px 50px 10px; }
	
	#contact-l { text-align: right; }
	#contact-l div { margin-left: auto; }
	#contact-l li { position: relative; }
	#contact-l li:nth-child(1) { margin: 50px 0 150px; }
	.contact-link { position: absolute; right: 0; bottom: 0; }
	.contact-link a { padding: 15px 40px; }

	article { margin: 0 auto; padding: 50px 0; }
	
	footer { padding: 30px 0; }
	footer ul li:nth-child(2) { text-align: center; }
	footer ul li:nth-child(3) { text-align: right; }	
}

@media screen and (min-width: 801px) and (max-width: 1200px) {
	#numbers ul, #contact-l ul { grid-template-columns: repeat(2,1fr); }
	#numbers ul li:last-child { grid-column: span 2; }
	
	#contact-l ul { display: grid; gap: 50px; }
	#contact-l li { margin: 30px 0 0; }
}

@media screen and (min-width: 600px) and (max-width: 800px) {
	#numbers ul { grid-template-columns: repeat(1,1fr); }
	
	#contact-l li:nth-child(1) { margin: 30px 0 60px; }
}


/* -- 3 -- */
@media screen and (min-width: 600px) and (max-width: 1199px) {	
	header { background-image: url('../img/header-l.jpg'); margin: 25px 25px 0; }
	#header-2 { height: 60px; padding-top: 30px; }
	#logo { top: 25px; left: 25px; }
	#logo img { height: 60px; width: auto; }
	nav { top: 36px; right: 25px; }
	#phone { top: 40px; right: 120px; position: absolute; padding: 6px 15px; font-size: 13px; }
	#phone .material-symbols-outlined { vertical-align: -7px; margin-right: 8px; }
	.hero-title { padding: 160px 100px 200px 25px; }
	.hero-title h1 { font-size: 40px; line-height: 46px; }
	.hero-title p { margin: 30px 0 50px; }
	.hero-title li { display: inline-block; }
	.hero-title li:nth-child(1) { margin: 0 30px 40px 0; }
	
	#numbers { padding: 50px 40px; margin: 0 25px 90px; }
	#numbers ul { gap: 30px; }
	
	#about { margin: 70px 25px 0; }
	#about ul { margin-top: 60px; }
	#about li { display: inline-block; width: calc(50% - 10px); }
	#about li:nth-child(1) { margin-right: 20px; }
	
	#advantages { margin: 70px 25px; }
	#advantages-about { margin-bottom: 50px; }
	
	#area, #contact { margin: 0 25px; }
	#area img { display: block; }
	#area-r div { padding: 50px 40px 20px; }	

	#anim { padding: 70px 25px 10px; }
	#anim_container { margin: 0 25px; }
	
	#for-sale { margin: 70px 25px; }
	#for-sale-more { margin: 0 25px 70px; }
	#tab-1,#tab-2 { padding: 40px 40px 10px; }
	
	#contact-l div { padding: 50px 40px; }
	.contact-link { margin-top: 40px; }
	.contact-link a { padding: 15px 40px; }
	#contact-r { height: 400px; }
	
	article { margin: 50px 25px; }
	
	footer { padding: 30px 25px; }
	footer ul li:nth-child(2) { text-align: center; }
	footer ul li:nth-child(3) { text-align: right; }	
}

/* -- 4 -- */
@media screen and (max-width: 599px) {
	header { background-image: url('../img/header-s.jpg'); margin: 20px 20px 0; }
	#header-2 { height: 50px; padding-top: 20px; }
	#logo { top: 20px; left: 20px; }
	#logo img { height: 50px; width: auto; }
	nav { top: 24px; right: 20px; }
	#phone { position: fixed; bottom: 20px; right: 20px; padding: 12px; z-index: 9; border-radius: 50%; }
	#phone .material-symbols-outlined { display: block; font-size: 26px; }
	#phone-nr { display: none; }
	.hero-title { padding: 100px 20px; }
	.hero-title h1 { font-size: 34px; line-height: 40px; }
	.hero-title p { margin: 20px 0 30px; }	
	.hero-title li:nth-child(1) { margin-bottom: 20px; }
	.hero-title li a { display: inline-block; }
	
	#numbers { padding: 50px 40px; margin: 0 20px 80px; }
	#numbers ul { grid-template-columns: repeat(1,1fr); gap: 30px; }
	
	#about { margin: 70px 20px 0; }
	#about ul { margin-top: 50px; }
	
	#advantages { margin: 70px 20px; }
	#advantages ul { margin-top: 50px; grid-template-columns: repeat(1,1fr); }
	
	#area, #contact { margin: 0 20px; }
	#area img { display: block; }
	#area-r div { padding: 50px 30px 20px; }
	
	#anim { padding: 70px 20px 10px; font-size: 12px; }
	#anim_container { margin: 0 20px; }
	
	#for-sale { margin: 70px 20px; }
	#for-sale-more { margin: 0 20px 70px; }
	#tab-1,#tab-2 { padding: 30px 30px 10px; }
	#tabs_title li a span { display: block; }
	
	#contact-l div { padding: 50px 30px; }
	#contact-l li:nth-child(1) { margin: 30px 0 60px; }
	.contact-link { margin-top: 40px; }
	.contact-link a { display: inline-block; padding: 15px 40px; }
	#contact-r { height: 400px; }
	
	article { margin: 50px 20px; }
	
	footer { padding: 30px 20px; }
	footer ul { grid-template-columns: repeat(2,1fr); gap: 10px; }
	footer ul li:nth-child(2) { text-align: right; }
	footer li:last-child { grid-column: span 2; }
}

@media screen and (max-width: 439px) {	
	.numbers_value { font-size: 50px; line-height: 30px; }
	.numbers_value span { font-size: 30px; }
}
@media screen and (max-width: 380px) {
	#we-implement-l { grid-template-columns: repeat(1,1fr); }
}