/* Afrisurge Template Overrides */

/* Force template styles to load and override any conflicts */

/* Ensure main slider background images display */
.main-slider .slide .image-layer {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Ensure service section displays properly */
.service-style1-area {
    padding: 100px 0 !important;
}

/* Ensure about section displays properly */
.about-style1-area {
    padding: 100px 0 !important;
}

/* Working process section */
.working-process-area {
    padding: 100px 0 !important;
}

/* Company benefits section */
.company-benefits-area {
    padding: 100px 0 !important;
}

/* Slogan areas */
.slogan-area,
.slogan-style2-area,
.slogan-style3-area {
    padding: 60px 0 !important;
}

/* Ensure proper spacing */
.sec-title {
    margin-bottom: 50px !important;
}

/* Force carousel to work */
.banner-carousel.owl-carousel {
    opacity: 1 !important;
    display: block !important;
}

/* Ensure service cards have proper styling */
.single-service-style1 {
    transition: all 0.3s ease !important;
    margin-bottom: 30px !important;
}

.single-service-style1:hover {
    transform: translateY(-10px) !important;
}

/* Progress circles styling */
.progress-block .graph-outer {
    position: relative !important;
}

/* Count up animations */
.count-text {
    font-weight: 700 !important;
    font-size: 48px !important;
}

/* Ensure proper icon fonts load */
.icon-phone-call,
.icon-check,
.icon-business,
.icon-report,
.icon-global,
.icon-protection,
.icon-development,
.icon-customer-service,
.icon-analysis,
.icon-verification {
    font-family: 'icomoon' !important;
    speak: none !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
}

/* Template specific fixes */
.boxed_wrapper.ltr {
    direction: ltr !important;
}

/* Ensure preloader doesn't interfere */
.loader-wrap {
    z-index: 9999 !important;
}

/* Force proper heading styles */
.sec-title h2 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

.sec-title h3 {
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--afrisurge-primary) !important;
}

/* Big title styling for slider */
.big-title h2 {
    font-size: 60px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 30px !important;
}

/* Debugging - temporarily show section backgrounds */
.main-slider {
    background-color: #000 !important;
}

.service-style1-area {
    background-color: #fff !important;
}

.about-style1-area {
    background-color: #f8f9fa !important;
}

/* CRITICAL FIX: Footer positioning override */
/* Override the template's fixed footer positioning that causes overlap */
.bottom-parallax {
    position: static !important;
    height: auto !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

.bottom-parallax .footer-area {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    height: auto !important;
}

.footer-area {
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
    z-index: 1 !important;
}

/* Ensure footer flows naturally after main content */
main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Add proper spacing between main content and footer */
.footer-area {
    margin-top: 50px !important;
}

/* Ensure parallax class doesn't interfere */
.parallax-visible .bottom-parallax {
    opacity: 1 !important;
    z-index: 1 !important;
}

/* CRITICAL FIX: Slogan Area Yellow Rectangle Issue */
/* Fix overlapping elements and background conflicts in slogan-area section */
.slogan-area {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Remove any problematic shape overlays that might create yellow rectangles */
.slogan-area .shape {
    display: none !important; /* Temporarily hide shape elements */
}

/* Ensure slogan text has proper layering and no background conflicts */
.slogan-area .slogan-text-box {
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important; /* Remove any background colors */
}

.slogan-area .slogan-text-box h2 {
    color: var(--afrisurge-white) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    background: none !important; /* Remove any background */
    position: relative !important;
    z-index: 11 !important;
}

/* Fix the span element that might be causing the yellow rectangle */
.slogan-area .slogan-text-box h2 span {
    background: var(--afrisurge-gradient-warm) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
    position: relative !important;
    z-index: 12 !important;
    /* Remove any box shadows or outlines that might create rectangles */
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Ensure span doesn't have a background box */
.slogan-area .slogan-text-box h2 span::before,
.slogan-area .slogan-text-box h2 span::after {
    display: none !important; /* Remove any pseudo-elements */
}

/* Fix the background image and parallax elements */
.slogan-area .slogan-area__bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Hide any additional background elements that might conflict */
.slogan-area .container {
    position: relative !important;
    z-index: 5 !important;
}

/* Experience box positioning fix */
.slogan-area .parallax-scene {
    position: absolute !important;
    right: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 8 !important;
}

.slogan-area .experience-box {
    background: rgba(var(--afrisurge-orange-rgb), 0.9) !important;
    border-radius: 50% !important;
    padding: 30px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(var(--afrisurge-orange-rgb), 0.3) !important;
}

/* Button positioning and visibility */
.slogan-area .slogan-btn-box {
    position: relative !important;
    z-index: 9 !important;
    margin-top: 40px !important;
}

/* Debugging: Temporarily add border to identify the problematic element */
.slogan-area * {
    /* Remove any yellow backgrounds */
    background-color: transparent !important;
}

.slogan-area .slogan-text-box h2 span {
    /* Force remove any yellow background specifically */
    background-color: transparent !important;
    /* Only keep the gradient for text */
    background: var(--afrisurge-gradient-warm) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Alternative fix: If the issue persists, use solid color instead of gradient */
.slogan-area-text-fix .slogan-text-box h2 span {
    background: none !important;
    color: var(--afrisurge-orange-primary) !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}

/* FOOTER ICON FIXES */
/* Fix social icons that aren't displaying */
.footer-social-link ul li a i.fab {
    font-family: "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

.footer-social-link ul li a i.fas {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

/* Specific icon fixes */
.footer-social-link ul li a i.fab.fa-linkedin:before {
    content: "\f08c"; /* LinkedIn icon */
}

.footer-social-link ul li a i.fab.fa-envelope:before {
    content: "\f0e0"; /* Envelope icon */
}

.footer-social-link ul li a i.icon-facebook-circular-logo:before {
    content: "\f09a"; /* Facebook icon fallback */
    font-family: "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* Contact Information Icon Fixes */
.contact-info .contact-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
}

.contact-info .contact-item .icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: var(--afrisurge-orange-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing) !important;
}

.contact-info .contact-item .icon:hover {
    background: var(--afrisurge-amber) !important;
    transform: scale(1.05) !important;
}

.contact-info .contact-item .icon i {
    color: var(--afrisurge-white) !important;
    font-size: 18px !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

.contact-info .contact-item .icon i.fas.fa-map-marker-alt:before {
    content: "\f3c5"; /* Map marker icon */
}

.contact-info .contact-item .icon i.fas.fa-phone:before {
    content: "\f095"; /* Phone icon */
}

.contact-info .contact-item .icon i.fas.fa-envelope:before {
    content: "\f0e0"; /* Envelope icon */
}

.contact-info .contact-item .text {
    flex: 1 !important;
    margin: 0 !important;
    padding-top: 8px !important;
}

.contact-info .contact-item .text p {
    color: var(--afrisurge-gray-300) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.contact-info .contact-item .text p a {
    color: var(--afrisurge-white) !important;
    font-weight: 500 !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing) !important;
    text-decoration: none !important;
}

.contact-info .contact-item .text p a:hover {
    color: var(--afrisurge-amber) !important;
}

/* Social Icons Styling Improvements */
.footer-social-link ul {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.footer-social-link ul li {
    margin: 0 !important;
}

.footer-social-link ul li a {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background: var(--afrisurge-gray-700) !important;
    color: var(--afrisurge-white) !important;
    border: 2px solid var(--afrisurge-gray-600) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--afrisurge-transition-normal) var(--afrisurge-easing) !important;
    text-decoration: none !important;
}

.footer-social-link ul li a:hover {
    background: var(--afrisurge-orange-primary) !important;
    border-color: var(--afrisurge-orange-primary) !important;
    color: var(--afrisurge-white) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(var(--afrisurge-orange-rgb), 0.4) !important;
}

.footer-social-link ul li a i {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Mobile responsive fixes for footer contact and social */
@media (max-width: 768px) {
    .contact-info .contact-item .icon {
        width: 40px !important;
        height: 40px !important;
        margin-right: 12px !important;
    }
    
    .contact-info .contact-item .icon i {
        font-size: 16px !important;
    }
    
    .contact-info .contact-item .text p {
        font-size: 14px !important;
    }
    
    .footer-social-link ul li a {
        width: 40px !important;
        height: 40px !important;
    }
    
    .footer-social-link ul li a i {
        font-size: 16px !important;
    }
}

/* Fix any icon font loading issues */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.woff2') format('woff2');
}

/* Ensure Font Awesome loads properly */
.fas, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* END FOOTER ICON FIXES */

/* Mobile responsive fixes for slogan area */
@media (max-width: 768px) {
    .slogan-area .parallax-scene {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        text-align: center !important;
        margin-top: 30px !important;
    }
    
    .slogan-area .experience-box {
        padding: 20px !important;
    }
    
    .slogan-area .slogan-text-box h2 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
}