/* Umrah Visa UK - Custom Styles */

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    line-height: 1.6;
    color: #333;
    scroll-behavior: smooth;
}

/* Hero Section Background */
.hero-section {
    background-image: linear-gradient(rgba(5, 89, 5, 0.85), rgba(4, 77, 77, 0.85)), 
                      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23047d4d" width="1200" height="600"/><path fill="%23059059" d="M0 300L50 283.3C100 266.7 200 233.3 300 216.7C400 200 500 200 600 216.7C700 233.3 800 266.7 900 283.3C1000 300 1100 300 1150 300L1200 300L1200 601L1150 601C1100 601 1000 601 900 601C800 601 700 601 600 601C500 601 400 601 300 601C200 601 100 601 50 601L0 601Z"/></svg>');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

/* Package Card Hover Effects */
.package-card {
    transition: all 0.3s ease;
    position: relative;
}

.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 12px;
}

.package-card:hover::before {
    opacity: 1;
}

/* Smooth Scroll Padding for Fixed Nav */
html {
    scroll-padding-top: 80px;
}

/* Button Animations */
a, button {
    transition: all 0.3s ease;
}

/* Trust Badges Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Price Highlight Effect */
.price-highlight {
    position: relative;
    display: inline-block;
}

.price-highlight::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 2px;
}

/* Checkmark Icon Color */
.fa-check-circle {
    flex-shrink: 0;
}

/* Mobile Menu Styling */
@media (max-width: 768px) {
    nav {
        padding: 1rem;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
    }
    
    .hero-section p {
        font-size: 1rem !important;
    }
    
    .package-card {
        margin-bottom: 2rem;
    }
}

/* Gradient Text Effect */
.gradient-text {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Floating Animation for Icons */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

/* Section Divider */
.section-divider {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #059669, #10b981);
    margin: 0 auto;
    border-radius: 2px;
}

/* Card Shadow Levels */
.shadow-subtle {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.shadow-medium {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.shadow-strong {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Responsive Container Padding */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Print Styles */
@media print {
    nav, footer {
        display: none;
    }
    
    .package-card {
        page-break-inside: avoid;
    }
}

/* Loading State */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Accessibility Focus States */
a:focus, button:focus {
    outline: 3px solid #10b981;
    outline-offset: 2px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #059669;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #047857;
}

/* Backdrop Blur Support */
@supports (backdrop-filter: blur(10px)) {
    .backdrop-blur-lg {
        backdrop-filter: blur(10px);
    }
}

/* Islamic Pattern Overlay */
.islamic-pattern {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="0" cy="0" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="60" cy="0" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="0" cy="60" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="60" cy="60" r="2" fill="%23ffffff" opacity="0.1"/></svg>');
    background-repeat: repeat;
}

/* Package Badge Styles */
.package-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1f2937;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(251, 191, 36, 0.3);
}

/* CTA Button Pulse Effect */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* Number Counter Animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.count-animation {
    animation: countUp 1s ease-out;
}