/* Nexora overrides on top of the TechSoft template stylesheet. */

/* Brand lockup is an SVG at 420x120 (3.5:1). Size it by height so it sits in
   the template's logo slot no matter what the viewBox is. */
.navbar-brand img,
.techSoft-responsive-menu .logo img { height: 58px; width: auto; }
.footer-logo img { height: 62px; width: auto; }

/* Blog post hero image: our post photography is narrower than the template's
   blog-details art, so stretch it to the column like the original did. */
.blog-details-desc .article-image img { width: 100%; height: auto; }

/* Testimonial avatars — one fixed size for every card.
   Two template bugs made these vary:
   1. The size was set with `width` alone on a flex item free to shrink, so a
      long name or job title squeezed the circle.
   2. The top carousel's avatar has a 5px white ring and the template is
      border-box, so its 75px box only showed a 65x65 photo, while the
      "Recent Feedback" carousel showed a full 80x80.
   Both now render the same visible photo; change --avatar-size to resize. */
:root { --avatar-size: 75px; }

.testimonial-content-inner .author-info-box .author-img,
.single-testimonial2 .testimonial-bio2 .avatar2 {
	flex: 0 0 auto;
}
.testimonial-content-inner .author-info-box .author-img img,
.single-testimonial2 .testimonial-bio2 .avatar2 img {
	width: var(--avatar-size);
	height: var(--avatar-size);
	min-width: var(--avatar-size);
	object-fit: cover;
	/* content-box so the white ring sits outside the photo instead of eating it */
	box-sizing: content-box;
}

/* The page-title heading is an <h1> for SEO (it was an <h2>, leaving inner
   pages with no h1 at all). Hold the template's original 32px / 30px sizing. */
.page-title-content h1 { font-size: 32px; font-weight: 700; }
@media (max-width: 991px) { .page-title-content h1 { font-size: 30px; } }
/* Slides after the first use <h2> (one <h1> per page), so the template's
   entrance animation — which targets .home-slider-content h1 — has to cover
   them too. Sizing needs no help: .home-slider-title is already tag-agnostic. */
.flickity-enabled.is-draggable .flickity-slider > .is-selected .home-slider-content h2 {
	-webkit-animation: slideInUp 1s 0s both;
	animation: slideInUp 1s 0s both;
}

/* Service card headings are links for internal anchor text; keep them looking
   like headings, and hide the text that only exists for screen readers. */
.single-services-box-1 h3 a,
.single-services-box-2 h3 a { color: inherit; }
.single-services-box-1 h3 a:hover,
.single-services-box-2 h3 a:hover { color: #5764ec; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Project flip cards: the back face is absolutely positioned with a width but
   no height, so it collapsed to its own image's aspect ratio — the covers are
   square (600x600) and the work shots are 5:4, leaving a white strip under the
   card while it was flipped. Giving the back a definite height lets the
   image's own `height:100%; object-fit:cover` fill the same box as the front. */
.project-flip-box-back { height: 100%; }
.project-flip-box-front img,
.project-flip-box-back img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- /services cards -------------------------------------------------------
   Two fixes, both scoped to the services grid so the home page is untouched.

   1. Hover reveals the service's own photo behind a brand-blue wash, the way
      the home page cards do. The template hard-codes that art in
      .single-services-box-img-1..3, which only covers three cards; here the
      image comes from a --service-image custom property set per card, so it
      follows whatever the admin assigns to each service.
   2. The cards were as tall as their own text, so "Read More" sat at a
      different height in every card. Stretch the cards to a common height and
      push the button to the bottom of each. */

.services-area-2 .services-grid > [class*="col-"] { display: flex; }


.services-area-2 .single-services-box-2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
}

.services-area-2 .single-services-box-2::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	z-index: -1;
	background-image: linear-gradient(rgba(87, 100, 236, .78), rgba(87, 100, 236, .78)), var(--service-image);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(1.1);
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.services-area-2 .single-services-box-2:hover::after { opacity: 1; transform: scale(1); }

/* The template turns this text #333 on hover, which is unreadable on the photo. */
.services-area-2 .single-services-box-2:hover h3,
.services-area-2 .single-services-box-2:hover h3 a,
.services-area-2 .single-services-box-2:hover p,
.services-area-2 .single-services-box-2:hover .services-btn .services-btn-one,
.services-area-2 .single-services-box-2:hover .services-btn i { color: #fff; }

.services-area-2 .single-services-box-2:hover .services-icon-2 { border-color: rgba(255, 255, 255, .5); }
.services-area-2 .single-services-box-2:hover .services-icon-2::before { background: rgba(255, 255, 255, .18); }
.services-area-2 .single-services-box-2:hover .services-icon-2 i { color: #fff; }

/* Bottom-aligned button: with equal-height cards this puts every "Read More"
   on the same line. */
.services-area-2 .single-services-box-2 .services-btn { margin-top: auto; padding-top: 16px; }

/* Equal card heights across rows. Bootstrap's flex row only equalises the cards
   within one row, so the second row came out shorter and its buttons sat
   higher. Reserving four lines for the blurb makes every card the same height,
   which — with the bottom-aligned button above — puts all six "Read More"
   links on the same offset. Only from the 2-column breakpoint up; in a single
   column there is nothing to align and the reserve would just add whitespace.
   A longer blurb still expands its card, and the flex row keeps that row tidy. */
@media (min-width: 768px) {
	.services-area-2 .single-services-box-2 p { min-height: 9em; }  /* 5 lines */
}    /* 5 lines */
}

/* Home page service cards: same two problems as the /services grid — the third
   card has a shorter blurb, so it was 29px shorter and its "Read More" sat
   higher. Only the card columns are stretched; the row also holds the
   full-width "View All Services" column, which must stay as it is. */
.services-area-1 .services-grid > .col-lg-4 { display: flex; }

.services-area-1 .services-grid .single-services-box-1 {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.services-area-1 .services-grid .single-services-box-1 .services-btn { margin-top: auto; padding-top: 16px; }

@media (min-width: 1200px) {
	.services-area-1 .services-grid .single-services-box-1 p { min-height: 9em; }     /* 5 lines */
}
@media (min-width: 768px) and (max-width: 1199.98px) {
	.services-area-1 .services-grid .single-services-box-1 p { min-height: 10.8em; }  /* 6 lines */
}

/* Project detail: the description sits beside the cover image rather than
   under it. Align the text with the top of the image — the covers are square
   and taller than the copy, so vertical centring left a gap above the title. */
.project-details-area .project-details-intro { margin-top: 0; }
@media (max-width: 767.98px) {
	.project-details-area .project-details-image { margin-bottom: 30px; }
}