/* =========================================
   SERVICE BHAIYA
   REGISTER CSS
========================================= */

/* =========================================
   PAGE
========================================= */

.register-page{

  min-height:100vh;

  display:grid;

  grid-template-columns:
  1fr 560px;

  background:
  #f8fafc;

}

/* =========================================
   LEFT
========================================= */

.register-left{

  position:relative;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
  60px;

  background:
  linear-gradient(
    135deg,
    #dc2626,
    #7f1d1d
  );

}

/* =========================================
   OVERLAY
========================================= */

.register-overlay{

  position:absolute;

  inset:0;

  background:
  radial-gradient(
    circle at top right,
    rgba(255,255,255,.12),
    transparent 40%
  );

}

/* =========================================
   CONTENT
========================================= */

.register-left-content{

  position:relative;

  z-index:2;

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

}

/* =========================================
   BRAND
========================================= */

.register-brand{

  display:flex;

  align-items:center;

  gap:
  18px;

}

/* =========================================
   BRAND ICON
========================================= */

.register-brand-icon{

  width:76px;
  height:76px;

  border-radius:
  24px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
  #ffffff;

  color:
  #dc2626;

  font-size:
  30px;

  font-weight:
  900;

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

}

/* =========================================
   BRAND TEXT
========================================= */

.register-brand h1{

  font-size:
  42px;

  font-weight:
  900;

  line-height:1;

  color:
  #ffffff;

}

.register-brand h1 span{

  color:
  #fde047;

}

.register-brand p{

  margin-top:
  8px;

  color:
  rgba(255,255,255,.82);

  font-size:
  15px;

}

/* =========================================
   TITLE
========================================= */

.register-left-content h2{

  margin-top:
  60px;

  font-size:
  clamp(
    48px,
    5vw,
    72px
  );

  line-height:1.05;

  font-weight:
  900;

  color:
  #ffffff;

}

/* =========================================
   DESCRIPTION
========================================= */

.register-description{

  margin-top:
  24px;

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

  font-size:
  18px;

  line-height:
  1.9;

}

/* =========================================
   STATS
========================================= */

.register-stats{

  margin-top:
  42px;

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:
  18px;

}

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

.register-stat-card{

  padding:
  24px 20px;

  border-radius:
  24px;

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

  border:
  1px solid rgba(255,255,255,.12);

  backdrop-filter:
  blur(16px);

}

.register-stat-card h3{

  color:
  #ffffff;

  font-size:
  34px;

  font-weight:
  900;

}

.register-stat-card p{

  margin-top:
  10px;

  color:
  rgba(255,255,255,.82);

  font-size:
  14px;

  line-height:
  1.7;

}

/* =========================================
   RIGHT
========================================= */

.register-right{

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
  40px;

  background:
  #ffffff;

}

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

.register-card{

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

  padding:
  40px;

  border-radius:
  32px;

  background:
  #ffffff;

  border:
  1px solid #e2e8f0;

  box-shadow:
  0 20px 60px rgba(15,23,42,.10);

}

/* =========================================
   HEADER
========================================= */

.register-header{

  text-align:center;

}

.register-header h2{

  font-size:
  38px;

  font-weight:
  900;

  color:
  #0f172a;

}

.register-header p{

  margin-top:
  10px;

  color:
  #64748b;

  font-size:
  15px;

}

/* =========================================
   FORM
========================================= */

.register-form{

  margin-top:
  32px;

}

/* =========================================
   GROUP
========================================= */

.form-group{

  margin-bottom:
  20px;

}

/* =========================================
   LABEL
========================================= */

.form-group label{

  display:block;

  margin-bottom:
  10px;

  font-size:
  14px;

  font-weight:
  800;

  color:
  #0f172a;

}

/* =========================================
   INPUTS
========================================= */

.input-box,
.select-box{

  position:relative;

  width:100%;
  height:58px;

  display:flex;

  align-items:center;

  border-radius:
  18px;

  background:
  #f8fafc;

  border:
  1px solid #e2e8f0;

  overflow:hidden;

  transition:
  .3s ease;

}

.input-box:focus-within,
.select-box:focus-within{

  border-color:
  #dc2626;

  box-shadow:
  0 0 0 4px rgba(220,38,38,.10);

}

/* =========================================
   ICONS
========================================= */

.input-box i,
.select-box i{

  width:58px;

  text-align:center;

  color:
  #94a3b8;

  font-size:
  16px;

}

/* =========================================
   INPUT
========================================= */

.input-box input,
.select-box select{

  width:100%;
  height:100%;

  border:none;

  outline:none;

  background:none;

  color:
  #0f172a;

  font-size:
  15px;

  font-weight:
  600;

  padding-right:
  16px;

}

/* =========================================
   TOGGLE
========================================= */

.password-toggle{

  width:58px;
  height:58px;

  border:none;

  background:none;

  color:
  #94a3b8;

  font-size:
  16px;

  cursor:pointer;

}

/* =========================================
   TERMS
========================================= */

.terms-box{

  display:flex !important;

  align-items:flex-start;

  gap:
  12px;

  margin-top:
  6px;

  color:
  #64748b !important;

  font-size:
  14px !important;

  font-weight:
  600 !important;

  line-height:
  1.7;

}

.terms-box input{

  margin-top:
  3px;

  width:16px;
  height:16px;

}

/* =========================================
   BUTTON
========================================= */

.register-btn{

  width:100%;
  height:60px;

  margin-top:
  28px;

  border:none;

  border-radius:
  18px;

  background:
  linear-gradient(
    135deg,
    #dc2626,
    #991b1b
  );

  color:
  #ffffff;

  font-size:
  16px;

  font-weight:
  800;

  cursor:pointer;

  transition:
  .3s ease;

  box-shadow:
  0 18px 40px rgba(220,38,38,.25);

}

.register-btn:hover{

  transform:
  translateY(-2px);

}

/* =========================================
   FOOTER
========================================= */

.register-footer{

  margin-top:
  28px;

  text-align:center;

}

.register-footer p{

  color:
  #64748b;

  font-size:
  14px;

}

.register-footer a{

  color:
  #dc2626;

  font-weight:
  800;

}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px){

  .register-page{

    grid-template-columns:
    1fr 500px;

  }

}

@media(max-width:992px){

  .register-page{

    grid-template-columns:
    1fr;

  }

  .register-left{

    display:none;

  }

}

@media(max-width:768px){

  .register-right{

    padding:
    24px;

  }

  .register-card{

    padding:
    34px 24px;

  }

}

@media(max-width:500px){

  .register-right{

    padding:
    16px;

  }

  .register-card{

    padding:
    28px 18px;

    border-radius:
    24px;

  }

  .register-header h2{

    font-size:
    30px;

  }

}