@import url(/css/styles/index.css);
@import url(/css/layout/index.css);
@import url(/css/components/index.css);
@import url(/css/buttons/index.css);

.box-section-no-padding {
    padding: 0px 0px 150px 0px;
    }

.section-header-animation {
    position: absolute;
    top: 196px;
    transition: all 0.5s ease;
    /* This is 66px more than .centralise-content */
}

.centralise-content {
    position: relative;
    justify-content: center;
    align-items: center;
}

.centralise-content.under-development {
    margin: 65px 0px 170px 0px;
    padding: 20px;
    text-align: center;
}

.hero-emailtext {
    position: relative;
    margin: 36px 0 50px 0px;
    transition: all 0.5s ease;    
    text-align: center;
}    

.canvas-footer{
    position: absolute;
    top: 290px;
    justify-content: center;
    align-items: center;
    max-width: 625px;
    margin-bottom: 300px;
    transition: all 0.5s ease;
    width: calc(100% - 16px - 16px);

}

.pink-button{
    position: relative;
    max-width: fit-content;
    margin: 15% auto 0; /* Adjust margin as needed */
    transform: translate(0, -50%); /* Center vertically */
    transition: all 0.5s ease;
}

.font-H3 {
    font-size: min(8vw, 42px);
    }

#success {
width: 100%;
margin: 0;
} 

.section-background-white {
    min-height: 810px;
    }
 
@keyframes fadeIn2 {from {opacity: 0;}to {opacity: 1;}}

@media screen and (max-width: 800px) {


}

@media screen and (max-width: 450px) {

    .font-H3 {
        font-size: min(12vw, 30px);
        }

    .section-header-animation {
        position: absolute;
        top: 115px;
        transition: all 0.5s ease;
    }

    .section-background-white {
        min-height: 600px;
        }
     

    .canvas-footer{
        top: 195px;
        max-width: calc(100% - 16px - 16px);
        transition: all 0.5s ease;
    }
    
    .pink-button{
        max-width: 260px;
        margin: 22% auto 0; /* Adjust margin as needed */
        transition: all 0.5s ease;
    }

    .hero-emailtext {
        position: relative;
        margin: 44px 0;
        transition: all 0.5s ease;
    }    
}

@media screen and (max-width: 320px) {
    .section-header-animation {
        top: 70px;
    }

    .canvas-footer{
        top: 150px;
    }

    .pink-button{
        margin: 25% auto 0; /* Adjust margin as needed */
    }

    .centralise-content,
    .centralise-content.under-development {
        margin: -30px 16px 186px 16px;
    }
    
    .hero-emailtext {
        position: relative;
        margin: 44px 0 44px 0;
    }  

}