/* ==========================================
   COMPREHENSIVE CSS FOR ALL PAGES
   Best Deal Forex Website Customization
   ========================================== */

/* Hero Section (All Pages) */
.hero,
.hero-professional {
    padding: 4rem 0 !important;
    min-height: 200px;
}

.hero h1,
.hero-professional h1 {
    font-size: 2.3rem;
}

.hero p,
.hero-professional p {
    font-size: 1.2rem;
}

/* Section Spacing (All Pages) */
.section {
    padding: 1.75rem 0;
}

.section-title {
    margin-bottom: 1rem;
}

.section-title h2 {
    margin-bottom: 0.4rem;
}

.section-light {
    background-color: rgba(245, 247, 250, 1);
}

/* Grid & Cards (All Pages) */
.grid,
.grid-2,
.grid-3,
.grid-4,
.services-grid,
.services-grid-2x3 {
    gap: 2.75rem;
}

/* Services Grid - 2x3 Layout */
.services-grid-2x3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(3, auto) !important;
    gap: 2.75rem !important;
}

.card,
.service-card,
.service-card-professional {
    padding: 1.25rem;
    min-height: 240px;
}

/* Typography (All Pages) */
html {
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.4em;
}

p {
    margin-bottom: 0.6rem;
}

/* Icons (All Pages) */
.professional-icon,
.card-icon,
.service-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 0.75rem;
    border-radius: 16px;
}

/* Footer (All Pages) */
.footer {
    padding: 3rem 0 1rem 0;
}

.footer-content {
    gap: 2rem;
}

/* Tables & Rates (Index Page) */
.forex-rates-table th {
    padding: 16px;
}

.forex-rates-table td {
    padding: 14px;
    font-size: 15px;
}

/* Forms (Contact Page, Knowledge Page) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select,
.form-input {
    padding: 12px;
    font-size: 1rem;
}

label,
.form-label {
    font-size: 0.95rem;
}

/* Buttons (All Pages) */
.btn,
.btn-primary,
.btn-professional,
.btn-secondary,
button[type="submit"] {
    padding: 14px 32px;
    font-size: 1rem;
    border-radius: 12px;
}

/* Navigation Header (All Pages) */
.nav-container {
    padding: 1rem 2rem;
}

.nav-menu {
    gap: 2rem;
}

.nav-item a,
.nav-menu a {
    font-size: 1rem;
}

/* Critical CSS Override */
.hero,
.hero-professional,
.page-header {
    padding: 4rem 0 !important;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .services-grid-2x3 {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    
    .hero,
    .hero-professional {
        padding: 2.5rem 0 !important;
    }
    
    .hero h1,
    .hero-professional h1 {
        font-size: 1.8rem;
    }
    
    .nav-container {
        padding: 0.75rem 1rem;
    }
    
    .nav-menu {
        gap: 1rem;
    }
    
    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        gap: 1.5rem;
    }
}