.login-container {
    max-width: 500px;
    width: 100%;
    padding: 40px 40px;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: #fff;
    text-align: center;
    margin: 20px auto 50px;
}

.login-container h2 {
   font-size: 26px;
   font-weight: 700;
   background: linear-gradient(to right, #ff7b00, #ff0000);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 10px;
}

.login-container p {
   color: #555;
   font-size: 14px;
   margin-bottom: 25px;
}

.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"]{
   width: 100%;
   padding: 17px 17px;
   border: 1px solid var(--border-6);
   border-radius: 8px;
   font-size: 14px;
   margin-bottom: 15px;
   outline: none;
}

.login-container input[type="text"]:focus{
    box-shadow: none;
}

.login-container .options {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
   margin-bottom: 20px;
}

.login-container .options label {
   display: flex;
   align-items: center;
   gap: 5px;
   color: #333;
}

.login-container .options a {
   color: #3366ff;
   text-decoration: none;
}

.login-container .options a:hover {
   text-decoration: underline;
}

.login-container button {
   width: 100%;
   padding: 15px;
   background: var(--primary-color);
   border: none;
   border-radius: 30px;
   color: white;
   font-weight: 600;
   cursor: pointer;
   transition: 0.3s;
   font-size: 15px;
}

.login-container button:hover {
   background: darkred;
}

.divider {
   display: flex;
   align-items: center;
   margin: 25px 0;
   color: #888;
   font-size: 13px;
}

.divider::before,
.divider::after {
   content: "";
   flex: 1;
   height: 1px;
   background: #ddd;
   margin: 0 10px;
}

.social-buttons {
   display: flex;
   justify-content: space-between;
   gap: 10px;
}

.social-buttons a {
   flex: 1;
   background: #ffecec;
   border: none;
   border-radius: 20px;
   padding: 10px;
   cursor: pointer;
   font-weight: 500;
   font-size: 14px;
   color: #333;
   transition: 0.3s;
}

.social-buttons a:hover {
   background: #ffdddd;
}

.signup-text {
   margin-top: 25px;
   font-size: 13px;
}

.signup-text a {
   color: red;
   text-decoration: none;
   font-weight: 600;
}

.signup-text a:hover {
   text-decoration: underline;
}

@media (max-width: 768px){
   .login {
      padding-top: 100px;
   }
}


@media (max-width: 480px) {
   .login {
      padding-top: 180px;
   }
   .login-container {
      padding: 30px 15px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
   }

   .login-container h2 {
      font-size: 22px;
   }

   .login-container p {
      font-size: 13px;
   }

   .social-buttons {
      flex-direction: column;
   }

   .social-buttons button {
      width: 100%;
   }

   .options {
      flex-direction: column;
      align-items: flex-start;
   }

   .options a {
      align-self: flex-end;
   }
}

/* ------------------------------ sign up ------------------------------ */
.signup {
    padding: 150px 0 80px;
}
.signup-card {
   display: flex;
   width: 100%;
   background: var(--white-color);
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
   padding: 40px;
   flex-wrap: wrap;
   gap: 40px;
   margin: 0 auto;
}
.form-container {
   flex: 1 1 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.welcome-title {
   background: linear-gradient(90deg, #FF9A01 2%, #F00 99.96%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   font-size: 2.2rem;
   font-weight: bold;
   margin-bottom: 5px;
}
.subtitle {
   color: #4a4a4a;
   font-size: 1rem;
   margin-bottom: 30px;
}
.input-group {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 15px;
   margin-bottom: 20px;
}
.text-input {
   width: 100%;
   padding: 16px 18px;
   border: 1px solid #ddd;
   border-radius: 8px !important;
   font-size: 1rem;
   outline: none;
   transition: border-color 0.2s;
   box-sizing: border-box;
}
.text-input:focus {
   border-color: var(--primary-color);
}
.signup-card .btn-2 {
   width: 100%;
   padding: 17px;
   margin-top: 10px;
   border-radius: 30px !important;
}

.primary-button:hover {
   background: var(--gradient-1);
   box-shadow: 0 4px 15px rgba(224, 0, 0, 0.4);
}
.login-link {
   margin-top: 25px;
   font-size: 0.95rem;
   color: #4a4a4a;
}
.login-link a {
   color: var(--primary-color);
   text-decoration: none;
   font-weight: bold;
   transition: color 0.2s;
}

.login-link a:hover {
   color: #ff4500;
   text-decoration: underline;
}
.social-container {
   flex: 1 1 35%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding-left: 40px;
   position: relative;
}
.social-title {
   font-size: 1.2rem;
   color: #4a4a4a;
   font-weight: 500;
   margin-bottom: 25px;
   align-self: flex-start;
}
.social-buttons {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.social-button {
   width: 100%;
   padding: 15px;
   border: 1px solid #f0f0f0;
   border-radius: 10px;
   background-color: #FFF0F0;
   color: #333;
   font-size: 1rem;
   font-weight: 500;
   text-align: center;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
}
.social-button:hover {
   background-color: #FFE5E5;
   border-color: var(--primary-color);
}

/* Media Query for Responsiveness (Mobile View) */
@media (max-width: 768px) {
   section.signup {
      padding: 180px 0 80px;
   }
   .signup-card {
      padding: 20px;
      max-width: 500px;
   }
   .form-container, .social-container {
      flex: 1 1 100%;
      padding: 0;
   }
   .social-container::before {
      display: none;
   }
   .form-container::after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: #e0e0e0;
      margin-top: 20px;
   }
   .social-title {
      align-self: center;
      margin: 0px;
   }
}