/*====================================================* WORK WITH US / DREAM HOUSE =====================================================*/ .dream-house-section { position: relative; width: 100%; height: 680px; background-image: url("../images/dream-house-1.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden; box-sizing: border-box; } /*====================================================* DARK OVERLAY =====================================================*/ .dream-house-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.58); z-index: 1; } /*====================================================* VERTICAL GRID =====================================================*/ .dream-house-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(to right, transparent 0, transparent calc(100% - 1px), rgba(255, 255, 255, 0.10) calc(100% - 1px), rgba(255, 255, 255, 0.10) 100%); background-size: 360px 100%; } /*====================================================* ADDITIONAL VERTICAL LINES =====================================================*/ .dream-house-section::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: linear-gradient(to right, transparent 0, transparent 6%, rgba(255, 255, 255, 0.09) 6.05%, transparent 6.1%), linear-gradient(to right, transparent 0, transparent 21%, rgba(255, 255, 255, 0.09) 21.05%, transparent 21.1%), linear-gradient(to right, transparent 0, transparent 40%, rgba(255, 255, 255, 0.09) 40.05%, transparent 40.1%), linear-gradient(to right, transparent 0, transparent 59.5%, rgba(255, 255, 255, 0.09) 59.55%, transparent 59.6%), linear-gradient(to right, transparent 0, transparent 78.5%, rgba(255, 255, 255, 0.09) 78.55%, transparent 78.6%), linear-gradient(to right, transparent 0, transparent 94.5%, rgba(255, 255, 255, 0.09) 94.55%, transparent 94.6%); } /*====================================================* CONTENT =====================================================*/ .dream-house-content { position: relative; z-index: 5; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; padding: 0 30px; } /*====================================================* GOLD LABEL =====================================================*/ .dream-house-label { margin-bottom: 30px; color: #d9a441; font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 3px; line-height: 1.2; } /*====================================================* MAIN TITLE =====================================================*/ .dream-house-content h2 { margin: 0; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 68px; font-weight: 500; line-height: 1.18; letter-spacing: -2px; } /*====================================================* LARGE TABLET =====================================================*/ @media (max-width: 1200px) { .dream-house-section { height: 620px; } .dream-house-content h2 { font-size: 58px; } .dream-house-label { font-size: 17px; margin-bottom: 26px; } } /*====================================================* TABLET =====================================================*/ @media (max-width: 768px) { .dream-house-section { width: 100%; height: 500px; min-height: 500px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .dream-house-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.63); } .dream-house-content { position: relative; z-index: 5; width: 100%; height: 100%; padding: 0 25px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .dream-house-label { margin-bottom: 20px; font-size: 15px; letter-spacing: 2.2px; } .dream-house-content h2 { width: 100%; max-width: 620px; margin: 0 auto; font-size: 43px; line-height: 1.2; letter-spacing: -1px; white-space: normal; overflow-wrap: normal; } .dream-house-content h2 br { display: block; } .dream-house-grid { background-size: 250px 100%; } } /*====================================================* MOBILE / TABLET — DREAM HOUSE =====================================================*/ @media (max-width: 768px) { /*-----------------------------------------------* SECTION ------------------------------------------------*/ .dream-house-section { position: relative; width: 100%; height: 230px; min-height: 230px; background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden; box-sizing: border-box; } /*-----------------------------------------------* OVERLAY ------------------------------------------------*/ .dream-house-overlay { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.63); z-index: 1; } /*-----------------------------------------------* CONTENT ------------------------------------------------*/ .dream-house-content { position: relative; z-index: 5; width: 100%; height: 100%; padding: 0 10px; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; } /*-----------------------------------------------* GOLD LABEL ------------------------------------------------*/ .dream-house-label { margin: 0 0 20px 0; font-size: 15px; letter-spacing: 2px; line-height: 1.2; white-space: nowrap; } /*-----------------------------------------------* HEADING — ALWAYS ONE LINE ------------------------------------------------*/ .dream-house-content h2 { display: block; width: max-content; max-width: none; min-width: 0; margin: 0; padding: 0; color: #ffffff; font-family: "Poppins", sans-serif; font-size: clamp(18px, 5vw, 38px); font-weight: 500; line-height: 1.2; letter-spacing: -0.5px; white-space: nowrap; word-break: keep-all; overflow: visible; flex-shrink: 0; } /*-----------------------------------------------* REMOVE
------------------------------------------------*/ .dream-house-content h2 br { display: none !important; } /*-----------------------------------------------* GRID ------------------------------------------------*/ .dream-house-grid { position: absolute; inset: 0; width: 100%; height: 100%; background-size: 250px 100%; z-index: 2; } } /*====================================================* SMALL MOBILE =====================================================*/ @media (max-width: 480px) { .dream-house-section { height: 430px; min-height: 430px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .dream-house-content { padding: 0 5px; } .dream-house-label { margin-bottom: 18px; font-size: 13px; letter-spacing: 1.8px; } .dream-house-content h2 { font-size: clamp(17px, 5vw, 24px); letter-spacing: -0.3px; white-space: nowrap; } .dream-house-content h2 br { display: none !important; } .dream-house-grid { background-size: 180px 100%; } } /*====================================================* VERY SMALL MOBILE =====================================================*/ @media (max-width: 360px) { .dream-house-section { height: 390px; min-height: 390px; background-size: cover; background-position: center center; } .dream-house-content { padding: 0 3px; } .dream-house-label { font-size: 12px; letter-spacing: 1.5px; margin-bottom: 16px; } .dream-house-content h2 { font-size: 16px; letter-spacing: -0.25px; white-space: nowrap; } .dream-house-content h2 br { display: none !important; } }