:root {
    --primary: #d4af5a;--secondary: #0b0d12;--accent: #495464;--blue: #2563eb;--success: #10b981;}
/* Hero Section */
.hero-section {background: linear-gradient(135deg, var(--secondary) 0%, #1a2a3a 100%);color: white;padding: 70px 20px;text-align: center;position: relative;overflow: hidden;}
.hero-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><defs><pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="rgba(212,175,90,0.1)"/></pattern></defs><rect fill="url(%23dots)" width="1200" height="600"/></svg>');
        pointer-events: none;}
.hero-section h1 {font-size: clamp(2.5rem, 8vw, 4rem);margin-bottom: 1.25rem;color: var(--primary);animation: slideInDown 0.8s ease-out;}
.hero-section p {font-size: 1.3rem;max-width: 600px;margin: 0 auto;opacity: 0.9;animation: fadeInUp 0.8s ease-out 0.2s both;}

/* Section Header */
.section-header {display: flex;align-items: center;gap: 20px;margin-bottom: 40px;animation: fadeInLeft 0.8s ease-out;}
.section-header::before {content: '';width: 5px;height: 60px;
        background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 100%);
        border-radius: 3px;flex-shrink: 0;}
.section-header h2 {font-size: 2.5rem;color: var(--secondary);}
/* About Card */
.about-card {background: white;border-radius: 16px;padding: 40px;margin-bottom: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 5px solid var(--primary);border-right: 5px solid var(--primary);animation: slideInUp 0.8s ease-out;}
.about-card:hover {transform: translateY(-8px);box-shadow: 0 20px 60px rgba(212, 175, 90, 0.15);}
.about-card p {font-size: 1.1rem;line-height: 2;color: #666;text-align: justify;}
/* Highlight Box */
.highlight-box {background: linear-gradient(135deg, rgba(212, 175, 90, 0.1) 0%, rgba(75, 84, 100, 0.05) 100%);border-left: 5px solid var(--primary);padding: 25px;border-radius: 8px;margin: 20px 0;}
.highlight-box strong {color: var(--primary);font-size: 1.1rem;}
/* Features Grid */
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;margin: 60px 0;}
/* Feature Card */
.feature-card {text-align: center;padding: 40px 30px;background: white;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);transition: all 0.4s ease;animation: fadeInUp 0.8s ease-out;}
.feature-card:nth-child(2) {animation-delay: 0.1s;}
.feature-card:nth-child(3) {animation-delay: 0.2s;}
.feature-card:hover {transform: translateY(-10px);box-shadow: 0 20px 50px rgba(212, 175, 90, 0.2);}
.feature-icon {width: 80px;height: 80px;margin: 0 auto 20px;background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 2rem;color: white;}
.feature-card h3 {font-size: 1.8rem;color: var(--secondary);margin: 15px 0;}
.feature-card p {color: #666;font-size: 1rem;}
/* Lists */
.features-grid ul,.about-card ol {list-style: none;}
.features-grid li,.about-card li {margin: 15px 0;padding-left: 30px;position: relative;    color: #666;font-size: 1.05rem;}
.features-grid li::before,.about-card li::before {content: '✓';position: absolute;left: 0;color: var(--primary);font-weight: bold;font-size: 1.3rem;}
/* Values Section */
.values-section {background: linear-gradient(135deg, var(--secondary) 0%, #1a2a3a 100%);
    color: white;padding: 60px 20px;margin-top: 60px;border-radius: 16px;}
.values-section h2 {font-size: 2.5rem;color: var(--primary);text-align: center;margin-bottom: 40px;}
/* Values Grid */
.values-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 30px;}
.value-item {background: rgba(212, 175, 90, 0.1);padding: 30px;border-radius: 12px;
    border: 2px solid var(--primary);text-align: center;transition: all 0.4s ease;}
.value-item:hover {background: rgba(212, 175, 90, 0.2);transform: scale(1.05);}
.value-item strong {color: var(--primary);font-size: 1.2rem;display: block;}
/******Business Card Styles***************************************/
/* Contact Container */
.contact-container {max-width: 1400px;margin: -40px auto 0;padding: 0 20px;position: relative;z-index: 10;}
/* Quick Contact */
.quick-contact {display: grid;grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));gap: 20px;margin-bottom: 60px;padding: 40px;background: white;border-radius: 20px;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);}
.quick-contact-btn {display: flex;flex-direction: column;align-items: center;gap: 10px;
    padding: 20px;border-radius: 12px;background: linear-gradient(135deg, rgba(212, 175, 90, 0.1) 0%, rgba(75, 84, 100, 0.05) 100%);
    border: 2px solid var(--primary);text-decoration: none;color: var(--secondary);transition: all 0.4s ease;cursor: pointer;}
.quick-contact-btn:hover {background: var(--primary);color: white;transform: translateY(-8px);box-shadow: 0 15px 40px rgba(212, 175, 90, 0.3);}
    .quick-contact-btn i {font-size: 2rem;display: block;}
    .quick-contact-btn span {font-size: 0.9rem;font-weight: 500;text-align: center;}
/* Content Grid */
.content-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 30px;margin-bottom: 60px;}
/* Contact Card */
.contact-card {background: white;border-radius: 16px;overflow: hidden;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);border-top: 5px solid var(--primary);animation: slideInUp 0.8s ease-out;}
.contact-card:hover {transform: translateY(-12px);box-shadow: 0 20px 60px rgba(212, 175, 90, 0.15);}
.card-header {background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);color: white;
    padding: 20px;font-size: 1.5rem;text-align: center;}
.card-body {padding: 30px;}
.contact-card h3 {font-size: 1.3rem;color: var(--secondary);margin-bottom: 15px;}
.contact-card p {font-size: 1rem;color: #666;margin-bottom: 20px;}
/* Phone Display */
.phone-display {background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);color: white;padding: 20px;border-radius: 12px;text-align: center;font-size: 1.3rem;font-weight: bold;letter-spacing: 1px;margin: 20px 0;}
/* Contact Form Card */
.contact-form-card {grid-column: 1 / -1;background: white;border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);overflow: hidden;}
.form-header {background: linear-gradient(135deg, var(--secondary) 0%, #1a2a3a 100%);
    color: white;padding: 40px;text-align: center;}
.form-header h2 {font-size: 2.2rem;margin-bottom: 10px;}
/* Table Responsive */
.table-responsive {overflow-x: auto;}
.table thead {background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;color: white;}
.table thead th {border-bottom: none;font-weight: 600;}
.table tbody tr:hover {background-color: rgba(212, 175, 90, 0.05);}
.table tbody tr:nth-child(even) {background-color: #f8f9fa;}
/* Action Buttons */
.action-buttons {display: flex;gap: 10px;flex-wrap: wrap;justify-content: center;margin-top: 15px;}
    .action-buttons a {padding: 8px 16px;border-radius: 6px;text-decoration: none;font-size: 0.9rem;
        font-weight: 500;transition: all 0.3s ease;display: inline-flex;align-items: center;gap: 8px;}
/* Map Container */
.map-container {border-radius: 16px;overflow: hidden;height: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);}
.map-container iframe {width: 100%;height: 100%;border: none;}
/* Validation */
.validation-error {color: #dc3545;font-size: 0.875rem;margin-top: 5px;display: block;}
.required {color: #dc3545;}
/********************************************************/
/* Animations */
@keyframes slideInDown {
    from {opacity: 0;transform: translateY(-30px);}
    to {opacity: 1;transform: translateY(0);}}
@keyframes slideInUp {
    from {opacity: 0;transform: translateY(30px);}
    to {opacity: 1;transform: translateY(0);}}
@keyframes fadeInLeft {
    from {opacity: 0;transform: translateX(-20px);}
    to {opacity: 1;transform: translateX(0);}}
@keyframes fadeInUp {
    from {opacity: 0;transform: translateY(20px);}
    to {opacity: 1;transform: translateY(0);}}
/* Responsive */
@media (max-width: 768px) {
    .hero-section {padding: 60px 20px;}
    .hero-section h1 {font-size: 2rem;}
    .section-header h2 {font-size: 1.8rem;}
    .about-card {padding: 25px;}
        .about-card p {font-size: 1rem;}

    .feature-card {padding: 25px;}
    .values-grid {grid-template-columns: 1fr;}
    /************/
    .quick-contact {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));padding: 20px;}
    .content-grid {grid-template-columns: 1fr;gap: 20px;}
    .contact-form-card {grid-column: 1;}
    .form-content {padding: 20px;}
    .form-row {grid-template-columns: 1fr;}
    .action-buttons {flex-direction: column;align-items: stretch;}
        .action-buttons a {justify-content: center;}
    .form-actions {flex-direction: column;}
        .form-actions button,.form-actions a {width: 100%;}
    .table {font-size: 0.9rem;}
        .table th,.table td {padding: 0.5rem;}
}