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


:root{

--primary1:#8B1E1E;
--primary1-dark:#6d1111;

--gold:#D8A028;
--gold-dark:#C28B18;

--cream:#FFF9F3;

--text:#444;

--border:#ececec;

--radius:22px;

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

--transition:.35s;

}


.btn-danger{

background:var(--primary1);
border:none;

}

.btn-danger:hover{

background:var(--primary1-dark);

}

/*=============================
Overlay
=============================*/

.popup-overlay{

position:fixed;
left:0;
top:0;

width:100%;
height:100%;

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

backdrop-filter:blur(4px);

opacity:0;
visibility:hidden;

transition:.35s;

z-index:9998;

}

.popup-overlay.active{

opacity:1;
visibility:visible;

}

/*=============================
Popup
=============================*/

.login-popup{

position:fixed;

left:50%;
top:50%;

transform:translate(-50%,-45%) scale(.9);

width:980px;
max-width:95%;

background:#fff;

border-radius:26px;

overflow:hidden;

box-shadow:var(--shadow);

opacity:0;
visibility:hidden;

transition:.35s;

z-index:9999;

}

.login-popup.active{

opacity:1;
visibility:visible;

transform:translate(-50%,-50%) scale(1);

}

/*=============================
Close
=============================*/

.popup-close{

position:absolute;

right:18px;
top:18px;

width:42px;
height:42px;

border:none;

background:#fff;

border-radius:50%;

box-shadow:0 5px 20px rgba(0,0,0,.12);

font-size:20px;

cursor:pointer;

transition:.3s;

z-index:100;

}

.popup-close:hover{

background:var(--primary1);
color:#fff;

transform:rotate(90deg);

}

/*=============================
Left Side
=============================*/

.popup-left{

min-height:620px;

background:#f7f7f7;

}

.popup-image{

position:relative;

width:100%;
height:100%;

}

.popup-image img{

width:100%;
height:100%;

object-fit:cover;

}

.popup-image::before{

content:'';

position:absolute;
inset:0;

background:linear-gradient(
180deg,
rgba(0,0,0,.05),
rgba(0,0,0,.55)
);

}

.popup-overlay-content{

position:absolute;

bottom:45px;
left:40px;
right:40px;

color:#fff;

z-index:5;

}

.popup-overlay-content h2{

font-size:34px;
font-weight:700;

margin-bottom:15px;

}

.popup-overlay-content span{

color:#FFD66E;

}

.popup-overlay-content p{

font-size:15px;
line-height:1.8;

}

/*=============================
Right
=============================*/

.popup-body{

padding:45px;

}

.popup-logo{

width:160px;

}

/*=============================
Tabs
=============================*/

.login-tabs{

background:#FFF4E8;

padding:6px;

border-radius:50px;

display:flex;

}

.login-tabs .nav-item{

flex:1;

}

.login-tabs .nav-link{

width:100%;

border-radius:40px;

font-weight:600;

color:#555;

padding:13px;

border:none;

}

.login-tabs .nav-link.active{

background:var(--primary1);

color:#fff;

}

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

label{

font-size:14px;
font-weight:600;

margin-bottom:8px;

display:block;

color:#555;

}

.input-group{

margin-bottom:10px;

}

.input-group-text{

background:#fff;

border:1px solid var(--border);

border-right:none;

color:var(--gold);

}

.form-control{

height:45px;

border:1px solid var(--border);

box-shadow:none;

}

.form-control:focus{

border-color:var(--gold);

box-shadow:none;

}

.toggle-password{

border:1px solid var(--border);

border-left:none;

background:#fff;

}

.toggle-password:hover{

background:#fafafa;

}

/*=============================
Links
=============================*/

/*=============================
Buttons
=============================*/

.login-btn,
.register-btn{

height:56px;

border:none;

background:var(--primary1);

color:#fff;

font-size:17px;
font-weight:600;

border-radius:12px;

transition:.3s;

}

.login-btn:hover,
.register-btn:hover{

background:var(--primary1-dark);
color: #fff;

}

.google-btn{

height:54px;

border:2px solid #ddd;

background:#fff;

font-weight:600;

}

.google-btn i{

color:#ea4335;

margin-right:8px;

}

.google-btn:hover{

background:#fafafa;

}

.otp-btn{

height:54px;

background:var(--gold);

color:#fff;

border:none;

font-weight:600;

}

.otp-btn:hover{

background:var(--gold-dark);

}

/*=============================
Divider
=============================*/

.divider{

display:flex;

align-items:center;

margin:25px 0;

}

.divider::before,
.divider::after{

content:'';

flex:1;

height:1px;

background:#ddd;

}

.divider span{

padding:0 15px;

font-size:13px;

font-weight:600;

color:#888;

}

/*=============================
Checkbox
=============================*/

input[type=checkbox]{

accent-color:var(--primary1);

margin-right:6px;

}

/*=============================
Animation
=============================*/

.login-popup.active{

animation:popup .35s ease;

}

@keyframes popup{

0%{

opacity:0;

transform:translate(-50%,-45%) scale(.85);

}

100%{

opacity:1;

transform:translate(-50%,-50%) scale(1);

}

}

/*=============================
Responsive
=============================*/

@media(max-width:991px){

.popup-body{

padding:35px;

}

.popup-left{

display:none !important;

}

.login-popup{

width:96%;

}

}

@media(max-width:576px){

.popup-body{

padding:25px;

}

.popup-logo{

width:120px;

}

.login-tabs .nav-link{

font-size:14px;

padding:10px;

}

.form-control{

height:50px;

}

.login-btn,
.register-btn,
.google-btn,
.otp-btn{

height:50px;

font-size:15px;

}

.popup-close{

right:10px;
top:10px;

width:36px;
height:36px;

}

}