/* Professional UI Design Standards */

/* Reset margins and padding but preserve essential spacing */
section, .section {
    margin: 0 !important;
    padding: 60px 0 !important;
}

/* Navigation spacing */
.navbar {
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar-brand img {
    height: 60px !important;
}

.nav-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 8px 16px !important;
}

/* Hero section professional spacing */
.gov-hero-modern {
    padding: 120px 0 20px 0 !important;
    min-height: 100vh;
}

.text-wrapper {
    padding: 40px !important;
    max-width: 600px;
}

.headline1 {
    font-size: 3.5rem !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
    font-weight: 800 !important;
}

.description {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    margin: 30px 0 40px 0 !important;
    color: #666 !important;
}

.hero-badge {
    font-size: 14px !important;
    padding: 12px 24px !important;
    margin-bottom: 30px !important;
    background: linear-gradient(135deg, #D3BF97, #C4A975) !important;
    color: white !important;
    border-radius: 50px !important;
    display: inline-block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

.hero-badge span {
    color: white !important;
}

/* Clean Modern Button Styling */
.btn-action {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 16px 28px !important;
    margin: 10px 0 !important;
    border-radius: 50px !important;
    border: none !important;
    color: white !important;
    text-decoration: none !important;
    backdrop-filter: blur(10px) !important;
    min-width: 320px !important;
    transition: all 0.4s ease !important;
    transform: translateY(20px) scale(0.95) !important;
    opacity: 0 !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15) !important,
        0 4px 16px rgba(0, 0, 0, 0.10) !important,
        0 2px 8px rgba(0, 0, 0, 0.05) !important;
    background-clip: padding-box !important;
}

/* Active button state */
.btn-action.active {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.20) !important,
        0 6px 20px rgba(0, 0, 0, 0.15) !important,
        0 3px 10px rgba(0, 0, 0, 0.10) !important;
}

/* Clean gradient styles for each category */
.btn-action.primary-btn {
    background: linear-gradient(135deg, #FF6B6B 0%, #E74C3C 50%, #C0392B 100%) !important;
    box-shadow:
        0 8px 32px rgba(231, 76, 60, 0.4) !important,
        0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.btn-action.primary-btn.active {
    box-shadow:
        0 12px 40px rgba(231, 76, 60, 0.5) !important,
        0 6px 20px rgba(0, 0, 0, 0.20) !important;
}

.btn-action.secondary-btn {
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 50%, #1E8449 100%) !important;
    box-shadow:
        0 8px 32px rgba(46, 204, 113, 0.4) !important,
        0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.btn-action.secondary-btn.active {
    box-shadow:
        0 12px 40px rgba(46, 204, 113, 0.5) !important,
        0 6px 20px rgba(0, 0, 0, 0.20) !important;
}

.btn-action.tertiary-btn {
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 50%, #1F4E79 100%) !important;
    box-shadow:
        0 8px 32px rgba(52, 152, 219, 0.4) !important,
        0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.btn-action.tertiary-btn.active {
    box-shadow:
        0 12px 40px rgba(52, 152, 219, 0.5) !important,
        0 6px 20px rgba(0, 0, 0, 0.20) !important;
}

/* Button hover effects */
.btn-action:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.25) !important,
        0 8px 24px rgba(0, 0, 0, 0.18) !important,
        0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.btn-icon {
    font-size: 20px !important;
    margin-right: 12px !important;
}

/* Services section */
.services-section {
    padding: 80px 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
}

.section-header h2 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.section-header p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: #666 !important;
    text-align: center !important;
    margin-bottom: 50px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Service cards */
.service-carousel-card {
    padding: 30px !important;
    margin: 15px !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08) !important;
    text-align: center !important;
    background: white !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.service-carousel-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
}

.service-carousel-card h4 {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    margin: 20px 0 15px 0 !important;
    color: #333 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.service-carousel-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #666 !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Service icon improvements */
.service-icon-wrapper {
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #8B9DC3, #6B7DA3) !important; /* Default soft blue-gray */
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px auto !important;
    box-shadow: 0 3px 15px rgba(139, 157, 195, 0.15) !important;
    transition: all 0.3s ease !important;
}

.service-icon-wrapper:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 5px 20px rgba(139, 157, 195, 0.25) !important;
}

.service-icon-wrapper i {
    font-size: 2.2rem !important;
    color: white !important;
    margin: 0 !important;
}

/* Specific icon colors with softer, muted tones and non-repeating adjacent colors */
.service-carousel-card:nth-child(1) .service-icon-wrapper {
    background: linear-gradient(135deg, #7C9885, #5F7A61) !important; /* Soft Sage Green */
    box-shadow: 0 3px 15px rgba(124, 152, 133, 0.2) !important;
}

.service-carousel-card:nth-child(2) .service-icon-wrapper {
    background: linear-gradient(135deg, #B08D7A, #967061) !important; /* Warm Taupe */
    box-shadow: 0 3px 15px rgba(176, 141, 122, 0.2) !important;
}

.service-carousel-card:nth-child(3) .service-icon-wrapper {
    background: linear-gradient(135deg, #8B9DC3, #6B7DA3) !important; /* Dusty Blue */
    box-shadow: 0 3px 15px rgba(139, 157, 195, 0.2) !important;
}

.service-carousel-card:nth-child(4) .service-icon-wrapper {
    background: linear-gradient(135deg, #C9A88E, #A98871) !important; /* Soft Terracotta */
    box-shadow: 0 3px 15px rgba(201, 168, 142, 0.2) !important;
}

.service-carousel-card:nth-child(5) .service-icon-wrapper {
    background: linear-gradient(135deg, #94A89A, #748A7C) !important; /* Muted Mint */
    box-shadow: 0 3px 15px rgba(148, 168, 154, 0.2) !important;
}

.service-carousel-card:nth-child(6) .service-icon-wrapper {
    background: linear-gradient(135deg, #A8A5BE, #88859E) !important; /* Lavender Gray */
    box-shadow: 0 3px 15px rgba(168, 165, 190, 0.2) !important;
}

.service-carousel-card:nth-child(7) .service-icon-wrapper {
    background: linear-gradient(135deg, #B5A097, #958077) !important; /* Soft Clay */
    box-shadow: 0 3px 15px rgba(181, 160, 151, 0.2) !important;
}

.service-carousel-card:nth-child(8) .service-icon-wrapper {
    background: linear-gradient(135deg, #92A8B3, #728893) !important; /* Slate Blue-Gray */
    box-shadow: 0 3px 15px rgba(146, 168, 179, 0.2) !important;
}

.service-carousel-card:nth-child(9) .service-icon-wrapper {
    background: linear-gradient(135deg, #A6B29C, #86927C) !important; /* Sage Gray */
    box-shadow: 0 3px 15px rgba(166, 178, 156, 0.2) !important;
}

.service-carousel-card:nth-child(10) .service-icon-wrapper {
    background: linear-gradient(135deg, #B3A4A0, #938480) !important; /* Warm Gray */
    box-shadow: 0 3px 15px rgba(179, 164, 160, 0.2) !important;
}

/* Duplicate cards for seamless animation (11-15 mirror 1-5) */
.service-carousel-card:nth-child(11) .service-icon-wrapper {
    background: linear-gradient(135deg, #7C9885, #5F7A61) !important; /* Soft Sage Green - same as card 1 */
    box-shadow: 0 3px 15px rgba(124, 152, 133, 0.2) !important;
}

.service-carousel-card:nth-child(12) .service-icon-wrapper {
    background: linear-gradient(135deg, #B08D7A, #967061) !important; /* Warm Taupe - same as card 2 */
    box-shadow: 0 3px 15px rgba(176, 141, 122, 0.2) !important;
}

.service-carousel-card:nth-child(13) .service-icon-wrapper {
    background: linear-gradient(135deg, #8B9DC3, #6B7DA3) !important; /* Dusty Blue - same as card 3 */
    box-shadow: 0 3px 15px rgba(139, 157, 195, 0.2) !important;
}

.service-carousel-card:nth-child(14) .service-icon-wrapper {
    background: linear-gradient(135deg, #C9A88E, #A98871) !important; /* Soft Terracotta - same as card 4 */
    box-shadow: 0 3px 15px rgba(201, 168, 142, 0.2) !important;
}

.service-carousel-card:nth-child(15) .service-icon-wrapper {
    background: linear-gradient(135deg, #94A89A, #748A7C) !important; /* Muted Mint - same as card 5 */
    box-shadow: 0 3px 15px rgba(148, 168, 154, 0.2) !important;
}

/* Partners section */
.partner-logos {
    padding: 20px 0 60px 0 !important;
    margin-top: 0 !important;
}

.logo-item img {
    max-height: 80px !important;
    width: auto !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

.logo-item:hover img {
    opacity: 1 !important;
}

/* Consultation section */
.hero-alwadha {
    padding: 0 !important;
    margin: 0 !important;
}

.hero-title11 {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 25px !important;
}

.hero-description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.9) !important;
}

/* Mission & Vision section */
.py-6 {
    padding: 80px 0 !important;
}

.py-6 h2 {
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 40px !important;
}

/* Trust indicators */
.trust-indicators {
    padding: 60px 0 !important;
}

.trust-item {
    text-align: center !important;
    padding: 20px !important;
}

.trust-item i {
    font-size: 2rem !important;
    margin-bottom: 15px !important;
}

.trust-item h5 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

.trust-item p {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* Mission & Vision Section */
.py-6 {
    padding: 60px 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.py-6 h2 {
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 40px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.py-6 .bg-white {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mission & Vision Icons */
.mission-vision-icon,
.bg-danger.rounded-circle,
.bg-success.rounded-circle {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.mission-vision-icon i,
.bg-danger.rounded-circle i,
.bg-success.rounded-circle i {
    font-size: 1.8rem !important;
    color: white !important;
}

/* Mission specific styling */
.bg-danger.rounded-circle {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
}

/* Vision specific styling */
.bg-success.rounded-circle {
    background: linear-gradient(135deg, #28a745, #218838) !important;
}

/* Social Icons Improvements */
.social-links {
    display: flex !important;
    gap: 15px !important;
    margin-top: 20px !important;
}

.social-link {
    width: 45px !important;
    height: 45px !important;
    background: linear-gradient(135deg, #D3BF97, #C4A975) !important;
    color: white !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(211, 191, 151, 0.3) !important;
}

.social-link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 20px rgba(211, 191, 151, 0.5) !important;
    background: linear-gradient(135deg, #C4A975, #D3BF97) !important;
    color: white !important;
}

.social-link i {
    font-size: 1.2rem !important;
}

/* Footer Contact Icons */
.footer-contact i,
.contact-info i,
.footer-contact .contact-info i {
    color: #D3BF97 !important;
}

/* Footer WhatsApp Button */
.footer-whatsapp {
    margin-top: 25px !important;
}

.footer-whatsapp-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    color: white !important;
    padding: 15px 25px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
}

.footer-whatsapp-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
    color: white !important;
}

.footer-whatsapp-btn i {
    font-size: 1.3rem !important;
}

/* Footer */
.footer {
    padding: 60px 0 30px 0 !important;
}

.footer-logo {
    height: 80px !important;
    width: auto !important;
    margin-bottom: 20px !important;
    filter: brightness(0) invert(1) !important;
}

.footer-brand h4 {
    font-size: 1.3rem !important;
    margin-bottom: 20px !important;
}

.footer-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    color: #d1d5db !important;
}

.footer-links h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

.footer-links a {
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #d1d5db !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.footer-links a:hover {
    color: #D3BF97 !important;
}

.footer-bottom {
    padding: 20px 0 !important;
    border-top: 1px solid #374151 !important;
    margin-top: 30px !important;
}

/* WhatsApp Chat Fixed Position Override - Ultimate Fix */
#whatsapp-chat,
.whatsapp-chat {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    top: auto !important;
    z-index: 999999 !important;
    transform: none !important;
    will-change: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.whatsapp-btn {
    position: static !important;
    transform: none !important;
    will-change: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    background: #25D366 !important;
    color: white !important;
}

.whatsapp-btn:hover {
    transform: translateY(-3px) !important;
    background: #128C7E !important;
    color: white !important;
    text-decoration: none !important;
}

/* Ensure no other elements interfere */
* {
    z-index: auto;
}

.whatsapp-chat * {
    z-index: auto !important;
}

/* Container adjustments */
.container {
    padding: 0 20px !important;
    max-width: 1200px !important;
}

/* Responsive typography */
@media (max-width: 768px) {
    .headline1 {
        font-size: 2.5rem !important;
    }

    .section-header h2 {
        font-size: 2rem !important;
    }

    .hero-title11 {
        font-size: 1.8rem !important;
    }

    .text-wrapper {
        padding: 20px !important;
    }

    .service-carousel-card {
        margin: 10px 0 !important;
    }

    /* WhatsApp responsive positioning */
    .whatsapp-chat {
        bottom: 20px !important;
        left: 20px !important;
    }
}