/*!
Theme Name: Alipes Child theme
Theme URI: https://bracketweb.com/alipeswp/
Template: alipes
Author: Layerdrops
Author URI: https://themeforest.net/user/layerdrops
Description: This is a Child theme for Alipes WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alipes-child
*/

/* ==========================================================================
   Skyrunn header & footer (Elementor posts "Skyrunn Header" / "Skyrunn Footer")
   ========================================================================== */

/* Header: shadow and slimmer bar once the sticky header detaches */
.skr-header {
	transition: box-shadow .3s ease;
}
.skr-header.elementor-sticky--effects {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.skr-header .skr-header__inner {
	transition: padding .3s ease;
}
.skr-header.elementor-sticky--effects .skr-header__inner {
	--padding-top: 8px !important;
	--padding-bottom: 8px !important;
}

/* Footer */
.skr-footer .elementor-icon-list-items {
	margin: 0;
	padding: 0;
	list-style: none;
}
.skr-footer .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Home hero (Revolution Slider "slider-1"): smooth dark tint in place of the old dotted overlay */
#rev_slider_1_1_wrapper rs-sbg-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 35;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(1, 12, 30, .72) 0%, rgba(1, 12, 30, .5) 55%, rgba(1, 12, 30, .3) 100%);
}

/* "Let's Talk About Your Brand" CTA (Alipes CTA widget, layout three): button was navy on navy */
.cta-three__btn {
	background-color: #F6F4F1;
	color: #011435;
}
.cta-three__btn:hover {
	color: #011435;
}

/* Alipes "Values" widget (image + navy text panel): keep both halves the same height */
@media (min-width: 992px) {
	.values-one__wrap {
		display: flex;
		align-items: stretch;
	}
	.values-one__left,
	.values-one__right {
		float: none;
	}
	.values-one__right {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Alipes "New Concept" widget: the navy block behind the image no longer runs into the section above */
.new-concept__right::before {
	top: -60px;
	bottom: -60px;
}
.new-concept__right::after {
	display: none;
}

/* Process step icons: navy icon centred in a cream circle, inverted on hover */
.new-concept__points li .icon {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	margin-top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.new-concept__points li .icon::before {
	top: 0;
	left: 0;
	right: auto;
	width: 56px;
	height: 56px;
	transition: background-color .3s ease;
}
.new-concept__points li .icon svg {
	width: 24px;
	height: 24px;
	fill: #011435;
	transition: fill .3s ease;
}
.new-concept__points li .icon span[class*="fa-"] {
	font-size: 24px;
	color: #011435;
}
.new-concept__points li:hover .icon::before {
	background-color: #011435;
}
.new-concept__points li:hover .icon svg {
	fill: #F6F4F1;
}
.new-concept__points li:hover .icon span[class*="fa-"] {
	color: #F6F4F1;
}
.new-concept__points li .text {
	margin-left: 22px;
}

/* ==========================================================================
   Card icons (Alipes "Amenities" + "Service" widgets)
   The theme sizes its own icon font at 64px; Font Awesome glyphs need to be
   smaller and centred inside the decorative chip behind them.
   ========================================================================== */
.services-one__icon,
.amenities__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
}
.services-one__icon::before {
	top: 0;
	left: 0;
	right: auto;
	width: 56px;
	height: 56px;
}
.amenities__icon::before {
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	width: 56px;
	height: 56px;
}
.services-one__icon span,
.amenities__icon span {
	font-size: 26px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.services-one__icon svg,
.amenities__icon svg {
	width: 26px;
	height: 26px;
	fill: var(--alipes-base);
}
.services-one__single:hover .services-one__icon svg {
	fill: var(--alipes-white);
}
.amenities__single:hover .amenities__icon span {
	transform: none;
}

/* Equal-height cards: Bootstrap floats leave staggered rows when card text
   lengths differ, so stretch each column instead. */
@media (min-width: 992px) {
	.services-one .row,
	.amenities .row {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.services-one .row > [class*="col-"],
	.amenities .row > [class*="col-"] {
		display: flex;
	}
	.services-one__left,
	.services-one__single,
	.amenities__single {
		width: 100%;
	}
	.services-one__single {
		display: flex;
	}
	.services-one__single-inner {
		width: 100%;
	}
}

/* ==========================================================================
   Image + text splits: match the two halves instead of letting the image
   run taller than the copy beside it.
   ========================================================================== */
@media (min-width: 992px) {
	.about-building .row {
		display: flex;
		align-items: stretch;
	}
	.about-building__left,
	.about-building__img,
	.about-building__img img {
		height: 100%;
	}
	.about-building__img img {
		object-fit: cover;
	}
	.about-building__right {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
/* The template reserves 360px at the bottom for a background image that this
   site does not use, which left a large empty band under the section. */
.about-building {
	padding: 100px 0 100px;
}

@media (min-width: 1200px) {
	.about-one > .container > .row,
	.about-three > .container > .row {
		display: flex;
		align-items: center;
	}
}

/* Remaining two-column image/text widgets: centre the shorter column against
   the taller one so the halves read as a matched pair. */
@media (min-width: 992px) {
	.values-two .container > .row,
	.about-three .container > .row,
	.about-one .container > .row {
		display: flex;
		align-items: center;
	}
}

/* ==========================================================================
   Responsive fixes
   ========================================================================== */

/* The Alipes widget templates mark their grid items as `col-xl-N col-lg-N`
   with no small-screen class. Below 992px those divs have no Bootstrap width,
   so as flex children of .row they squeeze side by side instead of stacking —
   which is what crushed the "What We Do" cards into one word per line.
   Columns that DO declare a md/sm size are left to Bootstrap. */
@media (max-width: 991.98px) {
	.elementor-widget-container .row > [class*="col-xl-"]:not([class*="col-md-"]):not([class*="col-sm-"]) {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
/* Two across on larger phones and tablets rather than one long column. */
@media (min-width: 576px) and (max-width: 991.98px) {
	.feature-one .row > [class*="col-xl-"]:not([class*="col-md-"]):not([class*="col-sm-"]),
	.amenities .row > [class*="col-xl-"]:not([class*="col-md-"]):not([class*="col-sm-"]) {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Decorative shapes are positioned off the edge of the design grid and spill
   outside the viewport on small screens. They add nothing on mobile. */
@media (max-width: 991.98px) {
	.about-one__shape-1,
	.about-one__img-two,
	.values-one__shape-1,
	.cta-one__shape-1,
	.cta-one__shape-2,
	.cta-one__shape-3,
	.new-concept__shape-1,
	.services-one__shape-1,
	.services-one__shape-2 {
		display: none;
	}
}

/* Hero: keep the slide text clear of the screen edges on phones. */
@media (max-width: 767px) {
	#rev_slider_1_1_wrapper rs-sbg-wrap::after {
		background: linear-gradient(180deg, rgba(1, 12, 30, .55) 0%, rgba(1, 12, 30, .72) 100%);
	}
}

/* Card titles in the Alipes widgets are always wrapped in an <a>, even when no
   destination is set. An empty href still reloads the page when clicked, so
   make those titles behave as plain text. */
.services-one__title a[href=""],
.amenities__title a[href=""],
.team-one__title a[href=""],
.team-two__title a[href=""],
.apartment-one__title a[href=""],
.feature-one__title a[href=""] {
	pointer-events: none;
	cursor: default;
}

/* Hero buttons. Revolution Slider writes its colours inline, so these need
   !important. Primary is solid cream (set in the slider data); the secondary
   is an outline button, which the slider's own border control did not apply. */
#rev_slider_1_1 a.rev-btn#slider-1-slide-1-layer-5 {
	background-color: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, .75) !important;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
#rev_slider_1_1 a.rev-btn#slider-1-slide-1-layer-5:hover {
	background-color: #F6F4F1 !important;
	color: #011435 !important;
	border-color: #F6F4F1 !important;
}

/* ==========================================================================
   Inner-page banner (.page-header)
   ========================================================================== */

/* The theme's overlay starts 39px down and is a fixed 420px tall, so inside a
   603px banner it painted only the middle band and left hard horizontal seams
   at the top and bottom. Replace it with one gradient over the whole banner:
   dark at the top so it meets the navy header cleanly, lighter through the
   middle so the photo shows, dark again behind the title. */
.page-header .page-header__overly {
	top: 0;
	height: 100%;
	opacity: 1;
	background: linear-gradient(
		180deg,
		rgba(1, 12, 30, .82) 0%,
		rgba(1, 12, 30, .45) 38%,
		rgba(1, 12, 30, .40) 58%,
		rgba(1, 12, 30, .80) 100%
	);
}

/* 330px of padding above the title made every inner banner ~600px tall. */
.page-header .page-header__inner,
.page-header--unit-test .page-header__inner {
	padding-top: 170px;
	padding-bottom: 105px;
}
@media (max-width: 1199px) {
	.page-header .page-header__inner,
	.page-header--unit-test .page-header__inner {
		padding-top: 130px;
		padding-bottom: 85px;
	}
}
@media (max-width: 767px) {
	.page-header .page-header__inner,
	.page-header--unit-test .page-header__inner {
		padding-top: 96px;
		padding-bottom: 64px;
	}
	.page-header__inner h2 {
		font-size: 34px;
		line-height: 40px;
	}
}

/* ==========================================================================
   Section rhythm
   The theme pads most sections 120px top and bottom and uses the same value at
   every breakpoint, which left large empty bands between blocks and made the
   pages very long on phones. These tighten it and scale it down responsively.
   Where the previous developer set a deliberate value (.dev_home-faq .faq-page
   and friends) those rules are more specific and still win.
   ========================================================================== */

/* Sections padded evenly top and bottom. */
.about-one,
.apartment-one,
.apartment-two,
.new-concept,
.amenities,
.team-one,
.faq-page,
.values-two,
.services-one,
.contact-page,
.contact-two,
.about-building,
.why-choose-one {
	padding-top: 84px;
	padding-bottom: 84px;
}
/* Sections the theme deliberately leaves flush at one edge. */
.cta-one,
.feature-one {
	padding-bottom: 76px;
}
.about-three {
	padding-top: 84px;
}
.cta-three {
	padding-top: 76px;
	padding-bottom: 68px;
}

@media (max-width: 991px) {
	.about-one,
	.apartment-one,
	.apartment-two,
	.new-concept,
	.amenities,
	.team-one,
	.faq-page,
	.values-two,
	.services-one,
	.contact-page,
	.contact-two,
	.about-building,
	.why-choose-one {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.cta-one,
	.feature-one {
		padding-bottom: 58px;
	}
	.about-three {
		padding-top: 64px;
	}
	.cta-three {
		padding-top: 58px;
		padding-bottom: 52px;
	}
}

@media (max-width: 767px) {
	.about-one,
	.apartment-one,
	.apartment-two,
	.new-concept,
	.amenities,
	.team-one,
	.faq-page,
	.values-two,
	.services-one,
	.contact-page,
	.contact-two,
	.about-building,
	.why-choose-one {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.cta-one,
	.feature-one {
		padding-bottom: 44px;
	}
	.about-three {
		padding-top: 48px;
	}
	.cta-three {
		padding-top: 48px;
		padding-bottom: 44px;
	}
	/* The navy panel in the Values widget carried the same 120px. */
	.values-one__right {
		padding: 56px 0;
	}
}

/* Card grids give every card a 30px bottom margin, including the last row,
   which stacks on top of the section padding. Absorb that trailing margin. */
.amenities .row,
.services-one .row,
.team-one .row,
.feature-one .row {
	margin-bottom: -30px;
}

/* Team cards: the three portraits were uploaded at different aspect ratios, so
   the cards ended up different heights and stepped down the row. Crop them to a
   common portrait ratio and let the columns share a height. */
.team-one__img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
@media (min-width: 992px) {
	.team-one .row {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}
	.team-one .row > [class*="col-"] {
		display: flex;
	}
	.team-one__single {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
}
/* Team member names carry an empty href like the other card titles. */
.team-one__name a[href=""] {
	pointer-events: none;
	cursor: default;
}