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

body{
font-family:'Poppins',sans-serif;
background:#efe9dc;
height:100vh;
overflow:hidden;
}

.page{
display:grid;
grid-template-columns:30% 40% 30%;
height:100vh;
}

.left{
position:relative;
background:url("../assets/images/church.jpg") center center;
background-size:cover;
}

.left::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
}

.center{
display:flex;
justify-content:center;
align-items:center;
background:#f8f5ef;
}

.loginBox{
width:430px;
background:#fff;
padding:55px;
border-radius:35px;
box-shadow:0 25px 60px rgba(0,0,0,.18);
position:relative;
z-index:10;
}

.loginBox::before{
content:"";
position:absolute;
top:-18px;
left:50%;
transform:translateX(-50%);
width:110px;
height:4px;
background:#c8a64d;
border-radius:30px;
}

.icon{
font-size:44px;
text-align:center;
margin-bottom:15px;
color:#c8a64d;
}

h3{
text-align:center;
font-family:'Cinzel',serif;
letter-spacing:4px;
color:#b48a25;
font-size:18px;
}

h1{
text-align:center;
font-family:'Cinzel',serif;
font-size:34px;
color:#6f5220;
margin-top:8px;
}

h2{
text-align:center;
font-size:52px;
font-family:'Brush Script MT',cursive;
color:#b48a25;
margin:18px 0 28px;
}

p{
text-align:center;
color:#777;
line-height:28px;
margin-bottom:30px;
}

input{
width:100%;
padding:16px;
border:none;
background:#f4f4f4;
border-radius:10px;
margin-bottom:18px;
font-size:16px;
}

button{
width:100%;
padding:17px;
background:#c8a64d;
color:white;
font-size:17px;
border:none;
border-radius:10px;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#a88423;
transform:translateY(-2px);
}

.right{
position:relative;
background:url("../assets/images/alexander.jpg") center top;
background-size:cover;
}

.right::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to left,rgba(0,0,0,.15),transparent);
}

@media(max-width:1000px){

.page{
grid-template-columns:1fr;
}

.left,
.right{
display:none;
}

.loginBox{
width:90%;
max-width:430px;
}

}
/* ---------- Premium v2 ---------- */

body{
background:linear-gradient(135deg,#efe6d2,#f8f6f2);
}

.loginBox{
overflow:visible;
}

.loginBox::after{
content:"";
position:absolute;
top:-35px;
right:-55px;
width:170px;
height:170px;
background:url("../assets/images/alexander.jpg") center top no-repeat;
background-size:cover;
border-radius:50%;
border:8px solid #ffffff;
box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.left::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to right,
rgba(0,0,0,.55),
rgba(0,0,0,.15));
z-index:1;
}

.loginBox h2{
font-family:'Great Vibes',cursive;
font-size:72px;
font-weight:400;
color:#b8922b;
margin-top:8px;
margin-bottom:20px;
}

button{
letter-spacing:2px;
font-weight:600;
}

input:focus{
outline:none;
box-shadow:0 0 0 3px rgba(200,166,77,.25);
}

.loginBox{
animation:fadeIn .9s ease;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.ornament{
text-align:center;
font-size:22px;
letter-spacing:10px;
color:#c8a64d;
margin-bottom:15px;
}

.line{
width:90px;
height:2px;
background:#c8a64d;
margin:20px auto;
border-radius:5px;
}

.footerText{
margin-top:30px;
text-align:center;
font-size:13px;
color:#999;
letter-spacing:2px;
}

.loginBox{
backdrop-filter:blur(8px);
}

.loginBox:hover{
transform:translateY(-3px);
transition:.35s;
box-shadow:0 35px 80px rgba(0,0,0,.22);
}

input{
transition:.25s;
}

input:hover{
background:#ffffff;
}