:root {
    --primary-color: #4F46E5;
    --primary-dark: #4338CA;
    --secondary-color: #F9FAFB;
    --text-dark: #111827;
    --text-light: #6B7280;
    --white-color: #FFFFFF;
    --border-color: #E5E7EB;
    --success-color: #10B981;
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Manrope', sans-serif; color: var(--text-dark); background-color: var(--white-color); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- Header & Navigation --- */
.main-header { background-color: var(--white-color); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; }
.navbar { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.logo { font-size: 1.8rem; font-weight: 800; color: var(--text-dark); text-decoration: none; }
.logo i { color: var(--primary-color); }
.nav-menu { list-style: none; display: flex; gap: 40px; }
.nav-menu a { text-decoration: none; color: var(--text-light); font-weight: 600; transition: color 0.2s; }
.nav-menu a:hover { color: var(--primary-color); }
.nav-actions { display: flex; gap: 15px; }
.btn { padding: 10px 22px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.2s; border: 1px solid transparent; }
.btn-primary { background-color: var(--primary-color); color: var(--white-color); }
.btn-primary:hover { background-color: var(--primary-dark); }
.btn-secondary { background-color: var(--white-color); color: var(--primary-color); border-color: var(--primary-color);}
.btn-secondary:hover { background-color: var(--primary-color); color: var(--white-color); }
.btn-large { padding: 14px 32px; font-size: 1.1rem; }
.hamburger { display: none; }

/* --- Hero Section --- */
.hero-section { background-color: var(--secondary-color); padding: 80px 0; }
.hero-container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.hero-tagline { display: inline-block; background-color: #E0E7FF; color: var(--primary-color); padding: 6px 12px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; margin-bottom: 20px; }
.hero-content h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.hero-content .subtitle { font-size: 1.1rem; color: var(--text-light); max-width: 500px; margin-bottom: 40px; line-height: 1.6; }
.hero-image-container img { max-width: 100%; animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }

/* --- Tracking Section --- */
.tracking-section { padding: 0; margin-top: -50px; position: relative; z-index: 10; }
.tracking-form { display: flex; max-width: 700px; margin: 0 auto; background: var(--white-color); border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); }
.tracking-form i { color: var(--text-light); font-size: 1.2rem; padding: 20px; }
.tracking-form input { flex-grow: 1; border: none; background: none; font-size: 1.1rem; padding: 20px 0; outline: none; }
.tracking-form button { background-color: var(--primary-color); color: var(--white-color); border: none; padding: 0 30px; border-radius: 0 12px 12px 0; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.tracking-form button:hover { background-color: var(--primary-dark); }

/* --- Tracking Result Section --- */
.tracking-result-section { padding: 100px 0 60px; background-color: var(--white-color); }
.tracking-result-section h3 { text-align: center; font-size: 2rem; margin-bottom: 50px; }
.timeline { display: flex; justify-content: space-between; position: relative; }
.timeline::before { content: ''; position: absolute; top: 20px; left: 5%; width: 90%; height: 4px; background: var(--border-color); }
.timeline-item { text-align: center; width: 18%; opacity: 0.4; }
.timeline-icon { width: 40px; height: 40px; background: var(--border-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 15px; font-size: 1.2rem; color: var(--text-light); border: 4px solid var(--secondary-color); position: relative; z-index: 1; transition: all 0.3s ease; }
.timeline-content h4 { font-size: 1rem; margin-bottom: 5px; }
.timeline-content p { font-size: 0.85rem; color: var(--text-light); }
.timeline-item.completed { opacity: 1; }
.timeline-item.completed .timeline-icon { background-color: var(--success-color); color: var(--white-color); }
.timeline-item.completed .timeline-content h4 { color: var(--text-dark); }
.not-found-message { text-align: center; color: #DC2626; font-weight: 500; font-size: 1.1rem; margin-top: 30px; }

/* --- General Section Styling --- */
.features-section, .how-it-works-section { padding: 100px 0; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-tagline { display: inline-block; background-color: #E0E7FF; color: var(--primary-color); padding: 6px 12px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; margin-bottom: 15px; }
.section-header h2 { font-size: 2rem; font-weight: 700; }

/* --- Features/Services Section --- */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.feature-card { background: var(--white-color); padding: 30px; border-radius: 16px; text-align: left; border: 1px solid var(--border-color); transition: all 0.3s ease; }
.feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.feature-card .icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 20px; }
.feature-card h3 { margin-bottom: 10px; font-size: 1.3rem; }
.feature-card p { color: var(--text-light); line-height: 1.6; }

/* --- How it Works Section --- */
.how-it-works-section { background-color: var(--secondary-color); }
.steps-container { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.step-card { width: 30%; text-align: center; }
.step-number { width: 40px; height: 40px; background-color: var(--white-color); color: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 700; margin: 0 auto 20px; }
.step-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 20px; }
.step-card h3 { margin-bottom: 10px; font-size: 1.3rem; }
.step-card p { color: var(--text-light); }
.step-line { flex-grow: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--primary-color), var(--primary-color) 6px, transparent 6px, transparent 12px); margin: 20px 0; }

/* --- Footer --- */
.main-footer { background: var(--text-dark); color: #9CA3AF; padding: 20px 0; text-align: center; }

/* --- Responsive --- */
@media (max-width: 992px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; }
    .hero-content .subtitle { margin-left: auto; margin-right: auto; }
    .hero-image-container { display: none; }
    .features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .nav-menu { display: none; }
    .hamburger { display: block; }
    .hero-content h1 { font-size: 2.5rem; }
    .features-grid { grid-template-columns: 1fr; }
    .steps-container { flex-direction: column; align-items: center; }
    .step-card { width: 80%; margin-bottom: 30px; }
    .step-line { width: 2px; height: 40px; transform: rotate(90deg); margin: 0; }
}

/* --- Responsive Fixes for Mobile Screens --- */
@media (max-width: 768px) {
    .main-content {
        padding: 15px;
    }
    .header-title {
        font-size: 1.3rem;
    }
    .summary-grid {
        grid-template-columns: 1fr; /* Stack cards in a single column */
        padding: 0;
        margin-top: 15px;
    }
    .task-section {
        padding: 15px;
        margin: 15px 0 0 0;
    }
    .profile-page-grid {
        grid-template-columns: 1fr;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px; /* Base font size for small mobile */
    }
    .section-header h2 {
    font-size: 1.8rem !important;
    font-weight: 700;
}
    .header-title {
        font-size: 1.1rem;
    }
    .summary-card h4 {
        font-size: 0.9rem;
    }
    .summary-card p {
        font-size: 1.6rem;
    }
    .task-card {
        padding: 15px;
    }
    .task-id {
        font-size: 1rem;
    }
    .task-details, .task-details p, .task-details a {
        font-size: 0.9rem; /* Increased font size for details */
    }
    .cod-amount {
        font-size: 1rem;
    }
    .action-btn-icon {
        font-size: 0.9rem; /* Increased button font size */
        padding: 10px 12px;
    }
    .modal-content {
        padding: 20px;
    }
    .modal-header h3 {
        font-size: 1.2rem;
    }
    .table-container.agent-table th, .table-container.agent-table td {
        padding: 12px;
        font-size: 0.9rem;
    }
}