/* header styles */
 .logo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;

}

.logo img {
  height: 60px;
  width: 60px;
}

.nav {
  width: 100%;
  padding: 4px 0;
  background: #f5f5f5;
  border-bottom: 2px solid #1D1F241A;

}

.nav-container {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  align-content: center;
  align-self: center;
}

.brand-name2 {
  color: #1a1a1a;
  align-self: center;
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 1.5vw, 32px);
  font-weight: 700;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: clamp(8px, 1.5vw, 20px);
  align-items: center;


}

.nav-links-right {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  margin-right: 40px;
  flex-direction: row;
  justify-content: center;
}

.nav-links a {
  display: flex;
  gap: 20px;
  align-items: center;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 20px);
}

.cta-home {
  color: #324dd4;
  box-shadow: 0 2px 0 #324dd4;

}
.worker-agreement-page .cta-agreements  {
  color: #324dd4;
  box-shadow: 0 2px 0 #324dd4;

}

.worker-agreement-page .cta-home  {
 color: #334155;
  box-shadow: 0 2px 0 #F5F5F5;

}
.cta-agreements {
  color: #334155;
  box-shadow: 0 2px 0 #F5F5F5;
}


.about-page .cta-home {
  color: #334155;
  box-shadow: 0 2px 0 #F5F5F5;
}


.contact-page .cta-home {
  color: #334155;
  box-shadow: 0 2px 0 #F5F5F5;
}

.how-it-works-page .cta-home {
  color: #334155;
  box-shadow: 0 2px 0 #F5F5F5;
}

.request-page .cta-home {
  color: #334155;
  box-shadow: 0 2px 0 #f5f5f5;
}

.workers-page .cta-home {
  color: #334155;
  box-shadow: 0 2px 0 #f5f5f5;
}

.cta-how-it-works {
  color: #334155;
}


.how-it-works-page .cta-how-it-works {
  color: #324dd4;
  box-shadow: 0 2px 0 #324dd4;
}

.cta-request {
  color: #334155;

}

.request-page .cta-request {
  color: #324dd4;
  box-shadow: 0 2px 0 #324dd4;

}


.workers-page .cta-painters {
  color: #324dd4;
  box-shadow: 0 2px 0 #324dd4;
}

.cta-painters {
  color: #334155;
}

.cta-about-us {
  color: #334155;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: clamp(14px, 1.5vw, 20px);
  font-weight: 600;
  align-self: center;
}

.how-it-works-page .cta-about-us {
  color: #334155;

}

.request-page .cta-about-us {
  color: #334155;

}

.workers-page .cta-about-us {
  color: #334155;

}

.cta-contact-us {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  background-color: #1a1a1a;
  border-radius: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  color: #FFFFFF;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 600;
  gap: 6px;
  display: flex;

}

.contact-page .cta-contact-us {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  background-color: #1a1a1a;
  border-radius: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  color: #FFFFFF;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 600;
  gap: 6px;
  display: flex;

}

.how-it-works-page .cta-contact-us {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  background-color: #324dd4;
  border-radius: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  color: #FFFFFF;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 600;
  gap: 6px;
  display: flex;

}

.request-page .cta-contact-us {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  background-color: #324dd4;
  border-radius: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  color: #FFFFFF;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 600;
  gap: 6px;
  display: flex;

}

.workers-page .cta-contact-us {
  text-decoration: none;
  font-family: "Inter", sans-serif;
  background-color: #324dd4;
  border-radius: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  color: #FFFFFF;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 600;
  gap: 6px;
  display: flex;

}


.nav-links-right img {
  width: 18px;
  height: 18px;

}

.hamburger {
  display: none;
}

.nav {
  position: relative;
  z-index: 1000;
}

.mobile-only {
  display: none !important;
}



@media (max-width: 950px) {

  .hamburger {
    display: block;
    font-size: 32px;
    cursor: pointer;
  }


  .nav-links,
  .nav-links-right {
    display: none;
  }


  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #f5f5f5;
    padding: 20px 0;
    gap: 15px;

  }

  .nav-links.active a {
    font-size: clamp(16px, 1.5vw, 22px);

  }

  .mobile-only {
    display: flex !important;
    ;
  }

  .about-page .cta-about-us {
    color: #334155;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 600;
    align-self: center;
    color: #324dd4;
    box-shadow: 0 2px 0 #324dd4;
  }

  .nav-links.active .cta-contact-us {
    all: unset;

    color: #334155;
    font-family: "Inter", sans-serif;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 600;

    cursor: pointer;
    text-decoration: none;

    
  }
  .contact-page .cta-contact-us {
    color: #334155;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 600;
    align-self: center;
    color: #324dd4 !important;
    box-shadow: 0 2px 0 #324dd4 !important;
  }


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

 body {
     font-family: "Inter", sans-serif;
     color: #1A1D2D;
     
     
 }
 .full-con{
    background-color: #F4F7FE;
    padding-bottom:60px;
 }

 /* BACK LINK */
 .back-link {
     display: flex;
     align-items: center;
     gap: 6px;
     text-decoration: none;
     color: #324DD4;
     font-size: 14px;
     font-weight: 500;
     padding: 20px 0 0 0;
     width: 90%;
     max-width: 780px;
     margin: 0 auto;
 }

 .back-link::before {
     content: "←";
     font-size: 16px;
 }

 /* HERO */
 .hero {
     text-align: center;
     padding: 30px 20px 10px;
 }

 .hero h1 {
     font-size: clamp(24px, 4vw, 36px);
     font-weight: 800;
     color: #1A1D2D;
     line-height: 1.2;
 }

 .hero p {
     margin-top: 10px;
     font-size: clamp(14px, 2vw, 16px);
     color: #4A5568;
 }

 /* CARD */
 .card {
     background: white;
     border-radius: 16px;
     border: 1px solid #E5E7EB;
     padding: 30px;
     width: 90%;
     max-width: 780px;
     margin: 30px auto;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
 }

 .card-title {
     font-size: 20px;
     font-weight: 700;
     color: #1A1D2D;
     margin-bottom: 6px;
 }

 .card-sub {
     font-size: 14px;
     color: #4A5568;
     margin-bottom: 20px;
 }

 /* SELECT ALL */
 .select-all-row {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 16px;
 }

 .select-all-btn {
     background: none;
     border: none;
     color: #324DD4;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     font-family: "Inter", sans-serif;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .select-all-btn:hover {
     text-decoration: underline;
 }

 /* COMMITMENTS GRID */
 .commitments-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
 }

 @media (max-width: 600px) {
     .commitments-grid {
         grid-template-columns: 1fr;
     }
 }

 .commitment-item {
     border: 2px solid #E5E7EB;
     border-radius: 10px;
     padding: 14px;
     cursor: pointer;
     transition: border-color 0.15s, background-color 0.15s;
     position: relative;
 }

 .commitment-item.checked {
     border-color: #324DD4;
     background-color: #F0F4FF;
 }

 .commitment-item input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     pointer-events: none;
 }

 .commitment-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 6px;
 }

 .commitment-icon {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background-color: #EEF2FF;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-size: 16px;
 }

 .commitment-icon img {
     width: 18px;
     height: 18px;

 }

 .commitment-item.checked .commitment-icon {
     background-color: #EEF2FF;
 }

 .commitment-item.checked {
     border-color: #10B981;
     background-color: #F0FDF4;
 }

 .commitment-item.checked .commitment-check {
     background-color: #10B981;
     border-color: #10B981;
 }

 .commitment-check {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 2px solid #E5E7EB;
     margin-left: auto;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     color: white;
     transition: background-color 0.15s, border-color 0.15s;
 }


 .commitment-title {
     font-size: 14px;
     font-weight: 700;
     color: #1A1D2D;
 }

 .commitment-desc {
     font-size: 13px;
     color: #4A5568;
     line-height: 1.5;
 }

 /* IMPORTANT NOTE */
 .important-note {
     margin-top: 16px;
     background-color: #FFF7ED;
     border: 1px solid #FED7AA;
     border-radius: 10px;
     padding: 14px;
     display: flex;
     gap: 10px;
     align-items: flex-start;
 }

 .important-note-icon {
     font-size: 18px;
     flex-shrink: 0;
 }

  .important-note-icon img {

        width: 18px;    
        height: 18px;
 }

 .important-note p {
     font-size: 13px;
     color: #92400E;
     font-weight: 500;
     line-height: 1.5;
 }

 .important-note strong {
     font-weight: 700;
 }

 /* AGREEMENT TEXT */
 .agreement-box {
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     padding: 20px;
     max-height: 300px;
     overflow-y: auto;
     background-color: #FAFAFA;
     font-size: 14px;
     color: #374151;
     line-height: 1.7;
 }

 .agreement-box h3 {
     font-size: 15px;
     font-weight: 700;
     color: #1A1D2D;
     margin-bottom: 8px;
     margin-top: 16px;
 }

 .agreement-box h3:first-child {
     margin-top: 0;
 }

 .agreement-box p {
     margin-bottom: 10px;
 }

 /* AGREE CHECKBOX */
 .agree-row {
     margin-top: 16px;
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 14px;
     border: 2px solid #E5E7EB;
     border-radius: 10px;
     cursor: pointer;
     transition: border-color 0.15s;
 }

 .agree-row.checked {
     border-color: #10B981;
     background-color: #F0F4FF;
     
 }

.agree-row.checked {
    border-color: #10B981;
    background-color: #F0FDF4;
}

 .agree-row input[type="checkbox"] {
     display: none;
 }

 .agree-checkbox {
     width: 20px;
     height: 20px;
     border-radius: 4px;
     border: 2px solid #E5E7EB;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     color: white;
     margin-top: 1px;
     transition: background-color 0.15s, border-color 0.15s;
 }

 .agree-row.checked .agree-checkbox {
     background-color: #10B981;
     border-color: #10B981;
 }

 .agree-row p {
     font-size: 14px;
     color: #374151;
     font-weight: 500;
     line-height: 1.5;
 }

 /* SIGNATURE */
 .sig-row {
     display: flex;
     gap: 20px;
     margin-top: 20px;
 }

 #signature-card {
    margin-bottom: 0;
}
 

 @media (max-width: 500px) {
     .sig-row {
         flex-direction: column;
     }
 }

 .sig-field {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .sig-label {
     font-size: 13px;
     font-weight: 600;
     color: #1A1D2D;
 }

 .sig-input {
     border: 1px solid #E5E7EB;
     border-radius: 8px;
     padding: 10px 12px;
     font-family: "Inter", sans-serif;
     font-size: 14px;
     color: #1A1D2D;
     width: 100%;
     box-sizing: border-box;
 }

 .sig-input:focus {
     outline: none;
     border-color: #324DD4;
     box-shadow: 0 0 0 2px rgba(50, 77, 212, 0.1);
 }

 .sig-input[readonly] {
     background-color: #F9FAFB;
     color: #6B7280;
 }

 .sig-note {
     margin-top: 10px;
     font-size: 12px;
     color: #6B7280;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 /* SUBMIT BUTTON */
 .submit-btn {
     width: 100%;
     background-color: #324DD4;
     color: white;
     border: none;
     border-radius: 10px;
     padding: 14px;
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     margin-top: 20px;
     transition: background-color 0.15s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .submit-btn:hover {
     background-color: #2a3fb0;
 }

 .submit-btn:disabled {
     background-color: #9CA3AF;
     cursor: not-allowed;
 }

 /* SUCCESS */
 .success-message {
     display: none;
     text-align: center;
     padding: 60px 20px;
     width: 90%;
     max-width: 780px;
     margin: 30px auto;
 }

 .success-icon {
     font-size: 48px;
     margin-bottom: 16px;
     color:#324DD4;
 }

 .success-message h2 {
     font-size: 28px;
     font-weight: 800;
     color: #1A1D2D;
     margin-bottom: 10px;
 }

 .success-message p {
     font-size: 16px;
     color: #4A5568;
 }

 /* SCROLLBAR */
 .agreement-box::-webkit-scrollbar {
     width: 6px;
 }

 .agreement-box::-webkit-scrollbar-track {
     background: #F1F1F1;
     border-radius: 3px;
 }

 .agreement-box::-webkit-scrollbar-thumb {
     background: #CBD5E0;
     border-radius: 3px;
 }