/* Reset some defaults */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  background-color: #f9f9f9;
}

section {
  scroll-margin-top: 100px; /* adjust based on navbar height */
}



/* ---------- Modal for analyzing ---------- */
.analysis-modal {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index: 9999;
}
.foot.a{
    color: #fff;
}
text-muted
.analysis-content {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  animation: fadeIn 0.3s ease;
}
.analysis-icon {
  font-size: 48px;
  margin-bottom: 1rem;
}
.progress-bar {
  width: 100%;
  height: auto;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,#6610f2,#0d6efd);
  animation: progressAnim 2s linear infinite;
}
@keyframes progressAnim {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

/* ---------- Result Sections ---------- */
.result-section { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
.result-blue { background-color: #dbeafe; }      /* light blue */
.result-green { background-color: #d1fae5; }     /* light green */
.result-gray { background-color: #e5e7eb; }      /* light gray */

/*prroposal*/
.dash{
  font-size: 1.5rem;
  color: #fff!important;
}
         /* Form + Right Side Text */
    .proposal-section { display: flex; flex-wrap: wrap; gap: 30px; }
    .proposal-form { flex: 1; min-width: 300px; }
    .proposal-info { flex: 1; min-width: 300px; 
      background: linear-gradient(135deg, #6610f2, #0d6efd);
      color: #fff; padding: 40px; border-radius: 15px; display: flex; flex-direction: column; justify-content: center;
    }
    .proposal-info h3 { font-size: 2rem; margin-bottom: 1rem; }
    .proposal-info p { font-size: 1.1rem; line-height: 1.5; }


.output-box { white-space: pre-wrap; background:#f1f3f6; padding:15px; border-radius:12px; }
    
/*resume page*/
  .drop-zone {
    border: 2px dashed #6c757d;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: #6c757d;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
  }

  .drop-zone.dragover {
    background: #e9f7ff;
    border-color: #0d6efd;
    color: #0d6efd;
  }

  .output-box {
    white-space: pre-wrap;
    background:#f1f3f6;
    padding:15px;
    border-radius:12px;
    min-height: 100px;
  }

  .output-box.error { background: #ffe6e6; color: #b30000; }
  .output-box.success { background: #e6ffe6; color: #006600; }

  #spinner {
    display: none;
    font-size: 24px;
    color: #0d6efd;
  }

/* Sidebar */
.sidebar {
  background: linear-gradient(90deg, #6610f2, #0d6efd);
  color:#fff;
  padding:20px;
}
.sidebar a { 
  color:#fff; 
  text-decoration:none; 
  margin:10px 0; 
}
.sidebar a:hover { 
  text-decoration:none; 
    color: darkgrey;
}

/* Cards */
.card { 
  border-radius:15px; 
}

/* Locked tools */
.locked { 
  filter: blur(2px); 
  pointer-events:none; 
  opacity:0.6; 
  transition: all 0.3s; 
}

/* Progress bars */
.progress-bar { 
  transition: width 0.5s; 
}


/* Navbar */
.navbar {
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  padding: 0.8rem 1rem;
}
.navbar .nav-link {
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}
.navbar .nav-link:hover {
  color: darkgrey;
}
.navbar-brand {
  font-size: 1.5rem;
  color: #007bff;
}




/* Hero Section */
.hero {
  position: relative;
  height: 90vh;
/*  background: url('https://images.unsplash.com/photo-1562564055-71e051d33c19?q=80&w=1920') no-repeat center center/cover;*/
    background: linear-gradient(90deg, #6610f2, #0d6efd);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-overlay {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

/* Floating CTA */
#floatingBtn {
  position: fixed;
  bottom: 50px;
  right: 25px;
  z-index: 999;
  border-radius: 50px;
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Features Section Cards */
.feature-card .card {
  transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* Card image */
.feature-card .card-img-top {
  height: 180px;
  object-fit: cover;
}

/* Card title and text */
.feature-card .card-title {
  margin-top: 1rem;
  font-size: 1.1rem;
}
.feature-card .card-text {
  font-size: 0.95rem;
  color: #555;
}

/* Section title */
#features .section-title {
  font-size: 2rem;
  color: #222;
}


/* How It Works Section */
#how {
  background-color: #f8f9fa;
}

#how .section-title {
  font-size: 2rem;
  color: #222;
}

.how-card {
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: #fff;
}

.how-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

/* Icon wrapper */
.how-card .icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background-color: #0d6efd; /* Bootstrap primary color */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-card .feature-icon {
  font-size: 2rem;
  color: #fff;
}

/* Typography */
.how-card h5 {
  margin-top: 1rem;
  font-size: 1.1rem;
}

.how-card p {
  font-size: 0.95rem;
}
/* Tools & Resume Preview Section */
#tool-preview, #resume-preview {
  background-color: #f8f9fa;
}

#tool-preview .section-title,
#resume-preview .section-title {
  font-size: 2rem;
  color: #222;
}

#tool-preview p,
#resume-preview p {
  font-size: 1rem;
  color: #666;
}

/* Tools Preview Cards */
.tool-card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.tool-card img {
  max-height: 300px;
  object-fit: contain;
}




/* Pricing Cards */
.pricing-card {
  border-radius: 12px;
  padding: 2rem 1rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Recommended Badge */
.recommended {
  border: 2px solid #0d6efd;
  position: relative;
}
.badge-recommended {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0d6efd;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  border-radius: 50px;
  font-weight: 600;
}

/* Price font */
.pricing-card h2 {
  font-size: 2rem;
  font-weight: 700;
}

/* List checkmarks */
.pricing-card ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .badge-recommended {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
  }
}

/* Contact Section */
#contact {
  background-color: #f8f9fa;
}

#contact .section-title {
  font-size: 2rem;
  color: #222;
}

#contact p {
  font-size: 1rem;
  color: #666;
}

.contact-form {
  border-radius: 12px;
  background-color: #fff;
  transition: all 0.3s;
}

.contact-form:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.contact-form .form-control {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  transition: all 0.3s;
}

.contact-form .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 8px rgba(13,110,253,0.2);
}

.contact-success {
  font-size: 1rem;
  display: none;
}

/* Footer Section */
.footer {
  background-color: #111;
  color: #fff;
  font-size: 0.95rem;
}

.pb{
  margin-bottom: 2.5rem;
}

.footer h5 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #fff;
}

.footer p {
  color: #bbb !important;
  line-height: 1.6;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s;
}

.foot{color: #bbb !important;}

.footer-links a:hover {
  color: #0d6efd; /* Bootstrap primary color */
  text-decoration: underline;
}

.footer-divider {
  border-color: #444;
  margin: 2.5rem 0;
}

.footer small {
  color: #aaa !important;
}


/*Resume section page*/

    
    .pdf-container {
  background: #fff;         /* white background */
  width: 100%;              /* full width */
  padding: 10px;            /* small padding */
  box-sizing: border-box;   /* include padding in width */
}
.pdf-container .result-section {
  page-break-inside: avoid; /* avoid cutting inside sections */
  margin-bottom: 10px;      /* spacing between sections */
}


/* ---------- Two-column layout ---------- */
.checker-wrapper { display: flex; gap: 2rem; flex-wrap: wrap; }
.form-section { flex: 1; min-width: 300px; }
.info-section { flex: 1; min-width: 300px; background: linear-gradient(135deg, #6610f2, #0d6efd); color: #fff; padding: 2rem; border-radius: 12px; }
.info-section h3 { font-weight: bold; }

/* ---------- Modal for analyzing ---------- */
.analysis-modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index: 9999; }
.analysis-content { background: #fff; padding: 2rem; border-radius: 12px; text-align: center; max-width: 400px; width: 90%; animation: fadeIn 0.3s ease; }
.analysis-icon { font-size: 48px; margin-bottom: 1rem; }
.progress-bar { width: 100%; height: auto; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.progress-fill { width: 0; height: 100%; background: linear-gradient(90deg,#6610f2,#0d6efd); animation: progressAnim 2s linear infinite; }
@keyframes progressAnim { 0% { width: 0%; } 50% { width: 100%; } 100% { width: 0%; } }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

/* ---------- Result Sections ---------- */
.result-section { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
.result-blue { background-color: #dbeafe; }
.result-green { background-color: #d1fae5; }
.result-gray { background-color: #e5e7eb; }

.drop-zone { border: 2px dashed #6c757d; padding: 2rem; text-align: center; border-radius: 8px; cursor: pointer; }
.drop-zone.dragover { background: #e9ecef; }



/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .feature-card img {
    height: 180px;
  }
  .feature-icon {
    font-size: 2.5rem;
  }
}