@charset "UTF-8"; /*** The new CSS reset - version 1.11 (last updated 20.9.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .page { width: 100%; margin: 0; padding: 0; } .container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; } .header { width: 100%; background: -webkit-gradient(linear, left top, right top, from(#8b7355), to(#2f2a23)); background: -webkit-linear-gradient(left, #8b7355, #2f2a23); background: -moz-linear-gradient(left, #8b7355, #2f2a23); background: linear-gradient(90deg, #8b7355, #2f2a23); top: 0; left: 0; z-index: 1000; font-family: "Inter", sans-serif; font-weight: 400; } .header .header-wrap { padding: 15px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; gap: 24px; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .header .header-button { border: 1px solid #aaa; border-radius: 8px; color: #fcfcfb; margin-left: 100px; width: 144px; height: 36px; top: 30px; left: 1060px; opacity: 1; gap: 10px; border-radius: 8px; border-width: 1px; padding: 0 20px; font-size: 15px; line-height: 36px; text-align: center; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .header .logo-wrap { top: 22px; left: 32px; opacity: 1; } .header .logo { width: 39.04px; height: 30.8px; top: 11.2px; left: 8.51px; } .header .header-top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .header .header-top .burger { width: 30px; height: 22px; border: none; background: none; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; cursor: pointer; } .header .header-top .burger span { display: block; width: 100%; height: 3px; background: #fff; border-radius: 2px; } .header .header-nav { position: fixed; top: 0; right: -100%; height: 100vh; width: 70%; background: -webkit-gradient(linear, left top, left bottom, from(#7e6d53), to(#2d2a22)); background: -webkit-linear-gradient(top, #7e6d53, #2d2a22); background: -moz-linear-gradient(top, #7e6d53, #2d2a22); background: linear-gradient(180deg, #7e6d53, #2d2a22); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding-top: 40px; -webkit-transition: right 0.4s ease; -moz-transition: right 0.4s ease; transition: right 0.4s ease; } .header .header-nav.active { right: 0; } .header .header-nav .close { -webkit-align-self: flex-end; align-self: flex-end; margin-right: 20px; font-size: 28px; background: none; border: none; color: #fff; cursor: pointer; } .header .header-nav .header-list { list-style: none; padding: 0; margin: 40px 0 0 0; width: 104; height: 234; top: 80px; left: 108px; opacity: 1; gap: 24px; } .header .header-nav .header-list .header-item { margin-bottom: 20px; } .header .header-nav .header-list .header-item .header-link { font-size: 18px; color: #fff; text-decoration: none; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; } .header .header-nav .header-list .header-item .header-link:hover { opacity: 0.6; } .view { height: 491px; background-image: url(src/img/group.svg), url(src/img/girl.svg), url(src/img/mobile-backgroung.png); background-position: 5% 78%, 93% 79%, center; -webkit-background-size: 44px 49px, 24px 52px, cover; background-size: 44px 49px, 24px 52px, cover; background-repeat: no-repeat; } .container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .view-title { font-family: Poppins; font-weight: 400; font-size: 48px; color: #7e6d53; } .view-text { font-family: Poppins; font-weight: 300; font-size: 16px; width: 184px; text-align: center; color: #7e6d53; } .view-button { width: 200px; height: 50px; background-color: #fcfcfb; font-family: Poppins; font-weight: 300; font-size: 20px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; color: #2d2a22; border-radius: 10px; text-align: center; margin-top: 267px; } .infrastructure { padding: 60px 0; background-color: #f5f1ea; } .infrastructure-container { width: 100%; } .infrastructure-title { font-size: 28px; margin-bottom: 20px; font-family: "Poppins"; color: #7e6d53; line-height: 100%; font-weight: 500; position: absolute; top: -50px; left: 5px; } .infrastructure-bg { background-image: url("/final-project/assets/Infrastructure-mobile.png"); height: 497px; -webkit-background-size: cover; background-size: cover; background-position: center; min-height: 300px; position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .infrastructure-list { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; background: #fcfcfb; opacity: 80%; border-radius: 16px; padding: 40px 16px; } .infrastructure-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; gap: 10px; color: #7e6d53; font-family: "Poppins"; } .infrastructure-circle { width: 101px; height: 101px; border: 1px solid #000; border-radius: 50%; font-size: 14px; line-height: 1.7; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; color: #000; font-family: "Poppins"; font-weight: 700; } .infrastructure-text { font-size: 13px; font-weight: 500; width: 136px; height: 21px; } .philosophy { position: relative; width: 100%; background: #f1ede7; /* mobile */ /* desktop */ } .philosophy-bg { position: relative; width: 100%; min-height: 680px; opacity: 1; background-image: url("../src/img/philosophy_img's/man.svg"), url("../src/img/philosophy_img's/philosophy_mobile_bg.png"); background-position: 78% 81%, 45% center; -webkit-background-size: clamp(70px, 16vw, 110px) auto, cover; background-size: clamp(70px, 16vw, 110px) auto, cover; background-repeat: no-repeat, no-repeat; z-index: 1; } .philosophy-container { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; padding: 0 0 72px; max-width: none; margin: 0; } .philosophy-card { width: 100%; max-width: none; min-width: 280px; margin: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: "Poppins", sans-serif; font-weight: 400; } .philosophy-card-bg { width: 100%; background: rgba(255, 255, 255, 0.9); border-radius: 0; z-index: 1; padding-bottom: 16px; overflow: hidden; } .philosophy-card-content { z-index: 2; padding: 30px 26px 34px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 0; } .philosophy-copy { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 0; } .philosophy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 0 0 10px; padding: 0; } .philosophy-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 22px; } .philosophy-icon { width: 32px; height: 32px; opacity: 0.85; } .philosophy-text { font-size: 15px; line-height: 1.3; color: #6b5e4e; } .philosophy-title { line-height: 1.25; margin-top: 18px; margin-bottom: 0; font-size: 20px; color: #2f2a23; font-family: "Poppins", sans-serif; font-weight: 300; } .philosophy-text2 { line-height: 1.45; margin-top: 4px; font-size: 14px; color: #7e6d53; font-family: "Poppins", sans-serif; font-weight: 300; } .apartment { height: 1446px; } .apartament-title { font-family: Poppins; font-weight: 500; font-size: 28px; color: #7E6D53; margin-top: 24px; margin-left: 20px; margin-bottom: 28px; } .apartment-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 28px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; margin-bottom: 28px; } .apartment-item { padding-top: 20px; padding-bottom: 20px; border: 2px solid transparent; border-radius: 16px; -webkit-transition: border-color 150ms ease; -moz-transition: border-color 150ms ease; transition: border-color 150ms ease; } .apartment-item:hover, .apartment-item:focus-within, .apartment-item:active { border-color: #7E6D53; } .apartment-subtitle { font-family: Poppins; font-weight: 400; font-size: 28px; line-height: 120%; color: #2D2A22; text-align: center; } .apartment-text { font-family: Poppins; font-weight: 300; font-size: 20px; line-height: 130%; text-align: center; } .apartment-download { display: block; width: 240; height: 54; border-radius: 16px; padding-top: 14px; padding-right: 28px; padding-bottom: 14px; padding-left: 28px; background-color: #7E6D53; font-family: Poppins; font-weight: 500; font-size: 18px; color: #FCFCFB; margin: 0 auto; } .apartment-modal { position: fixed; inset: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: clamp(16px, 3vw, 24px); opacity: 0; pointer-events: none; z-index: 1000; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; transition: opacity 200ms ease; } .apartment-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; transition: opacity 200ms ease; } .apartment-modal__panel { position: relative; width: 100%; max-width: clamp(320px, 80vw, 720px); background: #ffffff; border-radius: 16px; padding: clamp(16px, 3vw, 24px); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 12px; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0; -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease; transition: opacity 200ms ease, -webkit-transform 200ms ease; -moz-transition: transform 200ms ease, opacity 200ms ease, -moz-transform 200ms ease; transition: transform 200ms ease, opacity 200ms ease; transition: transform 200ms ease, opacity 200ms ease, -webkit-transform 200ms ease, -moz-transform 200ms ease; z-index: 1; } .apartment-modal__close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: none; background: transparent; color: #2d2a22; cursor: pointer; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .apartment-modal__close img { width: 20px; height: 20px; display: block; } .apartment-modal__body { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 12px; } .apartment-modal__media { width: 100%; border-radius: 12px; overflow: hidden; height: clamp(140px, 22vh, 180px); } .apartment-modal__image { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; } .apartment-modal__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 6px; } .apartment-modal__title { font-family: Poppins; font-weight: 700; font-size: 30px; color: #2d2a22; margin: 0 0 4px; text-align: center; } .apartment-modal__meta { font-family: Poppins; font-weight: 300; font-size: 21px; color: #6b5e4e; margin: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: baseline; -webkit-align-items: baseline; -moz-box-align: baseline; align-items: baseline; gap: 8px; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .apartment-modal__label { font-weight: 400; color: #2d2a22; } .apartment-modal__value { font-weight: 500; color: #7e6d53; } .apartment-modal__value--accent { font-weight: 600; } .apartment-modal__meta--accent { font-size: 24px; font-weight: 600; color: #7e6d53; } .apartment-modal__meta--muted { font-size: 19px; font-weight: 300; color: #6b5e4e; } .apartment-modal__cta { margin-top: 8px; background: #7e6d53; color: #ffffff; border: none; border-radius: 10px; height: 69px; font-family: Poppins; font-weight: 500; font-size: 24px; cursor: pointer; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; text-align: center; opacity: 1; -webkit-align-self: flex-start; align-self: flex-start; } .apartment-modal__content { -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; align-items: flex-start; } .apartment-modal__cta.contact-btn { background: #7e6d53; color: #ffffff; border: none; } .apartment-modal.is-open { opacity: 1; pointer-events: auto; } .apartment-modal.is-open .apartment-modal__overlay { opacity: 1; } .apartment-modal.is-open .apartment-modal__panel { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .apartment-modal--house-2 .apartment-modal__media { height: clamp(170px, 26vh, 220px); } .catalog-modal { position: fixed; inset: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: clamp(16px, 3vw, 24px); opacity: 0; pointer-events: none; z-index: 1002; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; transition: opacity 200ms ease; font-family: Poppins; color: #7e6d53; } .catalog-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; transition: opacity 200ms ease; } .catalog-modal__panel { position: relative; width: 100%; max-width: clamp(300px, 90vw, 560px); background: #efe9e2; border-radius: 16px; padding: clamp(16px, 3vw, 24px); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 12px; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); opacity: 0; -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease; transition: opacity 200ms ease, -webkit-transform 200ms ease; -moz-transition: transform 200ms ease, opacity 200ms ease, -moz-transform 200ms ease; transition: transform 200ms ease, opacity 200ms ease; transition: transform 200ms ease, opacity 200ms ease, -webkit-transform 200ms ease, -moz-transform 200ms ease; z-index: 1; } .catalog-modal__close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .catalog-modal__close img { width: 20px; height: 20px; display: block; } .catalog-modal__step { display: grid; grid-template-columns: 96px 1fr; gap: 14px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .catalog-modal__step--success { display: none; } .catalog-modal__media { width: 96px; height: 96px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .catalog-modal__image { width: 100%; height: auto; display: block; } .catalog-modal__content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 6px; } .catalog-modal__content--center { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .catalog-modal__eyebrow { font-weight: 500; font-size: 16px; margin: 0; } .catalog-modal__text { font-weight: 300; font-size: 12px; margin: 0; } .catalog-modal__form { margin-top: 4px; } .catalog-modal__label { font-size: 10px; font-weight: 500; text-transform: uppercase; margin-bottom: 6px; display: block; } .catalog-modal__field { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #d7cec2; border-radius: 12px; padding: 6px 8px; } .catalog-modal__input { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; flex: 1; border: none; background: transparent; outline: none; font-size: 12px; font-family: Poppins; color: #7e6d53; } .catalog-modal__input::-webkit-input-placeholder { color: #7e6d53; opacity: 0.6; } .catalog-modal__input::-moz-placeholder { color: #7e6d53; opacity: 0.6; } .catalog-modal__input:-ms-input-placeholder { color: #7e6d53; opacity: 0.6; } .catalog-modal__input::-ms-input-placeholder { color: #7e6d53; opacity: 0.6; } .catalog-modal__input::placeholder { color: #7e6d53; opacity: 0.6; } .catalog-modal__submit { width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; cursor: pointer; } .catalog-modal__submit img { width: 24px; height: 24px; display: block; } .catalog-modal.is-open { opacity: 1; pointer-events: auto; } .catalog-modal.is-open .catalog-modal__overlay { opacity: 1; } .catalog-modal.is-open .catalog-modal__panel { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .catalog-modal.is-success .catalog-modal__step--form { display: none; } .catalog-modal.is-success .catalog-modal__step--success { display: grid; } .gallery { background: #f5f1ea; padding: 60px 0 80px; overflow-x: hidden; } .gallery-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .gallery-title { font-size: 28px; color: #6b5e4e; margin-bottom: 28px; font-family: "Poppins", sans-serif; font-weight: 500; } .gallery-slider { position: relative; min-height: 300px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .gallery-track { position: relative; width: min(560px, 92vw); height: 280px; overflow: visible; } .gallery-slide { position: absolute; top: 50%; left: 50%; width: 150px; height: 160px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease; transition: opacity 0.4s ease, -webkit-transform 0.4s ease; -moz-transition: transform 0.4s ease, opacity 0.4s ease, -moz-transform 0.4s ease; transition: transform 0.4s ease, opacity 0.4s ease; transition: transform 0.4s ease, opacity 0.4s ease, -webkit-transform 0.4s ease, -moz-transform 0.4s ease; } .gallery-slide.is-active { width: 180px; height: 180px; opacity: 1; z-index: 3; } .gallery-slide.is-prev { -webkit-transform: translate(-165%, -50%); -moz-transform: translate(-165%, -50%); -ms-transform: translate(-165%, -50%); transform: translate(-165%, -50%); z-index: 2; } .gallery-slide.is-next { -webkit-transform: translate(65%, -50%); -moz-transform: translate(65%, -50%); -ms-transform: translate(65%, -50%); transform: translate(65%, -50%); z-index: 2; } .gallery-image { width: 100%; height: 100%; } .gallery-slide.is-active .gallery-image { -o-object-fit: cover; object-fit: cover; } .gallery-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; color: #000; display: none; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; z-index: 5; padding: 0; } .gallery-arrow img { width: 24px; height: 24px; display: block; } .gallery-arrow--left { left: 0; } .gallery-arrow--right { right: 0; } .gallery-dots { position: absolute; bottom: -18px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; gap: 10px; z-index: 5; bottom: 40px; } .gallery-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #c8beb0; cursor: pointer; } .gallery-dot.is-active { background: #6b5e4e; } .contact { padding: clamp(60px, 10vw, 70px) 0 clamp(70px, 11vw, 80px); background: #f1ede7; text-align: center; } .contact-title { font-family: "Poppins", sans-serif; font-weight: 500; font-size: clamp(28px, 4.5vw, 30px); color: #6b5e4e; margin-bottom: 6px; } .contact-subtitle { font-family: "Poppins", sans-serif; font-weight: 300; font-size: 16px; color: #8a7b6a; margin-bottom: clamp(20px, 4vw, 22px); } .contact-wrap { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .contact-list { width: clamp(288px, 92vw, 704px); background: #7e6d53; border-radius: 16px; padding: clamp(20px, 4vw, 28px) clamp(18px, 5vw, 34px); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 14px; } .contact-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 12px; text-align: left; } .contact-text { font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; font-size: 14px; line-height: 1; color: #f2ede7; } .contact-btn { margin-top: 6px; background: #f9f7f3; color: #6b5e4e; font-family: "Poppins", sans-serif; font-weight: 300; font-size: clamp(14px, 3vw, 20px); padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 30px); min-width: clamp(150px, 40vw, 210px); height: clamp(44px, 9vw, 56px); border-radius: 10px; text-align: center; } .contact-icon { width: 24px; height: 24px; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; flex: 0 0 auto; } .modal-open { overflow: hidden; } .contact-modal { position: fixed; inset: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: 0; opacity: 0; pointer-events: none; z-index: 1000; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; transition: opacity 200ms ease; } .contact-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; transition: opacity 200ms ease; } .contact-modal__panel { position: relative; width: 100%; max-width: none; background: #ffffff; border-radius: 16px 16px 0 0; padding: 22px 20px 26px; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 240ms ease; transition: -webkit-transform 240ms ease; -moz-transition: transform 240ms ease, -moz-transform 240ms ease; transition: transform 240ms ease; transition: transform 240ms ease, -webkit-transform 240ms ease, -moz-transform 240ms ease; z-index: 1; } .contact-modal__close { position: absolute; top: 4px; right: 2px; width: 36px; height: 36px; border: none; background: transparent; padding: 0; color: #2f2a23; cursor: pointer; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .contact-modal__close img { width: 22px; height: 22px; display: block; } .contact-modal__title { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.2; color: #2f2a23; margin: 6px 40px 18px 0; } .contact-modal__form { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 10px; } .contact-modal__label { font-family: "Poppins", sans-serif; font-weight: 400; font-size: 13px; color: #6b5e4e; } .contact-modal__input { width: 100%; border: 1.5px solid #000000; border-radius: 12px; padding: 12px 14px; font-family: "Poppins", sans-serif; font-weight: 400; font-size: 14px; color: #999ea3; outline: none; } .contact-modal__input::-webkit-input-placeholder { color: #999ea3; } .contact-modal__input::-moz-placeholder { color: #999ea3; } .contact-modal__input:-ms-input-placeholder { color: #999ea3; } .contact-modal__input::-ms-input-placeholder { color: #999ea3; } .contact-modal__input::placeholder { color: #999ea3; } .contact-modal__submit { margin-top: 8px; width: 100%; height: 44px; border: none; border-radius: 12px; background: #7e6d53; color: #ffffff; font-family: "Poppins", sans-serif; font-weight: 500; font-size: 16px; cursor: pointer; text-align: center; } .contact-modal.is-open { opacity: 1; pointer-events: auto; } .contact-modal.is-open .contact-modal__overlay { opacity: 1; } .contact-modal.is-open .contact-modal__panel { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } footer.footer { width: 100%; background: -webkit-gradient(linear, left top, right top, from(#7e6d53), to(#2d2a22)); background: -webkit-linear-gradient(left, #7e6d53 0%, #2d2a22 100%); background: -moz-linear-gradient(left, #7e6d53 0%, #2d2a22 100%); background: linear-gradient(90deg, #7e6d53 0%, #2d2a22 100%); color: #eee8dc; padding: 40px 0 24px; letter-spacing: 0.2px; display: block; overflow-x: hidden; } .footer-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; row-gap: 16px; -webkit-box-align: start; -webkit-align-items: start; -moz-box-align: start; align-items: start; max-width: 1100px; margin: 0 auto; padding: 0 20px; } .footer .logo { width: 78px; height: auto; opacity: 0.9; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer-navigation, .footer-contacts { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; gap: 8px; min-width: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 140px; -moz-box-flex: 1; flex: 1 1 140px; } .footer-navigation-title h2, .footer-contacts-title h2 { margin: 0 0 8px 0; font-size: 14px; font-weight: 600; text-transform: uppercase; color: #f2ecdf; } .footer .navigation-item a, .footer-contacts-item p { font-size: 13px; line-height: 1.5; color: #ddd6c7; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .footer .navigation-item a { text-decoration: none; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .footer .navigation-item a:hover, .footer .navigation-item a:focus { color: #ffffff; } .footer-icon-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; gap: 16px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; justify-content: flex-start; grid-column: 1/-1; } .footer-icon-list li.footer-icon { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; width: 32px; height: 32px; line-height: 0; } .footer-icon-list svg.footer-icon { display: block; width: 24px; height: 24px; opacity: 0.9; overflow: visible; } .footer-text { margin: 18px auto 0; max-width: 1100px; padding: 0 20px; text-align: center; font-size: 11px; color: #bdb3a3; } .footer .footer-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; color: #ffffff; } footer.footer > svg.footer-icon { display: none; width: 56px; height: 56px; margin: 0; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; flex: 0 0 auto; opacity: 0.95; background: url(src/img/NICE_VIEW.svg) center/contain no-repeat; } footer.footer > svg.footer-icon use { display: none; } @media (min-width: 768px){ .header .header-wrap { -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding: 18px 24px; } .header .logo-wrap { margin-left: 12px; } .header .header-button { display: none; } .header .header-top .burger { display: none; } .header .header-nav { position: static; height: auto; width: auto; background: none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; padding-top: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -moz-box-flex: 1; flex: 1 1 auto; } .header .header-nav .close { display: none; } .header .header-nav .header-list { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; gap: 40px; margin: 0; width: auto; height: auto; top: 40px; left: 168px; opacity: 1; gap: 32px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .header .header-nav .header-list .header-item { margin: 0; } .infrastructure-container { width: 100%; } .infrastructure-bg { background-image: url("/final-project/assets/Infrastructure-tablet.png"); width: 100%; height: 468px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding: 37px; } .infrastructure-title { width: 275px; font-size: 40px; font-family: "Poppins"; color: #7e6d53; line-height: 100%; font-weight: 500; } .infrastructure-list { list-style: none; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; background: #fcfcfb; opacity: 80%; border-radius: 8px; } .infrastructure-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; gap: 10px; color: #7e6d53; font-family: "Poppins"; margin-top: 15px; } .infrastructure-circle { width: 101px; height: 101px; border: 1px solid #2d2a22; border-radius: 50%; font-size: 16px; line-height: 1.7; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; color: #000; font-family: "Poppins"; font-weight: 600; } .infrastructure-text { top: 40px; left: 115px; font-size: 15px; font-weight: 500; width: 152px; height: 24px; } .philosophy-card-content { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; } .philosophy-list { justify-items: center; } .philosophy-item { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .philosophy-bg { min-height: 760px; background-image: url("../src/img/philosophy_img's/man.svg"), url("../src/img/philosophy_img's/philosophy_tablet_bg.png"); background-position: 73% 81%, 45% center; } .philosophy-card-bg { padding-bottom: 120px; } .philosophy-card-content { display: grid; grid-template-columns: repeat(2, 1fr); -webkit-column-gap: 64px; -moz-column-gap: 64px; column-gap: 64px; row-gap: 0; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; max-width: 980px; margin: 0 auto; width: 100%; } .philosophy-list { margin: 0; gap: 70px 36px; } .philosophy-title, .philosophy-text2 { grid-column: 2; } .philosophy-copy { grid-column: 2; grid-row: 1; margin-top: 0; margin-bottom: 0; align-self: center; } .philosophy-text2 { margin-top: 4px; } .gallery-slider { min-height: 360px; padding: 0 20px; } .gallery-track { width: min(780px, 74vw); height: 360px; } .gallery-slide { width: 220px; height: 280px; } .gallery-slide.is-active { width: 255px; height: 330px; } .gallery-slide.is-prev { -webkit-transform: translate(-168%, -50%); -moz-transform: translate(-168%, -50%); -ms-transform: translate(-168%, -50%); transform: translate(-168%, -50%); width: 200px; height: 200px; } .gallery-slide.is-next { -webkit-transform: translate(68%, -50%); -moz-transform: translate(68%, -50%); -ms-transform: translate(68%, -50%); transform: translate(68%, -50%); width: 200px; height: 200px; } .gallery-arrow { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; } .gallery-arrow--left { left: -40px; } .gallery-arrow--right { right: -40px; } .gallery-dots { bottom: -70px; } .contact { padding: 70px 0 80px; } .contact-list { min-height: 226px; display: grid; grid-template-columns: 1fr 1fr; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; row-gap: 10px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .contact-item { gap: 10px; padding-left: 18px; } .contact-btn { grid-column: 2; grid-row: 1/span 3; align-self: center; justify-self: center; margin-top: 0; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .contact-modal { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; padding: 24px; } .contact-modal__panel { max-width: 420px; border-radius: 18px; padding: 24px 24px 28px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; -webkit-transition: none; -moz-transition: none; transition: none; -webkit-box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); } .contact-modal.is-open .contact-modal__panel { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } footer.footer { display: grid; grid-template-columns: auto minmax(0, 1fr); -webkit-column-gap: 56px; -moz-column-gap: 56px; column-gap: 56px; row-gap: 16px; -webkit-box-align: start; -webkit-align-items: start; -moz-box-align: start; align-items: start; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; padding: 56px 32px 28px; } .footer-item { display: grid; grid-template-columns: 200px minmax(240px, 1fr) 32px; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; padding: 0; width: 100%; max-width: 980px; margin: 0; } .footer-navigation, .footer-contacts { min-width: 0; } .footer-icon-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; justify-self: end; margin-left: 0; grid-column: 3; grid-row: 1; align-self: start; } .footer-text { -webkit-flex-basis: 100%; flex-basis: 100%; grid-column: 1/-1; } footer.footer > svg.footer-icon { display: block; } } @media (min-width: 768px) and (max-width: 1024px){ .philosophy-list { margin-top: 0; -webkit-transform: translateY(56px); -moz-transform: translateY(56px); -ms-transform: translateY(56px); transform: translateY(56px); } .philosophy-copy { margin-top: 0; -webkit-transform: translateY(56px); -moz-transform: translateY(56px); -ms-transform: translateY(56px); transform: translateY(56px); } } @media screen and (min-width: 768px){ .view { background-image: url(src/img/group.svg), url(src/img/girl.svg), url(src/img/view-bg-tablet.png); -webkit-background-size: 85px 95px, 57px 119px, cover; background-size: 85px 95px, 57px 119px, cover; height: 720px; } .container { padding-top: 48px; } .view-title { font-size: 72px; } .view-text { width: auto; font-size: 24px; } .view-button { margin-top: 372px; width: 256px; height: 54px; } .apartment { height: 1064px; } .apartament-title { margin-left: 32px; } .apartment-list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; gap: 33px; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .apartment-text { font-size: 24px; margin-left: 30px; margin-right: 30px; } .catalog-modal__panel { max-width: 620px; } .catalog-modal__step { grid-template-columns: 120px 1fr; gap: 18px; } .catalog-modal__media { width: 120px; height: 120px; } .catalog-modal__eyebrow { font-size: 18px; } .catalog-modal__text { font-size: 13px; } .catalog-modal__input { font-size: 13px; } } @media (min-width: 1024px){ .infrastructure { padding: 100px 0; } .infrastructure-container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; } .infrastructure-title { width: 275px; font-size: 40px; font-family: "Poppins"; color: #7e6d53; line-height: 100%; font-weight: 500; left: 0; } .infrastructure-bg { width: 90%; height: 486px; background-image: url("/final-project/assets/Infrastructure.png"); -webkit-background-size: cover; background-size: cover; background-position: center; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; align-items: center; padding-right: 168px; } .infrastructure-list { list-style: none; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; justify-content: flex-end; background: #fcfcfb; opacity: 80%; border-radius: 16px; padding: 10px 16px; } .infrastructure-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; text-align: center; gap: 10px; color: #7e6d53; font-family: "Poppins"; margin-top: 15px; margin-left: 15px; } .infrastructure-circle { width: 101px; height: 101px; border: 1px solid #000; border-radius: 50%; font-size: 16px; line-height: 1.7; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; justify-content: center; color: #000; font-family: "Poppins"; font-weight: 600; } .infrastructure-text { width: 152px; height: 24px; top: 40px; left: 115px; font-size: 15px; font-weight: 500; } .philosophy-container { margin-left: auto; margin-right: auto; } .philosophy-card-bg { padding-bottom: 20px; } .philosophy-bg { background-image: url("../src/img/philosophy_img's/man.svg"), url("../src/img/philosophy_img's/philosophy_desktop_bg.png"); background-position: 48% 81%, 45% center; } .philosophy-list { padding-left: 0; margin-top: 0; -webkit-transform: translateY(5%); -moz-transform: translateY(5%); -ms-transform: translateY(5%); transform: translateY(5%); -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; row-gap: 140px; } .philosophy-title { font-size: 26px; } .philosophy-text2 { font-size: 16px; max-width: 400px; margin-top: 4px; } .philosophy-copy { margin-top: 0; -webkit-transform: translateY(4%); -moz-transform: translateY(4%); -ms-transform: translateY(4%); transform: translateY(4%); margin-bottom: 0; padding-left: 100px; } .gallery-slider { min-height: 420px; width: 100%; margin-left: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; padding: 0 12px; } .gallery-track { width: min(1200px, 92vw); height: 660px; } .gallery-slide { width: 320px; height: 360px; } .gallery-slide.is-active { width: 500px; height: 500px; } .gallery-slide.is-prev { -webkit-transform: translate(-220%, -50%); -moz-transform: translate(-220%, -50%); -ms-transform: translate(-220%, -50%); transform: translate(-220%, -50%); width: 230px; height: 370px; } .gallery-slide.is-next { -webkit-transform: translate(120%, -50%); -moz-transform: translate(120%, -50%); -ms-transform: translate(120%, -50%); transform: translate(120%, -50%); width: 230px; height: 370px; } .gallery-arrow--left { left: -10%; position: absolute; } .gallery-arrow--right { right: -10%; position: absolute; } .gallery-arrow { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; } .gallery-dots { bottom: -24px; } .footer-item { grid-template-columns: 220px minmax(280px, 1fr) 32px; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; max-width: 980px; width: min(100%, 980px); justify-self: center; } .footer-text { padding: 0 28px; } footer.footer > svg.footer-icon { width: 56px; height: 56px; margin-top: 0; } } @media screen and (min-width: 1024px){ .apartment { height: 643px; } .apartment-modal__body { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; gap: 20px; } .apartment-modal__media { width: 55%; -webkit-box-flex: 0; -webkit-flex: 0 0 55%; -moz-box-flex: 0; flex: 0 0 55%; height: 380px; } .apartment-modal__content { width: 45%; -webkit-box-flex: 0; -webkit-flex: 0 0 45%; -moz-box-flex: 0; flex: 0 0 45%; } .apartment-modal__title { font-size: 33px; } .apartment-modal__meta { font-size: 22px; } .apartment-modal__meta--accent { font-size: 27px; } .apartment-modal__meta--muted { font-size: 21px; } .apartment-modal__cta { width: 255px; height: 66px; font-size: 22px; } .apartment-modal--house-2 .apartment-modal__media { height: 520px; } } @media (min-width: 1025px){ .header { padding: 10px 40px; } .header .header-wrap { padding-top: 20px; padding-bottom: 20px; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; } .header .logo-wrap { margin-left: 16px; margin-right: 24px; } .header .header-button { display: block; } .header .header-nav .header-list { gap: 50px; } } @media screen and (min-width: 1200px){ .view { background-image: url(src/img/group.svg), url(src/img/girl.svg), url(src/img/background.png); background-position: 8% 90%, 93% 90%, center; -webkit-background-size: 146px 163px, 88px 185px, cover; background-size: 146px 163px, 88px 185px, cover; } .container { padding-top: 26px; } .view-button { margin-top: 445px; } .apartament-title { margin-left: 68px; } .apartment-list { gap: 120px; } } @media (max-width: 768px){ .header .header-button { display: none; } .header .header-wrap { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; align-items: center; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; padding: 10px 16px; } .header .logo { max-height: 36px; width: auto; -o-object-fit: contain; object-fit: contain; } .header .burger { margin-left: auto; } .header .header-nav { width: 100vw; max-width: 100%; } } @media (max-width: 767px){ .philosophy-card-bg { padding-bottom: 4px; } .philosophy-card-content { padding-bottom: 22px; } }