.bannerVid {
  height: calc(100vh + 5rem * 2);
  margin-top: -5rem;
  pointer-events: none;
  z-index: -1;
  background-color: var(--color-dark);
}

img.bannerVid {
  object-fit: cover;
}

.iti {
    position: relative;
    display: block!important;
}

/* @media (max-width: 1000px) {
  :is(video, iframe).bannerVid {
    width: auto;
    transform: translateX(-50%);
  }
} */
@media (max-width: 1000px) {
  :is(video, iframe).bannerVid {
  width: auto;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  }
  }

.bannerContent {
  z-index: 0;
  color: white;
  position: relative;
}

.darkgradOverlay:after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 10%,
    rgba(0, 0, 0, 0.2) 25%,
    rgba(0, 0, 0, 0.2) 75%,
    rgba(0, 0, 0, 0.3) 90%,
    rgba(0, 0, 0, 0.2) 100%
  );
}
.darkgradOverlay:has(video):after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 10%,
    rgba(0, 0, 0, 0.2) 25%,
    rgba(0, 0, 0, 0.2) 75%,
    rgba(0, 0, 0, 0.3) 90%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.darkgradOverlay:has(img):after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.7) 10%,
    rgba(0, 0, 0, 0.7) 25%,
    rgba(0, 0, 0, 0.7) 75%,
    rgba(0, 0, 0, 0.7) 90%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

.parallexColumns {
  --startPoint: calc(100vh);
  --endPoint: calc(350vh);
  --scrollRange: calc(
    var(--endPoint) - var(--startPoint)
  ); /* Total scroll distance */
  --progress: calc((var(--scrollY) - var(--startPoint)) / var(--scrollRange));
  will-change: opacity;
  opacity: clamp(0, calc(1 - abs(2 * var(--progress) - 1)), 0.5);
}

.parallexColumns .column {
  --multiplier: 1;
  will-change: transform;
  transform: translateY(
    calc((var(--startPoint) - var(--scrollY)) * var(--multiplier))
  );
  transition: transform 300ms ease;
}

.verticalText {
  writing-mode: vertical-rl;
  -webkit-text-orientation: sideways;
  text-orientation: sideways;
  scale: -1;
}
@media (max-width: 1000px) {
  .verticalMobileReset {
    writing-mode: initial;
    -webkit-text-orientation: initial;
    text-orientation: initial;
    scale: 1;
  }
}
.circleBefore {
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  opacity: 0.6;
  transition: opacity 300ms ease 400ms;
}

.circleBefore:before {
  content: '';
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 50%;
  background-color: #a9510a;
  display: block;
  margin-block: auto;
}

.line {
  position: relative;
}
.line:before {
  background: white;
  opacity: 0.4;
  position: absolute;
  inset: 0;
  content: '';
}
.line:after {
  position: absolute;
  inset: 0;
  background-color: #a9510a;
  content: '';
  transform: scaleX(0);
  transition: transform 400ms ease;
  will-change: transform;
  transform-origin: 0;
}
.moreDiv {
  cursor: pointer;
}
.moreDiv:hover .line:after {
  transform: scaleX(1);
}
.moreDiv:hover .circleBefore {
  opacity: 1;
}

.parallexColumns + .txtContent {
  transition: opacity 400ms ease-in-out;
}

.bg-dark-white {
  background: linear-gradient(
    to bottom,
    var(--color-dark) 0%,
    var(--color-dark) 49.9%,
    #fff 50%,
    #fff 100%
  );
}

section.services .imgWrapper {
  aspect-ratio: 2/3;
  position: relative;
  scale: 1;
  transition: scale 400ms ease;
}
section.services .imgWrapper:after {
  position: absolute;
  background-color: black;
  opacity: 0.2;
  inset: 0;
  content: '';
  scale: 1;
  transition: scale 400ms ease;
}
section.services .imgWrapper img {
  aspect-ratio: 2/3;
  height: 100%;
  width: 100%;
  object-fit: cover;
  scale: 1;
  transition: scale 400ms ease;
}
section.services .txtWrapper {
  color: white;
}
section.services .card .txtWrapper .title {
  transition: color 300ms ease;
}

section.services .card .descWrapper {
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

section.services .card:hover .descWrapper {
  grid-template-rows: 1fr;
}

section.services .card:hover {
  z-index: 1;
}

section.services .card:hover .txtWrapper .title {
  color: var(--color-golden);
}

@media (max-width: 1000px) {
  section.services .card .descWrapper {
    grid-template-rows: 1fr;
  }
  section.services .card {
    z-index: 1;
  }

  section.services .card .txtWrapper .title {
    color: var(--color-golden);
  }
}

@media (min-width: 1000px) {
  section.services .card:hover .imgWrapper,
  section.services .card:hover .imgWrapper:after,
  section.services .card:hover .imgWrapper img {
    scale: 1.05;
  }
}

.projectSlideBtn {
  --gray: #c4c4c4;
  color: var(--gray);
  border: 1px solid var(--gray);
  padding: 0.5rem;
  border-radius: 50%;
  display: block;
  transition: border-color 300ms ease, color 300ms ease;
}
.projectSlideBtn:hover {
  /* --gray: var(--color-golden); */
    --gray: black;
    cursor: pointer;
}
.projectCard h2 {
  margin-block-end: 2rem;
}
.projectCard {
  background-color: #ededed;
  padding-inline-start: 5rem;
  padding-block-start: 5rem;
  padding-block-end: 2rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  color: #989898;
}
@media (width < 80rem) {
  .projectCard {
    grid-template-columns: 1fr;
    padding-inline: 2rem;
    padding-block: 2rem;
    word-break: break-word;
  }
}

.container:has(.projectCard) {
  position: relative;
}

.projectCard .leftContent {
  display: grid;
  gap: 3rem;
  grid-auto-rows: max-content;
}
@media (width < 80rem) {
  .projectCard .leftContent {
    order: 1;
    gap: 2rem;
    word-break: break-word;
  }
}
.projectCard .readMoreBtn {
  background-color: transparent;
  border: 1px solid #c4c4c4;
  max-width: max-content;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  border-radius: 200vmax;
  transition: border-color 300ms ease, color 300ms ease;
}
.projectCard .readMoreBtn:hover {
  border-color: var(--color-golden);
  color: var(--color-golden);
}

.projectCard .rightContent {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 1rem;
  max-width: 55%;
}
@media (width < 80rem) {
  .projectCard .rightContent {
    max-width: 100%;
    inset-inline-end: initial;
    inset-block-end: initial;
    position: relative;
  }
}
.projectCard .rightContent img {
  aspect-ratio: 900 / 607;
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  
}

@media(max-width:800px) {
    .projectCard .rightContent img { height:unset;}
  }




.projectCard .rightContent .txt {
  margin-top: 1rem;
}

.YtVidWrapper::after {
  position: absolute;
  inset: 0;
  z-index: 10;
  content: '';
}

footer svg {
  background: gray;
  stroke: black;
  padding: 0.3rem;
  box-sizing: border-box;
  border-radius: 50%;
  width: 1.6rem;
  height: auto;
  fill: white;
  position: relative;
}
/* footer svg::before {
    display: block;
    height: 1.25rem;
    width: 1.25rem;
    background-color: gray;
    content: "";
    position: absolute;
    } */

footer svg:is(.feather-facebook, .feather-linkedin, .feather-twitter) {
  stroke: transparent;
}
footer svg:is(.feather-instagram, .feather-youtube) {
  stroke: white;
  fill: transparent;
}

footer svg:hover {
  background: var(--color-golden);
}
footer a {
  transition: color 300ms ease;
}
footer svg {
  transition: background-color 300ms ease;
}

footer a:hover {
  color: var(--color-golden);
  cursor: pointer;
}

a {
  cursor: pointer;
}

.parallexColumns + .txtContent p:not(.verticalText) span {
  opacity: 0.1;
  /* transition: opacity 5ms ease; */
}

/* .menuOverlay {
    position: fixed;
    z-index: 1;
    color: black;
    height: 100vh;
    width: 100vw;
  } */

.close {
  --diagonal: clamp(2rem, 1rem + 5vw, 4rem);
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: var(--diagonal);
  height: var(--diagonal);
  opacity: 0.3;
  transition: opacity 400ms ease-in-out;
  cursor: pointer;
}
.close:hover {
  opacity: 1;
}
.close:before,
.close:after {
  position: absolute;
  left: calc(15 / 33 * 100%);
  content: ' ';
  height: var(--diagonal);
  width: 3px;
  background-color: #fff;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

.menuNav {
  grid-auto-rows: max-content;
}
.menuNav a {
  padding-inline-start: calc(var(--order) * 2.5%);
  opacity: 0.6;
  transition: opacity 400ms ease-in-out;
}
.menuNav a:hover {
  opacity: 1;
}

/* .menuOverlay .imgWrapper:after {
    background-image: radial-gradient(
      circle,
      rgba(30, 67, 82, 0.5),
      rgba(30, 67, 82, 0.6),
      rgba(30, 67, 82, 0.9),
      rgba(30, 67, 82, 1)
    );
    content: '';
    position: absolute;
    inset: 0;
  } */

.grid-item-left .menuImg {
  opacity: 0.5;
  transition: opacity 1s ease-in-out;
}
.grid-item-left:hover .menuImg {
  opacity: 0.4;
}

.container-half {
  width: 100%;
  @media (width >= 64rem) {
    max-width: calc(64rem / 2);
  }
  @media (width >= 80rem) {
    max-width: calc(80rem / 2);
  }
  @media (width >= 96rem) {
    max-width: calc(96rem / 2);
  }
}

.grid-auto-row-max {
  grid-auto-rows: max-content;
}

.accordionGrid .accordionContent {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 400ms ease-in-out;
}

.accordionGrid:hover .accordionContent {
  grid-template-rows: 1fr;
}
@media (max-width: 1000px) {
  .accordionGrid > a {
    pointer-events: none;
  }
}

.menuOverlay {
  pointer-events: none;
}

[data-menu='open'] .menuOverlay {
  pointer-events: initial;
}
.menuOverlay :is(.grid-item-right, .grid-item-left) {
  transition: transform 500ms ease-in-out;
}

.menuOverlay .grid-item-left {
  transform: translateY(150vh);
}
.menuOverlay .grid-item-right {
  transform: translateY(-150vh);
}
[data-menu='open'] .menuOverlay :is(.grid-item-left, .grid-item-right) {
  transform: translateY(0vh);
}
body[data-menu='open'] {
  overflow: hidden;
}

footer .col {
  align-self: flex-start;
}

.page-rounded-rect {
  aspect-ratio: 4/1 !important;
  width: auto !important;
  border-radius: 200vmax !important;
  border: white 1px solid;
  background: transparent;
  transition-property: transform, background-color, opacity !important;
  transition-duration: 300ms !important;
  transition-timing-function: ease-in-out !important;
  opacity: 1 !important;
}

.page-rounded-rect.is-active {
  transform: scale(1) !important;
}

input.wpcf7-form-control.wpcf7-tel.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-tel.input-field.phone_number {
    min-width: 100% !important;
}

.formHolder form {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  height: 100%;
  max-width: 25rem;
  margin-inline: auto;
  gap: 2rem;
}

.formHolder :is(input, textarea) {
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  color: white;
  width: 100%;
  resize: none;
}

.formHolder :is(input, textarea)::placeholder {
  color: #ffffffd3;
}

.formHolder :is(input, textarea):focus-within {
  outline: none;
}

.formHolder .inputGroup {
  position: relative;
  width: 100%;
}

.formHolder .inputGroup::before,
.formHolder .inputGroup::after {
  position: absolute;
  bottom: -0.75rem;
  inset-inline: 0;
  height: 2px;
  content: '';
}

.formHolder .inputGroup::before {
  background-color: #333;
}
.formHolder .inputGroup::after {
  background-color: var(--color-yellow);
  scale: 0 1;
  transition: scale 300ms ease;
}

.formHolder .inputGroup::after {
  background-color: var(--color-yellow);
  scale: 0 1;
  transition: scale 300ms ease-in-out;
  transform-origin: 0;
}
.formHolder .inputGroup:focus-within:after {
  scale: 1;
}

.dashList li:before {
  content: '- ';
}
:is(.serviceSplide, #projectDetail) .imgWrapper {
  background: linear-gradient(to bottom, transparent, 80%, rgba(0, 0, 0, 0.6));
}
:is(.serviceSplide, #projectDetail) .imgWrapper img {
  mix-blend-mode: multiply;
}
@media (min-width: 1000px) {
  :is(.serviceSplide) .imgWrapper img {
    height: 100vh;
    
     /* aspect-ratio: 1; */
  }
  :is( #projectDetail) .imgWrapper img {
    /* height: 100vh; */
    
     /* aspect-ratio: 1; */
  }
}
.serviceSplide .splide__pagination {
  bottom: 5%;
}

footer .container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
}

/* Define the custom property for the gradient alpha */
@property --gradient-alpha {
  syntax: '<number>';
  initial-value: 0.8;
  inherits: false;
}
@property --gradient-beta {
  syntax: '<number>';
  initial-value: 0.7;
  inherits: false;
}
.newsCard,
.projectsCard {
  &::after {
    inset: 0;
    height: 1rem;
    margin-block-end: auto;
    background-color: var(--color-yellow);
    content: '';
    position: absolute;
    scale: 0 1;
    transition: scale 200ms ease-in-out;
  }

  &:hover::after {
    scale: 1 1;
  }
  .imgWrapper {
    position: relative;
    inset: 0;
    /* Your existing imgWrapper styles */
  }

  .imgWrapper::after {
    content: '';
    position: absolute;
    inset: 0; /* shorthand for top/right/bottom/left: 0 */
    background: radial-gradient(
      rgba(0, 0, 0, var(--gradient-beta)),
      rgba(0, 0, 0, var(--gradient-alpha))
    );
    --gradient-alpha: 0.6;
    --gradient-beta: 0.2;
    transition: --gradient-alpha 400ms ease, --gradient-beta 400ms ease;
  }

  &:hover .imgWrapper::after {
    --gradient-alpha: 0.3;
    --gradient-beta: 0;
  }

  /* For older browsers */
  @supports not (
    background:
      radial-gradient(transparent, rgba(0, 0, 0, var(--gradient-alpha)))
  ) {
    .imgWrapper::after {
      background: radial-gradient(transparent, rgba(0, 0, 0, 0.6));
      opacity: 1;
      transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:hover .imgWrapper::after {
      opacity: 0;
    }
  }
}

.projectsCard {
  .imgWrapper::after {
    background: radial-gradient(
      rgba(0, 0, 0, var(--gradient-beta)),
      rgba(0, 0, 0, var(--gradient-alpha))
    );
    --gradient-alpha: 0.2;
    --gradient-beta: 0.2;
    transition: --gradient-alpha 400ms ease, --gradient-beta 400ms ease;
  }
}
.newsCard {
  @media (min-width: 48rem) {
    &:nth-child(odd)::after {
      transform-origin: right;
    }
    &:nth-child(even)::after {
      transform-origin: left;
    }
    &:nth-child(even) {
      margin-top: calc(var(--section-gap) * -3);
    }
  }
}
article .socials svg {
  height: 1.5rem;
  width: auto;
}

.bi-whatsapp {
  color: #25d366;
}
.bi-facebook {
  color: #1773ea;
}

.bi-linkedin {
  color: #007bb5;
}

article .container {
  width: 100%;
  @media (width >= 64rem) {
    max-width: calc(64rem);
  }
  @media (width >= 80rem) {
    max-width: calc(68.75rem);
  }
  @media (width >= 96rem) {
    max-width: calc(80rem);
  }
}
/* .footer-grid{
@media (width >= 64rem) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
} */




.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
    padding-right: 36px !important;
}

#menu-header-menu {
    a, .accordion-toggle{
        font-size: var(--text-3xl);
        line-height: var(--text-3xl--line-height);
        @media (width>64rem) {
            font-size: var(--text-4xl);
            line-height: var(--text-4xl--line-height);
        }
    }
    .accordionGrid{

        a{
            font-size: var(--text-4xl);
            line-height: var(--text-4xl--line-height);
            @media (width<48rem) {
                font-size: var(--text-3xl);
                line-height: var(--text-3xl--line-height);
                &:has(.accordionTitle){
                    pointer-events: auto;
                }
            }
        }
    }
}

footer div:has(>a[target="_blank"]){
    @media (width<48rem) {
        margin-block-start: 0.75rem
    }
}

footer .privacy{
    flex-wrap: wrap;
    gap: 0.5rem;
    a{
        text-decoration: underline;
    }
} 

@media (width<48rem) {
.aboutTxtContent{
    &>div{
        gap: calc(var(--spacing) * 6);
            &>div{
                font-size: var(--text-xl);
                line-height: var(--text-xl--line-height);
            }   
        }
        p{
        	margin-top: calc(var(--spacing) * 6);
    	}
    }
    .circleBefore {
        font-size: var(--text-xl);
        line-height: var(--text-xl--line-height);
    }
}
 /* Mobile-specific styles */
@media (min-width: 768px) {
    .accordion-toggle{
        display:none;
    }
}

    /* .accordion-toggle {
        padding: 0.5rem 0;
        position: relative;
    }
    
    .accordion-toggle:after {
        
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .accordionContent.active {
        display: block !important;
    }
} */