/*
 Theme Name:   Ha2 Architecture & Design Inc. Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
	--font-size-h1-hero: clamp(3.2rem, 1.9613rem + 6.1935vw, 8rem);
/* 	--font-size-h2-hero: clamp(2.5rem, 1.6636rem + 4.1818vw, 4.8rem); */
    --font-size-h1: clamp(3rem, 2.329rem + 3.3548vw, 5.6rem);
    --font-size-h2: clamp(2.8rem, 2.4387rem + 1.8065vw, 4.2rem);
    --font-size-h3: clamp(2.4rem, 2.2452rem + 0.7742vw, 3rem);
    --font-size-h4: clamp(2.2rem, 2.1226rem + 0.3871vw, 2.5rem);
    --font-size-h5: clamp(2rem, 2rem + 0vw, 2rem);
    --font-size-h6: clamp(1.8rem, 1.8rem + 0vw, 1.8rem);
	--body-text: clamp(1.8rem, 1.8rem + 0vw, 1.8rem);
	--top-bottom: clamp(7rem, 6.2258rem + 3.871vw, 10rem);
	--left-right: clamp(2rem, 2rem + 0vw, 2rem);
	--gap: clamp(2rem, 2rem + 0vw, 2rem);
	--gap-ten: clamp(1rem, 1rem + 0vw, 1rem);
	--btn-font-size: clamp(1.2rem, 1.1226rem + 0.3871vw, 1.5rem);
}

/* button arrow rotate css */
.btn-arrow-rotate i {
    transform: rotate(-35deg);
}
/*  */
.brxe-filter-radio[data-mode=button] input[type=radio]:focus-visible+.bricks-button, .brxe-filter-radio[data-mode=button] label:focus-within .bricks-button {
    outline: 1px solid #fff !important;
    outline-offset: 0px !important;
}
.ha-heading {
    color: #fef8ce;
}

.award-text {
    font-size: 10px;
	font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgb(171 168 168);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(171 168 168);
    padding: 3px 8px;
    border-radius: 100px;
}

#brxe-gczggb .splide__slide.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    z-index: 1 ;
    animation: kenBurns 8s ease-in-out infinite alternate;	
}
@keyframes kenBurns
{
0% {
    transform: scale(1) translate(0, 0);
}
100% {
    transform: scale(1.07) translate(-1%, -1%);
	}}
[data-id="brxe-yjrtvd"].splide__slide::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0.64));
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
	z-index: 3;
}

.slider-dot .swiper-pagination-horizontal {
    background: #000;
    border-radius: 100px;
    padding: 1px 20px;
}

/* contact us form css */
#brxe-xfupad label {
    color: #fff;
    font-size: 16px;
    font-family: Urbanist;
}
#brxe-xfupad input {
    background-color: #191919;
    border: 1px solid #606266;
    height: 60px;
	padding-left: 40px;
	color: #fff;
}
#brxe-xfupad textarea {
    background-color: #191919;
    border: 1px solid #606266;
	padding-left: 40px;
	color: #fff;
}
.user{
	position: relative;
}

.user .ff-el-input--content::before, .user-icon-two .ff-el-input--content::before, .user-email .ff-el-input--content::before, .user-phone .ff-el-input--content::before, .user-location .ff-el-input--content::before, .user-comment .ff-el-input--content::before  {
    font-family: Font Awesome\ 6 Solid;
    width: 40px;
    height: 40px;
	color: #ffffff80;
    position: absolute;
    font-size: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}
.user .ff-el-input--content::before {
    content: "\f406";
}
.user-icon-two .ff-el-input--content::before {
    content: "\f406";
}

.user-email .ff-el-input--content::before {
    content: "\f0e0";
}

.user-phone .ff-el-input--content::before {
    content: "\f095";
}

.user-location .ff-el-input--content::before {
    content: "\f3c5";
}
.user-comment .ff-el-input--content::before {
    content: "\f086";
}

.submit-contactus button {
    width: 100%;
    max-width: 185px;
    padding: 10px 14px 10px 55px !important;
    text-align: left !important;
	transition: all 0.5s;
	padding-right: 45px;
}
.submit-contactus button:hover {
	opacity: 1 !important;
}
.submit-contactus button::after {
    content: "\f061";
    font-family: Font Awesome\ 6 Solid;
    margin-left: 10px;
    transform: rotate(-35deg);
    position: absolute;
}
.error.text-danger {
    text-transform: capitalize;
    font-family: 'Quicksand';
    letter-spacing: 1px;
}
/*  */
.projects-img-zoom:hover {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.projects-img-zoom {
    transition: transform 1.5s;
}
/* ---- Ha2 project gallery: reference-site layout ---- */
.brxe-image-gallery{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
  --columns:2;                    /* neutralise Bricks' own column setting */
}

/* Bricks sets an aspect-ratio on the IMG using the element ID, which
   outranks these class rules. This cancels it. Keep it even if you
   cleared the field in the UI - it does no harm. */
.brxe-image-gallery img.image{
  aspect-ratio:auto !important;
}
.brxe-image-gallery li{margin:0;position:relative;min-height:140px;overflow:hidden}
.brxe-image-gallery figure,
.brxe-image-gallery figure a{margin:0;display:block;height:100%}
.brxe-image-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;      /* this is what the reference site does */
  object-position:center center;
  display:block;
}

/* default: half-width landscape tile */
.brxe-image-gallery li{aspect-ratio:1/0.68}

/* full-width band - every 5th and 6th photo */
.brxe-image-gallery li:nth-child(10n+1),
.brxe-image-gallery li:nth-child(10n+6){
  grid-column:span 2;
  aspect-ratio:1/0.62;   /* wider tile, so a slightly wider shape */
}

/* portrait photos - near-square tile, detected automatically */
.brxe-image-gallery li:has(img[width="1500"][height="2050"]){
  aspect-ratio:0.82/1;
  grid-column:span 1;
}
.single-project .brxe-post-content.ha2-clamp,
.single-project .ha2-text-part.ha2-clamp {
  display: block !important;
  overflow: hidden !important;
  max-height: var(--ha2-clamp-h, 420px) !important;
}

.single-project .brxe-post-content.ha2-clamp.is-open,
.single-project .ha2-text-part.ha2-clamp.is-open {
  max-height: var(--ha2-full-h, none) !important;
}

/* Base appearance. The .ha2-text-part half is what makes Galleria
   work; the other 28 projects use .project-post-content. */
.project-post-content.ha2-clamp,
.ha2-text-part.ha2-clamp {
  position: relative;
  overflow: hidden;
  max-height: var(--ha2-clamp-h, 420px);
  transition: max-height .45s ease;
}

.project-post-content.ha2-clamp.is-open,
.ha2-text-part.ha2-clamp.is-open {
  max-height: var(--ha2-full-h, none);
}

/* Fade to the page background so the cut never looks like a bug.
   The page is black, so the gradient ends in the black variable. */
.project-post-content.ha2-clamp::after,
.ha2-text-part.ha2-clamp::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom,
              rgba(0,0,0,0),
              rgba(0,0,0,.85) 60%,
              var(--bricks-color-black, #000));
  pointer-events: none;
  transition: opacity .3s ease;
}

.project-post-content.ha2-clamp.is-open::after,
.ha2-text-part.ha2-clamp.is-open::after { opacity: 0; }

.ha2-readmore {
  display: block;
  /* 40px below matches the spacing on .ha2-text-part and
     .brxe-image-gallery, so the button never sits tight
     against the gallery underneath it. */
  margin: 18px auto 40px;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 4px 2px;
  font: inherit;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: inherit;              /* inherits the white body text */
  opacity: .85;
  cursor: pointer;
  transition: opacity .2s ease;
}

.ha2-readmore:hover { opacity: 1; }

.ha2-readmore:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Hidden until the script decides it is needed, so it never
   flashes on a short project or if JavaScript fails to run. */
.ha2-readmore { display: none; }
.ha2-readmore.is-needed { display: block; }

/* ---------------------------------------------------------------
   REQUIRED for Galleria. The wrapper is display:contents, so the
   button becomes a direct child of the flex column that carries the
   interleave order values. It defaults to order:0, which put it
   ABOVE the text. order:2 places it after text part 1 (order:1)
   and before the first gallery (order:2 on the gallery, source
   order then decides).
   --------------------------------------------------------------- */
.single-project .brxe-post-content > .ha2-readmore { order: 1 !important; }
/* Project Details read more ends */
/* ---- Ha2 YouTube grid ---- */
/* A fixed 3 column grid, centred.
   Not auto-fit or auto-fill: at 1545px wide those compute FOUR columns,
   so a 4th video sat on row one instead of wrapping. Verified in browser.
   justify-content:center keeps 1 or 2 cards centred rather than left aligned. */
.ha2-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
  /* Cap the GRID, not the tracks. 3 x 420 + 2 x 30 gap = 1320.
     Tracks are 1fr so they share the space evenly and stay equal;
     the cap stops them growing past 420 on a wide screen.
     Do NOT use minmax(0, auto) on the tracks: auto has no ceiling,
     so a single video stretched to fill the whole 1545px container. */
  max-width: min(1320px, 100%);
}

/* Two videos: 2 x 420 + 30 = 870. One video: a single 420 track. */
.ha2-videos:has(.ha2-video:nth-child(2)):not(:has(.ha2-video:nth-child(3))) { max-width: min(870px, 100%); }
.ha2-videos:not(:has(.ha2-video:nth-child(2))) { max-width: min(420px, 100%); }

/* Fewer than 3: only declare as many tracks as there are cards,
   so two videos are two centred cards, not two cards plus a gap. */
.ha2-videos:has(.ha2-video:nth-child(2)):not(:has(.ha2-video:nth-child(3))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ha2-videos:not(:has(.ha2-video:nth-child(2))) {
  grid-template-columns: minmax(0, 1fr);
}

/* Centre an orphaned last row. With 4 videos the 4th would otherwise sit
   alone on the left. Scoped to the 3 column desktop layout only: below
   1100px the grid is 2 columns and these rules would push a card off grid.
   Verified at 900px: without the media query, 5 videos broke the layout. */
@media (min-width: 1101px) {
  .ha2-videos:has(.ha2-video:nth-child(4)):not(:has(.ha2-video:nth-child(5)))
    .ha2-video:nth-child(4) { grid-column: 2; }

  .ha2-videos:has(.ha2-video:nth-child(5)):not(:has(.ha2-video:nth-child(6)))
    .ha2-video:nth-child(4),
  .ha2-videos:has(.ha2-video:nth-child(5)):not(:has(.ha2-video:nth-child(6)))
    .ha2-video:nth-child(5) { transform: translateX(calc(50% + 15px)); }
}

@media (max-width: 1100px) {
  .ha2-videos,
  .ha2-videos:has(.ha2-video:nth-child(2)):not(:has(.ha2-video:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet: 2 columns. Centre a lone card on an odd numbered last row.
   nth-child(odd):last-child means "the last card, sitting in column 1". */
@media (min-width: 768px) and (max-width: 1100px) {
  .ha2-videos > .ha2-video:nth-child(odd):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 420px;
    width: 100%;
  }
}

.ha2-video {
  margin: 0;
  /* The 1px border would otherwise add 2px to the track width,
     so a 420px track produced a 422px card. */
  box-sizing: border-box;
  /* A quiet border so each card reads as an object on the black page,
     rather than a photo floating in space. */
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  transition: border-color .3s ease, background .3s ease;
  display: flex;
  flex-direction: column;
}

.ha2-video:hover {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.045);
}

/* Padding lives on the text, not the card, so the thumbnail
   still runs edge to edge inside the border.
   flex:1 makes every card in a row the same height even when one
   title wraps to two lines, so the bottom borders line up. */
.ha2-video-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Push the date and views to the bottom of the card */
.ha2-video-meta { margin-top: auto; }

.ha2-video-play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.ha2-video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* crop, never stretch */
  display: block;
  transition: transform 1.2s ease, opacity .3s ease;
}

.ha2-video-play:hover img { transform: scale(1.05); opacity: .85; }

.ha2-video-play:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Play triangle, drawn in CSS so there is no image to load */
.ha2-video-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  transition: background .3s ease, transform .3s ease;
}
.ha2-video-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}
.ha2-video-play:hover .ha2-video-icon {
  background: rgba(0,0,0,.6);
  transform: translate(-50%, -50%) scale(1.08);
}

.ha2-video-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 6px;
  text-transform: none;       /* headings are uppercase site wide, titles are not */
}

.ha2-video-by {
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .65;
  margin: 0 0 10px;
}

/* Date and view count */
.ha2-video-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .05em;
  opacity: .5;
}

.ha2-video-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ha2-videos-all {
  text-align: center;
  margin: 40px 0 0;
}
.ha2-videos-all a {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  opacity: .85;
}
.ha2-videos-all a:hover { opacity: 1; }

@media (max-width: 767px) {
  /* One per row on a phone. The :has() rules above set 1 or 2 tracks by
     card count, so they must be overridden here or two videos squeeze
     into 158px each side by side. Verified at 390px. */
  .ha2-videos,
  .ha2-videos:has(.ha2-video:nth-child(2)):not(:has(.ha2-video:nth-child(3))),
  .ha2-videos:not(:has(.ha2-video:nth-child(2))) {
    grid-template-columns: 1fr;
    /* Still capped at 460. On a 700px tablet in portrait, a plain 100%
       gave a 660px card, far wider than the 420 it uses on desktop. */
    max-width: min(460px, 100%);
    gap: 34px;
  }
  .ha2-video-icon { width: 54px; height: 54px; }
}

@media only screen and (max-width:767px){
  .brxe-image-gallery{grid-template-columns:1fr}
  .brxe-image-gallery li:nth-child(10n+1),
  .brxe-image-gallery li:nth-child(10n+6){grid-column:unset;aspect-ratio:1/0.68}
}
/* Interleave text parts and galleries */
#brxe-8a26ad{
  display:flex !important;
  flex-direction:column !important;
}

/* Galleria: interleave text with the photo galleries */
.single-project .brxe-post-content { display: contents; }

.single-project .ha2-text-part[data-part="1"] { order: 1; }
.single-project #brxe-dlcczh                  { order: 2; }  /* photos 1–21  */
.single-project .ha2-text-part[data-part="2"] { order: 3; }
.single-project #brxe-tfqesm                  { order: 4; }  /* photos 22–42 */
.single-project #brxe-vbkkwu                  { order: 5; }  /* photos 43–63 */

.ha2-text-part{ max-width:100%; margin:0 auto 40px }
.brxe-image-gallery{ margin-bottom:40px }
/*Text Link COlor */
#brx-content p a {
    color: #fef8ce;
}
#brx-content p a:hover {
    text-decoration: underline;
}
@media (992px <= width <= 1094px) {
/* 	#brxe-kbaggm .bricks-nav-menu > li {
    	margin-left: 12px !important;
	} */
	#brxe-kbaggm .bricks-nav-menu > li > a {
    font-size: 11px !important;
}
}

@media (width <= 768px) {
	.brxe-nav-menu .bricks-mobile-menu {
       margin-top: 20px;
}
		
}

@media (width <= 450px) {
		.brxe-image-gallery{
  grid-template-columns:1fr !important;
  
}	
}