@font-face {
   font-family: Neuton;
   src: url(../fonts/Neuton-Regular.ttf);
}

@font-face {
   font-family: Zain;
   src: url(../fonts/Zain-Regular.ttf);
}

:root {
   --primary-color: #fff;
   --secondary-color: #575A4B;
   --tertiary-color: #f8e7dd;
   --quaternary-color: #C03221;
   --senary-color: #b4713e;
   --white: #fffdf9;
   --line: #e7dcd3;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   min-height: 100vh;
   background: var(--primary-color);
   color: var(--secondary-color);
   font-family: "Zain", sans-serif;
   font-size: 22px;
}

.page {
   min-height: 100vh;
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.brand-side {
   background: var(--tertiary-color);
   display: flex;
   align-items: center;
   padding: 70px;
   position: relative;
   overflow: hidden;
}

.brand-side:before,
.brand-side:after {
   content: "";
   position: absolute;
   border-radius: 50%;
   border: 1px solid #c0322125;
}

.brand-side:before {
   width: 500px;
   height: 500px;
   right: -230px;
   top: -150px;
}

.brand-side:after {
   width: 300px;
   height: 300px;
   left: -180px;
   bottom: -130px;
}

.brand-content {
   max-width: 500px;
   position: relative;
   z-index: 1;
}

.logo {
   font: 700 31px/1 "Neuton", serif;
   text-decoration: none;
   color: var(--quaternary-color);
}
.logo>span{
   font-family: Zain;
   font-weight: 500;
}

.brand-logo {
   margin-bottom: 85px;
   display: inline-block;
}

.kicker {
   font-size: 18px;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: 800;
   color: var(--quaternary-color);
}

h1 {
   font-size: 62px;
   line-height: 1;
   letter-spacing: -2px;
   margin: 12px 0 20px;
}

.brand-content p {
   margin: 0;
   max-width: 440px;
}

.quote {
   margin-top: 38px;
   padding: 22px;
   background: #fff9;
   border: 1px solid #fff;
   border-radius: 22px;
   font-style: italic;
}

.quote b {
   display: block;
   margin-top: 8px;
   font-style: normal;
   color: var(--quaternary-color);
   font-size: 18px;
}

.form-side {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 45px;
}

.login-card {
   width: min(440px, 100%);
}

.mobile-logo {
   display: none;
   margin-bottom: 48px;
}

.head {
   margin-bottom: 32px;
}

.head h2 {
   font-size: 38px;
   line-height: 1.05;
   margin: 0 0 8px;
}

.head p {
   margin: 0;
   color: #77786f;
}

.field {
   margin-bottom: 20px;
}

label {
   display: block;
   font-size: 20px;
   font-weight: 800;
   margin-bottom: 7px;
}

input {
   width: 100%;
   height: 55px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: var(--white);
   padding: 0 16px;
   font: inherit;
   font-size: 20px;
   color: var(--secondary-color);
   outline: none;
}

input:focus {
   border-color: var(--quaternary-color);
   box-shadow: 0 0 0 4px #c0322112;
}

.password {
   position: relative;
}

.password input {
   padding-right: 80px;
}

.toggle {
   position: absolute;
   right: 15px;
   bottom: 13px;
   border: 0;
   background: none;
   color: var(--quaternary-color);
   font: 700 17px "Zain";
   cursor: pointer;
}

.row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 18px;
   margin: 4px 0 25px;
}

.remember {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 18px;
   font-weight: 400;
   margin: 0;
}

.remember input {
   width: 17px;
   height: 17px;
   accent-color: var(--quaternary-color);
}

.forgot {
   color: var(--quaternary-color);
   font-weight: 800;
}

.btn {
   width: 100%;
   height: 55px;
   border: 0;
   border-radius: 999px;
   background: var(--quaternary-color);
   color: #fff;
   font: 800 22px "Zain";
   cursor: pointer;
   transition: .2s;
}

.btn:hover {
   transform: translateY(-2px);
}

.register {
   text-align: center;
   background: var(--tertiary-color);
   border-radius: 18px;
   padding: 17px;
   margin-top: 25px;
   font-size: 19px;
}

.register a {
   color: var(--quaternary-color);
   font-weight: 800;
}

.security {
   text-align: center;
   color: #888;
   font-size: 16px;
   margin-top: 22px;
}

.error {
   display: none;
   color: var(--quaternary-color);
   font-size: 17px;
   margin-top: 7px;
}

.swal-button {
   background-color: var(--quaternary-color);
   color: #fff;
   border: none;
   box-shadow: none;
   border-radius: 20px;
   font-weight: 600;
   font-size: 14px;
   padding: 10px 24px;
   margin: 0;
   cursor: pointer;
}

@media (max-width: 800px) {
   body {
      font-size: 18px;
   }

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

   .brand-side {
      display: none;
   }

   .form-side {
      min-height: 100vh;
      padding: 28px 22px;
      align-items: unset;
   }

   .mobile-logo {
      display: block;
   }

   .logo {
      font-size: 27px;
   }

   .head h2 {
      font-size: 32px;
   }

   label,
   input,
   .btn {
      font-size: 18px;
   }

   .row {
      font-size: 17px;
   }

   .remember {
      font-size: 17px;
   }
}