.hero-contact {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    background-image: url("https://cdn.propelholdings.com/web/v3/hero-contact.webp");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    color: var(--hero-text);
}
.iframe-box{
    background: #F2F4F5;
}
.contact-hero-content{
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emails-section {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40vh;
    background: var(--color-bg-light);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .emails-section {
        height: auto;
        padding: 2rem 0px;
    }
    .iframe-box {
        background: #F2F4F5;
        padding-top:3rem !important;
        padding-bottom:3rem !important;
        margin-bottom:3rem;
    }
    .emails-section {
        box-shadow: var(--shadow-lg);
        position: relative;
        padding-bottom:3rem;
        padding-top:3rem;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 40vh;
        background: var(--color-bg-light);
        overflow: hidden;
    }
}


 .investor-subscribe {
     color: var(--color-text-base);
     padding: 1rem 0;
 }

 .investor-subscribe .subscribe-card {
     overflow: hidden;
     border-radius: 2rem;
 }

 .investor-subscribe .left-pane {
     border-right: 1px solid rgba(255, 255, 255, 0.9);
 }

 .investor-subscribe .content-wrap,
 .investor-subscribe .form-wrap {
     width: 100%;
     max-width: inherit;
 }

 .investor-subscribe .hero-title {

     color: var(--color-text);
 }

 .investor-subscribe .body-copy {
     font-size: var(--font-size-base);
     line-height: 1.35;
     color: var(--color-text-muted);
     max-width: 26rem;
 }

 .investor-subscribe .contact-title {
     font-size: 1.55rem;
     line-height: 1.05;
     letter-spacing: -0.03em;
     color: var(--color-text-base);
 }

 .investor-subscribe .contact-link {
     color: var(--color-link);
     font-weight: 600;
     font-size: 0.95rem;
     text-decoration: none;
 }

 .investor-subscribe .contact-link:hover,
 .investor-subscribe .contact-link:focus {
     color: var(--color-link-hover);
     text-decoration: none;
 }

 .investor-subscribe .muted-copy,
 .investor-subscribe .policy-copy {
     color: var(--color-text-muted);
     line-height: 1.25;
 }

 .investor-subscribe .muted-copy {
     font-size: var(--font-size-small);
     max-width: 26rem;
 }

 .investor-subscribe .policy-copy {
     max-width: 24rem;
 }

 .investor-subscribe .policy-copy a {
     color: var(--color-link);
 }

 .investor-subscribe .form-label {
     font-size: 1.05rem;
     font-weight: 700;
     color: var(--color-text-base);
 }

 .investor-subscribe .form-control.subscribe-input {
     border: 1px solid transparent;
     border-radius: 50rem;
     padding: 0.875rem 1.25rem;
     color: var(--ph-text);
     background-color: #fff;
     box-shadow: none;
 }



 @media (max-width: 991.98px) {

     .investor-subscribe .left-pane {
         border-right: 0;
         border-bottom: 1px solid rgba(255, 255, 255, 0.9);
     }
 }

 @media (max-width: 575.98px) {
     .investor-subscribe .subscribe-card {
         border-radius: 1.5rem;
     }

     .investor-subscribe .hero-title {
         font-size: 2.1rem;
     }

     .investor-subscribe .body-copy,
     .investor-subscribe .muted-copy,
     .investor-subscribe .policy-copy {
         font-size: var(--font-size-small);
     }

     .investor-subscribe .btn.subscribe-btn {
         width: 100%;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .investor-subscribe .btn.subscribe-btn {
         transition: none;
     }
 }


 .iframe-container {
     position: relative;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     /*<<--- THIS IS THE KEY*/
     width: 100%;
     padding-top: 55%;
     height:100%;
     /* 1:1 Aspect Ratio */
 }

 /* Then style the iframe to fit in the container div with full height and width */
 .responsive-iframe {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     width: 100%;
     min-height: 100%;
     height: auto;
 }

 @media only screen and (max-width: 768px) {
     .iframe-container {
         position: relative;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
         /*<<--- THIS IS THE KEY*/
         width: 100%;
         /* 1:1 Aspect Ratio */
     }
 }