/*=========================================
  RESET
=========================================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*=========================================
  BODY
=========================================*/
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(
        180deg,
        rgba(19,27,52,.20) 0%,
        rgba(19,27,52,.50) 100%
    );
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;

    /* background: url("https://www.corpuschristifreightliner.com/openhouse/assets/images/BG1.jpg") center center / cover; */
    /* backdrop-filter: blur(1px) saturate(180%); */
  /* -webkit-backdrop-filter: blur(1px) saturate(180%); */
}

/*=========================================
  HERO SECTION
=========================================*/
/* .hero {
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;

    overflow: hidden;

    opacity: 1;
    transition: opacity .8s ease, transform .8s ease;
} */


.hero {
    /* min-height: 100vh;
    min-height: 100dvh; */

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 20px 20px 0;   /* remove bottom padding */

    overflow: hidden;

    opacity: 1;
    transition: opacity .8s ease, transform .8s ease;
}

.hero.hide {
    opacity: 0;
    transform: scale(.97);
}

/*=========================================
  HERO CARD
=========================================*/
.overlay-card {

    position: relative;

    width: 100%;
    max-width: 1100px;

    min-height: 650px;
    height: 90vh;

    background: url("../images/hero.jpg") center center / cover no-repeat;

    border-radius: 16px;
    overflow: hidden;

    /* box-shadow: 0 12px 30px rgba(0,0,0,.25); */
    /* box-shadow: 0 -35px 50px 30px rgba(0,0,0,.25); */
    box-shadow: 0 -50px 50px 30px rgba(0,0,0,.25);


}

/*=========================================
  HERO CONTENT
=========================================*/
.hero-content {

    position: absolute;

    top: 40px;
    left: 40px;

    width: min(620px, calc(100% - 80px));

    padding: 35px;

    background: rgba(255,255,255,.88);

    backdrop-filter: blur(8px);

    border-radius: 12px;

}

.hero-content h2 {

    font-size: 2.3rem;
    line-height: 1.2;

    color: #1b2742;

    margin-bottom: 30px;

    font-weight: 400;

}

.date {

    font-size: 1rem;
    font-weight: 700;

    color: #27334f;

    margin-bottom: 25px;

}

.hero-content p {

    color: #394252;

    line-height: 1.8;

    font-size: 1rem;

}

.small {

    margin-top: 20px;

}

/*=========================================
  HERO FOOTER
=========================================*/
.hero-footer {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 25px 40px;

    background: linear-gradient(
        to top,
        rgba(255,255,255,.95),
        rgba(255,255,255,.70),
        transparent
    );

}

/*=========================================
  BUTTON
=========================================*/
.start-btn {

    background: #132347;
    color: #fff;

    border: none;
    border-radius: 8px;

    padding: 15px 45px;

    font-size: 1rem;
    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.start-btn:hover {

    background-color: #91568C;
    color: #000;
    box-shadow: 0 8px 6px -6px #000

}

/*=========================================
  FORM SECTION
=========================================*/
/* .form-section {

    display: block;

    opacity: 0;
    visibility: hidden;

    transform: translateY(60px);

    max-width: 900px;

    margin: 50px auto;

    padding: 20px;

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

} */

.form-section {
    display: none;

    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);

    max-width: 900px;
    margin: 50px auto;
    padding: 20px;

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;
}


.form-section.show {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}

/* .form-card {

    background: rgba(255,255,255,.92);

    border-radius: 12px;

    padding: 35px;

    box-shadow: 0 8px 25px rgba(0,0,0,.18);

} */


.form-card {

    background: rgba(255, 255, 255, 0.90);

    /* backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%); */

    backdrop-filter: blur(32px) saturate(180%);
-webkit-backdrop-filter: blur(32px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.45);

    border-radius: 14px;

    padding: 35px;

    /* box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.75); */

        box-shadow:
        0 25px 50px rgba(0,0,0,.20),
        inset 0 2px 0 rgba(255,255,255,.85),
        0 0 0 1px rgba(255,255,255,.20);
}


/*=========================================
  CARD LOGO
=========================================*/




.card-logo::before {
    content: "";
}


.logo-wrapper {

    position: absolute;

    top: 18px;
    right: 20px;

    padding: 12px 18px;

    background: rgba(0,0,0,.35);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-radius: 12px;

    z-index: 5;

    box-shadow:
        0 8px 20px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.15);

}


.card-logo {

    display:block;

    width: clamp(180px, 30vw, 340px);

    height:auto;

    filter:
        drop-shadow(0 0 6px rgba(255,255,255,.65))
        drop-shadow(0 3px 8px rgba(0,0,0,.8));

}


/*=========================================
  TABLET
=========================================*/
@media (max-width:992px){

    .overlay-card{

        min-height:620px;

    }

    .hero-content{

        width:calc(100% - 60px);

        left:30px;
        top:30px;

    }

    .hero-content h2{

        font-size:2rem;

    }

}

/*=========================================
  MOBILE
=========================================*/
@media (max-width:768px){

    .hero{

        min-height:100dvh;

        padding:15px;

    }

    .overlay-card{

        min-height:auto;

        height:auto;

        display:flex;

        flex-direction:column;

        justify-content:flex-end;

        padding-top:140px;

    }

    .hero-content{

        position:relative;

        top:auto;
        left:auto;

        width:92%;

        margin:0 auto 20px;

        padding:22px;

        background:rgba(255,255,255,.86);

    }

    .hero-content h2{

        font-size:1.6rem;

        margin-bottom:18px;

    }

    .hero-content p{

        font-size:.96rem;

        line-height:1.7;

    }

    .date{

        font-size:.95rem;

    }

    .hero-footer{

        position:relative;

        justify-content:center;

        padding:0 20px 20px;

        background:transparent;

    }

    .start-btn{

        width:100%;

        max-width:340px;

    }

    .form-section{

        margin:30px auto;

        padding:15px;

    }

    .form-card{

        padding:24px;

    }




        .logo-wrapper {
            top: 15px;
            left: 50%;
            right: auto;
            transform: translateX(-50%);

            padding: 8px 12px;
        }

        .card-logo {
            width: 220px;
        }


}

/*=========================================
  SMALL PHONES
=========================================*/
@media (max-width:480px){

    .hero{

        padding:10px;

    }

    .overlay-card{

        padding-top:100px;

    }

    .hero-content{

        width:95%;

        padding:18px;

    }

    .hero-content h2{

        font-size:1.35rem;

    }

    .hero-content p{

        font-size:.92rem;

    }

    .date{

        font-size:.9rem;

    }

    .start-btn{

        width:100%;
        max-width:none;

    }

    .form-section{

        padding:10px;

    }

    .form-card{

        padding:20px;

    }

    .logo-wrapper {

        top: 12px;

        left: 50%;
        right: auto;

        transform: translateX(-50%);

        padding: 6px 10px;

    }

    .card-logo {

        width: 170px;

    }


}