.homepage-content-section {
  --gutter: 12px;
  --content-indent: 100px;
  --quote-mark: url('data:image/svg+xml;utf8,<svg width="81" height="65" viewBox="0 0 81 65" xmlns="http://www.w3.org/2000/svg"><path d="M29.25 0L23.75 30.5H33.75V64.25H0V30L9 0H29.25ZM76.25 0L70.75 30.5H80.75V64.25H47V30L56 0H76.25Z" fill="%2364ACCF"/></svg>');
  --quote-mark-orange: url('data:image/svg+xml;utf8,<svg width="81" height="65" viewBox="0 0 81 65" xmlns="http://www.w3.org/2000/svg"><path d="M29.25 0L23.75 30.5H33.75V64.25H0V30L9 0H29.25ZM76.25 0L70.75 30.5H80.75V64.25H47V30L56 0H76.25Z" fill="%23fbaf44"/></svg>');
  width: 100%;
  padding-top: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
   overflow-x: clip;
  overflow-y: visible;
}

.homepage-content-inner {
  max-width: var(--home-max-w);
  width: 100%;
  padding-inline: var(--gutter);
}

.homepage-content-flex {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.image-content-wrap {
  flex: 1;
  margin-right: calc((100% - 100vw) / 2 - var(--gutter));
  align-self: center;
}

.homepage-content-wrap {
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 28px;
  padding-bottom: 42px;

  h1, h2 {
    margin-bottom: 2rem;
  }

  h2 {
    font-size: 20px;
    font-weight: 700;
	font-family: 'Poppins', sans-serif;
  }

  .intro-header{
	font-size: var(--h2-mid-desk);
	font-weight: 500;
	margin-bottom: 1.5rem;
	padding-top: 12px;
  }

  p{
	font-size: 20px;
  }

.main-header {
    --quote-w: 1.2em;                            
    --quote-h: calc(var(--quote-w) * 65 / 81);   

    padding-block: var(--quote-h);       
    text-wrap: balance;        
	 --quote-shift: 1;
	 --quote-upshift: 1.2;
    padding-right: calc(var(--quote-w) * var(--quote-shift)); 


    &::before,
    &::after {
      content: "";
      display: inline-block;
      width: var(--quote-w);
      height: var(--quote-h);
      background: var(--quote-mark) no-repeat center / contain;
    }

    /* Opening mark: pinned to the first word, just above the first line */
    &::before {
      margin-right: calc(var(--quote-w) * -1);
      margin-top: calc(var(--quote-h) * -1.3);
      vertical-align: top;
	
    }

    /* Closing mark: pinned to the end of the last word, just below the last line */
    &::after {
      margin-left: calc(var(--quote-w) * -1);
      margin-bottom: calc(var(--quote-h) * -1.3);
      vertical-align: bottom;
      rotate: 180deg;         
	        translate:  calc(var(--quote-shift) * 100%) 0;                   /* or whatever flip you already use */
    }
  }

  .homepage-content-text {
    display: flex;
    flex-direction: column;
    gap: 16px;

    a {
      color: var(--pink);

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .cta-btn-wrapper {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

	.site-block-button{
	background: var(--light-blue);
    color: var(--blue);

	}
  }

}

.homepage-content-image {
  display: flex;
  flex-direction: column;
   gap: clamp(15px, 5vw, 86px);

  img {
    width: 100%;
    height: auto;
    max-height: 542px;
    aspect-ratio: 674 / 416;
    object-fit: cover;
    object-position: center;
  }

  .first-img {
    margin-left: 80px;
    border-radius: 25px 0 0 25px;
  }

  .second-img-wrap {
    padding-right: clamp(15px, 5vw, 86px);
    margin-bottom: -220px;
  }

  .second-img {
    border-radius: 25px;
  }
}

.block-navyBlue .homepage-content-wrap .homepage-content-button {
  background: #fff;
  color: var(--blue);
}



.homepage-content-section.work_for_section{
	.image-content-wrap {
    flex: 1;
    margin-right: 0;
    align-self: flex-start;
}

.homepage-content-image {
    .first-img {
        margin-left: 0px;
        border-radius: 10px;
		aspect-ratio: 788 / 667;
		max-height: unset;
    }
}

.main-header {
	&::before,
    &::after {
    
      background: var(--quote-mark-orange) no-repeat center / contain;
    }
}

.homepage-content-wrap {
	padding-top: 0px;
    & .cta-btn-wrapper {
        .site-block-button {
			background: var(--orange);
            color: var(--blue);
		}
	
	}
}	
}




@media (max-width: 1180px){
.image-content-wrap {
  align-self: flex-start;
}

}


@media (max-width: 1080px) {
.homepage-content-wrap {
    p {
        font-size: 16px;
    }
}
}

@media (max-width: 970px) {
  .homepage-content-section {
    --content-indent: 0px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .homepage-content-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .image-content-wrap {
    order: 2;
    margin-right: 0;
  }

  .homepage-content-wrap {
    order: 1;
	padding-top: 60px;

	h1{
		font-size: 32px;
	}
  }

  .homepage-content-image {
	 gap: clamp(30px, 5vw, 86px);
    .second-img-wrap {
		padding-right: 0px;
		 margin-bottom: -120px;
	}
  }	

  

  .homepage-content-wrap {
    & .main-header {
		padding-top: 25px;
		padding-right: 15px;
		padding-bottom: 0px;
	}
}		
}


@media (max-width: 768px){

	.homepage-content-image {
    .first-img {
        margin-left: 45px;
	}

	.second-img-wrap{
		margin-bottom: 0px;
	}
}	

	.homepage-content-flex{
		gap: 60px;
	}
	.homepage-content-wrap {
		padding-bottom: 0px;
		.cta-btn-wrapper {
			margin-top: 2.5rem;
		}
		.intro-header{
			font-size: 20px;
		}

		p{
			font-size: 16px;
		}


		
	}		
}