/* ===========================
   Global
=========================== */

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

html,
body{
    height:100%;
    font-family:'Poppins',sans-serif;
}


/* ===========================
   Hero
=========================== */

.hero-section{
    position:relative;
    width:100%;
    min-height:100vh;

    background:url("../images/background.png") center center/cover no-repeat;
}


/* ===========================
   Logo
=========================== */

.site-logo{
    position:absolute;
    top:30px;
    left:40px;
    z-index:10;
}

.site-logo img{
    height:65px;
}


/* ===========================
   Layout
=========================== */

.hero-section .container{
    min-height:100vh;
}

.hero-section > .container > .row{
    min-height:100vh;
}


/* ===========================
   Left Content
=========================== */

.hero-content{

    max-width:560px;

    margin-top:-120px;

}


.hero-title{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(2.5rem,4.2vw,4.2rem);

    font-weight:500;

    line-height:1.08;

    color:#4B2A22;

    margin-bottom:30px;

}


.hero-accent{

    display:block;

    color:#C86A42;

    font-style:italic;

}


.hero-text{

    font-family:'Poppins',sans-serif;

    font-size:1.05rem;

    line-height:2;

    color:#4B2A22;

    max-width:540px;

}


/* ===========================
   Form Card
=========================== */

.form-card{

    width:100%;

    max-width:480px;

    background:#f3efe7;

    border-radius:24px;

    padding:42px;


    /* normal position */
    transform:translateY(35px);

    margin-left:auto;


    box-shadow:
        18px 18px 45px rgba(0,0,0,.30);

}


/* ===========================
   Form Heading
=========================== */

.form-title{

    font-family:'Cormorant Garamond',serif;

    font-size:2.2rem;

    font-weight:600;

    color:#4B2A22;

    text-align:center;

    margin-bottom:8px;

}


.form-subtitle{

    font-family:'Poppins',sans-serif;

    color:#4B2A22;

    text-align:center;

    font-size:.95rem;

    margin-bottom:30px;

}


/* ===========================
   Inputs
=========================== */

.form-control{

    height:54px;

    border-radius:10px;

    border:1px solid #d8d2ca;

    padding:22px 16px 8px;

    font-size:.95rem;

    font-family:'Poppins',sans-serif;

    box-shadow:none;

}


.form-control:focus{

    border-color:#C86A42;

    box-shadow:none;

}


textarea.form-control{

    height:140px;

    resize:none;

    padding-top:28px;

}


/* ===========================
   Floating Labels
=========================== */

.form-group{

    position:relative;

}


.form-group label{

    position:absolute;

    left:16px;

    top:17px;

    color:#8d857c;

    font-size:.9rem;

    pointer-events:none;

    transition:.25s ease;

}


.form-group .form-control:focus + label,
.form-group .form-control:not(:placeholder-shown) + label{

    top:-10px;

    left:12px;

    padding:0 4px;

    background:#f3efe7;

    font-size:.75rem;

    font-weight:500;

    color:#C86A42;

}


/* ===========================
   Button
=========================== */

.submit-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:10px;

    background:#4B2A22;

    color:#fff;

    font-family:'Poppins',sans-serif;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:1px;

    transition:.25s;

}


.submit-btn:hover{

    background:#C86A42;

}


/* ==================================
   Large Desktop
   1400px and above
================================== */

@media (min-width:1400px){

   .hero-section {
        background-position:60% center;
    }
    .form-card{

        transform:translate(-80px,35px);
         transition:
        margin .4s ease,
        transform .4s ease;
    }

}


/* ==================================
   Medium Desktop / Laptop
   992px - 1399px
================================== */

@media (min-width:992px) and (max-width:1399px){

    .hero-section {
        background-position:60% center;
    }

    .hero-content{

        max-width:500px;

        margin-top:-70px;

    }


    .hero-title{

        font-size:3.2rem;

    }


    .hero-text{

        font-size:1rem;

        line-height:1.8;

    }


    .form-card{
       
        max-width:430px;
        transform:translate(-50px,35px);
         transition:
        margin .4s ease,
        transform .4s ease;
       

        padding:35px;

    }

}


/* ==================================
   Tablet / Mobile
   below 991px
================================== */

@media (max-width:991px){


    .hero-section{

        padding:120px 0 60px;

        background-position:25% center;

    }


    .hero-section .container,
    .hero-section .row{

        min-height:auto;

    }


    .hero-content{
        text-align:center;
        

        margin:0 auto 60px;

        max-width:520px;

        padding:28px 24px;

        

        backdrop-filter:blur(8px);

        border-radius:24px;

    }


    .hero-text{

        margin:auto;

    }


    .form-card{

        max-width:100%;

        transform:none;
         transition:
        margin .4s ease,
        transform .4s ease;
    }

}


/* ==================================
   Small Mobile
================================== */

@media (max-width:576px){


    .site-logo{

        top:20px;

        left:20px;

    }


    .site-logo img{

        height:50px;

    }


    .form-card{

        padding:28px;

    }


    .form-title{

        font-size:1.9rem;

    }


}