.home-hero-section{
  width: 100%;
  position: relative;
  padding: 240px 0 100px 0;
}

.image-container{
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.image-container.fade-out{
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}


@keyframes slideIn {
  from {
    transform: translateX(-20px);
  }
  to {
    transform: translateX(0);
  }
}

.image-container.is-animating img {
  animation: slideIn 2s ease-out forwards; 
}

.home-hero-section .image-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 50%;
    overflow: hidden;
}

.image-container .background-construct{
    position: relative;
    width: 100%;
    height: 100%;
    float: right;
    margin-top: 50px;
}

.background-construct .back-image-wrapper{
    position: absolute;
        width: 900px;
        height: 100%;
        transform: scale(1.1);
        transform-origin: 0% 0%;
        -webkit-mask-image: url('https://www.charlesanddean.com/hubfs/CD%20Ampersand%20Filled.svg');
        mask-image: url('https://www.charlesanddean.com/hubfs/CD%20Ampersand%20Filled.svg');
        -webkit-mask-size: fill;
        mask-size: fill;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
}

.background-construct .fore-image-wrapper{
    position: absolute;
    width: 900px;
    height: 100%;
    transform: scale(1.1); transform-origin: 0% 0%;
    pointer-events: none;
    -webkit-mask-image: url('https://www.charlesanddean.com/hubfs/CD%20Ampersand%20Filled%20Overlay.svg');
    mask-image: url('https://www.charlesanddean.com/hubfs/CD%20Ampersand%20Filled%20Overlay.svg');
    -webkit-mask-size: fill;
    mask-size: fill;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
}

.background-construct .back-image-wrapper img, .background-construct .fore-image-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-hero-section .content-container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 70px;
}

.home-hero-section .content-container .content-column{
  flex: 1;
  align-self: center;
  z-index: 1;
}

.home-hero-section .content-container .content-column:last-child{
  align-self: end;
}

.home-hero-section .section-title{
  width: 100%;
}

.home-hero-section .section-title h1{
  font-family: 'Poppins', sans-serif;
  font-size: 50px;
  line-height: 120%;
  margin: 0 0 15px;
  font-weight: 600;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.home-hero-section .body-text p{
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 125%;
  margin: 0 0 30px;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.home-hero-section .section-title h1.fade-out, 
.home-hero-section .body-text p.fade-out {
  opacity: 0;
}

.home-hero-section .home-form .label-text{
  margin: 0 0 5px;
  font-weight: 600;
  font-size: 14px;
}

.home-hero-section .home-form {
  width: 100%;
}

.home-hero-section .home-form .radio-container{
  width: 100%;
  display: flex;
  gap: 30px;
}

.home-hero-section .home-form .radio-wrapper{
  border: 1.5px solid #4fad9f;
  border-radius: 50px;
  padding: 3px 0 5px;
}

.home-hero-section .home-form .radio-container input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  background: #ffffff;
}

.home-form .radio-container .radio-wrapper:has(input[type="radio"]:checked){
  background: radial-gradient(39.72% 40.63% at 50% 111.46%, #44d4af 0, #35a090 100%);
  color: #ffffff;
}

.home-hero-section .home-form .radio-container label{
  width: 100%;
  display: flex;
}

.home-hero-section .home-form .radio-container label span{
  text-align: center;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  margin: 5px 15px 3px 15px;
  line-height: 120%;
}

.home-form .bottom-wrapper{
  display: flex;
  gap: 25px;
  margin-top: 25px;
}

.home-form .value-wrapper{
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-form .value-wrapper input{
  height: 50px;
  outline: none;
  border-radius: 5px;
  border: 1px solid #b1b1b1;
  padding: 5px 15px;
}

.home-form .value-wrapper input::-webkit-outer-spin-button,
.home-form .value-wrapper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.home-form .value-wrapper input[type=number] {
  -moz-appearance: textfield;
}

.home-form .submit-wrapper{
  flex: 1;
  align-self: end;
}

.home-form .submit-wrapper input{
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  background: radial-gradient(39.72% 40.63% at 50% 111.46%, #44d4af 0, #35a090 100%);
  border: none;
  color: #ffffff;
  font-size: 16px;
  padding: 0 25px;
  margin: 0;
}

.home-hero-section .compliance-text{
  margin-top: 30px;
  width: 100%;
}

.home-hero-section .compliance-text p{
  margin: 0;
  font-size: 16px
}

@media only screen and (max-width:1250px) {
.home-hero-section{
  padding: 215px 50px 70px;
}

.background-construct .back-image-wrapper{
    width: 800px;
}

.background-construct .fore-image-wrapper{
    width: 800px;
}

.background-construct .back-image-wrapper img, .background-construct .fore-image-wrapper img{
    object-fit: contain;
}
  
.home-hero-section .home-form .radio-container{
  gap: 15px;
}
  
.home-hero-section .section-title h1{
  font-size: 43px;
}
}

@media only screen and (max-width:768px) {
.home-hero-section{
  padding: 215px 20px 70px;
}

.home-hero-section .image-container{
    height: calc(100% + 50px);
    left: 0;
    border-radius: 0 0 30px 0;
}

.image-container .background-construct{
    margin-top: 0;
}

.background-construct .back-image-wrapper{
    width: 100%;
    height: 100%;
    transform: scale(1.1);
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-position: 0% 0%;
    mask-repeat: no-repeat;

}

.background-construct .fore-image-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1);
    pointer-events: none;
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-position: 0% 0%;
    mask-repeat: no-repeat;
    background: linear-gradient(rgba(5,28,44,.8),rgba(5,28,44,.6) 50%,rgba(5,28,44,.8));
}

.background-construct .back-image-wrapper img, .background-construct .fore-image-wrapper img{
    object-fit: cover;
}
  
.background-construct .fore-image-wrapper img{
    visibility: hidden;
}

.home-hero-section .compliance-text p{
  color: #ffffff;
  text-align: center;
}
  
  
  
  
.home-hero-section .section-title h1{
  font-size: 35px;
  margin: 0 0 15px;
  text-align: center;
  color: #ffffff;
}
  
.home-hero-section .body-text p{
  font-size: 16px;
  text-align: center;
  color: #ffffff;
}

.home-hero-section .content-container .content-column:last-child{
  display: none;
}
  
  
.home-hero-section .home-form .label-text{
  text-align: center;
  color: #ffffff;
}
  
.home-form .bottom-wrapper .label-text{
  text-align: left;
}
  
.home-hero-section .home-form .radio-container{
  width: 100%;
  display: flex;
  gap: 15px 20px;
  justify-content: center;
  flex-wrap: wrap;
  color: #ffffff;
}
  
.home-form .submit-wrapper input{
  width: 100%;
}
}

@media only screen and (max-width:600px) {
.home-hero-section{
  padding: 160px 20px 50px;
}

@media only screen and (max-width:520px) {
.home-form .bottom-wrapper{
  display: block;
}
  
.home-form .bottom-wrapper .label-text{
  text-align: center;
}
  
.home-form .value-wrapper{
  margin-bottom: 15px;
}
}