@media (max-width: 1600px){
	.header-wrap {
		max-width: 1470px;
	}
}

@media (min-width: 920px) and (max-width: 1200px) {

}

@media (max-width: 920px) {


}

/* Tablet (Portrait & Landscape) */
@media (min-width: 768px) and (max-width: 1200px) {
	.container, .container-lg, .container-md, .container-sm {
		max-width: 100%;
		padding: 0 15px;
	}
	.project-info-section{
		--pi-gutter: 30px;
		padding: 40px 0 90px;
	}
	/* narrower block here, so the safe zone (and with it the leaves) shrinks - but
	   not as far as 6vw did, which left the leaves under 55px wide */
	.project-content{
		--pi-safe: clamp(32px, 8vw, 95px);
	}
	/* Written per section to outrank the per-section desktop bands in style.css - a
	   plain .project-content here would lose to them on specificity. One value for
	   both sections is enough: the leaves are reset to the shared proportional
	   sizing at this breakpoint, so all four are the same modest height again. */
	.first-section .project-content,
	.second-section .project-content{
		padding: calc(var(--pi-safe) * 1.15) calc(var(--pi-safe) * 0.5);
	}
	/* back to the shared equal-area sizing: the desktop rules' vw widths are far too
	   large here (16vw is 123px at this breakpoint's low end, against a 61px gutter)
	   and the shallower vertical band could not clear them either */
	.first-section .pi-leaf-top{
		width: calc(var(--pi-leaf-s) * 1.188);
		margin-left: 0;
		margin-top: 0;
	}
	.first-section .pi-leaf-bottom{
		width: calc(var(--pi-leaf-s) * 0.916);
		margin-bottom: 0;
	}
	.second-section .pi-leaf-top{
		width: calc(var(--pi-leaf-s) * 0.917);
		margin-top: 0;
	}
	.second-section .pi-leaf-bottom{
		width: calc(var(--pi-leaf-s) * 0.786);
		margin-right: 0;
		margin-bottom: 0;
	}
	.project-content h2{
		font-size: 34px;
	}
	.col-md-3.mobil-50.morder1 {
		width: 0;
	}
	.top-filter-wrap {
		width: 80.333%;
	}
	.project-image img {
		height: 100%;
	}
	.project-image {
		min-height: 400px;
	}
	.project-block {
		min-height: 400px;
	}
	.project-info-section {
		gap: 60px;
	}
	#sectionnine {
		overflow-x: auto;
		padding-right: 0 !important;
	}
	.top-form-scroll {
		padding: 0;
	}
	.spread-payment-content {
		margin-right: 0;
	}
	.faqs-img {
		padding-right: 0;
		padding-left: 0;
	}
	.footer {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
	.footer-wrap {
		gap: 15px;
	}
	.spread-payments {
		overflow: hidden;
	}
	.mortgage-sec {
		overflow: hidden;
	}
	.footer-logo, .footer-imge01 img, .footer-imge02 img {
		max-width: 140px;
	}
	.footer-social ul{
		gap: 20px;
	}
	.developer-section {
		padding-top: 25px;
	}
	.gallery-layout {
		gap: 20px;
	}
	.project-gallery-section {
		padding: 0;
	}
	.gallery-content {
		padding: 20px 20px 40px 20px;
		order: 2;
	}
	.gallery-content h2 {
		font-size: 24px;
	}
	.gallery-description p {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.remove-br {
		display: none;
	}
	p {
		font-size: 16px;
	}
	h2 {
		font-size: 32px;
	}
	.br-none, .developer-description > p br{
		display: none;
	}
	.sub-heading {
		font-size: 20px;
	}
	.table-setting-ads .mob-50{
		max-width: 50%;
	}
	.table-head-title :where(p, span) {
		font-size: 16px;
	}
	.table-setting-ads{
		padding: 0 10px;
		justify-content: start;
	}
	.table-head-title{
		width: calc(100% / 3 - 3px);
	}
	/*     .table-head-title p:after{
	top: 35px;
	left: 50%;
	border-left: 7px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #FFFFFF;
} */
	table thead > tr > th:nth-last-child(4){
		min-width: 130px;
	}
	.ads-clear-filter{
		width: auto;
		margin-right: 0;
	}
	.header-clear-filter{
		width: 100%;
	}
	.chkbox #chkbxinputone{
		margin-top: 0;
	}
	.price-form.bottom-price-form .searchbox{
		display: flex;
		flex-wrap: wrap;
		gap: 3%;
	}
	.price-form.bottom-price-form label{
		width: 100%;
	}
	.price-form.bottom-price-form .ads-serch-btn{
		width: 48%;
		padding: 8px 16px;
		position: relative;
		left: unset;
		bottom: unset;
		margin-top: 10px;
		display: inline-block;
	}
	.header-top .ads-clear-filter{
		margin-top: 14px;
	}
	.searchbox .hed-serch-lable{
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
		font-weight: var(--bold);
	}
	.price-form select, .ads-serch-btn-top, .chkbox{
		width: 48%;
		margin-left: 0;
	}
	.ads-serch-btn-top, .chkbox{
		text-align: center;
	}
	.select-wrap{
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}
	#searchbox{
		width: 100%;
		margin-top: 40px;
		margin-bottom: 0 !important;
	}
	.header-top{
		padding-top: 14px !important;
	}
	.price-form label{
		margin-top: -22px !important;
	}
	#chkbxinputone:after{
		bottom: 12px;
	}
	.hero-banner-bg{
		padding-left: 0;
		padding-right: 0;
		min-height: 300px;
		margin-bottom: 0;
	}
	.hero-banner-bg img{
		height: 300px;
		object-fit: cover;
	}
	.main-navbar{
		position: fixed;
		top: 90px;
		background: var(--white-color);
		z-index: 99999;
		width: 100%;
		display: none;
		height: 100%;
		background: #112849;
	}
	.main-menu-ul{
		display: block !important;
	}
	/* the mobile menu is a dark full-screen overlay, unlike the white desktop
	   bar, so its links stay white here regardless of the desktop link color */
	.main-menu li a{
		font-weight: var(--regular) !important;
		color: var(--white-color);
	}
	/* no highlight inside the mobile overlay: the menu is a full-screen list
	   that opens while the page is scroll-locked, so whatever the scrollspy had
	   last picked (usually the bottom section, צור קשר) showed up as a stray
	   coloured row. The highlight stays a desktop-bar thing only. */
	.main-menu li.active a{
		background: none;
		color: var(--white-color);
	}
	.mobile-order-wrap{
		display: flex;
	}
	.mobile-order-wrap .morder1{
		order: 1;
	}
	.mobile-order-wrap .morder2{
		order: 2;
	}
	.mobile-order-wrap .morder3{
		order: 3;
	}
	.mobile-order-wrap .morder4{
		order: 4;
	}
	.mobile-order-wrap .morder5{
		order: 5;
	}
	.mobile-order-wrap .morder6{
		order: 6;
	}
	.mobile-order-wrap .morder7{
		order: 7;
	}
	.mobile-order-wrap .morder8{
		order: 8;
	}
	.mobil-50{
		width: 50%;
		padding-right: 12px;
		padding-left: 12px;
	}
	.header-top-mobile{
		text-align: left;
	}

	/*humburger menu*/
	/* the element IS the middle bar, so the tappable area used to be the 30x3px
	   strip itself - the two outer bars are pseudo elements and take no clicks
	   at all. Padding grows the hit area to 54x43 without moving anything:
	   background-clip keeps the paint on the 30x3 content box, the negative
	   margins cancel the padding so the bars sit exactly where they did, and
	   box-sizing has to be content-box because bootstrap sets border-box
	   globally (which would otherwise eat the width into the padding). */
	.hamburger {
		box-sizing: content-box;
		width: 30px;
		height: 3px;
		background-color: var(--h-color);
		background-clip: content-box;
		padding: 20px 12px;
		position: relative;
		display: block;
		margin: 5px -12px -20px;
		cursor: pointer;
	}
	.hamburger.open:before{
		display: none;
	}
	.hamburger:before, .hamburger:after {
		content: '';
		position: absolute;
		width: 30px;
		height: 3px;
		background-color: var(--h-color);
	}

	/* offsets are from the padding box, so the middle bar now sits at 20px and
	   the outer two keep their +/-10px spacing around it */
	.hamburger:before {
		top: 10px;
	}

	.hamburger:after {
		top: 30px;
	}

	.hamburger.open:after {
		top: 20px;
	}

	.open {
		transform: rotate(45deg);
	}

	.open:before {
		top: 0;
		transform: rotate(90deg);
	}

	.open:after {
		top: 0;
		transform: rotate(90deg);
	}
	#myTabContent, #myTabContent2 {
		overflow-x: scroll;
	}
	.thumbnail-gallery-content{
		position: relative;
		width: 100%;
		top: -22px;
		background-size: 122%;
		min-height: 524px;
		background-position: -8px 28% !important;
		padding: 150px 32px 0 32px;
		right: 0;
		background-color: var(--h-color);
	}
	.thumbnail-gallery-content h2 {
		font-size: 50px;
		text-align: center;
	}
	.thumbnail-gallery-content h3 {
		font-size: 40px;
		text-align: center;
	}
	.thumbnail-gallery-content p {
		font-size: 15px;
	}
	.thumbnail-gallery{
		background: #FFFFFF;
		overflow: hidden;
		margin-bottom: 0 !important;
	}
	.thumbnail-gallery-wrap {
		padding-left: 0;
		padding-right: 0;
	}
	.mobile-paddin-0{
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0;
		margin-right: 0;
	}
	.faqs-text-col, .faqs-col{
		width: 100%;
	}
	.faqs-img {
		padding-right: 0px;
		padding-left: 0px;
	}
	.faqs-col{
		margin-top: 20px;
	}
	.faqs-bottom p {
		padding-right: 0px;
	}
	.spread-payment-content{
		margin-right: 0;
		padding: 15px;
	}
	.spread-payment {
		padding: 0;
	}
	.mortgage-main-wrap {
		padding-right: 0px;
	}
	.price-list{
		padding: 0 !important;
	}
	.price-list .searchbox {
		width: 100%;
		position: relative;
	}
	.ads-serch-btn, .ads-serch-btn-comp4 {
		position: absolute;
		left: 4px;
		bottom: -12px;
		width: 47%;
		padding: 8px 50px;
	}
	#chkbxinputmain:after{
		border: none;
	}
	.pdf-files-download{
		display: block !important;
		text-align: center;
	}
	.fils-for-downlaod li {
		text-align: center;
		width: 31%;
		display: inline-block;
		vertical-align: text-top;
		margin-bottom: 29px;
		padding: 0 0px;
		overflow: hidden;
	}
	.main-table, .main-table .container{
		padding: 0 !important;
		overflow: hidden;
	}
	.ads-serch-btn-top{
		width: 48%;
		display: inline-block;
		margin-top: 14px;
	}
	.chkbox label {
		margin-top: 0 !important;
	}
	#sel22, .chkbox{
		margin-left: calc(50% - 48%);
	}
	.body-fixed{
		position: fixed;
		top: 0px;
		width: 100%;
	}
	input[type="checkbox"]:checked::before{
		bottom: 9px;
	}
	.map-chart-wrap .col-md-6:first-child{
		margin-bottom: 20px;
	}
	.ads-mb-4{
		margin-bottom: 25px;
	}
	.thumb img{
		height: 68px;
	}
	.slider-content .slick-slide img{
		max-height: 235px;
		width: 100%;
		object-fit: cover;
	}
	.slider-content{
		padding: 0 0;
	}
	.notice-gallery-thimbnail{
		text-align: center;
		margin-top: -20px;
		position: static;
	}
	.faqs .accordion-button p {
		font-size: 16px;
	}
	.faqs .accordion-button span{
		padding-right: 0;
	}
	/* shallower notch and smaller chevron so the title keeps its room */
	.faqs .accordion-header{
		--faq-slant: 16px;
	}
	.faqs .accordion-button span{
		margin-left: 26px;
		padding: 8px 12px;
	}
	.faqs .accordion-button::after,
	.accordian-mortgage .accordion-button::after{
		width: 22px;
		height: 22px;
	}
	.faqs .accordion-body {
		padding-bottom: 20px;
		padding-left: 15px;
	}
	.faqs .accordion-item {
		margin-bottom: 14px;
	}
	.spread-payments{
		padding-top: 0 !important;
	}
	.mortgage-img{
		margin-bottom: 20px;
	}
	.top-form-scroll{
		padding: 0;
	}
	.price-list input[type='text']{
		width: 46.5%;
		margin-top: 6px;
	}
	.pricelist-search .ads-serch-btn-top{
		margin-right: calc(100% - 49%);
		width: 48%;
	}
	.pricelist-search .chkbox{
		margin-right: 3px;
		margin-top: 16px;
		margin-bottom: 33px;
	}
	.price-list input[type="checkbox"]:checked::before{
		top: -6px;
		background-image: url(../images/price-list-cherck-mobile.png);
		width: 30px;
		height: 30px;
	}
	.price-list #chkbxinputone:after {
		content: '';
		width: 30px;
		height: 30px;
		top: -6px;
		right: 0px;
	}
	.price-list .price-form label {
		padding-right: 0;
		display: block;
		text-align: right;
	}
	.price-list .price-form .price-lit-top-label{
		margin-bottom: 5px;
	}
	.price-lit-top-label{
		padding-right: 6px !important;
	}
	.pricelist-search{
		margin-top: -15px !important;
	}
	.adn-tabs-accordian{
		margin-bottom: 2px;
	}
	table thead>tr>th{
		min-width: 100px;
		text-align: center;
		padding: 0px 7px;
	}

	/* width */
	.main-table ::-webkit-scrollbar {
		width: 4px;
		height: 6px;
	}

	/* Track */
	.main-table ::-webkit-scrollbar-track {
		background: #dee2e5;
	}

	/* Handle */
	.main-table ::-webkit-scrollbar-thumb {
		background: #135565;
	}

	/* Handle on hover */
	.main-table ::-webkit-scrollbar-thumb:hover {
		background: #135565;
	}
	.fils-for-downlaod span{
		font-size: 14px;
	}
	/* ---- footer, phone layout ----------------------------------------
	   .footer-sec-1 and .footer-sec-2 carry desktop proportions (47% / 33%)
	   with no breakpoint of their own, so on a phone the contact block was
	   being asked to fit 157px and the two award badges 110px. The contact
	   column is 192px wide on its own, so it overflowed its parent and
	   squeezed the grofit logo next to it down to ZERO width - the logo was
	   not missing from the footer, it was collapsed - while the badges were
	   crushed to 45px and 65px thumbnails.

	   On a phone the three groups stack full width instead, right aligned to
	   match the RTL text around them. */
	.footer-wrap{
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		text-align: right;
		gap: 22px;
	}
	.footer-sec-1{
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 18px;
	}
	/* the badges stay side by side - they read as a pair, and at full width
	   there is room for both without shrinking them */
	.footer-sec-2{
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 14px;
	}
	/* the logo lost its box when the parent collapsed; give it one back.
	   full width rather than shrink-to-fit so the "text-align: right" above
	   lands every row on the same right edge. note the stacks use
	   align-items: stretch, not flex-end - the page is RTL, so on a column
	   flex container flex-END is the LEFT side, which pushed the contact
	   block away from the edge it was supposed to line up with. */
	.footer-sec-1 > div{
		width: 100%;
		max-width: 100%;
	}
	.footer {
		padding: 26px 16px !important;
	}
	.custom-tabs nav{
		overflow: auto;
	}
	table{
		overflow-x: auto;
		width: 100%;
		display: block;
		padding: 0 10px 0 90px;
	}
	.developer-section{
		padding: 0 15px 50px;
		margin-top: 40px !important;
	}
	.developer-title{
		font-size: 32px;
	}
	.developer-subtitle{
		font-size: 22px;
	}
	.developer-description{
		font-size: 16px;
		line-height: 28px;
	}
	.developer-gallery-wrap{
		gap: 8px;
	}
	.developer-gallery{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		gap: 10px;
	}
	.project-description p {
		text-align: right;
	}
	.map-chart {
		padding: 0 15px;
		margin-bottom: 0;
	}
	.gallery-item, .gallery-item-1, .gallery-item-2, .gallery-item-3, .gallery-item-4, .gallery-item-5, .gallery-item-6, .gallery-item-7, .gallery-item-8{
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1.7;
		grid-column: auto;
		grid-row: auto;
		border-radius: 0;
	}
	/* odd item out spans the full width instead of leaving a gap */
	.gallery-item:last-child:nth-child(odd){
		grid-column: 1 / -1;
		aspect-ratio: 2.1;
	}
	/* same corner-accent idea as desktop, adapted to the 2-column grid: only
	   the 4 true corners of the grid (top-left, top-right, bottom-left,
	   bottom-right) get a single rounded corner */
	.gallery-item:nth-child(1){ border-radius: 32px 0 0 0; }
	.gallery-item:nth-child(2){ border-radius: 0 32px 0 0; }
	.gallery-item:nth-child(7){ border-radius: 0 0 0 32px; }
	.gallery-item:nth-child(8){ border-radius: 0 0 32px 0; }
	.gallery-tag{
		font-size: 12px;
	}
	/* item 8's bottom-right corner is now rounded, so its tag needs a wider
	   box to keep the label clear of the curve - full width plus letting it
	   wrap to a second line, since the mobile tile is too narrow to fit the
	   whole label on one line even at 70% */
	.gallery-item-8 .gallery-tag{
		width: 100%;
		white-space: normal;
	}
	/* The last tile's tag was set to width:100%, so its background ran the whole
	   width of the tile as a full bar while every other tag sat as a short chip
	   hugging its own label. Back to auto width so it matches the rest, with a
	   little padding holding the text off the right edge.
	   :last-child rather than .gallery-item-8 - the gallery is CMS driven, so
	   the final tile is not always the eighth. */
	.gallery-item:last-child .gallery-tag{
		width: auto;
		max-width: 100%;
		text-align: right;
		padding-right: 22px;
	}
	.developer-gallery-disclaimer{
		margin-top: 12px;
	}
	.project-info-section{
		gap: 24px;
		padding: 30px 0 60px;
	}
	.project-block-wrap{
		max-width: 100%;
	}
	.project-block,
	.first-section .project-block,
	.second-section .project-block{
		width: 100%;
		height: auto;
		min-height: auto;
		margin: 0;
		flex-direction: column;
	}
	.project-image img{
		height: auto;
	}
	.project-image{
		width: 100%;
		height: auto;
		min-height: auto;
		flex: none;
		order: 1 !important;
		clip-path: none !important;
	}
	/* stacked and full width, so the safe zone is vertical here: the top/bottom
	   padding is taller than a leaf, which keeps the corners clear of the copy */
	.project-content{
		--pi-safe: 30px;
		width: 100% !important;
		order: 2 !important;
	}
	/* per section, to outrank the desktop bands in style.css - see the tablet block */
	.first-section .project-content,
	.second-section .project-content{
		padding: 40px 15px 100px 15px;
	}
	.project-content h2{
		font-size: 32px;
	}
	.project-description p{
		font-size: 16px;
		line-height: 28px;
	}
	/* small and flush to the corner - the extra top/bottom padding above
	   gives them their own space so they stop crossing into the text */
	.pi-leaf-top{
		top: 0;
		left: 0;
	}
	.pi-leaf-bottom{
		bottom: 0;
		right: 0;
	}
	/* Same equal-area system as the desktop rules, just a smaller nominal size: the
	   per-leaf sqrt-of-ratio widths in style.css carry over, so only the scalar
	   changes. 86px puts the tallest (leaf-3, the most portrait) at 110px, inside
	   the 118px padding band above, which is what keeps all four clear of the copy.
	   A fixed 100x96 box here instead letterboxed the portrait vectors - leaf-3 drew
	   at 54px wide against leaf-1's 96px, and the slack pushed each off its corner. */
	.pi-leaf{
		--pi-leaf-s: 86px;
	}
	/* Hand-tuned, with the two TOP pulls raised to what the 40px top padding can
	   actually clear: at -15/-10 both leaves landed on the copy at 320-414px. The
	   width cap on the first is what lets one padding value work at every size -
	   uncapped, 38vw reaches 291px at 767 and needs a ~205px band. */
	.first-section .pi-leaf-top{
		width: min(38vw, 145px);
		margin-left: -7vw;
		margin-top: -4vw;
	}
	.first-section .pi-leaf-bottom{
		width: calc(var(--pi-leaf-s) * 0.916);
		margin-bottom: 0;
	}
	.second-section .pi-leaf-top{
		width: 26vw;
    	margin-top: -6vw;
	}
	.second-section .pi-leaf-bottom{
		width: calc(var(--pi-leaf-s) * 0.786);
		margin-right: -16px;
		margin-bottom: -20px;
	}
	.project-shape{
		display: none;
	}
	.gallery-layout{
		flex-direction: column;
		gap: 0;
		padding: 0;
	}
	.gallery-side, .gallery-content{
		width: 100%;
	}
	.gallery-side{
		padding: 10px;
	}
	.gallery-content{
		padding: 40px 20px;
	}
	.main-gallery-image{
		height: 300px;
	}
	/* no hover on touch, so the "tap to enlarge" badge stays visible */
	.main-gallery-link::after{
		opacity: 1;
		width: 32px;
		height: 32px;
		background-size: 17px 17px;
		top: 8px;
		left: 8px;
	}
	.gallery-block + .gallery-block{
		margin-top: 28px;
	}
	.gallery-content h2{
		font-size: 24px;
		text-align: center;
	}
	.thumbnail{
		min-width: calc(25% - 6px);
		height: 70px;
	}
	.map-chart-wrap h2 {
		font-size: 42px;
	}

	.developer-description p {
		font-size: 16px;
		line-height: 1.6;
	}
	.project-description p {
		font-size: 16px;
		line-height: 1.6;
	}
	.gallery-description p {
		font-size: 16px;
		line-height: 1.6;
		text-align: right;
	}
	.faqs .accordion-body p {
		font-size: 16px;
		line-height: 1.6;
		text-align: right;
	}
	.chart, .map {
		min-height: 300px;
	}
	.project-gallery-section{
		padding-top: 40px;
		margin-top: 60px;
	}
	.faqs-section {
		padding: 60px 0;
	}
	.spread-payment p {
		font-size: 16px;
	}
	.map-chart-wrap a {
		font-size: 20px;
	}
	.accordian-mortgage .accordion-body {
		padding-left: 15px;
	}
	.mortgage-sec {
		padding: 60px 0;
	}
	.price-list h2 {
		font-size: 50px;
		margin-bottom: 9px;
	}
	.price-list p {
		font-size: 20px;
	}
	.price-list .chkbox {
		margin-left: 0;
		margin-right: 0;
		justify-content: start;
		display: flex;
		align-items: center;
	}
	.files-wrap.mb-4 {
		margin-bottom: 0 !important;
	}
	.files-downlaod-sec {
		margin-bottom: 40px !important;
	}
	.footer-social ul {
		gap: 20px;
	}
	.price-form label{
		margin-left: 0;
	}
	.faqs-img {
		padding-right: 0;
	}
	.spread-payment {
		padding: 0 0 0 20px;
	}
	/* was centred; the footer now reads right aligned like the rest of the
	   RTL page, so the heading and the phone / email rows line up on the
	   same right edge as the badges above them */
	.footer-social{
		width: 100%;
		text-align: right;
	}
	.footer-social h2{
		text-align: right;
	}
	.footer-social li a{
		display: inline-flex;
		align-items: center;
		gap: 10px;
	}
	/* the icon already sits first in the markup, which puts it on the right
	   in RTL - drop the old fixed offset so the gap above controls spacing */
	.footer-social li img{
		margin-left: 0;
		flex: 0 0 auto;
	}
	#searchbox.bottom-price-form{
		margin-bottom: 40px !important;
	}
	.blue-shape {
		width: 30px !important;
		height: 37px !important;
	}
	.pink-shape {
		left: 1vw;
		width: 30px !important;
		height: 46px !important;
	}
	.faqs .accordion-header .accordion-button{
		min-height: 40px;
	}
	.faqs .accordion-button span{
		line-height: 1.4 !important;
	}
}

@media (max-width: 400px) {
	.thumbnail-gallery-content{
		position: relative;
		width: 100%;
		top: -22px;
		background-size: 142%;
		min-height: 565px;
		background-position: -38px 28% !important;
		padding:132px 32px 0 32px;
		right: 0;
		background-color: var(--h-color);
	}
	.faqs .accordion-button p {
		font-size: 16px;
		line-height: 1.4;
		padding: 13px 0;
	}

}
@media (max-width: 365px) {
	.price-form label {
		font-size: 14px;
		margin-left: 0;
	}
	.thumbnail-gallery-content h2 {
		font-size: 46px;
	}
	.faqs .accordion-button p {
		font-size: 16px;
	}
}
/* Narrow desktop only. The green column cannot reach its 435px cap below ~1320, so
   the side gutters shrink with it and the top-left leaf gets close enough to the
   copy that the small top band in style.css stops clearing it. Wider than this the
   band stays at 0.5. Measured: 1201 needs 1.1, 1320 is clear at 0.5. */
@media (min-width: 1201px) and (max-width: 1319px) {
	.first-section .project-content{
		padding-top: calc(var(--pi-safe) * 1.15);
	}
}